diff --git a/dist/card_editor.js b/dist/card_editor.js
new file mode 100644
index 0000000..4ce4ae0
--- /dev/null
+++ b/dist/card_editor.js
@@ -0,0 +1,55 @@
+//
+//  Define and register the UI Card Editor 
+//
+import { html, LitElement } from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
+
+
+export class MyCustomCardEditor extends LitElement {
+
+    static get properties() {
+        return {
+            hass: {},
+            _config: {},
+        };
+    }
+
+    // setConfig works the same way as for the card itself
+    setConfig(config) {
+        this._config = config;
+    }
+
+    // This function is called when the input element of the editor loses focus
+    entityChanged(ev) {
+
+        // We make a copy of the current config so we don't accidentally overwrite anything too early
+        const _config = Object.assign({}, this._config);
+        // Then we update the entity value with what we just got from the input field
+        _config.entity = ev.target.value;
+        // And finally write back the updated configuration all at once
+        this._config = _config;
+
+        // A config-changed event will tell lovelace we have made changed to the configuration
+        // this make sure the changes are saved correctly later and will update the preview
+        const event = new CustomEvent("config-changed", {
+            detail: { config: _config },
+            bubbles: true,
+            composed: true,
+        });
+        this.dispatchEvent(event);
+    }
+
+    render() {
+        if (!this.hass || !this._config) {
+            return html``;
+        }
+
+      // @focusout below will call entityChanged when the input field loses focus (e.g. the user tabs away or clicks outside of it)
+        return html`
+            Entity:
+            <input
+            .value=${this._config.entity}
+            @focusout=${this.entityChanged}
+            ></input>
+        `;
+    }
+}
\ No newline at end of file
diff --git a/dist/const.js b/dist/const.js
new file mode 100644
index 0000000..629836b
--- /dev/null
+++ b/dist/const.js
@@ -0,0 +1 @@
+export let VERSION = "v0.8.0"
\ No newline at end of file
diff --git a/dist/ha-teamtracker-card.js b/dist/ha-teamtracker-card.js
index 8844a77..5560334 100644
--- a/dist/ha-teamtracker-card.js
+++ b/dist/ha-teamtracker-card.js
@@ -1,927 +1,22 @@
-//import { html, LitElement } from "https://unpkg.com/lit?module";
-import { html, LitElement } from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
-import { Translator } from "./localize/translator.js";
+import { VERSION } from "./const.js";
+import { MyCustomCardEditor } from "./card_editor.js";
+import { TeamTrackerCard } from "./teamtracker_card.js";
 
-class TeamTrackerCard extends LitElement {
-//
-// Trigger the UI Card Editor from Card Picker
-//
-//  static getConfigElement() {
-//    // Create and return an editor element
-//    return document.createElement("my-custom-card-editor");
-//  }
-//
-//  static getStubConfig() {
-//    // Return a minimal configuration that will result in a working card configuration
-//    return { entity: "" };
-//  }
-
-  static get properties() {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
-
-  setConfig(config) {
-    this._config = config;
-
-    if (config.debug) {
-      console.info("%c TeamTracker Card \n%c Version 0.7.3    ",
-        "color: orange; font-weight: bold; background: black",
-        "color: white; font-weight: bold; background: dimgray");
-        console.info(config);
-    }
-  }
-  getCardSize() {
-    return 5;
-  }
-
-  render() {
-    if (!this.hass || !this._config) {
-      return html``;
-    }
-
-    var lang = this.hass.selectedLanguage || this.hass.language  || navigator.language || "en"
-    var t = new Translator(lang);
-
-    const stateObj = this.hass.states[this._config.entity];
-    var sport = stateObj.attributes.sport;
-    if (!(["australian-football", "baseball", "basketball", "cricket", "football","hockey", "soccer", "volleyball", "golf", "mma", "racing", "tennis"].includes(sport))) {
-      sport = "default"
-    }
-
-    const cardTitle = this._config.card_title;
-    const outline = this._config.outline;
-    const outlineColor = this._config.outline_color;
-    const showLeague = this._config.show_league;
-//    const showTicker = this._config.show_ticker;
-    var homeSide = String(this._config.home_side).toUpperCase();
-
-    var logoBG = [];
-    var logo = [];
-    var name = [];
-    var initials = [];
-    var rank = [];
-    var record = [];
-    var score = [];
-    var scoreOp = [];
-    var scoreSize = "3em";
-    var barLabel= [];
-    var barLength = [];
-    var color = [];
-    var timeouts =[];
-    var possessionOp = [];
-
-    var team = 1;
-    var oppo = 2;
-    if (((homeSide == "RIGHT") && (stateObj.attributes.team_homeaway == "home")) ||
-        ((homeSide == "LEFT")  && (stateObj.attributes.opponent_homeaway == "home"))) {
-        team = 2;
-        oppo = 1;
-    }
-
-    barLength[team] = 0;
-    if (stateObj.attributes.team_win_probability) {
-        barLength[team] = (stateObj.attributes.team_win_probability * 100).toFixed(0);
-    }
-    barLength[oppo] = 0;
-    if (stateObj.attributes.opponent_win_probability) {
-        barLength[oppo] = (stateObj.attributes.opponent_win_probability * 100).toFixed(0);
-    }
-    score[team] = stateObj.attributes.team_score;
-    score[oppo] = stateObj.attributes.opponent_score;
-
-    var time_format = "language";
-    try {
-      time_format = this.hass.locale["time_format"] || "language";
-    }
-    catch (e) {
-      time_format = "language"
-    }
-
-    var gameDate = new Date (stateObj.attributes.date);
-    var gameDateStr = gameDate.toLocaleDateString(lang, { month: 'short', day: '2-digit' });
-
-    var todayDate = new Date();
-    var todayDateStr = todayDate.toLocaleDateString(lang, { month: 'short', day: '2-digit' });
-
-    var tomorrowDate = new Date();
-    tomorrowDate.setDate(todayDate.getDate() + 1);
-    var tomorrowDateStr = tomorrowDate.toLocaleDateString(lang, { month: 'short', day: '2-digit' });
-
-    var nextweekDate = new Date();
-    nextweekDate.setDate(todayDate.getDate() + 6);
-
-    var gameWeekday = gameDate.toLocaleDateString(lang, { weekday: 'long' });
-    if (gameDateStr === todayDateStr) {
-        gameWeekday = t.translate("common.today");
-    }
-    else if (gameDateStr === tomorrowDateStr) {
-        gameWeekday = t.translate("common.tomorrow");
-    }
-    var gameDatePOST = gameDateStr;
-    var gameDatePRE = null;
-    if (gameDate > nextweekDate) {
-        gameDatePRE = gameDateStr;
-    }
-
-    var gameTime = gameDate.toLocaleTimeString(lang, { hour: '2-digit', minute:'2-digit' });
-    if (time_format == "24") {
-      gameTime = gameDate.toLocaleTimeString(lang, { hour: '2-digit', minute:'2-digit', hour12:false });
-    }
-    if (time_format == "12") {
-      gameTime = gameDate.toLocaleTimeString(lang, { hour: '2-digit', minute:'2-digit', hour12:true });
-    }
-    if (time_format == "system") {
-      var sys_lang = navigator.language || "en"
-      gameTime = gameDate.toLocaleTimeString(sys_lang, { hour: '2-digit', minute:'2-digit' });
-    }
-
-    var clrOut = 0;
-    var toRadius = 3;
-    var probRadius = 6;
-    var outColor = outlineColor;
-
-    if (outline == true) {
-      clrOut = 1;
-      toRadius = 4;
-      probRadius = 7;
-    }
-    if (!this._config.outline_color) {
-      outColor = '#ffffff';
-    }
-
-    scoreOp[1] = 1;
-    scoreOp[2] = 1;
-    if (Number(score[1]) < Number(score[2])) {
-        scoreOp[1] = 0.6;
-    }
-    if (Number(score[2]) < Number(score[1])) {
-        scoreOp[2] = 0.6;
-    }
-
-    if (stateObj.attributes.team_homeaway == 'home') {
-      color[team] = stateObj.attributes.team_colors[0];
-      color[oppo] = stateObj.attributes.opponent_colors[1];
-    }
-    else if (stateObj.attributes.team_homeaway == 'away') {
-      color[team] = stateObj.attributes.team_colors[1];
-      color[oppo] = stateObj.attributes.opponent_colors[0];
-    }
-    else {
-      color[team] = '#ffffff';
-      color[oppo] = '#000000';
-    }
-
-    possessionOp[team] = 0;
-    possessionOp[oppo] = 0;
-    if (stateObj.attributes.possession == stateObj.attributes.team_id) {
-      possessionOp[team] = 1;
-    }
-    if (stateObj.attributes.possession == stateObj.attributes.opponent_id) {
-      possessionOp[oppo] = 1;
-    }
-
-    if (!stateObj) {
-      return html` <ha-card>Unknown entity: ${this._config.entity}</ha-card> `;
-    }
-    if (stateObj.state == 'unavailable') {
-      return html`
-        <style>
-          ha-card {padding: 10px 16px;}
-        </style>
-        <ha-card>
-          Sensor unavailable: ${this._config.entity}
-        </ha-card>
-      `;
-    }
-//
-//  Set default values for variable components
-//
-
-    var byeTerm = t.translate("common.byeTerm");
-    var title = cardTitle;
-    if (showLeague) {
-      title = title || stateObj.attributes.league
-    }
-
-    logo[team] = stateObj.attributes.team_logo;
-    logoBG[team] = stateObj.attributes.team_logo;
-    name[team] = stateObj.attributes.team_name;
-    rank[team] = stateObj.attributes.team_rank;
-    record[team] = stateObj.attributes.team_record;
-    logo[oppo] = stateObj.attributes.opponent_logo;
-    logoBG[oppo] = stateObj.attributes.opponent_logo;
-    name[oppo] = stateObj.attributes.opponent_name;
-    rank[oppo] = stateObj.attributes.opponent_rank;
-    record[oppo] = stateObj.attributes.opponent_record;
-
-    if (showLeague) {
-      logoBG[team] = stateObj.attributes.league_logo
-      logoBG[oppo] = stateObj.attributes.league_logo
-    }
-
-    var finalTerm = stateObj.attributes.clock + " - " + gameDatePOST;
-    var startTerm = t.translate(sport + ".startTerm");
-    var startTime =stateObj.attributes.kickoff_in;
-    var venue = stateObj.attributes.venue;
-    var location = stateObj.attributes.location;
-
-    var pre1 = stateObj.attributes.odds;
-    var pre2 = '';
-    if (stateObj.attributes.overunder) {
-      pre2 = t.translate(sport + ".overUnder", "%s", String(stateObj.attributes.overunder));
-    }
-    var pre3 = stateObj.attributes.tv_network;
-
-    var in0 = '';
-    var in1 = '';
-    if (stateObj.attributes.down_distance_text) {
-        in1 = t.translate(sport + ".gameStat1", "%s", stateObj.attributes.down_distance_text);
-    }
-    var in2 = '';
-    if (stateObj.attributes.tv_network) {
-        in2 = t.translate(sport + ".gameStat2", "%s", stateObj.attributes.tv_network);
-    }
-
-    var gameBar = t.translate(sport + ".gameBar");
-    barLabel[team] = t.translate(sport + ".teamBarLabel", "%s", String(barLength[team]));
-    barLabel[oppo] = t.translate(sport + ".oppoBarLabel", "%s", String(barLength[oppo]));
-
-    var lastPlay = stateObj.attributes.last_play;
-    var lastPlaySpeed = 18;
-    if (lastPlay) {
-      lastPlaySpeed = 18 + Math.floor(lastPlay.length/40) * 5;
-    }
-    var notFoundLogo = stateObj.attributes.league_logo;
-    var notFoundLogoBG = notFoundLogo;
-    var notFoundLeague = null;
-
-    if (stateObj.attributes.league != "XXX") {
-      notFoundLeague = stateObj.attributes.league;
-    }
-
-    var initialsDisplay = 'none';
-    var playClock = stateObj.attributes.clock;
-    var outsDisplay = 'none';
-    var basesDisplay = 'none';
-    var barDisplay = 'inherit';
-    var barWrapDisplay = "flex";
-    timeouts[team] = stateObj.attributes.team_timeouts;
-    timeouts[oppo] = stateObj.attributes.opponent_timeouts;
-
-    var timeoutsDisplay = 'inline';
-    if (this._config.show_timeouts == false) {
-      timeoutsDisplay = 'none';
-    }
-
-    var rankDisplay = 'inline';
-    if (this._config.show_rank == false) {
-      rankDisplay = 'none';
-    }
-
-    var notFoundTerm1 = stateObj.attributes.team_abbr;
-    var notFoundTerm2 = "NOT_FOUND"
-    if (stateObj.attributes.api_message) {
-        notFoundTerm2 = t.translate("common.api_error")
-        var apiTail = stateObj.attributes.api_message.substring(stateObj.attributes.api_message.length - 17)
-        if (apiTail.slice(-1) == "Z") {
-          var lastDateForm = new Date (apiTail)
-          notFoundTerm2 = t.translate("common.no_upcoming_games", "%s", lastDateForm.toLocaleDateString(lang))
-        }
-    }
-
-//
-//  MLB Specific Changes
-//
-    var onFirstOp = 0.2;
-    var onSecondOp = 0.2;
-    var onThirdOp = 0.2;
-    if (stateObj.attributes.on_first) {
-      onFirstOp = 1;
-    }
-    if (stateObj.attributes.on_second) {
-      onSecondOp = 1;
-    }
-    if (stateObj.attributes.on_third) {
-      onThirdOp = 1;
-    }
-    if (sport.includes("baseball")) {
-      in1 = t.translate("baseball.gameStat1", "%s", String(stateObj.attributes.balls));
-      in2 = t.translate("baseball.gameStat2", "%s", String(stateObj.attributes.strikes));
-      in0 = t.translate("baseball.gameStat3", "%s", String(stateObj.attributes.outs));
-      outsDisplay = 'inherit';
-      timeoutsDisplay = 'none';
-      basesDisplay = 'inherit';
-    }
-
-//
-//  Soccer Specific Changes
-//
-    if (sport.includes("soccer")) {
-      barLength[team] = stateObj.attributes.team_total_shots;
-      barLength[oppo] = stateObj.attributes.opponent_total_shots;
-      barLabel[team] = t.translate("soccer.teamBarLabel", "%s", stateObj.attributes.team_total_shots +'(' + stateObj.attributes.team_shots_on_target + ')');
-      barLabel[oppo] = t.translate("soccer.oppoBarLabel", "%s", stateObj.attributes.opponent_total_shots +'(' + stateObj.attributes.opponent_shots_on_target + ')');
-      timeoutsDisplay = 'none';
-    }
-
-//
-//  Hockey Specific Changes
-//
-if (sport.includes("hockey")) {
-  barLength[team] = stateObj.attributes.team_shots_on_target;
-  barLength[oppo] = stateObj.attributes.opponent_shots_on_target;
-  barLabel[team] = t.translate("hockey.teamBarLabel", "%s", String(stateObj.attributes.team_shots_on_target));
-  barLabel[oppo] = t.translate("hockey.oppoBarLabel", "%s", String(stateObj.attributes.opponent_shots_on_target));
-
-  timeoutsDisplay = 'none';
-}
-
-//
-//  Volleyball Specific Changes
-//
-    if (sport.includes("volleyball")) {
-      gameBar = t.translate("volleyball.gameBar", "%s", stateObj.attributes.clock);
-      barLength[team] = stateObj.attributes.team_score;
-      barLength[oppo] = stateObj.attributes.opponent_score;
-      barLabel[team] = t.translate("volleyball.teamBarLabel", "%s", String(stateObj.attributes.team_score));
-      barLabel[oppo] = t.translate("volleyball.oppoBarLabel", "%s", String(stateObj.attributes.opponent_score));
-      timeouts[team] = stateObj.attributes.team_sets_won;
-      timeouts[team] = stateObj.attributes.opponent_sets_won;
-      timeoutsDisplay = 'inline';
-    }
-
-//
-//  Basketball Specific Changes
-//
-    if (sport.includes("basketball")) {
-      timeoutsDisplay = 'none';
-      barDisplay = 'none';
-      barWrapDisplay = "none";
-    }
-
-//
-//  Tennis Specific Changes
-//
-    if (sport.includes("tennis")) {
-      venue = stateObj.attributes.event_name;
-      pre1 = t.translate("common.tourney" + stateObj.attributes.odds)
-      in1 = pre1;
-      finalTerm = stateObj.attributes.clock + " - " + gameDatePOST  + " (" + pre1 + ")";
-
-//      pre2 = null;
-//      pre3 = null;
-      gameBar = t.translate("tennis.gameBar", "%s", stateObj.attributes.clock);
-      barLength[team] = stateObj.attributes.team_score;
-      barLength[oppo] = stateObj.attributes.opponent_score;
-      if (stateObj.attributes.team_shots_on_target) {
-        gameBar = t.translate("tennis.gameBar", "%s", stateObj.attributes.clock + "(tiebreak)");
-        barLabel[team] = t.translate("tennis.teamBarLabel", "%s", stateObj.attributes.team_score +'(' + stateObj.attributes.team_shots_on_target + ')');
-      }
-      else {
-        barLabel[team] = t.translate("tennis.teamBarLabel", "%s", String(stateObj.attributes.team_score));
-      }
-      if (stateObj.attributes.team_shots_on_target) {
-        gameBar = t.translate("tennis.gameBar", "%s", stateObj.attributes.clock + "(tiebreak)");
-        barLabel[oppo] = t.translate("tennis.oppoBarLabel", "%s", stateObj.attributes.opponent_score +'(' + stateObj.attributes.opponent_shots_on_target + ')');
-      }
-      else {
-        barLabel[oppo] = t.translate("tennis.oppoBarLabel", "%s", String(stateObj.attributes.opponent_score ));
-      }
-      timeouts[team] = stateObj.attributes.team_sets_won;
-      timeouts[oppo] = stateObj.attributes.opponent_sets_won;
-      title = title || stateObj.attributes.event_name
-
-      timeoutsDisplay = 'inline';
-    }
-
-
-//
-//  MMA Specific Changes
-//
-    if (sport.includes("mma")) {
-      title = title || stateObj.attributes.event_name;
-      timeoutsDisplay = 'none';
-      barDisplay = "none";
-      barWrapDisplay = "none";
-    }
-
-//
-//  Racing Specific Changes
-//
-    if (sport.includes("racing")) {
-      title = title || stateObj.attributes.event_name;
-      if (stateObj.attributes.quarter) {
-        pre1 = stateObj.attributes.quarter;
-        in1 = stateObj.attributes.quarter;
-        stateObj.attributes.clock + " - " + gameDatePOST  + " (" + stateObj.attributes.quarter + ")";
-      }
-      timeoutsDisplay = 'none';
-
-      barLength[team] = stateObj.attributes.team_total_shots;
-      barLength[oppo] = stateObj.attributes.team_total_shots;
-      barLabel[team] = t.translate("racing.teamBarLabel", "%s", String(stateObj.attributes.team_total_shots));
-      barLabel[oppo] = t.translate("racing.teamBarLabel", "%s", String(stateObj.attributes.team_total_shots));
-
-      if (stateObj.attributes.league.includes("NASCAR")) {
-        logo[team] = null;
-        logo[oppo] = null;
-        initials[team] = "";
-        initials[oppo] = "";
-        if (name[team] && name[oppo]) {
-          initials[team] = name[team].split(" ").map((n)=>n[0]).join("");
-          initials[oppo] = name[oppo].split(" ").map((n)=>n[0]).join("");
-          initialsDisplay = 'inline';
-        }
-      }
-    }
-
-
-//
-//  Golf Specific Changes
-//
-    if (sport.includes("golf")) {
-      title = title || stateObj.attributes.event_name;
-      venue = stateObj.attributes.event_name;
-      barLength[team] = stateObj.attributes.team_shots_on_target;
-      barLength[oppo] = stateObj.attributes.opponent_shots_on_target;
-      barLabel[team] = t.translate("golf.teamBarLabel", "%s", stateObj.attributes.team_total_shots +'(' + stateObj.attributes.team_shots_on_target + ')');
-      barLabel[oppo] = t.translate("golf.oppoBarLabel", "%s", stateObj.attributes.opponent_total_shots +'(' + stateObj.attributes.opponent_shots_on_target + ')');
-      finalTerm = stateObj.attributes.clock;
-      timeoutsDisplay = 'none';
-    }
-
-    if (sport.includes("golf") || sport.includes("racing")) {
-        if (Number(score[1]) < Number(score[2])) {
-            scoreOp[1] = 1.0;
-            scoreOp[2] = 0.6;
-        }
-        if (Number(score[2]) < Number(score[1])) {
-          scoreOp[1] = 0.6;
-          scoreOp[2] = 1.0;
-        }
-    }
-
-//
-//  Cricket Specific Changes
-//
-    if (sport.includes("cricket")) {
-        var runs_substring = [];
-        var runs = [];
-        var total_runs = [];
-        var subscores = [];
-        var i = 0;
-
-        timeoutsDisplay = 'none';
-        barDisplay = "none";
-        barWrapDisplay = "none";  
-
-        in1 = stateObj.attributes.odds;
-        in2 = stateObj.attributes.quarter;
-
-        if (score != []) {
-            if (score[1] || score[2]) {
-                subscores[1] = score[1].split("(");
-                subscores[2] = score[2].split("(");
-
-                score[1] = subscores[1][0];
-                score[2] = subscores[2][0];
-
-                if (subscores[1].length > 1) {
-                    record[1] = "(" + subscores[1][1];
-                }
-                if (subscores[2].length > 1) {
-                    record[2] = "(" + subscores[2][1];
-                }
-
-                if (stateObj.state == 'POST') {
-                    runs_substring[1] = score[1].split("/");
-                    runs_substring[2] = score[2].split("/");
-
-                    runs[1] = runs_substring[1][0].split("&");
-                    runs[2] = runs_substring[2][0].split("&");
-
-                    total_runs[1] = 0;
-                    total_runs[2] = 0;
-
-                    i = 0;
-                    while (i < runs[1].length) {
-                        total_runs[1] = total_runs[1] + Number(runs[1][i]);
-                        i = i + 1;
-                    }
-                    i = 0;
-                    while (i < runs[2].length) {
-                        total_runs[2] = total_runs[2] + Number(runs[2][i]);
-                        i = i + 1;
-                    }
-
-                    if (total_runs[1] > total_runs[2]) {
-                        scoreOp[1] = 1.0;
-                        scoreOp[2] = 0.6;
-                    }
-                    if (total_runs[1] < total_runs[2]) {
-                        scoreOp[1] = 0.6;
-                        scoreOp[2] = 1.0;
-                    }
-                }
-            }
-        }
-    }
-
-
-//
-//  NCAA Specific Changes
-//
-    if (stateObj.attributes.league) {
-      if (stateObj.attributes.league.includes("NCAA")) {
-          notFoundLogo = 'https://a.espncdn.com/i/espn/misc_logos/500/ncaa.png'
-      }
-    }
-
-//
-//  Reduce score font size if needed
-//
-
-    if (Math.max(String(score[1]).length, String(score[2]).length) > 4) {
-        scoreSize = "2em"
-    }
-
-    if (this._config.debug) {
-        var lastUpdate = new Date (stateObj.attributes.last_update);
-        var updateTime = lastUpdate.toLocaleTimeString(lang, { hour: '2-digit', minute:'2-digit', second:'2-digit'});
-
-        title = this._config.entity + " " + title + "(";
-        if (stateObj.attributes.api_message) {
-          title = title + stateObj.attributes.api_message[0];
-        }
-        title = title + updateTime + ")";
-    }
-
-
-
-    if (stateObj.state == 'POST') {
-      return html`
-        <style>
-          .card { position: relative; overflow: hidden; padding: 16px 16px 20px; font-weight: 400; border-radius: var(--ha-card-border-radius, 10px); }
-          .title { text-align: center; font-size: 1.2em; font-weight: 500; }
-          .team-bg { opacity: 0.08; position: absolute; top: -30%; left: -20%; width: 58%; z-index: 0; }
-          .opponent-bg { opacity: 0.08; position: absolute; top: -30%; right: -20%; width: 58%; z-index: 0; }
-          .card-content { display: flex; justify-content: space-evenly; align-items: center; text-align: center; position: relative; z-index: 1; }
-          .team { text-align: center; width: 35%;}
-          .team img { max-width: 90px; }
-          .circle { display:${initialsDisplay}; width: 90px; height: 90px; padding: 10px; line-height: 90px; border: 2px solid gray; border-radius: 50%; font-size: 40px; color: white; text-align: center; background: black }
-          .score { font-size: ${scoreSize}; text-align: center; line-height: 1; }
-          .score1op { opacity: ${scoreOp[1]}; }
-          .score2op { opacity: ${scoreOp[2]}; }
-          .divider { font-size: 2.5em; text-align: center; opacity: 0; }
-          .name { font-size: 1.4em; margin-bottom: 4px; }
-          .rank { font-size:0.8em; display: ${rankDisplay}; }
-          .line { height: 1px; background-color: var(--primary-text-color); margin:10px 0; }
-          .status { font-size: 1.2em; text-align: center; }
-        </style>
-        <ha-card>
-          <div class="card">
-            <div class="title">${title}</div>
-            <img class="team-bg" src="${logoBG[1]}" />
-            <img class="opponent-bg" src="${logoBG[2]}" />
-            <div class="card-content">
-              <div class="team">
-                <img src="${logo[1]}" />
-                <div class="circle">${initials[1]}</div>
-                <div class="name"><span class="rank">${rank[1]}</span> ${name[1]}</div>
-                <div class="record">${record[1]}</div>
-              </div>
-              <div class="score score1op">${score[1]}</div>
-              <div class="divider">&nbsp&nbsp&nbsp</div>
-              <div class="score score2op">${score[2]}</div>
-              <div class="team">
-                <img src="${logo[2]}" />
-                <div class="circle">${initials[2]}</div>
-                <div class="name"><span class="rank">${rank[2]}</span> ${name[2]}</div>
-                <div class="record">${record[2]}</div>
-              </div>
-            </div>
-            <div class="status">${finalTerm}</div>
-          </div>
-        </ha-card>
-      `;
-    }
-
-    if (stateObj.state == 'IN') {
-        return html`
-          <style>
-            .card { position: relative; overflow: hidden; padding: 16px 16px 20px; font-weight: 400; border-radius: var(--ha-card-border-radius, 10px); }
-            .title { text-align: center; font-size: 1.2em; font-weight: 500; }
-            .team-bg { opacity: 0.08; position:absolute; top: -20%; left: -20%; width: 58%; z-index: 0; }
-            .opponent-bg { opacity: 0.08; position:absolute; top: -20%; right: -20%; width: 58%; z-index: 0; }
-            .card-content { display: flex; justify-content: space-evenly; align-items: center; text-align: center; position: relative; z-index: 1; }
-            .team { text-align: center; width:35%; }
-            .team img { max-width: 90px; }
-            .circle { display:${initialsDisplay}; width: 90px; height: 90px; padding: 10px; line-height: 90px; border: 2px solid gray; border-radius: 50%; font-size: 40px; color: white; text-align: center; background: black }
-            .possession, .possession1, .possession2 { font-size: 2.5em; text-align: center; opacity: 0; font-weight:900; }
-            .possession1 {opacity: ${possessionOp[1]} !important; }
-            .possession2 {opacity: ${possessionOp[2]} !important; }
-            .score { font-size: ${scoreSize}; text-align: center; }
-            .divider { font-size: 2.5em; text-align: center; margin: 0 4px; }
-            .name { font-size: 1.4em; margin-bottom: 4px; }
-            .rank { font-size:0.8em; display: ${rankDisplay}; }
-            .line { height: 1px; background-color: var(--primary-text-color); margin:10px 0; }
-            .timeouts { margin: 0 auto; width: 70%; display: ${timeoutsDisplay}; }
-            .timeouts div.timeouts2:nth-child(-n + ${timeouts[2]})  { opacity: 1; }
-            .timeouts div.timeouts1:nth-child(-n + ${timeouts[1]})  { opacity: 1; }
-            .timeouts1 { height: 6px; border-radius: ${toRadius}px; border: ${clrOut}px solid ${outColor}; width: 20%; background-color: ${color[1]}; display: inline-block; margin: 0 auto; position: relative; opacity: 0.2; }
-            .timeouts2 { height: 6px; border-radius: ${toRadius}px; border: ${clrOut}px solid ${outColor}; width: 20%; background-color: ${color[2]}; display: inline-block; margin: 0 auto; position: relative; opacity: 0.2; }
-            .bases { font-size: 2.5em; text-align: center; font-weight:900; display: ${basesDisplay};}
-            .on-first { opacity: ${onFirstOp}; display: inline-block; }
-            .on-second { opacity: ${onSecondOp}; display: inline-block; }
-            .on-third { opacity: ${onThirdOp}; display: inline-block; }
-            .pitcher { opacity: 0.0; display: inline-block; }
-            .status { text-align:center; font-size:1.6em; font-weight: 700; }
-            .sub1 { font-weight: 700; font-size: 1.2em; margin: 6px 0 2px; }
-            .sub1, .sub2, .sub3 { display: flex; justify-content: space-between; align-items: center; margin: 2px 0; }
-            .last-play { font-size: 1.2em; width: 100%; white-space: nowrap; overflow: hidden; box-sizing: border-box; }
-            .last-play p { display: inline-block; padding-left: 100%; margin: 2px 0 12px; animation : slide ${lastPlaySpeed}s linear infinite; }
-            @keyframes slide { 0%   { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }
-            .clock { text-align: center; font-size: 1.4em; }
-            .down-distance { text-align: right; }
-            .play-clock { font-size: 1.4em; text-align: center; }
-            .outs { text-align: center; display: ${outsDisplay}; }
-            .bar-text { text-align: center; display: ${barDisplay}; }
-            .bar-flex { width: 100%; display: flex; justify-content: center; margin-top: 4px; }
-            .bar2-length { width: ${barLength[2]}%; background-color: ${color[2]}; height: 12px; border-radius: 0 ${probRadius}px ${probRadius}px 0; border: ${clrOut}px solid ${outColor}; border-left: 0; transition: all 1s ease-out; }
-            .bar1-length { width: ${barLength[1]}%; background-color: ${color[1]}; height: 12px; border-radius: ${probRadius}px 0 0 ${probRadius}px; border: ${clrOut}px solid ${outColor}; border-right: 0; transition: all 1s ease-out; }
-            .bar-wrapper { display: ${barWrapDisplay}; }
-            .bar1-label { flex: 0 0 10px; padding: 0 10px 0 0; }
-            .bar2-label { flex: 0 0 10px; padding: 0 0 0 10px; text-align: right; }
-            .percent { padding: 0 6px; }
-            .post-game { margin: 0 auto; }
-          </style>
-          <ha-card>
-            <div class="card">
-            <div class="title">${title}</div>
-            <img class="team-bg" src="${logoBG[1]}" />
-            <img class="opponent-bg" src="${logoBG[2]}" />
-            <div class="card-content">
-              <div class="team">
-                <img src="${logo[1]}" />
-                <div class="circle">${initials[1]}</div>
-                <div class="name"><span class="rank">${rank[1]}</span> ${name[1]}</div>
-                <div class="record">${record[1]}</div>
-                <div class="timeouts">
-                  <div class="timeouts1"></div>
-                  <div class="timeouts1"></div>
-                  <div class="timeouts1"></div>
-                </div>
-              </div>
-              <div class="possession1">&bull;</div>
-              <div class="score">${score[1]}</div>
-              <div class="divider">&nbsp&nbsp&nbsp</div>
-              <div class="score">${score[2]}</div>
-              <div class="possession2">&bull;</div>
-              <div class="team">
-                <img src="${logo[2]}" />
-                <div class="circle">${initials[2]}</div>
-                <div class="name"><span class="rank">${rank[2]}</span> ${name[2]}</div>
-                <div class="record">${record[2]}</div>
-                <div class="timeouts">
-                  <div class="timeouts2"></div>
-                  <div class="timeouts2"></div>
-                  <div class="timeouts2"></div>
-                </div>
-              </div>
-            </div>
-            <div class="play-clock">${playClock}</div>
-            <div class="bases">
-              <div class="on-second">&bull;</div>
-            </div>
-            <div class="bases">
-              <div class="on-third">&bull;</div>
-              <div class="pitcher"></div>
-              <div class="on-first">&bull;</div>
-            </div>
-            <div class="outs">${in0}</div>
-            <div class="line"></div>
-            <div class="sub2">
-              <div class="venue">${venue}</div>
-              <div class="down-distance">${in1}</div>
-            </div>
-            <div class="sub3">
-              <div class="location">${location}</div>
-              <div class="network">${in2}</div>
-            </div>
-            <div class="line"></div>
-            <div class="last-play">
-              <p>${lastPlay}</p>
-            </div>
-            <div class="bar-text">${gameBar}</div>
-            <div class="bar-wrapper">
-              <div class="bar1-label">${barLabel[1]}</div>
-              <div class="bar-flex">
-                <div class="bar1-length"></div>
-                <div class="bar2-length"></div>
-              </div>
-              <div class="bar2-label">${barLabel[2]}</div>
-            </div>
-          </div>
-          </ha-card>
-        `;
-    }
-
-    if (stateObj.state == 'PRE') {
-        return html`
-          <style>
-            .card { position: relative; overflow: hidden; padding: 16px 16px 20px; font-weight: 400; border-radius: var(--ha-card-border-radius, 10px); }
-            .title { text-align: center; font-size: 1.2em; font-weight: 500; }
-            .team-bg { opacity: 0.08; position:absolute; top: -20%; left: -20%; width: 58%; z-index: 0; }
-            .opponent-bg { opacity: 0.08; position:absolute; top: -20%; right: -20%; width: 58%; z-index: 0; }
-            .card-content { display: flex; justify-content: space-evenly; align-items: center; text-align: center; position: relative; z-index: 1; }
-            .team { text-align: center; width: 35%; }
-            .team img { max-width: 90px; }
-            .circle { display:${initialsDisplay}; width: 90px; height: 90px; padding: 10px; line-height: 90px; border: 2px solid gray; border-radius: 50%; font-size: 40px; color: white; text-align: center; background: black }
-            .name { font-size: 1.4em; margin-bottom: 4px; }
-            .rank { font-size:0.8em; display:${rankDisplay}; }
-            .line { height: 1px; background-color: var(--primary-text-color); margin:10px 0; }
-            .gameday { font-size: 1.4em; margin-bottom: 4px; }
-            .gamedateshort { font-size: 1.1em; }
-            .gametime { font-size: 1.1em; }
-            .sub1 { font-weight: 500; font-size: 1.2em; margin: 6px 0 2px; }
-            .sub1, .sub2, .sub3 { display: flex; justify-content: space-between; align-items: center; margin: 2px 0; }
-            .last-play { font-size: 1.2em; width: 100%; white-space: nowrap; overflow: hidden; box-sizing: border-box; }
-            .last-play p { display: inline-block; padding-left: 100%; margin: 2px 0 12px; animation : slide 10s linear infinite; }
-            @keyframes slide { 0%   { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }
-            .clock { text-align: center; font-size: 1.4em; }
-            .down-distance { text-align: right; font-weight: 700; }
-            .kickoff { text-align: center; margin-top: -24px; }
-          </style>
-          <ha-card>
-              <div class="card">
-              <div class="title">${title}</div>
-              <img class="team-bg" src="${logoBG[1]}" />
-              <img class="opponent-bg" src="${logoBG[2]}" />
-              <div class="card-content">
-                <div class="team">
-                  <img src="${logo[1]}" />
-                  <div class="circle">${initials[1]}</div>
-                  <div class="name"><span class="rank">${rank[1]}</span> ${name[1]}</div>
-                  <div class="record">${record[1]}</div>
-                </div>
-                <div class="gamewrapper">
-                  <div class="gameday">${gameWeekday}</div>
-                  <div class="gametime">${gameDatePRE}</div>
-                  <div class="gametime">${gameTime}</div>
-                </div>
-                <div class="team">
-                  <img src="${logo[2]}" />
-                  <div class="circle">${initials[2]}</div>
-                  <div class="name"><span class="rank">${rank[2]}</span> ${name[2]}</div>
-                  <div class="record">${record[2]}</div>
-                </div>
-              </div>
-              <div class="line"></div>
-              <div class="sub1">
-                <div class="date">${startTerm} ${startTime}</div>
-                <div class="odds">${pre1}</div>
-              </div>
-              <div class="sub2">
-                <div class="venue">${venue}</div>
-                <div class="overunder"> ${pre2}</div>
-              </div>
-              <div class="sub3">
-                <div class="location">${location}</div>
-                <div class="network">${pre3}</div>
-              </div>
-            </div>
-            </ha-card>
-        `;
-    }
-
-    if (stateObj.state == 'BYE') {
-      return html`
-        <style>
-          .card { position: relative; overflow: hidden; padding: 16px 16px 20px; font-weight: 400; border-radius: var(--ha-card-border-radius, 10px); }
-          .team-bg { opacity: 0.08; position: absolute; top: -20%; left: -30%; width: 75%; z-index: 0; }
-          .card-content { display: flex; justify-content: space-evenly; align-items: center; text-align: center; position: relative; z-index: 1; }
-          .team { text-align: center; width: 50%; }
-          .team img { max-width: 90px; }
-          .name { font-size: 1.6em; margin-bottom: 4px; }
-          .line { height: 1px; background-color: var(--primary-text-color); margin:10px 0; }
-          .bye { font-size: 1.8em; text-align: center; width: 50%; }
-        </style>
-        <ha-card>
-          <div class="card">
-            <img class="team-bg" src="${logoBG[team]}" />
-            <div class="card-content">
-              <div class="team">
-                <img src="${logo[team]}" />
-                <div class="name">${name[team]}</div>
-              </div>
-              <div class="bye">${byeTerm}</div>
-            </div>
-          </div>
-        </ha-card>
-      `;
-    }
-
-    if (stateObj.state == 'NOT_FOUND') {
-      return html`
-        <style>
-          .card { position: relative; overflow: hidden; padding: 16px 16px 20px; font-weight: 400; border-radius: var(--ha-card-border-radius, 10px); }
-          .title { text-align: center; font-size: 1.2em; font-weight: 500; }
-          .team-bg { opacity: 0.08; position:absolute; top: -20%; left: -20%; width: 58%; z-index: 0; }
-          .card-content { display: flex; justify-content: space-evenly; align-items: center; text-align: center; position: relative; z-index: 1; }
-          .team { text-align: center; width: 35%; }
-          .team img { max-width: 90px; }
-          .gameday { font-size: 1.4em; line-height: 1.2em; text-align: center; width: 100%; margin-bottom: 4px; }
-        </style>
-        <ha-card>
-            <div class="card">
-            <div class="title">${title}</div>
-            <img class="team-bg" src="${notFoundLogoBG}" />
-            <div class="card-content">
-              <div class="team">
-                <img src="${notFoundLogoBG}" />
-                <div class="record">${notFoundLeague}</div>
-              </div>
-              <div class="gamewrapper">
-                <div class="gameday">${notFoundTerm1}</div>
-                <div class="gameday">${notFoundTerm2}</div>
-              </div>
-            </div>
-          </div>
-          </ha-card>
-      `;
-    }
-  }
-}
 
 customElements.define("teamtracker-card", TeamTrackerCard);
+customElements.define("my-custom-card-editor", MyCustomCardEditor);
 
-//=====
+console.info("%c TEAMTRACKER-CARD %s IS INSTALLED",
+    "color: blue; font-weight: bold",
+    VERSION);
 
 //
 //  Add card to list of Custom Cards in the Card Picker
 //
 window.customCards = window.customCards || []; // Create the list if it doesn't exist. Careful not to overwrite it
 window.customCards.push({
-  type: "teamtracker-card",
-  name: "Team Tracker Card",
-  preview: false,
-  description: "Card to display the ha-teamtracker sensor",
-});
-
-//
-//  Define and register the UI Card Editor 
-//
-class MyCustomCardEditor extends LitElement {
-
-  static get properties() {
-    return {
-      hass: {},
-      _config: {},
-    };
-  }
-
-  // setConfig works the same way as for the card itself
-  setConfig(config) {
-    this._config = config;
-  }
-
-  // This function is called when the input element of the editor loses focus
-  entityChanged(ev) {
-
-    // We make a copy of the current config so we don't accidentally overwrite anything too early
-    const _config = Object.assign({}, this._config);
-    // Then we update the entity value with what we just got from the input field
-    _config.entity = ev.target.value;
-    // And finally write back the updated configuration all at once
-    this._config = _config;
-
-    // A config-changed event will tell lovelace we have made changed to the configuration
-    // this make sure the changes are saved correctly later and will update the preview
-    const event = new CustomEvent("config-changed", {
-      detail: { config: _config },
-      bubbles: true,
-      composed: true,
-    });
-    this.dispatchEvent(event);
-  }
-
-  render() {
-    if (!this.hass || !this._config) {
-      return html``;
-    }
-
-    // @focusout below will call entityChanged when the input field loses focus (e.g. the user tabs away or clicks outside of it)
-    return html`
-    Entity:
-    <input
-    .value=${this._config.entity}
-    @focusout=${this.entityChanged}
-    ></input>
-    `;
-  }
-}
-
-customElements.define("my-custom-card-editor", MyCustomCardEditor);
+    type: "teamtracker-card",
+    name: "Team Tracker Card",
+    preview: false,
+    description: "Card to display the ha-teamtracker sensor",
+});
\ No newline at end of file
diff --git a/dist/render_bye.js b/dist/render_bye.js
new file mode 100644
index 0000000..2a23aa2
--- /dev/null
+++ b/dist/render_bye.js
@@ -0,0 +1,33 @@
+import { html } from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
+
+
+// Define the rendering function
+export function renderBye(c) {
+    // Render the HTML template using the provided object `c`
+    const htmlTemplate = html`
+    <style>
+        .card { position: relative; overflow: hidden; padding: 16px 16px 20px; font-weight: 400; border-radius: var(--ha-card-border-radius, 10px); }
+        .team-bg { opacity: 0.08; position: absolute; top: -20%; left: -20%; width: 58%; z-index: 0; }
+        .card-content { display: flex; justify-content: space-evenly; align-items: center; text-align: center; position: relative; z-index: 1; }
+        .team { text-align: center; width: 35%; 
+        .team img { max-width: 90px; }
+        .name { font-size: 1.6em; margin-bottom: 4px; }
+        .line { height: 1px; background-color: var(--primary-text-color); margin:10px 0; }
+        .bye { font-size: 1.8em; text-align: center; width: 50%; }
+    </style>
+    <ha-card>
+        <div class="card">
+            <img class="team-bg" src="${c.logoBG[team]}" />
+            <div class="card-content">
+                <div class="team">
+                    <img src="${c.logo[team]}" />
+                    <div class="name">${c.name[team]}</div>
+                </div>
+                <div class="bye">${c.byeTerm}</div>
+            </div>
+        </div>
+    </ha-card>
+`;
+    // Return the HTML template
+    return htmlTemplate;
+}
\ No newline at end of file
diff --git a/dist/render_error.js b/dist/render_error.js
new file mode 100644
index 0000000..7414dfe
--- /dev/null
+++ b/dist/render_error.js
@@ -0,0 +1,42 @@
+import { html } from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
+
+
+export function renderMissingConfig() {
+    const htmlTemplate = html``;
+    // Return the HTML template
+    return htmlTemplate;
+}
+
+export function renderMissingObj(entity) {
+    const htmlTemplate = html`
+        <ha-card>Unknown entity: ${entity}</ha-card> 
+    `;
+    // Return the HTML template
+    return htmlTemplate;
+}
+
+export function renderStateUnavailable(entity) {
+    const htmlTemplate = html`
+    <style>
+        ha-card {padding: 10px 16px;}
+    </style>
+    <ha-card>
+        Sensor unavailable: ${entity}
+    </ha-card>
+    `;
+    // Return the HTML template
+    return htmlTemplate;
+}
+
+export function renderStateInvalid() {
+    const htmlTemplate = html`
+    <style>
+        ha-card {padding: 10px 16px;}
+    </style>
+    <ha-card>
+        State Invalid: ${this._config.state}
+    </ha-card>
+    `;
+    // Return the HTML template
+    return htmlTemplate;
+}
diff --git a/dist/render_in.js b/dist/render_in.js
new file mode 100644
index 0000000..dcacfe9
--- /dev/null
+++ b/dist/render_in.js
@@ -0,0 +1,127 @@
+import { html } from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
+
+
+// Define the rendering function
+export function renderIn(c) {
+    // Render the HTML template using the provided object `c`
+    const htmlTemplate = html`
+    <style>
+        .card { position: relative; overflow: hidden; padding: 16px 16px 20px; font-weight: 400; border-radius: var(--ha-card-border-radius, 10px); }
+        .title { text-align: center; font-size: 1.2em; font-weight: 500; }
+        .team-bg { opacity: 0.08; position: absolute; top: -20%; left: -20%; width: 58%; z-index: 0; }
+        .opponent-bg { opacity: 0.08; position: absolute; top: -20%; right: -20%; width: 58%; z-index: 0; }
+        .card-content { display: flex; justify-content: space-evenly; align-items: center; text-align: center; position: relative; z-index: 1; }
+        .team { text-align: center; width: 35%; }
+        .team img { max-width: 90px; }
+        .logo { max-height: 6.5em; }
+        .circle { display:${c.initialsDisplay}; width: 1em; height: 1em; padding: 10px; line-height: 3em; border: 2px solid gray; border-radius: 50%; font-size: 2em; color: white; text-align: center; background: black }
+        .possession, .possession1, .possession2 { font-size: 2.5em; text-align: center; opacity: 0; font-weight:900; }
+        .possession1 {opacity: ${c.possessionOp[1]} !important; }
+        .possession2 {opacity: ${c.possessionOp[2]} !important; }
+        .score { font-size: ${c.scoreSize}; text-align: center; }
+        .divider { font-size: 2.5em; text-align: center; margin: 0 4px; }
+        .name { font-size: 1.4em; margin-bottom: 4px; }
+        .rank { font-size:0.8em; display: ${c.rankDisplay}; }
+        .record { font-size:1.0em; height 1.0em; }
+        .line1 { height: 1px; background-color: var(--primary-text-color); margin:10px 0; }
+        .line2 { height: 1px; background-color: var(--primary-text-color); margin:10px 0; }
+        .timeouts { margin: 0.4em auto; width: 70%; display: ${c.timeoutsDisplay}; }
+        .timeouts div.timeouts2:nth-child(-n + ${c.timeouts[2]})  { opacity: 1; }
+        .timeouts div.timeouts1:nth-child(-n + ${c.timeouts[1]})  { opacity: 1; }
+        .timeouts1 { height: 0.6em; border-radius: 0.3em; border: ${c.clrOut}px solid ${c.outColor}; width: 20%; background-color: ${c.color[1]}; display: inline-block; margin: 0.4em auto; position: relative; opacity: 0.2; }
+        .timeouts2 { height: 0.6em; border-radius: 0.3em; border: ${c.clrOut}px solid ${c.outColor}; width: 20%; background-color: ${c.color[2]}; display: inline-block; margin: 0.4em auto; position: relative; opacity: 0.2; }
+        .bases { font-size: 2.5em; text-align: center; font-weight:900; display: ${c.basesDisplay};}
+        .on-first { opacity: ${c.onFirstOp}; display: inline-block; }
+        .on-second { opacity: ${c.onSecondOp}; display: inline-block; }
+        .on-third { opacity: ${c.onThirdOp}; display: inline-block; }
+        .pitcher { opacity: 0.0; display: inline-block; }
+        .in-row1 { font-size: 1em; height: 1em; margin: 6px 0 2px; }
+        .in-row2 { ; font-size: 1em; height: 1em; margin: 6px 0 2px; }
+        .in-row1, .in-row2 { display: flex; justify-content: space-between; align-items: center; margin: 2px 0; }
+        .last-play { font-size: 1.2em; width: 100%; white-space: nowrap; overflow: hidden; box-sizing: border-box; }
+        .last-play p { display: inline-block; padding-left: 100%; margin: 2px 0 12px; animation : slide ${c.lastPlaySpeed}s linear infinite; }
+        @keyframes slide { 0%   { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }
+        .down-distance { text-align: right; }
+        .play-clock { font-size: 1.4em; height: 1.4em; text-align: center; }
+        .outs { text-align: center; display: ${c.outsDisplay}; }
+        .bar-text { text-align: center; display: ${c.barDisplay}; }
+        .bar-flex { width: 100%; display: flex; justify-content: center; margin-top: 4px; }
+        .bar2-length { width: ${c.barLength[2]}%; background-color: ${c.color[2]}; height: 0.8em; border-radius: 0 0.4em 0.4em 0; border: ${c.clrOut}px solid ${c.outColor}; border-left: 0; transition: all 1s ease-out; }
+        .bar1-length { width: ${c.barLength[1]}%; background-color: ${c.color[1]}; height: 0.8em; border-radius: 0.4em 0 0 0.4em; border: ${c.clrOut}px solid ${c.outColor}; border-right: 0; transition: all 1s ease-out; }
+        .bar { display: ${c.barWrapDisplay}; align-items: center; }
+        .bar1-label { flex: 0 0 10px; padding: 0 10px 0 0; margin-top: 4px; }
+        .bar2-label { flex: 0 0 10px; padding: 0 0 0 10px; text-align: right; margin-top: 4px; }
+    </style>
+    <ha-card>
+        <div class="card">
+            <div class="title">${c.title}</div>
+            <img class="team-bg" src="${c.logoBG[1]}" />
+            <img class="opponent-bg" src="${c.logoBG[2]}" />
+            <div class="card-content">
+                <div class="team">
+                    <img class="logo" src="${c.logo[1]}" />
+                    <div class="circle">${c.initials[1]}</div>
+                    <div class="name"><span class="rank">${c.rank[1]}</span> ${c.name[1]}</div>
+                    <div class="record">${c.record[1]}</div>
+                    <div class="timeouts">
+                        <div class="timeouts1"></div>
+                        <div class="timeouts1"></div>
+                        <div class="timeouts1"></div>
+                    </div>
+                </div>
+                <div class="possession1">&bull;</div>
+                <div class="score">${c.score[1]}</div>
+                <div class="divider">&nbsp&nbsp&nbsp</div>
+                <div class="score">${c.score[2]}</div>
+                <div class="possession2">&bull;</div>
+                <div class="team">
+                    <img class="logo" src="${c.logo[2]}" />
+                    <div class="circle">${c.initials[2]}</div>
+                    <div class="name"><span class="rank">${c.rank[2]}</span> ${c.name[2]}</div>
+                    <div class="record">${c.record[2]}</div>
+                    <div class="timeouts">
+                        <div class="timeouts2"></div>
+                        <div class="timeouts2"></div>
+                        <div class="timeouts2"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="play-clock">${c.playClock}</div>
+            <div class="bases">
+                <div class="on-second">&bull;</div>
+            </div>
+            <div class="bases">
+                <div class="on-third">&bull;</div>
+                <div class="pitcher"></div>
+                <div class="on-first">&bull;</div>
+            </div>
+            <div class="outs">${c.in0}</div>
+            <div class="line1"></div>
+            <div class="in-row1">
+                <div class="venue">${c.venue}</div>
+                <div class="down-distance">${c.in1}</div>
+            </div>
+            <div class="in-row2">
+                <div class="location">${c.location}</div>
+                <div class="network">${c.in2}</div>
+            </div>
+            <div class="line2"></div>
+            <div class="last-play">
+                <p>${c.lastPlay}</p>
+            </div>
+            <div class="bar-wrapper">
+                <div class="bar-text">${c.gameBar}</div>
+                <div class="bar">
+                    <div class="bar1-label">${c.barLabel[1]}</div>
+                    <div class="bar-flex">
+                        <div class="bar1-length"></div>
+                        <div class="bar2-length"></div>
+                    </div>
+                    <div class="bar2-label">${c.barLabel[2]}</div>
+                </div>
+            </div>
+        </div>
+    </ha-card>
+    `;    // Return the HTML template
+    return htmlTemplate;
+}
\ No newline at end of file
diff --git a/dist/render_not_found.js b/dist/render_not_found.js
new file mode 100644
index 0000000..a1c2c8b
--- /dev/null
+++ b/dist/render_not_found.js
@@ -0,0 +1,38 @@
+import { html } from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
+
+
+// Define the rendering function
+export function renderNotFound(c) {
+    // Render the HTML template using the provided object `c`
+    const htmlTemplate = html`
+        <style>
+            .card { position: relative; overflow: hidden; padding: 16px 16px 20px; font-weight: 400; border-radius: var(--ha-card-border-radius, 10px); }
+            .title { text-align: center; font-size: 1.2em; font-weight: 500; }
+            .team-bg { opacity: 0.08; position:absolute; top: -20%; left: -20%; width: 58%; z-index: 0; }
+            .card-content { display: flex; justify-content: space-evenly; align-items: center; text-align: center; position: relative; z-index: 1; }
+            .team { text-align: center; width: 35%; }
+            .team img { max-width: 90px; }
+            .logo { max-height: 6.5em; }
+            .notFound1 { font-size: 1.4em; line-height: 1.2em; text-align: center; width: 100%; margin-bottom: 4px; }
+            .notFound2 { font-size: 1.4em; line-height: 1.2em; text-align: center; width: 100%; margin-bottom: 4px; }
+        </style>
+        <ha-card>
+            <div class="card">
+                <div class="title">${c.title}</div>
+                <img class="team-bg" src="${c.notFoundLogoBG}" />
+                <div class="card-content">
+                    <div class="team">
+                        <img class="logo" src="${c.notFoundLogoBG}" />
+                        <div class="notFoundLeague">${c.notFoundLeague}</div>
+                    </div>
+                    <div class="notFoundWrapper">
+                        <div class="notFound1">${c.notFoundTerm1}</div>
+                        <div class="notFound2">${c.notFoundTerm2}</div>
+                    </div>
+                </div>
+            </div>
+        </ha-card>
+    `;
+    // Return the HTML template
+    return htmlTemplate;
+}
\ No newline at end of file
diff --git a/dist/render_post.js b/dist/render_post.js
new file mode 100644
index 0000000..26f62f9
--- /dev/null
+++ b/dist/render_post.js
@@ -0,0 +1,53 @@
+import { html } from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
+
+
+// Define the rendering function
+export function renderPost(c) {
+    // Render the HTML template using the provided object `c`
+    const htmlTemplate = html`
+    <style>
+        .card { position: relative; overflow: hidden; padding: 16px 16px 20px; font-weight: 400; border-radius: var(--ha-card-border-radius, 10px); }
+        .title { text-align: center; font-size: 1.2em; font-weight: 500; }
+        .team-bg { opacity: 0.08; position: absolute; top: -20%; left: -20%; width: 58%; z-index: 0; }
+        .opponent-bg { opacity: 0.08; position: absolute; top: -20%; right: -20%; width: 58%; z-index: 0; }
+        .card-content { display: flex; justify-content: space-evenly; align-items: center; text-align: center; position: relative; z-index: 1; }
+        .team { text-align: center; width: 35%; }
+        .logo { max-height: 6.5em; }
+        .team img { max-width: 90px; }
+        .circle { display:${c.initialsDisplay}; width: 1em; height: 1em; padding: 10px; line-height: 3em; border: 2px solid gray; border-radius: 50%; font-size: 2em; color: white; text-align: center; background: black }
+        .score { font-size: ${c.scoreSize}; text-align: center; line-height: 1; }
+        .score1op { opacity: ${c.scoreOp[1]}; }
+        .score2op { opacity: ${c.scoreOp[2]}; }
+        .divider { font-size: 2.5em; text-align: center; opacity: 0; }
+        .name { font-size: 1.4em; margin-bottom: 4px; }
+        .rank { font-size:0.8em; display: ${c.rankDisplay}; }
+        .post-row1 { font-size: 1.2em; text-align: center; }
+    </style>
+    <ha-card>
+        <div class="card">
+            <div class="title">${c.title}</div>
+            <img class="team-bg" src="${c.logoBG[1]}" />
+            <img class="opponent-bg" src="${c.logoBG[2]}" />
+            <div class="card-content">
+                <div class="team">
+                    <img class="logo" src="${c.logo[1]}" />
+                    <div class="circle">${c.initials[1]}</div>
+                    <div class="name"><span class="rank">${c.rank[1]}</span> ${c.name[1]}</div>
+                    <div class="record">${c.record[1]}</div>
+                </div>
+                <div class="score score1op">${c.score[1]}</div>
+                <div class="divider">&nbsp&nbsp&nbsp</div>
+                <div class="score score2op">${c.score[2]}</div>
+                <div class="team">
+                    <img class="logo" src="${c.logo[2]}" />
+                    <div class="circle">${c.initials[2]}</div>
+                    <div class="name"><span class="rank">${c.rank[2]}</span> ${c.name[2]}</div>
+                    <div class="record">${c.record[2]}</div>
+                </div>
+            </div>
+            <div class="post-row1">${c.finalTerm}</div>
+        </div>
+    </ha-card>
+    `;    // Return the HTML template
+    return htmlTemplate;
+}
\ No newline at end of file
diff --git a/dist/render_pre.js b/dist/render_pre.js
new file mode 100644
index 0000000..180adb7
--- /dev/null
+++ b/dist/render_pre.js
@@ -0,0 +1,68 @@
+import { html } from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
+
+
+// Define the rendering function
+export function renderPre(c) {
+    // Render the HTML template using the provided object `c`
+    const htmlTemplate = html`
+    <style>
+        .card { position: relative; overflow: hidden; padding: 16px 16px 20px; font-weight: 400; border-radius: var(--ha-card-border-radius, 10px); }
+        .title { text-align: center; font-size: 1.2em; font-weight: 500; }
+        .team-bg { opacity: 0.08; position: absolute; top: -20%; left: -20%; width: 58%; z-index: 0; }
+        .opponent-bg { opacity: 0.08; position: absolute; top: -20%; right: -20%; width: 58%; z-index: 0; }
+        .card-content { display: flex; justify-content: space-evenly; align-items: center; text-align: center; position: relative; z-index: 1; }
+        .team { text-align: center; width: 35%; }
+        .logo { max-height: 6.5em; }
+        .team img { max-width: 90px; }
+        .circle { display:${c.initialsDisplay}; width: 1em; height: 1em; padding: 10px; line-height: 3em; border: 2px solid gray; border-radius: 50%; font-size: 2em; color: white; text-align: center; background: black }
+        .name { font-size: 1.4em; margin-bottom: 4px; }
+        .rank { font-size:0.8em; display: ${c.rankDisplay}; }
+        .line { height: 1px; background-color: var(--primary-text-color); margin:10px 0; }
+        .gameday { font-size: 1.4em; height: 1.4em; }
+        .gamedate { font-size: 1.1em; height: 1.1em; }
+        .gametime { font-size: 1.1em; height: 1.1em; }
+        .pre-row1 { font-weight: 500; font-size: 1.2em; height: 1.2em; margin: 6px 0 2px; }
+        .pre-row1, .pre-row2, .pre-row3 { display: flex; justify-content: space-between; align-items: center; margin: 2px 0; }
+    </style>
+    <ha-card>
+        <div class="card">
+            <div class="title">${c.title}</div>
+            <img class="team-bg" src="${c.logoBG[1]}" />
+            <img class="opponent-bg" src="${c.logoBG[2]}" />
+            <div class="card-content">
+                <div class="team">
+                    <img class="logo" src="${c.logo[1]}" />
+                    <div class="circle">${c.initials[1]}</div>
+                    <div class="name"><span class="rank">${c.rank[1]}</span> ${c.name[1]}</div>
+                    <div class="record">${c.record[1]}</div>
+                </div>
+                <div class="gamewrapper">
+                    <div class="gameday">${c.gameWeekday}</div>
+                    <div class="gamedate">${c.gameDatePRE}</div>
+                    <div class="gametime">${c.gameTime}</div>
+                </div>
+                <div class="team">
+                    <img class="logo" src="${c.logo[2]}" />
+                    <div class="circle">${c.initials[2]}</div>
+                    <div class="name"><span class="rank">${c.rank[2]}</span> ${c.name[2]}</div>
+                    <div class="record">${c.record[2]}</div>
+                </div>
+            </div>
+            <div class="line"></div>
+            <div class="pre-row1">
+                <div class="date">${c.startTerm} ${c.startTime}</div>
+                <div class="odds">${c.pre1}</div>
+            </div>
+            <div class="pre-row2">
+                <div class="venue">${c.venue}</div>
+                <div class="overunder"> ${c.pre2}</div>
+            </div>
+            <div class="pre-row3">
+                <div class="location">${c.location}</div>
+                <div class="network">${c.pre3}</div>
+            </div>
+        </div>
+    </ha-card>
+    `;    // Return the HTML template
+    return htmlTemplate;
+}
\ No newline at end of file
diff --git a/dist/set_defaults.js b/dist/set_defaults.js
new file mode 100644
index 0000000..adef9a3
--- /dev/null
+++ b/dist/set_defaults.js
@@ -0,0 +1,238 @@
+//
+//  Initialize card data
+//
+export function initCardData(c) {
+    c.logoBG = [];
+    c.logo = [];
+    c.name = [];
+    c.initials = [];
+    c.rank = [];
+    c.record = [];
+    c.score = [];
+    c.scoreOp = [];
+    c.scoreSize = "3em";
+    c.barLabel = [];
+    c.barLength = [];
+    c.color = [];
+    c.timeouts = [];
+    c.possessionOp = [];
+}
+
+//
+//  Set default values for variable components
+//
+export function setDefaults(t, lang, stateObj, c, o, sport, team, oppo) {
+
+    // Set default sections to display / hide
+
+    c.initialsDisplay = 'none';
+    c.outsDisplay = 'none';
+    c.basesDisplay = 'none';
+    c.barDisplay = 'inherit';
+    c.barWrapDisplay = "flex";
+    c.timeoutsDisplay = 'inline';
+    c.rankDisplay = 'inline';
+
+    if (o.show_timeouts == false) {
+        c.timeoutsDisplay = 'none';
+    }
+    if (o.show_rank == false) {
+        c.rankDisplay = 'none';
+    }
+    c.onFirstOp = 0.2;
+    c.onSecondOp = 0.2;
+    c.onThirdOp = 0.2;
+    if (stateObj.attributes.on_first) {
+        c.onFirstOp = 1;
+    }
+    if (stateObj.attributes.on_second) {
+        c.onSecondOp = 1;
+    }
+    if (stateObj.attributes.on_third) {
+        c.onThirdOp = 1;
+    }
+
+    // Set Title data
+
+    c.title = o.cardTitle;
+    if (o.showLeague) {
+        c.title = c.title || stateObj.attributes.league
+    }
+
+    // Set Scoreboard data
+
+    c.logo[team] = stateObj.attributes.team_logo;
+    c.logoBG[team] = stateObj.attributes.team_logo;
+    c.name[team] = stateObj.attributes.team_name;
+    c.rank[team] = stateObj.attributes.team_rank;
+    c.record[team] = stateObj.attributes.team_record;
+    c.logo[oppo] = stateObj.attributes.opponent_logo;
+    c.logoBG[oppo] = stateObj.attributes.opponent_logo;
+    c.name[oppo] = stateObj.attributes.opponent_name;
+    c.rank[oppo] = stateObj.attributes.opponent_rank;
+    c.record[oppo] = stateObj.attributes.opponent_record;
+    c.playClock = stateObj.attributes.clock;
+    if (o.showLeague) {
+        c.logoBG[team] = stateObj.attributes.league_logo
+        c.logoBG[oppo] = stateObj.attributes.league_logo
+    }
+
+    c.score[team] = stateObj.attributes.team_score;
+    c.score[oppo] = stateObj.attributes.opponent_score;
+
+    c.scoreOp[1] = 1;
+    c.scoreOp[2] = 1;
+    if (Number(c.score[1]) < Number(c.score[2])) {
+        c.scoreOp[1] = 0.6;
+    }
+    if (Number(c.score[2]) < Number(c.score[1])) {
+        c.scoreOp[2] = 0.6;
+    }
+
+    if (stateObj.attributes.team_homeaway == 'home') {
+        c.color[team] = stateObj.attributes.team_colors[0];
+        c.color[oppo] = stateObj.attributes.opponent_colors[1];
+    }
+    else if (stateObj.attributes.team_homeaway == 'away') {
+        c.color[team] = stateObj.attributes.team_colors[1];
+        c.color[oppo] = stateObj.attributes.opponent_colors[0];
+    }
+    else {
+        c.color[team] = '#ffffff';
+        c.color[oppo] = '#000000';
+    }
+
+    c.possessionOp[team] = 0;
+    c.possessionOp[oppo] = 0;
+    if (stateObj.attributes.possession == stateObj.attributes.team_id) {
+        c.possessionOp[team] = 1;
+    }
+    if (stateObj.attributes.possession == stateObj.attributes.opponent_id) {
+        c.possessionOp[oppo] = 1;
+    }
+    c.timeouts[team] = stateObj.attributes.team_timeouts;
+    c.timeouts[oppo] = stateObj.attributes.opponent_timeouts;
+
+    // Set Location / Context data
+
+    c.startTerm = t.translate(sport + ".startTerm");
+    c.startTime = stateObj.attributes.kickoff_in;
+    c.venue = stateObj.attributes.venue;
+    c.location = stateObj.attributes.location;
+
+    c.pre1 = stateObj.attributes.odds;
+    c.pre2 = '';
+    if (stateObj.attributes.overunder) {
+        c.pre2 = t.translate(sport + ".overUnder", "%s", String(stateObj.attributes.overunder));
+    }
+    c.pre3 = stateObj.attributes.tv_network;
+
+    c.in0 = '';
+    c.in1 = '';
+    if (stateObj.attributes.down_distance_text) {
+        c.in1 = t.translate(sport + ".gameStat1", "%s", stateObj.attributes.down_distance_text);
+    }
+    c.in2 = '';
+    if (stateObj.attributes.tv_network) {
+        c.in2 = t.translate(sport + ".gameStat2", "%s", stateObj.attributes.tv_network);
+    }
+    c.finalTerm = stateObj.attributes.clock + " - " + c.gameDatePOST;
+
+    // Set Play data
+
+    c.lastPlay = stateObj.attributes.last_play;
+    c.lastPlaySpeed = 18;
+    if (c.lastPlay) {
+        c.lastPlaySpeed = 18 + Math.floor(c.lastPlay.length / 40) * 5;
+    }
+
+    // Set Game Bar data
+
+    c.gameBar = t.translate(sport + ".gameBar");
+    c.barLength[team] = 0;
+    if (stateObj.attributes.team_win_probability) {
+        c.barLength[team] = (stateObj.attributes.team_win_probability * 100).toFixed(0);
+    }
+    c.barLength[oppo] = 0;
+    if (stateObj.attributes.opponent_win_probability) {
+        c.barLength[oppo] = (stateObj.attributes.opponent_win_probability * 100).toFixed(0);
+    }
+    c.barLabel[team] = t.translate(sport + ".teamBarLabel", "%s", String(c.barLength[team]));
+    c.barLabel[oppo] = t.translate(sport + ".oppoBarLabel", "%s", String(c.barLength[oppo]));
+
+    // Situation specific data
+
+    c.notFoundLogo = stateObj.attributes.league_logo;
+    c.notFoundLogoBG = c.notFoundLogo;
+    c.notFoundLeague = null;
+
+    if (stateObj.attributes.league != "XXX") {
+        c.notFoundLeague = stateObj.attributes.league;
+    }
+
+    c.notFoundTerm1 = stateObj.attributes.team_abbr;
+    c.notFoundTerm2 = "NOT_FOUND"
+    if (stateObj.attributes.api_message) {
+        c.notFoundTerm2 = t.translate("common.api_error")
+        var apiTail = stateObj.attributes.api_message.substring(stateObj.attributes.api_message.length - 17)
+        if (apiTail.slice(-1) == "Z") {
+            var lastDateForm = new Date(apiTail)
+            c.notFoundTerm2 = t.translate("common.no_upcoming_games", "%s", lastDateForm.toLocaleDateString(lang))
+        }
+    }
+
+    c.byeTerm = t.translate("common.byeTerm");
+
+}
+
+export function setCardFormat(o, c) {
+
+    c.clrOut = 0;
+    c.outColor = o.outlineColor;
+
+    if (o.outline == true) {
+        c.clrOut = 1;
+    }
+}
+
+
+export function setStartInfo(c, stateObj, t, lang, time_format) {
+
+    var gameDate = new Date(stateObj.attributes.date);
+    var gameDateStr = gameDate.toLocaleDateString(lang, { month: 'short', day: '2-digit' });
+
+    var todayDate = new Date();
+    var todayDateStr = todayDate.toLocaleDateString(lang, { month: 'short', day: '2-digit' });
+
+    var tomorrowDate = new Date();
+    tomorrowDate.setDate(todayDate.getDate() + 1);
+    var tomorrowDateStr = tomorrowDate.toLocaleDateString(lang, { month: 'short', day: '2-digit' });
+
+    var nextweekDate = new Date();
+    nextweekDate.setDate(todayDate.getDate() + 6);
+
+    c.gameWeekday = gameDate.toLocaleDateString(lang, { weekday: 'long' });
+    if (gameDateStr === todayDateStr) {
+        c.gameWeekday = t.translate("common.today");
+    }
+    else if (gameDateStr === tomorrowDateStr) {
+        c.gameWeekday = t.translate("common.tomorrow");
+    }
+    c.gameDatePOST = gameDateStr;
+    c.gameDatePRE = null;
+    if (gameDate > nextweekDate) {
+        c.gameDatePRE = gameDateStr;
+    }
+
+    c.gameTime = gameDate.toLocaleTimeString(lang, { hour: '2-digit', minute: '2-digit' });
+    if (time_format == "24") {
+        c.gameTime = gameDate.toLocaleTimeString(lang, { hour: '2-digit', minute: '2-digit', hour12: false });
+    }
+    if (time_format == "12") {
+        c.gameTime = gameDate.toLocaleTimeString(lang, { hour: '2-digit', minute: '2-digit', hour12: true });
+    }
+    if (time_format == "system") {
+        var sys_lang = navigator.language || "en"
+        c.gameTime = gameDate.toLocaleTimeString(sys_lang, { hour: '2-digit', minute: '2-digit' });
+    }
+}
\ No newline at end of file
diff --git a/dist/set_sports.js b/dist/set_sports.js
new file mode 100644
index 0000000..c140838
--- /dev/null
+++ b/dist/set_sports.js
@@ -0,0 +1,322 @@
+//
+//  Call function to set the data for the sport
+//
+export function setSportData(sport, t, stateObj, c, team, oppo) {
+
+    switch (sport) {
+        case "baseball":
+            return setBaseball(t, stateObj, c, team, oppo);
+        case "basketball":
+            return setBasketball(t, stateObj, c, team, oppo);
+        case "cricket":
+            return setCricket(t, stateObj, c, team, oppo);
+        case "golf":
+            return setGolf(t, stateObj, c, team, oppo);
+        case "hockey":
+            return setHockey(t, stateObj, c, team, oppo);
+        case "mma":
+            return setMMA(t, stateObj, c, team, oppo);
+        case "racing":
+            return setRacing(t, stateObj, c, team, oppo);
+        case "soccer":
+            return setSoccer(t, stateObj, c, team, oppo);
+        case "tennis":
+            return setTennis(t, stateObj, c, team, oppo);
+        case "volleyball":
+            return setVolleyball(t, stateObj, c, team, oppo);
+        default:
+            return;
+    }
+}
+
+//
+//  setBaseball()
+//    in1 = balls
+//    in2 = strikes
+//    in0 = outs
+//    outsDisplay = 'inherit';
+//    timeoutsDisplay = 'none';
+//    basesDisplay = 'inherit';
+//
+export function setBaseball(t, stateObj, c, team, oppo) {
+    c.in1 = t.translate("baseball.gameStat1", "%s", String(stateObj.attributes.balls));
+    c.in2 = t.translate("baseball.gameStat2", "%s", String(stateObj.attributes.strikes));
+    c.in0 = t.translate("baseball.gameStat3", "%s", String(stateObj.attributes.outs));
+    c.outsDisplay = 'inherit';
+    c.timeoutsDisplay = 'none';
+    c.basesDisplay = 'inherit';
+}
+
+
+//
+//  setBasketball()
+//    timeoutsDisplay = 'none';
+//    barDisplay = "none";
+//    barWrapDisplay = "none";
+//
+export function setBasketball(t, stateObj, c, team, oppo) {
+    c.timeoutsDisplay = 'none';
+    c.barDisplay = 'none';
+    c.barWrapDisplay = "none";
+}
+
+
+//
+//  SetCricket()
+//    timeoutsDisplay = 'none';
+//    barDisplay = "none";
+//    barWrapDisplay = "none";
+//    in1 = odds;
+//    in2 = quarter;
+//    score = split score into 2 parts
+//    record = set to second part of split score
+//    scoreOP = adjust opacity based on total runs
+
+export function setCricket(t, stateObj, c, team, oppo) {
+    var runs_substring = [];
+    var runs = [];
+    var total_runs = [];
+    var subscores = [];
+    var i = 0;
+
+    c.timeoutsDisplay = 'none';
+    c.barDisplay = "none";
+    c.barWrapDisplay = "none";  
+
+    c.in1 = stateObj.attributes.odds;
+    c.in2 = stateObj.attributes.quarter;
+
+    if (c.score != []) {
+        if (c.score[1] || c.score[2]) {
+            subscores[1] = c.score[1].split("(");
+            subscores[2] = c.score[2].split("(");
+
+            c.score[1] = subscores[1][0];
+            c.score[2] = subscores[2][0];
+
+            if (subscores[1].length > 1) {
+                c.record[1] = "(" + subscores[1][1];
+            }
+            if (subscores[2].length > 1) {
+                c.record[2] = "(" + subscores[2][1];
+            }
+
+            if (stateObj.state == 'POST') {
+                runs_substring[1] = c.score[1].split("/");
+                runs_substring[2] = c.score[2].split("/");
+
+                runs[1] = runs_substring[1][0].split("&");
+                runs[2] = runs_substring[2][0].split("&");
+
+                total_runs[1] = 0;
+                total_runs[2] = 0;
+
+                i = 0;
+                while (i < runs[1].length) {
+                    total_runs[1] = total_runs[1] + Number(runs[1][i]);
+                    i = i + 1;
+                }
+                i = 0;
+                while (i < runs[2].length) {
+                    total_runs[2] = total_runs[2] + Number(runs[2][i]);
+                    i = i + 1;
+                }
+
+                if (total_runs[1] > total_runs[2]) {
+                    c.scoreOp[1] = 1.0;
+                    c.scoreOp[2] = 0.6;
+                }
+                if (total_runs[1] < total_runs[2]) {
+                    c.scoreOp[1] = 0.6;
+                    c.scoreOp[2] = 1.0;
+                }
+            }
+        }
+    }
+}
+
+
+//
+//  setGolf()
+//   title = use event_name if title is not set
+//   venue = event_name
+//   barLength = team_shots_on_target, opponent_shots_on_target
+//   barLabel = team_total_shots, opponent_total_shots
+//   finalTerm = clock
+//   timeoutsDisplay = 'none';
+//   scoreOp = adjust opacity to show lowest score as winner
+//
+export function setGolf(t, stateObj, c, team, oppo) {
+    c.title = c.title || stateObj.attributes.event_name;
+    c.venue = stateObj.attributes.event_name;
+    c.barLength[team] = stateObj.attributes.team_shots_on_target;
+    c.barLength[oppo] = stateObj.attributes.opponent_shots_on_target;
+    c.barLabel[team] = t.translate("golf.teamBarLabel", "%s", stateObj.attributes.team_total_shots +'(' + stateObj.attributes.team_shots_on_target + ')');
+    c.barLabel[oppo] = t.translate("golf.oppoBarLabel", "%s", stateObj.attributes.opponent_total_shots +'(' + stateObj.attributes.opponent_shots_on_target + ')');
+    c.finalTerm = stateObj.attributes.clock;
+    c.timeoutsDisplay = 'none';
+
+    if (Number(c.score[1]) < Number(c.score[2])) {
+        c.scoreOp[1] = 1.0;
+        c.scoreOp[2] = 0.6;
+    }
+    if (Number(c.score[2]) < Number(c.score[1])) {
+        c.scoreOp[1] = 0.6;
+        c.scoreOp[2] = 1.0;
+    }
+}
+
+//
+//  setHockey()
+//    barLength = team_shots_on_target, opponent_shots_on_target
+//    barLabel = "Shots on Target"
+//    timeoutsDisplay = 'none';
+//
+export function setHockey(t, stateObj, c, team, oppo) {
+    c.barLength[team] = stateObj.attributes.team_shots_on_target;
+    c.barLength[oppo] = stateObj.attributes.opponent_shots_on_target;
+    c.barLabel[team] = t.translate("hockey.teamBarLabel", "%s", String(stateObj.attributes.team_shots_on_target));
+    c.barLabel[oppo] = t.translate("hockey.oppoBarLabel", "%s", String(stateObj.attributes.opponent_shots_on_target));
+
+    c.timeoutsDisplay = 'none';
+}
+
+
+//
+//  setMMA()
+//    title = use event_name if title is not set
+//    timeoutsDisplay = 'none';
+//    barDisplay = "none";
+//    barWrapDisplay = "none";
+//
+export function setMMA(t, stateObj, c, team, oppo) {
+    c.title = c.title || stateObj.attributes.event_name;
+    c.timeoutsDisplay = 'none';
+    c.barDisplay = "none";
+    c.barWrapDisplay = "none";
+}
+
+
+//
+//  setRacing()
+//    title = use event_name if title is not set
+//    pre1 = quarter (race type)
+//    in1 = quarter (race type)
+//    finalTerm = adjust for type of race (race, qualifying, etc.)
+//    timeoutsDisplay = 'none';
+//    barLength = team_total_shots, opponent_total_shots (laps)
+//    barLabel = (laps)
+//   scoreOp = adjust opacity to show lowest score as winner
+//    If NASCAR, remove logos and use initials
+//
+export function setRacing(t, stateObj, c, team, oppo) {
+    c.title = c.title || stateObj.attributes.event_name;
+    if (stateObj.attributes.quarter) {
+        c.pre1 = stateObj.attributes.quarter;
+        c.in1 = stateObj.attributes.quarter;
+        c.finalTerm = stateObj.attributes.clock + " - " + c.gameDatePOST  + " (" + stateObj.attributes.quarter + ")";
+    }
+    c.timeoutsDisplay = 'none';
+
+    c.barLength[team] = stateObj.attributes.team_total_shots;
+    c.barLength[oppo] = stateObj.attributes.team_total_shots;
+    c.barLabel[team] = t.translate("racing.teamBarLabel", "%s", String(stateObj.attributes.team_total_shots));
+    c.barLabel[oppo] = t.translate("racing.teamBarLabel", "%s", String(stateObj.attributes.team_total_shots));
+
+    if (Number(c.score[1]) < Number(c.score[2])) {
+        c.scoreOp[1] = 1.0;
+        c.scoreOp[2] = 0.6;
+    }
+    if (Number(c.score[2]) < Number(c.score[1])) {
+        c.scoreOp[1] = 0.6;
+        c.scoreOp[2] = 1.0;
+    }
+
+    if (stateObj.attributes.league.includes("NASCAR")) {
+        c.logo[team] = null;
+        c.logo[oppo] = null;
+        c.initials[team] = "";
+        c.initials[oppo] = "";
+        if (c.name[team] && c.name[oppo]) {
+            c.initials[team] = c.name[team].split(" ").map((n)=>n[0]).join("");
+            c.initials[oppo] = c.name[oppo].split(" ").map((n)=>n[0]).join("");
+            c.initialsDisplay = 'inline';
+        }
+    }
+}
+
+//
+//  setSoccer()
+//    barLength = team_total_shots, opponent_total_shots
+//    barLabel = "Shots on Target"
+//    timeoutsDisplay = 'none';
+//
+export function setSoccer(t, stateObj, c, team, oppo) {
+    c.barLength[team] = stateObj.attributes.team_total_shots;
+    c.barLength[oppo] = stateObj.attributes.opponent_total_shots;
+    c.barLabel[team] = t.translate("soccer.teamBarLabel", "%s", stateObj.attributes.team_total_shots +'(' + stateObj.attributes.team_shots_on_target + ')');
+    c.barLabel[oppo] = t.translate("soccer.oppoBarLabel", "%s", stateObj.attributes.opponent_total_shots +'(' + stateObj.attributes.opponent_shots_on_target + ')');
+    c.timeoutsDisplay = 'none';
+}
+
+//
+//  setTennis()
+//    venue = event_name
+//    pre1 = odds
+//    in1 = odds
+//    finalTerm = adjust for round (odds)
+//    gameBar = clock
+//    barLength = team_score, opponent_score
+//    barLabel = "score"
+//    timeouts = sets won
+//    title = use event_name if title is not set
+//    timeoutsDisplay = 'inline';
+//
+export function setTennis(t, stateObj, c, team, oppo) {
+    c.venue = stateObj.attributes.event_name;
+    c.pre1 = t.translate("common.tourney" + stateObj.attributes.odds)
+    c.in1 = c.pre1;
+    c.finalTerm = stateObj.attributes.clock + " - " + c.gameDatePOST  + " (" + c.pre1 + ")";
+
+    c.gameBar = t.translate("tennis.gameBar", "%s", stateObj.attributes.clock);
+    c.barLength[team] = stateObj.attributes.team_score;
+    c.barLength[oppo] = stateObj.attributes.opponent_score;
+    if (stateObj.attributes.team_shots_on_target) {
+        c.gameBar = t.translate("tennis.gameBar", "%s", stateObj.attributes.clock + "(tiebreak)");
+        c.barLabel[team] = t.translate("tennis.teamBarLabel", "%s", stateObj.attributes.team_score +'(' + stateObj.attributes.team_shots_on_target + ')');
+    }
+    else {
+        c.barLabel[team] = t.translate("tennis.teamBarLabel", "%s", String(stateObj.attributes.team_score));
+    }
+    if (stateObj.attributes.team_shots_on_target) {
+        c.gameBar = t.translate("tennis.gameBar", "%s", stateObj.attributes.clock + "(tiebreak)");
+        c.barLabel[oppo] = t.translate("tennis.oppoBarLabel", "%s", stateObj.attributes.opponent_score +'(' + stateObj.attributes.opponent_shots_on_target + ')');
+    }
+    else {
+        c.barLabel[oppo] = t.translate("tennis.oppoBarLabel", "%s", String(stateObj.attributes.opponent_score ));
+    }
+    c.timeouts[team] = stateObj.attributes.team_sets_won;
+    c.timeouts[oppo] = stateObj.attributes.opponent_sets_won;
+    c.title = c.title || stateObj.attributes.event_name
+
+    c.timeoutsDisplay = 'inline';
+}
+
+//
+//  setVolleyball()
+//    gameBar = clock
+//    barLength = team_score, opponent_score
+//    barLabel = "score"
+//    timeouts = sets won
+//    timeoutsDisplay = 'inline';
+//
+export function setVolleyball(t, stateObj, c, team, oppo) {
+    c.gameBar = t.translate("volleyball.gameBar", "%s", stateObj.attributes.clock);
+    c.barLength[team] = stateObj.attributes.team_score;
+    c.barLength[oppo] = stateObj.attributes.opponent_score;
+    c.barLabel[team] = t.translate("volleyball.teamBarLabel", "%s", String(stateObj.attributes.team_score));
+    c.barLabel[oppo] = t.translate("volleyball.oppoBarLabel", "%s", String(stateObj.attributes.opponent_score));
+    c.timeouts[team] = stateObj.attributes.team_sets_won;
+    c.timeouts[team] = stateObj.attributes.opponent_sets_won;
+    c.timeoutsDisplay = 'inline';
+}
diff --git a/dist/teamtracker_card.js b/dist/teamtracker_card.js
new file mode 100644
index 0000000..4e1200e
--- /dev/null
+++ b/dist/teamtracker_card.js
@@ -0,0 +1,181 @@
+import { LitElement } from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
+import { Translator } from "./localize/translator.js";
+import { VERSION } from "./const.js";
+import { renderBye } from './render_bye.js';
+import { renderMissingConfig, renderMissingObj, renderStateInvalid, renderStateUnavailable } from './render_error.js';
+import { renderIn } from './render_in.js';
+import { renderNotFound } from './render_not_found.js';
+import { renderPost } from './render_post.js';
+import { renderPre } from './render_pre.js';
+import { initCardData, setCardFormat, setDefaults, setStartInfo } from './set_defaults.js';
+import { setSportData } from './set_sports.js';
+
+
+export class TeamTrackerCard extends LitElement {
+
+    static get properties() {
+        return {
+            hass: {},
+            _config: {},
+        };
+    }
+
+    setConfig(config) {
+        this._config = config;
+    }
+
+    getCardSize() {
+        const stateObj = this.hass.states[this._config.entity];
+
+        switch (stateObj.state) {
+            case 'PRE':
+                return 7;
+            case 'IN':
+                return 10;
+            case 'POST':
+                return 5;
+            case 'BYE':
+                return 4;
+            case 'NOT_FOUND':
+                return 4;
+            default:
+                return 4;
+        }
+    }
+
+    render() {
+        var o = {};  // o is the object that holds the card options from the configuration
+        var c = {};  // c is the object that holds the card data used to render the HTML
+
+        //
+        //  Render error message if missing configuration, entity, or state
+        //
+        if (!this.hass || !this._config) {
+            return renderMissingConfig();
+        }
+        const stateObj = this.hass.states[this._config.entity];
+        if (!stateObj) {
+            return renderMissingObj(this._config.entity);
+        }
+        if (stateObj.state == 'unavailable') {
+            return renderStateUnavailable(this._config.entity);
+        }
+
+        //
+        //  Set card options based on configuration
+        //
+        o.cardTitle = this._config.card_title || "";
+        o.outline = this._config.outline;
+        o.outlineColor = this._config.outline_color || '#ffffff';
+        o.showLeague = this._config.show_league;
+        o.homeSide = String(this._config.home_side).toUpperCase();
+        o.show_timeouts = true;
+        if (this._config.show_timeouts == false) {
+            o.show_timeouts = false;
+        }
+        o.show_rank = true;
+        if (this._config.show_rank == false) {
+            o.show_rank = false;
+        }
+        o.debug = this._config.debug
+
+        //
+        //  Set sport, team, and oppo 
+        //
+        var sport = stateObj.attributes.sport || "default";
+        var team = 1;
+        var oppo = 2;
+        if (((o.homeSide == "RIGHT") && (stateObj.attributes.team_homeaway == "home")) ||
+            ((o.homeSide == "LEFT") && (stateObj.attributes.opponent_homeaway == "home"))) {
+            team = 2;
+            oppo = 1;
+        }
+
+        //
+        // Set language, time_format (12hr or 24hr), and translator
+        //
+        var lang = this.hass.selectedLanguage || this.hass.language || navigator.language || "en"
+        var time_format = "language";
+        try {
+            time_format = this.hass.locale["time_format"] || "language";
+        }
+        catch (e) {
+            time_format = "language"
+        }
+        var t = new Translator(lang);
+
+        //
+        //  Set card data
+        //
+        initCardData(c);
+        setStartInfo(c, stateObj, t, lang, time_format);
+        setCardFormat(o, c);
+        setDefaults(t, lang, stateObj, c, o, sport, team, oppo);
+        setSportData(sport, t, stateObj, c, team, oppo)
+
+        //
+        //  NCAA Specific Changes
+        //
+        if (stateObj.attributes.league) {
+            if (stateObj.attributes.league.includes("NCAA")) {
+                c.notFoundLogo = 'https://a.espncdn.com/i/espn/misc_logos/500/ncaa.png'
+            }
+        }
+
+        //
+        //  Reduce score font size if needed
+        //
+
+        if (Math.max(String(c.score[1]).length, String(c.score[2]).length) > 4) {
+            c.scoreSize = "2em"
+        }
+
+        //
+        //  Add info to title if debug mode is turned on
+        //
+
+        if (o.debug) {
+            var lastUpdate = new Date(stateObj.attributes.last_update);
+            var updateTime = lastUpdate.toLocaleTimeString(lang, { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+
+            c.title = this._config.entity + " " + c.title + "(";
+            if (stateObj.attributes.api_message) {
+                c.title = c.title + stateObj.attributes.api_message[0];
+            }
+            c.title = c.title + updateTime + ") " + VERSION;
+        }
+
+        //
+        //  Render the card based on the state
+        //
+        switch (stateObj.state) {
+            case 'PRE':
+                return renderPre(c);
+            case 'IN':
+                return renderIn(c);
+            case 'POST':
+                return renderPost(c);
+            case 'BYE':
+                return renderBye(c);
+            case 'NOT_FOUND':
+                return renderNotFound(c);
+            default:
+                return renderStateInvalid(c);
+        }
+    }
+
+//
+// Trigger the UI Card Editor from Card Picker
+//    Uncomment to enable visual editor
+//
+    //  static getConfigElement() {
+    //    // Create and return an editor element
+    //    return document.createElement("my-custom-card-editor");
+    //  }
+    //
+    //  static getStubConfig() {
+    //    // Return a minimal configuration that will result in a working card configuration
+    //    return { entity: "" };
+    //  }
+
+}
\ No newline at end of file