diff --git a/README.md b/README.md
index 44dd4b8..f925b28 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
  * @Description   : 
  * @Date          : 2020-02-03 12:52:45
  * @LastEditors   : fineemb
- * @LastEditTime  : 2020-02-12 18:30:09
+ * @LastEditTime  : 2020-05-31 11:11:26
  -->
 
 # Lovelace Thermostat Card
@@ -22,6 +22,11 @@ A simple thermostat implemented in CSS and SVG based on <a href="https://codepen
 ## Preview
 ![](https://bbs.hassbian.com/data/attachment/forum/202003/14/172544q3ajp7742cbo757h.gif)
 
+## Update
+### v1.3.0
++ fix icon
++ Fix the problem that the title blocks the arrow button [#16](https://github.com/fineemb/lovelace-thermostat-card/issues/16#issue-622934186)
++ Remove the small_i parameter and have done adaptive scaling
 ## HACS Installation
 Search for Thermostat Card
 ## Manual Installation
@@ -50,7 +55,6 @@ Search for Thermostat Card
 | entity | string | **Required** | The entity id of climate entity. Example: `climate.hvac`
 | title | string | optional | Card title
 | no_card | boolean | false | Set to true to avoid the card background and use the custom element in picture-elements.
-| small_i | boolean | false | Set to true if you have 2 climate in one card. Default 1 big card. (Must clear browser cache after chageing this value)
 | step | number | 0.5 | The step to use when increasing or decreasing temperature
 | highlight_tap | boolean | false | Show the tap area highlight when changing temperature settings
 | chevron_size | number | 50 | Size of chevrons for temperature adjutment
diff --git a/dist/main.js b/dist/main.js
index 15f0634..b587150 100644
--- a/dist/main.js
+++ b/dist/main.js
@@ -1,6 +1,6 @@
-import {cssData} from './styles.js?v=1.2.9';
-import ThermostatUI from './thermostat_card.lib.js?v=1.2.9';
-console.info("%c Thermostat Card \n%c  Version  1.2.9 ", "color: orange; font-weight: bold; background: black", "color: white; font-weight: bold; background: dimgray");
+import {cssData} from './styles.js?v=1.3.0';
+import ThermostatUI from './thermostat_card.lib.js?v=1.3.0';
+console.info("%c Thermostat Card \n%c  Version  1.3.0 ", "color: orange; font-weight: bold; background: black", "color: white; font-weight: bold; background: dimgray");
 class ThermostatCard extends HTMLElement {
   constructor() {
     super();
@@ -9,7 +9,8 @@ class ThermostatCard extends HTMLElement {
   set hass(hass) {
     const config = this._config;
     const entity = hass.states[config.entity];
-    let ambient_temperature = entity.attributes.current_temperature;
+    if(!entity)return;
+    let ambient_temperature = entity.attributes.current_temperature || 0;
     if (config.ambient_temperature && hass.states[config.ambient_temperature])
       ambient_temperature = hass.states[config.ambient_temperature].state;
     let hvac_state = entity.state;
@@ -102,7 +103,6 @@ class ThermostatCard extends HTMLElement {
     if (!cardConfig.step) cardConfig.step = 0.5;
     if (!cardConfig.highlight_tap) cardConfig.highlight_tap = false;
     if (!cardConfig.no_card) cardConfig.no_card = false;
-    if (!cardConfig.small_i) cardConfig.small_i = false;
     if (!cardConfig.chevron_size) cardConfig.chevron_size = 50;
     if (!cardConfig.num_ticks) cardConfig.num_ticks = 150;
     if (!cardConfig.tick_degrees) cardConfig.tick_degrees = 300;
diff --git a/dist/styles.js b/dist/styles.js
index aadeae9..821b365 100644
--- a/dist/styles.js
+++ b/dist/styles.js
@@ -1,336 +1,303 @@
 export function cssData(user) {
-var css =`
-
-ha-card {
-  overflow: hidden;
-  --rail_border_color: transparent;
-  --auto_color: rgb(227, 99, 4, 1);
-  --cool_color: rgba(0, 122, 241, 0.6);
-  --cool_colorc: rgba(0, 122, 241, 1);
-  --heat_color: #ff8100;
-  --heat_colorc: rgb(227, 99, 4, 1);
-  --manual_color: #44739e;
-  --off_color: #8a8a8a;
-  --fan_only_color: #D7DBDD;
-  --dry_color: #efbd07;
-  --idle_color: #808080;
-  --unknown_color: #bac;
-  --text-color: white;
-}
-ha-card.no_card{
-  background-color: transparent;
-  border: none;
-  box-shadow: none;
-}
-ha-card.no_card .prop{
-  display: none;
-}
-.auto, .heat_cool {
-  --mode_color: var(--auto_color);
-}
-
-.cool {
-  --mode_color: var(--cool_color);
-}
-
-.heat {
-  --mode_color: var(--heat_color);
-}
-
-.manual {
-  --mode_color: var(--manual_color);
-}
-
-.off {
-  --mode_color: var(--off_color);
-}
-.more {
-  --mode_color: var(--off_color);
-}
-.fan_only {
-  --mode_color: var(--fan_only_color);
-}
-
-.eco {
-  --mode_color: var(--auto_color);
-}
-
-.dry {
-  --mode_color: var(--dry_color);
-}
-
-.idle {
-  --mode_color: var(--idle_color);
-}
-
-.unknown-mode {
-  --mode_color: var(--unknown_color);
-}
-
-.c_small_cont {
-  padding: 0px;
-  --title_font_size: 12px;
-  --b_padding: 5% 5% 5% 5%;
-  --climate_info_position_top: 82%;
-  --title_position_top: 22%;
-  --set_temperature_font_size: 25px;
-  --set_temperature_margin_bottom: -5px;
-  --dialog_size: 90%;
-  --icon_size: 24px;
-  --d_icon_size: 28px;
-  --dot_size: 30px;
-  --c_title_w: 40%;
-  --c_title_l: 30%;
-}
-.c_large_cont {
-  padding: 0px;
-  --title_position_top: 25%;
-  --title_font_size: 18px;
-  --b_padding: 10% 10% 10% 10%;;
-  --climate_info_position_top: 82%;
-  --set_temperature_font_size: 25px;
-  --set_temperature_margin_bottom: -5px;
-  --dialog_size: 80%;
-  --icon_size: 38px;
-  --dot_size: 42px;
-  --d_icon_size: 64px;
-  --c_title_w: 30%;
-  --c_title_l: 35%;
-}
-.c_title {
-  font-size: var(--title_font_size);
-  text-align: center;
-  position: absolute;
-  width: var(--c_title_w);
-  left: var(--c_title_l);
-  word-break: break-all;
-  top: var(--title_position_top);
-  color: var(--text-color)
-}
-.c_body {
-  padding: var(--b_padding);
-}
-.c_icon{
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  right: 0;
-  z-index: 25;
-}
-.climate_info {
-  position: absolute;
-  top: var(--climate_info_position_top);
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  --background-color: white;
-}
-.modes, .mode_color{
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.modes iron-icon {
-  color: var(--mode_color);
-  --iron-icon-height: var(--icon_size);
-  --iron-icon-width: var(--icon_size);
-}
-.modes .modeicon {
-  --iron-icon-height: var(--d_icon_size);
-  --iron-icon-width: var(--d_icon_size);
-  margin: 8px;
-}
-.dialog{
-  background-color:#0000008c;
-  width: var(--dialog_size);
-  height: var(--dialog_size);
-  margin: 5%;
-  border-radius: 50%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  align-content: center;
-  top: 45%;
-  left: 45%;
-  backdrop-filter: blur(6px) grayscale(50%);
-  box-shadow: 0px 0px 10px 0px #696969;
-  border: 1px solid #ffffff;
-}
-.dialog.hide{
-  display: none;
-}
-.dialog.pending{
-  border: 1px solid var(--mode_color);
-  box-shadow: 0px 0px 10px 0px var(--mode_color);
-  animation: dialog-pending .8s infinite alternate;
-}
-
-@keyframes dialog-pending
-{
-    from {box-shadow: 0px 0px 10px 0px var(--mode_color);}
-    to {box-shadow: 0px 0px 0px 0px var(--mode_color);}
-}
-
-.dot_r{
-  height: var(--dot_size);
-  width: var(--dot_size);
-  margin-top: 5px;
-  background-color: white;
-  border-radius: 50%;
-  display: inline-block;
-  opacity: 0.1;
-}
-.dot_h{
-  visibility: hidden;
-}
-
-
-
-.dial {
-  user-select: none;
-
-  --thermostat-off-fill: #000000c2;
-  --thermostat-path-color: rgba(255, 255, 255, 0.3);
-  --thermostat-path-active-color: rgba(255, 255, 255, 0.8);
-  --thermostat-path-active-color-large: rgba(255, 255, 255, 1);
-  --thermostat-text-color: white;
-}
-
-.dial.has-thermo .dial__ico__leaf {
-  visibility: hidden;
-}
-.dial .dial__shape {
-  transition: fill 0.5s;
-  fill: var(--thermostat-off-fill);
-}
-
-.dial__ico__thermo {
-  fill: var(--thermostat-path-active-color);
-  opacity: 0;
-  transition: opacity 0.5s;
-  pointer-events: none;
-}
-.dial.has-thermo .dial__ico__thermo {
-  display: block;
-  opacity: 1;
-  pointer-events: initial;
-}
-.dial__editableIndicator {
-  fill: white;
-  fill-rule: evenodd;
-  opacity: 0;
-  transition: opacity 0.5s;
-}
-.dial__temperatureControl {
-  fill: white;
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-.dial__temperatureControl.control-visible {
-  opacity: 0.2;
-}
-.dial--edit .dial__editableIndicator {
-  opacity: 1;
-}
-.dial--state--off .dial__shape {
-  fill: var(--thermostat-off-fill);
-}
-.dial--state--heat .dial__shape {
-  fill: var(--heat_colorc);
-}
-.dial--state--cool .dial__shape {
-  fill: var(--cool_colorc);
-}
-.dial--state--auto .dial__shape {
-  fill: var(--auto_color);
-}
-.dial--state--fan_only .dial__shape {
-  fill: var(--fan_only_color);
-}
-.dial--state--dry .dial__shape {
-  fill: var(--dry_color);
-}
-.dial--state--idle .dial__shape {
-  fill: var(--idle_color);
-}
-.dial__ticks path {
-  fill: var(--thermostat-path-color);
-}
-.dial__ticks path.active {
-  fill: var(--mode_color);
-}
-.dial__ticks path.active.large {
-  fill: var(--mode_color);
-}
-.dial text, .dial text tspan {
-  fill: var(--thermostat-text-color);
-  text-anchor: middle;
-  font-family: Helvetica, sans-serif;
-  alignment-baseline: central;
-  dominant-baseline: central;
-}
-.dial__lbl--target {
-  font-size: 120px;
-  font-weight: bold;
-  visibility: hidden;
-}
-.dial__lbl--low, .dial__lbl--high {
-  font-size: 90px;
-  font-weight: bold;
-  visibility: hidden;
-}
-.dial.in_control .dial__lbl--target {
-  visibility: visible;
-}
-.dial.in_control .dial__lbl--low {
-  visibility: visible;
-}
-.dial.in_control .dial__lbl--high {
-  visibility: visible;
-}
-.dial__lbl--ambient {
-  font-size: 120px;
-  font-weight: bold;
-  visibility: visible;
-}
-.dial.in_control.has_dual .dial__chevron--low,
-.dial.in_control.has_dual .dial__chevron--high {
-  visibility: visible;
-}
-.dial.in_control .dial__chevron--target {
-  visibility: visible;
-}
-.dial.in_control.has_dual .dial__chevron--target {
-  visibility: hidden;
-}
-.dial .dial__chevron {
-  visibility: hidden;
-  fill: none;
-  stroke: var(--thermostat-text-color);
-  stroke-width: 4px;
-  opacity: 0.3;
-}
-.dial .dial__chevron.pressed {
-  opacity: 1;
-}
-.dial.in_control .dial__lbl--ambient {
-  visibility: hidden;
-}
-.dial__lbl--super--ambient, .dial__lbl--super--target {
-  font-size: 40px;
-  font-weight: bold;
-}
-.dial__lbl--super--high, .dial__lbl--super--low {
-  font-size: 30px;
-  font-weight: bold;
-}
-.dial__lbl--ring {
-  font-size: 22px;
-  font-weight: bold;
-}
-
-`
-return css;
-}
+  var css =`
+  
+  ha-card {
+    overflow: hidden;
+    --rail_border_color: transparent;
+    --auto_color: rgb(227, 99, 4, 1);
+    --cool_color: rgba(0, 122, 241, 0.6);
+    --cool_colorc: rgba(0, 122, 241, 1);
+    --heat_color: #ff8100;
+    --heat_colorc: rgb(227, 99, 4, 1);
+    --manual_color: #44739e;
+    --off_color: #8a8a8a;
+    --fan_only_color: #D7DBDD;
+    --dry_color: #efbd07;
+    --idle_color: #808080;
+    --unknown_color: #bac;
+    --text-color: white;
+  }
+  ha-card.no_card{
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+  }
+  ha-card.no_card .prop{
+    display: none;
+  }
+  .auto, .heat_cool {
+    --mode_color: var(--auto_color);
+  }
+  
+  .cool {
+    --mode_color: var(--cool_color);
+  }
+  
+  .heat {
+    --mode_color: var(--heat_color);
+  }
+  
+  .manual {
+    --mode_color: var(--manual_color);
+  }
+  
+  .off {
+    --mode_color: var(--off_color);
+  }
+  .more {
+    --mode_color: var(--off_color);
+  }
+  .fan_only {
+    --mode_color: var(--fan_only_color);
+  }
+  
+  .eco {
+    --mode_color: var(--auto_color);
+  }
+  
+  .dry {
+    --mode_color: var(--dry_color);
+  }
+  
+  .idle {
+    --mode_color: var(--idle_color);
+  }
+  
+  .unknown-mode {
+    --mode_color: var(--unknown_color);
+  }
+  .c_body {
+    padding: 5% 5% 5% 5%;
+  }
+  .c_icon{
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    right: 0;
+    z-index: 25;
+  }
+  .climate_info {
+    position: absolute;
+    top: 82%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 14%;
+    height: 14%;
+    --background-color: white;
+  }
+  .modes, .mode_color{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    transform: translate(-50%, -50%);
+  }
+  .modes ha-icon {
+    color: var(--mode_color);
+    --mdc-icon-size: 100%;
+  }
+  .dialog{
+    background-color:#0000008c;
+    width: 90%;
+    height: 90%;
+    margin: 5%;
+    border-radius: 50%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    top: 45%;
+    left: 45%;
+    backdrop-filter: blur(6px) grayscale(50%);
+    box-shadow: 0px 0px 10px 0px #696969;
+    border: 1px solid #ffffff;
+  }
+  .dialog span {
+    width:33%;
+    margin: 3% 0;
+  }
+  .dialog ha-icon {
+    color: var(--mode_color);
+    --mdc-icon-size: 70%;
+    margin: 15%;
+  }
+  .dialog.hide{
+    display: none;
+  }
+  .dialog.pending{
+    border: 1px solid var(--mode_color);
+    box-shadow: 0px 0px 10px 0px var(--mode_color);
+    animation: dialog-pending .8s infinite alternate;
+  }
+  
+  @keyframes dialog-pending
+  {
+      from {box-shadow: 0px 0px 10px 0px var(--mode_color);}
+      to {box-shadow: 0px 0px 0px 0px var(--mode_color);}
+  }
+  
+  .dot_r{
+    height: 100%;
+    width: 100%;
+    background-color: white;
+    border-radius: 50%;
+    display: inline-block;
+    opacity: 0.1;
+  }
+  .dot_h{
+    visibility: hidden;
+  }
+  
+  
+  
+  .dial {
+    user-select: none;
+  
+    --thermostat-off-fill: #000000c2;
+    --thermostat-path-color: rgba(255, 255, 255, 0.3);
+    --thermostat-path-active-color: rgba(255, 255, 255, 0.8);
+    --thermostat-path-active-color-large: rgba(255, 255, 255, 1);
+    --thermostat-text-color: white;
+  }
+  
+  .dial.has-thermo .dial__ico__leaf {
+    visibility: hidden;
+  }
+  .dial .dial__shape {
+    transition: fill 0.5s;
+    fill: var(--thermostat-off-fill);
+  }
+  
+  .dial__ico__thermo {
+    fill: var(--thermostat-path-active-color);
+    opacity: 0;
+    transition: opacity 0.5s;
+    pointer-events: none;
+  }
+  .dial.has-thermo .dial__ico__thermo {
+    display: block;
+    opacity: 1;
+    pointer-events: initial;
+  }
+  .dial__editableIndicator {
+    fill: white;
+    fill-rule: evenodd;
+    opacity: 0;
+    transition: opacity 0.5s;
+  }
+  .dial__temperatureControl {
+    fill: white;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+  .dial__temperatureControl.control-visible {
+    opacity: 0.2;
+  }
+  .dial--edit .dial__editableIndicator {
+    opacity: 1;
+  }
+  .dial--state--off .dial__shape {
+    fill: var(--thermostat-off-fill);
+  }
+  .dial--state--heat .dial__shape {
+    fill: var(--heat_colorc);
+  }
+  .dial--state--cool .dial__shape {
+    fill: var(--cool_colorc);
+  }
+  .dial--state--auto .dial__shape {
+    fill: var(--auto_color);
+  }
+  .dial--state--fan_only .dial__shape {
+    fill: var(--fan_only_color);
+  }
+  .dial--state--dry .dial__shape {
+    fill: var(--dry_color);
+  }
+  .dial--state--idle .dial__shape {
+    fill: var(--idle_color);
+  }
+  .dial__ticks path {
+    fill: var(--thermostat-path-color);
+  }
+  .dial__ticks path.active {
+    fill: var(--mode_color);
+  }
+  .dial__ticks path.active.large {
+    fill: var(--mode_color);
+  }
+  .dial text, .dial text tspan {
+    fill: var(--thermostat-text-color);
+    text-anchor: middle;
+    font-family: Helvetica, sans-serif;
+    alignment-baseline: central;
+    dominant-baseline: central;
+  }
+  .dial__lbl--target {
+    font-size: 120px;
+    font-weight: bold;
+    visibility: hidden;
+  }
+  .dial__lbl--low, .dial__lbl--high {
+    font-size: 90px;
+    font-weight: bold;
+    visibility: hidden;
+  }
+  .dial.in_control .dial__lbl--target {
+    visibility: visible;
+  }
+  .dial.in_control .dial__lbl--low {
+    visibility: visible;
+  }
+  .dial.in_control .dial__lbl--high {
+    visibility: visible;
+  }
+  .dial__lbl--ambient {
+    font-size: 120px;
+    font-weight: bold;
+    visibility: visible;
+  }
+  .dial.in_control.has_dual .dial__chevron--low,
+  .dial.in_control.has_dual .dial__chevron--high {
+    visibility: visible;
+  }
+  .dial.in_control .dial__chevron--target {
+    visibility: visible;
+  }
+  .dial.in_control.has_dual .dial__chevron--target {
+    visibility: hidden;
+  }
+  .dial .dial__chevron {
+    visibility: hidden;
+    fill: none;
+    stroke: var(--thermostat-text-color);
+    stroke-width: 4px;
+    opacity: 0.3;
+  }
+  .dial .dial__chevron.pressed {
+    opacity: 1;
+  }
+  .dial.in_control .dial__lbl--ambient {
+    visibility: hidden;
+  }
+  .dial__lbl--super--ambient, .dial__lbl--super--target {
+    font-size: 40px;
+    font-weight: bold;
+  }
+  .dial__lbl--super--high, .dial__lbl--super--low {
+    font-size: 30px;
+    font-weight: bold;
+  }
+  .dial__lbl--ring {
+    font-size: 22px;
+    font-weight: bold;
+  }
+  .dial__lbl--title {
+    font-size: 24px;
+  }
+  `
+  return css;
+  }
+  
\ No newline at end of file
diff --git a/dist/thermostat_card.lib.js b/dist/thermostat_card.lib.js
index ba8f5c1..fadc77b 100644
--- a/dist/thermostat_card.lib.js
+++ b/dist/thermostat_card.lib.js
@@ -37,10 +37,14 @@ export default class ThermostatUI {
     this._container = document.createElement('div');
     this._main_icon = document.createElement('div');
     this._modes_dialog = document.createElement('div');
-    this._container.className = config.small_i === true ? 'c_small_cont' : 'c_large_cont';
     config.title = config.title === null || config.title === undefined ? 'Title' : config.title
 
-    this._container.appendChild(this._buildTitle(config.title));
+    this._ic = document.createElement('div');
+    this._ic.className = "prop";
+    this._ic.innerHTML = `<ha-icon-button id="more" icon="mdi:dots-vertical" class="c_icon" role="button" tabindex="0" aria-disabled="false"></ha-icon-button>`;
+    this._container.appendChild(this._ic)
+
+    // this._container.appendChild(this._buildTitle(config.title));
     this._ic.addEventListener('click', () => this.openProp());
     this._container.appendChild(this._load_icon('',''));
     this.c_body = document.createElement('div');
@@ -54,6 +58,7 @@ export default class ThermostatUI {
     root.appendChild(this._buildDialSlot(2));
     root.appendChild(this._buildDialSlot(3));
 
+    root.appendChild(this._buildText(config.radius, 'title', 0));
     root.appendChild(this._buildText(config.radius, 'ambient', 0));
     root.appendChild(this._buildText(config.radius, 'target', 0));
     root.appendChild(this._buildText(config.radius, 'low', -config.radius / 2.5));
@@ -64,6 +69,7 @@ export default class ThermostatUI {
     root.appendChild(this._buildChevrons(config.radius, 180, 'low', 0.7, -config.radius / 2.5));
     root.appendChild(this._buildChevrons(config.radius, 180, 'high', 0.7, config.radius / 3));
     root.appendChild(this._buildChevrons(config.radius, 180, 'target', 1, 0));
+    
 
     this.c_body.appendChild(root);
     this._container.appendChild(this.c_body);
@@ -73,6 +79,7 @@ export default class ThermostatUI {
     this._container.appendChild(this._buildDialog());
     this._main_icon.addEventListener('click', () => this._openDialog());
     this._modes_dialog.addEventListener('click', () => this._hideDialog());
+    this._updateText('title', config.title);
   }
 
   updateState(options,hass) {
@@ -307,6 +314,11 @@ export default class ThermostatUI {
     if (this.in_control && id == 'target' && this.dual) {
       lblTarget[0].textContent = '·';
     }
+
+    if(id =='title'){
+      lblTarget[0].textContent = value;
+      lblTarget[1].textContent = '';
+    }
   }
 
   _updateTemperatureSlot(value, offset, slot) {
@@ -431,20 +443,6 @@ export default class ThermostatUI {
     }, config.pending * 1000);
     e.stopPropagation();
   }
-
-  _buildTitle(title) {
-    this._ic = document.createElement('div');
-    this._ic.className = "prop";
-    this._ic.innerHTML = `
-      <paper-icon-button icon="hass:dots-vertical" class="c_icon" role="button" tabindex="0" aria-disabled="false"></paper-icon-button>
-    `;
-    this._container.innerHTML = `
-      <div class="c_title">
-        <div>${title}</div>
-      </div>
-    `;
-    return this._ic;
-  }
   _load_icon(state, ic_name){
     
     let ic_dot = 'dot_r'
@@ -528,7 +526,7 @@ export default class ThermostatUI {
   _buildText(radius, name, offset) {
     const target = SvgUtil.createSVGElement('text', {
       x: radius + offset,
-      y: radius,
+      y: radius-(name=='title'?radius/2:0),
       class: `dial__lbl dial__lbl--${name}`,
       id: name
     });