diff --git a/code/datums/datumvars.dm b/code/datums/datumvars.dm
index 862cd1b26b9..94209ec4fc2 100644
--- a/code/datums/datumvars.dm
+++ b/code/datums/datumvars.dm
@@ -112,6 +112,8 @@
 	if(!D)
 		return
 
+	var/datum/asset/asset_cache_datum = get_asset_datum(/datum/asset/simple/vv)
+	asset_cache_datum.send(usr)
 
 	var/islist = islist(D)
 	var/isclient = isclient(D)
@@ -249,28 +251,10 @@
 
 	var/html = {"
 <html>
-	<meta charset="UTF-8">
 	<head>
+		<meta charset="UTF-8">
 		<title>[title]</title>
-		<style>
-			body {
-				font-family: Verdana, sans-serif;
-				font-size: 9pt;
-			}
-			.value {
-				font-family: "Courier New", monospace;
-				font-size: 8pt;
-			}
-			.var {
-				display: none;
-			}
-			.var.visible {
-				display: list-item;
-			}
-			.var.selected {
-				background-color: "#ffee88";
-			}
-		</style>
+		<link rel="stylesheet" type="text/css" href="[SSassets.transport.get_asset_url("view_variables.css")]">
 	</head>
 	<body onload='selectTextField(); updateSearch()' onkeydown='return checkreload()' onkeyup='updateSearch()'>
 		<script type="text/javascript">
@@ -472,58 +456,73 @@
 	usr << browse(html, "window=variables[refid];size=475x650")
 
 #define VV_HTML_ENCODE(thing) ( sanitize ? html_encode(thing) : thing )
-/proc/debug_variable(name, value, level, datum/DA = null, sanitize = TRUE)
+/proc/debug_variable(name, value, level, datum/owner, sanitize = TRUE)
 	var/header
-	if(DA)
-		if(islist(DA))
-			var/list/debug_list = DA
+	if(owner)
+		if(islist(owner))
+			var/list/debug_list = owner
 			var/index = name
 			if(value)
 				name = debug_list[name] // name is really the index until this line
 			else
 				value = debug_list[name]
-			header = "<li class='vars visible'>(<a href='byond://?_src_=vars;listedit=\ref[DA];index=[index]'>E</a>) (<a href='byond://?_src_=vars;listchange=\ref[DA];index=[index]'>C</a>) (<a href='byond://?_src_=vars;listremove=\ref[DA];index=[index]'>-</a>) "
+			header = "<li class='vars visible'>(<a href='byond://?_src_=vars;listedit=\ref[owner];index=[index]'>E</a>) (<a href='byond://?_src_=vars;listchange=\ref[owner];index=[index]'>C</a>) (<a href='byond://?_src_=vars;listremove=\ref[owner];index=[index]'>-</a>) "
 		else
-			header = "<li class='vars visible'>(<a href='byond://?_src_=vars;datumedit=[DA.UID()];varnameedit=[name]'>E</a>) (<a href='byond://?_src_=vars;datumchange=[DA.UID()];varnamechange=[name]'>C</a>) (<a href='byond://?_src_=vars;datummass=[DA.UID()];varnamemass=[name]'>M</a>) "
+			header = "<li class='vars visible'>(<a href='byond://?_src_=vars;datumedit=[owner.UID()];varnameedit=[name]'>E</a>) (<a href='byond://?_src_=vars;datumchange=[owner.UID()];varnamechange=[name]'>C</a>) (<a href='byond://?_src_=vars;datummass=[owner.UID()];varnamemass=[name]'>M</a>) "
 	else
 		header = "<li>"
 
-	var/item
+	var/name_part = VV_HTML_ENCODE(name)
+	if(level > 0 || islist(owner)) //handling keys in assoc lists
+		if(isdatum(name))
+			var/datum/datum_key = name
+			name_part = "<a href='byond://?_src_=vars;Vars=[datum_key.UID()]'>[VV_HTML_ENCODE(name)] \ref[datum_key]</a>"
+		else if(isclient(name))
+			var/client/client_key = name
+			name_part = "<a href='byond://?_src_=vars;Vars=[client_key.UID()]'>[VV_HTML_ENCODE(client_key)] \ref[client_key]</a> ([client_key] [client_key.type])"
+		else if(islist(name))
+			var/list/list_value = name
+			name_part = "<a href='byond://?_src_=vars;VarsList=\ref[list_value]'> /list ([length(list_value)]) \ref[name]</a>"
+
+	var/item = _debug_variable_value(name, value, level, owner, sanitize)
+
+	return "[header][name_part] = [item]</li>"
+
+/proc/_debug_variable_value(name, value, level, datum/owner, sanitize)
+
+	. = "<font color='red'>DISPLAY_ERROR:</font> ([value] \ref[value]s)"
+
 	if(isnull(value))
-		item = "[VV_HTML_ENCODE(name)] = <span class='value'>null</span>"
+		return "<span class='value'>null</span>"
 
 	else if(is_color_text(value))
-		item = "[VV_HTML_ENCODE(name)] = <span class='value'><span class='colorbox' style='width: 1em; background-color: [value]; border: 1px solid black; display: inline-block'>&nbsp;</span> \"[value]\"</span>"
+		return "<span class='value'><span class='colorbox' style='width: 1em; background-color: [value]; border: 1px solid black; display: inline-block'>&nbsp;</span> \"[value]\"</span>"
 
 	else if(istext(value))
-		item = "[VV_HTML_ENCODE(name)] = <span class='value'>\"[VV_HTML_ENCODE(value)]\"</span>"
+		return "<span class='value'>\"[VV_HTML_ENCODE(value)]\"</span>"
 
 	else if(isicon(value))
 		#ifdef VARSICON
-		item = "[name] = /icon (<span class='value'>[value]</span>) [bicon(value, use_class=0)]"
+		return "/icon (<span class='value'>[value]</span>) [bicon(value, use_class=0)]"
 		#else
-		item = "[name] = /icon (<span class='value'>[value]</span>)"
+		return "/icon (<span class='value'>[value]</span>)"
 		#endif
 
 	else if(istype(value, /image))
 		var/image/I = value
 		#ifdef VARSICON
-		item = "<a href='byond://?_src_=vars;Vars=[I.UID()]'>[name] \ref[value]</a> = /image (<span class='value'>[value]</span>) [bicon(value, use_class=0)]"
+		return "<a href='byond://?_src_=vars;Vars=[I.UID()]'>[name] \ref[value]</a> /image (<span class='value'>[value]</span>) [bicon(value, use_class=0)]"
 		#else
-		item = "<a href='byond://?_src_=vars;Vars=[I.UID()]'>[name] \ref[value]</a> = /image (<span class='value'>[value]</span>)"
+		return "<a href='byond://?_src_=vars;Vars=[I.UID()]'>[name] \ref[value]</a> /image (<span class='value'>[value]</span>)"
 		#endif
 
 	else if(isfile(value))
-		item = "[VV_HTML_ENCODE(name)] = <span class='value'>'[value]'</span>"
+		return "<span class='value'>'[value]'</span>"
 
 	else if(istype(value, /datum))
 		var/datum/D = value
-		item = "<a href='byond://?_src_=vars;Vars=[D.UID()]'>[VV_HTML_ENCODE(name)] \ref[value]</a> = [D.type]"
+		return D.debug_variable_value(sanitize)
 
-	else if(isclient(value))
-		var/client/C = value
-		item = "<a href='byond://?_src_=vars;Vars=[C.UID()]'>[VV_HTML_ENCODE(name)] \ref[value]</a> = [C] [C.type]"
-//
 	else if(islist(value))
 		var/list/L = value
 		var/list/items = list()
@@ -540,22 +539,29 @@
 
 				items += debug_variable(key, val, level + 1, sanitize = sanitize)
 
-			if(isdatum(name))
-				item = "<a href='byond://?_src_=vars;VarsList=\ref[name]'>[VV_HTML_ENCODE(name)]</a> = <a href='byond://?_src_=vars;VarsList=\ref[L]'>/list ([length(L)])</a><ul>[items.Join()]</ul>"
-			else
-				item = "<a href='byond://?_src_=vars;VarsList=\ref[L]'>[VV_HTML_ENCODE(name)] = /list ([length(L)])</a><ul>[items.Join()]</ul>"
+			return "<a href='byond://?_src_=vars;VarsList=\ref[L]'>/list ([length(L)])</a><ul>[items.Join()]</ul>"
 
 		else
-			item = "<a href='byond://?_src_=vars;VarsList=\ref[L]'>[VV_HTML_ENCODE(name)] = /list ([length(L)])</a>"
+			return "<a href='byond://?_src_=vars;VarsList=\ref[L]'>/list ([length(L)])</a>"
 
 	else if(name in GLOB.bitfields)
-		item = "[VV_HTML_ENCODE(name)] = <span class='value'>[VV_HTML_ENCODE(translate_bitfield(VV_BITFIELD, name, value))]</span>"
+		return "<span class='value'>[VV_HTML_ENCODE(translate_bitfield(VV_BITFIELD, name, value))]</span>"
 	else
-		item = "[VV_HTML_ENCODE(name)] = <span class='value'>[VV_HTML_ENCODE(value)]</span>"
+		return "<span class='value'>[VV_HTML_ENCODE(value)]</span>"
 
-	return "[header][item]</li>"
+/datum/proc/debug_variable_value(sanitize)
+	return "<a href='byond://?_src_=vars;Vars=[UID()]'>[VV_HTML_ENCODE(src)] \ref[src]</a> ([type])"
 
-#undef VV_HTML_ENCODE
+/matrix/debug_variable_value(sanitize)
+	return {"<span class='value'>
+			<table class='matrixbrak'><tbody><tr><td class='lbrak'>&nbsp;</td><td>
+			<table class='matrix'>
+			<tbody>
+				<tr><td>[a]</td><td>[d]</td><td>0</td></tr>
+				<tr><td>[b]</td><td>[e]</td><td>0</td></tr>
+				<tr><td>[c]</td><td>[f]</td><td>1</td></tr>
+			</tbody>
+			</table></td><td class='rbrak'>&nbsp;</td></tr></tbody></table></span>"} //TODO link to modify_transform wrapper for all matrices
 
 /client/proc/view_var_Topic(href, href_list, hsrc)
 	//This should all be moved over to datum/admins/Topic() or something ~Carn
@@ -1478,3 +1484,5 @@
 		to_chat(src, "<span class='debug'>Now showing GLOB.[var_search].</span>")
 		return debug_variables(result)
 	to_chat(src, "<span class='debug'>GLOB.[var_search] returned [result].</span>")
+
+#undef VV_HTML_ENCODE
diff --git a/code/modules/asset_cache/assets/asset_vv.dm b/code/modules/asset_cache/assets/asset_vv.dm
new file mode 100644
index 00000000000..0dd974c7c79
--- /dev/null
+++ b/code/modules/asset_cache/assets/asset_vv.dm
@@ -0,0 +1,4 @@
+/datum/asset/simple/vv
+	assets = list(
+		"view_variables.css" = 'html/admin/view_variables.css'
+	)
diff --git a/html/admin/view_variables.css b/html/admin/view_variables.css
new file mode 100644
index 00000000000..3bfced221de
--- /dev/null
+++ b/html/admin/view_variables.css
@@ -0,0 +1,48 @@
+body {
+	font-family: Verdana, sans-serif;
+	font-size: 9pt;
+}
+.value {
+	font-family: "Courier New", monospace;
+	font-size: 8pt;
+	display: inline-block;
+}
+
+.var {
+	display: none;
+}
+
+.var.visible {
+	display: list-item;
+}
+
+.var.selected {
+	background-color: "#ffee88";
+}
+table.matrix {
+	border-collapse: collapse; border-spacing: 0;
+	font-size: 7pt;
+}
+.matrix td{
+	text-align: center;
+	padding: 0 1ex 0ex 1ex;
+}
+table.matrixbrak {
+	border-collapse: collapse; border-spacing: 0;
+}
+table.matrixbrak td.lbrak {
+	width: 0.8ex;
+	font-size: 50%;
+	border-top: solid 0.25ex black;
+	border-bottom: solid 0.25ex black;
+	border-left: solid 0.5ex black;
+	border-right: none;
+}
+table.matrixbrak td.rbrak {
+		width: 0.8ex;
+		font-size: 50%;
+		border-top: solid 0.25ex black;
+		border-bottom: solid 0.25ex black;
+		border-right: solid 0.5ex black;
+		border-left: none;
+}
diff --git a/paradise.dme b/paradise.dme
index 6c43c64d5fa..618d058d11e 100644
--- a/paradise.dme
+++ b/paradise.dme
@@ -1661,6 +1661,7 @@
 #include "code\modules\asset_cache\assets\asset_safe.dm"
 #include "code\modules\asset_cache\assets\asset_strip.dm"
 #include "code\modules\asset_cache\assets\asset_tgui.dm"
+#include "code\modules\asset_cache\assets\asset_vv.dm"
 #include "code\modules\asset_cache\transports\asset_transport.dm"
 #include "code\modules\asset_cache\transports\webroot_transport.dm"
 #include "code\modules\atmospherics\environmental\LINDA_fire.dm"
