diff --git a/nano/js/nano_base_helpers.js b/nano/js/nano_base_helpers.js
index 2f0f59772d3..42b68b4f6e8 100644
--- a/nano/js/nano_base_helpers.js
+++ b/nano/js/nano_base_helpers.js
@@ -92,7 +92,7 @@ NanoBaseHelpers = function ()
 				return string.charAt(0).toUpperCase() + string.slice(1);
 			},
 			// Display a bar. Used to show health, capacity, etc. Use difClass if the entire display bar class should be different
-			displayBar: function(value, rangeMin, rangeMax, styleClass, showText, difClass) {
+			displayBar: function(value, rangeMin, rangeMax, styleClass, showText, difClass, direction) {
 
 				if (rangeMin < rangeMax)
                 {
@@ -129,12 +129,21 @@ NanoBaseHelpers = function ()
 				
 				if (typeof difClass == 'undefined' || !difClass)
 				{
-					return '<div class="displayBar ' + styleClass + '"><div class="displayBarFill ' + styleClass + '" style="width: ' + percentage + '%;"></div><div class="displayBarText ' + styleClass + '">' + showText + '</div></div>';
+					difClass = ''
 				}
-
+				
+				if(typeof direction == 'undefined' || !direction)
+				{
+					direction = 'width'
+				}
+				else
+				{
+					direction = 'height'
+				}
+				
 				var percentage = Math.round((value - rangeMin) / (rangeMax - rangeMin) * 100);
-
-				return '<div class="' + difClass + ' ' + styleClass + '"><div class="' + difClass + 'Fill ' + styleClass + '" style="height: ' + percentage + '%;"></div><div class="' + difClass + 'Text ' + styleClass + '">' + showText + '</div></div>';
+				
+				return '<div class="displayBar' + difClass + ' ' + styleClass + '"><div class="displayBar' + difClass + 'Fill ' + styleClass + '" style="' + direction + ': ' + percentage + '%;"></div><div class="displayBar' + difClass + 'Text ' + styleClass + '">' + showText + '</div></div>';
 			},
 			// Display DNA Blocks (for the DNA Modifier UI)
 			displayDNABlocks: function(dnaString, selectedBlock, selectedSubblock, blockSize, paramKey) {
diff --git a/nano/templates/xenobio_computer.tmpl b/nano/templates/xenobio_computer.tmpl
index 96e74b23b34..730c06358fd 100644
--- a/nano/templates/xenobio_computer.tmpl
+++ b/nano/templates/xenobio_computer.tmpl
@@ -9,10 +9,10 @@ Used In File(s): \code\modules\xenobio2\machines\injector_computer.dm
 	<div class="itemContent" style="text-align: center; width: 100px">
 		{{if data.beaker}}
 			{{:data.reagentAmount}}u / {{:data.reagentMax}}u
-			{{:helper.displayBar(data.reagentAmount, data.reagentMax, data.reagentMin, 'good', null, 'displayBarBeaker')}}
+			{{:helper.displayBar(data.reagentAmount, data.reagentMax, data.reagentMin, 'good', null, 'Beaker', 1)}}
 		{{else}}
 			<span class='bad'><b>ERR</b></span>
-			{{:helper.displayBar(data.reagentAmount, data.reagentMax, data.reagentMin, 'good', null, 'displayBarBeaker')}}
+			{{:helper.displayBar(data.reagentAmount, data.reagentMax, data.reagentMin, 'good', null, 'Beaker', 1)}}
 		{{/if}}
 	</div>
 	<div style="padding-left: 110px;">