diff --git a/index.html b/index.html
index 6c86697..6614295 100644
--- a/index.html
+++ b/index.html
@@ -6,39 +6,33 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>webssh_plus</title>
     <script src="/socket.io/socket.io.js"></script>
+    <link rel="stylesheet" href="node_modules/xterm/dist/xterm.css" />
+    <script src="node_modules/xterm/dist/xterm.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <style>
         body {
             margin: 0;
             padding: 0;
         }
-
-        div.terminal {
-            font-family: monospace;
-            color: white;
-            background: black;
-        }
     </style>
 </head>
 <body>
-    <div class="terminal">
+    <div id="terminal">
         <!-- ! Here will be the terminal stuff -->
     </div>
     <script>
+        var term = new Terminal();
+        term.open(document.getElementById('terminal'))
         // Connect to the socket.io server
         var socket = io.connect('http://localhost:9774');
         // Wait for data from the server
         socket.on('output', function (data) {
-            // Insert some line breaks where they belong
-            data = data.replace("n", "");
-            data = data.replace("r", "");
-            // Append the data to our terminal
-            $('.terminal').append(data);
+            term.write(data);
         });
         // Listen for user input and pass it to the server
-        $(document).on("keypress",function(e){
-            var char = String.fromCharCode(e.which);
-            socket.emit("input", char);
+        term.on('data', function(data) {
+            console.log(data);
+            socket.emit('input', data);
         });
     </script>
 </body>
diff --git a/main.js b/main.js
index 13e2358..e5b29ec 100644
--- a/main.js
+++ b/main.js
@@ -6,18 +6,24 @@ var http = require('http');
 var fs = require('fs');
 var pty = require('node-pty');
 
+// Set port
+var port = 9774;
+
 // Set up express server
 let app = express();
 
+// Set HTTP server root folder
 app.use("/", express.static("./"));
 
 // Creating an HTTP server
-var server = http.createServer(app).listen(9774);
+var server = http.createServer(app).listen(port);
+console.log(`Listening on port ${port}`);
 
 var io = require('socket.io')(server);
 
 // When a new socket connects
 io.on('connection', function (socket) {
+  console.log('Client connect');
   // Create terminal
   var term = pty.spawn('sh', [], {
     name: 'xterm-color',
@@ -37,6 +43,6 @@ io.on('connection', function (socket) {
   // When socket disconnects, destroy the terminal
   socket.on("disconnect", function () {
     term.destroy();
-    console.log("bye");
+    console.log("Client disconnect");
   });
 });
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 454e119..0a28f26 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -660,6 +660,11 @@
       "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",
       "integrity": "sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4="
     },
+    "xterm": {
+      "version": "3.14.5",
+      "resolved": "https://registry.npmjs.org/xterm/-/xterm-3.14.5.tgz",
+      "integrity": "sha512-DVmQ8jlEtL+WbBKUZuMxHMBgK/yeIZwkXB81bH+MGaKKnJGYwA+770hzhXPfwEIokK9On9YIFPRleVp/5G7z9g=="
+    },
     "yeast": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
diff --git a/package.json b/package.json
index 80561ad..0fd44ba 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   "dependencies": {
     "express": "^4.17.1",
     "node-pty": "^0.8.1",
-    "socket.io": "^2.2.0"
+    "socket.io": "^2.2.0",
+    "xterm": "^3.14.5"
   }
 }
