diff --git a/Override_buttons.md b/Override_buttons.md
index 147662d..a34541a 100644
--- a/Override_buttons.md
+++ b/Override_buttons.md
@@ -1,17 +1,20 @@
 ## Overriding key actions
 
+You can override the default behavior of any button to call a different Home Assistant service. You can also customize the icon and style for media control buttons (PLAY, PAUSE, STOP, REWIND, RECORD, FAST_FOWARD).
+
 Example config:
+
 ```yaml
 type: custom:lg-remote-control
 av_receiver_family: anthemav
 entity: media_player.lg_webos_smart_tv
-is_smart_tv: 'true'
+is_smart_tv: "true"
 colors:
   buttons: red
   text: blue
   background: blue
-projectorentity: ''
-mac: '00:11:22:33:44:66'
+projectorentity: ""
+mac: "00:11:22:33:44:66"
 keys:
   LEFT:
     service: light.toggle
@@ -23,7 +26,58 @@ keys:
       entity_id: light.tv
 ```
 
-available keys:
+### Customizing media control buttons (icons and style)
+
+For media control buttons (PLAY, PAUSE, STOP, REWIND, RECORD, FAST_FOWARD), you can also customize the icon and button style. This is useful for repurposing these buttons for other functions like receiver volume control:
+
+```yaml
+type: custom:lg-remote-control
+entity: media_player.lg_webos_smart_tv
+keys:
+  PLAY:
+    icon: mdi:volume-high
+    service: media_player.volume_up
+    data:
+      entity_id: media_player.receiver
+  PAUSE:
+    icon: mdi:volume-medium
+    service: media_player.volume_mute
+    data:
+      entity_id: media_player.receiver
+  STOP:
+    icon: mdi:volume-low
+    service: media_player.volume_down
+    data:
+      entity_id: media_player.receiver
+  REWIND:
+    icon: mdi:skip-previous
+    service: media_player.media_previous_track
+    data:
+      entity_id: media_player.receiver
+  RECORD:
+    icon: mdi:power
+    style: color: green;
+    service: media_player.toggle
+    data:
+      entity_id: media_player.receiver
+  FAST_FOWARD:
+    icon: mdi:skip-next
+    service: media_player.media_next_track
+    data:
+      entity_id: media_player.receiver
+```
+
+### Key configuration options
+
+| Property  | Description                                                        |
+| --------- | ------------------------------------------------------------------ |
+| `service` | Home Assistant service to call (e.g., `media_player.volume_up`)    |
+| `data`    | Service data to pass (e.g., `entity_id: media_player.receiver`)    |
+| `icon`    | Custom icon for media control buttons (e.g., `mdi:volume-high`)    |
+| `style`   | Custom CSS style for media control buttons (e.g., `color: green;`) |
+
+### Available keys:
+
 - `"1"`
 - `"2"`
 - `"3"`
diff --git a/src/editor.ts b/src/editor.ts
index ab8a910..f21b062 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -42,11 +42,51 @@ const avreceivers = {
 
 const AvReceiverdevicemap = new Map(Object.entries(avreceivers));
 
+const OVERRIDEABLE_BUTTONS = [
+  { key: "1", name: "1" },
+  { key: "2", name: "2" },
+  { key: "3", name: "3" },
+  { key: "4", name: "4" },
+  { key: "5", name: "5" },
+  { key: "6", name: "6" },
+  { key: "7", name: "7" },
+  { key: "8", name: "8" },
+  { key: "9", name: "9" },
+  { key: "0", name: "0" },
+  { key: "UP", name: "Up" },
+  { key: "LEFT", name: "Left" },
+  { key: "ENTER", name: "Enter/OK" },
+  { key: "RIGHT", name: "Right" },
+  { key: "BACK", name: "Back" },
+  { key: "DOWN", name: "Down" },
+  { key: "EXIT", name: "Exit" },
+  { key: "RED", name: "Red" },
+  { key: "GREEN", name: "Green" },
+  { key: "YELLOW", name: "Yellow" },
+  { key: "BLUE", name: "Blue" },
+  { key: "HOME", name: "Home" },
+  { key: "CHANNELUP", name: "Channel Up" },
+  { key: "MUTE", name: "Mute" },
+  { key: "INFO", name: "Info" },
+  { key: "CHANNELDOWN", name: "Channel Down" },
+  { key: "PLAY", name: "Play" },
+  { key: "PAUSE", name: "Pause" },
+  { key: "STOP", name: "Stop" },
+  { key: "REWIND", name: "Rewind" },
+  { key: "RECORD", name: "Record" },
+  { key: "FAST_FOWARD", name: "Fast Forward" },
+  { key: "POWER", name: "Power" },
+  { key: "VOLUME_UP", name: "Volume Up" },
+  { key: "VOLUME_DOWN", name: "Volume Down" },
+];
+
 
 @customElement(EDITOR_CARD_TAG_NAME)
 class LgRemoteControlEditor extends LitElement {
   private _config: any;
   private hass: HomeAssistantFixed;
+  private _overridesExpanded: boolean = false;
+  private _expandedOverride: string | null = null;
 
   static get properties() {
     return {
@@ -196,7 +236,7 @@ class LgRemoteControlEditor extends LitElement {
             <br><br>
         `;
   }
-  
+
   selectMac(macValue) {
     macValue = macValue ?? '00:11:22:33:44:55';
     let heading = 'MAC Address:';
@@ -223,18 +263,18 @@ class LgRemoteControlEditor extends LitElement {
                 <input type="color" name="buttons" id="buttons"  .value="${config.colors && config.colors.buttons || ''}"
                        @input=${this.colorsConfigChanged}></input>
                 <ha-icon data-input-name="buttons" icon="mdi:trash-can-outline" @click=${this.colorsConfigChanged}></ha-icon>
- 
- 
+
+
                 <label class="color-item" for="text">Text Color:</label>
                 <input type="color" name="text" id="text"  .value="${config.colors && config.colors.text || ''}"
                        @input=${this.colorsConfigChanged}></input>
                        <ha-icon data-input-name="text" icon="mdi:trash-can-outline" @click=${this.colorsConfigChanged}></ha-icon>
- 
+
                 <label class="color-item" for="background">Background Color:</label>
                 <input type="color" name="background" id="background"  .value="${config.colors && config.colors.background || ''}"
                        @input=${this.colorsConfigChanged}></input>
                        <ha-icon data-input-name="background" icon="mdi:trash-can-outline" @click=${this.colorsConfigChanged}></ha-icon>
- 
+
                 <label class="color-item" for="border">Border color:</label>
                 <input type="color" name="border" id="border"  .value="${config.colors && config.colors.border || ''}"
                         @input=${this.colorsConfigChanged}></input>
@@ -291,7 +331,7 @@ class LgRemoteControlEditor extends LitElement {
     return html`
         <div>AV-Receiver config option:</div>
         <div style="display: flex;width: 40ch;align-items: center;">
-         <select 
+         <select
             name="av_receiver_family"
             id="av_receiver_family"
             class="select-item"
@@ -309,9 +349,9 @@ class LgRemoteControlEditor extends LitElement {
               `;})}
           </select>
           ${this._config.av_receiver_family && this._config.av_receiver_family != '' ? html`
-          <ha-icon 
+          <ha-icon
             style="padding-left: 0.8em;"
-            icon="mdi:trash-can-outline" 
+            icon="mdi:trash-can-outline"
             @click=${this._erase_av_receiver}
             @mouseover=${() => this.focus()}
           ></ha-icon>`
@@ -346,6 +386,191 @@ class LgRemoteControlEditor extends LitElement {
     }
   }
 
+  _toggleOverridesSection() {
+    this._overridesExpanded = !this._overridesExpanded;
+    this.requestUpdate();
+  }
+
+  _toggleOverrideConfig(key: string) {
+    this._expandedOverride = this._expandedOverride === key ? null : key;
+    this.requestUpdate();
+  }
+
+  _onButtonSelect(ev) {
+    const key = ev.target.value;
+    if (key) {
+      const _config = Object.assign({}, this._config);
+      _config["keys"] = { ...(_config["keys"] ?? {}) };
+      if (!_config["keys"][key]) {
+        _config["keys"][key] = {};
+      }
+      this._config = _config;
+      this._expandedOverride = key;
+      const event = new CustomEvent("config-changed", {
+        detail: { config: _config },
+        bubbles: true,
+        composed: true,
+      });
+      this.dispatchEvent(event);
+    }
+    this.requestUpdate();
+  }
+
+  _updateOverrideField(key: string, field: string, value: string) {
+    const _config = Object.assign({}, this._config);
+    _config["keys"] = { ...(_config["keys"] ?? {}) };
+    _config["keys"][key] = { ...(_config["keys"][key] ?? {}) };
+    if (value) {
+      if (field === "service") {
+        _config["keys"][key]["service"] = value;
+      } else if (field === "entity_id") {
+        _config["keys"][key]["data"] = {
+          ...(_config["keys"][key]["data"] ?? {}),
+          entity_id: value,
+        };
+      } else {
+        _config["keys"][key][field] = value;
+      }
+    } else {
+      if (field === "service") {
+        delete _config["keys"][key]["service"];
+      } else if (field === "entity_id") {
+        if (_config["keys"][key]["data"]) {
+          delete _config["keys"][key]["data"]["entity_id"];
+          if (Object.keys(_config["keys"][key]["data"]).length === 0) {
+            delete _config["keys"][key]["data"];
+          }
+        }
+      } else {
+        delete _config["keys"][key][field];
+      }
+    }
+    this._config = _config;
+    const event = new CustomEvent("config-changed", {
+      detail: { config: _config },
+      bubbles: true,
+      composed: true,
+    });
+    this.dispatchEvent(event);
+  }
+
+  _deleteOverride(key: string) {
+    const _config = Object.assign({}, this._config);
+    if (_config["keys"] && _config["keys"][key]) {
+      _config["keys"] = { ..._config["keys"] };
+      delete _config["keys"][key];
+      if (Object.keys(_config["keys"]).length === 0) {
+        delete _config["keys"];
+      }
+    }
+    this._config = _config;
+    if (this._expandedOverride === key) {
+      this._expandedOverride = null;
+    }
+    const event = new CustomEvent("config-changed", {
+      detail: { config: _config },
+      bubbles: true,
+      composed: true,
+    });
+    this.dispatchEvent(event);
+  }
+
+  _getConfiguredKeys(): string[] {
+    if (!this._config?.keys) return [];
+    return Object.keys(this._config.keys).filter((k) =>
+      OVERRIDEABLE_BUTTONS.some((b) => b.key === k),
+    );
+  }
+
+  _getButtonName(key: string): string {
+    const btn = OVERRIDEABLE_BUTTONS.find((b) => b.key === key);
+    return btn ? btn.name : key;
+  }
+
+  _getServiceOptions(): string[] {
+    if (!this.hass?.services) return [];
+    const services: string[] = [];
+    for (const domain of Object.keys(this.hass.services)) {
+      for (const service of Object.keys(this.hass.services[domain])) {
+        services.push(`${domain}.${service}`);
+      }
+    }
+    return services.sort();
+  }
+
+  _getEntityOptions(): string[] {
+    if (!this.hass?.states) return [];
+    return Object.keys(this.hass.states).sort();
+  }
+
+  _renderOverridesSection() {
+    const configuredKeys = this._getConfiguredKeys();
+    return html`
+      <div class="overrides-header" @click=${() => this._toggleOverridesSection()}>
+        <span class="heading">Overrides</span>
+        <ha-icon icon="${this._overridesExpanded ? 'mdi:chevron-up' : 'mdi:chevron-down'}"></ha-icon>
+      </div>
+      ${this._overridesExpanded ? html`
+        <div class="overrides-content">
+          <div class="add-override-row">
+            <select class="select-item" @change=${(e) => this._onButtonSelect(e)}>
+              <option value="">Select button to override...</option>
+              ${OVERRIDEABLE_BUTTONS.map((btn) => html`
+                <option value="${btn.key}">${btn.name}</option>
+              `)}
+            </select>
+          </div>
+          ${configuredKeys.length > 0 ? html`
+            <div class="configured-overrides">
+              ${configuredKeys.map((key) => this._renderOverrideItem(key))}
+            </div>
+          ` : ''}
+        </div>
+      ` : ''}
+    `;
+  }
+
+  _renderOverrideItem(key: string) {
+    const isExpanded = this._expandedOverride === key;
+    const keyConfig = this._config?.keys?.[key] || {};
+    const icon = keyConfig.icon || '';
+    const style = keyConfig.style || '';
+    const service = keyConfig.service || '';
+    const entityId = keyConfig.data?.entity_id || '';
+    return html`
+      <div class="override-item">
+        <div class="override-item-header" @click=${() => this._toggleOverrideConfig(key)}>
+          <span>${this._getButtonName(key)}</span>
+          <div class="override-item-actions">
+            <ha-icon icon="mdi:delete" @click=${(e) => { e.stopPropagation(); this._deleteOverride(key); }}></ha-icon>
+            <ha-icon icon="${isExpanded ? 'mdi:chevron-up' : 'mdi:chevron-down'}"></ha-icon>
+          </div>
+        </div>
+        ${isExpanded ? html`
+          <div class="override-item-config">
+            <label>Icon (optional):</label>
+            <input type="text" placeholder="mdi:volume-high" .value=${icon}
+                   @input=${(e) => this._updateOverrideField(key, 'icon', e.target.value)} />
+            <label>Style (optional):</label>
+            <input type="text" placeholder="color: green;" .value=${style}
+                   @input=${(e) => this._updateOverrideField(key, 'style', e.target.value)} />
+            <label>Service:</label>
+            <input type="text" list="service-list" placeholder="media_player.volume_up" .value=${service}
+                   @input=${(e) => this._updateOverrideField(key, 'service', e.target.value)} />
+            <datalist id="service-list">
+              ${this._getServiceOptions().map((s) => html`<option value="${s}"></option>`)}
+            </datalist>
+            <label>Entity ID:</label>
+            <input type="text" list="entity-list" placeholder="media_player.receiver" .value=${entityId}
+                   @input=${(e) => this._updateOverrideField(key, 'entity_id', e.target.value)} />
+            <datalist id="entity-list">
+              ${this._getEntityOptions().map((e) => html`<option value="${e}"></option>`)}
+            </datalist>
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
 
 
   render() {
@@ -362,6 +587,7 @@ class LgRemoteControlEditor extends LitElement {
       ${this.getDeviceAVReceiverDropdown(this._config.av_receiver_family)}
       ${this.getMediaPlayerEntityDropdown(this._config.av_receiver_family)}
       ${this.setDimensions(this._config.dimensions??{})}
+      ${this._renderOverridesSection()}
       <br>
       <p>Other functionalities must be configured manually in code editor</p>
       <p>references to <a href="https://github.com/madmicio/LG-WebOS-Remote-Control">https://github.com/madmicio/LG-WebOS-Remote-Control</a></p>
@@ -379,29 +605,105 @@ class LgRemoteControlEditor extends LitElement {
 
   static get styles() {
     return css`
- 
+
         .color-selector {
             display: grid;
             grid-template-columns: auto 8ch 3ch;
             width: 40ch;
         }
- 
+
         .color-item {
             padding: .6em;
             font-size: 1em;
         }
- 
+
         .heading {
             font-weight: bold;
         }
- 
+
         .select-item {
             background-color: var(--label-badge-text-color);
             width: 40ch;
-            padding: .6em; 
+            padding: .6em;
             font-size: 1em;
         }
- 
+
+        .overrides-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.5em;
+            background-color: var(--primary-color);
+            color: white;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-top: 1em;
+        }
+        .overrides-header .heading {
+            color: white;
+        }
+        .overrides-content {
+            padding: 0.5em;
+            background-color: var(--card-background-color);
+            border: 1px solid var(--divider-color);
+            border-top: none;
+            border-radius: 0 0 4px 4px;
+        }
+        .add-override-row {
+            margin-bottom: 0.5em;
+        }
+        .add-override-row select {
+            width: 100%;
+            box-sizing: border-box;
+        }
+        .configured-overrides {
+            margin-top: 0.5em;
+        }
+        .override-item {
+            margin-bottom: 0.5em;
+            border: 1px solid var(--divider-color);
+            border-radius: 4px;
+            overflow: hidden;
+        }
+        .override-item-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.5em;
+            background-color: var(--secondary-background-color);
+            cursor: pointer;
+        }
+        .override-item-actions {
+            display: flex;
+            align-items: center;
+            gap: 0.5em;
+        }
+        .override-item-actions ha-icon {
+            cursor: pointer;
+        }
+        .override-item-actions ha-icon[icon="mdi:delete"] {
+            color: var(--error-color);
+        }
+        .override-item-config {
+            padding: 0.5em;
+            background-color: var(--card-background-color);
+        }
+        .override-item-config label {
+            display: block;
+            margin-top: 0.4em;
+            margin-bottom: 0.2em;
+            font-size: 0.9em;
+        }
+        .override-item-config input {
+            width: calc(100% - 0.8em);
+            padding: 0.4em;
+            font-size: 0.9em;
+            border: 1px solid var(--divider-color);
+            border-radius: 4px;
+            background-color: var(--input-background-color, var(--card-background-color));
+            color: var(--primary-text-color);
+        }
+
         `;
   }
 
diff --git a/src/lg-remote-control.ts b/src/lg-remote-control.ts
index 1397072..07fc72c 100644
--- a/src/lg-remote-control.ts
+++ b/src/lg-remote-control.ts
@@ -138,9 +138,9 @@ class LgRemoteControl extends LitElement {
                     <div class="grid-container-power"  style="--remotewidth: ${remoteWidth}">
                         <button class="btn-flat flat-high ripple" @click=${() => this._channelList()}><ha-icon icon="mdi:format-list-numbered"/></button>
                         ${['off', 'unavailable'].includes(stateObj.state) ? html`
-                            <button class="btn ripple" @click=${() => this._media_player_turn_on(mac)}><ha-icon icon="mdi:power" style="color: ${textColor};"/></button>
+                            <button class="btn ripple" @click=${() => this._media_player_turn_on(mac)}><ha-icon icon="${this._getIcon("POWER", "mdi:power")}" style="color: ${textColor};"/></button>
                         ` : html`
-                            <button class="btn ripple" @click=${() => this._media_player_service("POWER", "turn_off")}><ha-icon icon="mdi:power" style="color: red;"/></button>
+                            <button class="btn ripple" @click=${() => this._media_player_service("POWER", "turn_off")}><ha-icon icon="${this._getIcon("POWER", "mdi:power")}" style="color: red;"/></button>
                         `}
                         <button class="btn-flat flat-high ripple" @click=${() => this._show_keypad = !this._show_keypad}>123</button>
                     </div>
@@ -198,17 +198,17 @@ class LgRemoteControl extends LitElement {
                             ${this._show_keypad ? html`
                                 <!-- ################################ keypad ################################## -->
                                 <div class="grid-container-keypad">
-                                    <button class="btn-keypad ripple" @click=${() => this._button("1")}>1</button>
-                                    <button class="btn-keypad ripple" @click=${() => this._button("2")}>2</button>
-                                    <button class="btn-keypad ripple" @click=${() => this._button("3")}>3</button>
-                                    <button class="btn-keypad ripple" @click=${() => this._button("4")}>4</button>
-                                    <button class="btn-keypad ripple" @click=${() => this._button("5")}>5</button>
-                                    <button class="btn-keypad ripple" @click=${() => this._button("6")}>6</button>
-                                    <button class="btn-keypad ripple" @click=${() => this._button("7")}>7</button>
-                                    <button class="btn-keypad ripple" @click=${() => this._button("8")}>8</button>
-                                    <button class="btn-keypad ripple" @click=${() => this._button("9")}>9</button>
+                                    <button class="btn-keypad ripple" style="${this._getButtonStyle("1", "")}" @click=${() => this._button("1")}>${this._getIcon("1", "") ? html`<ha-icon icon="${this._getIcon("1", "")}"/>` : "1"}</button>
+                                    <button class="btn-keypad ripple" style="${this._getButtonStyle("2", "")}" @click=${() => this._button("2")}>${this._getIcon("2", "") ? html`<ha-icon icon="${this._getIcon("2", "")}"/>` : "2"}</button>
+                                    <button class="btn-keypad ripple" style="${this._getButtonStyle("3", "")}" @click=${() => this._button("3")}>${this._getIcon("3", "") ? html`<ha-icon icon="${this._getIcon("3", "")}"/>` : "3"}</button>
+                                    <button class="btn-keypad ripple" style="${this._getButtonStyle("4", "")}" @click=${() => this._button("4")}>${this._getIcon("4", "") ? html`<ha-icon icon="${this._getIcon("4", "")}"/>` : "4"}</button>
+                                    <button class="btn-keypad ripple" style="${this._getButtonStyle("5", "")}" @click=${() => this._button("5")}>${this._getIcon("5", "") ? html`<ha-icon icon="${this._getIcon("5", "")}"/>` : "5"}</button>
+                                    <button class="btn-keypad ripple" style="${this._getButtonStyle("6", "")}" @click=${() => this._button("6")}>${this._getIcon("6", "") ? html`<ha-icon icon="${this._getIcon("6", "")}"/>` : "6"}</button>
+                                    <button class="btn-keypad ripple" style="${this._getButtonStyle("7", "")}" @click=${() => this._button("7")}>${this._getIcon("7", "") ? html`<ha-icon icon="${this._getIcon("7", "")}"/>` : "7"}</button>
+                                    <button class="btn-keypad ripple" style="${this._getButtonStyle("8", "")}" @click=${() => this._button("8")}>${this._getIcon("8", "") ? html`<ha-icon icon="${this._getIcon("8", "")}"/>` : "8"}</button>
+                                    <button class="btn-keypad ripple" style="${this._getButtonStyle("9", "")}" @click=${() => this._button("9")}>${this._getIcon("9", "") ? html`<ha-icon icon="${this._getIcon("9", "")}"/>` : "9"}</button>
                                     <button class="btn-keypad"></button>
-                                    <button class="btn-keypad ripple" @click=${() => this._button("0")}>0</button>
+                                    <button class="btn-keypad ripple" style="${this._getButtonStyle("0", "")}" @click=${() => this._button("0")}>${this._getIcon("0", "") ? html`<ha-icon icon="${this._getIcon("0", "")}"/>` : "0"}</button>
                                     <button class="btn-keypad"></button>
                                 </div>
                                 <!-- ################################# keypad end ############################## -->
@@ -219,14 +219,14 @@ class LgRemoteControl extends LitElement {
                                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 79"><path d="m 30 15 a 10 10 0 0 1 20 0 a 15 15 0 0 0 15 15 a 10 10 0 0 1 0 20 a 15 15 0 0 0 -15 15 a 10 10 0 0 1 -20 0 a 15 15 0 0 0 -15 -15 a 10 10 0 0 1 0 -20 a 15 15 0 0 0 15 -15" fill="var(--remote-button-color)" stroke="#000000" stroke-width="0" /></svg>
                                     </div>
                                     <button class="btn ripple item_sound" @click=${() => this._show_sound_output = true}><ha-icon icon="mdi:speaker"/></button>
-                                    <button class="btn ripple item_up" style="background-color: transparent;" @click=${() => this._button("UP")}><ha-icon icon="mdi:chevron-up"/></button>
+                                    <button class="btn ripple item_up" style="background-color: transparent; ${this._getButtonStyle("UP", "")}" @click=${() => this._button("UP")}><ha-icon icon="${this._getIcon("UP", "mdi:chevron-up")}"/></button>
                                     <button class="btn ripple item_input" @click=${() => this._show_inputs = true}><ha-icon icon="mdi:import"/></button>
-                                    <button class="btn ripple item_2_sx" style="background-color: transparent;" @click=${() => this._button("LEFT")}><ha-icon icon="mdi:chevron-left"/></button>
-                                    <div class="ok_button ripple item_2_c" style="border: solid 2px ${backgroundColor}"  @click=${() => this._button("ENTER")}>${this._show_vol_text === true ? this.volume_value : 'OK'}</div>
-                                    <button class="btn ripple item_right" style="background-color: transparent;" @click=${() => this._button("RIGHT")}><ha-icon icon="mdi:chevron-right"/></button>
-                                    <button class="btn ripple item_back" @click=${() => this._button("BACK")}><ha-icon icon="mdi:undo-variant"/></button>
-                                    <button class="btn ripple item_down" style="background-color: transparent;" @click=${() => this._button("DOWN")}><ha-icon icon="mdi:chevron-down"/></button>
-                                    <button class="btn ripple item_exit" @click=${() => this._button("EXIT")}>EXIT</button>
+                                    <button class="btn ripple item_2_sx" style="background-color: transparent; ${this._getButtonStyle("LEFT", "")}" @click=${() => this._button("LEFT")}><ha-icon icon="${this._getIcon("LEFT", "mdi:chevron-left")}"/></button>
+                                    <div class="ok_button ripple item_2_c" style="border: solid 2px ${backgroundColor}; ${this._getButtonStyle("ENTER", "")}" @click=${() => this._button("ENTER")}>${this._getIcon("ENTER", "") ? html`<ha-icon icon="${this._getIcon("ENTER", "")}"/>` : (this._show_vol_text === true ? this.volume_value : 'OK')}</div>
+                                    <button class="btn ripple item_right" style="background-color: transparent; ${this._getButtonStyle("RIGHT", "")}" @click=${() => this._button("RIGHT")}><ha-icon icon="${this._getIcon("RIGHT", "mdi:chevron-right")}"/></button>
+                                    <button class="btn ripple item_back" style="${this._getButtonStyle("BACK", "")}" @click=${() => this._button("BACK")}><ha-icon icon="${this._getIcon("BACK", "mdi:undo-variant")}"/></button>
+                                    <button class="btn ripple item_down" style="background-color: transparent; ${this._getButtonStyle("DOWN", "")}" @click=${() => this._button("DOWN")}><ha-icon icon="${this._getIcon("DOWN", "mdi:chevron-down")}"/></button>
+                                    <button class="btn ripple item_exit" style="${this._getButtonStyle("EXIT", "")}" @click=${() => this._button("EXIT")}>${this._getIcon("EXIT", "") ? html`<ha-icon icon="${this._getIcon("EXIT", "")}"/>` : "EXIT"}</button>
                                 </div>
                                 <!-- ################################# DIRECTION PAD END ################################# -->
                             `}
@@ -255,10 +255,10 @@ class LgRemoteControl extends LitElement {
                         <!-- ################################# COLORED BUTTONS ################################# -->
                         ${colorButtons ? html`
                             <div class="grid-container-color_btn">
-                                <button class="btn-color ripple" style="background-color: red; height: calc(var(--remotewidth) / 12);" @click=${() => this._button("RED")}></button>
-                                <button class="btn-color ripple" style="background-color: green; height: calc(var(--remotewidth) / 12);" @click=${() => this._button("GREEN")}></button>
-                                <button class="btn-color ripple" style="background-color: yellow; height: calc(var(--remotewidth) / 12);" @click=${() => this._button("YELLOW")}></button>
-                                <button class="btn-color ripple" style="background-color: blue; height: calc(var(--remotewidth) / 12);" @click=${() => this._button("BLUE")}></button>
+                                <button class="btn-color ripple" style="background-color: red; height: calc(var(--remotewidth) / 12); ${this._getButtonStyle("RED", "")}" @click=${() => this._button("RED")}>${this._getIcon("RED", "") ? html`<ha-icon icon="${this._getIcon("RED", "")}"/>` : ""}</button>
+                                <button class="btn-color ripple" style="background-color: green; height: calc(var(--remotewidth) / 12); ${this._getButtonStyle("GREEN", "")}" @click=${() => this._button("GREEN")}>${this._getIcon("GREEN", "") ? html`<ha-icon icon="${this._getIcon("GREEN", "")}"/>` : ""}</button>
+                                <button class="btn-color ripple" style="background-color: yellow; height: calc(var(--remotewidth) / 12); ${this._getButtonStyle("YELLOW", "")}" @click=${() => this._button("YELLOW")}>${this._getIcon("YELLOW", "") ? html`<ha-icon icon="${this._getIcon("YELLOW", "")}"/>` : ""}</button>
+                                <button class="btn-color ripple" style="background-color: blue; height: calc(var(--remotewidth) / 12); ${this._getButtonStyle("BLUE", "")}" @click=${() => this._button("BLUE")}>${this._getIcon("BLUE", "") ? html`<ha-icon icon="${this._getIcon("BLUE", "")}"/>` : ""}</button>
                             </div>
                         ` : html`
                         `}
@@ -266,8 +266,8 @@ class LgRemoteControl extends LitElement {
 
                         <div class="grid-container-volume-channel-control" >
                             <button class="btn ripple" id="plusButton"  style="border-radius: 50% 50% 0px 0px; margin: 0px auto 0px auto; height: 100%;" }><ha-icon icon="mdi:plus"/></button>
-                            <button class="btn-flat flat-high ripple" id="homeButton" style="margin-top: 0px; height: 50%;" @mousedown=${(e) => this._homeButtonDown(e)} @touchstart=${(e) => this._homeButtonDown(e)} @mouseup=${(e) => this._homeButtonUp(e)} @touchend=${(e) => this._homeButtonUp(e)}>
-    <ha-icon icon="mdi:home"></ha-icon>
+                            <button class="btn-flat flat-high ripple" id="homeButton" style="margin-top: 0px; height: 50%; ${this._getButtonStyle("HOME", "")}" @mousedown=${(e) => this._homeButtonDown(e)} @touchstart=${(e) => this._homeButtonDown(e)} @mouseup=${(e) => this._homeButtonUp(e)} @touchend=${(e) => this._homeButtonUp(e)}>
+    <ha-icon icon="${this._getIcon("HOME", "mdi:home")}"></ha-icon>
 </button>
                                                     
 
@@ -277,23 +277,23 @@ class LgRemoteControl extends LitElement {
 
 
 
-                            <button class="btn ripple" style="border-radius: 50% 50% 0px 0px; margin: 0px auto 0px auto; height: 100%;" @click=${() => this._button("CHANNELUP")}><ha-icon icon="mdi:chevron-up"/></button>
-                            <button class="btn" style="border-radius: 0px; cursor: default; margin: 0px auto 0px auto; height: 100%;"><ha-icon icon="${stateObj.attributes.is_volume_muted === true ? 'mdi:volume-off' : 'mdi:volume-high'}"/></button>
-                            <button class="btn ripple" Style="color:${stateObj.attributes.is_volume_muted === true ? 'red' : ''}; height: 100%;" @click=${() => this._button("MUTE")}><span class="${stateObj.attributes.is_volume_muted === true ? 'blink' : ''}"><ha-icon icon="mdi:volume-mute"></span></button>
-                            <button class="btn" style="border-radius: 0px; cursor: default; margin: 0px auto 0px auto; height: 100%;"><ha-icon icon="mdi:parking"/></button>
+                            <button class="btn ripple" style="border-radius: 50% 50% 0px 0px; margin: 0px auto 0px auto; height: 100%; ${this._getButtonStyle("CHANNELUP", "")}" @click=${() => this._button("CHANNELUP")}><ha-icon icon="${this._getIcon("CHANNELUP", "mdi:chevron-up")}"/></button>
+                            <button class="btn" style="border-radius: 0px; cursor: default; margin: 0px auto 0px auto; height: 100%; ${this._getButtonStyle("VOLUME_UP", "")}"><ha-icon icon="${this._getIcon("VOLUME_UP", stateObj.attributes.is_volume_muted === true ? 'mdi:volume-off' : 'mdi:volume-high')}"/></button>
+                            <button class="btn ripple" Style="color:${stateObj.attributes.is_volume_muted === true ? 'red' : ''}; height: 100%; ${this._getButtonStyle("MUTE", "")}" @click=${() => this._button("MUTE")}><span class="${stateObj.attributes.is_volume_muted === true ? 'blink' : ''}"><ha-icon icon="${this._getIcon("MUTE", "mdi:volume-mute")}"></span></button>
+                            <button class="btn" style="border-radius: 0px; cursor: default; margin: 0px auto 0px auto; height: 100%; ${this._getButtonStyle("VOLUME_DOWN", "")}"><ha-icon icon="${this._getIcon("VOLUME_DOWN", "mdi:parking")}"/></button>
                             <button class="btn ripple" id="minusButton" style="border-radius: 0px 0px 50% 50%;  margin: 0px auto 0px auto; height: 100%;" ><ha-icon icon="mdi:minus"/></button>
-                            <button class="btn-flat flat-high ripple" style="margin-bottom: 0px; height: 50%;" @click=${() => this._button("INFO")}><ha-icon icon="mdi:information-variant"/></button>
-                            <button class="btn ripple" style="border-radius: 0px 0px 50% 50%;  margin: 0px auto 0px auto; height: 100%;"  @click=${() => this._button("CHANNELDOWN")}><ha-icon icon="mdi:chevron-down"/></button>
+                            <button class="btn-flat flat-high ripple" style="margin-bottom: 0px; height: 50%; ${this._getButtonStyle("INFO", "")}" @click=${() => this._button("INFO")}><ha-icon icon="${this._getIcon("INFO", "mdi:information-variant")}"/></button>
+                            <button class="btn ripple" style="border-radius: 0px 0px 50% 50%;  margin: 0px auto 0px auto; height: 100%; ${this._getButtonStyle("CHANNELDOWN", "")}"  @click=${() => this._button("CHANNELDOWN")}><ha-icon icon="${this._getIcon("CHANNELDOWN", "mdi:chevron-down")}"/></button>
                         </div>
 
                         <!-- ################################# MEDIA CONTROL ################################# -->
                         <div class="grid-container-media-control" >
-                            <button class="btn-flat flat-low ripple"  @click=${() => this._command("PLAY", "media.controls/play")}><ha-icon icon="mdi:play"/></button>
-                            <button class="btn-flat flat-low ripple"  @click=${() => this._command("PAUSE", "media.controls/pause")}><ha-icon icon="mdi:pause"/></button>
-                            <button class="btn-flat flat-low ripple"  @click=${() => this._command("STOP", "media.controls/stop")}><ha-icon icon="mdi:stop"/></button>
-                            <button class="btn-flat flat-low ripple"  @click=${() => this._command("REWIND", "media.controls/rewind")}><ha-icon icon="mdi:skip-backward"/></button>
-                            <button class="btn-flat flat-low ripple" style="color: red;" @click=${() => this._command("RECORD", "media.controls/Record")}><ha-icon icon="mdi:record"/></button>
-                            <button class="btn-flat flat-low ripple"  @click=${() => this._command("FAST_FOWARD", "media.controls/fastForward")}><ha-icon icon="mdi:skip-forward"/></button>
+                            <button class="btn-flat flat-low ripple"  @click=${() => this._command("PLAY", "media.controls/play")}><ha-icon icon="${this._getIcon("PLAY", "mdi:play")}"/></button>
+                            <button class="btn-flat flat-low ripple"  @click=${() => this._command("PAUSE", "media.controls/pause")}><ha-icon icon="${this._getIcon("PAUSE", "mdi:pause")}"/></button>
+                            <button class="btn-flat flat-low ripple"  @click=${() => this._command("STOP", "media.controls/stop")}><ha-icon icon="${this._getIcon("STOP", "mdi:stop")}"/></button>
+                            <button class="btn-flat flat-low ripple"  @click=${() => this._command("REWIND", "media.controls/rewind")}><ha-icon icon="${this._getIcon("REWIND", "mdi:skip-backward")}"/></button>
+                            <button class="btn-flat flat-low ripple" style="${this._getButtonStyle("RECORD", "color: red;")}" @click=${() => this._command("RECORD", "media.controls/Record")}><ha-icon icon="${this._getIcon("RECORD", "mdi:record")}"/></button>
+                            <button class="btn-flat flat-low ripple"  @click=${() => this._command("FAST_FOWARD", "media.controls/fastForward")}><ha-icon icon="${this._getIcon("FAST_FOWARD", "mdi:skip-forward")}"/></button>
                         </div>
                         <!-- ################################# MEDIA CONTROL END ################################# -->
                         </div>
@@ -536,6 +536,21 @@ class LgRemoteControl extends LitElement {
 
     }
 
+
+    _getIcon(key: string, defaultIcon: string): string {
+        if (this.config.keys && key in this.config.keys && this.config.keys[key]["icon"]) {
+            return this.config.keys[key]["icon"];
+        }
+        return defaultIcon;
+    }
+
+    _getButtonStyle(key: string, defaultStyle: string): string {
+        if (this.config.keys && key in this.config.keys && this.config.keys[key]["style"]) {
+            return this.config.keys[key]["style"];
+        }
+        return defaultStyle;
+    }
+
     static getIcon(iconName) {
         return Object.keys(LgRemoteControl.iconMapping).includes(iconName)
             ? LgRemoteControl.iconMapping[iconName]