diff --git a/gulp/publish-frontend.js b/gulp/publish-frontend.js
index 3ae2ade..533de4a 100644
--- a/gulp/publish-frontend.js
+++ b/gulp/publish-frontend.js
@@ -1,4 +1,4 @@
-const version = '2.2.0';
+const version = require('../version');
 
 const gulp = require('gulp');
 const concat = require('gulp-concat');
@@ -43,6 +43,7 @@ const js_sources = [
 	'server/scripts/modules/extendedforecast.js',
 	'server/scripts/modules/almanac.js',
 	'server/scripts/modules/radar.js',
+	'server/scripts/modules/progress.js',
 	'server/scripts/modules/navigation.js',
 ];
 gulp.task('compress_js', () =>
@@ -79,6 +80,7 @@ gulp.task('compress_html', () =>
 	gulp.src(html_sources)
 		.pipe(ejs({
 			production: version,
+			version,
 		}))
 		.pipe(rename({extname: '.html'}))
 		.pipe(htmlmin({collapseWhitespace: true}))
diff --git a/index.js b/index.js
index 5d49e64..a603a50 100644
--- a/index.js
+++ b/index.js
@@ -15,15 +15,19 @@ const radarPassThru = require('./cors/radar');
 app.get('/stations/*', corsPassThru);
 app.get('/Conus/*', radarPassThru);
 
+// version
+const version = require('./version');
 
 const index = (req, res) => {
 	res.render(path.join(__dirname, 'views/index'), {
 		production: false,
+		version,
 	});
 };
 const twc3 = (req, res) => {
 	res.render(path.join(__dirname, 'views/twc3'), {
 		production: false,
+		version,
 	});
 };
 
diff --git a/server/scripts/modules/almanac.js b/server/scripts/modules/almanac.js
index ee45dd2..43cd949 100644
--- a/server/scripts/modules/almanac.js
+++ b/server/scripts/modules/almanac.js
@@ -4,7 +4,7 @@
 
 // eslint-disable-next-line no-unused-vars
 class Almanac extends WeatherDisplay {
-	constructor(navId,elemId,weatherParameters) {
+	constructor(navId,elemId) {
 		super(navId,elemId,'Almanac');
 
 		// pre-load background image (returns promise)
@@ -19,9 +19,6 @@ class Almanac extends WeatherDisplay {
 		];
 
 		this.backgroundImage = utils.image.load('images/BackGround3_1.png');
-
-		// get the data
-		this.getData(weatherParameters);
 	}
 
 	getData(weatherParameters) {
diff --git a/server/scripts/modules/currentweather.js b/server/scripts/modules/currentweather.js
index a024ef9..41e5060 100644
--- a/server/scripts/modules/currentweather.js
+++ b/server/scripts/modules/currentweather.js
@@ -3,13 +3,10 @@
 
 // eslint-disable-next-line no-unused-vars
 class CurrentWeather extends WeatherDisplay {
-	constructor(navId,elemId,weatherParameters) {
+	constructor(navId,elemId) {
 		super(navId,elemId,'Current Conditions');
 		// pre-load background image (returns promise)
 		this.backgroundImage = utils.image.load('images/BackGround1_1.png');
-
-		// get the data
-		this.getData(weatherParameters);
 	}
 
 	async getData(weatherParameters) {
diff --git a/server/scripts/modules/extendedforecast.js b/server/scripts/modules/extendedforecast.js
index be1d297..9e849ac 100644
--- a/server/scripts/modules/extendedforecast.js
+++ b/server/scripts/modules/extendedforecast.js
@@ -5,7 +5,7 @@
 
 // eslint-disable-next-line no-unused-vars
 class ExtendedForecast extends WeatherDisplay {
-	constructor(navId,elemId,weatherParameters) {
+	constructor(navId,elemId) {
 		super(navId,elemId,'Extended Forecast');
 
 		// set timings
@@ -13,10 +13,6 @@ class ExtendedForecast extends WeatherDisplay {
 
 		// pre-load background image (returns promise)
 		this.backgroundImage = utils.image.load('images/BackGround2_1.png');
-
-		// get the data
-		this.getData(weatherParameters);
-
 	}
 
 	async getData(weatherParameters) {
diff --git a/server/scripts/modules/latestobservations.js b/server/scripts/modules/latestobservations.js
index 33d4c24..7caab72 100644
--- a/server/scripts/modules/latestobservations.js
+++ b/server/scripts/modules/latestobservations.js
@@ -3,15 +3,13 @@
 
 // eslint-disable-next-line no-unused-vars
 class LatestObservations extends WeatherDisplay {
-	constructor(navId,elemId, weatherParameters) {
+	constructor(navId,elemId) {
 		super(navId,elemId,'Latest Observations');
 		// pre-load background image (returns promise)
 		this.backgroundImage = utils.image.load('images/BackGround1_1.png');
 
 		// constants
 		this.MaximumRegionalStations = 7;
-		// get the data
-		this.getData(weatherParameters);
 	}
 
 	async getData(weatherParameters) {
diff --git a/server/scripts/modules/localforecast.js b/server/scripts/modules/localforecast.js
index 184263d..2625eff 100644
--- a/server/scripts/modules/localforecast.js
+++ b/server/scripts/modules/localforecast.js
@@ -4,7 +4,7 @@
 
 // eslint-disable-next-line no-unused-vars
 class LocalForecast extends WeatherDisplay {
-	constructor(navId,elemId,weatherParameters) {
+	constructor(navId,elemId) {
 		super(navId,elemId, 'Local Forecast');
 
 		// set timings
@@ -12,9 +12,6 @@ class LocalForecast extends WeatherDisplay {
 
 		// pre-load background image (returns promise)
 		this.backgroundImage = utils.image.load('images/BackGround1_1.png');
-
-		// get the data
-		this.getData(weatherParameters);
 	}
 
 	async getData(weatherParameters) {
diff --git a/server/scripts/modules/navigation.js b/server/scripts/modules/navigation.js
index 72bfd3d..4f93576 100644
--- a/server/scripts/modules/navigation.js
+++ b/server/scripts/modules/navigation.js
@@ -1,7 +1,7 @@
 'use strict';
 // navigation handles progress, next/previous and initial load messages from the parent frame
-/* globals utils, _StationInfo, STATUS, draw */
-/* globals CurrentWeather, LatestObservations, TravelForecast, RegionalForecast, LocalForecast, ExtendedForecast, Almanac, Radar */
+/* globals utils, _StationInfo, STATUS */
+/* globals CurrentWeather, LatestObservations, TravelForecast, RegionalForecast, LocalForecast, ExtendedForecast, Almanac, Radar, Progress */
 
 document.addEventListener('DOMContentLoaded', () => {
 	navigation.init();
@@ -18,7 +18,7 @@ const navigation = (() => {
 	let initialLoadDone = false;
 	let currentUnits = UNITS.english;
 	let playing = false;
-	let backgroundImage;
+	let progress;
 
 	const init = async () => {
 		// set up message receive and dispatch accordingly
@@ -47,8 +47,6 @@ const navigation = (() => {
 				console.error(`Unknown event ${data.type}`);
 			}
 		}, false);
-		backgroundImage = await utils.image.load('images/BackGround1_1.png');
-		drawProgressCanvas();
 	};
 
 	const postMessage = (type, message = {}) => {
@@ -109,15 +107,19 @@ const navigation = (() => {
 				new Almanac(6, 'almanac', weatherParameters),
 				new Radar(7, 'radar', weatherParameters),
 			];
-		} else {
-			// or just call for new data if the canvases already exist
-			displays.forEach(display => display.getData(weatherParameters));
 		}
+		// call for new data on each display
+		displays.forEach(display => display.getData(weatherParameters));
 
 		// GetMonthPrecipitation(this.weatherParameters);
 		// GetAirQuality3(this.weatherParameters);
 		// ShowDopplerMap(this.weatherParameters);
 		// GetWeatherHazards3(this.weatherParameters);
+
+		// draw the progress canvas
+		progress = new Progress(-1,'progress');
+		progress.drawCanvas();
+		progress.showCanvas();
 	};
 
 	// receive a status update from a module {id, value}
@@ -127,10 +129,10 @@ const navigation = (() => {
 		// test for loaded status
 		if (value.status !== STATUS.loaded) return;
 
-		drawProgressCanvas();
+		progress.drawCanvas(displays, countLoadedCanvases());
 
 		// send loaded messaged to parent
-		if (countLoadedCanvases < displays.length) return;
+		if (countLoadedCanvases() < displays.length) return;
 		postMessage('loaded');
 		// store the display number
 	};
@@ -238,50 +240,6 @@ const navigation = (() => {
 		}
 	};
 
-	const drawProgressCanvas = () => {
-		const canvas = document.getElementById('progressCanvas');
-		const context = canvas.getContext('2d');
-
-		context.drawImage(backgroundImage, 0, 100, 640, 300, 0, 100, 640, 300);
-		draw.horizontalGradientSingle(context, 0, 90, 52, 399, draw.sideColor1, draw.sideColor2);
-		draw.horizontalGradientSingle(context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2);
-
-		displays.forEach((display, idx) => {
-			const y = 120 + idx*29;
-			const dots = Array(120 - Math.floor(display.name.length * 2.5)).join('.');
-			draw.text(context, 'Star4000 Extended', '19pt', '#ffffff', 70, y, display.name + dots, 2);
-
-			// Erase any dots that spill into the status text.
-			context.drawImage(backgroundImage, 475, y - 20, 165, 30, 475, y - 20, 165, 30);
-			draw.horizontalGradientSingle(context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2);
-
-			let statusText;
-			let statusColor;
-			switch (display.status) {
-			case STATUS.loading:
-				statusText = 'Loading';
-				statusColor = '#ffff00';
-				break;
-			case STATUS.loaded:
-				statusText = 'Press Here';
-				statusColor = '#00ff00';
-				break;
-			case STATUS.failed:
-				statusText = 'Failed';
-				statusColor = '#ff0000';
-				break;
-			case STATUS.noData:
-				statusText = 'No Data';
-				statusColor = '#C0C0C0';
-				draw.box(context, 'rgb(33, 40, 90)', 475, y - 15, 75, 15);
-				break;
-			default:
-			}
-			draw.text(context, 'Star4000 Extended', '19pt', statusColor, 565, y, statusText, 2, 'end');
-
-		});
-	};
-
 	return {
 		init,
 		updateStatus,
diff --git a/server/scripts/modules/progress.js b/server/scripts/modules/progress.js
new file mode 100644
index 0000000..0fd9686
--- /dev/null
+++ b/server/scripts/modules/progress.js
@@ -0,0 +1,98 @@
+// regional forecast and observations
+
+/* globals WeatherDisplay, utils, STATUS, draw */
+
+// eslint-disable-next-line no-unused-vars
+class Progress extends WeatherDisplay {
+	constructor(navId,elemId) {
+		super(navId, elemId);
+
+		// pre-load background image (returns promise)
+		this.backgroundImage = utils.image.load('images/BackGround1_1.png');
+
+		// disable any navigation timing
+		this.timing = false;
+
+		this.version = document.getElementById('version').innerHTML;
+	}
+
+	async drawCanvas(displays, loadedCount) {
+		super.drawCanvas();
+		// set up an event listener
+		if (!this.eventListener) {
+			this.eventListener = true;
+			this.canvas.addEventListener('click', (e) => this.canvasClick(e), false);
+		}
+
+		// get the background image
+		const backgroundImage = await this.backgroundImage;
+
+		// only draw the background once
+		if (!this.backgroundDrawn) {
+			this.context.drawImage(backgroundImage, 0, 0, 640, 480, 0, 0, 640, 480);
+			draw.horizontalGradientSingle(this.context, 0, 90, 52, 399, draw.sideColor1, draw.sideColor2);
+			draw.horizontalGradientSingle(this.context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2);
+			draw.horizontalGradientSingle(this.context, 0, 30, 500, 90, draw.topColor1, draw.topColor2);
+			draw.triangle(this.context, 'rgb(28, 10, 87)', 500, 30, 450, 90, 500, 90);
+			draw.titleText(this.context, 'WeatherStar', '4000+ ' + this.version);
+		}
+
+		this.finishDraw();
+		// if no displays provided just draw the backgrounds (above)
+		if (!displays) return;
+		displays.forEach((display, idx) => {
+			const y = 120 + idx*29;
+			const dots = Array(120 - Math.floor(display.name.length * 2.5)).join('.');
+			draw.text(this.context, 'Star4000 Extended', '19pt', '#ffffff', 70, y, display.name + dots, 2);
+
+
+			let statusText;
+			let statusColor;
+			switch (display.status) {
+			case STATUS.loading:
+				statusText = 'Loading';
+				statusColor = '#ffff00';
+				break;
+			case STATUS.loaded:
+				statusText = 'Press Here';
+				statusColor = '#00ff00';
+				this.context.drawImage(backgroundImage, 440, y - 20, 75, 25, 440, y - 20, 75, 25);
+				break;
+			case STATUS.failed:
+				statusText = 'Failed';
+				statusColor = '#ff0000';
+				break;
+			case STATUS.noData:
+				statusText = 'No Data';
+				statusColor = '#C0C0C0';
+				draw.box(this.context, 'rgb(33, 40, 90)', 475, y - 15, 75, 15);
+				break;
+			default:
+			}
+			// Erase any dots that spill into the status text.
+			this.context.drawImage(backgroundImage, 475, y - 20, 165, 30, 475, y - 20, 165, 30);
+			draw.text(this.context, 'Star4000 Extended', '19pt', statusColor, 565, y, statusText, 2, 'end');
+
+		});
+
+
+		// calculate loaded percent
+		const loadedPercent = (loadedCount/displays.length);
+
+		if (loadedPercent < 1.0) {
+			// Draw a box for the progress.
+			draw.box(this.context, '#000000', 51, 428, 534, 22);
+			draw.box(this.context, '#ffffff', 53, 430, 530, 18);
+			// update the progress gif
+			draw.box(this.context, '#1d7fff', 55, 432, 526*loadedPercent, 14);
+		} else {
+			// restore the background
+			this.context.drawImage(backgroundImage, 51, 428, 534, 22, 51, 428, 534, 22);
+		}
+
+	}
+
+	canvasClick(e) {
+		console.log(e);
+	}
+}
\ No newline at end of file
diff --git a/server/scripts/modules/radar.js b/server/scripts/modules/radar.js
index 8bd966b..d2a5807 100644
--- a/server/scripts/modules/radar.js
+++ b/server/scripts/modules/radar.js
@@ -3,7 +3,7 @@
 
 // eslint-disable-next-line no-unused-vars
 class Radar extends WeatherDisplay {
-	constructor(navId,elemId,weatherParameters) {
+	constructor(navId,elemId) {
 		super(navId,elemId,'Local Radar');
 
 		// set max images
@@ -14,9 +14,6 @@ class Radar extends WeatherDisplay {
 
 		// pre-load background image (returns promise)
 		this.backgroundImage = utils.image.load('images/BackGround4_1.png');
-
-		// get the data
-		this.getData(weatherParameters);
 	}
 
 	async getData(weatherParameters) {
diff --git a/server/scripts/modules/regionalforecast.js b/server/scripts/modules/regionalforecast.js
index 10bb36c..e140595 100644
--- a/server/scripts/modules/regionalforecast.js
+++ b/server/scripts/modules/regionalforecast.js
@@ -5,7 +5,7 @@
 
 // eslint-disable-next-line no-unused-vars
 class RegionalForecast extends WeatherDisplay {
-	constructor(navId,elemId, weatherParameters) {
+	constructor(navId,elemId) {
 		super(navId,elemId,'Regional Forecast');
 
 		// pre-load background image (returns promise)
@@ -13,12 +13,8 @@ class RegionalForecast extends WeatherDisplay {
 
 		// timings
 		this.timing.totalScreens = 3;
-
-		// get the data and update the promise
-		this.getData(weatherParameters);
 	}
 
-	// get the data from the globally shared object
 	async getData(weatherParameters) {
 		super.getData();
 		// pre-load the base map (returns promise)
diff --git a/server/scripts/modules/travelforecast.js b/server/scripts/modules/travelforecast.js
index 975df99..97c1d80 100644
--- a/server/scripts/modules/travelforecast.js
+++ b/server/scripts/modules/travelforecast.js
@@ -3,7 +3,7 @@
 
 // eslint-disable-next-line no-unused-vars
 class TravelForecast extends WeatherDisplay {
-	constructor(navId, elemId, weatherParameters) {
+	constructor(navId, elemId) {
 		// special height and width for scrolling
 		super(navId, elemId, 'Travel Forecast');
 		// pre-load background image (returns promise)
@@ -26,9 +26,6 @@ class TravelForecast extends WeatherDisplay {
 		if (extra !== 0) this.timing.delay.push(Math.round(this.extra*this.cityHeight));
 		// add the final 3 second delay
 		this.timing.delay.push(150);
-
-		// get the data
-		this.getData(weatherParameters);
 	}
 
 	async getData() {
diff --git a/server/scripts/modules/weatherdisplay.js b/server/scripts/modules/weatherdisplay.js
index 2498953..769a7ce 100644
--- a/server/scripts/modules/weatherdisplay.js
+++ b/server/scripts/modules/weatherdisplay.js
@@ -90,8 +90,6 @@ class WeatherDisplay {
 		// refresh the canvas
 		this.canvas = document.getElementById(this.elemId+'Canvas');
 		this.context = this.canvas.getContext('2d');
-		// clear the canvas
-		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 	}
 
 	finishDraw() {
@@ -136,7 +134,6 @@ class WeatherDisplay {
 		// if (OkToDrawCustomScrollText) DrawCustomScrollText(WeatherParameters, context);
 	}
 
-	// TODO: update clock automatically
 	drawCurrentDateTime(bottom) {
 		// only draw if canvas is active to conserve battery
 		if (!this.isActive()) return;
@@ -226,6 +223,9 @@ class WeatherDisplay {
 		// show the canvas
 		this.canvas.style.display = 'block';
 
+		// stop if timing has been disabled
+		if (!this.timing) return;
+
 		// reset timing
 		this.startNavCount(navigation.isPlaying());
 
diff --git a/server/scripts/twc3.js b/server/scripts/twc3.js
index 9162536..433c7bd 100644
--- a/server/scripts/twc3.js
+++ b/server/scripts/twc3.js
@@ -1,36 +1,16 @@
 /* globals _StationInfo, luxon, _RegionalCities, utils, icons, _TravelCities, SunCalc */
-const {DateTime} = luxon;
 const _DayShortNames = { 'Sunday': 'Sun', 'Monday': 'Mon', 'Tuesday': 'Tue', 'Wednesday': 'Wed', 'Thursday': 'Thu', 'Friday': 'Fri', 'Saturday': 'Sat' };
-const _DayLongNameArray = Object.keys(_DayShortNames);
-const _DayLongNames = { 'Sun': 'Sunday', 'Mon': 'Monday', 'Tue': 'Tuesday', 'Wed': 'Wednesday', 'Thu': 'Thursday', 'Fri': 'Friday', 'Sat': 'Saturday' };
-const _MonthLongNames = { 'Jan': 'January', 'Feb': 'February', 'Mar': 'March', 'Apr': 'April', 'May': 'May', 'Jun': 'June', 'Jul': 'July', 'Aug': 'August', 'Sep': 'September', 'Oct': 'October', 'Nov': 'November', 'Dec': 'December' };
 
 var canvasProgress;
 var divProgress;
 
-var divRegionalCurrentMap;
 var canvasRegionalObservations;
 
-var divRegionalForecastMap1;
-var divRegionalForecastMap2;
 var canvasRegionalForecast1;
 var canvasRegionalForecast2;
 
-var divDopplerRadarMap;
 var canvasLocalRadar;
 
-var divTemperature;
-var divStation;
-var divConditions;
-var divHumidity;
-var divIcon;
-var divDewpoint;
-var divCeiling;
-var divVisibility;
-var divWind;
-var divPressure;
-var divGust;
-var divHeatIndex;
 var canvasCurrentWeather;
 
 var canvasExtendedForecast1;
@@ -48,8 +28,6 @@ var canvasOutlook;
 var canvasMarineForecast;
 var canvasAirQuality;
 
-var tblTravelCities;
-var divTravelCitiesScroll;
 var canvasTravelForecast;
 
 var divOutlookTemp;
@@ -57,14 +35,10 @@ var cnvOutlookTemp;
 var divOutlookPrcp;
 var cnvOutlookPrcp;
 
-var tblRegionalObservations;
 var canvasLatestObservations;
 
 var _WeatherParameters = null;
 
-var _DopplerRadarInterval = null;
-var _DopplerRadarImageIndex = 0;
-var _DopplerRadarImageMax = 6;
 
 var LoadStatuses = {
 	Loading: 0,
@@ -73,7 +47,6 @@ var LoadStatuses = {
 	NoData: 3,
 };
 
-var _UpdateWeatherCanvasInterval = null;
 var _UpdateWeatherUpdateMs = 50;
 var canvasBackGroundDateTime = null;
 var canvasBackGroundCurrentConditions = null;
@@ -95,7 +68,6 @@ var _UpdateCustomScrollTextMs = 0;
 
 var _UpdateHazardsY = 0;
 
-var _UpdateLocalForecastIndex = 0;
 
 var CanvasTypes = {
 	Progress: 0,
@@ -117,33 +89,10 @@ var CanvasTypes = {
 	Hazards: 16,
 };
 var _FirstCanvasType = CanvasTypes.Progress;
-var _LastCanvasType = CanvasTypes.Hazards;
 var _CurrentCanvasType = _FirstCanvasType;
-var _CurrentPosition = 0.0;
-var _PreviousPosition = 0.0;
 
 var _IsPlaying = false;
-var _PlayIntervalId = null;
 
-var _IsAudioPlaying = false;
-var _AudioPlayIntervalId = null;
-var _AudioPlayInterval = 100;
-var _AudioFadeOutIntervalId = null;
-var _MusicUrls = [];
-var _MusicUrlsTemp = [];
-var audMusic = null;
-var _AudioContext = null;
-var _AudioBufferSource = null;
-var _AudioDuration = 0;
-var _AudioCurrentTime = 0;
-var _AudioGain = null;
-var _AudioRefreshIntervalId = null;
-
-var _IsNarrationPlaying = false;
-var _Utterance = false;
-var _CurrentUtterance = false;
-var _CurrentUtteranceId = null;
-var _IsSpeaking = false;
 
 const OperatingSystems = {
 	Unknown: 0,
@@ -698,80 +647,6 @@ $.fn.scrollIntoView = function () {
 };
 
 
-var _PlayInterval = 100;
-var _PlayMs = 0;
-var _PlayMsOffsets = {
-	Start: 0,
-	End: 0,
-	Length: 0,
-	CurrentWeather_Start: 0,
-	CurrentWeather_End: 10000,
-	CurrentWeather_Length: 10000,
-	CurrentWeather_Loaded: false,
-	LatestObservations_Start: 0,
-	LatestObservations_End: 0,
-	LatestObservations_Length: 10000,
-	LatestObservations_Loaded: false,
-	TravelForecast_Start: 0,
-	TravelForecast_End: 0,
-	TravelForecast_Length: 60000,
-	TravelForecast_Loaded: false,
-	RegionalForecast1_Start: 0,
-	RegionalForecast1_End: 0,
-	RegionalForecast1_Length: 10000,
-	RegionalForecast1_Loaded: false,
-	RegionalForecast2_Start: 0,
-	RegionalForecast2_End: 0,
-	RegionalForecast2_Length: 10000,
-	RegionalForecast2_Loaded: false,
-	RegionalObservations_Start: 0,
-	RegionalObservations_End: 0,
-	RegionalObservations_Length: 10000,
-	RegionalObservations_Loaded: false,
-	LocalForecast_Start: 0,
-	LocalForecast_End: 0,
-	LocalForecast_Length: 0,
-	LocalForecast_Loaded: false,
-	MarineForecast_Start: 0,
-	MarineForecast_End: 0,
-	MarineForecast_Length: 10000,
-	MarineForecast_Loaded: false,
-	AirQuality_Start: 0,
-	AirQuality_End: 0,
-	AirQuality_Length: 10000,
-	AirQuality_Loaded: false,
-	ExtendedForecast1_Start: 0,
-	ExtendedForecast1_End: 0,
-	ExtendedForecast1_Length: 10000,
-	ExtendedForecast1_Loaded: false,
-	ExtendedForecast2_Start: 0,
-	ExtendedForecast2_End: 0,
-	ExtendedForecast2_Length: 10000,
-	ExtendedForecast2_Loaded: false,
-	Almanac_Start: 0,
-	Almanac_End: 0,
-	Almanac_Length: 10000,
-	Almanac_Loaded: false,
-	AlmanacTides_Start: 0,
-	AlmanacTides_End: 0,
-	AlmanacTides_Length: 10000,
-	AlmanacTides_Loaded: false,
-	Outlook_Start: 0,
-	Outlook_End: 0,
-	Outlook_Length: 10000,
-	Outlook_Loaded: false,
-	LocalRadar_Start: 0,
-	LocalRadar_End: 0,
-	LocalRadar_Length: 15000,
-	LocalRadar_Loaded: false,
-	Hazards_Start: 0,
-	Hazards_End: 0,
-	Hazards_Length: 0,
-	Hazards_Loaded: false,
-};
-
-
-
 var canvasProgress_mousemove = function (e) {
 	canvasProgress.css('cursor', '');
 
@@ -884,23 +759,6 @@ var canvasProgress_click = function (e) {
 };
 
 
-String.prototype.centerText = function(numberOfSpaces) {
-	var text = this;
-	text = text.trim();
-	if (text.length > numberOfSpaces) {
-		return text;
-	}
-	var l = text.length;
-	var w2 = Math.floor(numberOfSpaces / 2);
-	var l2 = Math.floor(l / 2);
-	var s = new Array(w2 - l2).join(' ');
-	text = s + text + s;
-	if (text.length < numberOfSpaces) {
-		text += new Array(numberOfSpaces - text.length + 1).join(' ');
-	}
-	return text;
-};
-
 var PopulateHazardConditions = function (WeatherParameters) {
 	if (WeatherParameters === null || (_DontLoadGifs && WeatherParameters.Progress.Hazards !== LoadStatuses.Loaded)) {
 		return;
@@ -1109,96 +967,6 @@ Number.prototype.pad = function(size) {
 
 
 const Progress = function (e) {
-
-
-	const _ProgressInterval = window.setInterval(() => {
-		gifProgress.get_canvas().width = (ProgressPercent / 100) * 530 + 1;
-
-		if (ProgressPercent > 0) {
-			gifProgress.setX(53);
-			gifProgress.setY(430);
-		}
-
-		_DisplayLoadingDetails();
-		if (ProgressPercent >= 100) {
-			gifProgress.pause();
-			window.clearInterval(_ProgressInterval);
-			if (typeof _CallBack === 'function') _CallBack({ Status: 'LOADED', LastUpdate: new Date() });
-		}
-
-	}, 250);
-
-	const _DisplayLoadingDetails = () => {
-		context.drawImage(BackGroundImage, 0, 100, 640, 300, 0, 100, 640, 300);
-		DrawHorizontalGradientSingle(context, 0, 90, 52, 399, _SideColor1, _SideColor2);
-		DrawHorizontalGradientSingle(context, 584, 90, 640, 399, _SideColor1, _SideColor2);
-
-		const __DrawText = (caption, status) => {
-			let StatusText;
-			let StatusColor;
-
-
-
-			OffsetY += 29;
-		};
-
-		__DrawText('Current Conditions', WeatherParameters.Progress.CurrentConditions);
-		__DrawText('Latest Observations', WeatherParameters.Progress.NearbyConditions);
-		__DrawText('Travel Forecast', WeatherParameters.Progress.TravelForecast);
-		__DrawText('Regional Forecast', WeatherParameters.Progress.TomorrowsRegionalMap);
-		__DrawText('Regional Observations', WeatherParameters.Progress.CurrentRegionalMap);
-		__DrawText('Local Forecast', WeatherParameters.Progress.WordedForecast);
-		__DrawText('Extended Forecast', WeatherParameters.Progress.FourDayForecast);
-		__DrawText('Almanac', WeatherParameters.Progress.Almanac);
-		__DrawText('Local Radar', WeatherParameters.Progress.DopplerRadar);
-		__DrawText('Hazardous Weather', WeatherParameters.Progress.Hazards);
-
-	};
-
-	this.DrawProgress = async () => {
-		const DontLoadGifs = _DontLoadGifs;
-
-		BackGroundImage = await utils.loadImg('images/BackGround1_1.png');
-		_self.Loaded = false;
-
-		if (!DontLoadGifs || !gifProgress) {
-			// Conditions Icon
-			gifProgress = await utils.SuperGifAsync({
-				src: 'images/Progress1.gif',
-				loop_delay: 100,
-				auto_play: true,
-				canvas: canvas,
-				x: 50,
-				y: 480,
-			});
-		}
-
-		context.drawImage(BackGroundImage, 0, 0);
-		DrawHorizontalGradientSingle(context, 0, 30, 500, 90, _TopColor1, _TopColor2);
-		DrawTriangle(context, 'rgb(28, 10, 87)', 500, 30, 450, 90, 500, 90);
-
-		canvasBackGroundDateTime[0].getContext('2d').drawImage(canvas, 410, 30, 175, 60, 0, 0, 175, 60);
-		canvasBackGroundCurrentConditions[0].getContext('2d').drawImage(canvas, 0, 405, 640, 75, 0, 0, 640, 75);
-
-		DrawTitleText(context, 'WeatherStar', '4000+ 2.00');
-
-		// Draw a box for the progress.
-		DrawBox(context, '#000000', 51, 428, 534, 22);
-		DrawBox(context, '#ffffff', 53, 430, 530, 18);
-
-		_DisplayLoadingDetails();
-
-		UpdateWeatherCanvas(WeatherParameters, canvasProgress);
-
-		_self.Loaded = true;
-
-		if (DontLoadGifs === false)e.OnLoad();
-
-	};
-	this.DrawProgress();
-};
-
-
 const DrawCustomScrollText = (WeatherParameters, context) => {
 	const font = 'Star4000';
 	const size = '24pt';
@@ -1215,9 +983,6 @@ const DrawCustomScrollText = (WeatherParameters, context) => {
 	context.drawImage(canvasBackGroundCurrentConditions[0], 0, 0, 640, 75, 0, 405, 640, 75);
 
 	const text = _ScrollText;
-	//text = "WELCOME TO THE WEATHER STAR 4000+! IF YOU ARE ENJOYING THIS SITE THEN YOU WILL LOVE THE WEATHER STAR 4000 SIMULATOR!";
-	//text = "Hello World!";
-	//text = "A";
 
 	x = 640 - ((_UpdateCustomScrollTextMs / _UpdateWeatherUpdateMs) * 5);
 	// Wait an extra 5 characters.
diff --git a/version.js b/version.js
new file mode 100644
index 0000000..92a1b7a
--- /dev/null
+++ b/version.js
@@ -0,0 +1 @@
+module.exports = '2.2.0';
\ No newline at end of file
diff --git a/views/twc3.ejs b/views/twc3.ejs
index bbb8fb7..bccdfd4 100644
--- a/views/twc3.ejs
+++ b/views/twc3.ejs
@@ -34,12 +34,13 @@
     <script type="text/javascript" src="scripts/modules/extendedforecast.js"></script>
     <script type="text/javascript" src="scripts/modules/almanac.js"></script>
     <script type="text/javascript" src="scripts/modules/radar.js"></script>
+	<script type="text/javascript" src="scripts/modules/progress.js"></script>
 	<script type="text/javascript" src="scripts/modules/navigation.js"></script>
 	<% } %>
 </head>
 <body>
+	<div id="version" style="display:none"><%- version %> </div>
 	<div id="container">
-    	<canvas id="progressCanvas" width="640" height="480"></canvas>
 	</div>
    
 </body>