diff --git a/chromesoul.css b/chromesoul.css
index 1535a61..19672d7 100644
--- a/chromesoul.css
+++ b/chromesoul.css
@@ -1,3 +1,37 @@
+#l-lst {
+    position: fixed;
+    right: 0;
+    top: 0;
+    padding: 0 5px 0 5px;
+    width: 200px;
+    height: 100%;
+    border-left: 1px solid #aaa;
+}
+
+#l-lst > h2 {
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    font-size: 1em;
+}
+
+#contact-lst {
+    margin: 15px 0 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+#contact-lst > li {
+    margin: 5px 0 0 0;
+    padding: 5px;
+    border: 1px solid #aaa;
+}
+
+#r-lst {
+    padding-right: 210px;
+    min-width: 400px;
+}
+
 #tab-lst {
     margin: 0;
     padding: 0;
@@ -48,13 +82,17 @@
     overflow-y: scroll;
 }
 
-.chat-input {
-    margin: 5px 0 0 0;
+#add-contact, .chat-input {
     padding: 0;
-    height: 20px;
-    width: 100%;
     border-style: none;
     outline: 1px solid #aaa;
+    width: 100%;
+    height: 20px;
+    margin: 5px 0 0 0;
+}
+
+#add-contact:focus, .chat-input:focus {
+    outline-offset: 0;
 }
 
 .chat-input-wrapper {
@@ -64,10 +102,6 @@
     padding-left: 24px;
 }
 
-.chat-input:focus {
-    outline-offset: 0;
-}
-
 #tab-lst > #tab-config {
     background-image: url('img/preferences.png');
     background-repeat: no-repeat;
diff --git a/chromesoul.html b/chromesoul.html
index e57f623..a4b6b9c 100644
--- a/chromesoul.html
+++ b/chromesoul.html
@@ -8,23 +8,31 @@
   <body>
     <h1>Welcome to chromesoul</h1>
 
-    <ul id="tab-lst">
-      <li id="tab-config"><span>configuration</span></li>
-    </ul>
-    <div id="tab-body-wrapper">
-      <div id="configuration" class="tab-body">
-	Login: <input type="text" id="login" class="opt"><br>
-	Password (socks): <input type="password" id="pwd_socks" class="opt"><br>
-	Enable messages: <input type="checkbox" id="enable_msg" class="opt" checked="checked"><br>
-	<button id="save">Save</button> <span id="status"></span>
-      </div>
-    </div>
-
     <p>
       Status: <span id="status_txt"></span><br>
       <button id="reconnect">Reconnect</button>
     </p>
 
+    <div id="l-lst">
+      <h2>Contacts</h2>
+      <input type="text" id="add-contact" placeholder="New contact">
+      <ul id="contact-lst"></ul>
+    </div>
+
+    <div id="r-lst">
+      <ul id="tab-lst">
+	<li id="tab-config"><span>configuration</span></li>
+      </ul>
+      <div id="tab-body-wrapper">
+	<div id="configuration" class="tab-body">
+	  Login: <input type="text" id="login" class="opt"><br>
+	  Password (socks): <input type="password" id="pwd_socks" class="opt"><br>
+	  Enable messages: <input type="checkbox" id="enable_msg" class="opt" checked="checked"><br>
+	  <button id="save">Save</button> <span id="status"></span>
+	</div>
+      </div>
+    </div>
+
     <script type="text/javascript" src="third-party/md5-min.js"></script>
     <script type="text/javascript" src="third-party/ab-str.js"></script>
     <script type="text/javascript" src="lib/ns_client.js"></script>
