diff --git a/assets/www/css/black.png b/assets/www/css/black.png
new file mode 100644
index 0000000..bb8fe04
Binary files /dev/null and b/assets/www/css/black.png differ
diff --git a/assets/www/css/back-icon.png b/assets/www/css/jo/back-icon.png
similarity index 100%
rename from assets/www/css/back-icon.png
rename to assets/www/css/jo/back-icon.png
diff --git a/assets/www/css/back-line.png b/assets/www/css/jo/back-line.png
similarity index 100%
rename from assets/www/css/back-line.png
rename to assets/www/css/jo/back-line.png
diff --git a/assets/www/css/back-mini.png b/assets/www/css/jo/back-mini.png
similarity index 100%
rename from assets/www/css/back-mini.png
rename to assets/www/css/jo/back-mini.png
diff --git a/assets/www/css/bright-shiny.png b/assets/www/css/jo/bright-shiny.png
similarity index 100%
rename from assets/www/css/bright-shiny.png
rename to assets/www/css/jo/bright-shiny.png
diff --git a/assets/www/css/browser.css b/assets/www/css/jo/browser.css
similarity index 100%
rename from assets/www/css/browser.css
rename to assets/www/css/jo/browser.css
diff --git a/assets/www/css/dark_matte.png b/assets/www/css/jo/dark_matte.png
similarity index 100%
rename from assets/www/css/dark_matte.png
rename to assets/www/css/jo/dark_matte.png
diff --git a/assets/www/css/expando.png b/assets/www/css/jo/expando.png
similarity index 100%
rename from assets/www/css/expando.png
rename to assets/www/css/jo/expando.png
diff --git a/assets/www/css/full-matte.png b/assets/www/css/jo/full-matte.png
similarity index 100%
rename from assets/www/css/full-matte.png
rename to assets/www/css/jo/full-matte.png
diff --git a/assets/www/css/jo.css b/assets/www/css/jo/jo.css
similarity index 100%
rename from assets/www/css/jo.css
rename to assets/www/css/jo/jo.css
diff --git a/assets/www/css/lite-matte.png b/assets/www/css/jo/lite-matte.png
similarity index 100%
rename from assets/www/css/lite-matte.png
rename to assets/www/css/jo/lite-matte.png
diff --git a/assets/www/css/sample.html b/assets/www/css/jo/sample.html
similarity index 100%
rename from assets/www/css/sample.html
rename to assets/www/css/jo/sample.html
diff --git a/assets/www/css/shade-top.png b/assets/www/css/jo/shade-top.png
similarity index 100%
rename from assets/www/css/shade-top.png
rename to assets/www/css/jo/shade-top.png
diff --git a/assets/www/css/shade.png b/assets/www/css/jo/shade.png
similarity index 100%
rename from assets/www/css/shade.png
rename to assets/www/css/jo/shade.png
diff --git a/assets/www/css/shiny-button.png b/assets/www/css/jo/shiny-button.png
similarity index 100%
rename from assets/www/css/shiny-button.png
rename to assets/www/css/jo/shiny-button.png
diff --git a/assets/www/css/shiny.png b/assets/www/css/jo/shiny.png
similarity index 100%
rename from assets/www/css/shiny.png
rename to assets/www/css/jo/shiny.png
diff --git a/assets/www/css/subtle-matte-full.png b/assets/www/css/jo/subtle-matte-full.png
similarity index 100%
rename from assets/www/css/subtle-matte-full.png
rename to assets/www/css/jo/subtle-matte-full.png
diff --git a/assets/www/css/subtle-shiny-button.png b/assets/www/css/jo/subtle-shiny-button.png
similarity index 100%
rename from assets/www/css/subtle-shiny-button.png
rename to assets/www/css/jo/subtle-shiny-button.png
diff --git a/assets/www/css/subtle-shiny.png b/assets/www/css/jo/subtle-shiny.png
similarity index 100%
rename from assets/www/css/subtle-shiny.png
rename to assets/www/css/jo/subtle-shiny.png
diff --git a/assets/www/css/webos.css b/assets/www/css/jo/webos.css
similarity index 100%
rename from assets/www/css/webos.css
rename to assets/www/css/jo/webos.css
diff --git a/assets/www/css/king.png b/assets/www/css/king.png
new file mode 100644
index 0000000..af44bf8
Binary files /dev/null and b/assets/www/css/king.png differ
diff --git a/assets/www/css/ui.css b/assets/www/css/ui.css
new file mode 100644
index 0000000..09d072b
--- /dev/null
+++ b/assets/www/css/ui.css
@@ -0,0 +1,52 @@
+
+/* Tafl board */
+
+jotaflboard {
+  display: block;
+  margin: 6px;
+}
+
+jocard {
+	margin: auto;
+	
+	text-align: center;
+}
+
+jotaflboard {
+	border-collapse: collapse;
+	
+	margin-left: 6px;
+ 	margin-right: 6px;
+}
+
+jotaflboard td {
+	padding: 0px;
+	width: 27px;
+	height: 27px;
+	
+	border: 1px solid grey;
+	
+	background-repeat: no-repeat !important;
+	background-position: center center !important;
+	background-size: 100% 100% !important;
+}
+
+jotaflboard td.W {
+	background-image: url(white.png);
+}
+
+jotaflboard td.B {
+	background-image: url(black.png);
+}
+
+jotaflboard td.K {
+	background-image: url(king.png);
+}
+
+jotaflboard td.throne {
+	background-color: #ccc;
+}
+
+jotaflboard td.selected {
+	background-color: yellow;
+}
diff --git a/assets/www/css/white.png b/assets/www/css/white.png
new file mode 100644
index 0000000..ff4a015
Binary files /dev/null and b/assets/www/css/white.png differ
diff --git a/assets/www/index.html b/assets/www/index.html
index 2c9dca6..99f7410 100644
--- a/assets/www/index.html
+++ b/assets/www/index.html
@@ -3,12 +3,14 @@
  <head>
   <title>PhoneGap</title>
   
-  <link rel="stylesheet" type="text/css" href="css/jo.css" />
+  <meta name="viewport" content="width=320, initial-scale=1">
   
   <!-- Libraries -->
+  <link rel="stylesheet" type="text/css" href="css/jo/jo.css" />
   <script type="text/javascript" charset="utf-8" src="js/cordova-1.5.0.js"></script>
   
   <!-- Application Code -->
+  <link rel="stylesheet" type="text/css" href="css/ui.css" />
   <script type="text/javascript" charset="utf-8" src="js/tafl.js"></script>
   
  </head>
diff --git a/assets/www/js/ui.js b/assets/www/js/ui.js
index ffd3c84..4a4fac6 100644
--- a/assets/www/js/ui.js
+++ b/assets/www/js/ui.js
@@ -30,24 +30,48 @@ function updateBoard(board) {
 	}
 }
 
-function drawBoard(table, board) {
-	for (var i = 0; i < board.length; ++i) {
-		for (var j = 0; j < board[i].length; ++j) {
-			table.setCell
+/* Subclass of joTable */
+joTaflBoard = function(data) {
+	joTable.apply(this, arguments);
+};
+joTaflBoard.extend(joTable, {
+	tagName: "jotaflboard",
+	
+	// default row formatter
+	formatItem: function(row, index) {
+		var tr = document.createElement("tr");
+		
+		for (var i = 0, l = row.length; i < l; i++) {
+			var o = document.createElement("td");
+			//o.innerHTML = row[i];
+			o.innerHTML = "&nbsp;";
 			
+			// this is a little brittle, but plays nicely with joList's select event
+			o.setAttribute("index", index * l + i);
+			o.setAttribute("type", row[i]);
+			var classes;
+			switch (row[i]) {
+				case "k": classes="K throne"; break;
+				case ",": classes="throne"; break;
+				case ".": classes="empty"; break;
+				default: classes=row[i];
+			}
+			o.setAttribute("class", classes);
+			
+			tr.appendChild(o);
 		}
+		
+		return tr;
+	},
+
+	setCell: function(i, j) {
+		this.setValue(i*this.data.length + j);
 	}
-}
+	
+});
 
 var uiBoardData = prepareBoard(tafl_game.board);
-var uiBoard = new joTable(uiBoardData);
-
-// Add jo function that is not implemented, yet
-if (! uiBoard.setCell) {
-	uiBoard.setCell = function(i,j) {
-		uiBoard.setValue(i*N + j);
-	}
-}
+var uiBoard = new joTaflBoard(uiBoardData);
 
 // Build board widget and connect events
 
@@ -82,6 +106,7 @@ uiBoard.selectEvent.subscribe(function(index, table){
 			makeMove([moveFrom, [i, j]]);
 
 			moveFrom = null;
+			table.deselect();
 		} catch(e) {
 			if (e === "IllegalMove") {
 				table.deselect();
@@ -122,7 +147,7 @@ function makeMove(move) {
 
 // Build page
 var uiCard = new joCard([
-    new joTitle("Andotafl"),
+    new joTitle("Androtafl"),
     uiBoard
 ]);