diff --git a/star.js/index.html b/star.js/index.html
index 16ef02b..6ea39ee 100644
--- a/star.js/index.html
+++ b/star.js/index.html
@@ -27,7 +27,18 @@
 		</header>
 
 		<div id="main" role="main">
-		  <pre id="blackboard"></pre>
+		  <style>
+			#blackboard{background:#333}
+			.starcell{width:1em;height:1em;display:block;float:left}
+			.selected{font-weight:bold}
+			.wall{color:#000}
+			.ball{color:#99f}
+			.cube{color:red}
+			.gift{color:yellow}
+			.void{}
+			.selected{background:#555}
+		  </style>
+		  <p id="blackboard"></p>
 		</div>
 
 		<footer>
diff --git a/star.js/js/star.js b/star.js/js/star.js
index 279902d..589238b 100644
--- a/star.js/js/star.js
+++ b/star.js/js/star.js
@@ -91,7 +91,34 @@ function won_or_not( state ) {
 function format_level( state ) {
 	dl = "";
 	for ( i = 0 ; i < LEVEL_HEIGHT ; i++ ) {
-		dl = dl + (state.board).substr( i*LEVEL_WIDTH, LEVEL_WIDTH ) + "\n";
+		for ( j = 0 ; j < LEVEL_WIDTH ; j++ ) {
+			c = get_cell( state, j, i );
+			classes = "starcell";
+			if ( state.moving == c) {
+				classes = classes + " selected";
+			}
+			switch( c ) {
+			case cell.BALL:
+				classes = classes + " ball";
+				break;
+			case cell.CUBE:
+				classes = classes + " cube";
+				break;
+			case cell.WALL:
+				classes = classes + " wall";
+				break;
+			case cell.VOID:
+				classes = classes + " void";
+				break;
+			case cell.GIFT:
+				classes = classes + " gift";
+				break;
+			default:
+				break;
+			}
+			dl = dl + "<span class=\"" + classes + "\">" + c + "</span>"
+		}
+		dl = dl + "<br />"
 	}
 	return dl;
 }