diff --git a/TODO.md b/TODO.md
index 1e4ad31..df7e531 100644
--- a/TODO.md
+++ b/TODO.md
@@ -41,3 +41,25 @@ Browser
 
 
 Server
+
+----
+
+Decisions:
+
+Team A, B
+Users can come and join at any point
+Best of 5 (or x) rounds
+
+
+Drawer
+- sends instruction/s
+- index, action, coords
+
+Server
+- store the instructions into an array
+- pump them out as and when to subscribers
+
+
+Receiver
+- on log in, subscribe to drawing stream
+- maintain local array of drawing
diff --git a/src/html/guess-word.html b/src/html/guess-word.html
index 268586f..1fb38d4 100644
--- a/src/html/guess-word.html
+++ b/src/html/guess-word.html
@@ -1,5 +1,8 @@
 <h1>Guess word</h1>
 
+<canvas id="myCanvas" width="400" height="300"></canvas>
+<button type="button" id="fetchDrawing">Update</button>
+
 <form id="enterGuess" method="post" action="#">
     <p>Please enter a guess...</p>  
     <input type="text" id="guess"  value="" />
diff --git a/src/js/pictionary.js b/src/js/pictionary.js
index 1bdae27..7583fe7 100644
--- a/src/js/pictionary.js
+++ b/src/js/pictionary.js
@@ -48,9 +48,9 @@
     pages.add('/view-word', '/src/html/view-word.html', function() {
     	$('.word').text(word);
         pad = PIC.createPad('#myCanvas');
-        pad.onChange(function (move) {
+        pad.onStep(function (step) {
             comms.send({
-                draw: move
+                step: step
             });
         })
         comms.connect(function () {
@@ -65,7 +65,9 @@
     });
     
     pages.add('/guess-word', '/src/html/guess-word.html', function() {
-    	$('#guess').val(guess);
+    	pad = PIC.createPad('#myCanvas');
+        
+        $('#guess').val(guess);
     	$('#enterGuess').submit(function (e) {
     		e.preventDefault();
     		guess = $('#guess').val();
@@ -76,6 +78,11 @@
     			$('#feedback').text('Please try again...');
     		}
     	});
+        
+        $('#fetchDrawing').click(function () {
+            comms.send('Can i have a drawing please?')
+        
+        })
     });
     
     pages.add('/watch-team', '/src/html/watch-team.html');   
@@ -96,20 +103,21 @@
     
     comms.message(function (data) {
         if (data.users) {
-        console.log('We got a message!', data)
             var users = '';
             for (u in data.users) {
                 users += data.users[u] + ' ';
             }
             $('#others').text(users)
         }
-        
+        if (data.step) {
+            pad.step(data.step);
+        }
         if (data.teams) {
             teams = data.teams;
             pages.open('/overview')
         }
         if (data.draw) {
-            pad.add(data.draw);
+            //pad.add(data.draw);
         }
     })
     
diff --git a/src/js/sketchpad.js b/src/js/sketchpad.js
index cdade04..066a014 100644
--- a/src/js/sketchpad.js
+++ b/src/js/sketchpad.js
@@ -1,122 +1,126 @@
 var PIC = window.PIC || {};
 
 
-PIC.createPad = function (padSelector) {
+PIC.createPad = function (selector) {
     
-    var $canvas = $(padSelector),
-        $doc = $(document),
-        context = $canvas[0].getContext('2d'),
-        penX = 0,
-        penY = 0,
-        isPenDown = false,
-        path = {},
-        onChangeCallbacks = [];
-   
-    $canvas.clear = function() {
-        context.clearRect(0,0,10000,10000);
-    };
+    var pen, pad, callbacks;
     
-    // The path inst is the array that stores the pad's drawing history    
-    path.inst = [];
+    callbacks = [];
     
-    // Add instruction to the pad. Accepted values: 'up', 'down', 'move, x, y'
-    path.add = function (word, x, y) {
-        var ins = {}
-        ins.ins = word;
-        if (x && y) {
-            ins.x = x;
-            ins.y = y;
-        }
-        this.inst.push(ins);
-        this.render();
+    pen = (function () {
         
-        for (var i=0; i<onChangeCallbacks.length; i++) {
-            onChangeCallbacks[i](arguments)  
-        }
-    };
-    
-    // Clear the canvas and redraw the pad's entire sketch history
-    path.render = function () {
-        var i, len, ins;
+        var $canvas, $doc, context, history, padX, padY, isDown, step;
+        
+        $canvas = $(selector).first();
+        $doc = $(document);
+        history = [];
+        padX = $canvas.offset().left;
+        padY = $canvas.offset().top;
+        isDown = false;
+        context = $canvas[0].getContext('2d');
+        step = function (actionName) {
+            return function (x, y) {
+                var newStep = {}, i;
+                
+                newStep.action = actionName;
+                if (x && y) {
+                    newStep.x = x;
+                    newStep.y = y;
+                }
+                history.push(newStep);
+                pen.draw();
+                
+                                
+                for (i = 0; i < callbacks.length; i++) {
+                    callbacks[i](newStep);  
+                }
+            };
+        };
+        
+        // Setup
+        context.lineWidth = 4;
+        context.lineCap = 'round';
+        context.lineJoin = 'round';
+        
+        // Events
+        $canvas.mousedown(function (e) {
+            pen.down();
+            pen.move(e.pageX - padX, e.pageY - padY - 0.001);
+            pen.move(e.pageX - padX, e.pageY - padY);
             
-        $canvas.clear();
+            $doc.bind('mousemove', function (e) {
+                pen.move(e.pageX - padX, e.pageY - padY);
+            });
+        });
+        $doc.mouseup(function (e) {
+            pen.up();
+            $doc.unbind('mousemove');
+        });
         
-        for (i=0, len=this.inst.length; i < len; i++) {
-            ins = this.inst[i]
-            switch( ins.ins ) {
-                case 'down':
-                    context.beginPath();
-                    isPenDown = true;
-                    break;
-                case 'move':
-                    if (isPenDown) {
-                        context.lineTo(ins.x, ins.y);                        
-                    } else {
-                        context.moveTo(ins.x, ins.y);
+        return {
+            up: step('up'),
+            down: step('down'),
+            move: step('move'),
+            clear: function () {
+                context.clearRect(0, 0, 10000, 10000); 
+            },
+            draw: function () {
+                var i, step, x, y;
+                isDown = false;
+                pen.clear();
+                
+                for (i = 0; i < history.length; i++) {
+                    step = history[i];
+                    switch (step.action) {
+                        case 'down':
+                            context.beginPath();
+                            isDown = true;
+                            break;
+                        case 'move':
+                            context[isDown ? 'lineTo' : 'moveTo'](step.x, step.y);
+                            break;
+                        case 'up':
+                            context.stroke();
+                            isDown = false;
+                            break;
                     }
-                    break;
-                case 'up':
+                }
+                if (isDown) {
                     context.stroke();
-                    isPenDown = false;
-                    break;
+                }
+            },
+            history: function (newHistory) {
+                if (newHistory) {
+                    history = newHistory
+                }
+                return history;
             }
-        }
-        if (isPenDown) {
-            context.stroke();
-        }
-    };
-    
-    path.clear = function () {
-        this.inst = [];
-    };
+        };    
+    }());
     
-    // Setup the line styling    
-    context.lineWidth = 4;
-    context.lineCap = 'round';
-    context.lineJoin = 'round';
     
-    // Mouse events
-    $canvas.mousedown(function (e) {
-        var coords = $canvas.offset();
-        path.add('move', e.pageX - coords.left, e.pageY - coords.top);
-        path.add('down');
-        $doc.bind('mousemove', function (e) {
-            coords = $canvas.offset();
-            path.add('move', e.pageX - coords.left, e.pageY - coords.top);
-        })
-    })
-    $doc.mouseup(function (e) {
-        path.add('up');
-        $doc.unbind('mousemove');
-    })
-    
-    
-    // Return the sketchpad's API
-    return {
-        penDown: function (x, y) {
-            path.add('down', x, y);
-            path.render();
-        },
-        penUp: function (x, y) {
-            path.add('up');
-            path.render();
-        },
-        moveTo: function (x, y) {
-            path.add('move', x, y);
-            path.render();
-        },
-        reset: function () {
-            $canvas.clear();
-            path.clear();
-        },
-        getPath: function () {
-            return path.inst;
-        },
-        onChange: function (callback) {
-            // need to work out how to, on change, to send that info to other
-            // users's pads.
-            onChangeCallbacks.push(callback);
-        }
-    }
-}
-   
\ No newline at end of file
+    pad = (function () {
+        
+        return {
+            history: function () {
+                
+            },
+            step: function (step) {
+                pen.history(pen.history().concat([step]));
+                pen.draw();
+            },
+            clear: function () {
+                
+            },
+            onStep: function (callback) {
+                callbacks.push(callback);
+            },
+            reset: function () {
+                pen.clear();
+                pen.history([]);
+            }
+        };
+    }());
+
+    return pad;
+};
\ No newline at end of file
diff --git a/src/server/sockets.js b/src/server/sockets.js
index 4c2b9f4..5abcdae 100644
--- a/src/server/sockets.js
+++ b/src/server/sockets.js
@@ -6,6 +6,7 @@ var io = require('socket.io'),
         b: {}
     },
     users = {},
+    drawing = [];
     getCookies = function (str) {
         var cookies = [];
         str.split(';').forEach(function( cookie ) {
@@ -22,6 +23,7 @@ exports.start = function (server) {
     socket.on('connection', function (client) {
     
         client.on('message', function (data) {
+            
             var cookies = {},
                 uid;
                 
@@ -50,7 +52,17 @@ exports.start = function (server) {
                 })
             }
             
-            socket.broadcast(data)
+            if (data.chat) {
+                socket.broadcast(data)
+            }
+            
+            if (data.step) {
+                socket.broadcast(data, client.sessionId);
+            }
+            
+            if (data === 'Can i have a drawing please?') {
+                client.send({drawing: drawing})
+            }
     
         }) 
         client.on('disconnect', function () {} )