diff --git a/assets/base/base.js b/assets/base/base.js
index 1846383..38ab110 100644
--- a/assets/base/base.js
+++ b/assets/base/base.js
@@ -14,7 +14,7 @@ UI.c = function createReactComponent(type, data) {
 };
 
 UI.controllerUpdateRate = 999;
-UI.spectatorUpdateRate = 1000/6;
+UI.spectatorUpdateRate = 1000/20;
 
 UI.getUserInfo = (function() {
 	var userCache = {};
@@ -41,9 +41,9 @@ UI.getUserInfo = (function() {
 
 		$.getJSON('/user-info/' + id, function(data) {
 			if (data.error) {
+				console.log(data.error)
 				return;
 			}
-
 			userCache[id] = data;
 		});
 
@@ -57,11 +57,17 @@ UI.fixName = function(name) {
 	});
 };
 
-UI.getClassColour = function(classId) {
-	if (r3eData.classes[classId] != null && r3eClassColours.classes[classId] != null) {
-		return r3eClassColours.classes[classId].colour;
+UI.getClassColour = function(performanceIndex) {
+	var classColour = "rgba(38, 50, 56, 0.8)";
+	if (performanceIndex != null) {
+    	var b = -performanceIndex * 11000 & 0xFF,
+        g = (-performanceIndex * 11000 & 0xFF00) >>> 8,
+        r = (-performanceIndex * 111000 & 0xFF0000) >>> 16,
+        a = ( (-performanceIndex * 10000 & 0xFF000000) >>> 24 ) / 255 ;
+	    classColour = "rgba(" + [r, g, b, a].join(",") + ")";
+		return classColour;
 	} else {
-		return null;
+		return classColour;
 	}
 };
 
@@ -140,8 +146,9 @@ UI.formatTime = function(ms, options) {
 	}
 
 	if (minutesLeft) {
-		str += ('0'+minutesLeft).slice(-2)+':';
+		str += (''+minutesLeft).slice(-2)+':';
 	}
+	
 	return str+('0'+secondsLeft).slice(-2)+'.'+('00'+msLeft).slice(-3);
 };
 
diff --git a/assets/base/base.less b/assets/base/base.less
index 7c45618..b0b3aec 100644
--- a/assets/base/base.less
+++ b/assets/base/base.less
@@ -7,12 +7,20 @@
 		url(/fonts/hel.woff) format('woff');
 }
 
+@font-face {
+  font-family: 'Formula1-Regular';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Formula1-Regular'),
+  url(/fonts/Formula1-Regular.woff2) format('woff2');
+}
+
 
 /* ---------------------------------------------------------------------------------------- */
 
 html, body {
 	background: transparent;
-	font: 14px/1 Helvetica, verdana, arial, sans-serif;
+	font: 14px/1 Formula1-Regular, Helvetica, verdana, arial, sans-serif;
 	color: #000;
 }
 body {
diff --git a/assets/components/base/commentatorDashboard/commentatorDashboard.less b/assets/components/base/commentatorDashboard/commentatorDashboard.less
index 4ee9178..e23562e 100644
--- a/assets/components/base/commentatorDashboard/commentatorDashboard.less
+++ b/assets/components/base/commentatorDashboard/commentatorDashboard.less
@@ -54,7 +54,7 @@
 		color: white;
 		background: #15202b;
 		z-index: 2;
-		font-family: Abel;
+		font-family: Formula1-Regular;
 		line-height: 0.9;
 		&.isLastLaps {
 			background: @warningColor;
@@ -65,7 +65,7 @@
 		padding: 0 0 0 5px;
 		opacity: 0.5;
 		.values {
-			font-family: arial;
+			font-family: Formula1-Regular;
 		}
 	}
 
@@ -85,7 +85,7 @@
 		font-size: 25px;
 		padding: 10px 15px;
 		background: rgba(0, 0, 0, 0.3);
-		font-family: Abel;
+		font-family: Formula1-Regular;
 	}
 	.row-entries {
 		padding: 5px;
diff --git a/assets/components/base/controller/controller.jsx b/assets/components/base/controller/controller.jsx
index dd11f99..2b03dec 100644
--- a/assets/components/base/controller/controller.jsx
+++ b/assets/components/base/controller/controller.jsx
@@ -277,8 +277,8 @@ var Driver = React.createClass({
 		var divStyle = {
 			position: "absolute"
 		};
-		if (UI.state.controllerOptions.options.multiclass.value === "true" && UI.getClassColour(driver.classId) != null) {
-			classColour = UI.getClassColour(driver.classId);
+		if (UI.state.controllerOptions.options.multiclass.value === "true" && UI.getClassColour(driver.performanceIndex) != null) {
+			classColour = UI.getClassColour(driver.performanceIndex);
 			divStyle = {
 					background: classColour,
 					position: "absolute"
@@ -360,14 +360,14 @@ var ControlOption = React.createClass({
 			'controlPanelOption': true
 		});
 
-		var color = self.state.value != "false" ? '#4CAF50' : '#F44336';
+		var color = self.state.value != "false" ? 'rgb(118 255 3)' : '#F44336';
 
 		return (
 			<div className={classes}>
 					<form>
 							<div className="option">
 				        <label>
-				          <span title={UI.getStringTranslation("configFile", self.state.translationDescription)} style={{'font-size': '20px', 'color': color}}>🛈 {UI.getStringTranslation("configFile", self.state.translationDisplayName)}</span>
+				          <span title={UI.getStringTranslation("configFile", self.state.translationDescription)} style={{'font-size': '15px', 'color': color}}>🛈 {UI.getStringTranslation("configFile", self.state.translationDisplayName)}</span>
 				          <input
 				            defaultValue={self.state.value}
 				            type={self.state.type}
@@ -615,7 +615,7 @@ UI.components.Controller = React.createClass({
 						Overview
 					</a>
 					{session.type && session.phase ?
-						<span>{UI.getStringTranslation("sessionInfoWidget", session.type.toLowerCase().replace(/ /g,""))} - {UI.getStringTranslation("sessionInfoWidget", session.phase.toLowerCase().replace(/ /g,""))}: {UI.formatSessionTime(session.timeLeft)}/{UI.formatSessionTime(session.timeTotal)} - {UI.state.eventInfo.serverName}</span>
+						<span>{UI.getStringTranslation("sessionInfoWidget", session.type.toLowerCase().replace(/ /g,""))} /// {UI.getStringTranslation("sessionInfoWidget", session.phase.toLowerCase().replace(/ /g,""))}: {UI.formatSessionTime(session.timeLeft)}/{UI.formatSessionTime(session.timeTotal)}  ///  {UI.state.eventInfo.serverName}</span>
 						:
 						null
 					}
@@ -655,6 +655,7 @@ UI.components.Controller = React.createClass({
 								<div className="drivers-container-beta-title">
 									<div className="tabled-driver-entry">
 										<div className="position">{UI.getStringTranslation("controller", "position")}</div>
+										<div className="positionIncrease">+ -</div>
 										<div className="lap">{UI.getStringTranslation("controller", "lap")}</div>
 										<div className="interesting">{UI.getStringTranslation("controller", "difference")}</div>
 										<div className="flag"></div>
@@ -666,13 +667,10 @@ UI.components.Controller = React.createClass({
 										<div className="pit">{UI.getStringTranslation("controller", "pitCount")}</div>
 										<div className="mandatoryPit">{UI.getStringTranslation("controller", "mandatoryPit")}</div>
 										<div className="tyre">{UI.getStringTranslation("controller", "tyre")}</div>
-										<div className="tyreWear">{UI.getStringTranslation("controller", "tyreWear")}</div>
 										<div className="damage">{UI.getStringTranslation("controller", "damage")}</div>
 										<div className="flags">{UI.getStringTranslation("controller", "flags")}</div>
 										<div className="ptp">{UI.getStringTranslation("controller", "ptp")}</div>
 										<div className="drs">{UI.getStringTranslation("controller", "drs")}</div>
-										<div className="best-lap-s1">{UI.getStringTranslation("controller", "sector1")}</div>
-										<div className="best-lap-s2">{UI.getStringTranslation("controller", "sector2")}</div>
 										<div className="best-lap-time">{UI.getStringTranslation("controller", "bestLap")}</div>
 										<div className="last-lap-time">{UI.getStringTranslation("controller", "lastLap")}</div>
 										{isRace && <div className="action"></div>}
@@ -814,10 +812,10 @@ var TabledDriver = React.createClass({
 	},
 	renderPostion: function(driver) {
 		var divStyle = {};
-		if (UI.state.controllerOptions.options.multiclass.value === "true" && UI.getClassColour(driver.classId) != null) {
-			classColour = UI.getClassColour(driver.classId);
+		if (UI.state.controllerOptions.options.multiclass.value === "true" && UI.getClassColour(driver.performanceIndex) != null) {
+			classColour = UI.getClassColour(driver.performanceIndex);
 			divStyle = {
-					background: classColour
+					'border-left': classColour + '5px solid'
 			};
 			return <div className="position" style={divStyle} title={UI.getStringTranslation("controller", "overall") + " - P" + driver.scoreInfo.positionOverall + ", " + UI.getStringTranslation("controller", "class") + " - P" + driver.scoreInfo.positionClass}>{driver.scoreInfo.positionClass}</div>
 		} else {
@@ -854,9 +852,22 @@ var TabledDriver = React.createClass({
 	},
 	getTimeDiff: function(driver, fastestDriver) {
 		var self = this;
+
+		const statusNames = [
+		    'NONE',
+		    'FINISHED',
+		    'DNF',
+		    'DNQ',
+		    'DNS',
+		    'DQ',
+		];
+
+
 		// Race
 		if (UI.state.sessionInfo.type.match(/^race/i)) {
-			if (driver.scoreInfo.positionOverall === 1) {
+			if (driver.scoreInfo.status > 1) {
+		    return statusNames[driver.scoreInfo.status];
+			} else if (driver.scoreInfo.positionOverall === 1) {
 				return  UI.getStringTranslation("controller", "lap") + " " + (driver.scoreInfo.laps + 1);
 			} else if (driver.scoreInfo.lapDiff === 1) {
 				return "+1 " + UI.getStringTranslation("controller", "lap");
@@ -887,6 +898,15 @@ var TabledDriver = React.createClass({
 			return UI.fixName(name);
 		}
 	},
+	getPositionIncrease(value) {
+		if(value === 0) {
+			return '-';
+		} else if (value > 0) {
+			return '+' + value;
+		} else if (value < 0) {
+			return value;
+		}
+	},
 	render: function() {
 		var self = this;
 
@@ -894,7 +914,8 @@ var TabledDriver = React.createClass({
 			'tabled-driver-entry': true,
 			'focused': this.props.focused,
 			'idle': self.props.driver.vehicleInfo.speed < 5,
-			'hasModal': this.state.actionModalActive
+			'hasModal': this.state.actionModalActive,
+			'striped': self.props.driver.scoreInfo.positionOverall % 2
 		});
 		var driver = self.props.driver;
 		var state = self.state;
@@ -905,6 +926,12 @@ var TabledDriver = React.createClass({
 		return (
 			<div className={classes} style={{'azIndex': (100-this.props.position)}}>
 					{self.renderPostion(driver)}
+					{ UI.state.sessionInfo.type.match(/^race/i) ?
+						<div className={cx({'positionIncrease': true, 'level': driver.scoreInfo.positionClass === driver.scoreInfo.positionRaceGridClass, 'gained': driver.scoreInfo.positionClass < driver.scoreInfo.positionRaceGridClass, 'lost': driver.scoreInfo.positionClass > driver.scoreInfo.positionRaceGridClass})}>{self.getPositionIncrease(driver.scoreInfo.positionRaceGridClass - driver.scoreInfo.positionClass)}</div>
+					:
+						<div className={cx({'positionIncrease': true, 'level': true})}> - </div>
+					}
+					
 					<div className="lap">{driver.scoreInfo.laps + 1}</div>
 					{isRace ?
 						<div className={self.getInterestingStyle(timeDiff)} onClick={() => {this.changeCamera('trackside', driver.slotId)}}>{self.getTimeDiff(driver, fastestDriver)}</div>
@@ -917,30 +944,29 @@ var TabledDriver = React.createClass({
 						<img className="flag" src={'/img/flags/rr.png'}/>
 					}
 					<div className={cx({'name': true, 'focused': this.props.focused})} onClick={() => {this.changeCamera('trackside', driver.slotId)}} title={UI.getStringTranslation("controller", "portalId") + " - " + driver.portalId}>{self.getName(driver.name)}</div>
-					<img className="manufacturer" src={'/render/'+driver.manufacturerId+'/small/?type=manufacturer'}/>
+					<img className="manufacturer" src={'/img/manufacturers/'+driver.manufacturerId+'.png'}/>
 					<img className="livery" onClick={() => {this.changeCamera('trackside', driver.slotId)}} src={'/render/'+driver.liveryId+'/'+this.props.imageSize+'/'}/>
 					<div className="tvCam" onClick={() => {this.changeCamera('trackside', driver.slotId)}} title={UI.getStringTranslation("controller", "tvTracksideCamera")}>TV</div>
 					<div className="dashCam" onClick={() => {this.changeCamera('onboard1', driver.slotId)}} title={UI.getStringTranslation("controller", "dashCamera")}>D</div>
 					<div className="cockpitCam" onClick={() => {this.changeCamera('onboard2', driver.slotId)}} title={UI.getStringTranslation("controller", "cockpitCamera")}>C</div>
-					<div className="frontCam" onClick={() => {this.changeCamera('frontCam', driver.slotId)}} title={UI.getStringTranslation("controller", "frontCamera")}>F</div>
-					<div className="rearCam" onClick={() => {this.changeCamera('rearCam', driver.slotId)}} title={UI.getStringTranslation("controller", "rearCamera")}>R</div>
 					<div className="wingCam" onClick={() => {this.changeCamera('wing', driver.slotId)}} title={UI.getStringTranslation("controller", "wingCamera")}>W</div>
+					<div className="actionCam" onClick={() => {this.changeCamera('action', driver.slotId)}} title="Action Camera">A</div>
+					<div className="heliCam" onClick={() => {this.changeCamera('heli', driver.slotId)}} title="Heli Camera">H</div>
+					<div className="staticCam" onClick={() => {this.changeCamera('static', driver.slotId)}} title="Static Camera">S</div>
 					<div className="currentSpeed" title={UI.getStringTranslation("controller", "currentSpeed")}>{driver.vehicleInfo.speed}</div>
-					<div className="pit" title={UI.getStringTranslation("controller", "pitCountStatus")}>{UI.getStringTranslation("controller", "notAvailable")}</div>
+					<div className="pit" title={UI.getStringTranslation("controller", "pitCountStatus")}>{driver.pitInfo.numPitstops}</div>
 					{self.renderMandatoryPit(driver.mandatoryPitstopPerformed)}
-					{r3eTyreDB.classes[driver.classId] != null || ["Soft", "Hard", "Primary", "Alternate", "Medium"].indexOf(driver.pitInfo.tyreType) > -1 ?
+					{["Soft", "Hard", "Primary", "Alternate", "Medium", "Prime", "Slicks"].indexOf(driver.pitInfo.tyreType) > -1 ?
 						<div className="tyre">
-							<img src={'/img/tyres/'+driver.pitInfo.tyreType+'.png'} />
+							<img src={'/img/tyres/'+driver.pitInfo.tyreType+'.png'} title={driver.pitInfo.tyreType} />
 						</div>
 						:
 						<div className="tyre">
 							<img src={'/img/tyres/dedicated.png'} title={driver.pitInfo.tyreType} />
 						</div>
 					}
-					<div className="tyreWear" title={UI.getStringTranslation("controller", "tyreWearStatus")}>{UI.getStringTranslation("controller", "notAvailable")}</div>
 					{self.renderDamage(driver.pitInfo.damage)}
 					<div className="flags">
-					 <div className={cx({'blackFlag': true, 'active': driver.scoreInfo.flagInfo.black === 1})} title={UI.getStringTranslation("controller", "blackFlag")}>!</div>
 					 <div className={cx({'blueFlag': true, 'active': driver.scoreInfo.flagInfo.blue === 1})} title={UI.getStringTranslation("controller", "blueFlag")}>!</div>
 					 <div className={cx({'yellowFlag': true, 'active': driver.scoreInfo.flagInfo.yellow === 1})} title={UI.getStringTranslation("controller", "yellowFlag")}>!</div>
 					</div>
@@ -950,8 +976,6 @@ var TabledDriver = React.createClass({
 					:
 						<div className={cx({'drs': true, 'active': driver.vehicleInfo.drsEnabled})} title={UI.getStringTranslation("controller", "drsRemaining")}>{driver.vehicleInfo.drsLeft > -1 ? driver.vehicleInfo.drsLeft : UI.getStringTranslation("controller", "notAvailable")}</div>
 					}
-					<div className="best-lap-s1">{driver.scoreInfo.bestLapInfo.sector1 != -1 ? UI.formatTime(driver.scoreInfo.bestLapInfo.sector1, {ignoreSign: true}) : UI.getStringTranslation("controller", "notAvailable")}</div>
-					<div className="best-lap-s2">{driver.scoreInfo.bestLapInfo.sector2 != -1 ? UI.formatTime(driver.scoreInfo.bestLapInfo.sector2, {ignoreSign: true}) : UI.getStringTranslation("controller", "notAvailable")}</div>
 					{driver.scoreInfo.bestLapInfo.sector3 !== -1 ?
 						<div className="best-lap-time">{UI.formatTime(driver.scoreInfo.bestLapInfo.sector3, {ignoreSign: true})}</div>
 						:
diff --git a/assets/components/base/controller/controller.less b/assets/components/base/controller/controller.less
index 2b24baf..61701b0 100644
--- a/assets/components/base/controller/controller.less
+++ b/assets/components/base/controller/controller.less
@@ -12,6 +12,19 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+/* ---- Roboto ---- */
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto-Regular'),
+  local('Roboto-Regular'),
+  local('Roboto-Regular'),
+  url(/fonts/Roboto-Regular.ttf) format('ttf');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 /* ---- Oswald ---- */
 
 /* cyrillic */
@@ -67,8 +80,7 @@ select {
     background-position: center right;
     background-repeat: no-repeat;
     border: 2px solid #76ff03;
-    background: #15202b;
-    border-radius: 35px;
+    background: #212934;
     text-align: center;
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
     color: #fff;
@@ -117,13 +129,13 @@ select {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background: #15202b;
-	font-family: Abel;
+	background: #212934;
+	font-family: Formula1-Regular;
 
 	.title {
 		.toggle-track-map {
 			float: right;
-			height: 30px;
+			height: 20px;
 			margin: -5px 0 0 10px;
 			&:hover {
 				opacity: 0.8;
@@ -149,7 +161,7 @@ select {
     }
     .toggleControlPanel {
         float: left;
-        height: 30px;
+        height: 25px;
         margin: -5px 0 0;
       	&:hover {
       		opacity: 0.8;
@@ -165,14 +177,13 @@ select {
 		overflow: hidden;
 		text-overflow: ellipsis;
     text-align: center;
-		height: 40px;
+		height: 35px;
 		left: 0px;
 		right: 0;
 		padding: 10px;
-		font-size: 25px;
-		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
+		font-size: 17px;
 		color: white;
-    background: #15202b;
+    background: #ff0000;
     z-index: 2;
 	}
 
@@ -183,15 +194,15 @@ select {
         height: auto;
         background: #0e0e0e;
         color: white;
-        font-family: Oswald;
+        font-family: Formula1-Regular;
         border-top: 2px solid #37474F;
-        background: #15202b;
+        background: #212934;
         width: 100%;
         z-index: 4;
         .controlPanelOption {
           float: left;
     			position: relative;
-          font-size: 20px;
+          font-size: 15px;
           .option {
             text-align: center;
             margin: 15px;
@@ -208,6 +219,8 @@ select {
           input {
             margin-left: 10px;
             display:inline;
+            background: #43474d;
+    				color: white;
           }
         }
       }
@@ -305,10 +318,8 @@ select {
         bottom: 50%;
         opacity: 1.0;
 				font-size: 22px;
-        font-weight: bold;
-				 
         padding: 4px 6px;
-        background: @StandingsDriverNameClassColour;
+        border-left: 0.5em solid white;
 			}
 			img.livery {
 				width: 100%;
@@ -325,10 +336,11 @@ select {
     color: white;
     bottom: 0;
 		font-size: 16px;
-    background: #15202b;
+    background: #212934;
 		select {
 			margin: 10px 5%;
 			width: 90%;
+			font-family: Formula1-Regular;
 		}
 		.widget-buttons, .holder {
 			position: absolute;
@@ -347,13 +359,11 @@ select {
 				opacity: 1;
 				background: rgba(0, 0, 0, 0.1);
 				box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
-				border: 5px solid rgba(255, 255, 255, 0.2);
 				cursor: pointer;
 				position: relative;
 				text-align: center;
-        border-top: 4px solid;
-        box-shadow: 1px 1px 3px #222222;
-        font-family: Oswald;
+        border-left: 4px solid;
+        font-family: Formula1-Regular;
 				.text {
 					position: absolute;
 					top: 50%;
@@ -361,7 +371,7 @@ select {
 					right: 0;
 					-webkit-transform: translate(0, -50%);
 					padding: 0 10px;
-					font-size: 18px;
+					font-size: 13px;
 					line-height: 1.4;
 				}
 				&:hover {
@@ -369,14 +379,14 @@ select {
 				}
 				&.active {
 					box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-					color: #fff;
-          border-top-color: #76FF03;
+					color: #76ff03;
           border-left-color: #76FF03;
 				}
 				&.inactive {
 					.gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
           border-top-color: rgba(226, 29, 56, 1);
           border-left-color: rgba(226, 29, 56, 1);
+          color: red;
 					&.warning {
 						background: rgba(200, 0, 0, 0.3);
 						color: rgba(255,255,255,0.45);
@@ -441,7 +451,6 @@ select {
 			position: absolute;
 			text-align: center;
 			font-size: 30px;
-			border-radius: 50%;
 			&.top {
 				left: -25%;
 				bottom: 100%;
@@ -510,7 +519,6 @@ select {
 		height: 40px;
 		font-size: 30px;
 		margin: -20px 0 0 -20px;
-		font-weight: bold;
 		line-height: 38px;
 		text-align: center;
 		color: #fff;
@@ -584,7 +592,7 @@ select {
   flex-direction: column;
   height: 100%;
   color: white;
-  font-family: Oswald;
+  font-family: Formula1-Regular;
   border-bottom: 1px solid white;
   filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
 }
@@ -602,7 +610,7 @@ select {
   color: white;
   overflow:hidden;
   overflow-y:scroll;
-  font-family: Arial;
+  font-family: Formula1-Regular;
 }
 
 .tabled-driver-entry:nth-child(odd) {
@@ -616,50 +624,64 @@ select {
   float: left;
   position: relative;
   opacity: 1;
-  height: 1.3em;
-  font-size: 17px;
+  height: 1.6em;
+  font-size: 15px;
   color: white;
   &.idle {
     opacity: 0.4;
   }
+  &.striped {
+		background: #1c232c;
+	}
   &.focused {
     opacity: 1;
   }
 
-  .position, .lap, .interesting, .name, .flag, .manufacturer, .livery, .cameras, .currentSpeed, .pit, .mandatoryPit, .tvCam, .dashCam, .cockpitCam, .frontCam, .rearCam, .wingCam, .tyre, .tyreWear, .damage, .flags, .ptp, .drs, .best-lap-s1, .best-lap-s2, .best-lap-time, .last-lap-time, .action {
+  .position, .positionIncrease, .lap, .interesting, .name, .flag, .manufacturer, .livery, .cameras, .currentSpeed, .pit, .mandatoryPit, .tvCam, .dashCam, .cockpitCam, .actionCam, .heliCam, .staticCam, .wingCam, .tyre, .tyreWear, .damage, .flags, .ptp, .drs, .best-lap-s1, .best-lap-s2, .best-lap-time, .last-lap-time, .action {
     vertical-align: top;
     display: inline-block;
     height: 1.3em;
     line-height: 1.2em;
     text-align: center;
-    border-right: 1px dashed grey;
   }
   .position {
     width: 3%;
     color: #fff;
     opacity: 1.0;
   }
+   .positionIncrease {
+    width: 3%;
+    color: #fff;
+    opacity: 1.0;
+  }
+  .gained {
+  	color: #76FF03;
+   }
+   .level {
+  	color: cyan;
+   }
+   .lost {
+  	color: red;
+   }
   .lap {
-    width: 2.5%;
+    width: 3%;
     color: #5CC4FF;
     opacity: 1.0;
   }
   .flag {
     border: 0px;
     width: 2%;
-    padding: 0;
     img {
-      padding: 0;
+      padding: 0.3em;
     }
   }
   .name {
-    width: 11%;
+    width: 13%;
     white-space: nowrap;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     &.focused {
-      border: 1px solid #76FF03;
       background: #76FF03;
       color: black;
     }
@@ -667,67 +689,39 @@ select {
   .manufacturer {
     border: 0px;
     width: 1.5%;
-    padding: 0;
+    padding: 0.1em;
     img {
       padding: 0;
     }
   }
   .livery {
     border: 0px;
-    width: 3%;
-    padding: 0;
-    img {
-      padding: 0;
-    }
+    width: 2.5%;
+    padding: 0.1em;
   }
   .cameras {
-    color: #4CAF50;
-    width: 12%;
-    opacity: 1.0;
-  }
-  .tvCam {
-    color: #4CAF50;
-    width: 2%;
-    opacity: 1.0;
-  }
-  .cockpitCam {
-    color: #4CAF50;
-    min-width: 2%;
-    opacity: 1.0;
-  }
-  .dashCam {
-    color: #4CAF50;
-    min-width: 2%;
-    opacity: 1.0;
-  }
-  .frontCam {
-    color: #4CAF50;
-    min-width: 2%;
-    opacity: 1.0;
-  }
-  .rearCam {
-    color: #4CAF50;
-    min-width: 2%;
+    color: #76ff03;
+    width: 10.5%;
     opacity: 1.0;
   }
-  .wingCam {
-    color: #4CAF50;
-    min-width: 2%;
+  .tvCam, .cockpitCam, .dashCam, .wingCam, .actionCam, .staticCam, .heliCam {
+    color: #76ff03;
+    width: 1.7%;
     opacity: 1.0;
   }
   .pit {
-    width: 3%;
-    color: #7E57C2;
+    width: 5%;
+    color: #00b8ff;
     opacity: 1.0;
   }
   .currentSpeed {
-    width: 3%;
+    width: 4%;
     color: #FF9800;
     opacity: 1.0;
   }
   .mandatoryPit {
-    width: 4%;
-    color: #7E57C2;
+    width: 7%;
+    color: #fb00ff;
     opacity: 1.0;
   }
   .tyre {
@@ -735,6 +729,7 @@ select {
     width: 3%;
     padding: 0;
     color: yellow;
+    padding: 0.1em;
     img {
       width: 45%;
       padding: 0;
@@ -747,13 +742,13 @@ select {
     color: white;
   }
   .damage {
-    width: 4%;
-    color: #8BC34A;
+    width: 5%;
+    color: #ff8100;
     opacity: 1.0;
     background: transparent;
   }
   .flags {
-    width: 5%;
+    width: 4%;
     opacity: 1.0;
     color: white;
     background: transparent;
@@ -788,14 +783,14 @@ select {
   }
   .best-lap-s1 {
     width: 5%;
-    color: #4DB6AC;
+    color: #00ffe7;
     &.invalid {
       color: #F44336;
     }
   }
   .best-lap-s2 {
     width: 5%;
-    color: #26A69A;
+    color: #F44336;
     &.invalid {
       color: #F44336;
     }
@@ -803,7 +798,7 @@ select {
   .best-lap-time {
     width: 7%;
     opacity: 1.0;
-    color: #009688;
+    color: #00ffa1;
     &.invalid {
       color: #F44336;
     }
@@ -811,7 +806,7 @@ select {
   .last-lap-time {
     width: 7%;
     opacity: 1.0;
-    color: #76ff03;
+    color: #ffe003;
     &.invalid {
       color: #F44336;
     }
@@ -820,13 +815,13 @@ select {
     width: 3%;
     opacity: 1.0;
     .actionIcon {
-      background: #000;
+      background: #ffeb00;
+      color: black;
       margin: 0 10px;
-      font-weight:bold;
       cursor: pointer;
-      border-radius: 5px;
       &:hover {
-        color: yellow;
+      	background: red;
+        color: white;
       }
     }
   }
@@ -841,7 +836,7 @@ select {
   .ptp {
     width: 2.5%;
     opacity: 1.0;
-    color: #1976D2;
+    color: #ff0076;
     &.active {
       color: #00BCD4;
     }
@@ -851,14 +846,10 @@ select {
     color: white;
 
     &.close {
-      border: 1px solid #FF9800;
-      border-radius: 25px;
-      background: #FF9800;
+      background: #fbff00;
       color: black;
     }
     &.veryClose {
-      border: 1px solid red;
-      border-radius: 25px;
       background: red;
       color: white;
     }
@@ -878,20 +869,18 @@ select {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background: #15202b;
+    background: #212934;
 
     textarea {
       width: 400px;
       padding: 10px;
-      font-size: 20px;
-      border-radius: 5px;
+      font-size: 15px;
       border: 0;
     }
     input {
       width: 100px;
       padding: 10px;
       font-size: 40px;
-      border-radius: 5px;
       border: 0;
       text-align: center;
     }
@@ -900,28 +889,25 @@ select {
         color: #fff;
         background: transparent;
         text-transform: uppercase;
-        font-family: Oswald;
+        font-family: Formula1-Regular;
         margin: 5px 5px 5px 10px;
         padding: 13px 20px;
         font-size: 20px;
         background: rgba(0,0,0,0.2);
-        border-radius: 5px;
     }
     .optionContainer {
       display: flex;
       padding: 5px;
-      border: 2px solid #76ff03;
-      border-radius: 10px;
+      border: 2px solid #ff0000;
     }
     .close {
       position: absolute;
       bottom: 110%;
       right: -2px;
-      border: 2px solid rgba(255,255,255,0.2);
-      border-radius: 10px;
+      border: 2px solid rgb(118, 255, 3);
       padding: 10px;
       cursor: pointer;
-      background: #15202b;
+      background: #212934;
       &:hover {
         background: rgba(255,255,255,0.1);
       }
@@ -941,7 +927,6 @@ select {
       font-size: 25px;
       padding: 30px;
       border: 2px solid rgba(255,255,255,0.9);
-      border-radius: 10px;
       margin: 5px;
       cursor: pointer;
       text-transform: uppercase;
diff --git a/assets/components/base/overview/overview.less b/assets/components/base/overview/overview.less
index a2bc092..dff4ae1 100644
--- a/assets/components/base/overview/overview.less
+++ b/assets/components/base/overview/overview.less
@@ -25,7 +25,7 @@
 		color: white;
 		background: #15202b;
 		z-index: 2;
-		font-family: Abel;
+		font-family: Formula1-Regular;
 		line-height: 0.9;
 		&.isLastLaps {
 			background: @warningColor;
@@ -36,7 +36,7 @@
 		padding: 0 0 0 5px;
 		opacity: 0.5;
 		.values {
-			font-family: arial;
+			font-family: Formula1-Regular;
 		}
 	}
 
@@ -67,7 +67,7 @@
 		font-size: 25px;
 		padding: 10px 15px;
 		background: rgba(0, 0, 0, 0.3);
-		font-family: Abel;
+		font-family: Formula1-Regular;
 		.flag {
 			width: 25px;
 			margin-right: 10px;
@@ -210,7 +210,7 @@
 				th {
 					font-size: 15px;
 					background: rgba(0, 0, 0, 0.4);
-					font-family: Abel;
+					font-family: Formula1-Regular;
 					white-space: nowrap;
 				}
 
diff --git a/assets/components/base/spectator/spectator.less b/assets/components/base/spectator/spectator.less
index a8ece32..53e1d84 100644
--- a/assets/components/base/spectator/spectator.less
+++ b/assets/components/base/spectator/spectator.less
@@ -6,6 +6,22 @@
   url(/fonts/DaimlerCS-Demi.woff2) format('woff2');
 }
 
+@font-face {
+  font-family: 'Formula1-Regular';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Formula1-Regular'),
+  url(/fonts/Formula1-Regular.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('roboto-regular'),
+  url(/fonts/roboto-regular.woff2) format('woff2');
+}
+
 @font-face {
   font-family: 'DaimlerCS-ExtraBoldItalic';
   font-style: normal;
@@ -29,8 +45,9 @@
 		left: 0;
 		right: 0;
 		bottom: 0;
-		// opacity: 0.2;
-    // background-image: url('https://myrealdomain.com/images/vhs-effect-clipart-6.png');
+
+		opacity: 0.2;
+    background-image: url('https://myrealdomain.com/images/vhs-effect-clipart-6.png');
     // background-color: red;  /* fallback for old browsers */
     //background-blend-mode: difference;
 
@@ -41,7 +58,7 @@
 	.pit-window-information {
 		.onCreation(-webkit-transform, translate(-50%, -200px), translate(-50%, 0), 0.5s);
 		.onCreation(opacity, 0, 1, 0.2s);
-		font-family: Oswald;
+		font-family: Formula1-Regular;
 		position: fixed;
 		top: 120px;
 		left: 50%;
diff --git a/assets/components/widgets/alerts/alerts.flat.less b/assets/components/widgets/alerts/alerts.flat.less
index 0b3c133..6075eae 100644
--- a/assets/components/widgets/alerts/alerts.flat.less
+++ b/assets/components/widgets/alerts/alerts.flat.less
@@ -2,7 +2,7 @@
 
 .alert {
   font-size: @fontSize * 1.1;
-  font-family: Oswald;
+  font-family: Formula1-Regular;
 	position: fixed;
 	top: 17em;
   right: 5em;
@@ -17,19 +17,19 @@
     opacity: 0.5;
   }
   .raceControlAlert {
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    border-top: 3px solid @AlertTitleBorderTop;
-    background: @AlertTitleBackgroundColor;
-    color: @AlertTitleText;
-    font-size: @fontSize * 1.1;
+    background: #212934;
+    color: yellow;
+    font-size: @fontSize;
     padding: 0.05em;
+    top: 0.1em;
+    z-index: 0;
   }
   .alertMessage {
-    background: @AlertMessageBackground;
-    color: @AlertMessageText;
+    background: yellow;
+    color: black;
+    font-size: @fontSize;
     padding: 0.15em;
-    font-size: @fontSize * 1.1;
     text-transform: capitalize;
+    z-index: -1;
   }
 }
diff --git a/assets/components/widgets/alerts/alerts.jsx b/assets/components/widgets/alerts/alerts.jsx
index 241fb56..c746022 100644
--- a/assets/components/widgets/alerts/alerts.jsx
+++ b/assets/components/widgets/alerts/alerts.jsx
@@ -54,6 +54,12 @@ UI.widgets.Alert = React.createClass({
 				12: true,
 				13: true
 			}
+			// misc
+			// 6: {
+			// 	0: true,
+			// 	1: true,
+			// 	2: true
+			// }
 		};
 
 		// Don't show all events like the Misc ones, collision, stationary etc.
@@ -93,12 +99,6 @@ UI.widgets.Alert = React.createClass({
 					(event.removing ? 'removing' : '')
 				}
 			>
-				<div className="raceControlAlert">
-					{UI.getStringTranslation(
-						'alertsWidget',
-						'stewardsDecision'
-					)}
-				</div>
 
 				{window.settings.teamEvent ? (
 					<div className="alertMessage">
@@ -111,6 +111,13 @@ UI.widgets.Alert = React.createClass({
 						{event.driverName} - {penaltyMeanings[event.type][event.reason].text}
 					</div>
 				)}
+
+				<div className="raceControlAlert">
+					{UI.getStringTranslation(
+						'alertsWidget',
+						'stewardsDecision'
+					)}
+				</div>
 			</div>
 		);
 	}
diff --git a/assets/components/widgets/autoDirector/autoDirector.jsx b/assets/components/widgets/autoDirector/autoDirector.jsx
index 3ee817f..c1fbc8c 100644
--- a/assets/components/widgets/autoDirector/autoDirector.jsx
+++ b/assets/components/widgets/autoDirector/autoDirector.jsx
@@ -24,7 +24,7 @@ UI.scoringRules = {
 	},
 	// people in yellow flag zones may be interesting, particulary those who might be cuasing it
 	'causingYellowFlag': function(score, driver, drivers) {
-		if (UI.state.sessionInfo.type.match(/^race/i) && driver.scoreInfo.flagInfo.yellow > 0 && driver.vehicleInfo.speed > 10 && driver.vehicleInfo.speed < 50) {
+		if (UI.state.sessionInfo.type.match(/^race/i) && driver.scoreInfo.flagInfo.causedYellow > 0 && driver.vehicleInfo.speed > 5) {
 			score += 10;
 		}
 
@@ -149,7 +149,7 @@ UI.scoringRules = {
 			return score;
 		}
 
-		var secondsPassed = ((UI.state.sessionInfo.timeTotal/3600)*60)-UI.state.sessionInfo.timeLeft
+		var secondsPassed = UI.state.sessionInfo.timeTotal;
 		if (secondsPassed < 20 && driver.scoreInfo.positionOverall === 4) {
 			score += 30;
 		}
diff --git a/assets/components/widgets/code60/code60.flat.less b/assets/components/widgets/code60/code60.flat.less
index 9644cae..04add65 100644
--- a/assets/components/widgets/code60/code60.flat.less
+++ b/assets/components/widgets/code60/code60.flat.less
@@ -4,29 +4,36 @@
   font-size: @fontSize;
   position: fixed;
   top: 7em;
-  background: @Code60Background;
-  left: 50%;
-  -webkit-transform: translate(-50%, 0) skew(-15deg, 0deg);
-  border: 1px solid  @Code60Background;
-  border-bottom-right-radius: 10px;
-  display: inline-block;
-  .code60Img {
-    float: left;
-    font-family: Oswald;
-  	text-transform: uppercase;
-  	height: 2em;
-  	width: 3em;
-  }
-  .code60 {
-    border: 1px solid  @Code60Background;
-    border-bottom-right-radius: 10px;
-    font-family: Oswald;
-  	background: @Code60Background;
-  	text-transform: uppercase;
-  	color: @Code60Text;
-  	height: 2em;
-  	width: 8em;
-  	line-height: 2em;
-  	text-align: center;
+  left: 45%;
+  width: 15em;
+  line-height: 1.7em;
+  text-align: center;
+  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
+
+  .raceControl {
+    border-top: yellow 3px solid;
+    background: #212934;
+    color: yellow;
+    font-size: @fontSize * 1.1;
+    padding: 0.05em;
+    top: 0.1em;
+    z-index: 0;
+
   }
+  .vscDeployed {
+    background: yellow;
+    color: black;
+    font-size: @fontSize * 1.1;
+    padding: 0.15em;
+    text-transform: capitalize;
+    z-index: -1;
+    animation: glow 2s infinite;
 }
+
+@-webkit-keyframes glow { 
+    0% { background-color:yellow; }
+    50% { background-color:white; }
+    100% { background-color:yellow; } 
+  } 
+}
+
diff --git a/assets/components/widgets/code60/code60.jsx b/assets/components/widgets/code60/code60.jsx
index bf3ab39..88a138e 100644
--- a/assets/components/widgets/code60/code60.jsx
+++ b/assets/components/widgets/code60/code60.jsx
@@ -3,8 +3,8 @@ UI.widgets.Code60 = React.createClass({
 		var self = this;
 		return (
 			<div className="code60Container">
-				<img className="code60Img animated flash infinite" src="img/code60.png" />
-				<div className="code60">{UI.getStringTranslation("code60Widget", "code60")}</div>
+				<div className="raceControl">{UI.getStringTranslation("safetyCarInWidget", "raceControl")}</div>
+				<div className="vscDeployed">{UI.getStringTranslation("code60Widget", "code60")}</div>
 			</div>
 		);
 	}
diff --git a/assets/components/widgets/commentaryNames/commentaryNames.flat.less b/assets/components/widgets/commentaryNames/commentaryNames.flat.less
index 2d442bb..b0f3c0a 100644
--- a/assets/components/widgets/commentaryNames/commentaryNames.flat.less
+++ b/assets/components/widgets/commentaryNames/commentaryNames.flat.less
@@ -1,33 +1,31 @@
 @import '../theme/z';
 
 .commentaryNameAlert {
-  font-size: @fontSize * 1.1;
-  font-family: Oswald;
+  font-size: @fontSize;
+  font-family: Formula1-Regular;
   position: fixed;
-  bottom: 14em;
+  bottom: 15em;
   left: 50%;
   -webkit-transform: translate(-50%, 0);
   text-align: center;
 	text-transform: uppercase;
 	min-height: 1em;
-	width: 14em;
+	width: 25em;
 	line-height: 1.7em;
 	display: inline-block;
+  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
+  background: @primaryAccentBackground;
+  border-left: 3px solid @primaryAccent;
   .commentaryTitle {
-    -webkit-transform: skew(-10deg, 0deg);
-    border-top: 3px solid @CommentaryTitleBorderTop;
-    background: @CommentaryTitleBackgroundColor;
-    color: @CommentaryTitleText;
-    font-size: @fontSize * 1.1;
+    color: @primaryAccent;
+    font-size: @fontSize * 0.9;
     padding: 0.05em;
     top: 0.1em;
     z-index: 0;
   }
   .commentaryName {
-    -webkit-transform: skew(-10deg, 0deg);
-    background: @CommentaryMessageBackground;
-    color: @CommentaryMessageText;
-    font-size: @fontSize * 1.1;
+    font-size: @fontSize * 1.5;
+    color: @secondaryAccent;
     padding: 0.15em;
     text-transform: capitalize;
     z-index: -1;
diff --git a/assets/components/widgets/commentaryNames/commentaryNames.jsx b/assets/components/widgets/commentaryNames/commentaryNames.jsx
index e2eda36..5ddf864 100644
--- a/assets/components/widgets/commentaryNames/commentaryNames.jsx
+++ b/assets/components/widgets/commentaryNames/commentaryNames.jsx
@@ -13,8 +13,8 @@ UI.widgets.CommentaryNames = React.createClass({
 
 		return (
       <div className="commentaryNameAlert animated fadeIn">
-        <div className="commentaryTitle">{UI.getStringTranslation("commentaryNamesWidget", "commentary")}</div>
   			<div className="commentaryName">{UI.state.controllerOptions.options.commentaryNames.value ? UI.state.controllerOptions.options.commentaryNames.value : '-'}</div>
+        <div className="commentaryTitle">{UI.getStringTranslation("commentaryNamesWidget", "commentary")}</div>
       </div>
 		);
 	}
diff --git a/assets/components/widgets/compareRace/compareRace.flat.less b/assets/components/widgets/compareRace/compareRace.flat.less
index bf31f75..eeeb138 100644
--- a/assets/components/widgets/compareRace/compareRace.flat.less
+++ b/assets/components/widgets/compareRace/compareRace.flat.less
@@ -4,8 +4,9 @@
 	left: 0;
 	right: 0;
 	text-align: center;
-	font-family: Oswald;
+	font-family: Formula1-Regular;
 	color: #fff;
+	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
 	.inner {
 		font-size: @fontSize;
 		white-space: nowrap;
@@ -20,36 +21,69 @@
 	}
 	.top {
 		position: relative;
-		bottom: -0.2em;
+		bottom: -0.3em;
 		text-align: center;
 		height: 1.75em;
 		left: -4.5em;
 		margin: 0;
-		.speed, .best-time {
+		.drs, .ptp, .speed, .best-time  {
 			vertical-align: top;
 			display: inline-block;
+
 		}
 		.speed {
-			transform: skew(-10deg);
-			background: @CompareRaceSpeedBackground;
+			background: @primaryAccentBackground;
 			line-height: 0.5em;
 			padding: 0.5em 0.5em;
-			color: @CompareRaceSpeedText;
-			width: 5em;
+			color: yellow;
+			width: 7em;
 			z-index: 0;
 			height: 1.5em;
+			border-left: 0.1em solid yellow;
+			text-align: right;
 		}
 		.best-time {
-			transform: skew(-10deg);
-			background: @CompareRaceBestTimeBackground;
+			background: @primaryAccentBackground;
 			line-height: 0.5em;
 			padding: 0.5em 0.5em;
-			color: @CompareRaceBestTimeText;
-			width: 5em;
+			color: #76FF03;
+			width: 7em;
 			z-index: 0;
-			height: 1.5em;
+			height: 1.4em;
+			border-left: 0.1em solid #76FF03;
+			bottom: 0.1em;
+		}
+		.drs {
+		&.active {
+			.icon {
+				background: #76ff03;
+				color: black;
+				position: relative;
+				height: 1.4em;
+				line-height: 1.5em;
+				font-family: Formula1-Regular;
+				width: 4em;
+				font-size: @fontSize;
+				animation: drsGlow 1s infinite;
+			}
 		}
 	}
+	.ptp {
+		&.active {
+			.icon {
+				background: #00b8ff;
+				color: black;
+				position: relative;
+				height: 1.4em;
+				line-height: 1.5em;
+				font-family: Formula1-Regular;
+				width: 4em;
+				font-size: @fontSize;
+				animation: ptpGlow 1s infinite;
+			}
+		}
+	}
+	}
 	.comparePositionContainer, .compareName, .vehicle, .manufacturer, .compare-flag-container {
 		vertical-align: top;
 		display: inline-block;
@@ -58,56 +92,59 @@
 	}
 	.main {
 	.comparePositionContainer {
-		background: @CompareRacePositionBackground;
-		color: @CompareRacePositionText;
-		width: 3.75em;
+		background: @secondaryAccentBackground;
+		color: @quaternaryAccent;
+		width: 5.5em;
 		text-shadow: 0 0 1em rgba(0, 0, 0, 0.3);
 		text-align: center;
 		line-height: 3.5em;
-		border-bottom: 0.1em solid @CompareRacePositionBorder;
-		border-top-left-radius: 10px;
-		transform: skew(-10deg);
 		.comparePosition {
-			position: relative;
-			left: -0.075em;
 			font-size: @fontSize * 3;
 		}
 	}
 	.compareName {
-  	background: @CompareRaceNameBackground;
-		color: @CompareRaceNameText;
-		padding: 0 1em;
-		min-width: 12em;
-		border-bottom: 0.1em solid @CompareRaceNameBorder;
-		.name {
-			font-size: @fontSize * 1.3;
+  		background: @primaryAccentBackground;
+		color: @secondaryAccent;
+		padding: 0.1em;
+		min-width: 22em;
+		text-align: right;
+		border-bottom: 0.1em solid @secondaryAccentBackground;
+		.firstName {
+			line-height: 0.5em;
+			color: @secondaryAccent;
+			font-size: @fontSize;
+			display: inline-block;
+		}
+		.lastName {
+			padding: 0.2em;
+			line-height: 0.5em;
+			color: @primaryAccent;
+			font-size: @fontSize * 1.4;
+			display: inline-block;
 		}
 	}
 	.vehicle {
 		width: 1.75em;
 		position: fixed;
 		border-top-right-radius: 1em;
-		border-bottom-right-radius: 1em;
 		z-index: 2;
 		img {
 			position: absolute;
-			top: -3.2em;
-			left: -4.2em;
-			height: 4.5em;
+			top: -4.2em;
+			left: -7.5em;
+			height: 6em;
 		}
 	}
 	.manufacturer {
-		background: @CompareRaceManufacturerBackground;
+		background: @primaryAccentBackground;
 		width: 4em;
 		z-index: 1;
 		position: relative;
 		left: -0.3em;
-		transform: skew(-10deg);
-		border-bottom: 0.1em solid @CompareRaceManufacturerBorder;
-		border-bottom-right-radius: 10px;
+		border-bottom-right-radius: 5px;
+		border-bottom: 0.1em solid @secondaryAccentBackground;;
 		img {
 			position: absolute;
-			transform: skew(10deg);
 			top: 0.25em;
 			right: 0.5em;
 			height: 3em;
@@ -116,85 +153,53 @@
 	}
 	.bottom {
 		position: relative;
-		height: 1.5em;
-		width: 20em;
-		left: 1em;
-		z-index: -1;
+		height: 1.8em;
+		width: 25em;
+		left: 9.2em;
+		z-index: -3;
+		background: @primaryAccentBackground;
+		border-bottom-right-radius: 5px;
+		border-bottom-left-radius: 5px;
 		.team {
-			border-bottom-left-radius: 10px;
-			transform: skew(-10deg);
-			border-bottom-right-radius: 10px;
-			background: @CompareRaceTeamNameBackground;
-			color: @CompareRaceTeamNameText;
+			font-size: @fontSize * 0.9;
+			padding: 0.35em;
+			color: @secondaryAccent;
 			height: 1.5em;
 			text-transform: uppercase;
 			top: 3.5em;
 			line-height: 1.5em;
 			border: 0.1em;
+			text-align: right;
 		}
-}
-	/* Hide DRS inactive state on all cars to not show on cars that don't have drs. Height, Font size for inactive is invisible */
-	.compareAssists {
-		height: 1.5em;
-	.drs {
-		.icon {
-			width: 0;
-			font-size: 0;
-		}
-		&.active {
-			.icon {
-				transform: skew(-10deg);
-				background: @CompareRaceDRSActiveBackground;
-				position: relative;
-				top: -6.5em;
-				left: 0.75em;
-				right: 0.5em;
-				height: 1.5em;
-				line-height: 1.75em;
-				font-family: Oswald;
-				width: 3em;
-				font-size: @fontSize;
-				bottom: 0;
-			}
-		}
-	}
-	.ptp {
-		.icon {
-			width: 0;
-			font-size: 0;
-		}
-		&.active {
-			.icon {
-				transform: skew(-10deg);
-				background: rgba(66, 165, 245, 0.7);
-				position: relative;
-				top: -6.5em;
-				left: 0.75em;
-				right: 0.5em;
-				height: 1.5em;
-				line-height: 1.75em;
-				font-family: Oswald;
-				width: 3em;
-				font-size: @fontSize;
-				bottom: 0;
-			}
-		}
-	}
 }
 	.compare-flag-container {
+		border-bottom: 0.1em solid @secondaryAccentBackground;;
 		width: 3em;
 		position: relative;
-		margin-right: 0.25em;
-		transform: skew(-10deg);
+		background: @primaryAccentBackground;
 		.compare-flag {
-			background: @backgroundDark;
+			background: @primaryAccentBackground;
 			position: fixed;
 			display: block;
 			content: '';
 			width: 4em;
-			height: 3.5em;
+			height: 2.5em;
+			position: absolute;
+			top: 0.5em;
+			left: 1em;
+			filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.9));
+			z-index: 1;
+		}
+		.compare-avatar {
+			background: @primaryAccentBackground;
+			position: fixed;
+			display: block;
+			content: '';
+			width: 3em;
+			height: 2.5em;
 			position: absolute;
-			left: -0.3em;
+			top: 0.5em;
+			left: 1em;
 			filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.9));
 			z-index: 1;
 		}
@@ -212,7 +217,7 @@
 	.delta {
 		font-size: @fontSize;
 		text-transform: uppercase;
-		color: @CompareRaceDeltaText;
+		color: @secondaryAccent;
 		padding: 0.25em 0.5em;
 		min-width: 6.5em;
 		display: inline-block;
@@ -220,27 +225,23 @@
 
 		.battle {
 			text-transform: uppercase;
-			border-top: 0.25em solid @CompareRaceDeltaDeltaBorder;
-			color: @CompareRaceDeltaText;
+			border-left: 0.25em solid @primaryAccent;
+			color: @secondaryAccent;
 			padding: 0.4em 0.7em;
 			width: inherit;
 			position: relative;
 			bottom: 0.25em;
-			transform: skew(-10deg);
-			background: @CompareRaceDeltaBackground;
-			left: 0.3em;
+			background: @primaryAccentBackground;
 		}
 
 		.value {
 			text-transform: uppercase;
-			color: @CompareRaceDeltaText;
+			color: @primaryAccent;
 			padding: 0.4em 0.7em;
 			width: inherit;
 			position: relative;
 			bottom: 0.25em;
-			left: -0.05em;
-			transform: skew(-10deg);
-			background: @CompareRaceDeltaBackground;
+			background: @primaryAccentBackground;
 		}
 
 		.inner {
diff --git a/assets/components/widgets/compareRace/compareRace.jsx b/assets/components/widgets/compareRace/compareRace.jsx
index e79e581..11f5b02 100644
--- a/assets/components/widgets/compareRace/compareRace.jsx
+++ b/assets/components/widgets/compareRace/compareRace.jsx
@@ -112,10 +112,17 @@ UI.widgets.CompareRace = React.createClass({
 });
 
 UI.widgets.CompareRaceDriver = React.createClass({
-	fixName: function(str) {
+	getFirstName: function(str) {
 		str = UI.fixName(str);
 		var parts = str.split(' ');
 		parts[parts.length-1] = parts[parts.length-1].toUpperCase();
+		return parts[0];
+	},
+	getLastName: function(str) {
+		str = UI.fixName(str);
+		var parts = str.split(' ');
+		parts[parts.length-1] = parts[parts.length-1].toUpperCase();
+		parts.shift();
 		return parts.join(' ');
 	},
 	getTeamName: function(teamId, portalId) {
@@ -151,6 +158,21 @@ UI.widgets.CompareRaceDriver = React.createClass({
 		return (
 			<div className={cx(classes)}>
 			<div className="top">
+					{driver.pushToPassInfo.active ?
+						<div className={cx({'ptp': true, 'active': true})}>
+							<div className={cx({'icon': true, 'active': driver.pushToPassInfo.active})}>{UI.getStringTranslation("compareRaceWidget", "ptp")}</div>
+						</div>
+						:
+						null
+					}
+
+					{driver.vehicleInfo.drsEnabled ?
+						<div className={cx({'drs': true, 'active': true})}>
+							<div className={cx({'icon': true, 'active': driver.vehicleInfo.drsEnabled})}>{UI.getStringTranslation("compareRaceWidget", "drs")}</div>
+						</div>
+						:
+						null
+					}
 			{UI.state.controllerOptions.options.showComparisonSpeed.value === "true" ?
 					<div className="speed">
 						{driver.vehicleInfo.speed} {UI.getStringTranslation("compareRaceWidget", "kmh")}
@@ -170,7 +192,7 @@ UI.widgets.CompareRaceDriver = React.createClass({
 				<div className="comparePositionContainer"><div className="comparePosition">{driver.scoreInfo.positionOverall}</div></div>
 				<div className="compare-flag-container">
 				{window.settings.offline === true || UI.state.controllerOptions.options.showPortalAvatar.value === "true" ?
-					<img className="compare-flag" src={UI.getUserInfo(driver.portalId).avatar} />
+					<img className="compare-avatar" src={UI.getUserInfo(driver.portalId).avatar} />
 				:
 					<img className="compare-flag" src={'/img/flags/'+UI.getUserInfo(driver.portalId).country+'.png'} />
 				}
@@ -179,7 +201,10 @@ UI.widgets.CompareRaceDriver = React.createClass({
 					{ window.settings.teamEvent ?
 						<div className="name">{driver.name.substr(driver.name.indexOf(" ") + 1).toUpperCase()}</div>
 					:
-						<div className="name">{self.fixName(driver.name)}</div>
+						<div>
+							<div className="firstName">{self.getFirstName(driver.name)}</div>
+							<div className="lastName">{self.getLastName(driver.name)}</div>
+						</div>
 					}
 				</div>
 				{UI.state.controllerOptions.options.showLiveryPreview.value === "true" ?
@@ -190,7 +215,7 @@ UI.widgets.CompareRaceDriver = React.createClass({
 					null
 				}
 				<div className="manufacturer">
-					<img src={'/render/'+driver.manufacturerId+'/small/?type=manufacturer'}/>
+					<img src={'/img/manufacturers/'+driver.manufacturerId+'.png'} />
 				</div>
 			</div>
 
@@ -201,21 +226,6 @@ UI.widgets.CompareRaceDriver = React.createClass({
 						 <div className="team">{self.getTeamName(driver.teamId, driver.portalId)}</div>
 					 }
 				</div>
-
-				<div className="compareAssists">
-					{driver.pushToPassInfo.allowed ?
-						<div className={cx({'ptp': true, 'active': driver.pushToPassInfo.active})}>
-							<div className={cx({'icon animated infinite flash': true, 'active': driver.pushToPassInfo.active})}>{UI.getStringTranslation("compareRaceWidget", "ptp")}</div>
-						</div>
-						:
-						null
-					}
-
-					<div className={cx({'drs': true, 'active': driver.vehicleInfo.drsEnabled})}>
-						<div className={cx({'icon animated infinite flash': true, 'active': driver.vehicleInfo.drsEnabled})}>{UI.getStringTranslation("compareRaceWidget", "drs")}</div>
-					</div>
-				</div>
-
 			</div>
 		);
 	}
diff --git a/assets/components/widgets/directorSuggestions/directorSuggestions.meta.json b/assets/components/widgets/directorSuggestions/directorSuggestions.meta.json
index 268cd8d..5df42c5 100644
--- a/assets/components/widgets/directorSuggestions/directorSuggestions.meta.json
+++ b/assets/components/widgets/directorSuggestions/directorSuggestions.meta.json
@@ -3,7 +3,7 @@
 	"elementName": "DirectorSuggestions",
 	"name": "Director suggestions",
 	"keepOnSessionChange": true,
-	"activeInSessions": ["Practice", "Qualifying", "Race", "Warmup"],
+	"activeInSessions": [],
 	"defaultActive": false,
 	"translationLabel": "directorSuggestionsLabel",
 	"translationDescription": "directorSuggestionsDescription"
diff --git a/assets/components/widgets/driverOfTheDay/driverOfTheDay.flat.less b/assets/components/widgets/driverOfTheDay/driverOfTheDay.flat.less
index 9fc02a6..183a089 100644
--- a/assets/components/widgets/driverOfTheDay/driverOfTheDay.flat.less
+++ b/assets/components/widgets/driverOfTheDay/driverOfTheDay.flat.less
@@ -1,36 +1,31 @@
 @import '../theme/z';
 
 .driverOfTheDayAlert {
-  font-size: @fontSize * 1.1;
-  font-family: Oswald;
+  font-size: @fontSize;
+  font-family: Formula1-Regular;
   position: fixed;
-  bottom: 14em;
+  bottom: 15em;
   left: 50%;
   -webkit-transform: translate(-50%, 0);
   text-align: center;
-   
-	text-transform: uppercase;
-	min-height: 1em;
-	width: 14em;
-	line-height: 1.7em;
-	display: inline-block;
-   
-
+  text-transform: uppercase;
+  min-height: 1em;
+  width: 25em;
+  line-height: 1.7em;
+  display: inline-block;
+  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
+  background: @primaryAccentBackground;
+  border-left: 3px solid @primaryAccent;
   .dotdTitle {
-    -webkit-transform: skew(-10deg, 0deg);
-    border-top: 3px solid @CommentaryTitleBorderTop;
-    background: @CommentaryTitleBackgroundColor;
-    color: @CommentaryTitleText;
-    font-size: @fontSize * 1.1;
+    color: @primaryAccent;
+    font-size: @fontSize * 0.9;
     padding: 0.05em;
     top: 0.1em;
     z-index: 0;
   }
   .dotdName {
-    background: @CommentaryMessageBackground;
-    color: @CommentaryMessageText;
-    -webkit-transform: skew(-10deg, 0deg);
-    font-size: @fontSize * 1.1;
+    font-size: @fontSize * 1.5;
+    color: @secondaryAccent;
     padding: 0.15em;
     text-transform: capitalize;
     z-index: -1;
diff --git a/assets/components/widgets/driverOfTheDay/driverOfTheDay.jsx b/assets/components/widgets/driverOfTheDay/driverOfTheDay.jsx
index 012dafc..23ee929 100644
--- a/assets/components/widgets/driverOfTheDay/driverOfTheDay.jsx
+++ b/assets/components/widgets/driverOfTheDay/driverOfTheDay.jsx
@@ -13,8 +13,8 @@ UI.widgets.DriverOfTheDay = React.createClass({
 
 		return (
       <div className="driverOfTheDayAlert animated fadeIn">
-        <div className="dotdTitle">{UI.getStringTranslation("driverOfTheDayWidget", "driverOfTheDay")}</div>
   			<div className="dotdName">{UI.state.controllerOptions.options.driverOfTheDay.value ? UI.state.controllerOptions.options.driverOfTheDay.value : '-'}</div>
+        <div className="dotdTitle">{UI.getStringTranslation("driverOfTheDayWidget", "driverOfTheDay")}</div>
       </div>
 		);
 	}
diff --git a/assets/components/widgets/entriesList/entriesList.flat.less b/assets/components/widgets/entriesList/entriesList.flat.less
index 123f7b3..b616896 100644
--- a/assets/components/widgets/entriesList/entriesList.flat.less
+++ b/assets/components/widgets/entriesList/entriesList.flat.less
@@ -20,7 +20,7 @@
 	padding: 0.5em;
   background-color: green;
 	white-space: pre;
-	font-family: Oswald;
+	font-family: Formula1-Regular;
 	width: 70%;
   max-height: 20em;
 	filter: drop-shadow(9px 9px 9px rgba(0,0,0,1));
diff --git a/assets/components/widgets/eventInfo/eventInfo.flat.less b/assets/components/widgets/eventInfo/eventInfo.flat.less
index 1ac9506..2287e4f 100644
--- a/assets/components/widgets/eventInfo/eventInfo.flat.less
+++ b/assets/components/widgets/eventInfo/eventInfo.flat.less
@@ -7,11 +7,11 @@
 	right: 0;
 	bottom: 0;
 	z-index: 1;
-	background: rgba(0, 0, 0, 0.2);
+	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
 }
 
 .event-info {
-  background: @EventInfoPanelBackground;
+  background: @primaryAccentBackground;
 	font-size: @fontSize;
 	width: 50em;
 	position: fixed;
@@ -20,18 +20,17 @@
   transform: translate(-50%, 0);
 	z-index: -1;
 	padding: 0em;
-	color: #fff;
+	color: @secondaryAccent;
 	white-space: pre;
-	font-family: Oswald;
-	border-top: 0.3em solid @EventInfoBorderTop;
-	border-bottom: 0.3em solid @EventInfoBorderBottom;
-	 
+	font-family: Formula1-Regular;
 
   .serverName {
-    color: @EventInfoServerNameText;
-    text-align: center;
-    font-size: @fontSize * 1.5;
-    padding: 20px;
+    color: @secondaryAccent;
+    text-align: right;
+    font-size: @fontSize * 1.2;
+    padding: 1.5em;
+    	border-left: 0.3em solid @primaryAccent;
+
   }
   .trackImage {
 		img {
@@ -55,46 +54,25 @@
 			 }
 		 }
   }
-	.countryFlag {
-		text-align: center;
-		padding-top: 15px;
-		filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
-		img {
-			position: relative;
-			opacity: 1;
-			height: 50px;
-			width: 70px;
-		}
-	}
 	.serverTrackName {
-		-webkit-transform: skew(-10deg, 0deg);
-		color: @EventInfoServerTrackNameText;
+		color: @primaryAccent;
 		text-align: center;
 		font-size: @fontSize * 1.5;
-		padding: 15px;
-		border-bottom: 1px solid white;
+		padding-top: 1em;
 		width: 80%;
 		margin: auto;
-	}
-	.trackDescription {
-		color: @EventInfoDescriptionText;
-		display: block;
-		width: 100%;
-		font-size: @fontSize;
-		padding: 10px;
-		min-height: 100px;
-		white-space: pre-line;
-		text-align: center;
-		line-height: 1.5;
+		text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
 	}
   .weather {
+  	padding: 1em;
     .weatherIcons {
       display: flex;
-			font-size: @fontSize;
-			color: @EventInfoWeatherText;
+			font-size: @fontSize * 0.9;
+			color: @secondaryAccent;
       justify-content:space-around;
-      padding-top: 0.75em;
-			padding-bottom: 0.75em;
+      padding: 1em;
     }
   }
 
diff --git a/assets/components/widgets/eventInfo/eventInfo.jsx b/assets/components/widgets/eventInfo/eventInfo.jsx
index d2b0b90..faad3e4 100644
--- a/assets/components/widgets/eventInfo/eventInfo.jsx
+++ b/assets/components/widgets/eventInfo/eventInfo.jsx
@@ -51,7 +51,6 @@ UI.widgets.EventInfo = React.createClass({
     }
 
 		var trackLogo = r3eTracks.tracks[info.trackId] && r3eTracks.tracks[info.trackId].trackLogoUrl ? r3eTracks.tracks[info.trackId].trackLogoUrl : null;
-		var trackDescription = r3eTracks.tracks[info.trackId] && r3eTracks.tracks[info.trackId].description ? r3eTracks.tracks[info.trackId].description : null;
 
 		if (UI.state.sessionInfo.type === 'QUALIFYING' && UI.state.sessionInfo.timeLeft <= UI.state.controllerOptions.options.qualifyingResultsDisplayTime.value && UI.state.activeWidgets.Results.active) {
 			return null;
@@ -59,24 +58,24 @@ UI.widgets.EventInfo = React.createClass({
 
 		return (
       <div className="event-info-bg">
-  			<div className="event-info animated fadeIn">
-  				<div className="serverName">{info.serverName}</div>
+  			<div className="event-info">
+  				<div className="serverName">{info.trackName} {info.layoutName}</div>
           <div className="trackImage">
 						<img src={`/render/${info.trackId}/big/?type=track`} />
 						<div className="trackLogo">
 						{!window.settings.offline && <img src={trackLogo} />}
 						</div>
 					</div>
-					<div className="countryFlag">
-						<img src={'/img/flags/'+self.getCountryCode(info.trackId)+'.png'} />
-					</div>
-					<div className="serverTrackName">{info.trackName} {info.layoutName}</div>
+
+					<div className="serverTrackName">{info.serverName} {info.trackId}</div>
+
 					  <div className="weather">
               <div className="weatherIcons">
-              <div className="weatherInfoAmbientTempImage"><img height="40px" width="40px" src={'/img/weather/ambient-temp.png'} /> {ambientTemp}{temperatureMeasurement} {UI.getStringTranslation("eventInfoWidget", "air")}</div>
-              <div className="weatherInfoTrackTempImage"><img height="40px" width="40px" src={'/img/weather/track-temp.png'} /> {trackTemp}{temperatureMeasurement} {UI.getStringTranslation("eventInfoWidget", "track")}</div>
+              <div className="weatherInfoAmbientTempImage"><img height="40px" width="40px" src={'/img/weather/ambient-temp.png'} /> {UI.getStringTranslation("eventInfoWidget", "air")} {ambientTemp}{temperatureMeasurement}</div>
+              <div className="weatherInfoTrackTempImage"><img height="40px" width="40px" src={'/img/weather/track-temp.png'} /> {UI.getStringTranslation("eventInfoWidget", "track")} {trackTemp}{temperatureMeasurement}</div>
               <div className="weatherInfoWindSpeedImage"><img height="40px" width="40px" src={'/img/weather/wind.png'} /> {windSpeed} {speedMeasurement}</div>
-              <div className="weatherInfoConditionsImage"><img height="40px" width="40px" src={'/img/weather/conditions.png'} /> {info.weatherInfo.conditions}</div>
+              <div className="weatherInfoConditionsImage"><img height="40px" width="40px" src={'/img/weather/conditions.png'} /> {info.weatherInfo.conditions || 'Dry'}</div>
+              <div className="weatherInfoForecastImage"><img height="40px" width="40px" src={'/img/weather/forecast.png'} /> {info.weatherInfo.forecast || 'Forecast Dry'}</div>
               </div>
             </div>
   			</div>
diff --git a/assets/components/widgets/focusedDriver/focusedDriver.flat.less b/assets/components/widgets/focusedDriver/focusedDriver.flat.less
index 1cab991..9708b19 100644
--- a/assets/components/widgets/focusedDriver/focusedDriver.flat.less
+++ b/assets/components/widgets/focusedDriver/focusedDriver.flat.less
@@ -11,10 +11,11 @@
 			display: none;
 		}
 	}
-
+	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
 	text-align: center;
-	font-family: Oswald;
+	font-family: Formula1-Regular;
 	color: #fff;
+
 	.inner {
 		font-size: @fontSize;
 		height: 3.5em;
@@ -30,39 +31,51 @@
 	}
 	.bottom {
 	.extra-info {
-		height: 1em;
+		left: 25em;
+		height: 5em;
 		position: relative;
-		top: -0.5em;
+		top: -1.5em;
 		z-index: -1;
 		margin-top: 0em;
-		font-family: Oswald;
+		font-family: Formula1-Regular;
+		.currentLap {
+			background: @primaryAccentBackground;
+			color: #76FF03;
+			font-size: @fontSize * 1.1;
+			text-align: right;
+			padding: 0.5em;
+		}
 		ul {
 			margin: 0;
-			padding: 0.25em;
-			transform: skew(-10deg);
+			padding: 0.05em;
+			height: 3em;
 			li {
+				background: @primaryAccentBackground;
 				float: left;
-				background: @DriverInfoSplitTimesBackground;
 				padding: 0.5em;
-				margin-right: 0.5em;
-				border: 0.1em;
 				color: white;
 				position: relative;
-				min-width: 8em;
-				font-size: @fontSize * 1;
+				min-width: 10em;
+				font-size: @fontSize * 0.9;
 				&.active {
-					top: 6em;
+					color: white;
 				}
 				&.finished {
-					color: rgba(255, 255, 255, 1);
+					animation: none;
+					color: white;
 					&.personal-best {
-						background: @DriverInfoPersonalBestSplitBackground;
-						color: @DriverInfoPersonalBestSplitText;
+						animation: none;
+						color: #76FF03;
 					}
 					&.global-best {
-						background: @DriverInfoGlobalBestSplitBackground;
-						color: @DriverInfoGlobalBestSplitText;
+						animation: none;
+						color: #fb00ff;
 					}
+					@-webkit-keyframes sectorGlow { 
+				    0% { background-color: #76FF03; }
+				    50% { background-color: yellow; }
+				    100% { background-color: #76FF03; } 
+				  } 
 				}
 			}
 		}
@@ -77,134 +90,123 @@
 	.ptpRemaining, .best-time, .positionInClass {
 		vertical-align: top;
 		display: inline-block;
+		border-left: 2px solid;
 	}
 	.top {
 		position: relative;
-		left: -5.2em;
 		height: 1.75em;
 		bottom: -0.25em;
 		z-index: -2;
 		.ptpRemaining {
-			transform: skew(-10deg);
 			line-height: 0.5em;
-			background: rgba(66, 165, 245, 0.7);
+			background: @primaryAccentBackground;
 			padding: 0.5em 0.5em;
-			color: white;
-			width: 4em;
+			color: cyan;
+			width: 5em;
 			z-index: 0;
 			margin-bottom: 0px;
 			height: 1.5em;
 		}
 		.best-time {
-			transform: skew(-15deg);
 			line-height: 0.5em;
-			background: @DriverInfoBestTimeBackground;
+			background: @primaryAccentBackground;
 			padding: 0.5em 0.5em;
-			color: @DriverInfoBestTimeText;
-			width: 6em;
+			color: #76FF03;
+			width: 7em;
 			z-index: 0;
 			margin-bottom: 0px;
 			height: 1.5em;
 		}
 		.positionInClass {
-			transform: skew(-10deg);
 			line-height: 0.5em;
-			background: @DriverInfoPositionClassBackground;
+			background: @primaryAccentBackground;
 			padding: 0.5em 0.5em;
-			color: @DriverInfoPositionClassText;
+			color: black;
 			width: 3em;
 			z-index: 0;
 			margin-bottom: 0px;
 			height: 1.5em;
 		}
 		.fastest {
-			color: white;
-			background: @DriverInfoGlobalBestSplitBackground;
+			color: #fb00ff;
+			background: @primaryAccentBackground;
 		}
 	}
 	.main {
 	.positionContainer {
-		background: @DriverInfoPositionBackground;
-		color: @DriverInfoPositionText;
-		width: 5em;
+		background: @secondaryAccentBackground;
+		color: @quaternaryAccent;
+		width: 5.5em;
+		left: 0.5em;
     position: relative;
 		padding-left: 0.1em;
 		text-align: center;
 		padding-right: 0.5em;
 		line-height: 3.7em;
-    transform: skew(-10deg);
-		border-top: 0.1em solid @DriverInfoPositionBorder;
-    border-top-left-radius: 10px;
+		border-left: 0.1em solid @secondaryAccentBackground;
 		.position {
-			font-size: @fontSize * 3.5;
-      font-family: Oswald;
-      transform: skew(+10deg);
+			font-size: @fontSize * 3.3;
 		}
 	}
 	.driverInfoDetails {
-		background: @DriverInfoNameBackground;
+		background: @primaryAccentBackground;
 		text-transform: uppercase;
-		padding: 0px 1em;
-		min-width: 19em;
-		border-bottom: 0.1em solid @DriverInfoNameBorder;
+		border-bottom: 0.1em solid @secondaryAccentBackground;
     transform: skew(-10deg);
-		.name {
-			line-height: 2em;
-			color: @DriverInfoNameText;
-			font-size: @fontSize * 1.3;
-      transform: skew(+10deg);
+    width: 24em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: right;
+		.firstName {
+			line-height: 0.5em;
+			color: @secondaryAccent;
+			font-size: @fontSize  * 1.1;
+			transform: skew(+10deg);
+			display: inline-block;
+		}
+		.lastName {
+			padding: 0.2em;
+			line-height: 0.5em;
+			color: @primaryAccent;
+			font-size: @fontSize * 1.5;
+			transform: skew(+10deg);
+			display: inline-block;
 		}
     .teamEventName {
       margin-top: 0.5em;
       line-height: 2em;
-      color: @DriverInfoNameText;
+      color: @primaryAccent;
       font-size: @fontSize * 1.3;
-      transform: skew(+10deg);
     }
 		.team {
-			font-size: @fontSize * 0.95;
-			line-height: 0.7em;
+			font-size: @fontSize * 0.9;
+			line-height: 0em;
 			position: relative;
-			color: @DriverInfoTeamNameText;
-      transform: skew(+10deg);
+			color: @secondaryAccent;
 			text-transform: uppercase;
+			text-align: right;
 		}
 	}
 	.vehicle {
 		width: 1.75em;
 		position: relative;
-		left: -11.5em;
+		left: -11em;
 		img {
 			position: absolute;
-			top: -4em;
-			left: 1.5em;
-			height: 5.5em;
-		}
-	}
-	.tyre {
-		background: @DriverInfoTyreBackground;
-		width: 4em;
-		position: relative;
-		border-bottom: 0.1em solid @DriverInfoTyreBorder;
-    left: -0em;
-    transform: skew(-10deg);
-    border-bottom-right-radius: 10px;
-		img {
-			position: absolute;
-      transform: skew(10deg);
-			top: 0.5em;
-			left: 0.5em;
-			height: 3em;
+			top: -4.7em;
+			left: -0.5em;
+			height: 6.5em;
 		}
 	}
 	.manufacturer {
-		background: @DriverInfoManufacturerBackground;
+		background: @primaryAccentBackground;
 		width: 4em;
 		position: relative;
     left: 0em;
-		border-bottom: 0.1em solid @DriverInfoManufacturerBorder;
+		border-bottom: 0.1em solid @secondaryAccentBackground;
     transform: skew(-10deg);
-    border-bottom-right-radius: 10px;
+    border-bottom-right-radius: 5px;
 		img {
 			position: absolute;
       transform: skew(10deg);
@@ -215,20 +217,27 @@
 	}
 	.flag-container {
 		width: 3em;
+		left: 0.5em;
 		position: relative;
-		background: @DriverInfoFlagBackground;
-		border-bottom: 0.1em solid @DriverInfoFlagBorder;
-		transform: skew(-10deg);
+		background: @primaryAccentBackground;
+		border-bottom: 0.1em solid @secondaryAccentBackground;
 		margin: 1;
     z-index: 5;
 		.flag {
-			background: @backgroundDark;
+			background: @primaryAccentBackground;
 			position: absolute;
 			display: block;
-			left: -0.4em;
-			width: 4.5em;
-			height: 4em;
-      filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.9));
+			top: 0.7em;
+			width: 3.5em;
+			left: 0.5em;
+		}
+		.avatar {
+			background: @primaryAccentBackground;
+			position: absolute;
+			display: block;
+			top: 0.15em;
+			width: 3.5em;
+			left: 0.5em;
 		}
 	}
 }
@@ -237,58 +246,62 @@
 .assists {
   .params {
   position: relative;
-  height: 4em;
-  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
+  height: 3.9em;
+  background: @primaryAccentBackground;
+  top: -5em;
   .gear {
-    font-size: @fontSize * 4;
-    line-height: 0.95em;
+    font-size: @fontSize * 3.5;
+    line-height: 1.15em;
+    color: @secondaryAccentBackground;
   }
   .rpm {
-    font-size: @fontSize * 1.5;
-    line-height: 1.2em;
+  	background: red;
+    font-size: @fontSize;
+    line-height: 1.7em;
     text-align: right;
-    padding-right: 0.2em;
+    padding-right: 0.4em;
+    color: white;
   }
   .speed {
-    font-size: @fontSize * 1.5;
-    line-height: 1.2em;
+  	background: #76FF03;
+  	color: black;
+    font-size: @fontSize;
+    line-height: 1.7em;
     text-align: right;
-    padding-right: 0.2em;
+    padding-right: 0.4em;
   }
   .gearContainer {
-  	background: linear-gradient(135deg, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.9) 90%);;
+  	background: @primaryAccentBackground;
     color: #212121;
   	position: absolute;
   	bottom: @fontSize*8.9;
   	right: 12em;
   	height: 4em;
-    width: 3em;
-  	transform: skew(-10deg);
+    width: 3.5em;
+    border-left: 0.1em solid @secondaryAccentBackground;;
   }
   .rpmContainer {
-    background: linear-gradient(135deg, rgba(226, 29, 56, 0.8) 20%, rgba(226, 29, 56, 0.3) 80%);
+    padding: 0.3em;
     position: absolute;
     bottom: @fontSize*11;
-    right: 4.3em;
-    height: 1.9em;
-    width: 7em;
-    transform: skew(-10deg);
+    right: -2em;
+    height: 2.1em;
+    width: 14em;
   }
   .speedContainer {
-    background: linear-gradient(135deg, rgba(0, 200, 83, 0.8) 20%, rgba(0, 200, 83, 0.3) 80%);
+  	padding: 0.3em;
     position: absolute;
     bottom: @fontSize*8.9;
-    right: 4.7em;
-    height: 1.9em;
-    width: 7em;
-    transform: skew(-10deg);
+    right: -2em;
+    height: 2em;
+    width: 14em;
   }
 }
 .drs {
 position: relative;
 height: 5em;
 .icon {
-	background: @DriverInfoDrsActiveBackground;
+	background: #76FF03;
 	position: absolute;
 	top: -5.5em;
 	left: -1em;
@@ -296,10 +309,9 @@ height: 5em;
 	line-height: 2.5em;
 	width: 0;
 	font-size: 0;
-	transform: skew(-10deg);
 }
 .text {
-	background: @DriverInfoDrsRemainingBackground;
+	background: @primaryAccentBackground;
 	position: absolute;
 	top: -3em;
 	left: -1em;
@@ -307,30 +319,35 @@ height: 5em;
 	line-height: 2.5em;
 	width:0;
 	font-size: 0;
-	transform: skew(-10deg);
 }
 	&.active {
 		.icon {
-			background: @DriverInfoDrsActiveBackground;
+			background: #76FF03;
+			color: black;
 			position: absolute;
-			top: -5.5em;
-			left: -1em;
+			top: -10em;
+			left: 5em;
 			height: 2.5em;
 			line-height: 2.5em;
-			width: 7.5em;
+			width: 8.5em;
 			font-size: @fontSize;
-			transform: skew(-10deg);
-		}
+			animation: drsGlow 1s infinite;
+	}
+
+  @-webkit-keyframes drsGlow { 
+    0% { background-color:#76FF03; }
+    50% { background-color:white; }
+    100% { background-color:#76FF03; } 
+  } 
 		.text {
-			background: @DriverInfoDrsRemainingBackground;
+			background: @primaryAccentBackground;
 			position: absolute;
-			top: -3em;
-			left: -1em;
+			top: -7.5em;
+			left: 5em;
 			height: 2.5em;
 			line-height: 2.5em;
-			width: 7.5em;
+			width: 8.5em;
 			font-size: @fontSize;
-			transform: skew(-10deg);
 		}
 	}
 }
@@ -338,49 +355,53 @@ height: 5em;
 	position: relative;
 	height: 5em;
 	.icon {
-		background: rgba(66, 165, 245, 0.7);
+		background: @primaryAccentBackground;
 		position: absolute;
 		top: -5.5em;
-		left: -1em;
+		left: 5em;
 		height: 2.5em;
 		line-height: 2.5em;
 		width: 0;
 		font-size: 0;
-		transform: skew(-10deg);
 	}
 	.text {
-		background: @backgroundDark;
+		background: @primaryAccentBackground;
 		position: absolute;
 		top: -3em;
-		left: -1em;
+		left: 5em;
 		height: 2.5em;
 		line-height: 2.5em;
 		width:0;
 		font-size: 0;
-		transform: skew(-10deg);
 	}
 	&.active {
 		.icon {
-			background: rgba(66, 165, 245, 0.7);
+			background: #00b8ff;
+			color: black;
 			position: absolute;
-			top: -5.5em;
-			left: -1em;
+			top: -5em;
+			left: 5em;
 			height: 2.5em;
 			line-height: 2.5em;
 			width: 7.5em;
 			font-size: @fontSize;
-			transform: skew(-10deg);
-		}
+			animation: ptpGlow 1s infinite;
+	}
+
+  @-webkit-keyframes ptpGlow { 
+    0% { background-color:#00b8ff; }
+    50% { background-color:white; }
+    100% { background-color:#00b8ff; } 
+  } 
 		.text {
-			background: @backgroundDark;
+			background: @primaryAccentBackground;
 			position: absolute;
-			top: -3em;
-			left: -1em;
+			top: -2.5em;
+			left: 5em;
 			height: 2.5em;
 			line-height: 2.5em;
 			width: 7.5em;
 			font-size: @fontSize;
-			transform: skew(-10deg);
 		}
 	}
 }
@@ -388,7 +409,7 @@ height: 5em;
 .focused-driver-info {
 	.driverInfoFocusedDriverFlat;
 	position: fixed;
-	bottom: @fontSize*10;
+	bottom: @fontSize*9;
 	left: 0;
 	right: 0;
 }
diff --git a/assets/components/widgets/focusedDriver/focusedDriver.jsx b/assets/components/widgets/focusedDriver/focusedDriver.jsx
index b83bf8e..e564f64 100644
--- a/assets/components/widgets/focusedDriver/focusedDriver.jsx
+++ b/assets/components/widgets/focusedDriver/focusedDriver.jsx
@@ -142,10 +142,17 @@ UI.widgets.FocusedDriver = React.createClass({
 		}
 		return null;
 	},
-	fixName: function(str) {
+	getFirstName: function(str) {
 		str = UI.fixName(str);
 		var parts = str.split(' ');
 		parts[parts.length-1] = parts[parts.length-1].toUpperCase();
+		return parts[0];
+	},
+	getLastName: function(str) {
+		str = UI.fixName(str);
+		var parts = str.split(' ');
+		parts[parts.length-1] = parts[parts.length-1].toUpperCase();
+		parts.shift();
 		return parts.join(' ');
 	},
 	getSectorItem: function(name) {
@@ -180,11 +187,11 @@ UI.widgets.FocusedDriver = React.createClass({
 		}
 		if (sector.finished && sector.time-globalBest !== 0) {
 			return <li className={classes}>
-				{sectorMap[name] + " - " + UI.formatTime(sector.time, {ignoreSign: true})} ({UI.formatTime(sector.time-globalBest)})
+				{UI.formatTime(sector.time, {ignoreSign: true})} ({UI.formatTime(sector.time-globalBest)})
 			</li>
 		} else {
 			return <li className={classes}>
-				{sectorMap[name] + " - " + UI.formatTime(sector.time, {ignoreSign: true})}
+				{UI.formatTime(sector.time, {ignoreSign: true})}
 			</li>;
 		}
 	},
@@ -200,17 +207,22 @@ UI.widgets.FocusedDriver = React.createClass({
 			</div>
 		}
 	},
-	getClassPosition: function(classId) {
+	getClassPosition: function(performanceIndex) {
 		var self = this;
 		var classColour = "rgba(38, 50, 56, 0.8)";
 		var driverInfo = self.state.driverInfo;
 
-		if (UI.getClassColour(classId) != null) {
-			classColour = UI.getClassColour(classId);
+		if (UI.getClassColour(performanceIndex) != null) {
+
+	    var b = -performanceIndex * 11000 & 0xFF,
+        g = (-performanceIndex * 11000 & 0xFF00) >>> 8,
+        r = (-performanceIndex * 111000 & 0xFF0000) >>> 16,
+        a = ( (-performanceIndex * 10000 & 0xFF000000) >>> 24 ) / 255 ;
+	    classColour = "rgba(" + [r, g, b, a].join(",") + ")";
 		}
 
 		const divStyle = {
-				background: classColour
+				color: classColour
 		};
 
 		return <div className="positionInClass" style={divStyle}>P{driverInfo.scoreInfo.positionClass}</div>
@@ -237,14 +249,6 @@ UI.widgets.FocusedDriver = React.createClass({
 
 		return teamName;
 	},
-	getPtpState: function() {
-		var self = this;
-		if (self.state.pushToPassInfo.active) {
-			return <div className="icon animated infinite flash">{UI.getStringTranslation("focusedDriverWidget", "ptp")}</div>
-		} else {
-			return <div className="icon">{UI.getStringTranslation("focusedDriverWidget", "ptp")}</div>
-		}
-	},
 	getPersonalBestTime: function(driverInfo) {
 		if(driverInfo.scoreInfo.bestLapInfo.sector3 !== -1) {
 			var isFastestInQuali = (UI.state.sessionInfo.type === 'QUALIFYING' || UI.state.sessionInfo.type === 'PRACTICE') && driverInfo.scoreInfo.positionOverall === 1;
@@ -283,18 +287,27 @@ UI.widgets.FocusedDriver = React.createClass({
 			return null;
 		}
 
+		const gearBackground = {width: self.state.vehicleInfo.rpm/90, minWidth: '7.5em'};
+		const speedBackground = {width: self.state.vehicleInfo.speed/1.8, minWidth: '7.5em'};
+
+
 		return (
 			<div className={focusedDriverClasses} key={self.state.driverInfo.portalId}>
-				<div className="inner animated fadeIn delay-1s">
+
+				<div className="bottom animated fadeInUp delay-5s">
+					{self.getExtraInfo()}
+				</div>
+
+				<div className="inner animated fadeInUp delay-3s">
 					<div className="top">
 						{self.state.pushToPassInfo.allowed && UI.state.sessionInfo.type.match(/^race/i) ?
-							<div className="ptpRemaining">{UI.getStringTranslation("focusedDriverWidget", "ptp")}: {self.state.pushToPassInfo.amountLeft}</div>
+							<div className="ptpRemaining">{self.state.pushToPassInfo.amountLeft} {UI.getStringTranslation("focusedDriverWidget", "ptp")}</div>
 							:
 							null
 						}
 						{self.getPersonalBestTime(driverInfo)}
 						{ UI.state.controllerOptions.options.multiclass.value === "true" ?
-							self.getClassPosition(driverInfo.classId)
+							self.getClassPosition(driverInfo.performanceIndex)
 						:
 							null
 						}
@@ -303,7 +316,7 @@ UI.widgets.FocusedDriver = React.createClass({
 					<div className="positionContainer"><div className="position">{driverInfo.scoreInfo.positionOverall}</div></div>
 					<div className="flag-container">
 					{window.settings.offline === true || UI.state.controllerOptions.options.showPortalAvatar.value === "true" ?
-						<img className="flag" src={UI.getUserInfo(driverInfo.portalId).avatar} />
+						<img className="avatar" src={UI.getUserInfo(driverInfo.portalId).avatar} />
 					:
 						<img className="flag" src={'/img/flags/'+UI.getUserInfo(driverInfo.portalId).country+'.png'} />
 					}
@@ -312,19 +325,16 @@ UI.widgets.FocusedDriver = React.createClass({
 					  { window.settings.teamEvent ?
 							<div className="teamEventName">{driverInfo.name.substr(driverInfo.name.indexOf(" ") + 1).toUpperCase()}</div>
 						:
-							<div className="name">{self.fixName(driverInfo.name)}</div>
+							<div>
+								<div className="firstName">{self.getFirstName(driverInfo.name)}</div>
+								<div className="lastName">{self.getLastName(driverInfo.name)}</div>
+							</div>
 						}
 						<div className="team">{self.getTeamName(driverInfo.teamId, driverInfo.portalId)}</div>
 					</div>
-					{UI.state.controllerOptions.options.showTyreCompound.value === "true" && r3eTyreDB.classes[driverInfo.classId] != null ?
-						<div className="tyre">
-							<img src={'/img/tyres/'+pitInfo.tyreType+'.png'} />
-						</div>
-							:
 							<div className="manufacturer">
-								<img src={'/render/'+driverInfo.manufacturerId+'/small/?type=manufacturer'}/>
+								<img src={'/img/manufacturers/'+driverInfo.manufacturerId+'.png'} />
 							</div>
-						}
 						{UI.state.controllerOptions.options.showLiveryPreview.value === "true" ?
 						<div className="vehicle">
 							<img src={`/render/${driverInfo.liveryId}/small/?type=livery`} />
@@ -336,29 +346,36 @@ UI.widgets.FocusedDriver = React.createClass({
 
 					<div className="assists">
 						{
-							self.state.pushToPassInfo.allowed && false ?
-							<div className={cx({'ptp': true, 'active': self.state.pushToPassInfo.active && UI.state.sessionInfo.type.match(/^race/i)})}>
-								{self.getPtpState()}
-								{ UI.state.sessionInfo.type === 'PRACTICE' ?
-									<div className="text">{UI.getStringTranslation("focusedDriverWidget", "remaining")} - ∞</div>
+							true ?
+							<div className={cx({'ptp': true, 'active': self.state.pushToPassInfo.active})}>
+								<div className="icon">{UI.getStringTranslation("focusedDriverWidget", "ptp")}</div>
+
+								{ !UI.state.sessionInfo.type.match(/^race/i) ?
+									null
 								:
-									<div className="text">{UI.getStringTranslation("focusedDriverWidget", "remaining")} - {self.state.pushToPassInfo.amountLeft}</div>
+									<div className={cx({'text': true, 'active': self.state.pushToPassInfo.active})}>{self.state.pushToPassInfo.amountLeft} {UI.getStringTranslation("focusedDriverWidget", "remaining")}</div>
 								}
 							</div>
 							:
 							null
 						}
 
-						<div className={cx({'drs': true, 'active': self.state.vehicleInfo.drsEnabled && UI.state.sessionInfo.type.match(/^race/i)})}>
-							<div className={cx({'icon animated infinite flash': true, 'active': self.state.vehicleInfo.drsEnabled})}>{UI.getStringTranslation("focusedDriverWidget", "drs")}</div>
-							<div className={cx({'text': true, 'active': self.state.vehicleInfo.drsEnabled})}>{UI.getStringTranslation("focusedDriverWidget", "remaining")} - {self.state.vehicleInfo.drsLeft}</div>
+						<div className={cx({'drs': true, 'active': self.state.vehicleInfo.drsEnabled})}>
+							<div className={cx({'icon': true})}>{UI.getStringTranslation("focusedDriverWidget", "drs")}</div>
+								{ !UI.state.sessionInfo.type.match(/^race/i) ?
+									null
+								:
+									<div className={cx({'text': true, 'active': self.state.vehicleInfo.drsEnabled})}>{self.state.vehicleInfo.drsLeft} {UI.getStringTranslation("focusedDriverWidget", "remaining")}</div>
+								}
+							
 						</div>
 
+								
 						{UI.state.controllerOptions.options.showVehicleInfo.value === "true" ?
-							<div className={cx({'params': self.state.vehicleInfo.speed > 0})}>
+							<div className={cx({'params': true})}>
 								<div className={cx({'gearContainer': true})}><div className="gear">{self.state.vehicleInfo.gear}</div></div>
-								<div className={cx({'rpmContainer': true})}><div className="rpm">{self.state.vehicleInfo.rpm} RPM</div></div>
-								<div className={cx({'speedContainer': true})}><div className="speed">{self.state.vehicleInfo.speed} KM/H</div></div>
+								<div className={cx({'rpmContainer': true})}><div className={cx({'rpm': true})} style={gearBackground}>{self.state.vehicleInfo.rpm} RPM</div></div>
+								<div className={cx({'speedContainer': true})}><div className={cx({'speed': true})} style={speedBackground}>{self.state.vehicleInfo.speed} KM/H</div></div>
 							</div>
 							:
 							null
@@ -366,9 +383,7 @@ UI.widgets.FocusedDriver = React.createClass({
 					</div>
 				</div>
 
-				<div className="bottom">
-					{self.getExtraInfo()}
-				</div>
+
 
 			</div>
 		);
diff --git a/assets/components/widgets/logoOverlay/logoOverlay.flat.less b/assets/components/widgets/logoOverlay/logoOverlay.flat.less
index 982c729..c806e13 100644
--- a/assets/components/widgets/logoOverlay/logoOverlay.flat.less
+++ b/assets/components/widgets/logoOverlay/logoOverlay.flat.less
@@ -3,10 +3,11 @@
 .logo-overlay {
 	font-size: @fontSize;
 	position: absolute;
-	top: 4em;
+	top: 3em;
 	right: 5em;
 	z-index: 5;
-	 
+	filter: contrast(180%);
+	 filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.9));
 	.onCreation(opacity, 0, 1, 0.5s);
 	img {
 		width: 12em;
diff --git a/assets/components/widgets/multiclassStandings/multiclassStandings.flat.less b/assets/components/widgets/multiclassStandings/multiclassStandings.flat.less
index 2552a12..8343071 100644
--- a/assets/components/widgets/multiclassStandings/multiclassStandings.flat.less
+++ b/assets/components/widgets/multiclassStandings/multiclassStandings.flat.less
@@ -2,11 +2,12 @@
 
 .sponsorLogo {
 	position: fixed;
-	top: 5em;
+	top: 4em;
 	left: 6.5em;
-	max-height: 4.7em;
+	max-height: 4.9em;
 	max-width: 24em;
 	content: @sponsorLogo;
+	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
 }
 .multiclass-standings {
 	&.hide-flags {
@@ -14,7 +15,7 @@
 			display: none;
 		}
 	}
-
+	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
 	position: fixed;
 	top: 10em;
 	color: #fff;
@@ -22,11 +23,11 @@
 	.onCreation(-webkit-transform, translate(-10em, 0), translate(0, 0), 0.1s);
 	.driver {
 		font-size: @fontSize;
-		.onCreation(opacity, 0, 1, 0.2s);
 		position: absolute;
 		top: 0;
 		height: 1.7em;
 		z-index: 1;
+		background: @primaryAccentBackground;
 		-webkit-transition: -webkit-transform 0.3s linear, left 0.1s linear;
 		white-space: nowrap;
 
@@ -34,7 +35,6 @@
 			height: 1.6em;
 			position: relative;
 			z-index: 1;
-			transform: skew(-15deg, 0deg);
 			& > div {
 				vertical-align: top;
 				height: 100%;
@@ -46,100 +46,125 @@
 			display: inline-block;
 			font-size: 1em;
 			text-align: center;
-			width: 0.8em;
-			height: 80%;
-			font-family: Oswald;
-			.position {
-				transform: skew(+15deg, 0deg);
-			}
+			width: 0.4em;
+			margin-right: 0.3em;
+			height: 90%;
+			font-family: Formula1-Regular;
 		}
 		.positionContainer {
 			margin: 0;
 			font-size: @fontSize;
-			background: @StandingsPositionBackground;
+			background: @secondaryAccentBackground;
 			display: inline-block;
-			color: @StandingsPositionText;
+			color: @quaternaryAccent;
 			font-size: 1em;
 			text-align: center;
 			width: 2em;
 			height: 80%;
-			font-family: Oswald;
-			border-top-left-radius: 10px;
-			.position {
-				transform: skew(+15deg, 0deg);
-			}
+			font-family: Formula1-Regular;
 		}
 		.flagContainer {
-			background: @StandingsDriverNameClassColour;
 			display: inline-block;
-			width: 2em;
+			position: absolute;
+			top: 0.2em;
+			width: 1.5em;
 			height: 2em;
 			z-index: 1;
 			.standingsFlag {
-				height: 100%;
-				padding: 0.05em;
+				height: 85%;
 				img {
-					height: 100%;
+					height: 85%;
 				}
 			}
 		}
 		.manufacturerContainer {
-			background: @StandingsManufacturerBackground;
 			display: inline-block;
-			width: 2em;
-			height: 2em;
+			width: 1.7em;
+			height: 3em;
 			z-index: 1;
+			top: 0.2em;
 			.manufacturerFlag {
 				position: relative;
-				left: 0.2em;
-				height: 100%;
+				left: 0.3em;
+				top: 0.2em;
+				height: 90%;
+				img {
+					height: 90%;
+				}
+			}
+			.standingsFlag {
+				position: relative;
+				top: 0.2em;
+				height: 90%;
+				left: 0.4em;
 				img {
-					transform: skew(+15deg, 0deg);
-					height: 100%;
+					height: 85%;
 				}
 			}
+			.positionsChange {
+				position: relative;
+				height: 90%;
+				left: 0.5em;
+				text-align: center;
+			   .gained {
+			  	color: cyan;
+			   }
+			   .level {
+			  	color: cyan;
+			   }
+			   .lost {
+			  	color: red;
+			   }
+			}
 		}
 		.nameContainer {
-			font-size: @fontSize;
-			background-color: rgb(183, 28, 28);
-			font-family: Oswald;
+			font-size: @fontSize * 0.85;
+			font-family: Formula1-Regular;
 			display: inline-block;
-			color: @StandingsDriverNameText;
-			background: @StandingsDriverNameClassColour;
-			width: 4em;
-			padding-left: 0.5em;
+			color: white;
+			background: @primaryAccentBackground;
+			width: 6.5em;
+			padding-top: 0.2em;
+			padding-left: 1.5em;
 			padding-right: 0.5em;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			overflow: hidden;
-			line-height: inherit;
-			text-align: center;
+			line-height: 1em;
 			z-index: 1;
-			.name {
-				transform: skew(+15deg, 0deg);
+			.firstname {
+				font-size: @fontSize * 0.8;
+				color: white;
+				display: inline-block;
+			}
+			.surname {
+				padding-left: 0.3em;
+				color: @primaryAccent;
+				display: inline-block;
 			}
 		}
 		.meta-info-container {
-			font-size: @fontSize;
-			background: @StandingsTimingBackground;
-			color: @StandingsTimingText;
-			font-family: Oswald;
+			font-size: @fontSize * 0.8;
+			background: @primaryAccentBackground;
+			color: white;
+			font-family: Formula1-Regular;
+			padding-top: 0.3em;
 			display: inline-block;
 			height: 1.2em;
 			text-align: center;
-			line-height: 1em;
-			min-width: 5em;
+			line-height: 1.2em;
+			min-width: 6.5em;
 			z-index: -1;
 			.onCreation(-webkit-transform, translate(-100%, 0), translate(0, 0), 0.1s);
-			border-bottom-right-radius: 10px;
-			.meta-info {
-				transform: skew(+15deg, 0deg);
-			}
 			.fastest {
-				color: white;
-				background: @DriverInfoGlobalBestSplitBackground;
-				border-bottom-right-radius: 10px;
-				transform: skew(0deg, 0deg);
+				color: #fb00ff;
+			}
+			.yellow {
+				background: yellow;
+				color: black;
+			}
+			.grey {
+				color: grey;
 			}
 		}
 
@@ -147,15 +172,16 @@
 			.onCreation(-webkit-transform, translate(-100%, 0), translate(0, 0), 0.5s);
 			margin: 0;
 			display: inline-block;
-			width: 1.5em;
+			width: 2em;
 			text-align: center;
+			background: @primaryAccentBackground;
 			.pitted {
-				font-size: @fontSize * 1.2;
-				background: @StandingsTimingBackgroundPitted;
+				font-size: @fontSize * 0.8;
+				color: #76FF03;
 			}
 			.unpitted {
-				font-size: @fontSize * 1.2;
-				background: @StandingsTimingBackgroundUnpitted;
+				font-size: @fontSize * 0.8;
+				color: #F44336;
 			}
 		}
 	}
diff --git a/assets/components/widgets/multiclassStandings/multiclassStandings.jsx b/assets/components/widgets/multiclassStandings/multiclassStandings.jsx
index b3608ec..a1ecfb1 100644
--- a/assets/components/widgets/multiclassStandings/multiclassStandings.jsx
+++ b/assets/components/widgets/multiclassStandings/multiclassStandings.jsx
@@ -4,15 +4,50 @@ UI.widgets.MulticlassStandings = React.createClass({
 
 		io.emit('setState', UI.state);
 
-		function updateInfo() {
-			UI.batch({
-				'pitInfo': function(done) {
-					r3e.getPitInfo({
-					'slotId': UI.state.focusedSlot
-					}, done)
-				},
-				'driversInfo': r3e.getDriversInfo
-			}, self.setState.bind(self));
+function updateInfo() {
+			r3e.getDriversInfo(function(data) {
+				var drivers = [];
+
+				data.driversInfo.forEach(function(driver) {
+						return drivers.push(driver);
+				});
+
+				var jobs = [];
+				drivers.forEach(function(driver) {
+					jobs.push(function(done) {
+						UI.batch({
+							'vehicleInfo': function(done) {
+								r3e.getVehicleInfo({
+									'slotId': driver.slotId
+								}, done);
+							},
+				              'pitInfo': function(done) {
+				                  r3e.getPitInfo({
+				                      'slotId': driver.slotId
+				                  }, done)
+				              },
+							'extendedInfo': function(done) {
+								r3e.getExtendedInfo({
+									'slotId': driver.slotId
+								}, done);
+							}
+						}, function(data) {
+							driver.vehicleInfo = data.vehicleInfo;
+							driver.extendedInfo = data.extendedInfo;
+							driver.pitInfo = data.pitInfo;
+							done(driver);
+						});
+
+					});
+				});
+				UI.batch(jobs, function(data) {
+					self.setState({
+						'driversInfo': {
+							'driversInfo': data
+						}
+					});
+				});
+			});
 		}
 		updateInfo();
 
@@ -54,21 +89,34 @@ UI.widgets.MulticlassStandings = React.createClass({
 	formatTime: UI.formatTime,
 	getMetaInfo: function(driver, sortedByPosition) {
 		var self = this;
+
+		const statusNames = [
+		    'NONE',
+		    'FINISHED',
+		    'DNF',
+		    'DNQ',
+		    'DNS',
+		    'DQ',
+		];
+
 		// Race
 		if (UI.state.sessionInfo.type.match(/^race/i)) {
 			// Leader should show lap count
 			if (driver.scoreInfo.positionOverall === 1) {
-					return <div className="meta-info">Lap {driver.scoreInfo.laps + 1}</div>;
-			} else {
+					return <div className={cx({'meta-info': true, 'yellow': driver.scoreInfo.flagInfo.causedYellow})}>Lap {driver.scoreInfo.laps + 1}</div>;
+			} else if (driver.scoreInfo.status > 1) {
+		    		return <div className={cx({'meta-info': true, 'grey': true})}>{statusNames[driver.scoreInfo.status]}</div>
+			}
+			else {
 				if (UI.state.controllerOptions.options.showRelativeStandingsTiming.value === "true") {
 					if (driver.scoreInfo.lapDiff > 0) {
-						return <div className="meta-info">+{driver.scoreInfo.lapDiff} Lap(s)</div>
+						return <div className={cx({'meta-info': true, 'yellow': driver.scoreInfo.flagInfo.causedYellow})}>+{driver.scoreInfo.lapDiff} Lap(s)</div>
 					} else {
-						return <div className="meta-info">{self.formatTime(driver.scoreInfo.timeDiff)}</div>
+						return <div className={cx({'meta-info': true, 'yellow': driver.scoreInfo.flagInfo.causedYellow})}>{self.formatTime(driver.scoreInfo.timeDiff).slice(0,-2)}</div>
 					}
 				} else {
 					if (sortedByPosition[0].scoreInfo.laps-driver.scoreInfo.laps > 1) {
-						return <div className="meta-info">+{(sortedByPosition[0].scoreInfo.laps-driver.scoreInfo.laps)-1} Lap(s)</div>
+						return <div className={cx({'meta-info': true, 'yellow': driver.scoreInfo.flagInfo.causedYellow})}>+{(sortedByPosition[0].scoreInfo.laps-driver.scoreInfo.laps)-1} Lap(s)</div>
 					} else {
 						var sortedIndex = 0;
 						sortedByPosition.forEach(function(sortedDriver, i) {
@@ -76,12 +124,19 @@ UI.widgets.MulticlassStandings = React.createClass({
 								sortedIndex = i;
 							}
 						});
-						var timeDifference = sortedByPosition.slice(1, sortedIndex+1).map(function(driver) {
+
+						// this sometimes shows a red error when joining a race midway
+						try {
+							var timeDifference = sortedByPosition.slice(1, sortedIndex+1).map(function(driver) {
 							return Math.max(0, driver.scoreInfo.timeDiff);
-						}).reduce(function(p, c) {
-							return p+c;
-						});
-						return <div className="meta-info">{self.formatTime(timeDifference)}</div>
+							}).reduce(function(p, c) {
+								return p+c;
+							});
+						} catch (e) {
+							console.error('Caught error trying to reduce on null - this sometimes shows a red error when joining a race midway')
+						}
+
+						return <div className={cx({'meta-info': true, 'yellow': driver.scoreInfo.flagInfo.causedYellow})}>{self.formatTime(timeDifference).slice(0,-2)}</div>
 					}
 				}
 			}
@@ -89,17 +144,17 @@ UI.widgets.MulticlassStandings = React.createClass({
 		} else if(UI.state.sessionInfo.type === 'QUALIFYING' || UI.state.sessionInfo.type === 'PRACTICE') {
 			if (driver.scoreInfo.positionOverall === 1) {
 				if (driver.scoreInfo.bestLapInfo.sector3 !== -1) {
-					return <div className="meta-info fastest">{self.formatTime(driver.scoreInfo.bestLapInfo.sector3, {ignoreSign: true})}</div>
+					return <div className={cx({'meta-info': true, 'fastest': true, 'yellow': driver.scoreInfo.flagInfo.causedYellow})}>{self.formatTime(driver.scoreInfo.bestLapInfo.sector3, {ignoreSign: true})}</div>
 				} else {
-					return <div className="meta-info"></div>;
+					return <div className={cx({'meta-info': true, 'yellow': driver.scoreInfo.flagInfo.causedYellow})}></div>;
 				}
 			} else {
 				if (driver.scoreInfo.bestLapInfo.valid) {
 					return <div className="meta-info">{self.formatTime(driver.scoreInfo.bestLapInfo.sector3 - sortedByPosition[0].scoreInfo.bestLapInfo.sector3)}</div>
 				} else if (driver.scoreInfo.laps !== sortedByPosition[0].scoreInfo.laps) {
-					return <div className="meta-info">+{sortedByPosition[0].scoreInfo.laps-driver.scoreInfo.laps} laps</div>
+					return <div className={cx({'meta-info': true, 'yellow': driver.scoreInfo.flagInfo.causedYellow})}>+{sortedByPosition[0].scoreInfo.laps-driver.scoreInfo.laps} laps</div>
 				} else {
-					return <div className="meta-info"></div>;
+					return <div className={cx({'meta-info': true, 'yellow': driver.scoreInfo.flagInfo.causedYellow})}></div>;
 				}
 			}
 		}
@@ -128,23 +183,23 @@ UI.widgets.MulticlassStandings = React.createClass({
 				var lastNames = parts.slice(1);
 				var name = lastNames.map(item=> item.toUpperCase());
 			}
-			divStyle.width = "8em";
+			divStyle.width = "13em";
 		} else {
 			if (window.settings.teamEvent) {
 				var name = name.substr(name.indexOf(" ") + 1).toUpperCase();
 				firstInitial = "";
-				divStyle.width = "8em";
+				divStyle.width = "13em";
 			} else {
 				// Show 3 characters of last name by default
 				var name = parts[parts.length-1].substr(0, 3).toUpperCase();
 			}
 		}
-		return <div className="nameContainer" style={divStyle}><div className="name">{firstInitial}{name}</div></div>
+		return <div className="nameContainer" style={divStyle}><div className="firstname">{firstInitial}</div><div className="surname">{name}</div></div>
 	},
-	getClassIndicator: function(classId) {
+	getClassIndicator: function(performanceIndex) {
 		var divStyle = {};
-		if (UI.state.controllerOptions.options.multiclass.value === "true" && UI.getClassColour(classId) != null) {
-			classColour = UI.getClassColour(classId);
+		if (UI.state.controllerOptions.options.multiclass.value === "true" && UI.getClassColour(performanceIndex) != null) {
+			classColour = UI.getClassColour(performanceIndex);
 			divStyle.background = classColour;
 			return <div className="classIndicator" style={divStyle}></div>
 		} else {
@@ -165,6 +220,15 @@ UI.widgets.MulticlassStandings = React.createClass({
 		}
 		return driver.scoreInfo.bestLapInfo.valid || driver.scoreInfo.timeDiff != -1;
 	},
+	getPositionIncrease(value) {
+		if(value === 0) {
+			return '-';
+		} else if (value > 0) {
+			return '+' + value;
+		} else if (value < 0) {
+			return value;
+		}
+	},
 	looper: Array.apply(null, Array(UI.maxDriverCount)),
 	render: function() {
 		// On end phase user portalId is not sent anymore so do not show
@@ -174,7 +238,6 @@ UI.widgets.MulticlassStandings = React.createClass({
 
 		var self = this;
 		var p = this.state;
-		var pitInfo = self.state.pitInfo;
 
 		var drivers = this.state.driversInfo.driversInfo;
         if (!drivers.length) {
@@ -186,7 +249,6 @@ UI.widgets.MulticlassStandings = React.createClass({
 			driversLookup[driver.slotId] = driver;
 		});
 
-
 		var multiclassStandingsClasses = cx({
 			'hide-flags': UI.state.activeWidgets.MulticlassStandings.disableFlags
 			, 'multiclass-standings': true
@@ -225,45 +287,64 @@ UI.widgets.MulticlassStandings = React.createClass({
 					return <div key={i}>
 						{self.shouldShow(driversLookup[i]) ?
 							<div className={cx({'driver': true, 'active': (driversLookup[i].slotId === UI.state.focusedSlot)})} key={driversLookup[i].slotId} style={self.getDriverStyle(driversLookup[i])}>
-								<div className="inner">
+								<div className="inner animated fadeIn delay-1s">
+								{self.getClassIndicator(driversLookup[i].performanceIndex)}
 									<div className="positionContainer"><div className="position">{driversLookup[i].scoreInfo.positionOverall}</div></div>
-									{self.getClassIndicator(driversLookup[i].classId)}
-									{UI.state.controllerOptions.options.showStandingsManufacturer.value === "true" ?
+									
 									<div className="manufacturerContainer">
-										<div className="manufacturerFlag">
-											<img src={'/render/'+driversLookup[i].manufacturerId+'/small/?type=manufacturer'}/>
-										</div>
-										</div>
-										:
-										null
-									}
-
-									{self.renderName(driversLookup[i].name)}
-
-										{window.settings.offline === false && UI.state.controllerOptions.options.showStandingsFlag.value === "true" ?
-											<div className="flagContainer">
-												<div className="standingsFlag animated fadeIn delay-2s" >
+										{ UI.formatSessionTime(Math.max(0, UI.state.sessionInfo.timeLeft)).slice(-2) > 30 || UI.state.sessionInfo.timeLeft < 60 || UI.state.sessionInfo.phase === 'CHECKERED' ?
+											<div className="standingsFlag">
+												{window.settings.offline === true || UI.state.controllerOptions.options.showPortalAvatar.value === "true" ?
+													<img src={UI.getUserInfo(driversLookup[i].portalId).avatar} />
+												:
 													<img src={'/img/flags/'+UI.getUserInfo(driversLookup[i].portalId).country+'.png'} />
-												</div>
+												}
+											</div>
+											: UI.formatSessionTime(Math.max(0, UI.state.sessionInfo.timeLeft)).slice(-2) > 10 ?
+											<div className="manufacturerFlag" >
+												<img src={'/img/manufacturers/'+driversLookup[i].manufacturerId+'.png'}/>
 											</div>
+											: 
+											<div className="positionsChange">
+												{ UI.state.sessionInfo.type.match(/^race/i) ?
+											<div className={cx({'positionIncrease': true, 'level': driversLookup[i].scoreInfo.positionClass === driversLookup[i].scoreInfo.positionRaceGridClass, 'gained': driversLookup[i].scoreInfo.positionClass < driversLookup[i].scoreInfo.positionRaceGridClass, 'lost': driversLookup[i].scoreInfo.positionClass > driversLookup[i].scoreInfo.positionRaceGridClass})}>{self.getPositionIncrease(driversLookup[i].scoreInfo.positionRaceGridClass - driversLookup[i].scoreInfo.positionClass)}</div>
 											:
-											null
+												<div className={cx({'positionIncrease': true, 'level': true})}> - </div>
+											}
+											</div>
 										}
+									</div>
+
+									{self.renderName(driversLookup[i].name)}
 
 
 									<div className="meta-info-container">{self.getMetaInfo(driversLookup[i], drivers)}</div>
-									<div className="pit-info">
+
+									{driversLookup[i].mandatoryPitstopPerformed > -1 ?
+										<div className="pit-info">
 										{driversLookup[i].mandatoryPitstopPerformed === 1 ?
-											<div className="pitted">⭗</div>
+											<div className="pitted">PIT</div>
 											:
 											null
 										}
 										{driversLookup[i].mandatoryPitstopPerformed === 0 ?
-											<div className="unpitted">⭗</div>
+											<div className="unpitted">PIT</div>
 											:
 											null
 										}
-									</div>
+										</div>
+									: 
+										null
+									}
+
+									{ driversLookup[i].pitInfo.isPitting ?
+										<div className="pit-info">
+											<div className="pitted">PIT</div>
+										</div>
+											:
+										null
+									}
+									
 								</div>
 							</div>
 							:
diff --git a/assets/components/widgets/raceResults/raceResults.flat.less b/assets/components/widgets/raceResults/raceResults.flat.less
index 8e025b1..0374820 100644
--- a/assets/components/widgets/raceResults/raceResults.flat.less
+++ b/assets/components/widgets/raceResults/raceResults.flat.less
@@ -7,7 +7,7 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background: rgba(0, 0, 0, 0.2);
+	background: rgba(0, 0, 0, 0.1);
 }
 .race-results {
 	.entries-outer {
@@ -25,18 +25,18 @@
 	}
 }
 .race-results {
-	filter: drop-shadow(9px 9px 9px rgba(0,0,0,1));
 	position: fixed;
 	top: 50%;
-	left: 20%;
+	left: 17.5%;
 	right: 20%;
-	-webkit-transform: translate(0, -50%);
 	z-index: -1;
 	padding: 0px;
-	color: @RaceResultTitleTextColor;
+	color: @primaryAccent;
 	white-space: pre;
-	font-family: Oswald;
-	width: 60%;
+	font-family: Formula1-Regular;
+	width: 65%;
+	-webkit-transform: translate(0, -80%);
+	filter: drop-shadow(9px 9px 9px rgba(0,0,0,1));
 	.title {
 		.text {
 			position: inherit;
@@ -44,31 +44,44 @@
 			text-align: right;
 			padding: 0 0.75em 0 0;
 			line-height: 5em;
-			font-size: @fontSize * 1.5;
-			background: @RaceResultTitleBackground;
-			border-top: 0.25em solid @RaceResultTitleBorderTop;
+			font-size: @fontSize * 1.3;
+			background: #212934;
+			
 			text-transform: uppercase;
 			padding-bottom: 0.5em;
 			z-index: 0;
 			.logo {
 				position: absolute;
 				content: @RaceResultTitleLogo;
-				height: 2.2em;
-				top: 0.9em;
+				height: 3.5em;
+				top: 1em;
 				left: 1em;
 				z-index: 1;
 			}
 		}
+		.trackName {
+			position: inherit;
+			height: 2.8em;
+			color: @secondaryAccent;
+			text-align: right;
+			padding: 0 0.75em 0 0;
+			line-height: 1em;
+			font-size: @fontSize * 1.2;
+			background: #212934;
+			text-transform: uppercase;
+			padding-bottom: 1em;
+			z-index: 0;
+		}
 	}
 	.race-results-entry {
 		height: 2em;
 		line-height: 2em;
-		color: @RaceResultEntryTextColor;
-		background: @RaceResultEntryBackground;
+		color: @secondaryAccent;
+		background: #212934;
 		white-space: nowrap;
 		overflow: hidden;
 		&.striped {
-			opacity: 0.85;
+			opacity: 0.95;
 		}
 		&.title {
 			padding: 0 0 0 0em;
@@ -85,35 +98,42 @@
 			float: left;
 		}
 		&.title .classPosition {
-			color: @QualiResultEntryTextColor;
-			-ms-transform: skew(0deg, 0deg);
-			-webkit-transform: skew(0deg, 0deg);
-			transform: skew(0deg, 0deg);
+			color: @secondaryAccent;
 		}
-		.position {
+		.overallPosition {
 			text-align: center;
-			width: 7%;
+			width: 10%;
 			position: relative;
+			border-left: 0.5em solid @primaryAccent;
+			color: @secondaryAccent;
 		}
 		.classPosition {
 			width: 10%;
 			position: relative;
 			text-align: center;
-			color: white;
-			right: 0.5em;
-			-ms-transform: skew(-15deg, 0deg);
-	    -webkit-transform: skew(-15deg, 0deg);
-	    transform: skew(-15deg, 0deg);
+			color: @secondaryAccent;
+		}
+		.classPositionWhenHidden {
+			width: 10%;
+			position: relative;
+		}
+		.first {
+			color: gold;
+		}
+		.second {
+			color: silver;
+		}
+		.third {
+			color: #CD7F32;
 		}
 		.manufacturer {
 			width: 5%;
 			position: relative;
 			.manufacturerFlag {
 				position: absolute;
-				top: 0.1em;
-				height: 100%;
+				height: 80%;
 				img {
-					height: 100%;
+					height: 80%;
 				}
 			}
 			.standingsFlag {
@@ -121,8 +141,7 @@
 				position: absolute;
 				top: 0.2em;
 				img {
-					transform: skew(-15deg, 0deg);
-					height: 100%;
+					height: 80%;
 				}
 			}
 		}
@@ -131,199 +150,107 @@
 			position: relative;
 			text-align: center;
 		}
-		.longName {
-			position: relative;
-			width: 27%;
+		.raceResultFirstName {
+			color: @secondaryAccent;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			overflow: hidden;
+			width: 2%;
 		}
-		.shortName {
-			position: relative;
-			width: 17%;
+		.raceResultLastName {
+			color: @primaryAccent;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			overflow: hidden;
+			width: 22%;
 		}
 		.raceResultTeam {
+			color: @secondaryAccent;
 			position: relative;
-			width: 20%;
+			width: 25%;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			overflow: hidden;
 		}
-		.livery {
-			width: 10%;
-			position: relative;
-			img {
-				position: relative;
-				height: 3em;
-				right: 1.5em;
-				top: -0.5em;
-			}
-		}
 		.fastest-time, .lap-time {
-			width: 10%;
+			color: @secondaryAccent;
 			text-align: center;
+			padding-left: 0.5em;
+			width: 12%;
 			position: relative;
+			&.fastest {
+				color: #fb00ff;
+			}
 		}
 	}
 }
 
 .winnerColumn {
+	filter: drop-shadow(9px 9px 9px rgba(0,0,0,1));
 	position: fixed;
 	font-size: @fontSize;
-	font-family: Oswald;
-	width: 14.5em;
-	background: black;
+	font-family: Formula1-Regular;
+	width: 18em;
+	background: #212934;
 	left: 2em;
-	height: 13em;
+	height: 6em;
 	top: 40%;
 	-webkit-transform: translate(0, -40%);
 	z-index: 2;
-	border-radius: 0.5em;
-	background: @RaceResultWinnerBackground;
+	border-left: gold solid 0.5em;
+	text-align: center;
 	.winnerTitle {
-		font-size: @fontSize * 1.5;
-		color: white;
+		font-size: @fontSize * 1.1;
+		color: gold;
 		height: 2em;
 		text-align: center;
-		line-height: 2em;
+		line-height: 1em;
 		filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.9));
 	}
-	.winnerImageContainer {
-		left: 7em;
-		width: 7em;
-		z-index: 2;
-		img {
-			width: 7em;
-			filter: drop-shadow(13px 13px 13px rgba(0,0,0,1));
-		}
-	}
-	.winner{
-		font-size: @fontSize * 1.2;
-		text-align: center;
-		line-height: 1.5em;
-		border-top-left-radius: 0.5em;
-		border-top-right-radius: 0.5em;
-		width: 100%;
-		height: 1.5em;
-		color: white;
-	}
-	.livery {
-		position: fixed;
-		left: 2em;
-		top: 90%;
-		-webkit-transform: translate(0, -90%);
-		z-index: 1;
-		img {
-			width: 12.5em;
-			filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.9));
-		}
-	}
-	.driverFlagContainer {
-		position: fixed;
-		content: @RaceResultTitleLogo;
-		width: 5em;
-		top: 35%;
-		-webkit-transform: translate(0, -35%);
-		filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.9));
-		left: 9em;
-		z-index: 1;
-	}
 	.driverName {
-		font-size: @fontSize * 0.9;
-		position: relative;
-		text-align: center;
-		width: 100%;
-		height: 2em;
-		top: 7%;
-		line-height: 1.5em;
-		color: white;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-		padding: 0.25em;
-		border-bottom-left-radius: 0.5em;
-		border-bottom-right-radius: 0.5em;
-		filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.9));
+	    text-overflow: ellipsis;
+	    overflow: hidden;
+	    white-space: nowrap;
+		line-height: 2em;
+		font-size: @fontSize * 1.5;
+	    color: white;
+	    padding: 0.15em;
+	    text-transform: capitalize;
+	    z-index: -1;
 	}
 }
 
 .fastestDriverColumn {
+	filter: drop-shadow(9px 9px 9px rgba(0,0,0,1));
 	position: fixed;
 	font-size: @fontSize;
-	width: 14.5em;
-	background: black;
+	font-family: Formula1-Regular;
+	width: 18em;
+	background: #212934;
 	right: 2em;
+	height: 6em;
+	text-align: center;
 	top: 40%;
 	-webkit-transform: translate(0, -40%);
 	z-index: 2;
-	border-radius: 0.5em;
-	background: @RaceResultFastestLapBackground;
+	border-right: #fb00ff solid 0.5em;
 	.fastestTitle {
-		font-size: @fontSize * 1.5;
-		color: white;
+		font-size: @fontSize * 1.1;
+		color: #fb00ff;
 		height: 2em;
 		text-align: center;
-		line-height: 2em;
-		filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.9));
-	}
-	.fastestDriverImageContainer {
-		left: 7em;
-		width: 7em;
-		z-index: 2;
-		img {
-			width: 7em;
-			filter: drop-shadow(13px 13px 13px rgba(0,0,0,1));
-		}
-	}
-	.fastestDriverLogo{
-		font-size: @fontSize * 1.2;
-		text-align: center;
-		line-height: 1.5em;
-		border-top-left-radius: 0.5em;
-		border-top-right-radius: 0.5em;
-		width: 100%;
-		height: 1.5em;
-		color: white;
-	}
-	.fastestDriverLivery {
-		position: fixed;
-		left: 2em;
-		top: 90%;
-		-webkit-transform: translate(0, -90%);
-		z-index: 1;
-		img {
-			width: 12.5em;
-			filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.9));
-		}
-	}
-	.fastestDriverFlagContainer {
-		position: fixed;
-		content: @RaceResultTitleLogo;
-		width: 5em;
-		top: 35%;
-		-webkit-transform: translate(0, -35%);
+		line-height: 1em;
 		filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.9));
-		left: 9em;
-		z-index: 1;
 	}
 	.fastestDriverName {
-		font-size: @fontSize * 0.9;
-		position: relative;
-		text-align: center;
-		width: 100%;
-		height: 2em;
-		top: 7%;
-		line-height: 1.5em;
-		color: white;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		overflow: hidden;
-		padding: 0.25em;
-		border-bottom-left-radius: 0.5em;
-		border-bottom-right-radius: 0.5em;
-		filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.9));
+		line-height: 2em;
+		font-size: @fontSize * 1.5;
+	    color: white;
+	    padding: 0.15em;
+	    text-transform: capitalize;
+	    z-index: -1;
+	    text-overflow: ellipsis;
+	    overflow: hidden;
+	    white-space: nowrap;
 	}
 }
diff --git a/assets/components/widgets/raceResults/raceResults.jsx b/assets/components/widgets/raceResults/raceResults.jsx
index 6900a99..10943a4 100644
--- a/assets/components/widgets/raceResults/raceResults.jsx
+++ b/assets/components/widgets/raceResults/raceResults.jsx
@@ -1,6 +1,17 @@
 UI.widgets.RaceResults = React.createClass({
 	componentWillMount: function() {
 		var self = this;
+
+
+		function updateInfo() {
+			UI.batch({
+				'eventInfo': function(done) {
+					r3e.getEventInfo(done);
+				}
+			}, self.setState.bind(self));
+		}
+		updateInfo();
+
 		(function checkRefs() {
 			if (!self.refs['entries-outer']) {
 				return setTimeout(checkRefs, 100);
@@ -15,12 +26,10 @@ UI.widgets.RaceResults = React.createClass({
 			}, 25 * 1000);
 		})();1
 	},
-	getName: function(name) {
-		if (window.settings.teamEvent) {
-			return name.substr(name.indexOf(" ") + 1);
-		} else {
-			return UI.fixName(name);
-		}
+	getInitialState: function() {
+		return {
+			'eventInfo': {}
+		};
 	},
 	getNameColumnTitle: function() {
 		if (window.settings.teamEvent) {
@@ -29,6 +38,13 @@ UI.widgets.RaceResults = React.createClass({
 			return UI.getStringTranslation("raceResultsWidget", "name");
 		}
 	},
+	getName: function(name) {
+		if (window.settings.teamEvent) {
+			return name.substr(name.indexOf(" ") + 1);
+		} else {
+			return UI.fixName(name);
+		}
+	},
 	render: function() {
 		var self = this;
 		var fastestTime = 999999;
@@ -52,40 +68,22 @@ UI.widgets.RaceResults = React.createClass({
 		var winningDriver = self.props.results[winnerIndex];
 
 		var self = this;
+		var eventInfo = self.state.eventInfo;
+
 		return (
 			<div>
 			{ winningDriver != null ?
 				<div className="winnerColumn animated fadeInLeft delay-2s">
-				<div className="winnerTitle">{UI.getStringTranslation("raceResultsWidget", "raceWinner")}</div>
-					<div className="winnerImageContainer">
-						<img className="winnerImage" src={'/img/winner.png'} />
-					</div>
-					<div className="winnerLogo"></div>
-					<div className="livery">
-						<img src={'/render/'+winningDriver.liveryId+'/small/'}/>
-					</div>
-					<div className="driverFlagContainer">
-						<img className="driveFlag" src={'/img/flags/'+UI.getUserInfo(winningDriver.portalId).country+'.png'} />
-					</div>
 					<div className="driverName">{self.getName(winningDriver.name)}</div>
+					<div className="winnerTitle">{UI.getStringTranslation("raceResultsWidget", "raceWinner")}</div>
 				</div>
 			:
 				null
 			}
 			{ fastestDriver != null ?
 			<div className="fastestDriverColumn animated fadeInRight delay-2s">
-			<div className="fastestTitle">{UI.getStringTranslation("raceResultsWidget", "fastestLap")}</div>
-				<div className="fastestDriverImageContainer">
-					<img className="fastestDriverImage" src={'/img/fastest.png'} />
-				</div>
-				<div className="fastestDriverLogo"></div>
-				<div className="fastestDriverLivery">
-					<img src={'/render/'+fastestDriver.liveryId+'/small/'}/>
-				</div>
-				<div className="fastestDriverFlagContainer">
-					<img className="fastestDriverFlag" src={'/img/flags/'+UI.getUserInfo(fastestDriver.portalId).country+'.png'} />
-				</div>
 				<div className="fastestDriverName">{self.getName(fastestDriver.name)}</div>
+				<div className="fastestTitle">{UI.getStringTranslation("raceResultsWidget", "fastestLap")}</div>
 			</div>
 			:
 				null
@@ -93,27 +91,20 @@ UI.widgets.RaceResults = React.createClass({
 			<div className="race-results-bg">
 			<div className="race-results animated fadeIn">
 			<div className="title">
-				<div className="text">{UI.state.sessionInfo.type.match(/^Race 1/i) ? UI.getStringTranslation("raceResultsWidget", "race") : UI.state.sessionInfo.type} Results<div className="logo"></div></div>
+				<div className="text">{eventInfo.serverName} {UI.state.sessionInfo.type.match(/^Race 1/i) ? UI.getStringTranslation("raceResultsWidget", "race") : UI.state.sessionInfo.type} Results<div className="logo"></div></div>
+				<div className="trackName">{eventInfo.trackName} {eventInfo.layoutName}</div>
 			</div>
 				<div className="race-results-entry title">
 					{ UI.state.controllerOptions.options.multiclass.value === "true" ?
-						<div className="classPosition">{UI.getStringTranslation("raceResultsWidget", "classPosition")}</div>
+						<div className="classPosition"></div>
 					:
-						null
+						<div className="classPositionWhenHidden"></div>
 					}
-					<div className="position">{UI.getStringTranslation("raceResultsWidget", "overall")}</div>
+					<div className="position"></div>
 					<div className="manufacturer"/>
-					{ UI.state.controllerOptions.options.multiclass.value === "true" ?
-						<div className="shortName">{self.getNameColumnTitle()}</div>
-					:
-						<div className="longName">{self.getNameColumnTitle()}</div>
-					}
-					<div className="livery"></div>
-					{ window.settings.teamEvent ?
-						<div className="raceResultTeam"></div>
-						:
-						<div className="raceResultTeam">{UI.getStringTranslation("raceResultsWidget", "team")}</div>
-					}
+					<div className="raceResultFirstName"></div>
+					<div className="raceResultLastName"></div>
+					<div className="raceResultTeam"></div>
 					<div className="penaltyTime">{UI.getStringTranslation("raceResultsWidget", "penalties")}</div>
 					<div className="lap-time">{UI.getStringTranslation("raceResultsWidget", "finishTime")}</div>
 					<div className="fastest-time">{UI.getStringTranslation("raceResultsWidget", "bestLap")}</div>
@@ -133,16 +124,14 @@ UI.widgets.RaceResults = React.createClass({
 });
 
 var RaceResultEntry = React.createClass({
-	getClassColour: function(classId) {
+	getClassColour: function(performanceIndex) {
 		var classColour = "rgba(38, 50, 56, 0.8)";
-		var className = "";
 
-		if (r3eData.classes[classId] != null && r3eClassColours.classes[classId] != null) {
-			classColour = r3eClassColours.classes[classId].colour;
-			className = r3eData.classes[classId].Name;
+		if (performanceIndex != null) {
+			classColour = UI.getClassColour(performanceIndex)
 		}
 
-		return {	'background': classColour };
+		return {	'border-left': classColour + ' 0.5em solid' };
 	},
 	getTeamName: function(teamId, portalId) {
 		var self = this;
@@ -159,6 +148,19 @@ var RaceResultEntry = React.createClass({
 		}
 		return teamName;
 	},
+	getFirstName: function(str) {
+		str = UI.fixName(str);
+		var parts = str.split(' ');
+		parts[parts.length-1] = parts[parts.length-1].toUpperCase();
+		return parts[0];
+	},
+	getLastName: function(str) {
+		str = UI.fixName(str);
+		var parts = str.split(' ');
+		parts[parts.length-1] = parts[parts.length-1].toUpperCase();
+		parts.shift();
+		return parts.join(' ');
+	},
 	getName: function(name) {
 		if (window.settings.teamEvent) {
 			return name.substr(name.indexOf(" ") + 1);
@@ -198,14 +200,18 @@ var RaceResultEntry = React.createClass({
 
 		return (
 			<div className={cx({'fastest': entry.isFastest, 'race-results-entry': true, 'striped': entry.positionOverall % 2})}>
-			{ UI.state.controllerOptions.options.multiclass.value === "true" ?
-				<div className={cx({'classPosition': true})} style={self.getClassColour(entry.classId)}>{UI.getStringTranslation("raceResultsWidget", "class")} P{entry.positionClass}.</div>
-			:
-				null
-			}
-			<div className="position">#{entry.positionOverall}</div>
+				{ UI.state.controllerOptions.options.multiclass.value === "true" ?
+					<div className={cx({'classPosition': true, 'first': entry.positionClass === 1, 'second': entry.positionClass === 2, 'third': entry.positionClass === 3})} style={self.getClassColour(entry.performanceIndex)}>#{entry.positionClass}</div>
+				:
+					null
+				}
+				{ UI.state.controllerOptions.options.multiclass.value === "false" ?
+			  		<div className={cx({'overallPosition': true, 'first': entry.positionOverall === 1, 'second': entry.positionOverall === 2, 'third': entry.positionOverall === 3})}>#{entry.positionOverall}</div>
+				:
+					null
+			  	}
 				<div className="manufacturer">
-				{window.settings.offline === false && UI.state.controllerOptions.options.showStandingsFlag.value === "true" ?
+				{!window.settings.offline ?
 					<div key={UI.formatSessionTime(Math.max(0, UI.state.sessionInfo.timeLeft)).slice(-2) > 40} className="standingsFlag">
 						<img src={'/img/flags/'+UI.getUserInfo(entry.portalId).country+'.png'} />
 					</div>
@@ -215,19 +221,13 @@ var RaceResultEntry = React.createClass({
 					</div>
 				}
 				</div>
-				{ UI.state.controllerOptions.options.multiclass.value === "true" ?
-							<div className="shortName">{self.getName(entry.name)}</div>
-						:
-							<div className="longName">{self.getName(entry.name)}</div>
-				}
-				<div className="livery animated fadeInRight delay-1s">
-					<img src={'/render/'+entry.liveryId+'/small/'}/>
-				</div>
+				<div className="raceResultFirstName">{self.getFirstName(entry.name)}</div>
+				<div className="raceResultLastName">{self.getLastName(entry.name)}</div>
 				<div className="raceResultTeam">{self.getTeamName(entry.teamId, entry.portalId)}</div>
 				{penaltyTime}
 				{lapTime}
 				{entry.bestLapInfo.sector3 !== -1 ?
-	        <div className="fastest-time">{UI.formatTime(entry.bestLapInfo.sector3, {ignoreSign: true})}</div>
+	        	<div className="fastest-time">{UI.formatTime(entry.bestLapInfo.sector3, {ignoreSign: true})}</div>
 	          :
 					<div className="fastest-time">-</div>
 				}
diff --git a/assets/components/widgets/results/results.flat.less b/assets/components/widgets/results/results.flat.less
index ebca34c..1645c45 100644
--- a/assets/components/widgets/results/results.flat.less
+++ b/assets/components/widgets/results/results.flat.less
@@ -8,10 +8,10 @@
 	right: 0;
 	bottom: 0;
 	background: rgba(0, 0, 0, 0.2);
-}
+	filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.7));
 
+}
 .qualify-results {
-
 	.entries-outer {
 		max-height: 40em;
 		overflow: hidden;
@@ -22,23 +22,18 @@
 			-webkit-transition: top 15s linear;
 		}
 	}
-	.livery {
-		-webkit-transform: translate3d(0,0,0);
-	}
 }
 .qualify-results {
 	position: fixed;
 	top: 50%;
 	left: 20%;
 	right: 20%;
-	-webkit-transform: translate(0, -50%);
 	z-index: -1;
-	padding: 0px;
-	color: @QualiResultTitleText;
+	color: @primaryAccent;
 	white-space: pre;
-	font-family: Oswald;
+	font-family: Formula1-Regular;
+	-webkit-transform: translate(0, -80%);
 	width: 60%;
-	filter: drop-shadow(9px 9px 9px rgba(0,0,0,1));
 	.title {
 		.text {
 			position: inherit;
@@ -46,71 +41,92 @@
 			text-align: right;
 			padding: 0 0.75em 0 0;
 			line-height: 5em;
-			font-size: @fontSize * 1.5;
-			background: @QualiResultTitleBackground;
-			border-top: 0.25em solid @QualiResultTitleBorderTop;
+			font-size: @fontSize * 1.3;
+			background: @primaryAccentBackground;
 			text-transform: uppercase;
 			padding-bottom: 0.5em;
 			z-index: 0;
+			text-overflow: ellipsis;
+		    overflow: hidden;
+		    white-space: nowrap;
 			.logo {
 				position: absolute;
 				content: @RaceResultTitleLogo;
-				height: 2.2em;
-				top: 0.9em;
+				height: 3.5em;
+				top: 1em;
 				left: 1em;
 				z-index: 1;
 			}
 		}
+		.trackName {
+			position: inherit;
+			height: 2.8em;
+			color: white;
+			text-align: right;
+			padding-right: 1em;
+			line-height: 1em;
+			font-size: @fontSize * 1.2;
+			background: @primaryAccentBackground;
+			text-transform: uppercase;
+			padding-bottom: 1em;
+			z-index: 0;
+		}
 	}
 	.qualify-results-entry {
 		height: 2em;
 		line-height: 2em;
-		color: @QualiResultEntryTextColor;
-		background: @QualiResultEntryBackground;
+		color: @secondaryAccent;
+		background: @primaryAccentBackground;
 		white-space: nowrap;
-  	overflow: hidden;
+  		overflow: hidden;
 		&.striped {
-			opacity: 0.85;
+			opacity: 0.9;
 		}
 		&.title {
 			padding: 0 0 0 0em;
 			font-size: @fontSize * 1.1;
 		}
 		&.title .classPosition {
-			color: @QualiResultEntryTextColor;
-			-ms-transform: skew(0deg, 0deg);
-			-webkit-transform: skew(0deg, 0deg);
-			transform: skew(0deg, 0deg);
+			color: @secondaryAccent;
 		}
 		& > div {
 			height: 2em;
-			padding: 0 0 0 0.25em;
 			float: left;
 		}
-		.position {
+		.overallPosition {
 			text-align: center;
 			width: 10%;
 			position: relative;
+			border-left: 0.5em solid @primaryAccent;
+			color: @secondaryAccent;
 		}
 		.classPosition {
 			width: 10%;
 			position: relative;
 			text-align: center;
-			color: white;
-			right: 0.5em;
-			-ms-transform: skew(-15deg, 0deg);
-			-webkit-transform: skew(-15deg, 0deg);
-			transform: skew(-15deg, 0deg);
+			color: @secondaryAccent;
+		}
+		.classPositionWhenHidden {
+			width: 10%;
+			position: relative;
+		}
+		.first {
+			color: gold;
+		}
+		.second {
+			color: silver;
+		}
+		.third {
+			color: #CD7F32;
 		}
 		.manufacturer {
 			width: 5%;
 			position: relative;
 			.manufacturerFlag {
 				position: absolute;
-				top: 0.1em;
-				height: 100%;
+				height: 80%;
 				img {
-					height: 100%;
+					height: 80%;
 				}
 			}
 			.standingsFlag {
@@ -118,47 +134,40 @@
 				position: absolute;
 				top: 0.2em;
 				img {
-					transform: skew(-15deg, 0deg);
-					height: 100%;
+					height: 80%;
 				}
 			}
 		}
-		.longName {
-			position: relative;
-			width: 30%;
+		.resultsFirstName {
+			color: @secondaryAccent;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			overflow: hidden;
+			width: 15%;
 		}
-		.shortName {
-			position: relative;
-			width: 20%;
+		.resultsLastName {
+			color: @primaryAccent;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			overflow: hidden;
+			width: 16%;
 		}
 		.resultTeam {
+			color: @secondaryAccent;
 			position: relative;
-			width: 25%;
+			width: 35%;
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			overflow: hidden;
 		}
-		.livery {
-			width: 10%;
-			position: relative;
-			img {
-				position: relative;
-				height: 3em;
-				right: 1.5em;
-				top: -0.5em;
-			}
-		}
 		.fastest-time, .lap-time {
-			width: 10%;
+			padding-left: 0.5em;
+			text-align: center;
+			width: 9%;
 			position: relative;
+			color: @secondaryAccent;
 			&.fastest {
-				color: #f500f5;
+				color: #fb00ff;
 			}
 		}
 	}
diff --git a/assets/components/widgets/results/results.jsx b/assets/components/widgets/results/results.jsx
index 58b9a4c..a413b2b 100644
--- a/assets/components/widgets/results/results.jsx
+++ b/assets/components/widgets/results/results.jsx
@@ -4,6 +4,9 @@ UI.widgets.Results = React.createClass({
 
 		function updateInfo() {
 			UI.batch({
+				'eventInfo': function(done) {
+					r3e.getEventInfo(done);
+			},
 				'driversInfo': r3e.getDriversInfo
 			}, self.setState.bind(self));
 		}
@@ -33,7 +36,8 @@ UI.widgets.Results = React.createClass({
 		return {
 			'driversInfo': {
 				'driversInfo': []
-			}
+			},
+			'eventInfo': {}
 		};
 	},
 	sortFunctionPosition: function(a, b) {
@@ -54,6 +58,7 @@ UI.widgets.Results = React.createClass({
 	},
 	render: function() {
 		var self = this;
+		var eventInfo = self.state.eventInfo;
 		if (this.state.driversInfo.driversInfo.length === 0) {
 			return null;
 		}
@@ -84,29 +89,22 @@ UI.widgets.Results = React.createClass({
 			<div className="overallQuai animated fadeIn">
 			<div className="qualify-results">
 				<div className="title">
-					<div className="text">{UI.getStringTranslation("resultsWidget", "qualifyingResults")}<div className="logo"></div></div>
+					<div className="text">{eventInfo.serverName} {UI.getStringTranslation("resultsWidget", "qualifyingResults")}<div className="logo"></div></div>
+					<div className="trackName">{eventInfo.trackName} {eventInfo.layoutName}</div>
 				</div>
 				<div className="qualify-results-entry title">
 					{ UI.state.controllerOptions.options.multiclass.value === "true" ?
-				  	<div className="classPosition">{UI.getStringTranslation("resultsWidget", "classPosition")}</div>
-					:
-						null
-				  }
-					<div className="position">{UI.getStringTranslation("resultsWidget", "overall")}</div>
-					<div className="manufacturer"/>
-					{ UI.state.controllerOptions.options.multiclass.value === "true" ?
-						<div className="shortName">{self.getNameColumnTitle()}</div>
+				  		<div className="classPosition"></div>
 					:
-						<div className="longName">{self.getNameColumnTitle()}</div>
-					}
-					<div className="livery"></div>
-					{ window.settings.teamEvent ?
-						<div className="resultTeam"></div>
-						:
-						<div className="resultTeam">{UI.getStringTranslation("resultsWidget", "team")}</div>
-					}
-					<div className="fastest-time">{UI.getStringTranslation("resultsWidget", "delta")}</div>
+						<div className="classPositionWhenHidden"></div>
+				  	}
+				  	<div className="manufacturer"></div>
+					<div className="resultsFirstName"></div>
+					<div className="resultsLastName"></div>
+					<div className="resultTeam"></div>
 					<div className="lap-time">{UI.getStringTranslation("resultsWidget", "bestLap")}</div>
+					<div className="fastest-time">{UI.getStringTranslation("resultsWidget", "delta")}</div>
+					
 				</div>
 				<div className="entries-outer" ref="entries-outer">
 					<div className="entries-inner" ref="entries-inner">
@@ -135,7 +133,7 @@ var ResultEntry = React.createClass({
 			className = r3eData.classes[classId].Name;
 		}
 
-		return {	'background': classColour };
+		return {	'border-left': classColour + ' 1em solid' };
 	},
 	getTeamName: function(teamId, portalId) {
 		var self = this;
@@ -150,12 +148,18 @@ var ResultEntry = React.createClass({
 		}
 		return teamName;
 	},
-	getName: function(name) {
-		if (window.settings.teamEvent) {
-			return name.substr(name.indexOf(" ") + 1);
-		} else {
-			return UI.fixName(name);
-		}
+	getFirstName: function(str) {
+		str = UI.fixName(str);
+		var parts = str.split(' ');
+		parts[parts.length-1] = parts[parts.length-1].toUpperCase();
+		return parts[0];
+	},
+	getLastName: function(str) {
+		str = UI.fixName(str);
+		var parts = str.split(' ');
+		parts[parts.length-1] = parts[parts.length-1].toUpperCase();
+		parts.shift();
+		return parts.join(' ');
 	},
 	render: function() {
 		var self = this;
@@ -177,33 +181,38 @@ var ResultEntry = React.createClass({
 			{ session.type === 'QUALIFYING' && session.timeLeft <= UI.state.controllerOptions.options.qualifyingResultsDisplayTime.value ?
 			<div className={cx({'qualify-results-entry': true, 'striped': entry.scoreInfo.positionOverall % 2})}>
 			{ UI.state.controllerOptions.options.multiclass.value === "true" ?
-				<div className={cx({'classPosition': true})} style={self.getClassColour(entry.classId)}>{UI.getStringTranslation("resultsWidget", "class")} P{entry.scoreInfo.positionClass}.</div>
+				<div className={cx({'classPosition': true, 'first': entry.scoreInfo.positionClass === 1, 'second': entry.scoreInfo.positionClass === 2, 'third': entry.scoreInfo.positionClass === 3})} style={self.getClassColour(entry.classId)}>#{entry.scoreInfo.positionClass}</div>
 			:
 				null
 			}
-			<div className="position">#{entry.scoreInfo.positionOverall}</div>
+			{ UI.state.controllerOptions.options.multiclass.value === "false" ?
+		  		<div className={cx({'overallPosition': true, 'first': entry.scoreInfo.positionOverall === 1, 'second': entry.scoreInfo.positionOverall === 2, 'third': entry.scoreInfo.positionOverall === 3})}>#{entry.scoreInfo.positionOverall}</div>
+			:
+				null
+		  	}
+			
 				<div className="manufacturer">
-				{window.settings.offline === false && UI.state.controllerOptions.options.showStandingsFlag.value === "true" ?
+				{!window.settings.offline ?
 					<div key={UI.formatSessionTime(Math.max(0, UI.state.sessionInfo.timeLeft)).slice(-2) > 40} className="standingsFlag">
 						<img src={'/img/flags/'+UI.getUserInfo(entry.portalId).country+'.png'} />
 					</div>
 					:
 					<div key={UI.formatSessionTime(Math.max(0, UI.state.sessionInfo.timeLeft)).slice(-2) > 40} className="manufacturerFlag">
-						<img src={'/render/'+entry.manufacturerId+'/small/?type=manufacturer'}/>
+						<img src={'/img/manufacturers/'+entry.manufacturerId+'.png'} />
 					</div>
 				}
 				</div>
+
+				<div className="resultsFirstName">{self.getFirstName(entry.name)}</div>
+				<div className="resultsLastName">{self.getLastName(entry.name)}</div>
+				<div className="resultTeam">{self.getTeamName(entry.teamId, entry.portalId)}</div>
 				{ UI.state.controllerOptions.options.multiclass.value === "true" ?
-						<div className="shortName">{self.getName(entry.name)}</div>
+						<div className={cx({'fastest': entry.scoreInfo.positionClass === 1, 'lap-time': true})}>{UI.formatTime(entry.scoreInfo.bestLapInfo.sector3, {ignoreSign: true})}</div>
 					:
-						<div className="longName">{self.getName(entry.name)}</div>
+						<div className={cx({'fastest': entry.scoreInfo.positionOverall === 1, 'lap-time': true})}>{UI.formatTime(entry.scoreInfo.bestLapInfo.sector3, {ignoreSign: true})}</div>
 				}
-				<div className="livery animated fadeInRight delay-1s">
-					<img src={'/render/'+entry.liveryId+'/small/'}/>
-				</div>
-				<div className="resultTeam">{self.getTeamName(entry.teamId, entry.portalId)}</div>
+				
 				{lapTime}
-				<div className={cx({'fastest': entry.isFastest, 'lap-time': true})}>{UI.formatTime(entry.scoreInfo.bestLapInfo.sector3, {ignoreSign: true})}</div>
 			</div>
 			:
 			null
diff --git a/assets/components/widgets/safetyCarDeployed/safetyCarDeployed.flat.less b/assets/components/widgets/safetyCarDeployed/safetyCarDeployed.flat.less
index 668c2af..8d8f1c4 100644
--- a/assets/components/widgets/safetyCarDeployed/safetyCarDeployed.flat.less
+++ b/assets/components/widgets/safetyCarDeployed/safetyCarDeployed.flat.less
@@ -4,17 +4,27 @@
   font-size: @fontSize;
   position: fixed;
   top: 7em;
-  left: 50%;
-  -webkit-transform: translate(-50%, 0) skew(-15deg, 0deg);
-   
+  left: 45%;
+  width: 15em;
+  line-height: 1.7em;
+  text-align: center;
+  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
+
+  .raceControl {
+    
+    background: #212934;
+    color: yellow;
+    font-size: @fontSize;
+    padding: 0.05em;
+    top: 0.1em;
+    z-index: 0;
+  }
   .safetyCarDeployed {
-    font-family: Oswald;
-  	background: @SafetyCarDeployedBackground;
-  	text-transform: uppercase;
-  	color: @SafetyCarDeployedText;
-  	height: 2em;
-    padding: 0.1em;
-  	line-height: 2em;
-  	text-align: center;
+    background: yellow;
+    color: black;
+    font-size: @fontSize * 1.3;
+    padding: 0.15em;
+    text-transform: capitalize;
+    z-index: -1;
   }
 }
diff --git a/assets/components/widgets/safetyCarDeployed/safetyCarDeployed.jsx b/assets/components/widgets/safetyCarDeployed/safetyCarDeployed.jsx
index 0877d43..0f8bb82 100644
--- a/assets/components/widgets/safetyCarDeployed/safetyCarDeployed.jsx
+++ b/assets/components/widgets/safetyCarDeployed/safetyCarDeployed.jsx
@@ -3,8 +3,11 @@ UI.widgets.SafetyCarDeployed = React.createClass({
 		var self = this;
 		return (
 			<div className="safetyCarDeployedContainer">
-				<div className="safetyCarDeployed animated flash infinite">{UI.getStringTranslation("safetyCarDeployedWidget", "safetyCar")}</div>
+			<div className="safetyCarDeployed animated flash infinite">{UI.getStringTranslation("safetyCarDeployedWidget", "safetyCar")}</div>
+				<div className="raceControl">{UI.getStringTranslation("safetyCarInWidget", "raceControl")}</div>
+	  			
 			</div>
+
 		);
 	}
 });
diff --git a/assets/components/widgets/safetyCarIn/safetyCarIn.flat.less b/assets/components/widgets/safetyCarIn/safetyCarIn.flat.less
index 35316e7..7b6b16e 100644
--- a/assets/components/widgets/safetyCarIn/safetyCarIn.flat.less
+++ b/assets/components/widgets/safetyCarIn/safetyCarIn.flat.less
@@ -1,34 +1,31 @@
 @import '../theme/z';
 
 .safetyAlert {
-  font-size: @fontSize * 1.1;
-  font-family: Oswald;
+  font-size: @fontSize;
+  font-family: Formula1-Regular;
 	position: fixed;
 	top: 12em;
   right: 5em;
 	text-transform: uppercase;
 	min-height: 1em;
-	width: 11em;
+	width: 15em;
 	line-height: 1.7em;
 	text-align: center;
 	display: inline-block;
-   
+  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
 
   .raceControl {
-    -webkit-transform: skew(-10deg, 0deg);
-    border-top: 3px solid @SafetyCarInTitleBorderTop;
-    background: @SafetyCarInTitleBackgroundColor;
-    color: @SafetyCarInTitleText;
-    font-size: @fontSize * 1.1;
+    background: #212934;
+    color: yellow;
+    font-size: @fontSize;
     padding: 0.05em;
     top: 0.1em;
     z-index: 0;
   }
   .safetyCarIn {
-    background: @SafetyCarInMessageBackground;
-    color: @SafetyCarInMessageText;
-    -webkit-transform: skew(-10deg, 0deg);
-    font-size: @fontSize * 1.1;
+    background: yellow;
+    color: black;
+    font-size: @fontSize * 1.3;
     padding: 0.15em;
     text-transform: capitalize;
     z-index: -1;
diff --git a/assets/components/widgets/safetyCarIn/safetyCarIn.jsx b/assets/components/widgets/safetyCarIn/safetyCarIn.jsx
index 379fc4c..757fc10 100644
--- a/assets/components/widgets/safetyCarIn/safetyCarIn.jsx
+++ b/assets/components/widgets/safetyCarIn/safetyCarIn.jsx
@@ -7,8 +7,8 @@ UI.widgets.SafetyCarIn = React.createClass({
 		var self = this;
 		return (
       <div className="safetyAlert animated fadeInRight">
+        <div className="safetyCarIn">{UI.getStringTranslation("safetyCarInWidget", "safetyCarInThisLap")}</div>
         <div className="raceControl">{UI.getStringTranslation("safetyCarInWidget", "raceControl")}</div>
-  			<div className="safetyCarIn">{UI.getStringTranslation("safetyCarInWidget", "safetyCarInThisLap")}</div>
       </div>
 		);
 	}
diff --git a/assets/components/widgets/sessionInfo/sessionInfo.flat.less b/assets/components/widgets/sessionInfo/sessionInfo.flat.less
index 29f662c..d5e545e 100644
--- a/assets/components/widgets/sessionInfo/sessionInfo.flat.less
+++ b/assets/components/widgets/sessionInfo/sessionInfo.flat.less
@@ -1,9 +1,10 @@
 @import '../theme/z';
 
 .session-info {
+filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.7));
 .inner {
-	font-size: @fontSize * 1.1;
-	font-family: Oswald;
+	font-size: @fontSize;
+	font-family: Formula1-Regular;
 	position: fixed;
 	top: 2em;
 	left: 50%;
@@ -11,32 +12,29 @@
 	text-align: center;
 
 
-.sessionInfoFlag, .sessionName, .checkered, .serverName, .countdown, .yellowFlag, .timer {
+.sessionInfoFlag, .sessionName, .timer, .checkered, .serverName, .countdown, .yellowFlag {
 	display: inline-block;
 	vertical-align: top;
 	height: 2em;
 	padding: 0em 1em;
-	transform: skew(-15deg, 0deg);
-	line-height: 1.8em;
+	line-height: 2em;
 	margin: 0px;
 }
 
 .sessionName {
 	min-width: 4em;
-	background: @SessionInfoPhaseBackground;
+	background: @primaryAccentBackground;
 	text-transform: uppercase;
-	border-top: 0.20em solid @SessionInfoPhaseBorderTop;
-	color: @SessionInfoPhaseTextColor;
+	color: #76FF03;
 }
 
 .timer {
 	min-width: 5em;
-	border-top: 0.20em solid @SessionInfoPhaseBorderTop;
-	background: @SessionInfoTimerBackground;
+	border-left: 0.20em solid #76FF03;
+	background: @primaryAccentBackground;
 	text-transform: uppercase;
-	color: @SessionInfoTimerTextColor;
+	color: white;
 	z-index: 2;
-	border-bottom-right-radius: 10px;
 }
 
 .yellowFlag {
@@ -45,9 +43,6 @@
 	background-color: yellow;
 	top: 1.8em;
 	left: 50%;
-	-webkit-transform: translate(-50%, 0);
-	border-bottom-left-radius: 1em;
-	border-bottom-right-radius: 1em;
 	height: 2em;
 	width: 9em;
 	z-index: 2;
@@ -56,16 +51,15 @@
 .countdown {
 	padding: 0em 0.3em;
 	min-width: 4em;
-	border-top: 0.20em solid @SessionInfoPhaseBorderTop;
-	background: @SessionInfoTimerBackground;
+	border-left: 0.20em solid #76FF03;
+	background: @primaryAccentBackground;
 	text-transform: uppercase;
-	color: @SessionInfoTimerTextColor;
-	line-height: 1.6em;
+	color: red;
 	z-index: -2;
 	.countdownIndicatorsRed {
 		z-index: -1;
 		font-size: @fontSize * 1.5;
-		color: rgba(226, 29, 56, 1);
+		color: red;
 	}
 }
 
@@ -75,7 +69,6 @@
 	height: 2em;
 	width: 3em;
 	img {
-		border-top-left-radius: 10px;
 		height: 2em;
 		width: 3em;
 		opacity: 1;
@@ -85,24 +78,20 @@
 .checkered {
 		margin: 0;
 		padding: 0;
-		width: 4em;
+		width: 5em;
 		font-size: @fontSize;
-		img {
-			border-top: 0.20em solid @SessionInfoPhaseBorderTop;
-			height: 2em;
-			width: 4em;
-			z-index: 2;
-	}
+		background: @primaryAccentBackground;
+		color: #76FF03;
+		border-left: 0.2em solid #76FF03;
 }
 
 .serverName{
 	margin: 0;
 	min-width: 4em;
-	border-top: 0.20em solid @SessionInfoPhaseBorderTop;
-	border-left: 0.1em solid @SessionInfoPhaseBorderTop;
-	background: @SessionInfoTimerBackground;
+	border-right: 0.2em solid #76FF03;
+	background: #212934;
 	text-transform: uppercase;
-	color: @SessionInfoTimerTextColor;
+	color: white;
 	z-index: 2;
 }
 
diff --git a/assets/components/widgets/sessionInfo/sessionInfo.jsx b/assets/components/widgets/sessionInfo/sessionInfo.jsx
index 6f79707..78d8096 100644
--- a/assets/components/widgets/sessionInfo/sessionInfo.jsx
+++ b/assets/components/widgets/sessionInfo/sessionInfo.jsx
@@ -86,28 +86,23 @@ UI.widgets.SessionInfo = React.createClass({
 				<div className="inner">
 					{p.sessionInfo.phase === 'GARAGE' ?
 						<div>
-							<div className="sessionInfoFlag">
-								<img src={'/img/flags/'+self.getCountryCode(p.eventInfo.trackId)+'.png'} />
-							</div>
-							<div className="sessionName">{nameLookup[p.sessionInfo.phase]}</div>
-							<div className="timer">{UI.formatSessionTime(Math.max(0, p.sessionInfo.timeLeft))}</div>
+							
 							{UI.state.controllerOptions.options.showServerNameInTimer.value === "true" ?
 								<div className="serverName">{p.eventInfo.serverName}</div>
 							:
 								null
 							}
+							<div className="sessionName">{nameLookup[p.sessionInfo.phase]}</div>
 						</div>
 						:
 						<div>
-							<div className="sessionInfoFlag">
-								<img src={'/img/flags/'+self.getCountryCode(p.eventInfo.trackId)+'.png'} />
-							</div>
-							<div className="sessionName">{nameLookup[p.sessionInfo.type]}</div>
+								
 								{UI.state.controllerOptions.options.showServerNameInTimer.value === "true" ?
 									<div className="serverName">{p.eventInfo.serverName}</div>
 								:
 									null
 								}
+								<div className="sessionName">{nameLookup[p.sessionInfo.type]}</div>
 								{p.sessionInfo.type.match(/^race/i) && p.sessionInfo.phase.match(/^countdown/i) ?
 									<div className="countdown">
 										<div className="animated fadeIn">
@@ -124,7 +119,7 @@ UI.widgets.SessionInfo = React.createClass({
 								}
 								{p.sessionInfo.phase === 'CHECKERED' ?
 									<div className="checkered">
-										<img src={'/img/checkered.jpg'} />
+										OVER
 									</div>
 								:
 									<div className="timer">{UI.formatSessionTime(Math.max(0, p.sessionInfo.timeLeft))}</div>
diff --git a/assets/components/widgets/trackMap/trackMap.flat.less b/assets/components/widgets/trackMap/trackMap.flat.less
index 68f513d..af81626 100644
--- a/assets/components/widgets/trackMap/trackMap.flat.less
+++ b/assets/components/widgets/trackMap/trackMap.flat.less
@@ -6,7 +6,7 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background: @TrackMapOverlayBackground;
+	background: rgba(0, 0, 0, 0.7);
 	.onCreation(opacity, 0, 1, 0.3s);
 	z-index: 0;
 }
@@ -51,18 +51,18 @@
 		  top: -1.5em;
 			border-top-left-radius: 1em;
 			border-bottom-left-radius: 1em;
-			color: @TrackMapDriverPositionText;
-			background: @StandingsDriverNameClassColour;
+			color: white;
+			background: #212121;
 		}
 		.driverName {
 			position: relative;
 			top: -3.5em;
-			background-color: @TrackMapDriverNameBackground;
+			background-color: #212121;
 			width: 6em;
 		}
 		.manufacturer {
 			position: relative;
-			background-color: @TrackMapManufacturerBackground;
+			background-color: white;
 			border-top-right-radius: 1em;
 			border-bottom-right-radius: 1em;
 			left: 5.8em;
@@ -71,7 +71,7 @@
 			top: -5.5em;
 			img {
 				position: absolute;
-				background-color: @TrackMapManufacturerBackground;
+				background-color: white;
 				top: 0.25em;
 				left: 0.25em;
 				height: 1.6em;
@@ -92,7 +92,7 @@
 			position: absolute;
 			-webkit-transform: translate(-50%, 0);
 			line-height: 1;
-			background: @backgroundDark;
+			background: rgba(38, 50, 56, 0.8);
 			padding: 0.25em;
 			color: #fff;
 			white-space: nowrap;
@@ -101,13 +101,13 @@
 			margin: 0 0 0.25em 0;
 		}
 		&.leader {
-			background:@TrackMapLeaderDotBackground;
-			color: @TrackMapLeaderDotText;
+			background: rgba(255, 152, 0,1.0);
+			color: rgba(255, 152, 0,1.0);
 			z-index: 1;
 		}
 		&.active {
-			background: @TrackMapSelectedDriverBackground;
-			color: @TrackMapSelectedDriverText;
+			background: #ffd113;
+			color: rgba(76, 175, 80, 1.0);
 			z-index: 2;
 		}
 	}
diff --git a/assets/components/widgets/trackMap/trackMap.jsx b/assets/components/widgets/trackMap/trackMap.jsx
index fed5800..c5bcd02 100644
--- a/assets/components/widgets/trackMap/trackMap.jsx
+++ b/assets/components/widgets/trackMap/trackMap.jsx
@@ -147,8 +147,8 @@ UI.widgets.TrackMap = React.createClass({
 var TrackMapDot = React.createClass({
 	getPosition: function(driver) {
 		var divStyle = {};
-		if (UI.state.controllerOptions.options.multiclass.value === "true" && UI.getClassColour(driver.classId) != null) {
-			classColour = UI.getClassColour(driver.classId);
+		if (UI.state.controllerOptions.options.multiclass.value === "true" && UI.getClassColour(driver.performanceIndex) != null) {
+			classColour = UI.getClassColour(driver.performanceIndex);
 			divStyle = {
 					background: classColour
 			};
diff --git a/assets/components/widgets/trackMap/trackMap.meta.json b/assets/components/widgets/trackMap/trackMap.meta.json
index 8308cfd..c0369f2 100644
--- a/assets/components/widgets/trackMap/trackMap.meta.json
+++ b/assets/components/widgets/trackMap/trackMap.meta.json
@@ -3,7 +3,7 @@
 	"elementName": "TrackMap",
 	"name": "Track map",
 	"keepOnSessionChange": false,
-	"activeInSessions": ["Practice", "Qualifying", "Race", "Warmup"],
+	"activeInSessions": [],
 	"defaultActive": false,
 	"translationLabel": "trackMapLabel",
 	"translationDescription": "trackMapDescription"
diff --git a/assets/deps/tracks.js b/assets/deps/tracks.js
index 065d3f0..953c8c3 100644
--- a/assets/deps/tracks.js
+++ b/assets/deps/tracks.js
@@ -3,296 +3,296 @@ var r3eTracks = {
     '262': {
       Name: 'RaceRoom Raceway',
       countryCode: "fr",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/raceroom-raceway-262-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/raceroom-raceway-262-logo-original.png",
       description: "RaceRoom Raceway is a 3.8 km long fictional track inspired by the French Alps. Main features of the track include elevation changes, two blind off-camber corners and a couple of very fast chicanes. It is a track that is easy to learn, but very hard to master."
     },
     '1670': {
       Name: 'Monza Circuit',
       countryCode: "it",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/monza-circuit-1670-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/monza-circuit-1670-logo-original.png",
       description: "A serene drive through the park this is not, more of a mad dash through the woods broken up by emergency braking for the chicanes. It’s the fastest track on the F1 calendar and the Parabolica curve will test man and machine to the limit. "
     },
     '1673': {
       Name: 'Mid Ohio',
       countryCode: "us",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/mid-ohio-1673-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/mid-ohio-1673-logo-original.png",
       description: "Located in the American heartland, this track is a real rollercoaster ride with enough challenges for even the most experienced drivers. Blind crests and technical sections bring excitement and passing opportunities to the three layouts."
     },
     '1677': {
       Name: 'Circuit Zandvoort',
       countryCode: "nl",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/circuit-zandvoort-1677-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/circuit-zandvoort-1677-logo-original.png",
       description: "Circuit Zandvoort is an old school race track located in the Netherlands, directly in the dunes near the coast line. The 4.3 km long track offers fast and sweeping corners as well as tight hairpins that provide excellent overtaking opportunities. It’s a real challenge and the drivers love it."
     },
     '1681': {
       Name: 'Lakeview Hillclimb',
       countryCode: "se",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/lakeview-hillclimb-1681-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/lakeview-hillclimb-1681-logo-original.png",
       description: "The Lakeview Hillclimb is a fictional hillclimb track influenced by Swedish nature. The 10.6 km long track takes you through the forest passing some beautiful lakes, giving you an authentic impression of the Swedish landscape."
     },
     '1683': {
       Name: 'Circuit Zolder',
       countryCode: "be",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/circuit-zolder-1683-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/circuit-zolder-1683-logo-original.png",
       description: "Located in Belgium, this undulating and highly entertaining track has been the scene for high level motor racing since its opening in 1963. Fast flowing corners and well implemented chicanes provide ample overtaking opportunities."
     },
     '1690': {
       Name: 'Nürburgring',
       countryCode: "de",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/nurburgring-1690-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/nurburgring-1690-logo-original.png",
       description: "A first class racing track, located right next to the famous Nordschleife but offering a very different challenge. A hairpin first corner gets you started and then the challenges never stop until you hit the back straight. A good track for multiple overtaking chances during a lap."
     },
     '1692': {
       Name: 'Hockenheimring',
       countryCode: "de",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/hockenheimring-1692-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/hockenheimring-1692-logo-original.png",
       description: "Redesigned in 2001, the new Hockenheimring Baden-Württemberg traditionally stages the DTM season kick-off as well as the final round of the season. The track demands precision driving, especially through the corner combinations in the Motodrom stadium complex."
     },
     '1705': {
       Name: 'RaceRoom Hillclimb',
       countryCode: "fr",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/raceroom-hillclimb-1705-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/raceroom-hillclimb-1705-logo-original.png",
       description: "The RR Hillclimb takes you on a mad dash up the dangerous switchback roads of the French Alps. Precision, focus and pure nerve is what you will need to be fast here. It is a long way to the top, but it is worth it."
     },
     '1771': {
       Name: 'Portimao Circuit',
       countryCode: "pt",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/portimao-circuit-1771-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/portimao-circuit-1771-logo-original.png",
       description: "The Autódromo Internacional do Algarve, also referred to as Portimao Circuit, is a 4.692 km circuit located in Portugal. The circuit contains many up and downhill sections leading into slow corners providing great passing options."
     },
     '1840': {
       Name: 'Suzuka Circuit',
       countryCode: "jp",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/suzuka-circuit-1840-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/suzuka-circuit-1840-logo-original.png",
       description: "Suzuka has been an icon of racing in the Far East for decades and it is one of few circuits in the world with a 'figure 8' layout, the back straight passing over the front section via an overpass. You get three layouts on this famed tarmac."
     },
     '1845': {
       Name: 'Bathurst Circuit',
       countryCode: "au",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/bathurst-circuit-1845-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/bathurst-circuit-1845-logo-original.png",
       description: "Bathurst is a motor racing track located in Bathurst, Australia. It is the home of the Bathurst 12 Hour motor race, held each February, and the Bathurst 1000 motor race, held each October. The track is 6.213 km long. When not used for racing this is a public road."
     },
     '1849': {
       Name: 'Imola',
       countryCode: "it",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/imola-1849-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/imola-1849-logo-original.png",
       description: "Imola, also known as the Autodromo Internazionale Enzo e Dino Ferrari is a 4.9 km long road circuit located near Bologna, Italy. The FIA Grade 1 licensed circuit has been hosting races for over 50 years, including Formula One events held under the name of San Marino Grand Prix. The track underwent several layout changes over its history to conform to modern safety standards. Famous corners such as the Tamburello, the Tosa hairpin, Acque Minerali and Rivazza still provide a thrilling experience on this all-time classic track."
     },
     '1851': {
       Name: 'Indianapolis',
       countryCode: "us",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/indianapolis-1851-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/indianapolis-1851-logo-original.png",
       description: "Tear up tarmac in the world's largest spectator sporting facility. The tight technical twists of the infield and the long drag race down the oval straight makes for a very diverse racing venue, and makes it vital to hit a balanced car setup."
     },
     '1853': {
       Name: 'Sonoma Raceway',
       countryCode: "us",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/sonoma-raceway-1853-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/sonoma-raceway-1853-logo-original.png",
       description: "Sonoma Raceway is a road course nestled among the Sonoma Mountains on the Pacific Coast of the United States. This popular race venue has shattered the silence of Northern California's wine country for nearly five decades! The World Touring Car Championship raced here in 2012 and 2013, and notable American series like NASCAR, IndyCar, and the NHRA have included the track in their championship schedules. Sonoma Raceway features 12 turns and 49 meters of elevation change over its 4.05 km length."
     },
     '1855': {
       Name: 'Mazda Laguna Seca',
       countryCode: "us",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/mazda-laguna-seca-1855-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/mazda-laguna-seca-1855-logo-original.png",
       description: "This is a fast flowing track with pronounced elevation changes; it is also home to the famous “Corkscrew”, one of the most iconic turns in all of motorsports. Braking hard over a blind crest before the plunge will get your pulse up."
     },
     '1865': {
       Name: 'Hungaroring',
       countryCode: "hu",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/hungaroring-1865-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/hungaroring-1865-logo-original.png",
       description: "Located in a natural valley in the Hungarian countryside, this track is fantastic for both spectators and drivers. The 4 km's of tarmac is quite varied and presents ample overtaking opportunities. Side by side racing action is the norm here."
     },
     '2020': {
       Name: 'Salzburgring',
       countryCode: "at",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/salzburgring-2020-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/salzburgring-2020-logo-original.png",
       description: "If roaring through alpine valleys with the throttle down while banging doors with rivals is your idea of a good time, you're going to love racing at Salzburgring! Host to touring car and motorcycle racing alike, this 4,241 km track is located in Austria east of its namesake, Salzburg."
     },
     '2021': {
       Name: 'Shanghai Circuit',
       countryCode: "cn",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/shanghai-circuit-2021-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/shanghai-circuit-2021-logo-original.png",
       description: "This circuit is host to the Chinese Grand Prix round of the Formula One World Championship. In addition to Formula One racing, Shanghai has played host to MotoGP, V8 Supercar, and WTCC races since its opening in 2004. Designed by Hermann Tilke, this 16 Turn 4.451 km long track is one of the most beautiful and challenging venues in all of motorsport."
     },
     '2029': {
       Name: 'Slovakia Ring',
       countryCode: "sk",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/slovakia-ring-2029-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/slovakia-ring-2029-logo-original.png",
       description: "Slovakia Ring is a 5.922 km circuit located in southwestern Slovakia. Completed in 2009, the course contains 14 turns and has hosted races for both ADAC GT Masters and World Touring Car Championships."
     },
     '2122': {
       Name: 'Macau',
       countryCode: "mo",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/macau-2122-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/macau-2122-logo-original.png",
       description: "Few, if any other, circuits around the world can claim a 60-year history using virtually the same layout, but that is precisely what Macau's Guia circuit has achieved. Since 1954, drivers have threaded their way through its precarious twists and turns, its big altitude variations and a very long main straight, making this track one of the most complete and challenging of the world."
     },
     '2383': {
       Name: 'Motorsport Arena Oschersleben',
       countryCode: "de",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/motorsport-arena-oschersleben-2383-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/motorsport-arena-oschersleben-2383-logo-original.png",
       description: "Oschersleben is tricky and selective track without much in elevation changes, but high on drama. The first corner is a left angle twisting directly into a long 180 degree turn, a certain recipe for close calls and traded paint. The tight chicane needs to be attacked aggressively."
     },
     '2467': {
       Name: 'EuroSpeedway Lausitz',
       countryCode: "de",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/eurospeedway-lausitz-2467-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/eurospeedway-lausitz-2467-logo-original.png",
       description: "Flat and with high levels of grip, the Lausitzring dares you to go too fast too soon. But to set a good lap, you need to be smooth and avoid errors in the infield section. Go easy on the high kerbs in the first hairpin or your lap will suffer."
     },
     '2472': {
       Name: 'Moscow Raceway',
       countryCode: "ru",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/moscow-raceway-2472-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/moscow-raceway-2472-logo-original.png",
       description: "Moscow Raceway is the first Russian circuit built to hold international motorsport events. The track layout is short and technical, but the long back straight is built for slipstreaming and late brake maneuvers. You will not go fast here until you get a feel for the blind corners."
     },
     '2517': {
       Name: 'Norisring',
       countryCode: "de",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/norisring-2517-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/norisring-2517-logo-original.png",
       description: "This famed street circuit is compact, uncompromising and deceptively tricky to master despite the simple layout. The walls are always close and the frantic breaking for the first hairpin turn can make or break your race. It is a lot of fun!"
     },
     '2519': {
       Name: 'Brands Hatch',
       countryCode: "gb",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/brands-hatch-2519-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/brands-hatch-2519-logo-original.png",
       description: "With dramatic corners, hills, dips and cambers, the Brands Hatch circuit is a serious test of driver skill. The blind entry to Paddock Hill Bend in particular remain one of the great tests of world racing, and never fails to offer drama and excitement."
     },
     '2521': {
       Name: 'Red Bull Ring Spielberg',
       countryCode: "at",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/red-bull-ring-spielberg-2521-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/red-bull-ring-spielberg-2521-logo-original.png",
       description: "A modern update on the legendary Österreichring, Red Bull Ring reviving the well-known corners and adding a few new twists to the set of challenges a complete lap offers. Tight corners and heavy braking means good overtaking opportunities."
     },
     '2812': {
       Name: 'Nordschleife',
       countryCode: "de",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/nordschleife-2812-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/nordschleife-2812-logo-original.png",
       description: "The Nürburgring Nordschleife is the longest, toughest and most terrifying track in racing today. The 'Green Hell' as it is known, twists and turns through the German Eifel mountains, providing a unique set of challenges. 160 unique turns, 22.8 kilometers and straights allowing you to reach dizzying top speeds, all have been minutely modelled based on laserscan data. Details down to the grafitti on track is recreated, and we are proud to now invite you to race this mythical track with any of the wide variety of RaceRoom cars. Racing and winning on the Nordschleife has always been very special. Tricky corners, treacherous crests, steep gradients and the constant close guardrails demand great skill from the driver and great understanding of your racing car. There is no comparison to taking on the Green Hell."
     },
     '2866': {
       Name: 'Paul Ricard',
       countryCode: "fr",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/paul-ricard-2866-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/paul-ricard-2866-logo-original.png",
       description: "Paul Ricard is a fixed stop on the calendar of all major racing teams, this is where the limits are tested. The signature blue markings on the track act as massive run-off areas, allowing teams to run at 101% without having to empty their car for gravel when it goes wrong. This challenging and fun track is catering to races from formula cars to GT and touring cars, it is a busy place, and one that you can now finally get to experience in detail."
     },
     '3463': {
       Name: 'Zhuhai Circuit',
       countryCode: "cn",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/zhuhai-circuit-3463-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/zhuhai-circuit-3463-logo-original.png",
       description: "The Zhuhai International Circuit was China's first permanent road circuit when it was built in 1996. The 4.3 km long FIA Grade II certified circuit was designed by the same group which created the Formula One circuit in Adelaide and was upgraded in 2004 by Tilke GmbH. It features 14 corners combining fast sweepers and slow hairpins that provide plenty of good overtaking opportunities. It hosted many races from series such as the FIA GT Championship, Endurance World Championship, A1 Grand Prix, GT Asia, Asian Le Mans Series & TCR Asia, making it the home of Chinese motorsport."
     },
     '3537': {
       Name: 'Sachsenring',
       countryCode: "de",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/sachsenring-3537-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/sachsenring-3537-logo-original.png",
       description: "Racing at Sachsenring began in 1927 on a long street based course. When modern race cars made roaring through the village too dangerous, a dedicated circuit was established. Today’s Sachsenring is a 3.671 km long and features many exciting elevation changes over its 14 turns."
     },
     '3869': {
       Name: 'Spa-Francorchamps',
       countryCode: "be",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/spa-francorchamps-3869-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/spa-francorchamps-3869-logo-original.png",
       description: "Spa-Francorchamps holds a special place in the hearts of most racing fans, and with good reason since nothing really compares. It is a historic crown jewel of motorsports and will test the mettle and skill of any race driver, especially through the single most famous corner in motorsports, famed Eau Rouge. Virtual or real, this corner will test your resolve and the setup of your car."
     },
     '4038': {
       Name: 'Silverstone Circuit',
       countryCode: "gb",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/silverstone-circuit-4038-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/silverstone-circuit-4038-logo-original.png",
       description: "Silverstone is also know as The Home Of British Motor Racing and it is one of the most well known and loved circuits in the world. The track has a long and glorious history which was built upon in 2010 where it had a massive facelift both to the layout and the facilities around the track. The main highlight for the race drivers is the introduction of the new 'Arena' layout, which has been designed to create better overtaking opportunities, while keeping the high speed corner combinations which make this track so unique. It is still a high speed circuit and it is still very demanding on both drivers and equipment, but now more than ever a wide range of skills are needed to take the podium here."
     },
     '4252': {
       Name: 'Chang International Circuit',
       countryCode: "th",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/chang-international-circuit-4252-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/chang-international-circuit-4252-logo-original.png",
       description: "Buriram is the latest exciting race track to burst on to the busy Far East racing scene. Since opening its doors in 2014, this brand new FIA Grade 1 rated facility has already hosted many national and international series, such as the Japanese Super GT, Asian Le Mans Series as well as the WTCC. The 4.5 km long track features a good mix of interesting corner combinations and a long straight providing a good overtaking opportunity. It also provides a tropical jungle scenery in the horizon, not a thing you often see from a race car."
     },
     '5275': {
       Name: 'Road America',
       countryCode: "us",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/road-america-5275-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/road-america-5275-logo-original.png",
       description: "Road America is a permanent road course located near Elkhart Lake in Wisconsin, USA. The 6.515 km long track has hosted races since the 1950s and has maintained its original layout since then. It features many elevation changes and long stretches of road where speeds above 300 km/h can be reached. The track is a regular part of the calendar in many different racing series such as the NASCAR Xfinity Series, WeatherTech SportsCar Championship, SCCA Pirelli World Challenge, ASRA, AMA Superbike series, IndyCar Series, and SCCA Pro Racing's Trans-Am Series."
     },
     '5300': {
       Name: 'Anderstorp',
       countryCode: "se",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/anderstorp-5300-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/anderstorp-5300-logo-original.png",
       description: "Anderstorp is a long standing marker in Swedish racing history, this is where the greats of Formula One battled in the glory days and where speed kings of Scandinavia were crowned for decades. The track combines a very long straight with cambered sweepers and tight hairpin turns. it demands a good setup of the car and precise lines from the driver to master. The tight final corner combination is always an invitation for last lap heroics, at Anderstorp your win is not certain until the very final meter."
     },
     '5924': {
       Name: 'Gelleråsen - Karlskoga Motorstadion',
       countryCode: "se",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/gellerasen-karlskoga-motorstadion-5924-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/gellerasen-karlskoga-motorstadion-5924-logo-original.png",
       description: "Karlskoga Motorstadion, also known as Gelleråsen is the oldest permanent motorsport race track in Sweden. The layout is such that the whole track can be seen from all spectator areas. The track is quite flat and open consisting of medium speed corner combinations with a very long sweeping turn leading in to the start/finish straight. While this may make it look like an easy drive, it also means that racing is close and intense. The overtaking zones will be hotly contested, so car positioning could be instrumental in securing the win."
     },
     '6009': {
       Name: 'Mantorp Park',
       countryCode: "se",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/mantorp-park-6009-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/mantorp-park-6009-logo-original.png",
       description: "Located in central Sweden, Mantorp Park opened the doors in 1962 and has remained a fun stop for many Scandinavian racing series since then. The track is short, twisty and intense and is known as a real rollercoaster for the drivers. Several turns are blind and demand both track knowledge and confidence to hit correct. Any mistake and a visit to the unforgiving armco is a near certainty, so don't start pushing the limits until you understand the lines. "
     },
     '6053': {
       Name: 'Stowe Circuit',
       countryCode: "gb",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/stowe-circuit-6053-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/stowe-circuit-6053-logo-original.png",
       description: "The Stowe configuration is located on the infield of Silverstone. It's a short but quite demanding lap, ideal to test your new cars. Stowe is easy to memorize but hard to perfect, and due to the close quarter nature of the venue it provides for spectacular action. You'll be surprised how often you end up coming back here for just one more lap."
     },
     '6136': {
       Name: 'Knutstorp Ring',
       countryCode: "se",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/knutstorp-ring-6136-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/knutstorp-ring-6136-logo-original.png",
       description: "Ring Knutstorp in Sweden is almost a miniature version of the Nordschleife. It's compact, it's hilly and for many Scandinavian racing hopefulls it is the place where they had their first true test of cornering technique and raw driving skill. Keep the speed down and it is a fun rollercoaster ride, but as you gain speed it becomes a serious challenge. There is no time to relax, no place to catch your breath and no forgiving run-off areas. You are truly all-in when pushing the limits at this relatively unknown gem of a track."
     },
     '6139': {
       Name: 'Falkenberg Motorbana',
       countryCode: "se",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/falkenberg-motorbana-6139-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/falkenberg-motorbana-6139-logo-original.png",
       description: "Located near the coast, Falkenberg is a favorite with the spectators. It is Sweden's fastest track showcasing a layout that is quite different from other Scandinavian tracks. The main straight ends in a tight chicane, but after that long sweeping high speed corners link together to one long series of direction changes through the entire lap. This one demands a well balanced car and a driver with good understanding of weight transfer and racing lines. "
     },
     '6340': {
       Name: 'Sepang',
       countryCode: "my",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/sepang-6340-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/sepang-6340-logo-original.png",
       description: "This 5.54 km circuit located near Kuala Lumpur in Malaysia was opened in 1999, and since then has been host to many racing series such as the F1 & Moto GP as well as the Super GT, Asian Le Mans Series, Blancpain GT Series Asia and TCR International. RaceRoom has once again partnered directly with Tilke GmbH to bring you the best possibly level of accuracy of the layout and its surroundings. The track consists of long straights followed by tight and slow corners providing good overtaking opportunities as well as incredibly fast corner combinations and some very technical turns that will challenge your driving techniques."
     },
     '6586': {
       Name: 'Dubai Autodrome',
       countryCode: "ae",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/dubai-autodrome-6586-logo-original.png"
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/dubai-autodrome-6586-logo-original.png"
     },
     '6657': {
       Name: 'Twin Ring Motegi',
       countryCode: "jp",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/twin-ring-motegi-6657-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/twin-ring-motegi-6657-logo-original.png",
       description: "This track is located near Motegi in Japan. The 4.8 km long road course is built in a stop-start straight-hairpin style, providing great overtaking opportunities, and is mostly known for hosting series such as the WTCC, Formula Nippon, Super GT, Formula 4 and MotoGP, making it one of the most popular tracks on the Asian continent."
     },
     '7111': {
       Name: 'Autodrom Most',
       countryCode: "cz",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/most-autodrom-7111-logo-original.png",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/most-autodrom-7111-logo-original.png",
       description: "This 4.2 km long circuit located in the northwest of the Czech Republic was built in 1983 and has since then regularly hosted many motorcycle, truck and car racing events. In 2018 it became part of the ADAC GT Masters calendar, proving to be an excellent motorsport venue and a real challenge for the drivers, with its high speed sections nicely embedded in the environment and a distinct lack of artificial run-off areas."
     },
     '7272': {
       Name: 'Ningbo International Speedpark',
       countryCode: "cn",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/ningbo-circuit-7272-logo-original.png"
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/ningbo-circuit-7272-logo-original.png"
     },
     '7818': {
       Name: 'Bilster Berg',
       countryCode: "de",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/bilster-berg-7818-logo-original.png"
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/bilster-berg-7818-logo-original.png"
     },
     '8074': {
       Name: 'Zhejiang Circuit',
       countryCode: "cn",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/zhejiang-circuit-8074-logo-original.png"
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/zhejiang-circuit-8074-logo-original.png"
     },
     '8366': {
       Name: 'Daytona Road Course',
       countryCode: "us",
-      trackLogoUrl: "http://game.raceroom.com/assets/content/track/daytona-road-course-8366-logo-original.png"
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/daytona-international-speedway-8366-logo-original.webp"
     },
     '8703': {
       Name: 'Motorland Aragón',
       countryCode: "es",
-      trackLogoUrl: "http://game.raceroom.com/r3e/assets/content/track/motorland-aragon-8703-logo-original.webp"
+      trackLogoUrl: "https://prod.r3eassets.com/r3e/assets/content/track/motorland-aragon-8703-logo-original.webp"
     },
     '9176': {
       Name: 'Watkins Glen International',
@@ -303,6 +303,56 @@ var r3eTracks = {
       Name: 'Brands Hatch Grand Prix',
       countryCode: "gb",
       trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/generic-9472-logo-original.webp"
+    },
+    '9464': {
+      Name: 'Vålerbanen',
+      countryCode: "no",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/valerbanen-9464-logo-original.webp"
+    },
+    '9176': {
+      Name: 'Watkins Glen International',
+      countryCode: "us",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/watkins-glen-international-9176-logo-original.webp"
+    },
+    '5297': {
+      Name: 'Brno',
+      countryCode: "cz",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/brno-5297-logo-original.webp"
+    },
+    '9657': {
+      Name: 'Nogaro Circuit Paul Armagnac',
+      countryCode: "fr",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/nogaro-circuit-paul-armagnac-9657-logo-original.webp"
+    },
+    '9984': {
+      Name: 'TT Assen Circuit',
+      countryCode: "nl",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/tt-circuit-assen-9984-logo-original.webp"
+    },
+    '1851': {
+      Name: 'Indianapolis 2012',
+      countryCode: "us",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/indianapolis-2012-1851-logo-original.webp"
+    },
+    '9942': {
+      Name: 'Indianapolis Motor Speedway',
+      countryCode: "us",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/indianapolis-motor-speedway-9942-logo-original.webp"
+    },
+    '10462': {
+      Name: 'Interlagos',
+      countryCode: "br",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/interlagos-10462-logo-original.webp"
+    },
+    '10393': {
+      Name: 'Donington Park',
+      countryCode: "uk",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/donington-park-10393-logo-original.webp"
+    },
+    '10903': {
+      Name: 'Circuit de Charade',
+      countryCode: "fr",
+      trackLogoUrl: "https://prod.r3eassets.com/assets/content/track/circuit-de-charade-10903-logo-original.webp"
     }
   }
 };
diff --git a/assets/deps/tyres.js b/assets/deps/tyres.js
deleted file mode 100644
index 7d794d2..0000000
--- a/assets/deps/tyres.js
+++ /dev/null
@@ -1,22 +0,0 @@
-var r3eTyreDB = {
-  classes: {
-    1704: {
-      name: "GTR 2"
-    },
-    4121: {
-      name: "Group C"
-    },
-    5383: {
-      name: "FR US Cup"
-    },
-    5824: {
-      name: "FR X-17 Cup"
-    },
-    7214: {
-      name: "FR 90 X Cup"
-    },
-    8600: {
-      name: "GTE"
-    }
-  }
-};