diff --git a/src/panels/lovelace/entity-rows/hui-event-entity-row.ts b/src/panels/lovelace/entity-rows/hui-event-entity-row.ts
index 35c98d1a0d..cb6e097a50 100644
--- a/src/panels/lovelace/entity-rows/hui-event-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-event-entity-row.ts
@@ -69,14 +69,17 @@ class HuiEventEntityRow extends LitElement implements LovelaceRow {
           })}
         >
           <div class="what">
+            ${computeStateDisplay(
+              this.hass!.localize,
+              stateObj,
+              this.hass.locale,
+              this.hass.config,
+              this.hass.entities
+            )}
+          </div>
+          <div class="when">
             ${isUnavailableState(stateObj.state)
-              ? computeStateDisplay(
-                  this.hass!.localize,
-                  stateObj,
-                  this.hass.locale,
-                  this.hass.config,
-                  this.hass.entities
-                )
+              ? ``
               : computeAttributeValueDisplay(
                   this.hass!.localize,
                   stateObj,
@@ -86,18 +89,6 @@ class HuiEventEntityRow extends LitElement implements LovelaceRow {
                   "event_type"
                 )}
           </div>
-          <div class="when">
-            ${isUnavailableState(stateObj.state)
-              ? ``
-              : html`
-                  <hui-timestamp-display
-                    .hass=${this.hass}
-                    .ts=${new Date(stateObj.state)}
-                    .format=${this._config.format}
-                    capitalize
-                  ></hui-timestamp-display>
-                `}
-          </div>
         </div>
       </hui-generic-entity-row>
     `;
diff --git a/src/state-summary/state-card-event.ts b/src/state-summary/state-card-event.ts
index 20d590fb22..325bc88d69 100644
--- a/src/state-summary/state-card-event.ts
+++ b/src/state-summary/state-card-event.ts
@@ -1,10 +1,9 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { CSSResultGroup, html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../components/entity/ha-entity-toggle";
 import "../components/entity/state-info";
 import { HomeAssistant } from "../types";
-import { isUnavailableState } from "../data/entity";
 import { computeAttributeValueDisplay } from "../common/entity/compute_attribute_display";
 import { computeStateDisplay } from "../common/entity/compute_state_display";
 import { haStyle } from "../resources/styles";
@@ -25,30 +24,45 @@ export class StateCardEvent extends LitElement {
           .stateObj=${this.stateObj}
           .inDialog=${this.inDialog}
         ></state-info>
-        <div class="event_type">
-          ${isUnavailableState(this.stateObj.state)
-            ? computeStateDisplay(
-                this.hass!.localize,
-                this.stateObj,
-                this.hass.locale,
-                this.hass.config,
-                this.hass.entities
-              )
-            : computeAttributeValueDisplay(
-                this.hass!.localize,
-                this.stateObj,
-                this.hass.locale,
-                this.hass.config,
-                this.hass.entities,
-                "event_type"
-              )}
+        <div class="container">
+          <div class="event_type">
+            ${computeStateDisplay(
+              this.hass!.localize,
+              this.stateObj,
+              this.hass.locale,
+              this.hass.config,
+              this.hass.entities
+            )}
+          </div>
+          <div class="event_data">
+            ${computeAttributeValueDisplay(
+              this.hass!.localize,
+              this.stateObj,
+              this.hass.locale,
+              this.hass.config,
+              this.hass.entities,
+              "event_type"
+            )}
+          </div>
         </div>
       </div>
     `;
   }
 
   static get styles(): CSSResultGroup {
-    return haStyle;
+    return [
+      haStyle,
+      css`
+        .container {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-end;
+        }
+        .event_data {
+          color: var(--secondary-text-color);
+        }
+      `,
+    ];
   }
 }