diff --git a/packages/v3/src/css/app.ts b/packages/v3/src/css/app.ts
index 60a5df3..f821f90 100644
--- a/packages/v3/src/css/app.ts
+++ b/packages/v3/src/css/app.ts
@@ -3,7 +3,7 @@ import { css } from "lit";
 export default css`
   .flex-grid-half {
     display: grid;
-    grid-template-columns: 600px 2fr;
+    grid-template-columns: 700px 2fr;
   }
   .flex-grid-half.expanded_entity,
   .flex-grid-half.expanded_logs {
diff --git a/packages/v3/src/css/esp-entity-table.ts b/packages/v3/src/css/esp-entity-table.ts
index 82a93a6..f0ab116 100644
--- a/packages/v3/src/css/esp-entity-table.ts
+++ b/packages/v3/src/css/esp-entity-table.ts
@@ -72,7 +72,24 @@ export default css`
     margin: auto;
     display: flex;
   }
-
+  .climate-wrap{
+    width: 100%;
+    margin: 10px 0 10px 0;
+  }
+  .climate-row {
+    width: 100%;
+    display: inline-flex;
+    flex-wrap: wrap;
+    text-align: left;
+  }
+  .climate-row > select{
+    width: 50%;
+  }
+  .climate-row > label{
+    align-content: center;
+    width: 150px;
+  }
+    
   input[type="color"]::-webkit-color-swatch-wrapper {
     padding: 0 !important;
   }
diff --git a/packages/v3/src/esp-entity-table.ts b/packages/v3/src/esp-entity-table.ts
index 4bc224b..4b9822e 100644
--- a/packages/v3/src/esp-entity-table.ts
+++ b/packages/v3/src/esp-entity-table.ts
@@ -105,9 +105,13 @@ export class EntityTable extends LitElement implements RestAction {
           return a.entity_category < b.entity_category  
             ? -1  
             : a.entity_category == b.entity_category  
-            ? sortA < sortB  
-              ? -1  
-              : 1  
+            ? sortA === sortB  
+              ? a.name.toLowerCase() < b.name.toLowerCase()
+                ? -1
+                : 1  
+              : sortA < sortB
+                ? -1
+                : 1   
             : 1  
         });         
         this.requestUpdate();
@@ -617,65 +621,73 @@ class ActionRenderer {
 
   render_climate() {
     if (!this.entity) return;
-    let target_temp_slider, target_temp_label;
+    let target_temp_slider, target_temp_label, target_temp;
+    let current_temp = html`<div class="climate-row" style="padding-bottom: 10px";>
+                              <label>Current:&nbsp;${this.entity.current_temperature} °C</label>
+                            </div>`;
+    
     if (
       this.entity.target_temperature_low !== undefined &&
       this.entity.target_temperature_high !== undefined
     ) {
-      target_temp_label = html`${this.entity
-        .target_temperature_low}&nbsp;..&nbsp;${this.entity
-        .target_temperature_high}`;
-      target_temp_slider = html`
-        ${this._range(
-          this.entity,
-          "set",
-          "target_temperature_low",
-          this.entity.target_temperature_low,
-          this.entity.min_temp,
-          this.entity.max_temp,
-          this.entity.step
-        )}
-        ${this._range(
-          this.entity,
-          "set",
-          "target_temperature_high",
-          this.entity.target_temperature_high,
-          this.entity.min_temp,
-          this.entity.max_temp,
-          this.entity.step
-        )}
-      `;
+      target_temp = html`
+        <div class="climate-row">
+          <label>Target Low:&nbsp;</label>
+          ${this._range(
+            this.entity,
+            "set",
+            "target_temperature_low",
+            this.entity.target_temperature_low,
+            this.entity.min_temp,
+            this.entity.max_temp,
+            this.entity.step
+          )}
+        </div>
+        <div class="climate-row">
+          <label>Target High:&nbsp;</label>
+          ${this._range(
+            this.entity,
+            "set",
+            "target_temperature_high",
+            this.entity.target_temperature_high,
+            this.entity.min_temp,
+            this.entity.max_temp,
+            this.entity.step
+          )}
+        </div>`;
     } else {
-      target_temp_label = html`${this.entity.target_temperature}`;
-      target_temp_slider = html`
-        ${this._range(
-          this.entity,
-          "set",
-          "target_temperature",
-          this.entity.target_temperature!!,
-          this.entity.min_temp,
-          this.entity.max_temp,
-          this.entity.step
-        )}
-      `;
+      target_temp = html`
+        <div class="climate-row">
+          <label>Target:&nbsp;</label>
+          ${this._range(
+            this.entity,
+            "set",
+            "target_temperature",
+            this.entity.target_temperature!!,
+            this.entity.min_temp,
+            this.entity.max_temp,
+            this.entity.step
+          )}
+        </div>`;
     }
     let modes = html``;
     if ((this.entity.modes ? this.entity.modes.length : 0) > 0) {
-      modes = html`Mode:<br />
-        ${this._select(
-          this.entity,
-          "set",
-          "mode",
-          this.entity.modes || [],
-          this.entity.mode || ""
-        )}`;
+      modes = html`
+        <div class="climate-row">
+          <label>Mode:&nbsp;</label>
+          ${this._select(
+            this.entity,
+            "set",
+            "mode",
+            this.entity.modes || [],
+            this.entity.mode || ""
+          )}
+        </div>`;
     }
     return html`
-      <label
-        >Current:&nbsp;${this.entity.current_temperature},
-        Target:&nbsp;${target_temp_label}</label
-      >
-      ${target_temp_slider} ${modes}
+      <div class="climate-wrap">
+        ${current_temp} ${target_temp} ${modes}
+      </div>
     `;
   }
 }
diff --git a/packages/v3/src/esp-range-slider.ts b/packages/v3/src/esp-range-slider.ts
index 66d1a54..4395af0 100644
--- a/packages/v3/src/esp-range-slider.ts
+++ b/packages/v3/src/esp-range-slider.ts
@@ -186,10 +186,13 @@ export class EspRangeSlider extends LitElement {
       cssReset,
       css`
         :host {
-          width: 100%;
+          min-width: 150px;
+          flex: 1;
         }
         input[type=range] {
+          background: transparent;
           -webkit-appearance: none;
+          appearance: none;
           margin: 20px 0;
           width: 100%;
           touch-action: none;
@@ -205,6 +208,32 @@ export class EspRangeSlider extends LitElement {
           background: #03a9f4;
           border-radius: 25px;
         }
+        input[type=range]::-moz-range-track {
+          width: 100%;
+          height: 4px;
+          cursor: pointer;
+          animate: 0.2s;
+          background: #03a9f4;
+          border-radius: 25px;
+        }
+        input[type=range]::-ms-track {
+          background: transparent;
+          width: 100%;
+          height: 4px;
+          cursor: pointer;
+          animate: 0.2s;
+          background: transparent;
+          border-color: transparent;
+          color: transparent;
+        }
+        input[type=range]::-ms-fill-lower {
+          background: #03a9f4;
+          border-radius: 25px;
+        }
+        input[type=range]::-ms-fill-upper {
+          background: #03a9f4;
+          border-radius: 25px;
+        }
         input[type=range]::-webkit-slider-thumb {
           height: 20px;
           width: 20px;
@@ -215,23 +244,50 @@ export class EspRangeSlider extends LitElement {
           -webkit-appearance: none;
           margin-top: -8px;
         }
+        input[type=range]::-moz-range-thumb {
+          height: 20px;
+          width: 20px;
+          border-radius: 50%;
+          background: #fff;
+          box-shadow: 0 0 4px 0 rgba(0,0,0, 1);
+          cursor: pointer;
+          border: none;
+        }
+        input[type=range]::-ms-thumb {
+          height: 20px;
+          width: 20px;
+          border-radius: 50%;
+          background: #fff;
+          box-shadow: 0 0 4px 0 rgba(0,0,0, 1);
+          cursor: pointer;
+          border: none;
+        }
         input[type=range]:focus::-webkit-slider-runnable-track {
           background: #03a9f4;
         }
-        .range-wrap{
+        input[type=range]:focus::-moz-range-track {
+          background: #03a9f4;
+        }
+        input[type=range]:focus::-ms-fill-lower {
+          background: #03a9f4;
+        }
+        input[type=range]:focus::-ms-fill-upper {
+          background: #03a9f4;
+        }
+        .range-wrap {
           display: flex;
           align-items: center;
         }
-        .slider-wrap{
+        .slider-wrap {
           flex-grow: 1;
           margin: 0px 15px;
           position: relative;
         }
-        .range-value{
+        .range-value {
           position: absolute;
           top: -50%;
         }
-        .range-value span{
+        .range-value span {
           padding: 0 3px 0 3px;
           height: 19px;
           line-height: 18px;
@@ -245,7 +301,12 @@ export class EspRangeSlider extends LitElement {
           transform: translate(-50%, +80%);
           border-radius: 6px;
         }
-        .range-value span:before{
+        @-moz-document url-prefix() {
+          .range-value span {
+            transform: translate(-50%, +150%);
+          }
+        }
+        .range-value span:before {
           content: "";
           position: absolute;
           width: 0;