diff --git a/commander.html b/commander.html
index 4758b80..2ed8cd7 100644
--- a/commander.html
+++ b/commander.html
@@ -3,11 +3,11 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-   <title>MBC rc bootjes - commander</title>
+   <title>MBC rc boatjes - commander</title>
    <style>
       * {
          --background: #000000;
-         --background-second: #444444;
+         --background-second: #222222;
          --foreground: #CCCCCC;
       }
       body {
@@ -29,22 +29,123 @@
 </head>
 <body>
    <div class="login">
-      <h1>Login</h1>
-      <input type="password" />
+      <input id="pass" type="password" value="1234" />
+      <button id="login">login</button>
    </div>
    <main>
-      <div id="bootjes"></div>
+      <div id="boatjes"></div>
       <div id="clients"></div>
    </main>
    <script>
-      var bootjes = document.getElementById('bootjes');
-      var clients = document.getElementById('clients');
+      const passEl = document.getElementById('pass');
+      const loginEl = document.getElementById('login');
+      const boatjesEl = document.getElementById('boatjes');
+      const clientsEl = document.getElementById('clients');
 
-      var connection = new WebSocket('ws://' + "10.254.0.1" + ':8080/', ['mbcRcRf']);
+      // const serverURL = 'ws://10.254.0.1:8080/';
+      const serverURL = 'ws://localhost:8080/';
+
+      var conn = new WebSocket(serverURL, ['mbcRcRf']);
+
+      loginEl.addEventListener('click', login)
+
+      function login(e)
+      {
+         conn.close();
+         conn = new WebSocket(serverURL, ['mbcRcRf']);
+         conn.addEventListener('open', onOpen);
+         conn.addEventListener('message', onMessage);
+      }
+
+      function onOpen(e)
+      {
+         conn.send(passEl.value);
+      }
+
+      function onMessage(e)
+      {
+         console.log("recive: ", e.data);
+         let msg = e.data.split(':')
+         let data = msg[0];
+         msg.splice(0, 1);
+         msg = msg.join(':');
+         switch (data)
+         {
+            case 'boats':
+               addBoats(msg);
+               passEl.parentElement.style.display = 'none';
+               break;
+            case 'clients':
+               addClients(msg);
+               break;
+            default:
+               console.warn('onMessage(): invlid data type (' + data + ')');
+               break;
+         }
+      }
+
+      function reqBoats()
+      {
+         conn.send(passEl.value + ";boats");
+      }
+
+      function addBoats(boats)
+      {
+         boats = boats.split(':');
+         for (let boat in boats)
+         {
+            if (boats[boat] != "")
+            {
+               addBoat(boats[boat]);
+            }
+         }
+      }
 
       function addBoat(boat)
       {
-         boat = boat.split(':')
+         boat = boat.split(';')
+         if (boat.length == 3)
+         {
+            let boatEl = document.createElement("div");
+            boatEl.className = "boat";
+            boatEl.dataset['id'] = boat[0];
+            boatEl.dataset['availible'] = boat[2];
+            boatEl.innerText = boat[1];
+            boatjesEl.append(boatEl);
+         }
+         else
+         {
+            console.warn("addBoat(): incorect number of args (" + boat.length.toString() + "; " + boat.toString() + ")");
+         }
+      }
+
+      function addClients(clients)
+      {
+         clients = clients.split(':');
+         for (let client in clients)
+         {
+            if (clients[client] != "")
+            {
+               addClient(clients[client]);
+            }
+         }
+      }
+
+      function addClient(client)
+      {
+         client = client.split(';')
+         if (client.length == 2)
+         {
+            let clientEl = document.createElement("div");
+            clientEl.className = "client";
+            clientEl.dataset['id'] = client[0];
+            clientEl.innerText = client[0] + " controlls " + client[1];
+            clientsEl.append(clientEl);
+         }
+         else
+         {
+            console.warn("addBoat(): incorect number of args (" + client.length.toString() + "; " + client.toString() + ")");
+         }
       }
    </script>
 </body>
diff --git a/recever.py b/recever.py
index 80e5818..26346e8 100644
--- a/recever.py
+++ b/recever.py
@@ -10,7 +10,8 @@ BOAT_STATE_AVAILABLE = 0
 BOAT_STATE_LOCKED = -1
 
 boats = [
-    { "id": 0, "name": "test boat", "state": BOAT_STATE_AVAILABLE }
+    { "id": 0, "name": "test boat", "state": BOAT_STATE_AVAILABLE },
+    { "id": 1, "name": "varent object", "state": BOAT_STATE_AVAILABLE }
 ]
 
 clients = []
@@ -33,7 +34,7 @@ def sendData(data):
 
 async def echoBoats(client):
     global boats
-    data = ""
+    data = "boats:"
     for boat in boats:
         if (boat['state'] != BOAT_STATE_LOCKED):
             data += str(boat['id']) + ";" + str(boat['name']) + ";"
@@ -45,11 +46,20 @@ async def echoBoats(client):
 
 async def echoLockedBoats(client):
     global boats
-    data = ""
-    for boat in boats:
-        if (boat['state'] == BOAT_STATE_LOCKED):
-            data += str(boat['id']) + ";" + str(boat['name']) + ";locked:"
-    await client['ws'].send(data + '\n')
+    if (client['id'] == adminId):
+        data = "lockedBoats:"
+        for boat in boats:
+            if (boat['state'] == BOAT_STATE_LOCKED):
+                data += str(boat['id']) + ";" + str(boat['name']) + ";locked:"
+        await client['ws'].send(data + '\n')
+
+async def echoClients(client):
+    global clients
+    if (client['id'] == adminId):
+        data = "clients:"
+        for client in clients:
+            data += str(client['id']) + ";" + str(client['boat']) + ":"
+        await client['ws'].send(data + '\n')
 
 async def onMessage(message, client):
     global boats
@@ -76,17 +86,21 @@ async def onMessage(message, client):
         else:
             print("something else: '" + data[1] + "'")
 
-def newClient(message, ws):
+async def newClient(message, ws):
     message = message.split(';')
     client = { "id": message[0], "boat": None, "ws": ws }
     print("new client connected: " + client['id'])
     clients.append(client)
+    if (client['id'] == adminId):
+        await echoBoats(client)
+        await echoLockedBoats(client)
+        await echoClients(client)
     return client
 
 async def run(ws, path):
     client = None
     async for message in ws:
-        client = newClient(message, ws)
+        client = await newClient(message, ws)
         if (client is not None):
             break
 
