diff --git a/app/assets/javascripts/fakeJamClient.js b/app/assets/javascripts/fakeJamClient.js
index 883acab7b..dc3b1115a 100644
--- a/app/assets/javascripts/fakeJamClient.js
+++ b/app/assets/javascripts/fakeJamClient.js
@@ -77,16 +77,29 @@
         // Session Functions
         function SessionAddTrack() {}
         function SessionGetControlState(mixerIds) {
+            var groups = [0, 2, 7, 9];
+            var names = [
+                "FW AP Multi",
+                "FW AP Multi",
+                "",
+                ""
+            ];
+            var clientIds = [
+                "",
+                "",
+                "3933ebec-913b-43ab-a4d3-f21dc5f8955b",
+                ""
+            ];
             var response = [];
             for (var i=0; i<mixerIds.length; i++) {
                 response.push({
-                    client_id: "",
-                    group_id: 2,
+                    client_id: clientIds[i],
+                    group_id: groups[i],
                     id: mixerIds[i],
                     master: true,
                     monitor: true,
                     mute: false,
-                    name: "FW AP Multi",
+                    name: names[i],
                     range_high: 20,
                     range_low: -80,
                     record: true,
@@ -98,7 +111,12 @@
             return response;
         }
         function SessionGetIDs() {
-            return ["FW AP Multi_0_10000", "FW AP Multi_2_10200"];
+            return [
+                "FW AP Multi_0_10000",
+                "FW AP Multi_2_10200",
+                "User@208.191.152.98#",
+                "User@208.191.152.98_*"
+            ];
         }
         function SessionRegisterCallback(callbackName) {
             eventCallbackName = callbackName;
diff --git a/app/assets/javascripts/session.js b/app/assets/javascripts/session.js
index 555946bd4..053fa1bfe 100644
--- a/app/assets/javascripts/session.js
+++ b/app/assets/javascripts/session.js
@@ -16,6 +16,14 @@
         var currentMixerRangeMin = null;
         var currentMixerRangeMax = null;
 
+        var defaultParticipant = {
+            user: {
+                first_name: 'Unknown',
+                last_name: 'User',
+                photo_url: null
+            }
+        };
+
         // Replicate the Channel Group enum from C++
         var ChannelGroupIds = {
             0: "MasterGroup",
@@ -36,6 +44,35 @@
         // Group 3 is my local voice chat.
         // Group 4 is media files -- for sure for me locally, possibly from others?
 
+        // Results for a live session where David joined my session.
+        // P2P message from my client to Davids (JamServer.js:121)
+        // Events fired:
+        // add,User@208.191.152.98#,0  (session.js:233)
+        // add,User@208.191.152.98_*,0
+        // add,User@208.191.152.98#,0
+        // add,User@208.191.152.98_*,0
+        // jamkazam.js:50 -- various PEER_MESSAGE here and there
+        // jamkazam.js:50 - USER_JOINED_MUSIC_SESSION (session_id, user_id, username: "David Wilson")
+        // my session refreshed (refreshSession.js:39) with 2 participants
+        // more PEER_MESSAGE
+        // Mixers updated (session.js:97)
+        // 4 now (instead of 2). New ones:
+        // client_id: David's Client Id
+        // group_id: 7
+        // id: User@208.191.152.98#
+        // volume_left: 0
+        // volume_right: 0
+        //
+        // client_id: ""
+        // group_id: 9
+        // id: User@208.191.152.98_*
+        // volume_left: 12
+        // volume:right: 15
+        //
+        // more add,User@208.191.152.98#,0 events.
+        //
+        // Eventually, Socket to server closed. (JamServer.js:86)
+
         function beforeShow(data) {
             sessionId = data.id;
         }
@@ -46,8 +83,9 @@
             context.jamClient.SessionRegisterCallback("JK.HandleBridgeCallback");
             $.ajax({
                 type: "GET",
-                url: "/api/sessions/" + sessionId
-            }).done(updateSession);
+                url: "/api/sessions/" + sessionId,
+                success: updateSession
+            });
         }
 
         function beforeHide(data) {
@@ -76,9 +114,6 @@
                     }).done(function(user) {
                         callCount -= 1;
                         users[user.id] = user;
-                        // We'll be using our own photo url instead of gravatar.
-                        //var hash = context.JK.calcMD5(user.email);
-                        //users[user.id].photo_url = 'http://www.gravatar.com/avatar/' + hash;
                     });
                 }
             });
@@ -98,68 +133,62 @@
 
         function renderSession() {
             _updateMixers();
+            _fixClientIds();
             _renderTracks();
         }
 
         // Get the latest list of underlying audio mixer channels
         function _updateMixers() {
             var mixerIds = context.jamClient.SessionGetIDs();
-            mixers = context.jamClient.SessionGetControlState(mixerIds);
+            var holder = $.extend(true, {}, {mixers: context.jamClient.SessionGetControlState(mixerIds)});
+            mixers = holder.mixers;
         }
 
-        // Given a clientId, return a dictionary of mixer ids which
-        // correspond to that client's tracks
-        // TODO - this is hard-coded. Need fix from Nat
-        function _inputMixerForClient(clientId) {
-            // Iterate over the mixers, but simply return the first
-            // mixer in the AudioInputMusicGroup
-            var mixer = null;
-            for (var i=0; i<mixers.length; i++) {
-                mixer = mixers[i];
-                if (mixer.group_id === 2) {
-                    return mixer.id;
+        function _fixClientIds() {
+            // Set the client_id of all the mixers that are in my local groups
+            for (var i=0; i< mixers.length; i++) {
+                if (mixers[i].group_id === 2) {
+                    mixers[i].client_id = app.clientId;
                 }
             }
-            return null; // no audio input music mixers.
+        }
+
+        function _participantForClientId(clientId) {
+            var foundParticipant = null;
+            $.each(session.participants, function(index, participant) {
+                if (participant.client_id === clientId) {
+                    foundParticipant = participant;
+                }
+            });
+            return foundParticipant; // no matching participant
         }
 
         function _renderTracks() {
-            var participantCount = 0;
-            var inputMixer = null;
-            $.each(session.participants, function(index, value) {
-                if (!(this.client_id in tracks)) {
-                    var user = users[this.user.id];
-                    // TODO - handle multiple tracks for one user
-                    inputMixer = _inputMixerForClient(this.client_id);
+            $.each(mixers, function(index, mixer) {
+                // Only handle local music input and peer music here.
+                if (mixer.group_id === 2 || mixer.group_id === 7) {
+                    var participant = _participantForClientId(mixer.client_id);
+                    if (!(participant)) {
+                        participant = defaultParticipant;
+                    }
+                    var name = participant.user.name;
+                    if (!(name)) {
+                        name = participant.user.first_name + ' ' + participant.user.last_name;
+                    }
                     var trackData = {
-                        clientId: this.client_id,
-                        name: user.first_name + ' ' + user.last_name,
+                        clientId: mixer.client_id,
+                        name: name,
                         part: "Keyboard",      // TODO - need this
-                        avatar: user.photo_url,
+                        avatar: participant.user.photo_url,
                         latency: "good",
                         vu: 0.0,
                         gain: 0.5,
                         mute: false,
-                        mixerId: inputMixer
+                        mixerId: mixer.id
                     };
                     _addTrack(trackData);
                 }
             });
-            // Trim out any participants who are no longer in the session.
-            for (var clientId in tracks) {
-                var hasLeftSession = true;
-                for (var i=0; i<session.participants.length; i++) {
-                    var participantId = session.participants[i].client_id;
-                    if (participantId === clientId) {
-                        hasLeftSession = false;
-                        break;
-                    }
-                }
-                if (hasLeftSession) {
-                    $('[client-id="' + clientId + '"]').remove();
-                    delete tracks[clientId];
-                }
-            }
         }
 
         // Given a mixerID and a value between 0.0-1.0,
@@ -196,11 +225,15 @@
         }
 
         function _addTrack(trackData) {
+            var $destination = $('#session-mytracks-container');
+            if (trackData.clientId !== app.clientId) {
+                $destination = $('#session-livetracks-container');
+            }
             trackData["left-vu"] = $('#template-vu').html();
             trackData["right-vu"] = trackData["left-vu"];
             var template = $('#template-session-track').html();
             var newTrack = context.JK.fillTemplate(template, trackData);
-            $('#session-mytracks-container').append(newTrack);
+            $destination.append(newTrack);
             tracks[trackData.clientId] = new context.JK.SessionTrack(trackData.clientId);
         }
 
diff --git a/app/views/clients/_session.html.erb b/app/views/clients/_session.html.erb
index e21dfe634..1cbb7e3ad 100644
--- a/app/views/clients/_session.html.erb
+++ b/app/views/clients/_session.html.erb
@@ -51,6 +51,22 @@
                 </div> <!-- end session-tracks-scroller -->
             </div> <!-- end session-mytracks -->
 
+            <!-- live tracks -->
+            <div class="session-livetracks">
+                <h2>live tracks</h2>
+
+                <!-- add track button -->
+                <div class="session-add">
+                    <a href="#">
+                        <%= image_tag "content/icon_add.png", {:width => 19, :height => 19, :align => "texttop"} %>&nbsp;&nbsp;Invite Musicians
+                    </a>
+                </div>
+
+                <!-- live tracks scroller -->
+                <div class="session-tracks-scroller" id="session-livetracks-container">
+                </div> <!-- end session-tracks-scroller -->
+            </div> <!-- end session-livetracks -->
+
         </div> <!-- end content wrapper -->
     </div> <!-- end of content wrapper -->
     </div> <!-- end of #tracks -->