diff --git a/src/graphics/TeamGameIOU.tsx b/src/graphics/TeamGameIOU.tsx
index 1505e23..a8c98de 100644
--- a/src/graphics/TeamGameIOU.tsx
+++ b/src/graphics/TeamGameIOU.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useReplicant } from 'use-nodecg';
 //@ts-ignore
 import StreamOverlay from './2v2IOU.png'
@@ -21,26 +21,42 @@ export function TeamGameIOU() {
 	const [showSpoilerOverlay, set_showSpoilerOverlay] = useReplicant<boolean>('showSpoilerOverlay', true);
 	const [betweenText, set_betweenText] = useReplicant<string>('betweenText', '')
 
+	const [flipScore, set_flipScore] = useReplicant<boolean>('flipScore', false);
+
 	//
 	const [leftName, set_leftName] = useReplicant<string>('leftName', '', { namespace: 'aoe-4-civ-draft' });
 	const [rightName, set_rightName] = useReplicant<string>('rightName', '', { namespace: 'aoe-4-civ-draft' });
 
+	const [extraInfo1, set_extraInfo1] = useReplicant<string>('extraInfo1', '')
+	const [extraInfo2, set_extraInfo2] = useReplicant<string>('extraInfo2', '')
+
 	//Used if you have the Aoe-4-team-games bundle
 	const [leftSideIcon, set_leftSideIcon] = useReplicant<DropdownOption>('leftSideIcon', { value: '', label: '' }, { namespace: 'aoe-4-team-games' });
 	const [rightSideIcon, set_rightSideIcon] = useReplicant<DropdownOption>('rightSideIcon', { value: '', label: '' }, { namespace: 'aoe-4-team-games' });
 	const [showIcons, set_showIcons] = useReplicant<boolean>('showIcons', true, { namespace: 'aoe-4-team-games' });
 
+	const [theme, set_theme] = useReplicant<{ value: string; label: string; }>('theme', { value: '../../../assets/nodecg-themer/themes/default.css', label: 'default' }, { namespace: 'nodecg-themer' });
+
+	const [themeDiv, set_themeDiv] = useState(<></>)
+
+	useEffect(() => {
+		console.log(theme)
+		if (!theme) return;
+		console.log(theme)
+		set_themeDiv(<link rel='stylesheet' type='text/css' href={theme.value} />)
+	}, [theme])
 
 	return (
 		<>
-			<img src={StreamOverlay} style={{
+			{themeDiv}
+			<img src={StreamOverlay} className="teamGameImprovedObserverUI-scoreboardOverlay" style={{
 				position: 'absolute',
 				width: '100vw',
 				height: '100vh'
 			}} />
 
-			<h1 className='teamName leftName'>{leftName}</h1>
-			<h1 className='teamName rightName'>{rightName}</h1>
+			<h1 className='teamGameImprovedObserverUI-teamName teamGameImprovedObserverUI-leftName'>{leftName}</h1>
+			<h1 className='teamGameImprovedObserverUI-teamName teamGameImprovedObserverUI-rightName'>{rightName}</h1>
 
 			{showScore ? <div>
 				<img src={ScoreboardOverlay} style={{
@@ -50,19 +66,22 @@ export function TeamGameIOU() {
 				}} />
 
 				<div>
-					<ScoreDisplay score={leftScore} rotate={true} className={'leftScore'} />
-					<ScoreDisplay score={rightScore} rotate={true} className={'rightScore'} />
+					<ScoreDisplay score={leftScore} rotate={true} className={`teamGameImprovedObserverUI-scoreContainer ${flipScore ? 'teamGameImprovedObserverUI-rightScore' : 'teamGameImprovedObserverUI-leftScore'}`} />
+					<ScoreDisplay score={rightScore} rotate={true} className={`teamGameImprovedObserverUI-scoreContainer ${flipScore ? 'teamGameImprovedObserverUI-leftScore' : 'teamGameImprovedObserverUI-rightScore'}`} />
 				</div>
 
-				<h1 className='betweenText'>{betweenText}</h1>
+				<h1 className='teamGameImprovedObserverUI-betweenText'>{betweenText}</h1>
 			</div> : <> </>}
 
 			{showIcons ? <div>
-				<img src={leftSideIcon.value} className='leftSideIcon' />
+				<img src={leftSideIcon.value} className='teamGameImprovedObserverUI-leftSideIcon' />
 
-				<img src={rightSideIcon.value} className='rightSideIcon' />
+				<img src={rightSideIcon.value} className='teamGameImprovedObserverUI-rightSideIcon' />
 
 			</div> : <> </>}
+
+			<h1 className='teamGameImprovedObserverUI-extraInfo teamGameImprovedObserverUI-extraInfo1 hidden absolute'>{extraInfo1}</h1>
+			<h1 className='teamGameImprovedObserverUI-extraInfo teamGameImprovedObserverUI-extraInfo2 hidden absolute'>{extraInfo2}</h1>
 		</>
 	);
 }
diff --git a/src/graphics/TeamGameNoUI.html b/src/graphics/TeamGameNoUI.html
index 243cdd9..8e90a27 100644
--- a/src/graphics/TeamGameNoUI.html
+++ b/src/graphics/TeamGameNoUI.html
@@ -4,118 +4,7 @@
 <head>
 	<meta charset="UTF-8" />
 	<style>
-		@font-face {
-			font-family: Monsterrat;
-			src: url('Montserrat.ttf');
-		}
 
-		body {
-			font-family: Monsterrat;
-			font-weight: 900;
-			-webkit-font-smoothing: antialiased;
-			-moz-osx-font-smoothing: grayscale;
-			text-rendering: optimizeLegibility;
-		}
-
-		.rotate {
-			animation: rotation 120s infinite linear;
-		}
-
-		@keyframes rotation {
-			from {
-				transform: rotate(0deg);
-			}
-
-			to {
-				transform: rotate(359deg);
-			}
-		}
-
-		.rightScore img {
-			animation-direction: reverse;
-		}
-
-		.leftScore {
-			position: absolute;
-			transform: translate(-50%, -50%);
-			top: 3.5%;
-			left: 44.7%;
-		}
-
-		.rightScore {
-			position: absolute;
-			transform: translate(50%, -50%);
-			top: 3.5%;
-			right: 44.7%;
-		}
-
-		.scoreContainer img {
-			width: 90px;
-		}
-
-		.scoreContainer {
-			color: white;
-		}
-
-		.scoreContainer h1 {
-			position: absolute;
-			transform: translate(-50%, -50%);
-			top: 23%;
-			text-shadow: 2px 2px 0px #000000;
-			left: 50%;
-		}
-
-		.betweenText {
-			color: white;
-			transform: translate(-50%, -50%);
-			position: absolute;
-			text-shadow: 2px 2px 0px #000000;
-			top: -0.1%;
-			left: 50%;
-			font-size: x-large;
-		}
-
-		.spoilerCover {
-			position: absolute;
-			width: 100vw;
-			height: 100vh;
-		}
-
-		.leftSideIcon {
-			width: 80px;
-			height: 80px;
-			transform: translate(-50%, -50%);
-			position: absolute;
-			top: 4%;
-			left: 26.5%;
-		}
-
-		.rightSideIcon {
-			width: 80px;
-			height: 80px;
-			transform: translate(50%, -50%);
-			position: absolute;
-			top: 4%;
-			right: 26.5%;
-		}
-
-		.teamName {
-			text-transform: uppercase;
-			color: white;
-			top: 0%;
-		}
-
-		.leftName {
-			transform: translate(-50%, -50%);
-			position: absolute;
-			left: 35.9%;
-		}
-
-		.rightName {
-			transform: translate(50%, -50%);
-			position: absolute;
-			right: 35.9%;
-		}
 	</style>
 </head>
 
diff --git a/src/graphics/TeamGameNoUI.tsx b/src/graphics/TeamGameNoUI.tsx
index b556413..1616c4c 100644
--- a/src/graphics/TeamGameNoUI.tsx
+++ b/src/graphics/TeamGameNoUI.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useReplicant } from 'use-nodecg';
 //@ts-ignore
 import StreamOverlay from './2v2NO_IOU.png'
@@ -30,32 +30,45 @@ export function TeamGameNoUI() {
 	const [rightSideIcon, set_rightSideIcon] = useReplicant<DropdownOption>('rightSideIcon', { value: '', label: '' }, { namespace: 'aoe-4-team-games' });
 	const [showIcons, set_showIcons] = useReplicant<boolean>('showIcons', true, { namespace: 'aoe-4-team-games' });
 
+	const [flipScore, set_flipScore] = useReplicant<boolean>('flipScore', false);
+
+	const [theme, set_theme] = useReplicant<{ value: string; label: string; }>('theme', { value: '../../../assets/nodecg-themer/themes/default.css', label: 'default' }, { namespace: 'nodecg-themer' });
+
+	const [themeDiv, set_themeDiv] = useState(<></>)
+
+	useEffect(() => {
+		console.log(theme)
+		if (!theme) return;
+		console.log(theme)
+		set_themeDiv(<link rel='stylesheet' type='text/css' href={theme.value} />)
+	}, [theme])
 
 	return (
 		<>
-			<img src={StreamOverlay} style={{
+			{themeDiv}
+			<img src={StreamOverlay} className='teamGame-scoreboardOverlay' style={{
 				position: 'absolute',
 				width: '100vw',
 				height: '100vh'
 			}} />
 
-			<h1 className='teamName leftName'>{leftName}</h1>
-			<h1 className='teamName rightName'>{rightName}</h1>
+			<h1 className='teamGame-teamName teamGame-leftName'>{leftName}</h1>
+			<h1 className='teamGame-teamName teamGame-rightName'>{rightName}</h1>
 
 			{showScore ? <div>
 
 				<div>
-					<ScoreDisplay score={leftScore} rotate={true} className={'leftScore'} />
-					<ScoreDisplay score={rightScore} rotate={true} className={'rightScore'} />
+					<ScoreDisplay score={leftScore} rotate={true} className={`teamGame-scoreContainer ${flipScore ? 'teamGame-rightScore' : 'teamGame-leftScore'}`} />
+					<ScoreDisplay score={rightScore} rotate={true} className={`teamGame-scoreContainer ${flipScore ? 'teamGame-leftScore' : 'teamGame-rightScore'}`} />
 				</div>
 
-				<h1 className='betweenText'>{betweenText}</h1>
+				<h1 className='teamGame-betweenText'>{betweenText}</h1>
 			</div> : <> </>}
 
 			{showIcons ? <div>
-				<img src={leftSideIcon.value} className='leftSideIcon' />
+				<img src={leftSideIcon.value} className='teamGame-leftSideIcon' />
 
-				<img src={rightSideIcon.value} className='rightSideIcon' />
+				<img src={rightSideIcon.value} className='teamGame-rightSideIcon' />
 
 			</div> : <> </>}
 		</>