diff --git a/G-Earth/src/main/java/gearth/ui/logger/loggerdisplays/uilogger/UiLoggerController.java b/G-Earth/src/main/java/gearth/ui/logger/loggerdisplays/uilogger/UiLoggerController.java
index 064d6c0..c29ea06 100644
--- a/G-Earth/src/main/java/gearth/ui/logger/loggerdisplays/uilogger/UiLoggerController.java
+++ b/G-Earth/src/main/java/gearth/ui/logger/loggerdisplays/uilogger/UiLoggerController.java
@@ -6,18 +6,16 @@ import gearth.protocol.HMessage;
 import gearth.protocol.HPacket;
 import gearth.ui.logger.loggerdisplays.PacketLogger;
 import javafx.application.Platform;
-import javafx.beans.InvalidationListener;
-import javafx.beans.Observable;
+import javafx.concurrent.Worker;
 import javafx.event.ActionEvent;
 import javafx.fxml.Initializable;
 import javafx.scene.control.CheckMenuItem;
 import javafx.scene.control.Label;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.FlowPane;
+import javafx.scene.web.WebEngine;
+import javafx.scene.web.WebView;
 import javafx.stage.Stage;
-import org.fxmisc.flowless.VirtualizedScrollPane;
-import org.fxmisc.richtext.StyleClassedTextArea;
-import org.fxmisc.richtext.model.StyleSpansBuilder;
 
 import java.net.URL;
 import java.util.*;
@@ -37,7 +35,7 @@ public class UiLoggerController implements Initializable {
     public CheckMenuItem chkMessageHash;
     public Label lblHarbleAPI;
 
-    private StyleClassedTextArea area;
+    private WebView webView;
 
     private Stage stage;
 
@@ -55,20 +53,22 @@ public class UiLoggerController implements Initializable {
 
     @Override
     public void initialize(URL arg0, ResourceBundle arg1) {
-        area = new StyleClassedTextArea();
-        area.getStyleClass().add("dark");
-        area.setWrapText(true);
+        webView = new WebView();
 
-        VirtualizedScrollPane<StyleClassedTextArea> vsPane = new VirtualizedScrollPane<>(area);
-        borderPane.setCenter(vsPane);
+        borderPane.setCenter(webView);
 
-        synchronized (appendLater) {
-            initialized = true;
-            if (!appendLater.isEmpty()) {
-                appendLog(appendLater);
-                appendLater.clear();
-            }
-        }
+        webView.getEngine().getLoadWorker().stateProperty().addListener((observableValue, oldState, newState) -> {
+            if (newState == Worker.State.SUCCEEDED)
+                synchronized (appendLater) {
+                    initialized = true;
+                    if (!appendLater.isEmpty()) {
+                        appendLog(appendLater);
+                        appendLater.clear();
+                    }
+                }
+        });
+
+        webView.getEngine().load(getClass().getResource("/gearth/ui/logger/uilogger/logger.html").toString());
     }
 
     private static String cleanTextContent(String text) {
@@ -168,27 +168,54 @@ public class UiLoggerController implements Initializable {
 
     private synchronized void appendLog(List<Element> elements) {
         Platform.runLater(() -> {
-            StringBuilder sb = new StringBuilder();
-            StyleSpansBuilder<Collection<String>> styleSpansBuilder = new StyleSpansBuilder<>(0);
 
             for (Element element : elements) {
-                sb.append(element.text);
+                String script = "$('#output').append('<span class=\"" + element.className + "\">"
+                        + escapeMessage(element.text) + "</span>');";
 
-                styleSpansBuilder.add(Collections.singleton(element.className), element.text.length());
+                try {
+                    executejQuery(webView.getEngine(), script);
+                } catch (Exception e) {
+                    System.out.println("Malformed JS message " + script);
+                }
             }
 
-            int oldLen = area.getLength();
-            area.appendText(sb.toString());
-//            System.out.println(sb.toString());
-            area.setStyleSpans(oldLen, styleSpansBuilder.create());
-
             if (autoScroll) {
-//                area.moveTo(area.getLength());
-                area.requestFollowCaret();
+                webView.getEngine().executeScript("window.scrollTo(0, document.body.scrollHeight);");
             }
         });
     }
 
+    // escapes logger text so that there are no javascript errors
+    private String escapeMessage(String text) {
+        return text
+                .replace("\n\r", "<br />")
+                .replace("\n", "<br />")
+                .replace("\r", "<br />")
+                .replace("'", "\\'");
+    }
+
+    private static Object executejQuery(final WebEngine engine, String script) {
+        return engine.executeScript(
+                "(function(window, document, version, callback) { "
+                        + "var j, d;"
+                        + "var loaded = false;"
+                        + "if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {"
+                        + " var script = document.createElement(\"script\");"
+                        + " script.type = \"text/javascript\";"
+                        + " script.src = \"http://code.jquery.com/jquery-1.7.2.min.js\";"
+                        + " script.onload = script.onreadystatechange = function() {"
+                        + " if (!loaded && (!(d = this.readyState) || d == \"loaded\" || d == \"complete\")) {"
+                        + " callback((j = window.jQuery).noConflict(1), loaded = true);"
+                        + " j(script).remove();"
+                        + " }"
+                        + " };"
+                        + " document.documentElement.childNodes[0].appendChild(script) "
+                        + "} "
+                        + "})(window, document, \"1.7.2\", function($, jquery_loaded) {" + script + "});"
+        );
+    }
+
     public void setStage(Stage stage) {
         this.stage = stage;
     }
@@ -233,6 +260,6 @@ public class UiLoggerController implements Initializable {
     }
 
     public void clearText(ActionEvent actionEvent) {
-        area.clear();
+        webView.getEngine().executeScript("$('#output').html = \\'\\'");
     }
 }
diff --git a/G-Earth/src/main/resources/gearth/ui/logger/uilogger/logger.css b/G-Earth/src/main/resources/gearth/ui/logger/uilogger/logger.css
index e3554ad..d83a56d 100644
--- a/G-Earth/src/main/resources/gearth/ui/logger/uilogger/logger.css
+++ b/G-Earth/src/main/resources/gearth/ui/logger/uilogger/logger.css
@@ -1,47 +1,47 @@
 /* packet logger css */
 .text {
-    -fx-fill: #a9a9a9;
+    color: #a9a9a9;
 }
 
 .messageinfo {
-    -fx-fill: #D0D3D4;
+    color: #D0D3D4;
 }
 
 .blocked, .replaced {
-    -fx-fill: #ffff00;
+    color: #ffff00;
 }
 
 .incoming {
-    -fx-fill: #b22222;
+    color: #b22222;
 }
 
 .outgoing {
-    -fx-fill: #0066cc;
+    color: #0066cc;
 }
 
 .structure, .skipped {
-    -fx-fill: cyan;
+    color: cyan;
 }
 
 .dark {
-    -fx-background-color: #000000;
+    background-color: #000000;
+    color: #a9a9a9;
 }
 
 .caret {
-    -fx-stroke: #ffffff;
+    stroke: #ffffff;
 }
 
 .label {
-    -fx-text-fill: #000000 !important;
+    color: #000000 !important;
 }
 
 .menu-bar .text, .menu .text {
-    -fx-text-fill: #000000 !important;
-    -fx-fill: #000000 !important;
-    -fx-padding: -2 0 -2 0 !important;
+    color: #000000 !important;
+    padding: -2px 0 -2px 0 !important;
 }
 
 .scroll-bar:vertical {
-    -fx-pref-width: 16.5;
-    -fx-padding: 1;
+    width: 17px;
+    padding: 1px;
 }
diff --git a/G-Earth/src/main/resources/gearth/ui/logger/uilogger/logger.html b/G-Earth/src/main/resources/gearth/ui/logger/uilogger/logger.html
new file mode 100644
index 0000000..c45d9a3
--- /dev/null
+++ b/G-Earth/src/main/resources/gearth/ui/logger/uilogger/logger.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>G-Earth Logger</title>
+    <link rel="stylesheet" href="logger.css">
+</head>
+<body>
+<div id="output" class="dark"></div>
+</body>
+</html>