diff --git a/css/dialogs.css b/css/dialogs.css
index 2b17ea1..28899ba 100644
--- a/css/dialogs.css
+++ b/css/dialogs.css
@@ -883,35 +883,6 @@
 		margin-top: 5px;
 	}
 
-/*UV*/
-	#uv_dialog {
-		width: 1108px;
-	}
-	#uv_dialog .tab {
-		width: 14.28%;
-	}
-	#uv_dialog_all .UVEditor {
-		float: left;
-		padding: 8px;
-		padding-top: 0px;
-		border: 1px solid var(--color-border);
-		margin-right: -1px;
-		margin-bottom: -1px;
-	}
-	#uv_dialog_toolbar {
-		clear: both;
-		padding: 12px;
-		height: 42px;
-		padding-top: 5px;
-	}
-	#uv_dialog_all .UVEditor .uv_transform_info {
-		top: 30px;
-	}
-	#uv_dialog #uv_viewport {
-		margin-left: -8px;
-	}
-
-
 
 /*Toolbar Dialog*/
 	dialog#toolbar_edit .search_bar {
diff --git a/css/general.css b/css/general.css
index cac5f9b..0fbd9f7 100644
--- a/css/general.css
+++ b/css/general.css
@@ -223,9 +223,6 @@
 		left: 0px;
 		pointer-events: none;
 	}
-	#uv_dialog_all .uv_message_box {
-		top: 60px;
-	}
 	.selection_rectangle {
 		position: absolute;
 		display: block;
diff --git a/css/panels.css b/css/panels.css
index b05db0d..dba1d51 100644
--- a/css/panels.css
+++ b/css/panels.css
@@ -1092,7 +1092,7 @@
 		margin-left: -8px;
 		margin-right: -8px;
 	}
-	#uv_dialog_all .UVEditor.selected {
+	#UVEditor_all .UVEditor.selected {
 		border-color: var(--color-accent);
 		z-index: 21;
 	}
@@ -1123,6 +1123,7 @@
 		margin-bottom: 0;
 		position: relative;
 		border: 4px solid var(--color-ui);
+		box-shadow: 0 0 0 800px var(--color-back);
     	box-sizing: content-box;
 	}
 
diff --git a/index.html b/index.html
index 695ed5c..43bd44a 100644
--- a/index.html
+++ b/index.html
@@ -308,34 +308,6 @@
 		<div class="dialog_close_button" onclick="hideDialog()"><i class="material-icons">clear</i></div>
 	</dialog>
 
-	<dialog class="dialog draggable" id="uv_dialog">
-		<div class="dialog_handle tl">uv_editor.title</div>
-		<div class="dialog_bar borderless tab_bar" id="uv_tab_bar">
-			<div onclick="uv_dialog.openTab('all')" id="all" class="tab open tl">uv_editor.all_faces</div>
-			<div onclick="uv_dialog.openTab('north')" id="north" class="tab tl">face.north</div>
-			<div onclick="uv_dialog.openTab('south')" id="south" class="tab tl">face.south</div>
-			<div onclick="uv_dialog.openTab('west')" id="west" class="tab tl">face.west</div>
-			<div onclick="uv_dialog.openTab('east')" id="east" class="tab tl">face.east</div>
-			<div onclick="uv_dialog.openTab('up')" id="up" class="tab tl">face.up</div>
-			<div onclick="uv_dialog.openTab('down')" id="down" class="tab tl">face.down</div>
-		</div>
-		<div id="uv_dialog_all" class="uv_dialog_content uv_dialog_all_only">
-		</div>
-
-		<div id="uv_dialog_single" class="uv_dialog_content">
-		</div>
-
-		<div class="bar" id="uv_dialog_toolbar">
-			<div class="toolbar_wrapper uv_dialog"></div>
-		</div>
-
-		<div class="dialog_bar button_bar">
-			<button type="button" onclick="hideDialog()" class="confirm_btn cancel_btn hidden">dialog.close</button>
-		</div>
-		
-		<div class="dialog_close_button" onclick="hideDialog()"><i class="material-icons">clear</i></div>
-	</dialog>
-
 	<dialog class="dialog draggable" id="text_input">
 		<div class="dialog_handle">
 			<div class="dialog_title tl">dialog.input.title</div>
@@ -472,37 +444,9 @@
 				</ul>
 				<div class="toolbar_wrapper narrow mobile_side"></div>
 			</div>
-			<div id="left_bar" class="sidebar">
+			
+			<div id="left_bar" class="sidebar"></div>
 
-				<div id="uv" class="panel selection_only">
-					<div class="panel_inside">
-						<div class="bar next_to_title" id="uv_title_bar">
-							<div id="project_resolution_status" onclick="BarItems.project_window.trigger()"></div>
-						</div>
-						<div id="uv_panel_sides" onclick="main_uv.loadSelectedFace()" class="bar tabs_small">
-
-							<input type="radio" name="side" id="north_radio" checked>
-							<label class="tl" for="north_radio">face.north</label>
-
-							<input type="radio" name="side" id="south_radio">
-							<label class="tl" for="south_radio">face.south</label>
-							
-							<input type="radio" name="side" id="west_radio">
-							<label class="tl" for="west_radio">face.west</label>
-
-							<input type="radio" name="side" id="east_radio">
-							<label class="tl" for="east_radio">face.east</label>
-
-							<input type="radio" name="side" id="up_radio">
-							<label class="tl" for="up_radio">face.up</label>
-
-							<input type="radio" name="side" id="down_radio">
-							<label class="tl" for="down_radio">face.down</label>
-						</div>
-					</div>
-				</div>
-
-			</div>
 			<div id="right_bar" class="sidebar">
 
 				<div id="element" class="panel selection_only">
diff --git a/js/blockbench.js b/js/blockbench.js
index 11fa2b5..168d4b3 100644
--- a/js/blockbench.js
+++ b/js/blockbench.js
@@ -16,7 +16,6 @@ const Pressing = {
 		alt: false,
 	}
 }
-var main_uv;
 var Prop = {
 	active_panel	: 'preview',
 	view_mode	  	: 'textured',
@@ -130,9 +129,8 @@ function updateSelection(options = {}) {
 			document.querySelectorAll('.selection_only#uv').forEach(node => node.style.setProperty('visibility', 'visible'));
 		}
 	}
-	if (Cube.selected.length || (Format.single_texture && Modes.paint)) {
-		main_uv.jquery.size.find('.uv_mapping_overlay').remove()
-		main_uv.loadData()
+	if (Outliner.selected.length || (Format.single_texture && Modes.paint)) {
+		UVEditor.loadData()
 	}
 	if (Modes.animate) {
 		updateKeyframeSelection();
@@ -201,9 +199,9 @@ const TickUpdates = {
 				delete TickUpdates.selection;
 				updateSelection()
 			}
-			if (TickUpdates.main_uv) {
-				delete TickUpdates.main_uv;
-				main_uv.loadData()
+			if (TickUpdates.UVEditor) {
+				delete TickUpdates.UVEditor;
+				UVEditor.loadData()
 			}
 			if (TickUpdates.texture_list) {
 				delete TickUpdates.texture_list;
diff --git a/js/boot_loader.js b/js/boot_loader.js
index 6315ea8..722fe20 100644
--- a/js/boot_loader.js
+++ b/js/boot_loader.js
@@ -90,9 +90,6 @@ setInterval(function() {
 	framespersecond = 0;
 }, 1000)
 
-main_uv = new UVEditor('main_uv', false, true)
-main_uv.setToMainSlot()
-
 onVueSetup.funcs.forEach((func) => {
 	if (typeof func === 'function') {
 		func()
diff --git a/js/copy_paste.js b/js/copy_paste.js
index a663b68..4a3dbeb 100644
--- a/js/copy_paste.js
+++ b/js/copy_paste.js
@@ -3,7 +3,6 @@ const Clipbench = {
 	elements: [],
 	types: {
 		text: 'text',
-		face_dialog: 'face_dialog',
 		display_slot: 'display_slot',
 		keyframe: 'keyframe',
 		face: 'face',
@@ -24,9 +23,6 @@ const Clipbench = {
 		if (Painter.selection.canvas && Toolbox.selected.id == 'copy_paste_tool') {
 			return Clipbench.types.texture_selection;
 		}
-		if (open_dialog == 'uv_dialog') {
-			return Clipbench.types.face_dialog
-		}
 		if (display_mode) {
 			return Clipbench.types.display_slot
 		}
@@ -48,9 +44,6 @@ const Clipbench = {
 			case 'text':
 				Clipbench.setText(window.getSelection()+'');
 				break;
-			case 'face_dialog':
-				uv_dialog.copy(event);
-				break;
 			case 'display_slot':
 				DisplayMode.copy();
 				break;
@@ -63,7 +56,7 @@ const Clipbench = {
 				}
 				break;
 			case 'face':
-				main_uv.copy(event);
+				UVEditor.copy(event);
 				break;
 			case 'texture':
 				Clipbench.setTexture(Texture.selected);
@@ -91,10 +84,7 @@ const Clipbench = {
 				Clipbench.setText(window.getSelection()+'');
 				break;
 			case 'texture_selection':
-				main_uv.addPastingOverlay();
-				break;
-			case 'face_dialog':
-				uv_dialog.paste(event)
+				UVEditor.addPastingOverlay();
 				break;
 			case 'display_slot':
 				DisplayMode.paste();
@@ -103,7 +93,7 @@ const Clipbench = {
 				Clipbench.pasteKeyframes()
 				break;
 			case 'face':
-				main_uv.paste(event);
+				UVEditor.paste(event);
 				break;
 			case 'texture':
 				Clipbench.pasteTextures();
diff --git a/js/interface/actions.js b/js/interface/actions.js
index b4f3efc..3ffc1bd 100644
--- a/js/interface/actions.js
+++ b/js/interface/actions.js
@@ -1761,8 +1761,8 @@ const BARS = {
 			]
 		})
 		//UV
-		Toolbars.main_uv = new Toolbar({
-			id: 'main_uv',
+		Toolbars.uv_editor = new Toolbar({
+			id: 'uv_editor',
 			children: [
 				'uv_grid',
 				'uv_apply_all',
@@ -1775,8 +1775,9 @@ const BARS = {
 				'toggle_mirror_uv',
 			]
 		})
-		Toolbars.uv_dialog = new Toolbar({
-			id: 'uv_dialog',
+		/*
+		Toolbars.UVEditor = new Toolbar({
+			id: 'UVEditor',
 			children: [
 				'uv_grid',
 				'_',
@@ -1804,7 +1805,7 @@ const BARS = {
 				'uv_rotation'
 			],
 			default_place: true
-		})
+		})*/
 		//Animations
 		Toolbars.animations = new Toolbar({
 			id: 'animations',
@@ -1908,8 +1909,8 @@ const BARS = {
 		}
 		BarItems.move_tool.select()
 
-		BarItems.uv_dialog.toElement('#uv_title_bar')
-		BarItems.uv_dialog_full.toElement('#uv_title_bar')
+		//BarItems.UVEditor.toElement('#uv_title_bar')
+		//BarItems.UVEditor_full.toElement('#uv_title_bar')
 
 
 	},
@@ -2167,9 +2168,10 @@ const BARS = {
 				Toolbars[key].update()
 			}
 		}
-		uv_dialog.all_editors.forEach((editor) => {
+		/*
+		UVEditor.all_editors.forEach((editor) => {
 			editor.updateInterface()
-		})
+		})*/
 	}
 }
 const ActionControl = {
diff --git a/js/interface/interface.js b/js/interface/interface.js
index 9c0e2c0..d8297a3 100644
--- a/js/interface/interface.js
+++ b/js/interface/interface.js
@@ -436,14 +436,14 @@ function setProjectTitle(title) {
 //Zoom
 function setZoomLevel(mode) {
 	if (Prop.active_panel === 'uv') {
-		var zoom = main_uv.zoom
+		var zoom = UVEditor.zoom
 		switch (mode) {
 			case 'in':	zoom *= 1.5;  break;
 			case 'out':   zoom *= 0.66;  break;
 			case 'reset': zoom = 1; break;
 		}
 		zoom = limitNumber(zoom, 1, 4)
-		main_uv.setZoom(zoom)
+		UVEditor.setZoom(zoom)
 
 	} else if (Prop.active_panel == 'timeline') {
 		
diff --git a/js/interface/settings.js b/js/interface/settings.js
index be9b020..bea11da 100644
--- a/js/interface/settings.js
+++ b/js/interface/settings.js
@@ -200,8 +200,8 @@ const Settings = {
 		new Setting('preview_checkerboard',	{category: 'interface', value: true, onChange() {
 			$('#center').toggleClass('checkerboard', settings.preview_checkerboard.value);
 		}});
-		new Setting('uv_checkerboard', 		{category: 'interface', value: true, onChange() {
-			$('.UVEditor').toggleClass('checkerboard_trigger', settings.uv_checkerboard.value);
+		new Setting('uv_checkerboard', 		{category: 'interface', value: true, onChange(val) {
+			UVEditor.vue.checkerboard = val;
 		}});
 		new Setting('timecode_frame_number',{category: 'interface', value: false, onChange() {
 			Timeline.vue.updateTimecodes();
@@ -304,11 +304,6 @@ const Settings = {
 		new Setting('animation_sample_rate',{category: 'export', value: 24, type: 'number'});
 		new Setting('sketchfab_token', {category: 'export', value: '', type: 'password'});
 		new Setting('credit', {category: 'export', value: 'Made with Blockbench', type: 'text'});
-
-		Blockbench.onUpdateTo('3.8', () => {
-			settings.preview_checkerboard.value = true;
-			settings.uv_checkerboard.value = true;
-		})
 	},
 	addCategory(id, data) {
 		if (!data) data = 0;
diff --git a/js/io/format.js b/js/io/format.js
index 639a9f4..e665672 100644
--- a/js/io/format.js
+++ b/js/io/format.js
@@ -70,10 +70,8 @@ class ModelFormat {
 				preview.loadAnglePreset(DefaultCameraPresets[preview.angle+1])
 			}
 		})
-		uv_dialog.all_editors.forEach(editor => {
-			editor.img.style.objectFit = Format.animated_textures ? 'cover' : 'fill';
-		})
 		Interface.Panels.animations.inside_vue._data.animation_files_enabled = this.animation_files;
+		// Todo: toggle animated textures in UV editor
 		for (var key in ModelProject.properties) {
 			if (Project[key] == undefined) {
 				ModelProject.properties[key].reset(Project);
diff --git a/js/io/formats/java_block.js b/js/io/formats/java_block.js
index 518423b..47b9998 100644
--- a/js/io/formats/java_block.js
+++ b/js/io/formats/java_block.js
@@ -73,7 +73,7 @@ var codec = new Codec('java_block', {
 						if (s.faces[face].enabled !== false) {
 							tag.uv = s.faces[face].uv.slice();
 							tag.uv.forEach((n, i) => {
-								tag.uv[i] = n * 16 / main_uv.getResolution(i%2);
+								tag.uv[i] = n * 16 / UVEditor.getResolution(i%2);
 							})
 						}
 						if (s.faces[face].rotation) {
@@ -349,7 +349,7 @@ var codec = new Codec('java_block', {
 						if (typeof read_face.uv === 'object') {
 
 							new_face.uv.forEach((n, i) => {
-								new_face.uv[i] = read_face.uv[i] * main_uv.getResolution(i%2) / 16;
+								new_face.uv[i] = read_face.uv[i] * UVEditor.getResolution(i%2) / 16;
 							})
 						}
 						if (read_face.texture === '#missing') {
diff --git a/js/io/project.js b/js/io/project.js
index c154e1a..801f6fb 100644
--- a/js/io/project.js
+++ b/js/io/project.js
@@ -26,6 +26,7 @@ class ModelProject {
 		this.groups = [];
 		this.selected_elements = [];
 		this.selected_group = null;
+		this.selected_faces = [null];
 		this.textures = [];
 		this.selected_texture = null;
 		this.outliner = [];
@@ -170,6 +171,10 @@ class ModelProject {
 		Outliner.root = this.outliner;
 		Interface.Panels.outliner.inside_vue.root = this.outliner;
 
+		UVEditor.vue.elements = this.selected_elements;
+		UVEditor.vue.selected_vertices = this.selected_vertices;
+		UVEditor.vue.selected_faces = this.selected_faces;
+
 		Interface.Panels.textures.inside_vue.textures = Texture.all;
 		scene.add(this.model_3d);
 
@@ -348,11 +353,13 @@ function setProjectResolution(width, height, modify_uv) {
 	Undo.finishEdit('Changed project resolution')
 	Canvas.updateAllUVs()
 	if (selected.length) {
-		main_uv.loadData()
+		UVEditor.loadData()
 	}
 }
 function updateProjectResolution() {
-	document.querySelector('#project_resolution_status').textContent = `${Project.texture_width} ⨉ ${Project.texture_height}`;
+	if (Interface.Panels.uv) {
+		UVEditor.vue.project_resolution.replace([Project.texture_width, Project.texture_height]);
+	}
 	if (Texture.selected) {
 		// Update animated textures
 		Texture.selected.height++;
diff --git a/js/modes.js b/js/modes.js
index 2686472..3b1799c 100644
--- a/js/modes.js
+++ b/js/modes.js
@@ -187,8 +187,7 @@ BARS.defineActions(function() {
 			BarItems.slider_color_s.update();
 			BarItems.slider_color_v.update();
 
-			$('.UVEditor').find('#uv_size').hide();
-			$('.bar.uv_editor_sliders').hide();
+			UVEditor.vue.setMode('paint');
 			three_grid.visible = false;
 		},
 		onUnselect: () => {
@@ -196,8 +195,7 @@ BARS.defineActions(function() {
 			Cube.all.forEach(cube => {
 				Canvas.buildGridBox(cube)
 			})
-			$('.UVEditor').find('#uv_size').show();
-			$('.bar.uv_editor_sliders').show();
+			UVEditor.vue.setMode('uv');
 			three_grid.visible = true;
 		},
 	})
diff --git a/js/outliner/cube.js b/js/outliner/cube.js
index 10dcd2b..d143c07 100644
--- a/js/outliner/cube.js
+++ b/js/outliner/cube.js
@@ -85,7 +85,7 @@ class Face {
 }
 new Property(Face, 'number', 'rotation', {default: 0});
 new Property(Face, 'number', 'tint', {default: -1});
-new Property(Face, 'string', 'cullface', {merge_validation: (val) => (uv_dialog.allFaces.includes(val) || val == '')});
+new Property(Face, 'string', 'cullface', )//{merge_validation: (val) => (UVEditor.cube_faces.includes(val) || val == '')});
 new Property(Face, 'string', 'material_name');
 new Property(Face, 'boolean', 'enabled', {default: true});
 
@@ -559,7 +559,7 @@ class Cube extends OutlinerElement {
 		if (faces === true || Project.box_uv) {
 			var sides = ['north', 'east', 'south', 'west', 'up', 'down']
 		} else if (faces === undefined) {
-			var sides = [main_uv.face]
+			var sides = [UVEditor.face]
 		} else {
 			var sides = faces
 		}
@@ -573,7 +573,7 @@ class Cube extends OutlinerElement {
 			scope.faces[side].texture = value
 		})
 		if (selected.indexOf(this) === 0) {
-			main_uv.loadData()
+			UVEditor.loadData()
 		}
 		if (Prop.view_mode === 'textured' && scope.visibility == true) {
 			Canvas.adaptObjectFaces(scope)
@@ -870,7 +870,7 @@ BARS.defineActions(function() {
 				for (var face in base_cube.faces) {
 					base_cube.faces[face].texture = Texture.getDefault().uuid
 				}
-				main_uv.loadData()
+				UVEditor.loadData()
 			}
 			if (Format.bone_rig) {
 				if (group) {
diff --git a/js/preview/preview.js b/js/preview/preview.js
index 9646429..0c4108a 100644
--- a/js/preview/preview.js
+++ b/js/preview/preview.js
@@ -671,7 +671,7 @@ class Preview {
 
 			} else if (Toolbox.selected.selectCubes && Modes.selected.selectCubes && data.type === 'cube') {
 				if (Toolbox.selected.selectFace) {
-					main_uv.setFace(data.face, false)
+					UVEditor.setFace(data.face, false)
 				}
 				Blockbench.dispatchEvent('canvas_select', data)
 				if (Modes.paint) {
diff --git a/js/texturing/painter.js b/js/texturing/painter.js
index 441754f..1be4dbc 100644
--- a/js/texturing/painter.js
+++ b/js/texturing/painter.js
@@ -938,9 +938,7 @@ BARS.defineActions(function() {
 			Painter.updateNslideValues()
 		},
 		onUnselect: function() {
-			uv_dialog.all_editors.forEach(editor => {
-				editor.brush_outline.detach()
-			})
+			UVEditor.brush_outline.detach()
 		}
 	})
 	new Tool('fill_tool', {
diff --git a/js/texturing/textures.js b/js/texturing/textures.js
index 7097110..6c55e11 100644
--- a/js/texturing/textures.js
+++ b/js/texturing/textures.js
@@ -190,7 +190,7 @@ class Texture {
 							if (result === 0) {
 								setProjectResolution(img.naturalWidth, img.naturalHeight)
 								if (selected.length) {
-									main_uv.loadData()
+									UVEditor.loadData()
 								}
 							}
 						})
@@ -436,12 +436,12 @@ class Texture {
 		this.source = dataUrl;
 		this.img.src = dataUrl;
 		this.updateMaterial();
-		if (this == main_uv.texture) {
-			main_uv.img.src = dataUrl;
+		if (this == UVEditor.texture) {
+			UVEditor.img.src = dataUrl;
 		};
-		if (open_dialog == 'uv_dialog') {
-			for (var key in uv_dialog.editors) {
-				var editor = uv_dialog.editors[key];
+		if (open_dialog == 'UVEditor') {
+			for (var key in UVEditor.editors) {
+				var editor = UVEditor.editors[key];
 				if (this == editor.texture) {
 					editor.img.src = dataUrl;
 				}
@@ -473,7 +473,7 @@ class Texture {
 
 			})
 			Painter.current = {}
-			main_uv.loadData();
+			UVEditor.loadData();
 			Blockbench.dispatchEvent( 'change_texture_path', {texture: scope} )
 		}
 		if (scope.saved || force) {
@@ -502,7 +502,7 @@ class Texture {
 		this.source = this.source.replace(/\?\d+$/, '?' + tex_version)
 		this.load();
 		this.updateMaterial()
-		TickUpdates.main_uv = true;
+		TickUpdates.UVEditor = true;
 		TickUpdates.texture_list = true;
 	}
 	reloadTexture() {
@@ -620,7 +620,7 @@ class Texture {
 		if (Format.single_texture && Cube.all.length) {
 			Canvas.updateAllFaces()
 			if (selected.length) {
-				main_uv.loadData()
+				UVEditor.loadData()
 			}
 		}
 		TickUpdates.selection = true;
@@ -644,8 +644,8 @@ class Texture {
 			Canvas.updateAllFaces()
 			TextureAnimator.updateButton()
 			hideDialog()
-			if (main_uv.texture == this) {
-				main_uv.displayTexture();
+			if (UVEditor.texture == this) {
+				UVEditor.displayTexture();
 			}
 			BARS.updateConditions()
 			Undo.finishEdit('Remove texture', {textures: []})
@@ -697,7 +697,7 @@ class Texture {
 
 		Cube.selected.forEach(function(obj) {
 			for (var face in obj.faces) {
-				if (all || Project.box_uv || face === main_uv.face) {
+				if (all || Project.box_uv || face === UVEditor.face) {
 					var f = obj.faces[face]
 					if (all !== 'blank' || (f.texture !== null && !f.getTexture())) {
 						f.texture = scope.uuid
@@ -706,7 +706,7 @@ class Texture {
 			}
 		})
 		Canvas.updateSelectedFaces()
-		main_uv.loadData()
+		UVEditor.loadData()
 		Undo.finishEdit('Apply texture')
 		return this;
 	}
@@ -1270,7 +1270,7 @@ function loadTextureDraggable() {
 							})
 							Undo.finishEdit('Drop texture')
 		
-							main_uv.loadData()
+							UVEditor.loadData()
 							Canvas.updateAllFaces()
 						}
 					}, 10)
@@ -1371,8 +1371,8 @@ TextureAnimator = {
 			$(`.texture[texid="${tex.uuid}"]`).find('img').css('margin-top', (tex.currentFrame*-48)+'px');
 			maxFrame = Math.max(maxFrame, tex.currentFrame);
 		})
-		if (animated_textures.includes(main_uv.texture)) {
-			main_uv.img.style.objectPosition = `0 -${main_uv.texture.currentFrame * main_uv.inner_height}px`;
+		if (animated_textures.includes(UVEditor.texture)) {
+			UVEditor.img.style.objectPosition = `0 -${UVEditor.texture.currentFrame * UVEditor.inner_height}px`;
 		}
 		Cube.all.forEach(cube => {
 			var update = false
@@ -1394,7 +1394,7 @@ TextureAnimator = {
 				$($('.texture').get(i)).find('img').css('margin-top', '0')
 			} 
 		})
-		main_uv.img.style.objectPosition = '';
+		UVEditor.img.style.objectPosition = '';
 		while (i < elements.length) {
 			Canvas.updateUV(elements[i], true)
 			i++;
diff --git a/js/texturing/uv.js b/js/texturing/uv.js
index 136f980..64319b9 100644
--- a/js/texturing/uv.js
+++ b/js/texturing/uv.js
@@ -1,25 +1,36 @@
-class UVEditor {
-	constructor(id, headline, toolbar) {
-		this.face = 'north';
-		this.id = id
-		this.size = 320;
-		this.zoom = 1;
-		this.grid = 1;
-		this.max_zoom = 16;
-		this.auto_grid = true;
-		this.texture = false;
-		this.headline = headline
-		this.jquery = {}
-		this.uuid = guid()
-
-		uv_dialog.all_editors.push(this)
-
-		this.buildDom(toolbar)
-
-		if (id !== 'main_uv') {
-			this.setGrid(BarItems.uv_grid.get().replace(/x/, ''));
-		}
+function switchBoxUV(state) {
+	BARS.updateConditions()
+	if (state) {
+		Cube.all.forEach(cube => {
+			if (cube.faces.west.uv[2] < cube.faces.east.uv[0]) {
+				cube.mirror_uv = true;
+				cube.uv_offset[0] = cube.faces.west.uv[2];
+			} else {
+				cube.mirror_uv = false;
+				cube.uv_offset[0] = cube.faces.east.uv[0];
+			}
+			cube.uv_offset[1] = cube.faces.up.uv[3];
+		})
 	}
+	$('#uv_panel_sides').toggle(!state)
+	UVEditor.setGrid(1).setSize(UVEditor.size)//.displayAllMappingOverlays();
+	Canvas.updateAllUVs()
+}
+
+const UVEditor = {
+	face: 'north',
+	size: 320,
+	zoom: 1,
+	grid: 1,
+	max_zoom: 16,
+	auto_grid: true,
+	texture: false,
+	panel: null,
+
+	get vue() {
+		return this.panel.inside_vue;
+	},
+
 	buildDom(toolbar) {
 		var scope = this
 		if (this.jquery.main) {
@@ -29,11 +40,11 @@ class UVEditor {
 		if (this.headline) {
 			this.jquery.main.append('<div class="uv_headline"><div class="uv_title">'+capitalizeFirstLetter(scope.id)+'</div><div class="tool"><i class="material-icons">fullscreen</i><div class="tooltip">Fullscreen</div></div></div>')
 			this.jquery.main.find('div.uv_headline > .tool').click(function() {
-				uv_dialog.openTab(scope.id)
+				UVEditor.openTab(scope.id)
 			})
 			this.jquery.main.find('div.uv_headline').click(function(event) {
 				event.stopPropagation()
-				uv_dialog.select(scope.id, event)
+				UVEditor.select(scope.id, event)
 			})
 		}
 		this.jquery.viewport = $('<div id="uv_viewport" class="checkerboard_target"></div>')
@@ -62,118 +73,8 @@ class UVEditor {
 		this.jquery.sliders = $('<div class="bar uv_editor_sliders" style="margin-left: 2px;"></div>')
 
 		this.jquery.main.append(this.jquery.sliders)
-		var onBefore = function() {
-			Undo.initEdit({elements: Cube.selected})
-		}
-		var onAfter = function() {
-			Undo.finishEdit('Edit UV')
-			if (Project.box_uv) {
-				scope.displayAllMappingOverlays()
-			}
-		}
-		var getInterval = function(event) {
-			return 1/scope.grid
-		}
-		this.sliders = {
-			pos_x: new NumSlider({
-				id: 'uv_slider_pos_x',
-				private: true,
-				condition: function() {return true},
-				get: function() {
-					if (Project.box_uv && Cube.selected[0]) {
-						return trimFloatNumber(Cube.selected[0].uv_offset[0])
-					} else if (Cube.selected[0]) {
-						var face_uv = Cube.selected[0].faces[scope.face].uv
-						if (face_uv) {
-							return trimFloatNumber(face_uv[0])
-						}
-					}
-					return 0
-				},
-				change: function(modify) {
-					scope.slidePos(modify, 0)
-				},
-				getInterval,
-				onBefore,
-				onAfter
-			}).toElement(this.jquery.sliders),
-
-			pos_y: new NumSlider({
-				id: 'uv_slider_pos_y',
-				private: true,
-				condition: function() {return true},
-				get: function() {
-					if (Project.box_uv && Cube.selected[0]) {
-						return trimFloatNumber(Cube.selected[0].uv_offset[1])
-					} else if (Cube.selected[0]) {
-						var face_uv = Cube.selected[0].faces[scope.face].uv
-						if (face_uv) {
-							return trimFloatNumber(face_uv[1])
-						}
-					}
-					return 0
-				},
-				change: function(modify) {
-					scope.slidePos(modify, 1)
-				},
-				getInterval,
-				onBefore,
-				onAfter
-			}).toElement(this.jquery.sliders),
-
-			size_x: new NumSlider({
-				id: 'uv_slider_size_x',
-				private: true,
-				condition: function() {return !Project.box_uv},
-				get: function() {
-					if (!Project.box_uv && Cube.selected[0]) {
-						var face_uv = Cube.selected[0].faces[scope.face].uv
-						if (face_uv) {
-							return trimFloatNumber(face_uv[2] - face_uv[0])
-						}
-					}
-					return 0
-				},
-				change: function(modify) {
-					scope.slideSize(modify, 0)
-				},
-				getInterval,
-				onBefore,
-				onAfter
-			}).toElement(this.jquery.sliders),
-
-			size_y: new NumSlider({
-				id: 'uv_slider_size_y',
-				private: true,
-				condition: function() {return !Project.box_uv},
-				get: function() {
-					if (!Project.box_uv && Cube.selected[0]) {
-						var face_uv = Cube.selected[0].faces[scope.face].uv
-						if (face_uv) {
-							return trimFloatNumber(face_uv[3] - face_uv[1])
-						}
-					}
-					return 0
-				},
-				change: function(modify) {
-					scope.slideSize(modify, 1)
-				},
-				getInterval,
-				onBefore,
-				onAfter
-
-			}).toElement(this.jquery.sliders)
-		}
 			
 
-
-		if (toolbar) {
-			this.jquery.bar = $(Toolbars.main_uv.node)
-			this.jquery.main.append(this.jquery.bar)
-		} else {
-			this.jquery.bar = $('')
-		}
-
 		var dragging_not_clicking = false;
 		this.jquery.size.resizable({
 			handles: "all",
@@ -226,12 +127,6 @@ class UVEditor {
 				scope.disableAutoUV()
 				Undo.finishEdit('Move UV')
 				scope.updateDragHandle(ui.position)
-				if (Project.box_uv) {
-					scope.displayAllMappingOverlays()
-					if (scope.jquery.size.is(':hover')) {
-						scope.displayMappingOverlay()
-					}
-				}
 			}
 		})
 
@@ -334,7 +229,7 @@ class UVEditor {
 		})
 		this.setSize(this.size)
 		return this;
-	}
+	},
 	updateBrushOutline(e) {
 		if (Modes.paint && Toolbox.selected.brushTool) {
 			this.jquery.frame.append(this.brush_outline);
@@ -353,7 +248,7 @@ class UVEditor {
 		} else {
 			this.brush_outline.detach();
 		}
-	}
+	},
 	message(msg, vars) {
 		msg = tl(msg, vars)
 		var box = $('<div class="uv_message_box">' + msg + '</div>')
@@ -361,7 +256,7 @@ class UVEditor {
 		setTimeout(function() {
 			box.remove()
 		}, 1200)
-	}
+	},
 	//Brush
 	getBrushCoordinates(event, tex) {
 		var scope = this;
@@ -379,7 +274,7 @@ class UVEditor {
 		}
 		if (tex.frameCount) result.y += (tex.height / tex.frameCount) * tex.currentFrame;
 		return result;
-	}
+	},
 	startPaintTool(event) {
 		var scope = this;
 		Painter.active_uv_editor = scope;
@@ -398,7 +293,7 @@ class UVEditor {
 			addEventListeners(scope.jquery.frame.get(0), 'mousemove touchmove', scope.movePaintTool, false );
 			addEventListeners(document, 'mouseup touchend', scope.stopBrush, false );
 		}
-	}
+	},
 	movePaintTool(event) {
 		var scope = Painter.active_uv_editor;
 		var texture = scope.getTexture()
@@ -427,7 +322,7 @@ class UVEditor {
 				scope.dragSelection(texture, x, y, event)
 			}
 		}
-	}
+	},
 	stopBrush(event) {
 		var scope = Painter.active_uv_editor;
 		removeEventListeners( scope.jquery.frame.get(0), 'mousemove touchmove', scope.movePaintTool, false );
@@ -437,7 +332,7 @@ class UVEditor {
 		} else {
 			scope.stopSelection()
 		}
-	}
+	},
 	// Copy Paste Tool
 	startSelection(texture, x, y, event) {
 		if (Painter.selection.overlay && event.target && event.target.id === 'uv_frame') {
@@ -460,7 +355,7 @@ class UVEditor {
 			Painter.selection.start_y = Painter.selection.y;
 			Painter.selection.start_event = event;
 		}
-	}
+	},
 	dragSelection(texture, x, y, event) {
 		let m = this.inner_width / this.texture.width;
 
@@ -481,7 +376,7 @@ class UVEditor {
 			Painter.selection.y = Math.clamp(Painter.selection.y, 0, this.texture.height-Painter.selection.canvas.height)
 			this.updatePastingOverlay()
 		}
-	}
+	},
 	stopSelection() {
 		if (Painter.selection.rect) {
 			Painter.selection.rect.detach()
@@ -503,7 +398,7 @@ class UVEditor {
 		Painter.selection.canvas = canvas;
 
 		this.addPastingOverlay();
-	}
+	},
 	addPastingOverlay() {
 		if (Painter.selection.overlay) return;
 		let scope = this;
@@ -617,12 +512,12 @@ class UVEditor {
 			*/
 		}
 		addEventListeners(document, 'mousedown touchstart', clickElsewhere)
-	}
+	},
 	removePastingOverlay() {
 		Painter.selection.overlay.detach();
 		delete Painter.selection.overlay;
 		open_interface = false;
-	}
+	},
 	updatePastingOverlay() {
 		let m = this.inner_width/this.texture.width
 		$(Painter.selection.canvas)
@@ -632,20 +527,23 @@ class UVEditor {
 			.css('left', Painter.selection.x * m)
 			.css('top', Painter.selection.y * m);
 		return this;
-	}
+	},
 	//Get
 	get width() {
-		return this.size;
-	}
-	set width(v) {
-		this.size = v;
-	}
+		return this.vue.width;
+	},
+	get height() {
+		return this.vue.height;
+	},
+	get zoom() {
+		return this.vue.zoom;
+	},
 	get inner_width() {
 		return this.size*this.zoom;
-	}
+	},
 	get inner_height() {
 		return this.height*this.zoom;
-	}
+	},
 	getPixelSize() {
 		if (Project.box_uv) {
 			return this.inner_width/Project.texture_width
@@ -656,14 +554,14 @@ class UVEditor {
 					: Project.texture_width
 			);
 		}
-	}
+	},
 	getFaces(event) {
 		if (event && event.shiftKey) {
 			return ['north', 'east', 'south', 'west', 'up', 'down']
 		} else {
 			return [this.face]
 		}
-	}
+	},
 	getUVTag(obj) {
 		if (!obj) obj = Cube.selected[0]
 		if (Project.box_uv) {
@@ -671,19 +569,20 @@ class UVEditor {
 		} else {
 			return obj.faces[this.face].uv;
 		}
-	}
+	},
 	getTexture() {
 		if (Format.single_texture) return Texture.getDefault();
 		return Cube.selected[0].faces[this.face].getTexture();
-	}
+	},
 	//Set
 	setSize(input_size, cancel_load) {
+		return;
 		var old_size = this.size;
 		var size = input_size;
 		this.size = size;
-		this.jquery.frame[0].style.width = (this.inner_width) + 'px';
-		this.jquery.viewport[0].style.width = (size+8) + 'px';
-		this.jquery.main[0].style.width = (size + (this.id == 'main_uv' ? 8 : 10)) + 'px';
+		this.vue.$refs.frame.style.width = (this.inner_width) + 'px';
+		this.vue.$refs.viewport.style.width = (size+8) + 'px';
+		this.vue.$refs.main.style.width = (size + (this.id == 'UVEditor' ? 8 : 10)) + 'px';
 
 		for (var id in this.sliders) {
 			this.sliders[id].setWidth(size/(Project.box_uv?2:4)-1)
@@ -694,11 +593,13 @@ class UVEditor {
 			this.updateSize();
 		}
 		// compensate offset
-		this.jquery.viewport.get(0).scrollLeft = Math.round(this.jquery.viewport.get(0).scrollLeft * (size / old_size));
-		this.jquery.viewport.get(0).scrollTop  = Math.round(this.jquery.viewport.get(0).scrollTop  * (size / old_size));
+		this.vue.$refs.viewport.scrollLeft = Math.round(this.vue.$refs.viewport.scrollLeft * (size / old_size));
+		this.vue.$refs.viewport.scrollTop  = Math.round(this.vue.$refs.viewport.scrollTop  * (size / old_size));
 		return this;
-	}
+	},
 	setZoom(zoom) {
+		this.vue.zoom = zoom;
+		return this;
 		var zoomed_size = this.size * zoom;
 		var size = zoomed_size;
 		this.zoom = size/this.size
@@ -706,9 +607,10 @@ class UVEditor {
 		this.displayFrame();
 
 		return this;
-	}
+	},
 	setGrid(value) {
-		var update = this.id == 'main_uv' || open_dialog == 'uv_dialog';
+		return this;
+		var update = this.id == 'UVEditor' || open_dialog == 'UVEditor';
 		if (value == 'auto') {
 			this.auto_grid = true;
 			if (update) this.displayTexture();
@@ -720,13 +622,12 @@ class UVEditor {
 		}
 		if (update) this.updateSize();
 		return this;
-	}
+	},
 	updateSize() {
-		var size = this.size * this.zoom;
-		this.jquery.frame.width(this.inner_width);
+		this.vue.updateSize();
+		//var size = this.size * this.zoom;
 
-		this.height = this.size / (Project.texture_width/Project.texture_height)
-		this.jquery.frame.height(this.inner_height)
+		return;
 		this.jquery.viewport.height(this.height+8)
 		this.jquery.size.resizable('option', 'maxHeight', this.inner_height)
 		this.jquery.size.resizable('option', 'maxWidth', this.inner_width)
@@ -750,17 +651,17 @@ class UVEditor {
 		} else {
 			this.jquery.viewport.removeClass('zoomed').css('overflow', 'hidden')
 		}
-	}
+	},
 	setFace(face, update = true) {
 		this.face = face
-		if (this.id === 'main_uv') {
+		if (this.id === 'UVEditor') {
 			$('input#'+face+'_radio').prop("checked", true)
 		}
 		if (update) {
 			this.loadData()
 		}
 		return this;
-	}
+	},
 	setToMainSlot() {
 		var scope = this;
 		$('.panel#uv > .panel_inside').append(this.jquery.main)
@@ -778,14 +679,14 @@ class UVEditor {
 			}
 		})
 		this.jquery.frame.on('dblclick', function() {
-			uv_dialog.openFull()
+			UVEditor.openFull()
 		})
 		return this;
-	}
+	},
 	appendTo(selector) {
 		$(selector).append(this.jquery.main)
 		return this;
-	}
+	},
 	//Selection
 	reverseSelect(event) {
 		var scope = this;
@@ -811,7 +712,7 @@ class UVEditor {
 		})
 		if (matches.length) {
 			if (!Project.box_uv) {
-				main_uv.setFace(face_match);
+				UVEditor.setFace(face_match);
 			}
 			selected.empty();
 			matches.forEach(s => {
@@ -821,21 +722,23 @@ class UVEditor {
 			scope.displayMappingOverlay();
 		}
 		return this;
-	}
+	},
 	forCubes(cb) {
 		var i = 0;
 		while (i < Cube.selected.length) {
 			cb(Cube.selected[i]);
 			i++;
 		}
-	}
+	},
 	//Load
 	loadSelectedFace() {
 		this.face = $('#uv_panel_sides input:checked').attr('id').replace('_radio', '')
 		this.loadData()
 		return false;
-	}
+	},
 	loadData() {
+		this.vue.updateTexture();
+		return this;
 		if (Cube.selected.length === 0 && !Modes.paint) return;
 		var face = Cube.selected[0] && Cube.selected[0].faces[this.face];
 		
@@ -847,13 +750,10 @@ class UVEditor {
 		this.displayTools()
 		this.displaySliders()
 		this.updateDragHandle()
-		if (Project.box_uv) {
-			this.displayAllMappingOverlays()
+		if (this !== UVEditor && this.face === UVEditor.face) {
+			UVEditor.loadData()
 		}
-		if (this !== main_uv && this.face === main_uv.face) {
-			main_uv.loadData()
-		}
-	}
+	},
 	save(pos_only) {
 		if (!Modes.edit) return;
 		var scope = this;
@@ -904,10 +804,10 @@ class UVEditor {
 			})
 		}
 
-		if (this !== main_uv && this.face === main_uv.face) {
-			main_uv.loadData()
+		if (this !== UVEditor && this.face === UVEditor.face) {
+			UVEditor.loadData()
 		}
-	}
+	},
 	applyTexture(uuid) {
 		var scope = this;
 		Undo.initEdit({elements: Cube.selected, uv_only: true})
@@ -917,8 +817,9 @@ class UVEditor {
 		this.loadData()
 		Canvas.updateSelectedFaces()
 		Undo.finishEdit('Apply texture')
-	}
+	},
 	displayTexture(face) {
+		return this;
 		if (!face && Cube.selected.length) {
 			var face = Cube.selected[0].faces[this.face];
 		}
@@ -943,8 +844,9 @@ class UVEditor {
 			tex.select()
 		}
 		this.setSize(this.size, true)
-	}
+	},
 	displayTransformInfo() {
+		return this;
 		var ref = Cube.selected[0].faces[this.face]
 		this.jquery.transform_info.text('')
 		if (Project.box_uv) return;
@@ -958,8 +860,9 @@ class UVEditor {
 		if (ref.rotation) {
 			this.jquery.transform_info.append('<b>'+ref.rotation+'</b>')
 		}
-	}
+	},
 	displayFrame() {
+		return this;
 		var scope = this;
 		if (!Modes.edit) return;
 		if (Project.box_uv) {
@@ -1018,9 +921,10 @@ class UVEditor {
 		}
 		this.updateDragHandle();
 		this.displayTransformInfo();
-	}
+	},
 	//Overlay
 	displayMappingOverlay() {
+		return this;
 		if (!Project.box_uv || Cube.selected.length == 0) return this;
 		var scope = this;
 		var sides = this.getMappingOverlay();
@@ -1029,8 +933,9 @@ class UVEditor {
 		scope.jquery.size.append(sides);
 
 		return this;
-	}
+	},
 	getMappingOverlay(cube, absolute) {
+		return this;
 		var scope = this;
 		var sides = document.createElement('div');
 		sides.classList.add('mapping_overlay_cube');
@@ -1066,7 +971,8 @@ class UVEditor {
 		addElement(2*size[2]+size[0], size[2], size[0], size[1],'#f8dd72', '#FFF899')
 
 		return sides;
-	}
+	},
+	/*
 	displayAllMappingOverlays(force_reload) {
 		var scope = this;
 		var cycle = 'C'+bbuid(4)
@@ -1090,7 +996,7 @@ class UVEditor {
 		} else {
 			$(scope.jquery.frame).find('.mapping_overlay_cube').remove()
 		}
-	}
+	},
 	updateAllMappingOverlays() {
 		var scope = this;
 		var pixels = scope.getPixelSize();
@@ -1115,7 +1021,7 @@ class UVEditor {
 				}
 			})
 		}
-	}
+	},*/
 	//UI
 	displaySliders() {
 		if (!Cube.selected.length) return;
@@ -1123,7 +1029,7 @@ class UVEditor {
 		this.sliders.pos_y.update()
 		this.sliders.size_x.update()
 		this.sliders.size_y.update()
-	}
+	},
 	displayTools() {
 		//Cullface
 		if (!Cube.selected.length) return;
@@ -1131,34 +1037,34 @@ class UVEditor {
 		BarItems.cullface.set(face.cullface||'off')
 		BarItems.face_tint.setIcon(face.tint !== -1 ? 'check_box' : 'check_box_outline_blank')
 		BarItems.slider_face_tint.update()
-	}
+	},
 	updateDragHandle() {
 		var pos = this.jquery.size.position()
 		var handle = this.jquery.size.find('div.uv_size_handle').get(0);
 		if (!handle) return;
 
-		var left = limitNumber(this.jquery.viewport.get(0).scrollLeft, 0, this.size*(this.zoom-1)) - pos.left;
-		var top = limitNumber(this.jquery.viewport.get(0).scrollTop, 0, (this.height||this.size)*(this.zoom-1)) - pos.top;
+		var left = limitNumber(this.vue.$refs.viewport.scrollLeft, 0, this.size*(this.zoom-1)) - pos.left;
+		var top = limitNumber(this.vue.$refs.viewport.scrollTop, 0, (this.height||this.size)*(this.zoom-1)) - pos.top;
 		handle.style.left = left +'px';
 		handle.style.top = top +'px';
 
 		handle.style.width = this.size + 'px';
 		handle.style.height = (this.height||this.size) + 'px';
 		return this;
-	}
+	},
 	updateInterface() {
 		for (var key in this.sliders) {
 			var slider = this.sliders[key]
 			slider.node.style.setProperty('display', BARS.condition(slider.condition)?'block':'none')
 		}
 		this.jquery.size.resizable('option', 'disabled', Project.box_uv)
-	}
+	},
 	contextMenu() {
 		var scope = this;
 		this.reference_face = Cube.selected[0] && Cube.selected[0].faces[scope.face];
 		this.menu.open(event, this)
 		return this;
-	}
+	},
 	slidePos(modify, axis) {
 		var scope = this
 		var limit = scope.getResolution(axis);
@@ -1195,7 +1101,7 @@ class UVEditor {
 		this.displaySliders()
 		this.displayFrame()
 		this.disableAutoUV()
-	}
+	},
 	slideSize(modify, axis) {
 		var scope = this
 		var limit = scope.getResolution(axis);
@@ -1212,24 +1118,24 @@ class UVEditor {
 		this.displaySliders()
 		this.displayFrame()
 		this.disableAutoUV()
-	}
+	},
 	getResolution(axis, texture) {
 		return axis ? Project.texture_height : Project.texture_width;
-	}
+	},
 
 	//Events
 	disableAutoUV() {
 		this.forCubes(obj => {
 			obj.autouv = 0
 		})
-	}
+	},
 	toggleUV() {
 		var scope = this
 		var state = Cube.selected[0].faces[this.face].enabled === false
 		this.forCubes(obj => {
 			obj.faces[scope.face].enabled = state
 		})
-	}
+	},
 	maximize(event) {
 		var scope = this;
 		this.forCubes(obj => {
@@ -1241,7 +1147,7 @@ class UVEditor {
 		})
 		this.message('uv_editor.maximized')
 		this.loadData()
-	}
+	},
 	turnMapping(event) {
 		var scope = this;
 		this.forCubes(obj => {
@@ -1254,7 +1160,7 @@ class UVEditor {
 		})
 		this.message('uv_editor.turned');
 		this.loadData();
-	}
+	},
 	setAutoSize(event) {
 		var scope = this;
 		var top2, left2;
@@ -1290,7 +1196,7 @@ class UVEditor {
 		})
 		this.message('uv_editor.autouv')
 		this.loadData()
-	}
+	},
 	setRelativeAutoSize(event) {
 		var scope = this;
 		this.forCubes(obj => {
@@ -1358,7 +1264,7 @@ class UVEditor {
 		})
 		this.message('uv_editor.autouv')
 		this.loadData()
-	}
+	},
 	mirrorX(event) {
 		var scope = this;
 		this.forCubes(obj => {
@@ -1372,7 +1278,7 @@ class UVEditor {
 		})
 		this.message('uv_editor.mirrored')
 		this.loadData()
-	}
+	},
 	mirrorY(event) {
 		var scope = this;
 		this.forCubes(obj => {
@@ -1386,11 +1292,11 @@ class UVEditor {
 		})
 		this.message('uv_editor.mirrored')
 		this.loadData()
-	}
+	},
 	applyAll(event) {
 		var scope = this;
 		this.forCubes(obj => {
-			uv_dialog.allFaces.forEach(function(side) {
+			UVEditor.cube_faces.forEach(function(side) {
 				$.extend(true, obj.faces[side], obj.faces[scope.face]) 
 			})
 			obj.autouv = 0
@@ -1398,7 +1304,7 @@ class UVEditor {
 		Canvas.updateSelectedFaces()
 		this.message('uv_editor.to_all')
 		this.loadData()
-	}
+	},
 	clear(event) {
 		var scope = this;
 		Undo.initEdit({elements: Cube.selected, uv_only: true})
@@ -1413,7 +1319,7 @@ class UVEditor {
 		this.message('uv_editor.transparent')
 		Undo.finishEdit('Remove face')
 		Canvas.updateSelectedFaces()
-	}
+	},
 	switchCullface(event) {
 		var scope = this;
 		Undo.initEdit({elements: Cube.selected, uv_only: true})
@@ -1428,7 +1334,7 @@ class UVEditor {
 			this.message('uv_editor.cullface_off')
 		}
 		Undo.finishEdit('Toggle cullface')
-	}
+	},
 	switchTint(event) {
 		var scope = this;
 		var val = Cube.selected[0].faces[scope.face].tint === -1 ? 0 : -1;
@@ -1443,7 +1349,7 @@ class UVEditor {
 			this.message('uv_editor.tint_off')
 		}
 		this.displayTools()
-	}
+	},
 	setTint(event, val) {
 		var scope = this;
 
@@ -1451,7 +1357,7 @@ class UVEditor {
 			obj.faces[scope.face].tint = val
 		})
 		this.displayTools()
-	}
+	},
 	rotate() {
 		var scope = this;
 		var value = parseInt(BarItems.uv_rotation.get())
@@ -1461,7 +1367,7 @@ class UVEditor {
 		})
 		this.displayTransformInfo()
 		this.message('uv_editor.rotated')
-	}
+	},
 	setRotation(value) {
 		var scope = this;
 		value = parseInt(value)
@@ -1471,9 +1377,9 @@ class UVEditor {
 		})
 		this.loadData()
 		this.message('uv_editor.rotated')
-	}
+	},
 	selectGridSize(event) {
-	}
+	},
 	autoCullface(event) {
 		var scope = this;
 		this.forCubes(obj => {
@@ -1483,19 +1389,19 @@ class UVEditor {
 		})
 		this.loadData()
 		this.message('uv_editor.auto_cull')
-	}
+	},
 	copy(event) {
 		this.select()
 		if (Cube.selected.length === 0) return;
 
 		var scope = this;
-		uv_dialog.clipboard = []
+		UVEditor.clipboard = []
 
 		if (Project.box_uv) {
 			var new_tag = {
 				uv: Cube.selected[0].uv_offset
 			}
-			uv_dialog.clipboard.push(new_tag)
+			UVEditor.clipboard.push(new_tag)
 			this.message('uv_editor.copied')
 			return;
 		}
@@ -1505,30 +1411,30 @@ class UVEditor {
 				var new_tag = {
 					uv: Cube.selected[0].uv_offset
 				}
-				uv_dialog.clipboard.push(new_tag)
+				UVEditor.clipboard.push(new_tag)
 				return;
 			}
 			var tag = Cube.selected[0].faces[face]
 			var new_tag = new Face(face, tag)
-			uv_dialog.clipboard.push(new_tag)
+			UVEditor.clipboard.push(new_tag)
 		}
 		if (event.shiftKey) {
-			uv_dialog.allFaces.forEach(function(s) {
+			UVEditor.cube_faces.forEach(function(s) {
 				addToClipboard(s)
 			})
 		} else {
 			addToClipboard(this.face)
 		}
-		this.message('uv_editor.copied_x', [uv_dialog.clipboard.length])
-	}
+		this.message('uv_editor.copied_x', [UVEditor.clipboard.length])
+	},
 	paste(event) {
 		this.select()
-		if (uv_dialog.clipboard === null || Cube.selected.length === 0) return;
+		if (UVEditor.clipboard === null || Cube.selected.length === 0) return;
 
 		Undo.initEdit({elements: Cube.selected, uv_only: true})
 		if (Project.box_uv) {
 			Cube.selected.forEach(function(obj) {
-				obj.uv_offset = uv_dialog.clipboard[0].uv.slice()
+				obj.uv_offset = UVEditor.clipboard[0].uv.slice()
 				Canvas.updateUV(obj)
 			})
 			this.loadData()
@@ -1545,31 +1451,31 @@ class UVEditor {
 			})
 		}
 
-		if (this.id === 'main_uv' && event) {
+		if (this.id === 'UVEditor' && event) {
 			if (event.shiftKey) {
-				uv_dialog.allFaces.forEach(function(s) {
-					applyFace(uv_dialog.clipboard[0], s)
+				UVEditor.cube_faces.forEach(function(s) {
+					applyFace(UVEditor.clipboard[0], s)
 				})
 			} else {
-				if (uv_dialog.clipboard.length === 1) {
-					applyFace(uv_dialog.clipboard[0], main_uv.face)
+				if (UVEditor.clipboard.length === 1) {
+					applyFace(UVEditor.clipboard[0], UVEditor.face)
 				} else {
-					uv_dialog.clipboard.forEach(function(s) {
+					UVEditor.clipboard.forEach(function(s) {
 						applyFace(s, s.direction)
 					})
 				}
 			}
 		} else {
-			if (uv_dialog.selection.length === 1) {
-				applyFace(uv_dialog.clipboard[0], uv_dialog.selection[0])
+			if (UVEditor.selection.length === 1) {
+				applyFace(UVEditor.clipboard[0], UVEditor.selection[0])
 			} else {
-				if (uv_dialog.clipboard.length === 1) {
-					uv_dialog.selection.forEach(function(s) {
-						applyFace(uv_dialog.clipboard[0], s)
+				if (UVEditor.clipboard.length === 1) {
+					UVEditor.selection.forEach(function(s) {
+						applyFace(UVEditor.clipboard[0], s)
 					})
 				} else {
-					uv_dialog.clipboard.forEach(function(s) {
-						if (uv_dialog.selection.includes(s.face)) {
+					UVEditor.clipboard.forEach(function(s) {
+						if (UVEditor.selection.includes(s.face)) {
 							applyFace(s)
 						}
 					})
@@ -1580,7 +1486,7 @@ class UVEditor {
 		Canvas.updateSelectedFaces()
 		this.message('uv_editor.pasted')
 		Undo.finishEdit('Paste UV')
-	}
+	},
 	reset(event) {
 		var scope = this;
 		this.forCubes(obj => {
@@ -1592,14 +1498,140 @@ class UVEditor {
 		})
 		this.loadData()
 		this.message('uv_editor.reset')
-	}
+	},
 	select() {
-		if (uv_dialog.allFaces.includes(this.id) === false) return;
-		uv_dialog.selection = [this.id]
-		uv_dialog.updateSelection()
-	}
-}
-	UVEditor.prototype.menu = new Menu([
+		if (UVEditor.cube_faces.includes(this.id) === false) return;
+		UVEditor.selection = [this.id]
+		UVEditor.updateSelection()
+	},
+
+	// Dialog
+	
+	isSetup: false,
+	single: false,
+	clipboard: null,
+	cube_faces: ['north', 'south', 'west', 'east', 'up', 'down'],
+	selection: [],
+	selection_all: [],
+	all_editors: [],
+	hoveredSide: false,
+	single_size: {},
+	all_size: {},
+	select: function(id, event) {
+		if (event.shiftKey || Pressing.overrides.shift) {
+			UVEditor.selection.push(id)
+		} else {
+			if (UVEditor.selection.includes(id) && UVEditor.selection.length === 1) {
+				UVEditor.selection = []
+			} else {
+				UVEditor.selection = [id]
+			}
+		}
+		UVEditor.updateSelection()
+	},
+	selectAll: function() {
+		if (UVEditor.selection.length === 6) {
+			UVEditor.selection.empty()
+		} else {
+			UVEditor.selection = UVEditor.cube_faces.slice()
+		}
+		UVEditor.updateSelection()
+	},
+	selectNone: function() {
+		UVEditor.selection = []
+		UVEditor.updateSelection()
+	},
+	forSelection: function(cb, event, ...args) {
+		if (open_dialog === false) {
+			UVEditor[cb](event, ...args)
+		} else if (UVEditor.single) {
+			UVEditor.editors.single[cb](...args)
+		} else {
+			if (UVEditor.selection.length > 0) {
+				UVEditor.selection.forEach(function(s) {
+					UVEditor.editors[s][cb](...args)
+				})
+			} else {
+				UVEditor.cube_faces.forEach(function(s) {
+					UVEditor.editors[s][cb](...args)
+				})
+			}
+		}
+	},
+	copy: function(event) {
+		if (Cube.selected.length === 0) return;
+		UVEditor.clipboard = []
+
+		function addToClipboard(face) {
+			var tag = Cube.selected[0].faces[face]
+			UVEditor.clipboard.push(new Face(null, tag))
+		}
+		if (UVEditor.hoveredSide) {
+			addToClipboard(UVEditor.hoveredSide)
+			UVEditor.editors[UVEditor.hoveredSide].message('uv_editor.copied')
+
+		} else if (UVEditor.single) {
+			addToClipboard(UVEditor.editors.single.face)
+			UVEditor.editors.single.message('uv_editor.copied')
+
+		} else if (UVEditor.selection.length > 0) {
+			UVEditor.selection.forEach(function(s) {
+				addToClipboard(s)
+				UVEditor.editors[s].message('uv_editor.copied')
+			})
+		} else {
+			UVEditor.cube_faces.forEach(function(s) {
+				addToClipboard(s)
+				UVEditor.editors[s].message('uv_editor.copied')
+			})
+		}
+	},
+	paste: function(event) {
+		if (UVEditor.clipboard === null || Cube.selected.length === 0) return;
+
+		function applyFace(tag, face) {
+			if (!face) face = tag.face
+			Cube.selected.forEach(function(obj) {
+				obj.faces[face].extend(tag)
+				Canvas.updateUV(obj)
+			})
+		}
+
+		if (UVEditor.hoveredSide) {
+			UVEditor.editors[UVEditor.hoveredSide].paste({shiftKey: false})
+
+		} else if (UVEditor.selection.length === 1) {
+			applyFace(UVEditor.clipboard[0], UVEditor.selection[0])
+			if (UVEditor.single) {
+				UVEditor.editors.single.message('uv_editor.pasted')
+			} else {
+				UVEditor.editors[UVEditor.selection[0]].message('uv_editor.pasted')
+			}
+		} else {
+			if (UVEditor.clipboard.length === 1) {
+				UVEditor.selection.forEach(function(s) {
+					applyFace(UVEditor.clipboard[0], s)
+					UVEditor.editors[s].message('uv_editor.pasted')
+				})
+			} else {
+				UVEditor.clipboard.forEach(function(s) {
+					if (UVEditor.selection.includes(s.face)) {
+						applyFace(s)
+						UVEditor.editors[s].message('uv_editor.pasted')
+					}
+				})
+			}
+		}
+
+		for (var key in UVEditor.editors) {
+			if (UVEditor.editors[key]) {
+				UVEditor.editors[key].loadData()
+			}
+		}
+	},
+
+
+	menu: new Menu([
 		{name: 'menu.view.zoom', id: 'zoom', condition: isApp, icon: 'search', children: [
 			'zoom_in',
 			'zoom_out',
@@ -1712,323 +1744,23 @@ class UVEditor {
 			return arr;
 		}}
 	])
-
-
-function switchBoxUV(state) {
-	BARS.updateConditions()
-	if (state) {
-		Cube.all.forEach(cube => {
-			if (cube.faces.west.uv[2] < cube.faces.east.uv[0]) {
-				cube.mirror_uv = true;
-				cube.uv_offset[0] = cube.faces.west.uv[2];
-			} else {
-				cube.mirror_uv = false;
-				cube.uv_offset[0] = cube.faces.east.uv[0];
-			}
-			cube.uv_offset[1] = cube.faces.up.uv[3];
-		})
-	}
-	$('#uv_panel_sides').toggle(!state)
-	main_uv.setGrid(1).setSize(main_uv.size).displayAllMappingOverlays();
-	Canvas.updateAllUVs()
 }
 
-const uv_dialog = {
-	isSetup: false,
-	single: false,
-	clipboard: null,
-	allFaces: ['north', 'south', 'west', 'east', 'up', 'down'],
-	selection: [],
-	selection_all: [],
-	all_editors: [],
-	hoveredSide: false,
-	single_size: {},
-	all_size: {},
-	setup: function() {
-		uv_dialog.editors = {
-			single:new UVEditor('single').appendTo('#uv_dialog_single'),
-			north: new UVEditor('north', true).appendTo('#uv_dialog_all'),
-			south: new UVEditor('south', true).appendTo('#uv_dialog_all'),
-			west:  new UVEditor('west', true).appendTo('#uv_dialog_all'),
-			east:  new UVEditor('east', true).appendTo('#uv_dialog_all'),
-			up:	new UVEditor('up', true).appendTo('#uv_dialog_all'),
-			down:  new UVEditor('down', true).appendTo('#uv_dialog_all')
-		}
-		var size = window.innerHeight - 200
-		uv_dialog.editors.single.setSize(size)
-		uv_dialog.editors.single.jquery.main.css('margin-left', 'auto').css('margin-right', 'auto')//.css('width', (size+10)+'px')
-		uv_dialog.editors.up.jquery.main.css('margin-left', '276px').css('clear', 'both')
-		uv_dialog.isSetup = true
-
-		var single_size = limitNumber(size / 2 - 72, 80, 256)
-		for (var key in uv_dialog.editors) {
-			if (uv_dialog.editors[key] && key !== 'single') {
-				uv_dialog.editors[key].setFace(key, false)
-				uv_dialog.editors[key].setSize(single_size)
-				uv_dialog.editors[key].jquery.main.mouseenter(function(event) {
-					uv_dialog.hoveredSide = $(this).attr('id').replace('UVEditor_', '')
-				})
-				uv_dialog.editors[key].jquery.main.mouseleave(function() {
-					uv_dialog.hoveredSide = false
-				})
-			}
-		}
-		$('.dialog#uv_dialog').resizable({
-			minWidth: 202,
-			minHeight: 464,
-			resize: function() {
-				uv_dialog.updateSize()
-			},
-			containment: 'document',
-			handles: 'all'
-		})
-		BARS.updateConditions()
-	},
-	select: function(id, event) {
-		if (event.shiftKey || Pressing.overrides.shift) {
-			uv_dialog.selection.push(id)
-		} else {
-			if (uv_dialog.selection.includes(id) && uv_dialog.selection.length === 1) {
-				uv_dialog.selection = []
-			} else {
-				uv_dialog.selection = [id]
-			}
-		}
-		uv_dialog.updateSelection()
-	},
-	selectAll: function() {
-		if (uv_dialog.selection.length === 6) {
-			uv_dialog.selection.empty()
-		} else {
-			uv_dialog.selection = uv_dialog.allFaces.slice()
-		}
-		uv_dialog.updateSelection()
-	},
-	selectNone: function() {
-		uv_dialog.selection = []
-		uv_dialog.updateSelection()
-	},
-	forSelection: function(cb, event, ...args) {
-		if (open_dialog === false) {
-			main_uv[cb](event, ...args)
-		} else if (uv_dialog.single) {
-			uv_dialog.editors.single[cb](...args)
-		} else {
-			if (uv_dialog.selection.length > 0) {
-				uv_dialog.selection.forEach(function(s) {
-					uv_dialog.editors[s][cb](...args)
-				})
-			} else {
-				uv_dialog.allFaces.forEach(function(s) {
-					uv_dialog.editors[s][cb](...args)
-				})
-			}
-		}
-	},
-	updateSelection: function() {
-		$('#uv_dialog_all .UVEditor').removeClass('selected')
-		uv_dialog.selection.forEach(function(id) {
-			$('#uv_dialog_all #UVEditor_'+id).addClass('selected')
-		})
-	},
-	openDialog: function() {
-		showDialog('uv_dialog')
-		if (!uv_dialog.isSetup) uv_dialog.setup()
-		if (Project.box_uv) {
-			$('#uv_tab_bar').hide();
-		} else {
-			$('#uv_tab_bar').show();
-		}
-	},
-	centerDialog: function() {
-		var obj = $('.dialog#uv_dialog')
-		obj.css('left', ((window.innerWidth-obj.width())/2) +'px')
-		obj.css('top', ((window.innerHeight - obj.height()) / 2) + 'px')
-	},
-	openAll: function() {
-		uv_dialog.openDialog()
-		uv_dialog.openTab('all')
-		uv_dialog.centerDialog()
-	},
-	openFull: function() {
-		uv_dialog.openDialog()
-		uv_dialog.openTab(main_uv.face)
-		uv_dialog.centerDialog()
-	},
-	openTab: function(tab) {
-		uv_dialog.saveSize()
-		$('#uv_tab_bar .tab').removeClass('open')
-		$('#uv_tab_bar .tab#'+tab).addClass('open')
-		if (tab === 'all') {
-			uv_dialog.single = false
-			$('#uv_dialog_single').hide()
-			$('.uv_dialog_all_only').show()
-			for (var key in uv_dialog.editors) {
-				if (uv_dialog.editors[key] && key !== 'single') {
-					uv_dialog.editors[key].loadData()
-				}
-			}
-			uv_dialog.selection = uv_dialog.selection_all.splice(0, 10)
-			uv_dialog.updateSelection()
-
-			//BarItems.uv_grid.set(uv_dialog.editors.north.gridSelectOption)
-
-			$('.dialog#uv_dialog').width(uv_dialog.all_size.x)
-			$('.dialog#uv_dialog').height(uv_dialog.all_size.y)
-		} else {
-			uv_dialog.single = true
-			$('#uv_dialog_single').show()
-			$('.uv_dialog_all_only').hide()
-			uv_dialog.editors.single.setFace(tab)
-			uv_dialog.selection_all = uv_dialog.selection.splice(0, 10)
-			uv_dialog.selection = [tab]
-			//BarItems.uv_grid.set(uv_dialog.editors.single.gridSelectOption)
-
-			var max_size = window.innerHeight - 200
-			if (max_size < uv_dialog.editors.single.size ) {
-				uv_dialog.editors.single.setSize(max_size)
-				uv_dialog.editors.single.jquery.main.css('margin-left', 'auto').css('margin-right', 'auto').css('width', max_size+'px')
-			}
-			$('.dialog#uv_dialog').width(uv_dialog.single_size.x)
-			$('.dialog#uv_dialog').height(uv_dialog.single_size.y)
-		}
-		uv_dialog.hoveredSide = false;
-		uv_dialog.updateSize()
-	},
-	saveSize: function() {
-		if (uv_dialog.single) {
-			uv_dialog.single_size.x = $('.dialog#uv_dialog').width()
-			uv_dialog.single_size.y = $('.dialog#uv_dialog').height()
-		} else {
-			uv_dialog.all_size.x = $('.dialog#uv_dialog').width()
-			uv_dialog.all_size.y = $('.dialog#uv_dialog').height()
-		}
-	},
-	updateSize: function() {
-		var obj = $('.dialog#uv_dialog')
-		var size = {
-			x: obj.width(),
-			y: obj.height()
-		}
-		var menu_gap = 98 + ($('#uv_tab_bar').is(':visible') ? 30 : 0) + ($('.toolbar_wrapper.uv_dialog').height()||0);
-		if (uv_dialog.single) {
-			var editor_size = size.x-16
-			size.y = (size.y - menu_gap) * (Project.texture_width/Project.texture_height)
-			if (size.x > size.y) {
-				editor_size =  size.y
-			}
-			uv_dialog.editors.single.setSize(editor_size)
-
-		} else {
-			var centerUp = false
-			size.y -= menu_gap;
-			if (size.x < size.y/1.2) {
-				var editor_size = limitNumber(size.x / 2 - 35, 80, window.innerHeight/3-120)
-				editor_size = limitNumber(editor_size, 80, (size.y-64)/3 - 50)
-			} else {
-				//4 x 2
-				var editor_size = limitNumber(size.x/4-25,  16,  size.y/2 - 60)
-				centerUp = true
-			}
-			uv_dialog.setEditorSize(editor_size)
-			if (centerUp) {
-				uv_dialog.editors.up.jquery.main.css('margin-left', (editor_size+20)+'px').css('clear', 'both')
-			}
-		}
-	},
-	setEditorSize: function(size) {
-		for (var key in uv_dialog.editors) {
-			if (uv_dialog.editors[key] && key !== 'single') {
-				uv_dialog.editors[key].jquery.main.css('margin-left', '0')
-				uv_dialog.editors[key].setSize(size)
-			}
-		}
-	},
-	copy: function(event) {
-		if (Cube.selected.length === 0) return;
-		uv_dialog.clipboard = []
-
-		function addToClipboard(face) {
-			var tag = Cube.selected[0].faces[face]
-			uv_dialog.clipboard.push(new Face(null, tag))
-		}
-		if (uv_dialog.hoveredSide) {
-			addToClipboard(uv_dialog.hoveredSide)
-			uv_dialog.editors[uv_dialog.hoveredSide].message('uv_editor.copied')
-
-		} else if (uv_dialog.single) {
-			addToClipboard(uv_dialog.editors.single.face)
-			uv_dialog.editors.single.message('uv_editor.copied')
-
-		} else if (uv_dialog.selection.length > 0) {
-			uv_dialog.selection.forEach(function(s) {
-				addToClipboard(s)
-				uv_dialog.editors[s].message('uv_editor.copied')
-			})
-		} else {
-			uv_dialog.allFaces.forEach(function(s) {
-				addToClipboard(s)
-				uv_dialog.editors[s].message('uv_editor.copied')
-			})
-		}
-	},
-	paste: function(event) {
-		if (uv_dialog.clipboard === null || Cube.selected.length === 0) return;
-
-		function applyFace(tag, face) {
-			if (!face) face = tag.face
-			Cube.selected.forEach(function(obj) {
-				obj.faces[face].extend(tag)
-				Canvas.updateUV(obj)
-			})
-		}
-
-		if (uv_dialog.hoveredSide) {
-			uv_dialog.editors[uv_dialog.hoveredSide].paste({shiftKey: false})
-
-		} else if (uv_dialog.selection.length === 1) {
-			applyFace(uv_dialog.clipboard[0], uv_dialog.selection[0])
-			if (uv_dialog.single) {
-				uv_dialog.editors.single.message('uv_editor.pasted')
-			} else {
-				uv_dialog.editors[uv_dialog.selection[0]].message('uv_editor.pasted')
-			}
-		} else {
-			if (uv_dialog.clipboard.length === 1) {
-				uv_dialog.selection.forEach(function(s) {
-					applyFace(uv_dialog.clipboard[0], s)
-					uv_dialog.editors[s].message('uv_editor.pasted')
-				})
-			} else {
-				uv_dialog.clipboard.forEach(function(s) {
-					if (uv_dialog.selection.includes(s.face)) {
-						applyFace(s)
-						uv_dialog.editors[s].message('uv_editor.pasted')
-					}
-				})
-			}
-		}
-
-		for (var key in uv_dialog.editors) {
-			if (uv_dialog.editors[key]) {
-				uv_dialog.editors[key].loadData()
-			}
-		}
-	}
-}
 
 BARS.defineActions(function() {
-	new Action('uv_dialog', {
+	/*
+	new Action('UVEditor', {
 		icon: 'view_module',
 		category: 'blockbench',
 		condition: () => !Project.box_uv && Cube.selected.length,
-		click: function () {uv_dialog.openAll()}
+		click: function () {UVEditor.openAll()}
 	})
-	new Action('uv_dialog_full', {
+	new Action('UVEditor_full', {
 		icon: 'web_asset',
 		category: 'blockbench',
-		click: function () {uv_dialog.openFull()}
-	})
+		click: function () {UVEditor.openFull()}
+	})*/
+
 
 	new BarSlider('uv_rotation', {
 		category: 'uv',
@@ -2038,7 +1770,7 @@ BARS.defineActions(function() {
 			Undo.initEdit({elements: Cube.selected, uv_only: true})
 		},
 		onChange: function(slider) {
-			uv_dialog.forSelection('rotate')
+			//UVEditor.forSelection('rotate')
 		},
 		onAfter: () => {
 			Undo.finishEdit('Rotate UV')
@@ -2060,26 +1792,26 @@ BARS.defineActions(function() {
 		},
 		onChange: function(slider) {
 			var value = slider.get().replace(/x/, '');
-			uv_dialog.all_editors.forEach(editor => {
+			UVEditor.all_editors.forEach(editor => {
 				editor.setGrid(value);
 			});
 		}
 	})
-
+	/*
 	new Action('uv_select_all', {
 		icon: 'view_module',
 		category: 'uv',
-		condition: () => open_dialog === 'uv_dialog',
-		click: uv_dialog.selectAll
+		condition: () => open_dialog === 'UVEditor',
+		click: UVEditor.selectAll
 	})
-
+	*/
 	new Action('uv_maximize', {
 		icon: 'zoom_out_map',
 		category: 'uv',
 		condition: () => !Project.box_uv && Cube.selected.length,
 		click: function (event) { 
 			Undo.initEdit({elements: Cube.selected, uv_only: true})
-			uv_dialog.forSelection('maximize', event)
+			UVEditor.forSelection('maximize', event)
 			Undo.finishEdit('Maximize UV')
 		}
 	})
@@ -2089,7 +1821,7 @@ BARS.defineActions(function() {
 		condition: () => !Project.box_uv && Cube.selected.length,
 		click: function (event) { 
 			Undo.initEdit({elements: Cube.selected, uv_only: true})
-			uv_dialog.forSelection('turnMapping', event)
+			UVEditor.forSelection('turnMapping', event)
 			Undo.finishEdit('Turn UV mapping')
 		}
 	})
@@ -2099,7 +1831,7 @@ BARS.defineActions(function() {
 		condition: () => !Project.box_uv && Cube.selected.length,
 		click: function (event) {
 			Undo.initEdit({elements: Cube.selected, uv_only: true})
-			uv_dialog.forSelection('setAutoSize', event)
+			UVEditor.forSelection('setAutoSize', event)
 			Undo.finishEdit('Auto UV')
 		}
 	})
@@ -2109,7 +1841,7 @@ BARS.defineActions(function() {
 		condition: () => !Project.box_uv && Cube.selected.length,
 		click: function (event) {
 			Undo.initEdit({elements: Cube.selected, uv_only: true})
-			uv_dialog.forSelection('setRelativeAutoSize', event)
+			UVEditor.forSelection('setRelativeAutoSize', event)
 			Undo.finishEdit('Auto UV')
 		}
 	})
@@ -2119,7 +1851,7 @@ BARS.defineActions(function() {
 		condition: () => !Project.box_uv && Cube.selected.length,
 		click: function (event) {
 			Undo.initEdit({elements: Cube.selected, uv_only: true})
-			uv_dialog.forSelection('mirrorX', event)
+			UVEditor.forSelection('mirrorX', event)
 			Undo.finishEdit('Mirror UV')
 		}
 	})
@@ -2129,7 +1861,7 @@ BARS.defineActions(function() {
 		condition: () => !Project.box_uv && Cube.selected.length,
 		click: function (event) {
 			Undo.initEdit({elements: Cube.selected, uv_only: true})
-			uv_dialog.forSelection('mirrorY', event)
+			UVEditor.forSelection('mirrorY', event)
 			Undo.finishEdit('Mirror UV')
 		}
 	})
@@ -2138,7 +1870,7 @@ BARS.defineActions(function() {
 		category: 'uv',
 		condition: () => !Project.box_uv && Cube.selected.length,
 		click: function (event) {
-			uv_dialog.forSelection('clear', event)
+			UVEditor.forSelection('clear', event)
 		}
 	})
 	new Action('uv_reset', {
@@ -2147,7 +1879,7 @@ BARS.defineActions(function() {
 		condition: () => !Project.box_uv && Cube.selected.length,
 		click: function (event) {
 			Undo.initEdit({elements: Cube.selected, uv_only: true})
-			uv_dialog.forSelection('reset', event)
+			UVEditor.forSelection('reset', event)
 			Undo.finishEdit('Reset UV')
 		}
 	})
@@ -2157,7 +1889,7 @@ BARS.defineActions(function() {
 		condition: () => !Project.box_uv && Cube.selected.length,
 		click: function (e) {
 			Undo.initEdit({elements: Cube.selected, uv_only: true})
-			main_uv.applyAll(e)
+			UVEditor.applyAll(e)
 			Undo.finishEdit('Apply UV to all faces')
 		}
 	})
@@ -2176,7 +1908,7 @@ BARS.defineActions(function() {
 		},
 		onChange: function(sel, event) {
 			Undo.initEdit({elements: Cube.selected, uv_only: true});
-			uv_dialog.forSelection('switchCullface');
+			UVEditor.forSelection('switchCullface');
 			Undo.finishEdit('Set cullface');
 		}
 	})
@@ -2186,7 +1918,7 @@ BARS.defineActions(function() {
 		condition: () => !Project.box_uv && Cube.selected.length,
 		click: function (event) {
 			Undo.initEdit({elements: Cube.selected, uv_only: true})
-			uv_dialog.forSelection('autoCullface', event)
+			UVEditor.forSelection('autoCullface', event)
 			Undo.finishEdit('Set automatic cullface')
 		}
 	})
@@ -2195,7 +1927,7 @@ BARS.defineActions(function() {
 		condition: () => !Project.box_uv && Cube.selected.length,
 		click: function (event) {
 			Undo.initEdit({elements: Cube.selected, uv_only: true})
-			uv_dialog.forSelection('switchTint', event)
+			UVEditor.forSelection('switchTint', event)
 			Undo.finishEdit('Toggle face tint')
 		}
 	})
@@ -2206,12 +1938,12 @@ BARS.defineActions(function() {
 			return 1;
 		},
 		get: function() {
-			return Cube.selected[0] && Cube.selected[0].faces[main_uv.face].tint
+			return Cube.selected[0] && Cube.selected[0].faces[UVEditor.face].tint
 		},
 		change: function(modify) {
 			let number = Math.clamp(Math.round(modify(this.get())), -1)
 
-			uv_dialog.forSelection('setTint', event, number)
+			UVEditor.forSelection('setTint', event, number)
 		},
 		onBefore: function() {
 			Undo.initEdit({elements: Cube.selected, uv_only: true})
@@ -2227,26 +1959,276 @@ BARS.defineActions(function() {
 		icon: 'view_quilt',
 		category: 'uv',
 		onChange(value) {
-			main_uv.showing_overlays = value;
-			main_uv.displayAllMappingOverlays();
+			//UVEditor.showing_overlays = value;
+			//UVEditor.displayAllMappingOverlays();
 		}
 	})
 })
 
 Interface.definePanels(function() {
 	
-	Interface.Panels.uv = new Panel({
+	UVEditor.panel = Interface.Panels.uv = new Panel({
 		id: 'uv',
 		icon: 'photo_size_select_large',
 		selection_only: true,
 		condition: {modes: ['edit', 'paint']},
 		toolbars: {
-			bottom: Toolbars.main_uv
+			bottom: Toolbars.UVEditor
 		},
 		onResize: function() {
-			let size = limitNumber(this.node.clientWidth - 10, 64, 1200)
-			size = Math.floor(size)
-			main_uv.setSize(size)
+			UVEditor.vue.updateSize()
+		},
+		component: {
+			data() {return {
+				mode: 'uv',
+				width: 320,
+				height: 320,
+				zoom: 1,
+				checkerboard: settings.uv_checkerboard.value,
+				texture: '',
+
+				project_resolution: [16, 16],
+				elements: [],
+				selected_vertices: {},
+				selected_faces: []
+			}},
+			computed: {
+				inner_width() {
+					return this.width * this.zoom;
+				},
+				inner_height() {
+					return this.width * (this.project_resolution[0] / this.project_resolution[1]) * this.zoom;
+				},
+				mappable_elements() {
+					return this.elements.filter(element => element.faces);
+				}
+			},
+			watch: {
+				width(width) {
+				}
+			},
+			methods: {
+				projectResolution() {
+					BarItems.project_window.trigger()
+				},
+				updateSize() {
+					let old_size = this.width;
+					let size = Math.floor(Math.clamp(UVEditor.panel.width - 10, 64, 1e5));
+					this.width = size;
+					this.$refs.viewport.scrollLeft = Math.round(this.$refs.viewport.scrollLeft * (size / old_size));
+					this.$refs.viewport.scrollTop  = Math.round(this.$refs.viewport.scrollTop  * (size / old_size));
+
+					/*for (var id in UVEditor.sliders) {
+						UVEditor.sliders[id].setWidth(size/(Project.box_uv?2:4)-1)
+					}*/
+				},
+				setMode(mode) {
+					this.mode = mode;
+				},
+				updateTexture() {
+					let texture;
+					if (Format.single_texture) {
+						texture = Texture.getDefault();
+					} else {
+						let elements = this.mappable_elements;
+						if (elements.length && this.selected_faces.length) {
+							for (let element of elements) {
+								if (element.faces[this.selected_faces[0]]) {
+									texture = element.faces[this.selected_faces[0]].getTexture();
+								}
+							}
+						}
+					}
+					if (texture == null) {
+						this.texture = null;
+						UVEditor.texture = null;
+					} else if (texture instanceof Texture) {
+						this.texture = (!texture.error || texture.error == 2) ? texture.source : '';
+					} else {
+						this.texture = '';
+					}
+				},
+				onMouseWheel(event) {
+					if (event.ctrlOrCmd) {
+				
+						event.stopPropagation()
+						event.preventDefault()
+				
+						var n = (event.deltaY < 0) ? 0.1 : -0.1;
+						n *= this.zoom
+						var number = limitNumber(this.zoom + n, 0.5, this.max_zoom)
+						let old_zoom = this.zoom;
+
+						this.zoom = number;
+						
+						let {viewport} = this.$refs;
+						let offset = $(this.$refs.viewport).offset()
+						let offsetX = event.clientX - offset.left;
+						let offsetY = event.clientY - offset.top;
+				
+						let zoom_diff = this.zoom - old_zoom;
+						viewport.scrollLeft += ((viewport.scrollLeft + offsetX) * zoom_diff) / old_zoom
+						viewport.scrollTop  += ((viewport.scrollTop  + offsetY) * zoom_diff) / old_zoom
+				
+						return false;
+					}
+				},
+				onMouseDown(event) {
+					if (event.which === 2) {
+						let {viewport} = this.$refs;
+						let coords = {x: 0, y: 0}
+						function dragMouseWheel(e2) {
+							console.log()
+							viewport.scrollLeft -= (e2.pageX - coords.x)
+							viewport.scrollTop -= (e2.pageY - coords.y)
+							coords = {x: e2.pageX, y: e2.pageY}
+						}
+						function dragMouseWheelStop(e) {
+							removeEventListeners(document, 'mousemove touchmove', dragMouseWheel);
+							removeEventListeners(document, 'mouseup touchend', dragMouseWheelStop);
+						}
+						addEventListeners(document, 'mousemove touchmove', dragMouseWheel);
+						addEventListeners(document, 'mouseup touchend', dragMouseWheelStop);
+						coords = {x: event.pageX, y: event.pageY}
+						event.preventDefault();
+						return false;
+					}
+				},
+				contextMenu(event) {
+					UVEditor.menu.open(event);
+				}
+			},
+			template: `
+				<div class="UVEditor" ref="main" :class="{checkerboard_trigger: checkerboard}" id="UVEditor">
+
+					<div class="bar next_to_title" id="uv_title_bar">
+						<div id="project_resolution_status" @click="projectResolution()">
+							{{ project_resolution[0] + ' ⨉ ' + project_resolution[1] }}
+						</div>
+					</div>
+
+					<div id="uv_viewport" @contextmenu="contextMenu($event)" @mousedown="onMouseDown($event)" @touchstart="onMouseDown($event)" @mousewheel="onMouseWheel($event)" class="checkerboard_target" ref="viewport" :style="{width: width + 'px', height: height + 'px', overflowX: (zoom > 1) ? 'scroll' : 'hidden', overflowY: (inner_height > height) ? 'scroll' : 'hidden'}">
+
+						<div id="uv_frame" ref="frame" :style="{width: inner_width + 'px', height: inner_height + 'px'}">
+
+							<template v-if="mode == 'uv'" v-for="element in mappable_elements" :key="element.uuid">
+								<template v-if="element.faces" v-for="(face, key) in element.faces" :key="key">
+									{{ element.name + ' - ' + key }}
+								</template>
+							</template>
+
+							<img style="object-fit: cover; object-position: 0px 0px;" v-if="texture" :src="texture">
+						</div>
+					</div>
+					<div class="bar uv_editor_sliders" ref="slider_bar" style="margin-left: 2px;">
+					</div>
+					<div class="toolbar_wrapper uv_editor">
+					</div>
+				</div>
+			</div>
+			`
 		}
 	})
+
+	Toolbars.uv_editor.toPlace()
+
+	let {slider_bar} = UVEditor.vue.$refs;
+
+	var onBefore = function() {
+		Undo.initEdit({elements: Cube.selected})
+	}
+	var onAfter = function() {
+		Undo.finishEdit('Edit UV')
+	}
+	var getInterval = function(event) {
+		return 1/UVEditor.grid
+	}
+	new NumSlider({
+		id: 'uv_slider_pos_x',
+		private: true,
+		condition: function() {return true},
+		get: function() {
+			if (Project.box_uv && Cube.selected[0]) {
+				return trimFloatNumber(Cube.selected[0].uv_offset[0])
+			} else if (Cube.selected[0]) {
+				var face_uv = Cube.selected[0].faces[UVEditor.face].uv
+				if (face_uv) {
+					return trimFloatNumber(face_uv[0])
+				}
+			}
+			return 0
+		},
+		change: function(modify) {
+			UVEditor.slidePos(modify, 0)
+		},
+		getInterval,
+		onBefore,
+		onAfter
+	}).toElement(slider_bar);
+
+	new NumSlider({
+		id: 'uv_slider_pos_y',
+		private: true,
+		condition: function() {return true},
+		get: function() {
+			if (Project.box_uv && Cube.selected[0]) {
+				return trimFloatNumber(Cube.selected[0].uv_offset[1])
+			} else if (Cube.selected[0]) {
+				var face_uv = Cube.selected[0].faces[UVEditor.face].uv
+				if (face_uv) {
+					return trimFloatNumber(face_uv[1])
+				}
+			}
+			return 0
+		},
+		change: function(modify) {
+			UVEditor.slidePos(modify, 1)
+		},
+		getInterval,
+		onBefore,
+		onAfter
+	}).toElement(slider_bar);
+
+	new NumSlider({
+		id: 'uv_slider_size_x',
+		private: true,
+		condition: function() {return !Project.box_uv},
+		get: function() {
+			if (!Project.box_uv && Cube.selected[0]) {
+				var face_uv = Cube.selected[0].faces[UVEditor.face].uv
+				if (face_uv) {
+					return trimFloatNumber(face_uv[2] - face_uv[0])
+				}
+			}
+			return 0
+		},
+		change: function(modify) {
+			UVEditor.slideSize(modify, 0)
+		},
+		getInterval,
+		onBefore,
+		onAfter
+	}).toElement(slider_bar);
+
+	new NumSlider({
+		id: 'uv_slider_size_y',
+		private: true,
+		condition: function() {return !Project.box_uv},
+		get: function() {
+			if (!Project.box_uv && Cube.selected[0]) {
+				var face_uv = Cube.selected[0].faces[UVEditor.face].uv
+				if (face_uv) {
+					return trimFloatNumber(face_uv[3] - face_uv[1])
+				}
+			}
+			return 0
+		},
+		change: function(modify) {
+			UVEditor.slideSize(modify, 1)
+		},
+		getInterval,
+		onBefore,
+		onAfter
+
+	}).toElement(slider_bar);
 })
diff --git a/js/undo.js b/js/undo.js
index 3aa353f..70b6913 100644
--- a/js/undo.js
+++ b/js/undo.js
@@ -363,13 +363,6 @@ class UndoSystem {
 
 		Blockbench.dispatchEvent('load_undo_save', {save, reference, mode})
 
-		if (open_dialog == 'uv_dialog') {
-			for (var key in uv_dialog.editors) {
-				if (uv_dialog.editors[key]) {
-					uv_dialog.editors[key].loadData()
-				}
-			}
-		}
 		updateSelection()
 		if ((save.outliner || save.group) && Format.bone_rig) {
 			Canvas.updateAllBones();
@@ -486,7 +479,7 @@ BARS.defineActions(function() {
 	new Action('undo', {
 		icon: 'undo',
 		category: 'edit',
-		condition: () => (!open_dialog || open_dialog === 'uv_dialog' || open_dialog === 'toolbar_edit'),
+		condition: () => Project,
 		work_in_dialog: true,
 		keybind: new Keybind({key: 'z', ctrl: true}),
 		click(e) {
@@ -496,7 +489,7 @@ BARS.defineActions(function() {
 	new Action('redo', {
 		icon: 'redo',
 		category: 'edit',
-		condition: () => (!open_dialog || open_dialog === 'uv_dialog' || open_dialog === 'toolbar_edit'),
+		condition: () => Project,
 		work_in_dialog: true,
 		keybind: new Keybind({key: 'y', ctrl: true}),
 		click(e) {
diff --git a/keymaps/blender.bbkeymap b/keymaps/blender.bbkeymap
index c6b32dc..95c0316 100644
--- a/keymaps/blender.bbkeymap
+++ b/keymaps/blender.bbkeymap
@@ -139,8 +139,6 @@
 		"change_textures_folder": null,
 		"animated_textures": null,
 		"animated_texture_frame": null,
-		"uv_dialog": null,
-		"uv_dialog_full": null,
 		"uv_rotation": null,
 		"uv_grid": null,
 		"uv_select_all": null,
diff --git a/keymaps/cinema4d.bbkeymap b/keymaps/cinema4d.bbkeymap
index 66c9a1a..b2ea90b 100644
--- a/keymaps/cinema4d.bbkeymap
+++ b/keymaps/cinema4d.bbkeymap
@@ -139,8 +139,6 @@
 		"change_textures_folder": null,
 		"animated_textures": null,
 		"animated_texture_frame": null,
-		"uv_dialog": null,
-		"uv_dialog_full": null,
 		"uv_rotation": null,
 		"uv_grid": null,
 		"uv_select_all": null,
diff --git a/keymaps/maya.bbkeymap b/keymaps/maya.bbkeymap
index 19edb19..fc73028 100644
--- a/keymaps/maya.bbkeymap
+++ b/keymaps/maya.bbkeymap
@@ -139,8 +139,6 @@
 		"change_textures_folder": null,
 		"animated_textures": null,
 		"animated_texture_frame": null,
-		"uv_dialog": null,
-		"uv_dialog_full": null,
 		"uv_rotation": null,
 		"uv_grid": null,
 		"uv_select_all": null,
diff --git a/lang/en.json b/lang/en.json
index 1d44d5d..98e1bcb 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -854,11 +854,6 @@
 	"action.reset_theme": "Reset Theme",
 	"action.reset_theme.desc": "Reset to the default Blockbench theme",
 
-	"action.uv_dialog": "UV Window...",
-	"action.uv_dialog.desc": "Open the UV dialog to see all faces next to each other",
-	"action.uv_dialog_full": "Full View...",
-	"action.uv_dialog_full.desc": "Open the UV dialog to edit one face in fullscreen",
-
 	"action.undo": "Undo",
 	"action.undo.desc": "Undoes the last change",
 	"action.redo": "Redo",