diff --git a/src/components/ha-gauge.ts b/src/components/ha-gauge.ts
index a12552db8c..78b0c84be1 100644
--- a/src/components/ha-gauge.ts
+++ b/src/components/ha-gauge.ts
@@ -76,10 +76,12 @@ export class HaGauge extends LitElement {
     const arcRadius = 40;
     const arcLength = Math.PI * arcRadius;
     const valueAngle = getAngle(this.value, this.min, this.max);
-    const strokeOffset = arcLength * (1 - valueAngle / 180);
+    const strokeOffset = this._updated
+      ? arcLength * (1 - valueAngle / 180)
+      : arcLength;
 
     return svg`
-      <svg viewBox="-50 -50 100 60" class="gauge">
+      <svg viewBox="-50 -50 100 55" class="gauge">
         <path
           class="levels-base"
           d="M -40 0 A 40 40 0 0 1 40 0"
@@ -181,7 +183,7 @@ export class HaGauge extends LitElement {
         <text
           class="value-text"
           x="0"
-          y="-10"
+          y="-5"
           dominant-baseline="middle"
           text-anchor="middle"
         >
@@ -222,22 +224,22 @@ export class HaGauge extends LitElement {
     .levels-base {
       fill: none;
       stroke: var(--primary-background-color);
-      stroke-width: 10;
+      stroke-width: 8;
       stroke-linecap: round;
     }
 
     .level {
       fill: none;
-      stroke-width: 10;
+      stroke-width: 8;
       stroke-linecap: butt;
     }
 
     .value {
       fill: none;
-      stroke-width: 10;
+      stroke-width: 8;
       stroke: var(--gauge-color);
       stroke-linecap: round;
-      transition: all 1s ease 0s;
+      transition: stroke-dashoffset 1s ease 0s;
     }
 
     .needle {
@@ -249,6 +251,7 @@ export class HaGauge extends LitElement {
     }
 
     .value-text {
+      font-size: var(--ha-font-size-l);
       fill: var(--primary-text-color);
       direction: ltr;
     }
diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
index e871af677f..746a5b243a 100644
--- a/src/panels/lovelace/cards/hui-gauge-card.ts
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -167,7 +167,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
           .needle=${this._config!.needle}
           .levels=${this._config!.needle ? this._severityLevels() : undefined}
         ></ha-gauge>
-        <div class="name" .title=${name}>${name}</div>
+        <p class="title" .title=${name}>${name}</p>
       </ha-card>
     `;
   }
@@ -282,10 +282,15 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
   }
 
   static styles = css`
+    :host {
+      position: relative;
+      display: block;
+      height: 100%;
+    }
     ha-card {
       height: 100%;
       overflow: hidden;
-      padding: 16px;
+      padding: var(--ha-space-3);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -301,16 +306,23 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       outline: none;
     }
 
-    ha-gauge {
+    .title {
       width: 100%;
+      font-size: var(--ha-font-size-l);
+      line-height: var(--ha-line-height-expanded);
+      padding: 0px 0px var(--ha-space-2) 0px;
+      margin: 0;
+      text-align: center;
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: none;
+      color: var(--primary-text-color);
     }
 
-    .name {
-      text-align: center;
-      line-height: initial;
-      color: var(--primary-text-color);
+    ha-gauge {
       width: 100%;
-      font-size: var(--ha-font-size-m);
     }
   `;
 }