diff --git a/src/card.ts b/src/card.ts
index 319d41c1..8dae132e 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -23,7 +23,7 @@ const FOOTER_HEIGHT = 5;
 
 export class Card extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
-  @property() config!: CardConfig;
+  @property({attribute: false}) config!: CardConfig;
   @state() section!: Section;
   @state() store!: Store;
   @state() showLoader!: boolean;
diff --git a/src/components/footer.ts b/src/components/footer.ts
index 6eced26f..cd60b9a6 100644
--- a/src/components/footer.ts
+++ b/src/components/footer.ts
@@ -8,37 +8,37 @@ import { mdiCastVariant, mdiHome, mdiSpeakerMultiple, mdiStarOutline, mdiTune }
 const { GROUPING, GROUPS, MEDIA_BROWSER, PLAYER, VOLUMES } = Section;
 
 class Footer extends LitElement {
-  @property() config!: CardConfig;
+  @property({ attribute: false }) config!: CardConfig;
   @property() section!: Section;
 
   render() {
     return html`
       <ha-icon-button
-        hidden=${this.hide(PLAYER)}
+        hide=${this.hide(PLAYER)}
         .path=${mdiHome}
         @click="${() => dispatchShowSection(PLAYER)}"
         selected="${this.selected(PLAYER)}"
       ></ha-icon-button>
       <ha-icon-button
-        hidden=${this.hide(MEDIA_BROWSER)}
+        hide=${this.hide(MEDIA_BROWSER)}
         .path=${mdiStarOutline}
         @click="${() => dispatchShowSection(MEDIA_BROWSER)}"
         selected="${this.selected(MEDIA_BROWSER)}"
       ></ha-icon-button>
       <ha-icon-button
-        hidden=${this.hide(GROUPS)}
+        hide=${this.hide(GROUPS)}
         .path=${mdiSpeakerMultiple}
         @click="${() => dispatchShowSection(GROUPS)}"
         selected="${this.selected(GROUPS)}"
       ></ha-icon-button>
       <ha-icon-button
-        hidden=${this.hide(GROUPING)}
+        hide=${this.hide(GROUPING)}
         .path=${mdiCastVariant}
         @click="${() => dispatchShowSection(GROUPING)}"
         selected="${this.selected(GROUPING)}"
       ></ha-icon-button>
       <ha-icon-button
-        hidden=${this.hide(VOLUMES)}
+        hide=${this.hide(VOLUMES)}
         .path=${mdiTune}
         @click="${() => dispatchShowSection(VOLUMES)}"
         selected="${this.selected(VOLUMES)}"
@@ -66,7 +66,7 @@ class Footer extends LitElement {
       :host > *[selected] {
         color: var(--accent-color);
       }
-      :host > *[hidden] {
+      :host > *[hide] {
         display: none;
       }
     `;
diff --git a/src/components/group.ts b/src/components/group.ts
index 70c704e6..b1f50fd3 100755
--- a/src/components/group.ts
+++ b/src/components/group.ts
@@ -8,10 +8,10 @@ import { REQUEST_PLAYER_EVENT } from '../constants';
 import { MediaPlayer } from '../model/media-player';
 
 class Group extends LitElement {
-  @property() store!: Store;
+  @property({ attribute: false }) store!: Store;
   private config!: CardConfig;
-  @property() player!: MediaPlayer;
-  @property() selected = false;
+  @property({ attribute: false }) player!: MediaPlayer;
+  @property({ type: Boolean }) selected = false;
 
   connectedCallback() {
     super.connectedCallback();
diff --git a/src/components/media-browser-header.ts b/src/components/media-browser-header.ts
index a625d673..988185a0 100644
--- a/src/components/media-browser-header.ts
+++ b/src/components/media-browser-header.ts
@@ -4,7 +4,7 @@ import { MediaPlayerEntityFeature } from '../types';
 import Store from '../model/store';
 
 class MediaBrowserHeader extends LitElement {
-  @property() store!: Store;
+  @property({attribute: false}) store!: Store;
 
   render() {
     return html`
diff --git a/src/components/media-browser-icons.ts b/src/components/media-browser-icons.ts
index d37eb08c..96e964b4 100755
--- a/src/components/media-browser-icons.ts
+++ b/src/components/media-browser-icons.ts
@@ -11,8 +11,8 @@ import {
 } from '../utils/media-browser-utils';
 
 export class MediaBrowserIcons extends LitElement {
-  @property() store!: Store;
-  @property() items!: MediaPlayerItem[];
+  @property({ attribute: false }) store!: Store;
+  @property({ attribute: false }) items!: MediaPlayerItem[];
   private config!: CardConfig;
 
   render() {
diff --git a/src/components/media-browser-list.ts b/src/components/media-browser-list.ts
index bb78cbb5..3a5e743b 100755
--- a/src/components/media-browser-list.ts
+++ b/src/components/media-browser-list.ts
@@ -11,8 +11,8 @@ import {
 } from '../utils/media-browser-utils';
 
 export class MediaBrowserList extends LitElement {
-  @property() store!: Store;
-  @property() items!: MediaPlayerItem[];
+  @property({ attribute: false }) store!: Store;
+  @property({ type: Array }) items!: MediaPlayerItem[];
   private config!: CardConfig;
 
   render() {
diff --git a/src/components/player-controls.ts b/src/components/player-controls.ts
index ea72927b..95c52ec1 100755
--- a/src/components/player-controls.ts
+++ b/src/components/player-controls.ts
@@ -10,7 +10,7 @@ import { when } from 'lit/directives/when.js';
 const { SHUFFLE_SET, REPEAT_SET, PLAY, PAUSE, NEXT_TRACK, PREVIOUS_TRACK } = MediaPlayerEntityFeature;
 
 class PlayerControls extends LitElement {
-  @property() store!: Store;
+  @property({attribute: false}) store!: Store;
   private config!: CardConfig;
   private activePlayer!: MediaPlayer;
   private mediaControlService!: MediaControlService;
@@ -27,11 +27,11 @@ class PlayerControls extends LitElement {
           this.activePlayer.state !== 'idle',
           () => html`
             <div class="icons">
-              <ha-icon-button hidden=${noUpDown} @click="${this.volDown}" .path=${mdiVolumeMinus}></ha-icon-button>
+              <ha-icon-button hide=${noUpDown} @click="${this.volDown}" .path=${mdiVolumeMinus}></ha-icon-button>
               <sonos-ha-player .store=${this.store} .features=${[SHUFFLE_SET, PREVIOUS_TRACK]}></sonos-ha-player>
               <sonos-ha-player .store=${this.store} .features=${[PLAY, PAUSE]} class="big-icon"></sonos-ha-player>
               <sonos-ha-player .store=${this.store} .features=${[NEXT_TRACK, REPEAT_SET]}></sonos-ha-player>
-              <ha-icon-button hidden=${noUpDown} @click="${this.volUp}" .path=${mdiVolumePlus}></ha-icon-button>
+              <ha-icon-button hide=${noUpDown} @click="${this.volUp}" .path=${mdiVolumePlus}></ha-icon-button>
             </div>
           `,
         )}
@@ -54,7 +54,7 @@ class PlayerControls extends LitElement {
         display: flex;
         align-items: center;
       }
-      .icons > *[hidden] {
+      .icons > *[hide] {
         display: none;
       }
       .big-icon {
diff --git a/src/components/player-header.ts b/src/components/player-header.ts
index 45f97c4c..468d3861 100755
--- a/src/components/player-header.ts
+++ b/src/components/player-header.ts
@@ -6,7 +6,7 @@ import { getSpeakerList } from '../utils/utils';
 import { MediaPlayer } from '../model/media-player';
 
 class PlayerHeader extends LitElement {
-  @property() store!: Store;
+  @property({attribute: false}) store!: Store;
   private config!: CardConfig;
   private activePlayer!: MediaPlayer;
 
diff --git a/src/components/progress.ts b/src/components/progress.ts
index de5aca5f..a874bf37 100755
--- a/src/components/progress.ts
+++ b/src/components/progress.ts
@@ -5,7 +5,7 @@ import { MediaPlayer } from '../model/media-player';
 import { styleMap } from 'lit-html/directives/style-map.js';
 
 class Progress extends LitElement {
-  @property() store!: Store;
+  @property({attribute: false}) store!: Store;
   private activePlayer!: MediaPlayer;
 
   @state() private playingProgress!: number;
diff --git a/src/components/volume.ts b/src/components/volume.ts
index 8bf16286..471b76e4 100755
--- a/src/components/volume.ts
+++ b/src/components/volume.ts
@@ -7,11 +7,11 @@ import { mdiVolumeHigh, mdiVolumeMute } from '@mdi/js';
 import { MediaPlayer } from '../model/media-player';
 
 class Volume extends LitElement {
-  @property() store!: Store;
+  @property({ attribute: false }) store!: Store;
   private config!: CardConfig;
   private mediaControlService!: MediaControlService;
-  @property() player!: MediaPlayer;
-  @property() updateMembers = true;
+  @property({ attribute: false }) player!: MediaPlayer;
+  @property({ type: Boolean }) updateMembers = true;
   @property() volumeClicked?: () => void;
 
   render() {
diff --git a/src/constants.ts b/src/constants.ts
index 6fc34878..ab7c73cf 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -26,7 +26,7 @@ export const mediaBrowserTitleStyle = css`
     color: var(--secondary-text-color);
     font-weight: bold;
     padding: 0 0.5rem;
-    text-overflow-ellipsis: ellipsis;
+    text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
   }
diff --git a/src/editor/advanced-editor.ts b/src/editor/advanced-editor.ts
index 0a8a989a..e281b693 100644
--- a/src/editor/advanced-editor.ts
+++ b/src/editor/advanced-editor.ts
@@ -43,16 +43,21 @@ class AdvancedEditor extends BaseEditor {
     const topFavorites = this.store.config.topFavorites ?? [];
     const data = { ...this.store.config, topFavorites: topFavorites.join(', ') };
     return html`
-      <sonos-card-editor-form .schema=${ADVANCED_SCHEMA} .store=${this.store} .data=${data} .changed=${this.changed}></sonos-card-editor-form>
-      <p>
-        The following needs to be configured using code (YAML): 
+      <sonos-card-editor-form
+        .schema=${ADVANCED_SCHEMA}
+        .store=${this.store}
+        .data=${data}
+        .changed=${this.changed}
+      ></sonos-card-editor-form>
+      <div>
+        The following needs to be configured using code (YAML):
         <ul>
           <li>customSources</li>
           <li>customThumbnail</li>
           <li>customThumbnailIfMissing</li>
           <li>mediaBrowserTitlesToIgnore</li>
         </ul>
-      </p>
+      </div>
     `;
   }
   protected changed(ev: CustomEvent): void {
diff --git a/src/editor/artwork-override-editor.ts b/src/editor/artwork-override-editor.ts
index 33685c42..446efed9 100644
--- a/src/editor/artwork-override-editor.ts
+++ b/src/editor/artwork-override-editor.ts
@@ -5,7 +5,7 @@ import { BaseEditor } from './base-editor';
 
 const newOverride = { ifMissing: false };
 class ArtworkOverrideEditor extends BaseEditor {
-  @property() index!: number;
+  @property({ type: Number }) index!: number;
   protected render(): TemplateResult {
     this.config = this.store.config;
     this.hass = this.store.hass;
diff --git a/src/editor/base-editor.ts b/src/editor/base-editor.ts
index 31c9a238..7d68cc52 100644
--- a/src/editor/base-editor.ts
+++ b/src/editor/base-editor.ts
@@ -5,9 +5,9 @@ import { CardConfig } from '../types';
 import Store from '../model/store';
 
 export abstract class BaseEditor extends LitElement {
-  @property() config!: CardConfig;
-  @property() hass!: HomeAssistant;
-  @property() store!: Store;
+  @property({attribute: false}) config!: CardConfig;
+  @property({attribute: false}) hass!: HomeAssistant;
+  @property({attribute: false}) store!: Store;
 
   setConfig(config: CardConfig) {
     this.config = JSON.parse(JSON.stringify(config));
diff --git a/src/editor/custom-source-editor.ts b/src/editor/custom-source-editor.ts
index 9240b35d..d159d0c2 100644
--- a/src/editor/custom-source-editor.ts
+++ b/src/editor/custom-source-editor.ts
@@ -3,7 +3,7 @@ import { property } from 'lit/decorators.js';
 import { BaseEditor } from './base-editor';
 
 class CustomSourceEditor extends BaseEditor {
-  @property() index!: number;
+  @property({ type: Number }) index!: number;
 
   protected render(): TemplateResult {
     return html``;
diff --git a/src/editor/form.ts b/src/editor/form.ts
index ff79f682..c079b2b3 100644
--- a/src/editor/form.ts
+++ b/src/editor/form.ts
@@ -3,8 +3,8 @@ import { BaseEditor } from './base-editor';
 import { property } from 'lit/decorators.js';
 
 class Form extends BaseEditor {
-  @property() schema!: unknown;
-  @property() data!: unknown;
+  @property({attribute: false}) schema!: unknown;
+  @property({attribute: false}) data!: unknown;
   @property() changed!: (ev: CustomEvent) => void;
   protected render(): TemplateResult {
     this.config = this.store.config;
diff --git a/src/editor/predefined-group-editor.ts b/src/editor/predefined-group-editor.ts
index ff6338a3..64a185b9 100644
--- a/src/editor/predefined-group-editor.ts
+++ b/src/editor/predefined-group-editor.ts
@@ -5,7 +5,7 @@ import { BaseEditor } from './base-editor';
 import { ConfigPredefinedGroupPlayer, PredefinedGroup } from '../types';
 
 class PredefinedGroupEditor extends BaseEditor {
-  @property() index!: number;
+  @property({ type: Number }) index!: number;
   @state() predefinedGroup!: PredefinedGroup<ConfigPredefinedGroupPlayer>;
 
   private schema = [
diff --git a/src/sections/grouping.ts b/src/sections/grouping.ts
index 9bc570f5..c9fe1e43 100755
--- a/src/sections/grouping.ts
+++ b/src/sections/grouping.ts
@@ -9,7 +9,7 @@ import { MediaPlayer } from '../model/media-player';
 import '../components/grouping-button';
 
 export class Grouping extends LitElement {
-  @property() store!: Store;
+  @property({attribute: false}) store!: Store;
   private activePlayer!: MediaPlayer;
   private mediaControlService!: MediaControlService;
   private allGroups!: MediaPlayer[];
diff --git a/src/sections/groups.ts b/src/sections/groups.ts
index 17cbb691..8d4a3055 100755
--- a/src/sections/groups.ts
+++ b/src/sections/groups.ts
@@ -6,7 +6,7 @@ import { listStyle } from '../constants';
 import { MediaPlayer } from '../model/media-player';
 
 export class Groups extends LitElement {
-  @property() store!: Store;
+  @property({ attribute: false }) store!: Store;
   private groups!: MediaPlayer[];
   private activePlayer!: MediaPlayer;
 
diff --git a/src/sections/media-browser.ts b/src/sections/media-browser.ts
index 307c63bd..7e60c999 100755
--- a/src/sections/media-browser.ts
+++ b/src/sections/media-browser.ts
@@ -14,7 +14,7 @@ import MediaBrowseService from '../services/media-browse-service';
 import { indexOfWithoutSpecialChars } from '../utils/media-browser-utils';
 
 export class MediaBrowser extends LitElement {
-  @property() store!: Store;
+  @property({ attribute: false }) store!: Store;
   private config!: CardConfig;
   private activePlayer!: MediaPlayer;
   private mediaPlayers!: MediaPlayer[];
diff --git a/src/sections/player.ts b/src/sections/player.ts
index 7555ff3a..0c75dd3a 100755
--- a/src/sections/player.ts
+++ b/src/sections/player.ts
@@ -12,7 +12,7 @@ import { MUSIC_NOTES_BASE64_IMAGE, TV_BASE64_IMAGE } from '../constants';
 import { MediaPlayer } from '../model/media-player';
 
 export class Player extends LitElement {
-  @property() store!: Store;
+  @property({ attribute: false }) store!: Store;
   private config!: CardConfig;
   private activePlayer!: MediaPlayer;
 
diff --git a/src/sections/volumes.ts b/src/sections/volumes.ts
index d94b9cd1..406824fe 100755
--- a/src/sections/volumes.ts
+++ b/src/sections/volumes.ts
@@ -13,7 +13,7 @@ import { HassEntity } from 'home-assistant-js-websocket';
 const { SELECT_SOURCE } = MediaPlayerEntityFeature;
 
 class Volumes extends LitElement {
-  @property() store!: Store;
+  @property({ attribute: false }) store!: Store;
   private config!: CardConfig;
   private activePlayer!: MediaPlayer;
   private mediaControlService!: MediaControlService;
@@ -48,18 +48,18 @@ class Volumes extends LitElement {
         <div class="volume-name-text">${name}</div>
       </div>
       <div class="slider-row">
-        <ha-icon-button hidden=${noUpDown} @click="${volDown}" .path=${mdiVolumeMinus}></ha-icon-button>
+        <ha-icon-button hide=${noUpDown} @click="${volDown}" .path=${mdiVolumeMinus}></ha-icon-button>
         <sonos-volume .store=${this.store} .player=${player} .updateMembers=${updateMembers}></sonos-volume>
-        <ha-icon-button hidden=${noUpDown} @click="${volUp}" .path=${mdiVolumePlus}></ha-icon-button>
+        <ha-icon-button hide=${noUpDown} @click="${volUp}" .path=${mdiVolumePlus}></ha-icon-button>
         <ha-icon-button
-          hidden=${updateMembers || nothing}
+          hide=${updateMembers || nothing}
           @click="${() => this.toggleShowSwitches(player)}"
           .path=${mdiCog}
           show-switches="${this.showSwitches[player.id] || nothing}"
         ></ha-icon-button>
       </div>
       <div class="switches">
-        <sonos-ha-player hidden=${hideSwitches || nothing} .store=${this.store} .features=${[SELECT_SOURCE]}>
+        <sonos-ha-player hide=${hideSwitches || nothing} .store=${this.store} .features=${[SELECT_SOURCE]}>
         </sonos-ha-player>
         ${until(this.getAdditionalControls(hideSwitches, player))}
       </div>
@@ -134,7 +134,7 @@ class Volumes extends LitElement {
         color: var(--accent-color);
       }
 
-      *[hidden] {
+      *[hide] {
         display: none;
       }
     `;