diff --git a/hugvey/panopticon.py b/hugvey/panopticon.py
index 31ed946..d708cb1 100644
--- a/hugvey/panopticon.py
+++ b/hugvey/panopticon.py
@@ -17,7 +17,6 @@ from urllib.parse import urlparse
 logger = logging.getLogger("panopticon")
 
 web_dir = os.path.join(os.path.split(__file__)[0], '..', 'www')
-print(web_dir)
 
 
 def getWebSocketHandler(central_command):
@@ -57,7 +56,6 @@ def getWebSocketHandler(central_command):
 
         def send(self, message):
             j = json.dumps(message)
-            print(self.connections)
             [con.write_message(j) for con in self.connections]
 
         # client disconnected
diff --git a/www/css/styles.css b/www/css/styles.css
index 97caf6c..4da4b77 100644
--- a/www/css/styles.css
+++ b/www/css/styles.css
@@ -1,5 +1,5 @@
 body {
-  font-family: sans-serif;
+  font-family: "Noto Sans", sans-serif;
   margin: 0; }
 
 .btn {
@@ -37,15 +37,19 @@ body {
     justify-content: center; }
     #status .hugvey h1 {
       text-align: center;
-      margin: 0; }
-    #status .hugvey.hugvey--on h1 {
+      margin: 0;
+      font-weight: normal; }
+    #status .hugvey h1 {
       position: absolute;
       left: 5px;
       top: 5px; }
     #status .hugvey.hugvey--off {
       background-image: linear-gradient(to top, #575d74, #3572a5); }
-      #status .hugvey.hugvey--off h1::after {
-        content: '[off]'; }
+      #status .hugvey.hugvey--off::after {
+        content: 'disconnected';
+        font-style: italic;
+        color: gray;
+        text-align: center; }
 
 #story {
   position: relative; }
@@ -55,4 +59,74 @@ body {
     left: 5px; }
   #story svg#graph {
     width: 100%;
-    height: 100%; }
+    height: 100%;
+    cursor: grab; }
+    #story svg#graph:active {
+      cursor: grabbing; }
+  #story circle {
+    cursor: pointer;
+    fill: #77618e; }
+  #story .startMsg circle {
+    fill: lightseagreen; }
+  #story .endMsg circle {
+    fill: lightslategray; }
+  #story .orphanedMsg {
+    fill: lightcoral; }
+  #story text {
+    text-anchor: middle;
+    font-size: 11pt;
+    font-family: sans-serif;
+    fill: white; }
+  #story line {
+    marker-end: url("#arrowHead");
+    stroke-width: 2px;
+    stroke: black; }
+  #story line.link--noconditions {
+    stroke-dasharray: 5 4;
+    stroke: red; }
+  #story label::after {
+    content: '';
+    clear: both;
+    display: block; }
+  #story label {
+    width: 100%;
+    font-weight: bold;
+    display: block;
+    margin: 0 -10px;
+    padding: 5px 10px; }
+  #story label input, #story label select {
+    float: right; }
+  #story label:nth-child(odd) {
+    background-color: rgba(255, 255, 255, 0.3); }
+  #story #msg {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 30%;
+    max-height: 100%;
+    overflow-y: auto; }
+    #story #msg .msg__info, #story #msg .directions > div {
+      padding: 10px;
+      margin-bottom: 10px;
+      background: lightgray; }
+  #story #nodes g:hover circle,
+  #story .selectedMsg circle {
+    stroke: lightgreen;
+    stroke-width: 8; }
+  #story .controlDown #nodes g:hover circle,
+  #story .secondaryMsg circle {
+    stroke: lightgreen;
+    stroke-width: 5;
+    stroke-dasharray: 10 3; }
+  #story .condition h4 {
+    text-align: center; }
+  #story .condition + .condition::before {
+    content: "OR";
+    display: block;
+    border-bottom: solid 2px;
+    height: 10px;
+    margin-bottom: 15px;
+    text-align: center;
+    text-shadow: 2px 2px 2px lightgray,-2px 2px 2px lightgray,2px -2px 2px lightgray,-2px -2px 2px lightgray; }
+  #story .condition--add {
+    /* text-align: center; */ }
diff --git a/www/index.html b/www/index.html
index c0b6c33..4e8b5fc 100644
--- a/www/index.html
+++ b/www/index.html
@@ -46,6 +46,7 @@
 				<div id="btn-save" class="btn">Save</div>
 				<div id="btn-addMsg" class="btn">Create message</div>
 			</div>
+			<div id="msg"></div>
 			<svg id='graph' viewbox="0 0 1280 1024"
 				preserveAspectRatio="xMidYMid">
 	            <defs>
diff --git a/www/scss/styles.scss b/www/scss/styles.scss
index f6753c6..0cb1bcc 100644
--- a/www/scss/styles.scss
+++ b/www/scss/styles.scss
@@ -1,5 +1,5 @@
 body{
-	font-family: sans-serif;
+	font-family: "Noto Sans", sans-serif;
 	margin: 0;
 }
 
@@ -45,20 +45,25 @@ body{
 		h1{
 			text-align: center;
 			margin: 0;
+			font-weight: normal;
 		}
 	
-		&.hugvey--on{
+// 		&.hugvey--on{
 			h1 {
 			    position: absolute;
 			    left: 5px;
 			    top: 5px;
 			}
-		}
+// 		}
 		
 		&.hugvey--off{
 			background-image: linear-gradient(to top, #575d74, #3572a5);
-			h1::after{
-				content: '[off]'
+			&::after{
+				content: 'disconnected';
+				font-style: italic;
+				color: gray;
+				text-align:center;
+// 				font-size: 30pt;
 			}
 		}
 	}
@@ -76,5 +81,102 @@ body{
 	svg#graph{
 		width: 100%;
 		height: 100%;
+		cursor: grab;
+		&:active{
+            cursor: grabbing;
+        }
 	}
+
+    circle{
+        cursor: pointer;
+        fill: rgb(119, 97, 142);
+    }
+    .startMsg circle{
+        fill: lightseagreen;
+    }
+    .endMsg circle{
+        fill: lightslategray;
+    }
+
+    .orphanedMsg{
+        fill: lightcoral;
+    }
+    text{
+        text-anchor: middle;
+        font-size: 11pt;
+        font-family: sans-serif;
+        fill: white;
+    }
+    line{
+        marker-end: url('#arrowHead');
+        stroke-width: 2px;
+        stroke: black;
+    }
+    line.link--noconditions{
+        stroke-dasharray: 5 4;
+        stroke: red;
+    }
+    label::after {
+        content: '';
+        clear: both;
+        display: block;
+    }
+    label{
+        width:100%;
+        font-weight:bold;
+        display: block;
+        margin: 0 -10px;
+        padding: 5px 10px;
+    }
+    label input,label select{
+        float: right;
+    }
+    label:nth-child(odd){
+        background-color: rgba(255,255,255,0.3);
+    }
+
+    #msg{
+        position: absolute;
+        top:0;
+        right:0;
+        width: 30%;
+        max-height:100%;
+        overflow-y: auto;
+        
+        .msg__info, .directions > div{
+        	padding: 10px;
+            margin-bottom: 10px;
+            background:lightgray;
+        }
+    }
+
+     #nodes g:hover circle,
+    .selectedMsg circle {
+        stroke: lightgreen;
+        stroke-width: 8;
+    }
+
+    .controlDown #nodes g:hover circle,
+    .secondaryMsg circle {
+        stroke: lightgreen;
+        stroke-width: 5;
+        stroke-dasharray: 10 3;
+    }
+
+    .condition h4{
+        text-align: center;
+    }
+    .condition + .condition::before {
+        content: "OR";
+        display: block;
+        border-bottom: solid 2px;
+        height: 10px;
+        margin-bottom: 15px;
+        text-align: center;
+        text-shadow: 2px 2px 2px lightgray,-2px 2px 2px lightgray,2px -2px 2px lightgray,-2px -2px 2px lightgray;
+
+    }
+    .condition--add{
+        /* text-align: center; */
+    }
 }
\ No newline at end of file