diff --git a/README.md b/README.md
index 002e7e18..638e9f1a 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,7 @@
 
 [![Docker Hub](https://img.shields.io/docker/pulls/x1unix/go-playground.svg)](https://hub.docker.com/r/x1unix/go-playground)
 [![Docker Hub](https://img.shields.io/docker/v/x1unix/go-playground.svg?sort=semver)](https://hub.docker.com/r/x1unix/go-playground)
+[![Better Stack Badge](https://uptime.betterstack.com/status-badges/v1/monitor/100nk.svg)](https://uptime.betterstack.com/?utm_source=status_badge)
 [![Coverage Status](https://coveralls.io/repos/github/x1unix/go-playground/badge.svg?branch=dev)](https://coveralls.io/github/x1unix/go-playground?branch=dev)
 [![Goreportcard](https://goreportcard.com/badge/github.com/x1unix/go-playground)](https://goreportcard.com/report/github.com/x1unix/go-playground)
 [![StandWithUkraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/badges/StandWithUkraine.svg)](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)
@@ -15,6 +16,7 @@ Improved Go Playground powered by Monaco Editor and React - [https://goplay.tool
 * 🌚 Dark theme
 * 💡 Code autocomplete
 * ⌨️ VIM mode support
+* 🌈 Color and image output
 * 💾 Load and save files
 * 📔 Snippets and tutorials
 * ⚙ Customization (fonts, ligatures, etc)
diff --git a/web/package.json b/web/package.json
index 7ddd12ef..f07304c3 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,6 +11,11 @@
     "@types/jest": "^27.4.0",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
+    "@xterm/addon-canvas": "^0.6.0-beta.1",
+    "@xterm/addon-fit": "^0.9.0-beta.1",
+    "@xterm/addon-image": "^0.7.0-beta.1",
+    "@xterm/addon-webgl": "^0.17.0-beta.1",
+    "@xterm/xterm": "^5.4.0-beta.1",
     "axios": "^1.6.0",
     "circular-dependency-plugin": "^5.2.2",
     "clsx": "^1.1.1",
diff --git a/web/src/components/core/Header/Header.tsx b/web/src/components/core/Header/Header.tsx
index 16c6b3ef..36c6247d 100644
--- a/web/src/components/core/Header/Header.tsx
+++ b/web/src/components/core/Header/Header.tsx
@@ -4,16 +4,18 @@ import {
   ICommandBarItemProps, Stack,
 } from '@fluentui/react';
 
-import apiClient, { VersionsInfo } from "~/services/api";
+import apiClient, { type VersionsInfo } from "~/services/api";
 import { newAddNotificationAction, NotificationType } from "~/store/notifications";
-import SettingsModal, { SettingsChanges } from '~/components/settings/SettingsModal';
+import SettingsModal, { type SettingsChanges } from '~/components/settings/SettingsModal';
 import ThemeableComponent from '~/components/utils/ThemeableComponent';
 import AboutModal from '~/components/modals/AboutModal';
 import RunTargetSelector from '~/components/inputs/RunTargetSelector';
 import SharePopup from '~/components/utils/SharePopup';
+
+import { dispatchTerminalSettingsChange } from '~/store/terminal';
 import {
   Connect,
-  Dispatcher,
+  type Dispatcher,
   dispatchToggleTheme,
   formatFileDispatcher,
   newCodeImportDispatcher,
@@ -25,6 +27,7 @@ import {
   saveFileDispatcher,
   shareSnippetDispatcher
 } from '~/store';
+
 import { getSnippetsMenuItems, SnippetMenuItem } from './utils';
 
 import './Header.css';
@@ -242,6 +245,10 @@ export class Header extends ThemeableComponent<any, HeaderState> {
       this.props.dispatch(newSettingsChangeDispatcher(changes.settings));
     }
 
+    if (changes.terminal) {
+      this.props.dispatch(dispatchTerminalSettingsChange(changes.terminal));
+    }
+
     this.setState({ showSettings: false });
   }
 
diff --git a/web/src/components/core/Panel/PanelHeader.tsx b/web/src/components/core/Panel/PanelHeader.tsx
index 897679ab..cbe0fabb 100644
--- a/web/src/components/core/Panel/PanelHeader.tsx
+++ b/web/src/components/core/Panel/PanelHeader.tsx
@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 import {ITheme, ThemeContext} from '@fluentui/react';
-import PanelAction, {PanelActionProps} from '@components/core/Panel/PanelAction';
+import PanelAction, {PanelActionProps} from '~/components/core/Panel/PanelAction';
 import './PanelHeader.css';
 
 interface Props {
diff --git a/web/src/components/inspector/Console/Console.css b/web/src/components/inspector/Console/Console.css
new file mode 100644
index 00000000..3c17b8a8
--- /dev/null
+++ b/web/src/components/inspector/Console/Console.css
@@ -0,0 +1,48 @@
+.app-Console {
+  flex: 1 1 auto;
+  position: relative;
+  box-sizing: border-box;
+
+  --terminal-padding-x: 15px;
+}
+
+.app-Console__xterm {
+  position: absolute;
+  inset: 0;
+}
+
+.app-Console .terminal > * {
+  padding: 0 var(--terminal-padding-x);
+}
+
+/**
+ xterm.js canvas plugin fixes.
+
+ The plugin places a few canvas elements inside with absolute positioning
+ relative to parent and doesn't respect parent's paddings.
+ */
+.app-Console .xterm .xterm-screen canvas {
+  transform: translate3d(var(--terminal-padding-x), 0, 0);
+}
+
+/**
+Copy button for touch devices
+ */
+.app-Console__copy {
+  position: absolute;
+  display: none;
+  z-index: 999;
+  top: 0;
+  right: var(--terminal-padding-x);
+}
+
+.app-Console__copy[hidden] {
+  display: none;
+}
+
+/* Enable copy button only on touch devices */
+@media (hover: none) {
+  .app-Console__copy {
+      display: block;
+  }
+}
diff --git a/web/src/components/inspector/Console/Console.tsx b/web/src/components/inspector/Console/Console.tsx
new file mode 100644
index 00000000..acd00946
--- /dev/null
+++ b/web/src/components/inspector/Console/Console.tsx
@@ -0,0 +1,239 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import copy from 'copy-to-clipboard';
+
+import {DefaultButton, useTheme} from '@fluentui/react';
+
+import type {ITerminalAddon, ITerminalOptions} from '@xterm/xterm';
+import {FitAddon} from '@xterm/addon-fit';
+import {ImageAddon} from '@xterm/addon-image';
+import {CanvasAddon} from '@xterm/addon-canvas';
+import {WebglAddon} from '@xterm/addon-webgl';
+
+import type {StatusState} from '~/store';
+import {RenderingBackend} from '~/store/terminal';
+import {useXtermTheme, XTerm} from '~/components/utils/XTerm';
+
+import {formatEvalEvent} from './format';
+import {createDebounceResizeObserver} from './utils';
+
+import './Console.css';
+
+const RESIZE_DELAY = 50;
+
+const imageAddonConfig = {
+    enableSizeReports: true,
+    sixelSupport: true,
+    sixelScrolling: true,
+    iipSupport: true,
+};
+
+const config: ITerminalOptions = {
+  convertEol: true,
+};
+
+interface Props {
+  status?: StatusState
+  fontFamily: string
+  fontSize: number
+  backend: RenderingBackend
+}
+
+const getAddonFromBackend = (backend: RenderingBackend): ITerminalAddon | null => {
+  switch (backend) {
+  case RenderingBackend.WebGL:
+    return new WebglAddon();
+  case RenderingBackend.Canvas:
+    return new CanvasAddon();
+  default:
+    return null;
+  }
+}
+
+const CopyButton: React.FC<{
+  onClick?: () => void
+  hidden?: boolean
+}> = ({onClick, hidden}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => ({
+    root: {
+      color: theme?.palette.neutralPrimary,
+      marginLeft: 'auto',
+      marginTop: '4px',
+      marginRight: '2px',
+      padding: '4px 8px',
+      minWidth: 'initial'
+    },
+    rootHovered: {
+      color: theme?.palette.neutralDark
+    }
+  }), [theme]);
+  return (
+    <DefaultButton
+        className='app-Console__copy'
+        iconProps={{iconName: 'Copy'}}
+        ariaLabel='Copy'
+        onClick={onClick}
+        styles={styles}
+        hidden={hidden}
+    />
+  );
+}
+
+/**
+ * Console is Go program events output component based on xterm.js
+ */
+export const Console: React.FC<Props> = ({fontFamily, fontSize, status, backend}) => {
+  const theme = useXtermTheme();
+  const [offset, setOffset] = useState(0);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const xtermRef = useRef<XTerm>(null);
+  const fitAddonRef = useRef(new FitAddon());
+  const imageAddonRef = useRef(new ImageAddon(imageAddonConfig));
+
+  const resizeObserver = useMemo(() => (
+    createDebounceResizeObserver(() => {
+      fitAddonRef.current.fit();
+    }, RESIZE_DELAY)
+  ), [fitAddonRef]);
+
+  const isClean = !status?.dirty;
+  const events = status?.events;
+  const terminal = xtermRef.current?.terminal;
+  const elemRef = xtermRef?.current?.terminalRef;
+
+  const copySelection = useCallback(() => {
+    if (!terminal) {
+      return;
+    }
+
+    const shouldTrim = !terminal.hasSelection();
+    if (!terminal.hasSelection()) {
+      terminal.selectAll();
+    }
+
+    const str = terminal.getSelection();
+    terminal.clearSelection();
+
+    // TODO: notify about copy result
+    copy(shouldTrim ? str.trim() : str);
+  }, [terminal]);
+
+  // Track output events
+  useEffect(() => {
+    if (!events?.length || !terminal) {
+      setOffset(0);
+      terminal?.clear();
+      terminal?.reset();
+      return;
+    }
+
+    if (offset === 0) {
+      terminal?.clear();
+      terminal?.reset();
+    }
+
+    const batch = events?.slice(offset);
+    if (!batch) {
+      return;
+    }
+
+    batch.map(formatEvalEvent).forEach((msg) => terminal?.write(msg));
+    terminal?.scrollToBottom();
+    setOffset(offset + batch.length);
+  }, [terminal, offset, events ])
+
+  // Reset output offset on clean
+  useEffect(() => {
+    if (isClean) {
+      setOffset(0)
+    }
+
+  }, [isClean])
+
+  // Track terminal resize
+  useEffect(() => {
+    if (!elemRef?.current) {
+      resizeObserver.disconnect();
+      return;
+    }
+
+    resizeObserver.observe(elemRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    }
+  }, [elemRef, resizeObserver]);
+
+  // Theme
+  useEffect(() => {
+    if (!terminal) {
+      return;
+    }
+
+    terminal.options = {
+      theme,
+      fontSize,
+      fontFamily,
+    };
+  }, [theme, terminal, fontFamily, fontSize]);
+
+  // Rendering backend
+  useEffect(() => {
+    if (!terminal) {
+      return;
+    }
+
+    console.log('xterm: switched backend:', backend);
+    const addon = getAddonFromBackend(backend);
+    if (!addon) {
+      return;
+    }
+
+    terminal.loadAddon(addon);
+    return () => {
+      console.log('xterm: unloading old backend:', backend);
+      addon.dispose();
+    };
+  }, [terminal, backend]);
+
+  // Register button on focus
+  useEffect(() => {
+    if (!terminal?.textarea) {
+      return;
+    }
+
+    terminal.textarea.addEventListener('focus', () => {
+      setIsFocused(true);
+    });
+
+    terminal.textarea.addEventListener('blur', () => {
+      // Delay before blur to keep enough time for btn click
+      setTimeout(() => setIsFocused(false), 150);
+    });
+
+    return () => setIsFocused(false);
+  }, [terminal?.textarea, setIsFocused]);
+
+  return (
+    <div className="app-Console">
+      <CopyButton
+          hidden={!isFocused}
+          onClick={copySelection}
+      />
+      <XTerm
+        ref={xtermRef}
+        className='app-Console__xterm'
+        addons={[
+            fitAddonRef.current,
+            imageAddonRef.current,
+        ]}
+        options={{
+          ...config,
+          theme,
+          fontSize,
+          fontFamily,
+        }}
+      />
+    </div>
+  );
+}
diff --git a/web/src/components/inspector/Console/format.ts b/web/src/components/inspector/Console/format.ts
new file mode 100644
index 00000000..14ec6b19
--- /dev/null
+++ b/web/src/components/inspector/Console/format.ts
@@ -0,0 +1,50 @@
+import type { EvalEvent } from '@services/api';
+
+const imgRegEx = /\bIMAGE:([A-Za-z0-9=+/]+)\b/;
+
+export enum Colors {
+  Red = '\x1b[31m',
+  Reset = '\x1b[0m'
+}
+
+const ESC = '\u001B[';
+const OSC = '\u001B]';
+const BEL = '\u0007';
+
+/**
+ * Calculates number of payload bytes in base64 encoded string.
+ * @param b64 Base64-encoded string.
+ */
+const base64ByteCount = (b64: string) => {
+  let padding = 0;
+  if (b64.endsWith('==')) {
+    padding = 2
+  } else if (b64.endsWith('=')) {
+    padding = 1
+  }
+  return (b64.length / 4) * 3 - padding;
+}
+
+/**
+ * Creates a new inline (iterm) image protocol string from base64-encoded image.
+ * @param b64 Base64-encoded image.
+ *
+ * @see https://iterm2.com/documentation-images.html
+ * @see https://github.com/sindresorhus/ansi-escapes/blob/main/index.js
+ */
+const newInlineImage = (b64: string) => {
+  const length = base64ByteCount(b64);
+  return `\u001b]1337;File=size=${length};inline=1:${b64}${BEL}`;
+}
+
+/**
+ * Formats output event from program.
+ */
+export const formatEvalEvent = ({Message: msg, Kind: type}: EvalEvent) => {
+  if (type === 'stderr') {
+    return `${Colors.Red}${msg}${Colors.Reset}`;
+  }
+
+  // Convert Go-playground inline images to iTerm2 inline images protocol.
+  return msg.replace(imgRegEx, (_, b64) => newInlineImage(b64));
+}
diff --git a/web/src/components/inspector/Console/index.ts b/web/src/components/inspector/Console/index.ts
new file mode 100644
index 00000000..a7e78ccd
--- /dev/null
+++ b/web/src/components/inspector/Console/index.ts
@@ -0,0 +1 @@
+export * from './Console'
diff --git a/web/src/components/inspector/Console/utils.ts b/web/src/components/inspector/Console/utils.ts
new file mode 100644
index 00000000..226974f4
--- /dev/null
+++ b/web/src/components/inspector/Console/utils.ts
@@ -0,0 +1,11 @@
+export const createDebounceResizeObserver = (callback: () => void, delay: number) => {
+  let timeoutId: NodeJS.Timeout | null = null;
+
+  return new ResizeObserver(() => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(callback, delay);
+  });
+};
diff --git a/web/src/components/preview/ResizablePreview.css b/web/src/components/inspector/InspectorPanel/InspectorPanel.css
similarity index 62%
rename from web/src/components/preview/ResizablePreview.css
rename to web/src/components/inspector/InspectorPanel/InspectorPanel.css
index 33b80c02..c1f6c01a 100644
--- a/web/src/components/preview/ResizablePreview.css
+++ b/web/src/components/inspector/InspectorPanel/InspectorPanel.css
@@ -1,28 +1,39 @@
-.ResizablePreview {
+.InspectorPanel {
   display: flex;
   flex-direction: column;
 }
 
-.ResizablePreview .app-preview {
+.InspectorPanel__container {
+  display: flex;
+  flex-direction: column;
   flex: 1 1 auto;
+  overflow: auto;
+}
+
+.InspectorPanel__container > * {
+  flex: 1 1 auto;
+}
+
+.InspectorPanel__container[hidden] {
+  display: none;
 }
 
-.ResizablePreview__controls {
+.InspectorPanel__controls {
   padding: 10px 15px 0 15px;
 }
 
 /** Collapsed state **/
-.ResizablePreview.ResizablePreview--collapsed {
+.InspectorPanel.InspectorPanel--collapsed {
   height: auto !important;
 }
 
-.ResizablePreview.ResizablePreview--collapsed:before {
+.InspectorPanel.InspectorPanel--collapsed:before {
   content: "";
   position: absolute;
   background: var(--pg-handle-default-color);
 }
 
-.ResizablePreview.ResizablePreview--collapsed.ResizablePreview--vertical:before {
+.InspectorPanel.InspectorPanel--collapsed.InspectorPanel--vertical:before {
   top: 0;
   left: 0;
   right: 0;
@@ -30,7 +41,7 @@
 }
 
 /** Handles - vertical **/
-.ResizablePreview__handle--left:before {
+.InspectorPanel__handle--left:before {
   content: "";
   position: absolute;
   background: var(--pg-handle-default-color);
@@ -41,18 +52,18 @@
   left: 50%;
 }
 
-.ResizablePreview__handle--left {
+.InspectorPanel__handle--left {
   transition: background-color 0.1s ease-in 0s;
 }
 
-.ResizablePreview__handle--left:hover:before,
-.ResizablePreview__handle--left:active:before {
+.InspectorPanel__handle--left:hover:before,
+.InspectorPanel__handle--left:active:before {
   background: var(--pg-handle-active-color);
   width: 3px;
 }
 
 @media (hover: none), (pointer: coarse) {
-  .ResizablePreview__handle--left {
+  .InspectorPanel__handle--left {
     background: black;
     display: flex;
     flex-direction: column;
@@ -61,17 +72,17 @@
     color: #999;
   }
 
-  .ResizablePreview__handle--left:hover,
-  .ResizablePreview__handle--left:active {
+  .InspectorPanel__handle--left:hover,
+  .InspectorPanel__handle--left:active {
     background: black;
     color: white;
   }
 
-  .ResizablePreview__handle--left:before {
+  .InspectorPanel__handle--left:before {
     display: none;
   }
 
-  .ResizablePreview__handle--left:after {
+  .InspectorPanel__handle--left:after {
     content: "";
     background: currentColor;
     height: 20%;
@@ -84,7 +95,7 @@
 }
 
 /** Handles - Horizontal **/
-.ResizablePreview__handle--top:before {
+.InspectorPanel__handle--top:before {
   content: "";
   position: absolute;
   background: var(--pg-handle-default-color);
@@ -95,18 +106,18 @@
   height: 1px;
 }
 
-.ResizablePreview__handle--top {
+.InspectorPanel__handle--top {
   transition: background-color 0.1s ease-in 0s;
 }
 
-.ResizablePreview__handle--top:hover:before,
-.ResizablePreview__handle--top:active:before {
+.InspectorPanel__handle--top:hover:before,
+.InspectorPanel__handle--top:active:before {
   background: var(--pg-handle-active-color);
   height: 3px;
 }
 
 @media (hover: none), (pointer: coarse) {
-  .ResizablePreview__handle--top {
+  .InspectorPanel__handle--top {
     background: black;
     display: flex;
     flex-direction: column;
@@ -115,17 +126,17 @@
     color: #999;
   }
 
-  .ResizablePreview__handle--top:hover,
-  .ResizablePreview__handle--top:active {
+  .InspectorPanel__handle--top:hover,
+  .InspectorPanel__handle--top:active {
     background: black;
     color: #fff;
   }
 
-  .ResizablePreview__handle--top:before {
+  .InspectorPanel__handle--top:before {
     display: none;
   }
 
-  .ResizablePreview__handle--top:after {
+  .InspectorPanel__handle--top:after {
     content: "";
     background: currentColor;
     width: 20%;
diff --git a/web/src/components/preview/ResizablePreview.tsx b/web/src/components/inspector/InspectorPanel/InspectorPanel.tsx
similarity index 86%
rename from web/src/components/preview/ResizablePreview.tsx
rename to web/src/components/inspector/InspectorPanel/InspectorPanel.tsx
index fc3285ac..ab58a464 100644
--- a/web/src/components/preview/ResizablePreview.tsx
+++ b/web/src/components/inspector/InspectorPanel/InspectorPanel.tsx
@@ -9,16 +9,16 @@ import {
   VscSplitVertical
 } from 'react-icons/vsc';
 
-import Preview from './Preview';
+import RunOutput from '~/components/inspector/RunOutput';
 import PanelHeader from '~/components/core/Panel/PanelHeader';
 import {LayoutType, DEFAULT_PANEL_HEIGHT, DEFAULT_PANEL_WIDTH} from '~/styles/layout';
-import './ResizablePreview.css';
+import './InspectorPanel.css';
 
 const MIN_HEIGHT = 36;
 const MIN_WIDTH = 120;
 const handleClasses = {
-  top: 'ResizablePreview__handle--top',
-  left: 'ResizablePreview__handle--left',
+  top: 'InspectorPanel__handle--top',
+  left: 'InspectorPanel__handle--left',
 }
 
 export interface ResizePanelParams {
@@ -32,7 +32,7 @@ interface Props extends ResizePanelParams {
   onViewChange?: (changes: ResizePanelParams) => void
 }
 
-const ResizablePreview: React.FC<Props> = ({
+const InspectorPanel: React.FC<Props> = ({
   layout = LayoutType.Vertical,
   height = DEFAULT_PANEL_HEIGHT,
   width= DEFAULT_PANEL_WIDTH,
@@ -74,9 +74,9 @@ const ResizablePreview: React.FC<Props> = ({
     <Resizable
       className={
         clsx(
-          'ResizablePreview',
-          isCollapsed && 'ResizablePreview--collapsed',
-          `ResizablePreview--${layout}`
+          'InspectorPanel',
+          isCollapsed && 'InspectorPanel--collapsed',
+          `InspectorPanel--${layout}`
         )
       }
       handleClasses={handleClasses}
@@ -115,11 +115,11 @@ const ResizablePreview: React.FC<Props> = ({
 
         }}
       />
-      { isCollapsed ? null : (
-        <Preview />
-      )}
+      <div className="InspectorPanel__container" hidden={isCollapsed}>
+        <RunOutput />
+      </div>
     </Resizable>
   );
 };
 
-export default ResizablePreview;
+export default InspectorPanel;
diff --git a/web/src/components/inspector/RunOutput/RunOutput.css b/web/src/components/inspector/RunOutput/RunOutput.css
new file mode 100644
index 00000000..cb8be2ff
--- /dev/null
+++ b/web/src/components/inspector/RunOutput/RunOutput.css
@@ -0,0 +1,61 @@
+.RunOutput {
+  box-sizing: border-box;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.RunOutput__content {
+  font-size: 10pt;
+  box-sizing: border-box;
+
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: stretch;
+  flex-wrap: wrap;
+  align-content: stretch;
+  overflow: hidden;
+}
+
+.RunOutput__container {
+  padding: 0 15px;
+  overflow: auto;
+  position: static;
+  display: block;
+}
+
+/** Errors & Messages */
+.RunOutput__error {
+  color: white;
+  background: #cc0000;
+}
+
+.RunOutput__build-error {
+  margin: 0 0 5px;
+}
+
+/** Misc **/
+
+.RunOutput__label {
+  display: block;
+  margin-bottom: 2px;
+}
+
+.RunOutput__errors {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  word-wrap: break-word;
+  white-space: break-spaces;
+}
+
+.RunOutput__progress {
+  position: relative;
+  bottom: 8px;
+  margin-bottom: -18px;
+}
+
+.RunOutput__progress--hidden {
+  display: none;
+}
diff --git a/web/src/components/inspector/RunOutput/RunOutput.tsx b/web/src/components/inspector/RunOutput/RunOutput.tsx
new file mode 100644
index 00000000..5776bb00
--- /dev/null
+++ b/web/src/components/inspector/RunOutput/RunOutput.tsx
@@ -0,0 +1,83 @@
+import React, {useMemo} from 'react';
+import {MessageBar, MessageBarType, useTheme} from '@fluentui/react';
+
+import { Console } from '~/components/inspector/Console';
+import {connect, type StatusState} from '~/store';
+import type { TerminalState } from '~/store/terminal';
+import type {MonacoSettings} from '~/services/config';
+import {
+  DEFAULT_FONT,
+  getDefaultFontFamily,
+  getFontFamily
+} from '~/services/fonts';
+
+import './RunOutput.css';
+
+interface OwnProps {}
+
+interface StateProps {
+  status?: StatusState
+  monaco?: MonacoSettings
+  terminal: TerminalState
+}
+
+const RunOutput: React.FC<StateProps & OwnProps> = ({ status, monaco, terminal }) => {
+  const theme = useTheme();
+  const { fontSize, renderingBackend } = terminal.settings;
+  const styles = useMemo(() => {
+    const { palette } = theme;
+    return {
+      backgroundColor: palette.neutralLight,
+      color: palette.neutralDark,
+      fontFamily: getDefaultFontFamily(),
+    }
+  }, [theme]);
+  const fontFamily = useMemo(() => (
+    getFontFamily(monaco?.fontFamily ?? DEFAULT_FONT)
+  ), [monaco]);
+  const isClean = !status || !status?.dirty;
+
+  return (
+    <div className="RunOutput" style={styles}>
+      <div className="RunOutput__content">
+        {
+          status?.lastError ? (
+            <div className="RunOutput__container">
+              <MessageBar messageBarType={MessageBarType.error} isMultiline={true}>
+                <b className='RunOutput__label'>Error</b>
+                <pre className='RunOutput__errors'>
+                {status.lastError}
+              </pre>
+              </MessageBar>
+            </div>
+          ) : isClean ? (
+            <div
+              className="RunOutput__container"
+              style={{
+                fontFamily,
+                fontSize: `${fontSize}px`
+              }}
+            >
+              Press "Run" to compile program.
+            </div>
+          ) : (
+            <Console
+              fontFamily={fontFamily}
+              fontSize={fontSize}
+              status={status}
+              backend={renderingBackend}
+            />
+          )
+        }
+      </div>
+    </div>
+  )
+}
+
+const ConnectedRunOutput = connect<StateProps, OwnProps>((
+  { status, monaco, terminal }
+) => ({
+  status, monaco, terminal
+}))(RunOutput);
+
+export default ConnectedRunOutput;
diff --git a/web/src/components/inspector/RunOutput/index.ts b/web/src/components/inspector/RunOutput/index.ts
new file mode 100644
index 00000000..fbad5ade
--- /dev/null
+++ b/web/src/components/inspector/RunOutput/index.ts
@@ -0,0 +1 @@
+export { default } from './RunOutput'
diff --git a/web/src/components/pages/Playground.tsx b/web/src/components/pages/Playground.tsx
index 99647ab6..92275ac3 100644
--- a/web/src/components/pages/Playground.tsx
+++ b/web/src/components/pages/Playground.tsx
@@ -9,7 +9,7 @@ import {
 import { Header } from '~/components/core/Header';
 import CodeEditor from '~/components/editor/CodeEditor';
 import FlexContainer from '~/components/editor/FlexContainer';
-import ResizablePreview from '~/components/preview/ResizablePreview';
+import InspectorPanel from '~/components/inspector/InspectorPanel/InspectorPanel';
 import { NotificationHost } from "~/components/modals/Notification";
 import Layout from '~/components/core/Layout/Layout';
 import StatusBar from '~/components/core/StatusBar';
@@ -35,7 +35,7 @@ const Playground = connect(({ panel }: any) => ({ panelProps: panel }))(({ panel
         <FlexContainer>
           <CodeContainer />
         </FlexContainer>
-        <ResizablePreview
+        <InspectorPanel
           {...panelProps}
           onViewChange={changes => {
             dispatch(dispatchPanelLayoutChange(changes))
diff --git a/web/src/components/preview/EvalEventView.css b/web/src/components/preview/EvalEventView.css
deleted file mode 100644
index f176dcec..00000000
--- a/web/src/components/preview/EvalEventView.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.EvalEvent__delay {
-  color: #666;
-  margin-right: 5px;
-}
-
-.EvalEvent__kind {
-  color: #999;
-  margin-right: 10px;
-}
-
-.EvalEvent__msg {
-  color: currentColor;
-}
-.EvalEvent {
-  display: table;
-  width: 100%;
-}
-
-.EvalEvent__msg {
-  font: inherit;
-  border: none;
-  margin: 0;
-  float: left;
-}
-
-.EvalEvent__msg--stderr {
-  color: #e22;
-}
-
-.EvalEvent__delay {
-  float: right;
-}
diff --git a/web/src/components/preview/EvalEventView.tsx b/web/src/components/preview/EvalEventView.tsx
deleted file mode 100644
index 2f08f275..00000000
--- a/web/src/components/preview/EvalEventView.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, {useMemo} from 'react';
-
-import './EvalEventView.css';
-
-const imageSectionPrefix = 'IMAGE:';
-const base64RegEx = /^[A-Za-z0-9+/]+[=]{0,2}$/;
-
-interface Props {
-  message: string,
-  kind: string
-}
-
-const isImageLine = (message: string) => {
-  if (!message?.startsWith(imageSectionPrefix)) {
-    return [false, null];
-  }
-
-  const payload = message.substring(imageSectionPrefix.length).trim();
-  return [base64RegEx.test(payload), payload];
-};
-
-const EvalEventView: React.FC<Props> = ({kind, message}) => {
-  const [isImage, payload] = useMemo(() => (
-    isImageLine(message)
-  ), [message]);
-
-  return (
-    <div className="EvalEvent">
-      {
-        isImage ? (
-          <img src={`data:image;base64,${payload}`} alt=""/>
-        ) : (
-          <pre
-            className={`EvalEvent__msg EvalEvent__msg--${kind}`}
-          >
-            {message}
-          </pre>
-        )
-      }
-    </div>
-  );
-}
-
-export default EvalEventView;
diff --git a/web/src/components/preview/Preview.css b/web/src/components/preview/Preview.css
deleted file mode 100644
index dfa3f96a..00000000
--- a/web/src/components/preview/Preview.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.app-preview {
-  box-sizing: border-box;
-  overflow: auto;
-}
-
-.app-preview__content {
-  padding: 0 15px 15px 15px;
-  font-size: 10pt;
-}
-
-.app-preview__error {
-  color: white;
-  background: #cc0000;
-}
-
-.app-preview__epilogue {
-  color: #999;
-  margin-top: 15px;
-}
-
-.app-preview__build-error {
-  margin: 0 0 5px;
-}
-
-.app-preview__label {
-  display: block;
-  margin-bottom: 2px;
-}
-
-.app-preview__errors {
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  word-wrap: break-word;
-  white-space: break-spaces;
-}
-
-.app-preview__progress {
-  position: relative;
-  bottom: 8px;
-  margin-bottom: -18px;
-}
-
-.app-preview__progress--hidden {
-  display: none;
-}
diff --git a/web/src/components/preview/Preview.tsx b/web/src/components/preview/Preview.tsx
deleted file mode 100644
index 8e974e66..00000000
--- a/web/src/components/preview/Preview.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React, {useMemo} from 'react';
-import {MessageBar, MessageBarType, useTheme} from '@fluentui/react';
-
-import {getDefaultFontFamily} from '~/services/fonts';
-import {connect, StatusState} from '~/store';
-
-import EvalEventView from './EvalEventView';
-import './Preview.css';
-
-interface OwnProps {}
-
-interface StateProps {
-  status?: StatusState
-}
-
-const getContent = (status?: StatusState) => {
-  if (status?.lastError) {
-    return (
-      <MessageBar messageBarType={MessageBarType.error} isMultiline={true}>
-        <b className='app-preview__label'>Error</b>
-        <pre className='app-preview__errors'>
-            {status.lastError}
-          </pre>
-      </MessageBar>
-    );
-  }
-
-  if (!status || !status?.dirty) {
-    return (
-      <span>Press "Run" to compile program.</span>
-    );
-  }
-
-  const content = status.events?.map(({Message, Kind}, k) => (
-    <EvalEventView
-      key={k}
-      message={Message}
-      kind={Kind}
-    />
-  )) ?? [];
-
-  if (!status.running) {
-    content.push(
-      <div className="app-preview__epilogue" key="exit">
-        Program exited.
-      </div>
-    );
-  }
-
-  return content;
-}
-
-const Preview: React.FC<StateProps & OwnProps> = ({ status }) => {
-  const theme = useTheme();
-  const styles = useMemo(() => {
-    const { palette } = theme;
-    return {
-      backgroundColor: palette.neutralLight,
-      color: palette.neutralDark,
-      fontFamily: getDefaultFontFamily(),
-    }
-  }, [theme]);
-
-  return (
-    <div className="app-preview" style={styles}>
-      <div className='app-preview__content'>
-        {
-          getContent(status)
-        }
-      </div>
-    </div>
-  )
-}
-
-const ConnectedPreview = connect<StateProps, OwnProps>((
-  { status }
-  // { settings: {darkMode}, runTarget: { target }, status }
-) => ({
-  status
-}))(Preview);
-
-export default ConnectedPreview;
diff --git a/web/src/components/settings/SettingsModal.tsx b/web/src/components/settings/SettingsModal.tsx
index 46b0f951..60bb7ad3 100644
--- a/web/src/components/settings/SettingsModal.tsx
+++ b/web/src/components/settings/SettingsModal.tsx
@@ -1,52 +1,38 @@
 import React from 'react';
 import {
   Checkbox,
+  TextField,
   Dropdown,
   IconButton,
-  IDropdownOption,
-  Modal
+  Modal,
+  Stack,
+  Pivot,
+  PivotItem
 } from '@fluentui/react';
-import {Pivot, PivotItem} from '@fluentui/react/lib/Pivot';
 
-import ThemeableComponent from '@components/utils/ThemeableComponent';
-import {getContentStyles, getIconButtonStyles} from '~/styles/modal';
+import ThemeableComponent from '~/components/utils/ThemeableComponent';
+import { getContentStyles, getIconButtonStyles } from '~/styles/modal';
 import SettingsProperty from './SettingsProperty';
-import {MonacoSettings} from '~/services/config';
-import {DEFAULT_FONT, getAvailableFonts} from '~/services/fonts';
+import { DEFAULT_FONT } from '~/services/fonts';
+import type { MonacoSettings } from '~/services/config';
+import type { TerminalSettings, RenderingBackend } from '~/store/terminal';
 import {
   Connect,
-  MonacoParamsChanges,
-  SettingsState
+  type MonacoParamsChanges,
+  type SettingsState
 } from '~/store';
 
-const CURSOR_BLINK_STYLE_OPTS: IDropdownOption[] = [
-  { key: 'blink', text: 'Blink (default)' },
-  { key: 'smooth', text: 'Smooth' },
-  { key: 'phase', text: 'Phase' },
-  { key: 'expand', text: 'Expand' },
-  { key: 'solid', text: 'Solid' },
-];
-
-const CURSOR_LINE_OPTS: IDropdownOption[] = [
-  { key: 'line', text: 'Line (default)' },
-  { key: 'block', text: 'Block' },
-  { key: 'underline', text: 'Underline' },
-  { key: 'line-thin', text: 'Line thin' },
-  { key: 'block-outline', text: 'Block outline' },
-  { key: 'underline-thin', text: 'Underline thin' },
-];
-
-const FONT_OPTS: IDropdownOption[] = [
-  { key: DEFAULT_FONT, text: 'System default' },
-  ...getAvailableFonts().map(f => ({
-    key: f.family,
-    text: f.label,
-  }))
-];
+import {
+  cursorBlinkOptions,
+  cursorLineOptions,
+  fontOptions,
+  terminalBackendOptions
+} from './options';
 
 export interface SettingsChanges {
   monaco?: MonacoParamsChanges
   settings?: Partial<SettingsState>
+  terminal?: Partial<TerminalSettings>
 }
 
 export interface SettingsProps {
@@ -54,6 +40,7 @@ export interface SettingsProps {
   onClose: (changes: SettingsChanges) => void
   settings?: SettingsState
   monaco?: MonacoSettings
+  terminal?: TerminalSettings
   dispatch?: (action) => void
 }
 
@@ -64,6 +51,7 @@ interface SettingsModalState {
 @Connect(state => ({
   settings: state.settings,
   monaco: state.monaco,
+  terminal: state.terminal.settings,
 }))
 export default class SettingsModal extends ThemeableComponent<SettingsProps, SettingsModalState> {
   private titleID = 'Settings';
@@ -102,6 +90,18 @@ export default class SettingsModal extends ThemeableComponent<SettingsProps, Set
     };
   }
 
+  private touchTerminalSettings(changes: Partial<TerminalSettings>) {
+    if (!this.changes.terminal) {
+      this.changes.terminal = changes;
+      return;
+    }
+
+    this.changes.terminal = {
+      ...this.changes.terminal,
+      ...changes,
+    };
+  }
+
   render() {
     const contentStyles = getContentStyles(this.theme);
     const iconButtonStyles = getIconButtonStyles(this.theme);
@@ -124,14 +124,14 @@ export default class SettingsModal extends ThemeableComponent<SettingsProps, Set
         </div>
         <div id={this.subtitleID} className={contentStyles.body}>
           <Pivot aria-label='Settings'>
-            <PivotItem headerText='Editor'>
+            <PivotItem headerText='General'>
               <SettingsProperty
                 key='fontFamily'
                 title='Font Family'
                 description='Controls editor font family'
                 control={(
                   <Dropdown
-                    options={FONT_OPTS}
+                    options={fontOptions}
                     defaultSelectedKey={this.props.monaco?.fontFamily ?? DEFAULT_FONT}
                     onChange={(_, num) => {
                       this.touchMonacoProperty('fontFamily', num?.key);
@@ -194,14 +194,14 @@ export default class SettingsModal extends ThemeableComponent<SettingsProps, Set
                 )}
               />
             </PivotItem>
-            <PivotItem headerText='Advanced'>
+            <PivotItem headerText='Editor'>
               <SettingsProperty
                 key='cursorBlinking'
                 title='Cursor Blinking'
                 description='Set cursor animation style'
                 control={(
                   <Dropdown
-                    options={CURSOR_BLINK_STYLE_OPTS}
+                    options={cursorBlinkOptions}
                     defaultSelectedKey={this.props.monaco?.cursorBlinking}
                     onChange={(_, num) => {
                       this.touchMonacoProperty('cursorBlinking', num?.key);
@@ -215,7 +215,7 @@ export default class SettingsModal extends ThemeableComponent<SettingsProps, Set
                 description='Set the cursor style'
                 control={(
                   <Dropdown
-                    options={CURSOR_LINE_OPTS}
+                    options={cursorLineOptions}
                     defaultSelectedKey={this.props.monaco?.cursorStyle}
                     onChange={(_, num) => {
                       this.touchMonacoProperty('cursorStyle', num?.key);
@@ -276,6 +276,49 @@ export default class SettingsModal extends ThemeableComponent<SettingsProps, Set
                 )}
               />
             </PivotItem>
+            <PivotItem headerText='Terminal'>
+              <SettingsProperty
+                title='Font Size'
+                description='Controls the font size in pixels of the terminal.'
+                control={(
+                  <TextField
+                    type='number'
+                    min={4}
+                    max={128}
+                    deferredValidationTime={0}
+                    defaultValue={this.props.terminal?.fontSize.toString()}
+                    onGetErrorMessage={val => {
+                      const fontSize = Number(val);
+                      if (isNaN(fontSize)) {
+                        return 'Please enter a valid number';
+                      }
+
+                      if (fontSize < 4) {
+                        return 'Please enter a number greater than 0';
+                      }
+
+                      this.touchTerminalSettings({fontSize});
+                    }}
+                  />
+                )}
+              />
+              <SettingsProperty
+                key='terminalBackend'
+                title='Rendering Backend'
+                description='Set the rendering backend for the terminal.'
+                control={(
+                  <Dropdown
+                    options={terminalBackendOptions}
+                    defaultSelectedKey={this.props.terminal?.renderingBackend}
+                    onChange={(_, val) => {
+                      this.touchTerminalSettings({
+                        renderingBackend: val?.key.toString() as RenderingBackend
+                      });
+                    }}
+                  />
+                )}
+              />
+            </PivotItem>
           </Pivot>
 
         </div>
diff --git a/web/src/components/settings/options.ts b/web/src/components/settings/options.ts
new file mode 100644
index 00000000..faffd70a
--- /dev/null
+++ b/web/src/components/settings/options.ts
@@ -0,0 +1,34 @@
+import type {IDropdownOption} from '@fluentui/react';
+import {RenderingBackend} from '~/store/terminal/types';
+import {DEFAULT_FONT, getAvailableFonts} from '~/services/fonts';
+
+export const cursorBlinkOptions: IDropdownOption[] = [
+  { key: 'blink', text: 'Blink (default)' },
+  { key: 'smooth', text: 'Smooth' },
+  { key: 'phase', text: 'Phase' },
+  { key: 'expand', text: 'Expand' },
+  { key: 'solid', text: 'Solid' },
+];
+
+export const cursorLineOptions: IDropdownOption[] = [
+  { key: 'line', text: 'Line (default)' },
+  { key: 'block', text: 'Block' },
+  { key: 'underline', text: 'Underline' },
+  { key: 'line-thin', text: 'Line thin' },
+  { key: 'block-outline', text: 'Block outline' },
+  { key: 'underline-thin', text: 'Underline thin' },
+];
+
+export const fontOptions: IDropdownOption[] = [
+  { key: DEFAULT_FONT, text: 'System default' },
+  ...getAvailableFonts().map(f => ({
+    key: f.family,
+    text: f.label,
+  }))
+];
+
+export const terminalBackendOptions: IDropdownOption[] = [
+  { key: RenderingBackend.Canvas, text: 'Canvas' },
+  { key: RenderingBackend.DOM, text: 'DOM' },
+  { key: RenderingBackend.WebGL, text: 'WebGL (experimental)' },
+];
diff --git a/web/src/components/utils/XTerm/XTerm.tsx b/web/src/components/utils/XTerm/XTerm.tsx
new file mode 100644
index 00000000..fea56fcb
--- /dev/null
+++ b/web/src/components/utils/XTerm/XTerm.tsx
@@ -0,0 +1,237 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+
+import '@xterm/xterm/css/xterm.css'
+
+// We are using these as types.
+// eslint-disable-next-line no-unused-vars
+import { Terminal, ITerminalOptions, ITerminalAddon } from '@xterm/xterm'
+
+interface IProps {
+  /**
+   * Class name to add to the terminal container.
+   */
+  className?: string
+
+  /**
+   * Options to initialize the terminal with.
+   */
+  options?: ITerminalOptions
+
+  /**
+   * An array of XTerm addons to load along with the terminal.
+   */
+  addons?: Array<ITerminalAddon>
+
+  /**
+   * Adds an event listener for when a binary event fires. This is used to
+   * enable non UTF-8 conformant binary messages to be sent to the backend.
+   * Currently this is only used for a certain type of mouse reports that
+   * happen to be not UTF-8 compatible.
+   * The event value is a JS string, pass it to the underlying pty as
+   * binary data, e.g. `pty.write(Buffer.from(data, 'binary'))`.
+   */
+  onBinary?(data: string): void
+
+  /**
+   * Adds an event listener for the cursor moves.
+   */
+  onCursorMove?(): void
+
+  /**
+   * Adds an event listener for when a data event fires. This happens for
+   * example when the user types or pastes into the terminal. The event value
+   * is whatever `string` results, in a typical setup, this should be passed
+   * on to the backing pty.
+   */
+  onData?(data: string): void
+
+  /**
+   * Adds an event listener for when a key is pressed. The event value contains the
+   * string that will be sent in the data event as well as the DOM event that
+   * triggered it.
+   */
+  onKey?(event: { key: string; domEvent: KeyboardEvent }): void
+
+  /**
+   * Adds an event listener for when a line feed is added.
+   */
+  onLineFeed?(): void
+
+  /**
+   * Adds an event listener for when a scroll occurs. The event value is the
+   * new position of the viewport.
+   * @returns an `IDisposable` to stop listening.
+   */
+  onScroll?(newPosition: number): void
+
+  /**
+   * Adds an event listener for when a selection change occurs.
+   */
+  onSelectionChange?(): void
+
+  /**
+   * Adds an event listener for when rows are rendered. The event value
+   * contains the start row and end rows of the rendered area (ranges from `0`
+   * to `Terminal.rows - 1`).
+   */
+  onRender?(event: { start: number; end: number }): void
+
+  /**
+   * Adds an event listener for when the terminal is resized. The event value
+   * contains the new size.
+   */
+  onResize?(event: { cols: number; rows: number }): void
+
+  /**
+   * Adds an event listener for when an OSC 0 or OSC 2 title change occurs.
+   * The event value is the new title.
+   */
+  onTitleChange?(newTitle: string): void
+
+  /**
+   * Attaches a custom key event handler which is run before keys are
+   * processed, giving consumers of xterm.js ultimate control as to what keys
+   * should be processed by the terminal and what keys should not.
+   *
+   * @param event The custom KeyboardEvent handler to attach.
+   * This is a function that takes a KeyboardEvent, allowing consumers to stop
+   * propagation and/or prevent the default action. The function returns
+   * whether the event should be processed by xterm.js.
+   */
+  customKeyEventHandler?(event: KeyboardEvent): boolean
+}
+
+export class XTerm extends React.Component<IProps> {
+  /**
+   * The ref for the containing element.
+   */
+  terminalRef: React.RefObject<HTMLDivElement>
+
+  /**
+   * XTerm.js Terminal object.
+   */
+  terminal!: Terminal // This is assigned in the setupTerminal() which is called from the constructor
+
+  static propTypes = {
+    className: PropTypes.string,
+    options: PropTypes.object,
+    addons: PropTypes.array,
+    onBinary: PropTypes.func,
+    onCursorMove: PropTypes.func,
+    onData: PropTypes.func,
+    onKey: PropTypes.func,
+    onLineFeed: PropTypes.func,
+    onScroll: PropTypes.func,
+    onSelectionChange: PropTypes.func,
+    onRender: PropTypes.func,
+    onResize: PropTypes.func,
+    onTitleChange: PropTypes.func,
+    customKeyEventHandler: PropTypes.func,
+  }
+
+  constructor(props: IProps) {
+    super(props)
+
+    this.terminalRef = React.createRef()
+
+    // Bind Methods
+    this.onData = this.onData.bind(this)
+    this.onCursorMove = this.onCursorMove.bind(this)
+    this.onKey = this.onKey.bind(this)
+    this.onBinary = this.onBinary.bind(this)
+    this.onLineFeed = this.onLineFeed.bind(this)
+    this.onScroll = this.onScroll.bind(this)
+    this.onSelectionChange = this.onSelectionChange.bind(this)
+    this.onRender = this.onRender.bind(this)
+    this.onResize = this.onResize.bind(this)
+    this.onTitleChange = this.onTitleChange.bind(this)
+
+    this.setupTerminal()
+  }
+
+  setupTerminal() {
+    // Setup the XTerm terminal.
+    this.terminal = new Terminal(this.props.options)
+
+    // Load addons if the prop exists.
+    if (this.props.addons) {
+      this.props.addons.forEach((addon) => {
+        this.terminal.loadAddon(addon)
+      })
+    }
+
+    // Create Listeners
+    this.terminal.onBinary(this.onBinary)
+    this.terminal.onCursorMove(this.onCursorMove)
+    this.terminal.onData(this.onData)
+    this.terminal.onKey(this.onKey)
+    this.terminal.onLineFeed(this.onLineFeed)
+    this.terminal.onScroll(this.onScroll)
+    this.terminal.onSelectionChange(this.onSelectionChange)
+    this.terminal.onRender(this.onRender)
+    this.terminal.onResize(this.onResize)
+    this.terminal.onTitleChange(this.onTitleChange)
+
+    // Add Custom Key Event Handler
+    if (this.props.customKeyEventHandler) {
+      this.terminal.attachCustomKeyEventHandler(this.props.customKeyEventHandler)
+    }
+  }
+
+  componentDidMount() {
+    if (this.terminalRef.current) {
+      // Creates the terminal within the container element.
+      this.terminal.open(this.terminalRef.current)
+    }
+  }
+
+  componentWillUnmount() {
+    // When the component unmounts dispose of the terminal and all of its listeners.
+    this.terminal.dispose()
+  }
+
+  private onBinary(data: string) {
+    if (this.props.onBinary) this.props.onBinary(data)
+  }
+
+  private onCursorMove() {
+    if (this.props.onCursorMove) this.props.onCursorMove()
+  }
+
+  private onData(data: string) {
+    if (this.props.onData) this.props.onData(data)
+  }
+
+  private onKey(event: { key: string; domEvent: KeyboardEvent }) {
+    if (this.props.onKey) this.props.onKey(event)
+  }
+
+  private onLineFeed() {
+    if (this.props.onLineFeed) this.props.onLineFeed()
+  }
+
+  private onScroll(newPosition: number) {
+    if (this.props.onScroll) this.props.onScroll(newPosition)
+  }
+
+  private onSelectionChange() {
+    if (this.props.onSelectionChange) this.props.onSelectionChange()
+  }
+
+  private onRender(event: { start: number; end: number }) {
+    if (this.props.onRender) this.props.onRender(event)
+  }
+
+  private onResize(event: { cols: number; rows: number }) {
+    if (this.props.onResize) this.props.onResize(event)
+  }
+
+  private onTitleChange(newTitle: string) {
+    if (this.props.onTitleChange) this.props.onTitleChange(newTitle)
+  }
+
+  render() {
+    return <div className={this.props.className} ref={this.terminalRef} />
+  }
+}
diff --git a/web/src/components/utils/XTerm/hooks.ts b/web/src/components/utils/XTerm/hooks.ts
new file mode 100644
index 00000000..1dd03b7c
--- /dev/null
+++ b/web/src/components/utils/XTerm/hooks.ts
@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+import { useTheme } from '@fluentui/react';
+import type { ITheme } from '@xterm/xterm';
+import { buildXtermTheme } from './utils';
+
+/**
+ * Hook to obtain xterm theme based on a global FluentUI theme.
+ */
+export const useXtermTheme = (): ITheme => {
+  const theme = useTheme();
+
+  return useMemo(() => buildXtermTheme(theme), [theme]);
+}
diff --git a/web/src/components/utils/XTerm/index.tsx b/web/src/components/utils/XTerm/index.tsx
new file mode 100644
index 00000000..9bbe32ec
--- /dev/null
+++ b/web/src/components/utils/XTerm/index.tsx
@@ -0,0 +1,3 @@
+export { XTerm } from './XTerm'
+export * from './utils'
+export * from './hooks'
diff --git a/web/src/components/utils/XTerm/utils.ts b/web/src/components/utils/XTerm/utils.ts
new file mode 100644
index 00000000..035376d5
--- /dev/null
+++ b/web/src/components/utils/XTerm/utils.ts
@@ -0,0 +1,37 @@
+import type { Theme } from '@fluentui/theme';
+import type { ITheme } from '@xterm/xterm';
+
+/**
+ * Constructs XTerm theme from FluentUI theme
+ * @see https://xtermjs.org/docs/api/terminal/interfaces/itheme/
+ *
+ * @param theme Current FluentUI theme
+ */
+export const buildXtermTheme = (theme: Theme): ITheme => {
+  const { palette, semanticColors } = theme
+
+  return {
+    foreground: palette.neutralPrimary,
+    background: semanticColors.bodyBackgroundChecked,
+    cursor: palette.neutralSecondary,
+    cursorAccent: palette.neutralSecondaryAlt,
+    selectionBackground: palette.blue,
+    selectionForeground: palette.neutralDark,
+    black: palette.neutralPrimary,
+    red: palette.red,
+    green: palette.green,
+    yellow: palette.yellow,
+    blue: palette.blue,
+    magenta: palette.magenta,
+    cyan: '#99ffff',
+    white: palette.neutralLighter,
+    brightBlack: palette.neutralPrimary,
+    brightRed: palette.red,
+    brightGreen: palette.green,
+    brightYellow: palette.yellow,
+    brightBlue: palette.blue,
+    brightMagenta: palette.magenta,
+    brightCyan: '#78ffff',
+    brightWhite: palette.neutralLighter,
+  }
+}
diff --git a/web/src/services/config/config.ts b/web/src/services/config/config.ts
index 04835779..81d7d5c0 100644
--- a/web/src/services/config/config.ts
+++ b/web/src/services/config/config.ts
@@ -2,10 +2,10 @@ import { loadTheme } from '@fluentui/react';
 import { DarkTheme, LightTheme } from '../colors';
 import {PanelState} from '~/store';
 import { defaultPanelProps } from '~/styles/layout';
-import { supportsPreferColorScheme } from "~/utils/theme";
+import { supportsPreferColorScheme } from '~/utils/theme';
 
-import { RunTargetConfig, defaultRunTarget } from "./target";
-import { MonacoSettings, defaultMonacoSettings } from "./monaco";
+import { RunTargetConfig, defaultRunTarget } from './target';
+import { MonacoSettings, defaultMonacoSettings } from './monaco';
 
 const DARK_THEME_KEY = 'ui.darkTheme.enabled';
 const USE_SYSTEM_THEME_KEY = 'ui.darkTheme.useSystem';
@@ -20,6 +20,8 @@ const setThemeStyles = (isDark: boolean) => (
   loadTheme(isDark ? DarkTheme : LightTheme)
 );
 
+// TODO: move key operations to store.
+
 const Config = {
   _cache: new Map<string, any>(),
 
@@ -48,7 +50,7 @@ const Config = {
   },
 
   get goProxyUrl() {
-    return this.getString(GOPROXY_URL, "https://proxy.golang.org");
+    return this.getString(GOPROXY_URL, 'https://proxy.golang.org');
   },
 
   set goProxyUrl(newVal: string) {
@@ -134,8 +136,9 @@ const Config = {
 
     try {
       const obj = JSON.parse(val) as T;
-      this._cache.set(key, obj);
-      return obj;
+      const result = fallback ? { ...fallback, ...obj } : obj;
+      this._cache.set(key, result);
+      return result;
     } catch (err) {
       console.warn(`failed to read settings key ${key}`, err);
       this._cache.set(key, fallback);
diff --git a/web/src/services/go/stdio.ts b/web/src/services/go/stdio.ts
index 8a377fc7..328cdd13 100644
--- a/web/src/services/go/stdio.ts
+++ b/web/src/services/go/stdio.ts
@@ -4,34 +4,26 @@
 
 import { decoder } from './foundation';
 import { IWriter } from './fs';
-import { EvalEventKind } from "../api";
+import { EvalEventKind } from '../api';
 
 export interface ConsoleLogger {
-  log(eventType: EvalEventKind, message: string)
+  log(eventType: EvalEventKind, message: string): void
 }
 
 export class StdioWrapper {
-  outputBuf = '';
-
   constructor(private logger: ConsoleLogger) { }
 
   private getWriter(kind: EvalEventKind) {
     return {
       write: (data: Uint8Array) => {
-        this.outputBuf += decoder.decode(data);
-        const nl = this.outputBuf.lastIndexOf('\n');
-        if (nl !== -1) {
-          const message = this.outputBuf.substr(0, nl);
-          this.logger.log(kind, message);
-          this.outputBuf = this.outputBuf.substr(nl + 1);
-        }
+        const msg = decoder.decode(data);
+        this.logger.log(kind, msg);
         return data.length;
       }
     };
   }
 
   reset() {
-    this.outputBuf = '';
   }
 
   get stdoutPipe(): IWriter {
diff --git a/web/src/store/dispatchers/build.ts b/web/src/store/dispatchers/build.ts
index 2c1045ef..4dfdab95 100644
--- a/web/src/store/dispatchers/build.ts
+++ b/web/src/store/dispatchers/build.ts
@@ -196,7 +196,6 @@ export const runFileDispatcher: Dispatcher =
 export const createGoConsoleAdapter = (dispatch: DispatchFn) => (
   {
     log: (eventType: EvalEventKind, message: string) => {
-      console.log('%s:\t%s', eventType, message);
       dispatch(newProgramWriteAction({
         Kind: eventType,
         Message: message,
diff --git a/web/src/store/reducers.ts b/web/src/store/reducers.ts
index 86dc851b..a53f48d8 100644
--- a/web/src/store/reducers.ts
+++ b/web/src/store/reducers.ts
@@ -10,6 +10,10 @@ import config, {
 
 import vimReducers from './vim/reducers';
 import notificationReducers from './notifications/reducers';
+
+import { initialTerminalState } from './terminal/state';
+import { reducers as terminalReducers } from './terminal/reducers';
+
 import {
   Action,
   ActionType,
@@ -28,6 +32,15 @@ import {
   UIState,
 } from './state';
 
+// TODO: move settings reducers and state to store/settings
+const initialSettingsState: SettingsState = {
+  darkMode: config.darkThemeEnabled,
+  autoFormat: true,
+  useSystemTheme: config.useSystemTheme,
+  enableVimMode: config.enableVimMode,
+  goProxyUrl: config.goProxyUrl,
+};
+
 const reducers = {
   runTarget: mapByAction<RunTargetConfig>({
     [ActionType.RUN_TARGET_CHANGE]: (_, {payload}: Action<RunTargetConfig>) => (
@@ -136,13 +149,7 @@ const reducers = {
       }
     )
   },
-    {
-      darkMode: config.darkThemeEnabled,
-      autoFormat: true,
-      useSystemTheme: config.useSystemTheme,
-      enableVimMode: config.enableVimMode,
-      goProxyUrl: config.goProxyUrl,
-    }
+   initialSettingsState,
   ),
   monaco: mapByAction<MonacoSettings>({
     [ActionType.MONACO_SETTINGS_CHANGE]: (s: MonacoSettings, {payload}: Action<MonacoParamsChanges>) => (
@@ -181,6 +188,7 @@ const reducers = {
   }, {}),
   vim: vimReducers,
   notifications: notificationReducers,
+  terminal: terminalReducers,
 };
 
 export const getInitialState = (): State => ({
@@ -191,18 +199,13 @@ export const getInitialState = (): State => ({
     fileName: 'prog.go',
     code: ''
   },
-  settings: {
-    darkMode: config.darkThemeEnabled,
-    autoFormat: config.autoFormat,
-    useSystemTheme: config.useSystemTheme,
-    enableVimMode: config.enableVimMode,
-    goProxyUrl: config.goProxyUrl,
-  },
+  settings: initialSettingsState,
   runTarget: config.runTargetConfig,
   monaco: config.monacoSettings,
   panel: config.panelLayout,
   notifications: {},
-  vim: null
+  vim: null,
+  terminal: initialTerminalState,
 });
 
 export const createRootReducer = history => combineReducers({
diff --git a/web/src/store/state.ts b/web/src/store/state.ts
index f1706c29..02149421 100644
--- a/web/src/store/state.ts
+++ b/web/src/store/state.ts
@@ -1,11 +1,12 @@
-import { connect } from "react-redux";
-import {editor} from "monaco-editor";
-import { EvalEvent } from "~/services/api";
-import {MonacoSettings, RunTargetConfig} from "~/services/config";
-import {LayoutType} from "~/styles/layout";
+import { connect } from 'react-redux';
+import {editor} from 'monaco-editor';
+import { EvalEvent } from '~/services/api';
+import {MonacoSettings, RunTargetConfig} from '~/services/config';
+import {LayoutType} from '~/styles/layout';
 
-import { VimState } from "./vim/state";
-import { NotificationsState } from "./notifications/state";
+import { VimState } from './vim/state';
+import { NotificationsState } from './notifications/state';
+import { TerminalState } from './terminal/state';
 
 export interface UIState {
   shareCreated?: boolean
@@ -51,6 +52,7 @@ export interface State {
   ui?: UIState
   vim?: VimState | null
   notifications: NotificationsState
+  terminal: TerminalState
 }
 
 export function Connect(fn: (state: State) => any) {
diff --git a/web/src/store/terminal/actions.ts b/web/src/store/terminal/actions.ts
new file mode 100644
index 00000000..e01fb372
--- /dev/null
+++ b/web/src/store/terminal/actions.ts
@@ -0,0 +1,9 @@
+/**
+ * List of store actions related to terminal state.
+ */
+export enum TerminalAction {
+  /**
+   * Terminal settings change action.
+   */
+  SETTINGS_CHANGE = 'TERMINAL_SETTINGS_CHANGE'
+}
diff --git a/web/src/store/terminal/config.ts b/web/src/store/terminal/config.ts
new file mode 100644
index 00000000..7328a221
--- /dev/null
+++ b/web/src/store/terminal/config.ts
@@ -0,0 +1,22 @@
+import config from '~/services/config';
+import { TerminalSettings, defaultTerminalSettings } from './types';
+
+/**
+ * Config key for terminal settings.
+ */
+export const CONFIG_KEY = 'ui.terminal.settings';
+
+/**
+ * Obtains terminal settings from config storage.
+ * @param settings
+ */
+export const saveTerminalSettings = (settings: TerminalSettings) => {
+  config.setObject(CONFIG_KEY, settings);
+};
+
+/**
+ * Persists terminal settings to config storage.
+ */
+export const loadTerminalSettings = (): TerminalSettings => (
+  config.getObject(CONFIG_KEY, defaultTerminalSettings)
+);
diff --git a/web/src/store/terminal/dispatchers.ts b/web/src/store/terminal/dispatchers.ts
new file mode 100644
index 00000000..6120970f
--- /dev/null
+++ b/web/src/store/terminal/dispatchers.ts
@@ -0,0 +1,18 @@
+import { TerminalAction } from './actions';
+import { saveTerminalSettings } from './config';
+import type { TerminalSettings } from './types';
+import type { DispatchFn, StateProvider } from '../helpers';
+
+/**
+ * Creates a new terminal settings update dispatcher.
+ *
+ * Saves new settings and triggers a settings change action.
+ * @param payload Partial terminal settings
+ */
+export const dispatchTerminalSettingsChange = (payload: Partial<TerminalSettings>) => (
+  (dispatch: DispatchFn, getState: StateProvider) => {
+    const { terminal: { settings } } = getState();
+    saveTerminalSettings({ ...settings, ...payload });
+    dispatch({ type: TerminalAction.SETTINGS_CHANGE, payload });
+  }
+);
diff --git a/web/src/store/terminal/index.ts b/web/src/store/terminal/index.ts
new file mode 100644
index 00000000..a78e2ddf
--- /dev/null
+++ b/web/src/store/terminal/index.ts
@@ -0,0 +1,4 @@
+export * from './types';
+export * from './actions';
+export * from './dispatchers';
+export type { TerminalState } from './state';
diff --git a/web/src/store/terminal/reducers.ts b/web/src/store/terminal/reducers.ts
new file mode 100644
index 00000000..83eb0ea2
--- /dev/null
+++ b/web/src/store/terminal/reducers.ts
@@ -0,0 +1,18 @@
+import { mapByAction } from '../helpers';
+import type { Action } from '../actions';
+import type { TerminalSettings } from './types';
+import { type TerminalState, initialTerminalState } from './state';
+import { TerminalAction } from './actions';
+
+export const reducers = mapByAction<TerminalState>({
+  [TerminalAction.SETTINGS_CHANGE]: (s: TerminalState, {payload}: Action<Partial<TerminalSettings>>) => {
+    const { settings, ...rest } = s;
+    return {
+      ...rest,
+      settings: {
+        ...settings,
+        ...payload,
+      },
+    }
+  },
+}, initialTerminalState);
diff --git a/web/src/store/terminal/state.ts b/web/src/store/terminal/state.ts
new file mode 100644
index 00000000..cb1e4730
--- /dev/null
+++ b/web/src/store/terminal/state.ts
@@ -0,0 +1,10 @@
+import type { TerminalSettings } from './types';
+import { loadTerminalSettings } from './config';
+
+export const initialTerminalState = {
+  settings: loadTerminalSettings()
+};
+
+export interface TerminalState {
+  settings: TerminalSettings
+}
diff --git a/web/src/store/terminal/types.ts b/web/src/store/terminal/types.ts
new file mode 100644
index 00000000..e441b50d
--- /dev/null
+++ b/web/src/store/terminal/types.ts
@@ -0,0 +1,15 @@
+export enum RenderingBackend {
+  DOM = 'dom',
+  WebGL = 'webgl',
+  Canvas = 'canvas'
+}
+
+export interface TerminalSettings {
+  fontSize: number
+  renderingBackend: RenderingBackend
+}
+
+export const defaultTerminalSettings: TerminalSettings = {
+  renderingBackend: RenderingBackend.Canvas,
+  fontSize: 14,
+}
diff --git a/web/src/utils/dom.ts b/web/src/utils/dom.ts
new file mode 100644
index 00000000..83f37867
--- /dev/null
+++ b/web/src/utils/dom.ts
@@ -0,0 +1,5 @@
+export const isTouchDevice = () => (
+  'ontouchstart' in window ||
+  navigator.maxTouchPoints > 0 ||
+  navigator['msMaxTouchPoints'] > 0
+);
diff --git a/web/yarn.lock b/web/yarn.lock
index 18f19df9..31357bd0 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -2525,6 +2525,31 @@
     "@webassemblyjs/ast" "1.11.1"
     "@xtuc/long" "4.2.2"
 
+"@xterm/addon-canvas@^0.6.0-beta.1":
+  version "0.6.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@xterm/addon-canvas/-/addon-canvas-0.6.0-beta.1.tgz#d55e8a2877110f62f39e5d43ce35082d1a70d153"
+  integrity sha512-WQgEQa0t7D0JG6Pkgf0XqFaB9v2RuQq+/GhCZyyFN8jU/5T7zAMuZyuDgunffzB68YLymaMtsXoVeI4KMO9gAQ==
+
+"@xterm/addon-fit@^0.9.0-beta.1":
+  version "0.9.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@xterm/addon-fit/-/addon-fit-0.9.0-beta.1.tgz#db1580c99e8b46f05d4006e7315dfe5f50215ddc"
+  integrity sha512-HmGRUMMamUpQYuQBF2VP1LJ0xzqF85LMFfpaNu84t1Tsrl1lPKJWtqX9FDZ22Rf5q6bnKdbj44TRVAUHgDRbLA==
+
+"@xterm/addon-image@^0.7.0-beta.1":
+  version "0.7.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@xterm/addon-image/-/addon-image-0.7.0-beta.1.tgz#8d1df39db103442d18e61d05f1665f49ac7f19a9"
+  integrity sha512-c+wB+ODtKgWaQHvw1442R63Ivu10cYjelOYob1J6r5VKFD9DQCofyiMC9BLJsS7kJMmg9A7KWtUCTwvcbR3HQg==
+
+"@xterm/addon-webgl@^0.17.0-beta.1":
+  version "0.17.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@xterm/addon-webgl/-/addon-webgl-0.17.0-beta.1.tgz#905a6bb98b14ab5799b8f2349838a6f061b068c1"
+  integrity sha512-SRUh8dFYmD8U37gGGl9+oV+D304wumkV7eoxvD53J5HQERSKAwk3YeIIVUGWu6q6pifjUgGqfiKCIQwbHZ6QIQ==
+
+"@xterm/xterm@^5.4.0-beta.1":
+  version "5.4.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@xterm/xterm/-/xterm-5.4.0-beta.1.tgz#4937b0c4171e5ee7b05839f4438b4b7192852e0f"
+  integrity sha512-e5dokYOdC0AiBRIRLKCxHqOmLyGsqAdYwalu2d+cTMXRX/gCiTWNmJoVISD6LPUUc6jYKHhfOH/WWa0LYsF8gw==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"