diff --git a/.travis.yml b/.travis.yml
index 78b0847..ec496be 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -5,3 +5,6 @@ before_script:
   - npm install -g bower
   - bower install
 script: gulp
+
+
+
diff --git a/package.json b/package.json
index b3e7434..5361458 100644
--- a/package.json
+++ b/package.json
@@ -22,22 +22,23 @@
   "devDependencies": {
     "browserify": "^10.2.4",
     "debowerify": "^1.3.1",
-    "gulp": "~3.8.11",
+    "gulp": "^3.9.0",
     "gulp-browserify": "~0.5.1",
     "gulp-clean": "^0.3.1",
     "gulp-flatten": "0.0.4",
     "gulp-gh-pages": "^0.5.1",
     "gulp-livereload": "~3.8.0",
     "gulp-rename": "~1.2.2",
-    "gulp-sass": "~1.3.3",
+    "gulp-sass": "^2.0.4",
     "reactify": "~1.1.0"
   },
   "dependencies": {
     "backbone": "^1.2.0",
     "events": "~1.0.2",
+    "h-audio": "*",
     "object-assign": "~2.0.0",
+    "peerjs": "~0.3.14",
     "react": "^0.13.3",
-    "underscore": "^1.8.3",
-    "h-audio": "*"
+    "underscore": "^1.8.3"
   }
 }
diff --git a/src/index.html b/src/index.html
index edea323..cfa556f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,6 +8,9 @@
         <link rel="stylesheet" type="text/css" href="css/styles.css"/>
 	</head>
 	<body>
+        <a id="connectToMe">Connect link </a>
+        <ul id="connectedTo">
+        </ul>
         <div id="harmony"></div>
 	</body>
 	<footer>
diff --git a/src/js/app.jsx b/src/js/app.jsx
index 581c2e5..7fda714 100644
--- a/src/js/app.jsx
+++ b/src/js/app.jsx
@@ -1,6 +1,7 @@
 var $ = require("jquery");
 var h = require("h-audio");
 var React = require("react");
+var p2p = require("./p2p.js");
 var player = require("./player.js");
 var keys = require("./keyboard/keys.js");
 var Board = require("./components/board.jsx");
@@ -16,12 +17,24 @@ var keyboardInitialize = function() {
 
 var fun = function() {
 	window.h = h;
+    window.p2p = p2p;
+};
+
+var peerSetup = function(id) {
+    $("#connectToMe").attr("href", window.location.href + "?" + id);
+    $("#connectToMe").append(id);
+    var peerId = window.location.search.slice(1);
+    if(peerId.length) p2p.connect(peerId);
+    p2p.addReceiver(function(data) {
+        console.log(data);
+    });
 };
 
 var initialize = function() {
 	reactInitialize();
 	keyboardInitialize();
 	player.start();
+    p2p.open(peerSetup);
 	fun();
 };
 
diff --git a/src/js/components/configuration.jsx b/src/js/components/configuration.jsx
index e2adf29..1896cae 100644
--- a/src/js/components/configuration.jsx
+++ b/src/js/components/configuration.jsx
@@ -21,7 +21,7 @@ var polymerInitialize = function() {
 
 var Configuration = React.createClass({
 	getInitialState: function() {
-		return h.configuration();
+		return h.configuration;
 	},
 
 	componentDidMount: function() {
@@ -30,27 +30,27 @@ var Configuration = React.createClass({
 
 	waveTypeChange: function(e) {
 		h.configure({ wave: { type: e.target.value, data: null }});
-		this.setState(h.configuration());
+		this.setState(h.configuration);
 	},
 
 	gainChange: function(e) {
 		h.configure({ gain: e.target.value / 500 });
-		this.setState(h.configuration());
+		this.setState(h.configuration);
  	},
 
  	attackChange: function(e) {
  		h.configure({ attack: e.target.value / 500 });
- 		this.setState(h.configuration());
+ 		this.setState(h.configuration);
  	},
 
  	releaseChange: function(e) {
  		h.configure({ release: e.target.value / 500 });
- 		this.setState(h.configuration());
+ 		this.setState(h.configuration);
  	},
 
  	waveTableChange: function(e) {
- 		h.configure({ wave: { type: "custom", data: wavetablenames[e.target.value]}});
- 		this.setState(h.configuration());
+ 		h.configure({ wave: { data: wavetablenames[e.target.value]}});
+ 		this.setState(h.configuration);
  	},
 
 	render: function() {
@@ -103,4 +103,4 @@ var Configuration = React.createClass({
 	}
 });
 
-module.exports = Configuration;
\ No newline at end of file
+module.exports = Configuration;
diff --git a/src/js/p2p.js b/src/js/p2p.js
new file mode 100644
index 0000000..269085d
--- /dev/null
+++ b/src/js/p2p.js
@@ -0,0 +1,122 @@
+var Peer = require("peerjs");
+
+var peer;
+var peerId;
+var conns = [];
+var receivers = [];
+
+var open = function(callback) {
+    peer = new Peer({ key: "ei56ntieg54b1emi" });
+
+    peer.on("open", function(id) {
+        peerId = id;
+        console.log(id);
+        callback(id);
+    });
+
+    peer.on("connection", setup);
+};
+
+var connectOthers = function(ids) {
+    ids.forEach(function(id) {
+        var alreadyConnected = conns.find(function(cn) {
+            return cn.peer === id;
+        });
+
+        if (!alreadyConnected && peerId !== id) {
+            connect(id);
+        }
+    });
+};
+
+var receiveData = function(conn) {
+    conn.on("data", function(data) {
+        if(data.type === "request") {
+            if(data.cmd === "peers") {
+                console.log("sending peers");
+                sendPeers(conn);
+            }
+        }
+
+        if(data.type === "response") {
+            console.log("connecting to peers");
+            connectOthers(data.peerIds);
+        }
+
+        receivers.forEach(function(rcv) {
+            rcv(data);
+        });
+    });
+};
+
+var setup = function(conn) {
+    conn.on("open", function() {
+        receiveData(conn);
+        conns.push(conn);
+        requestPeers(conn);
+    });
+};
+
+var requestPeers = function(conn) {
+    conn.send({
+        type: "request",
+        cmd: "peers"
+    });
+};
+
+var sendPeers = function(conn) {
+    var peerIds = conns.map(function(cn) {
+        return cn.peer;
+    });
+
+    conn.send({
+        type: "response",
+        peerIds: peerIds
+    });
+};
+
+
+var connect = function(id) {
+    setup(peer.connect(id));
+};
+
+var sender = function(data) {
+    conns.forEach(function(conn) {
+        conn.send(data);
+    });
+};
+
+var getId = function() {
+    return peerId;
+};
+
+var addReceiver = function(receiver) {
+    receivers.push(receiver);
+};
+
+var getActive = function() {
+    return conns;
+};
+
+module.exports = {
+    id: getId,
+    open: open,
+    connect: connect,
+    active: getActive,
+    send: sender,
+    addReceiver: addReceiver
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/js/state/buttonmanager.js b/src/js/state/buttonmanager.js
index 7256d93..3d4cd3d 100644
--- a/src/js/state/buttonmanager.js
+++ b/src/js/state/buttonmanager.js
@@ -1,4 +1,5 @@
 var _ = require("underscore");
+var p2p = require("../p2p.js");
 var assign = require("object-assign");
 var map = require("./data/buttonmap.js");
 var colors = require("./data/colors.js");
@@ -13,11 +14,17 @@ var initialize = _.once(function() {
 	});
 });
 
-var playNote = function(noteRow) {
+var playNote = function(data) {
+    var noteRow = map.find(function(note) {
+        return note.key === data.key;
+    });
 	noteRow.on = true;
 };
 
-var stopNote = function(noteRow) {
+var stopNote = function(data) {
+    var noteRow = map.find(function(note) {
+        return note.key === data.key;
+    });
 	delete noteRow.on;
 };
 
@@ -63,7 +70,13 @@ var ButtonManager = assign({}, emitter.prototype, {
 	}
 });
 
-ButtonManager.dispatch = function(actionName, data) {
+p2p.addReceiver(function(msg) {
+    if(msg.type === "button-dispatch") {
+        dispatch(msg.actionName, msg.data);
+    }
+});
+
+var dispatch = function(actionName, data) {
 	var ACTION_MAP = {
 		"play-note": playNote,
 		"stop-note": stopNote,
@@ -75,4 +88,15 @@ ButtonManager.dispatch = function(actionName, data) {
 	ButtonManager.emitChange();
 };
 
+
+ButtonManager.dispatch = function(actionName, data) {
+    p2p.send({
+        type: "button-dispatch",
+        actionName: actionName,
+        data: data
+    });
+
+    dispatch(actionName, data);
+};
+
 module.exports = ButtonManager;
