diff --git a/app/common/directives/serial-console.html b/app/common/directives/serial-console.html
index 30ba673..7238f54 100644
--- a/app/common/directives/serial-console.html
+++ b/app/common/directives/serial-console.html
@@ -1,5 +1,5 @@
 <div class="serial-lan__wrapper">
-	<div id="terminal" class="serial-lan__terminal"></div>
+	<div id="terminal"></div>
 	<div class="serial-lan__actions">
 		<button class="inline btn-pop-out" ng-click="openTerminalWindow()" ng-show="showTabBtn === true">Open in new tab</button>
 	</div>
diff --git a/app/common/directives/serial-console.js b/app/common/directives/serial-console.js
index b320bdc..71340df 100644
--- a/app/common/directives/serial-console.js
+++ b/app/common/directives/serial-console.js
@@ -1,4 +1,8 @@
-import {hterm, lib} from 'hterm-umdjs';
+import {Terminal} from 'xterm';
+import style from 'xterm/dist/xterm.css';
+import * as attach from 'xterm/lib/addons/attach/attach';
+import * as fit from 'xterm/lib/addons/fit/fit';
+
 
 window.angular && (function(angular) {
   'use strict';
@@ -14,39 +18,25 @@
           function($scope, $window, dataService) {
             $scope.dataService = dataService;
 
-            // See https://github.com/macton/hterm for available hterm options
+            // See https://github.com/xtermjs/xterm.js/ for available xterm
+            // options
 
-            hterm.defaultStorage = new lib.Storage.Local();
-            var term = new hterm.Terminal('host-console');
-            term.decorate(document.querySelector('#terminal'));
-            // Set cursor color
-            term.prefs_.set('cursor-color', 'rgba(83, 146, 255, .5)');
-            // Set background color
-            term.prefs_.set('background-color', '#19273c');
-            // Allows keyboard input
-            term.installKeyboard();
+            Terminal.applyAddon(attach);  // Apply the `attach` addon
+            Terminal.applyAddon(fit);     // Apply the `fit` addon
 
-            // The BMC exposes a websocket at /console0. This can be read
-            // or written to access the host serial console.
+            var term = new Terminal();
+            term.open(document.getElementById('terminal'));
+            term.fit();
+            var SOL_THEME = {
+              background: '#19273c',
+              cursor: 'rgba(83, 146, 255, .5)',
+              scrollbar: 'rgba(83, 146, 255, .5)'
+            };
+            term.setOption('theme', SOL_THEME);
             var hostname = dataService.getHost().replace('https://', '');
             var host = 'wss://' + hostname + '/console0';
             var ws = new WebSocket(host);
-            ws.onmessage = function(evt) {
-              // websocket -> terminal
-              term.io.print(evt.data);
-            };
-
-            // terminal -> websocket
-            term.onTerminalReady = function() {
-              var io = term.io.push();
-              io.onVTKeystroke = function(str) {
-                ws.send(str);
-              };
-              io.sendString = function(str) {
-                ws.send(str);
-              };
-            };
-
+            term.attach(ws);
             ws.onopen = function() {
               console.log('websocket opened');
             };
diff --git a/app/server-control/controllers/remote-console-controller.html b/app/server-control/controllers/remote-console-controller.html
index d26ebbe..3011eb0 100644
--- a/app/server-control/controllers/remote-console-controller.html
+++ b/app/server-control/controllers/remote-console-controller.html
@@ -9,7 +9,11 @@
 	</section>
 	<section class="row column">
 		<p class="serial-lan__copy">The Serial over LAN (SoL) console redirects the output of the server’s serial port to a browser window on your workstation.</p>
-		<serial-console show-tab-btn="true"></serial-console>
+	</section>
+	<section class="row column">
+		<div class="terminal-container">
+			<serial-console show-tab-btn="true"></serial-console>
+		</div>
 	</section>
 </div>
 
diff --git a/app/server-control/controllers/remote-console-window-controller.html b/app/server-control/controllers/remote-console-window-controller.html
index eca7bec..bde520d 100644
--- a/app/server-control/controllers/remote-console-window-controller.html
+++ b/app/server-control/controllers/remote-console-window-controller.html
@@ -1,5 +1,7 @@
 <div class="serial-lan__header">
 	<a class="bold" ng-click="close()"><i class="icon icon__return"></i> Return to OpenBmc</a>
 </div>
-<serial-console show-tab-btn="false"></serial-console>
+<div class="window-terminal-container">
+	<serial-console show-tab-btn="false"></serial-console>
+</div>
 
diff --git a/app/server-control/styles/remote-console.scss b/app/server-control/styles/remote-console.scss
index c4dd9ac..41b144d 100644
--- a/app/server-control/styles/remote-console.scss
+++ b/app/server-control/styles/remote-console.scss
@@ -8,16 +8,6 @@
 .serial-lan__copy {
   padding: 1em 0;
 }
-.serial-lan__terminal {
-  position: relative;
-  width: 101%; //extra 1% to fix redraw issue with terminal window
-  height: 400px;
-  border: 1em solid #19273c;
-  //TODO: Need to move from hterm to xterm as iframe used is adding the extra
-  //scroll bar. Also need to rework on the height setting along with $window
-  //directive.
-  overflow-x: hidden;
-}
 
 .serial-lan__actions {
   float: right;
@@ -40,3 +30,15 @@
   line-height: 0;
   a {color: $black;}
 }
+
+.terminal-container {
+  position: relative;
+  height: 25em;
+  width: 100%;
+}
+
+.window-terminal-container {
+  position: relative;
+  height: 25em;
+  max-width: 70em;
+}
diff --git a/package-lock.json b/package-lock.json
index d71da1e..76522a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9894,6 +9894,11 @@
       "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
       "dev": true
     },
+    "xterm": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-3.7.0.tgz",
+      "integrity": "sha512-EnWWiVjyN2JMeFYqBAEM3Xe2z61otmArAzKxZMH33IctNGgKL/pbnjZBBWShCroH9KkXAWsHAePzrAURmNu8OQ=="
+    },
     "y18n": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
diff --git a/package.json b/package.json
index aaff56c..51ccef6 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,8 @@
     "angular-websocket": "^2.0.1",
     "angularUtils": "git+https://github.com/michaelbromley/angularUtils.git#75dd112ff7b71b32f08743c2d0f29434f12dfa5c",
     "bootstrap": "^3.3.7",
-    "hterm-umdjs": "^1.4.1"
+    "hterm-umdjs": "^1.4.1",
+    "xterm": "^3.7.0"
   },
   "peerDependencies": {},
   "devDependencies": {