diff --git a/.vscode/settings.json b/.vscode/settings.json
index 5eb6807..34428d1 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
-    // "liveServer.settings.port": 5501;
-    editor.disableMonospaceOptimizations: true;
+    "liveServer.settings.port": 5501,
+    "editor.disableMonospaceOptimizations": true
 }
\ No newline at end of file
diff --git a/app/app.js b/app/app.js
index 39ce7bc..f539d19 100644
--- a/app/app.js
+++ b/app/app.js
@@ -36,51 +36,68 @@ var router = new VueRouter({
 var app = new Vue({
 	el: '#app',
 	router: router,
-    components: 
-    {
+	components: 
+	{
+	},
+
+	data: 
+	{
+		status: "loading",
+
+		sections: {},
+		/**
+		 * Details of the  current page/route.
+		 */
+		activePage: {
+			id: "",
+			title: "",
+			fontAwesomeIconCss: ""
 		},
 
-    data: 
-    {
-			status: "loading",
+		countryCodes: [],
 
-			sections: {},
-			/**
-			 * Details of the  current page/route.
-			 */
-			activePage: {
-				id: "",
-				title: "",
-				fontAwesomeIconCss: ""
-			},
+		currentVersion: "",
 
-			countryCodes: []
-    },    
+		versions: []
+	},    
 
-    created()
-		{
-			this.sections = models.newDefaultSections();
-			console.log("this.sections=", this.sections);
+	created()
+	{
+		this.sections = models.newDefaultSections();
+		// this.versons = [];
+		this.versions = storage.getLocalStorage("versions");
+		this.currentVersion = "";
 
-			//-- Register all components
-			pageComponents.registerComponents();
+		// console.log("this.sections=", this.sections);
 
-			//-- Get the component for the initial route path
-			var initialRoute = this.$route.path;
-			var component = pageComponents.getComponentByPath(initialRoute);
-			this.setActivePageByComponent(component);
-    },
-	
+		//-- Register all components
+		pageComponents.registerComponents();
 
-    destroyed() 
-    {
-		},
+		//-- Get the component for the initial route path
+		var initialRoute = this.$route.path;
+		var component = pageComponents.getComponentByPath(initialRoute);
+		this.setActivePageByComponent(component);
+	},
 
 
-    mounted() 
-    {
+	destroyed() 
+	{
+	},
+
+
+	mounted() 
+	{
 		this.loadCountryCodes();
 		this.loadFromStorage();
+		this.currentVersion = this.$root.sections.meta.version
+		// Quick Fix
+		storage.setVersionedLocalStorage(this.currentVersion, "sections", this.$root.sections);
+		// console.log([this.$root.sections.meta.version,this.$root.sections]);
+		//if (!this.availableVersions.hasKey(this.$root.sections.meta.version))
+		//	this.availableVersions.push(this.$root.sections.meta.version);
+		// console.log([this.versions[0],storage.getVersionedLocalStorage(this.versions[0])]);
+
+		// this.availableVersions = this.$root.availableVersions;
 
 		// Set the "current" main navigation item based on the current route.
 		this.selectMenuItemForCurrentUrl();
@@ -109,7 +126,19 @@ var app = new Vue({
 			this.activePage.fontAwesomeIconCss = component.fontAwesomeIcon;
     },
 		
-		
+		onVersionChange: function() {
+			//Save previous state
+			storage.setVersionedLocalStorage(this.$root.sections.meta.version,"sections",this.$root.sections);
+			
+			// console.log(["version",this.currentVersion,this.$root.sections.meta.version]);
+
+			this.$root.sections = storage.getVersionedLocalStorage(this.currentVersion,"sections");
+			// console.log(["Root Sections",this.$root.sections]);
+			storage.setLocalStorage(this.$root.sections); // Perhaps optimisation to come
+
+			//console.log(["version",this.currentVersion,this.$root.sections.meta.version]);
+
+		},
 
 		/**
 		 * Reset and clear the details of the active page.
@@ -120,13 +149,21 @@ var app = new Vue({
 			this.activePage.title = "";
 			this.activePage.fontAwesomeIconCss = "";
 		},
-
+		/*
+		 *
+		 */
 		loadFromStorage: function()
 		{
 			var savedData = storage.getLocalStorage("sections");
 			this.populateSections(savedData);
 		},
 
+		loadVersionFromStorage: function(version)
+		{
+			var savedData = storage.getLocalStorageVersion(version,"sections");
+			this.populateSections(savedData);
+		},
+
 		populateSections: function(data)
 		{
 			if (data)
@@ -141,9 +178,10 @@ var app = new Vue({
 				}
 			}
 		},
+
 		loadCountryCodes: function()
 		{
-			console.log("loadCountryCodes(): data", countryCodes);
+			// console.log("loadCountryCodes(): data", countryCodes);
 
 			this.countryCodes.push({
 				"code": "",
@@ -159,7 +197,6 @@ var app = new Vue({
 			}
 		},
 
-
 		getCountryName: function(countryCode)
 		{
 			for (var i = 0; i < this.countryCodes.length; i++)
@@ -174,12 +211,11 @@ var app = new Vue({
 
 			return "";
 		},
+
 		displayLocation: function()
 		{
 			return this.sections.basics.location.city + ", " + this.getCountryName(this.sections.basics.location.countryCode);
 		},
-		
-
 
 		skillLevelAsPercent: function(index)
 		{
@@ -202,6 +238,7 @@ var app = new Vue({
 				return 50;
 			}
 		},
+
 		languageFluencyAsPercent: function(index)
 		{
 			if (!this.$root.sections.skills[index]) {
@@ -280,6 +317,7 @@ var app = new Vue({
 
 			return false;
 		},
+
 		saveResume: function()
 		{
 			var response = confirm("Resume saved");
diff --git a/components/import.js b/components/import.js
index ef242da..f357505 100644
--- a/components/import.js
+++ b/components/import.js
@@ -1,35 +1,29 @@
 var importComponent = {
 	template: '#import-template',
 
-	
-
 	mounted: function()
 	{
+
 		
 	},
 
-
-
 	destroyed: function()
 	{
 		
 	},
 
-
-	
 	data: function()
 	{
 		return {
+			item: {},
 			json: ""
 		};
 	},
 
-	
-
 	methods: {
 		importJson: function()
 		{
-			console.log("import JSON: " + this.json);
+			// console.log("import JSON: " + this.json);
 
 			var data = JSON.parse(this.json);
 
@@ -40,13 +34,61 @@ var importComponent = {
 
 			storage.setLocalStorage("sections", this.$root.sections);
 
+			storage.setVersionedLocalStorage(this.$root.sections.meta.version, "sections", this.$root.sections);
+
 			router.push("section/basics");
 		},
 
-
 		validateJson: function(value)
 		{
 
+		},
+
+		importVersion: function(version) {
+			//console.log(version);
+			this.$root.sections = storage.getVersionedLocalStorage(version,"sections");
+			storage.setLocalStorage("sections",this.$root.sections);
+			this.$root.currentVersion = version;
+			this.$root.loadFromStorage();
+
+			router.push("section/basics");
+		},
+
+		deleteVersion: function(version) {
+			var versions = storage.getLocalStorage("versions");
+			var index = versions.indexOf(version);
+			if (index > -1 && confirm("Are you sure you wish to delete " + version + "?")) {
+				versions.splice(index, 1);
+				storage.setVersionedLocalStorage(version,"sections",null);
+				storage.setLocalStorage("versions",versions);
+				this.$root.versions = versions;
+			}
+		},
+
+		deleteClicked: function(index)
+		{
+			console.log(index);
+			var response = confirm("Are you sure you want to delete this position? " + index);
+
+			if (response == true)
+			{
+				this.$root.versions.splice(index, 1);
+			}
+		},
+
+
+		moveUpClicked: function(index)
+		{
+			console.log(index);
+			this.$root.moveArrayPosition(this.$root.versions, index, index - 1);
+		},
+
+
+		moveDownClicked: function(index)
+		{
+			console.log(index);
+			this.$root.moveArrayPosition(this.$root.versions, index, index + 1);
 		}
+
 	}
 };
\ No newline at end of file
diff --git a/index.html b/index.html
index 6155180..c304b13 100644
--- a/index.html
+++ b/index.html
@@ -57,8 +57,14 @@
             <nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar">
                 <div class="w3-bar-block">
                     <a href="#/" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fas fa-home"></i>&nbsp; Home</a>
-                    <a v-bind:href="this.sections.meta.canonical" v-if="this.sections.meta.canonical != ''" target="_new" class="w3-bar-item w3-button w3-padding w3-blue">{{ this.sections.meta.version }}</a>
-                    <span v-else  class="w3-bar-item w3-button w3-padding w3-blue">{{ this.sections.meta.version }}</span><span  v-if="this.sections.meta.lastModified != ''"  class="w3-bar-item w3-button w3-padding w3-blue">({{ this.sections.meta.lastModified}})</span>
+                    <form>
+                    <select name="currentVersion" v-model="currentVersion" @change="onVersionChange()">
+                    <option v-for="(version, v_index) in this.$root.versions">
+                            {{ version }}
+                    </option>
+                    </select>
+                    </form>
+                    <a v-bind:href="this.sections.meta.canonical" v-if="this.sections.meta.canonical != ''" target="_new" class="w3-bar-item w3-button w3-padding "><i class="fas fa-link"></i> link ({{ this.sections.meta.lastModified}})</a>
                 </div>
                 <div class="w3-container w3-margin-top">
                     <h5>Sections</h5>
@@ -164,8 +170,6 @@
             </div>
         </template>
 
-
-
         <template type="text/x-template" id="section-basics-template" lang="html">
             <div id="section-basics-root">
                 <div class="w3-row">
@@ -405,8 +409,6 @@
             </div>
         </template>
 
-
-
         <template type="text/x-template" id="section-volunteer-template" lang="html">
             <div id="section-volunteer-root">
                 <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addPosition">+ Add Position</button>
@@ -482,8 +484,6 @@
             </div>
         </template>
 
-
-
         <template type="text/x-template" id="section-education-template" lang="html">
             <div id="section-education-root">
                 <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addEducation">+ Add Education</button>
@@ -558,8 +558,6 @@
             </div>
         </template>
 
-
-
         <template type="text/x-template" id="section-awards-template" lang="html">
             <div id="section-awards-root">
                 <p>
@@ -608,8 +606,6 @@
             </div>
         </template>
 
-
-
         <template type="text/x-template" id="section-publications-template" lang="html">
             <div id="section-publications-root">
                 <p>
@@ -664,8 +660,6 @@
             </div>
         </template>
 
-
-
         <template type="text/x-template" id="section-skills-template" lang="html">
             <div id="section-skills-root">
                 <p>
@@ -719,8 +713,6 @@
             </div>
         </template>
 
-
-
         <template type="text/x-template" id="section-languages-template" lang="html">
             <div id="section-languages-root">
                 <p>
@@ -757,8 +749,6 @@
             </div>
         </template>
 
-
-
         <template type="text/x-template" id="section-interests-template" lang="html">
             <div id="section-interests-root">
                 <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addInterest">+ Add Interest</button>
@@ -804,8 +794,6 @@
             </div>
         </template> 
 
-
-
         <template type="text/x-template" id="section-references-template" lang="html">
             <div id="section-references-root">
                 <p>
@@ -842,8 +830,6 @@
             </div>
         </template>
 
-
-
         <template type="text/x-template" id="section-projects-template" lang="html">
             <div id="section-projects-root">
                 <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addProject">+ Add Project</button>
@@ -949,8 +935,6 @@
             </div>
         </template>
 
-        
-
         <template type="text/x-template" id="preview-resume-template" lang="html">
             <div id="preview-resume-root">
                 <!-- Page Container -->
@@ -1236,8 +1220,6 @@
             </div>
         </template>
 
-
-
         <template type="text/x-template" id="preview-single-field-template" lang="html">
             <div id="preview-single-field-root">
                 <div class="w3-row w3-margin-bottom" v-if="displayFormat == '' || displayFormat == 'url' || displayFormat == 'multi-line' || displayFormat == 'email' || displayFormat == 'phone' || displayFormat == 'date'">
@@ -1266,8 +1248,6 @@
             </div>
         </template>
 
-
-
         <template type="text/x-template" id="card-header-template" lang="html">
             <div id="card-header-root">
                 <header class="w3-container w3-dark-grey w3-padding-16" v-bind:id="'header' + id">
@@ -1285,8 +1265,6 @@
             </div>
         </template>
 
-
-
         <template type="text/x-template" id="sorted-input-item-template" lang="html">
             <div id="sorted-input-item-root">
                 <div class="" v-bind:id="'item' + id">
@@ -1304,20 +1282,30 @@
             </div>
         </template>
 
-
-
         <template type="text/x-template" id="import-template" lang="html">
             <div id="import-root">
                 <p>
-                    Past existing resume JSON and import to continue editing.
+                    Paste existing resume JSON and import to continue editing.
                 </p>
                 <textarea rows="20" class="w3-input w3-border" type="text" v-model="json"></textarea>
                 <button class="w3-btn w3-white w3-border w3-border-blue w3-round" v-on:click="importJson">Import</button>
+                <br/>
+                <BR/>
+                <form class="w3-card-4  margin-top-32" v-for="(version, v_index) in this.$root.versions">
+                    <card-header v-bind:label="version" v-bind:id="v_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
+
+                    <div class="w3-container w3-hide" v-bind:id="'content' + v_index">
+                        <button class="w3-btn w3-white w3-border w3-border-blue w3-round" v-on:click="importVersion(version,$event)">
+                            Load {{ version }}
+                        </button>
+                        <button class="w3-btn w3-white w3-border w3-border-blue w3-round" v-on:click="deleteVersion(version,$event)">
+                            Delete {{ version }}
+                        </button>
+                    </div>
+                </form>
             </div>
         </template>
 
-
-
         <template type="text/x-template" id="export-template" lang="html">
             <div id="export-root">
                 <p>
@@ -1327,8 +1315,6 @@
             </div>
         </template>
 
-
-
         <template type="text/x-template" id="about-template" lang="html">
             <div id="export-root">
                 <p>
@@ -1368,10 +1354,10 @@
 
         <script type="text/javascript" src="vendor/vue.2.6.10.js"></script>
         <script type="text/javascript" src="vendor/vue-router.3.1.3.js"></script>
-
         <script type="text/javascript" src="vendor/markdown-it-10.0.0.js"></script>
 
         <script type="text/javascript" src="app/page_registration.js"></script>
+
         <script type="text/javascript" src="components/home.js"></script>
         <script type="text/javascript" src="components/section_basics.js"></script>
         <script type="text/javascript" src="components/section_work.js"></script>
@@ -1391,6 +1377,7 @@
         <script type="text/javascript" src="components/import.js"></script>
         <script type="text/javascript" src="components/export.js"></script>
         <script type="text/javascript" src="components/about.js"></script>
+
         <script type="text/javascript" src="app/app.js"></script>
         
         <!-- /Scripts -->
diff --git a/scripts/storage.js b/scripts/storage.js
index 2a01bd2..fe0d608 100644
--- a/scripts/storage.js
+++ b/scripts/storage.js
@@ -3,33 +3,68 @@
  */
 var storage = {
 
+    getCurrentVersion: function()
+    {
+        console.log("storage getCurrentVersion" + this.getLocalStorage('sections.meta.version'));
+
+        return this.getLocalStorage('sections.meta.version');
+    },
+
+    getAvailableVersions: function()
+    {
+        return storage.getLocalStorage("versions");
+    },
+
     setLocalStorage: function(key, value)
     {
         var jsonValue = JSON.stringify(value);
         localStorage.setItem(key, jsonValue);
     },
 
+    setVersionedLocalStorage: function(version, key, value)
+    {
+        var jsonValue = JSON.stringify(value);
+        key = "versions." + version + "." + key;
+        localStorage.setItem(key, jsonValue);
+        this.versions = [];
+        if (this.getLocalStorage("versions")) {
+            this.versions = this.getLocalStorage("versions");
+        }
+        if (!this.versions.includes(version)) {
+            this.versions.push(version);
+        }
+        // versions.push(version);
+        // console.log([version, key, value, versions]);
 
+        this.setLocalStorage("versions",this.versions);
+    },
 
     getLocalStorage: function(key)
     {
-        jsonValue = localStorage.getItem(key);
-        
+        // console.log(key);
 
         var value = null;
         
-        if (jsonValue)
+        if (key)
         {
-            value = JSON.parse(jsonValue);
+            value = JSON.parse(localStorage.getItem(key));
         }
-        
+        // console.log(value);
         return value;
+
+        //return this.parseJSON2Native(localStorage.getItem(key));
+    },
+    /*
+    * @TODO optimize
+    */ 
+    getVersionedLocalStorage: function(version, key)
+    {
+        return this.getLocalStorage("versions." + version + "." + key);
     },
-
-
 
     clearLocalStorage: function(key)
     {
         localStorage.removeItem(key);
-    }
+    },
+
 }
\ No newline at end of file