diff --git a/next.html b/next.html
index 4a14f53..3afc1a3 100644
--- a/next.html
+++ b/next.html
@@ -8,6 +8,7 @@
 
 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/build/bundle.css'>
+	<link rel='stylesheet' href='scrollbar.css'>
 
 	<script defer src='/build/bundle.js'></script>
 </head>
diff --git a/package-lock.json b/package-lock.json
index bc1487c..4e9fbc6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,9 @@
 				"@rollup/plugin-terser": "^0.4.0",
 				"@sveltejs/adapter-auto": "^3.0.0",
 				"@sveltejs/kit": "^2.0.0",
+				"@xterm/addon-fit": "^0.10.0",
+				"@xterm/addon-web-links": "^0.11.0",
+				"@xterm/xterm": "^5.5.0",
 				"autoprefixer": "^10.4.20",
 				"labs": "git@github.com:leaningtech/labs.git",
 				"postcss": "^8.4.47",
@@ -1120,6 +1123,30 @@
 			"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
 			"dev": true
 		},
+		"node_modules/@xterm/addon-fit": {
+			"version": "0.10.0",
+			"resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
+			"integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
+			"dev": true,
+			"peerDependencies": {
+				"@xterm/xterm": "^5.0.0"
+			}
+		},
+		"node_modules/@xterm/addon-web-links": {
+			"version": "0.11.0",
+			"resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.11.0.tgz",
+			"integrity": "sha512-nIHQ38pQI+a5kXnRaTgwqSHnX7KE6+4SVoceompgHL26unAxdfP6IPqUTSYPQgSwM56hsElfoNrrW5V7BUED/Q==",
+			"dev": true,
+			"peerDependencies": {
+				"@xterm/xterm": "^5.0.0"
+			}
+		},
+		"node_modules/@xterm/xterm": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
+			"integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
+			"dev": true
+		},
 		"node_modules/acorn": {
 			"version": "8.12.1",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
diff --git a/package.json b/package.json
index 8b22e23..1901e31 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,9 @@
 		"@rollup/plugin-terser": "^0.4.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
+		"@xterm/addon-fit": "^0.10.0",
+		"@xterm/addon-web-links": "^0.11.0",
+		"@xterm/xterm": "^5.5.0",
 		"autoprefixer": "^10.4.20",
 		"labs": "git@github.com:leaningtech/labs.git",
 		"postcss": "^8.4.47",
diff --git a/src/App.svelte b/src/App.svelte
index 5c1a8d2..326d0ee 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,22 +1,34 @@
 <script>
+	import { onMount } from 'svelte';
+	import { Terminal } from '@xterm/xterm';
+	import { FitAddon } from '@xterm/addon-fit';
+	import { WebLinksAddon } from '@xterm/addon-web-links';
 	import Nav from 'labs/packages/global-navbar/src/Nav.svelte';
 	import SideBar from './SideBar.svelte';
+
+	var term = new Terminal({cursorBlink:true, convertEol:true, fontFamily:"monospace", fontWeight: 400, fontWeightBold: 700});
+	var fitAddon = new FitAddon();
+	term.loadAddon(fitAddon);
+	var linkAddon = new WebLinksAddon();
+	term.loadAddon(linkAddon);
+
+	onMount(function()
+	{
+		const consoleDiv = document.getElementById("console");
+		term.open(consoleDiv);
+		term.scrollToTop();
+		fitAddon.fit();
+		window.addEventListener("resize", function(ev){ fitAddon.fit(); });
+		term.focus();
+	});
 </script>
 
 <main class="flex flex-col w-full h-full">
 	<Nav />
 	<div class="flex flex-row flex-grow">
 		<SideBar />
-		<h1>Hello</h1>
-		<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+		<div class="grow h-full m-1 scrollbar" id="console">
+		</div>
 	</div>
 </main>
 
-<style>
-	h1 {
-		color: #ff3e00;
-		text-transform: uppercase;
-		font-size: 4em;
-		font-weight: 100;
-	}
-</style>
diff --git a/src/global.css b/src/global.css
index 34656a2..b65b9a7 100644
--- a/src/global.css
+++ b/src/global.css
@@ -8,6 +8,7 @@ body
 	font-family: Archivo, sans-serif;
 	margin: 0;
 	height: 100%;
+	background: black;
 }
 
 html
diff --git a/src/main.js b/src/main.js
index 370e566..59c370b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
 import './global.css'
+import '@xterm/xterm/css/xterm.css'
 import '@fortawesome/fontawesome-free/css/all.min.css'
 import App from './App.svelte';