diff --git a/app/assets/javascripts/searchResults.js b/app/assets/javascripts/searchResults.js
index 9db735606..860a7e92d 100644
--- a/app/assets/javascripts/searchResults.js
+++ b/app/assets/javascripts/searchResults.js
@@ -14,10 +14,6 @@
         }
 
         function afterShow(data) {
-            // TODO remove me - just showing that you should
-            // have access to the query variable from the search
-            // box.
-            //$('#show-query').text('Query is ' + query);
         }
 
         function search(evt) {
@@ -98,9 +94,8 @@
                 data: '{"friend_id":"' + userId + '"}',
                 processData: false,
                 success: function(response) {
-                    //alert($(this).parent().find('div[user-id=' + userId + '].search-connected'));
+                    // toggle the pre-click and post-click divs
                     $('div[user-id=' + userId + '].search-connected').show();
-                    //$(this).parent().find('div[user-id=' + userId + '].search-result').empty();
                     $('div[user-id=' + userId + '].search-result').hide();
                 },
                 error: app.ajaxError
@@ -122,11 +117,7 @@
         }
 
         function events() {
-            // not sure it should go here long-term, but wiring
-            // up the event handler for the search box in the sidebar.
             $('#searchForm').submit(search);
-
-            $('#btn-connect-friend').on("click", sendFriendRequest);
         }
 
         this.initialize = function() {
diff --git a/app/assets/javascripts/sidebar.js b/app/assets/javascripts/sidebar.js
new file mode 100644
index 000000000..e1ca1e9a0
--- /dev/null
+++ b/app/assets/javascripts/sidebar.js
@@ -0,0 +1,80 @@
+(function(context,$) {
+
+    "use strict";
+
+    context.JK = context.JK || {};
+    context.JK.Sidebar = function(app) {
+        var logger = context.JK.logger;
+
+        function populateFriendsPanel() {
+
+            var url = "/api/users/" + context.JK.currentUserId + "/friends"
+            $.ajax({
+                type: "GET",
+                dataType: "json",
+                contentType: 'application/json',
+                url: url,
+                processData: false,
+                success: function(response) {
+                    $.each(response, function(index, val) {
+
+                        var css = val.online ? '' : 'offline';
+
+                        // fill in template for Connect pre-click
+                        var template = $('#template-friend-panel').html();
+                        var searchResultHtml = context.JK.fillTemplate(template, {
+                            userId: val.id,
+                            cssClass: css,
+                            avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
+                            userName: val.name,
+                            status: val.online ? 'Available' : 'Offline',
+                            extra_info: '',
+                            info_image_url: ''
+                        });
+
+                        $('#sidebar-friend-list').append(searchResultHtml);
+                    });
+
+                    // set friend count
+                    $('#sidebar-friend-count').html(response.length);
+                },
+                error: app.ajaxError
+            });
+
+            return false;
+        }
+
+        function sendFriendRequest(evt) {
+            evt.stopPropagation();
+            var userId = $(this).parent().attr('user-id');
+
+            //$(this).parent().empty();
+
+            var url = "/api/users/" + context.JK.currentUserId + "/friend_requests";
+            $.ajax({
+                type: "POST",
+                dataType: "json",
+                contentType: 'application/json',
+                url: url,
+                data: '{"friend_id":"' + userId + '"}',
+                processData: false,
+                success: function(response) {
+                    // toggle the pre-click and post-click divs
+                    $('div[user-id=' + userId + '].search-connected').show();
+                    $('div[user-id=' + userId + '].search-result').hide();
+                },
+                error: app.ajaxError
+            });
+        }
+
+        function events() {
+            populateFriendsPanel();
+        }
+
+        this.initialize = function() {
+            events();
+        };
+
+    };
+
+})(window,jQuery);
\ No newline at end of file
diff --git a/app/views/api_users/friend_index.rabl b/app/views/api_users/friend_index.rabl
index 511a0d127..cfa21fade 100644
--- a/app/views/api_users/friend_index.rabl
+++ b/app/views/api_users/friend_index.rabl
@@ -1,3 +1,3 @@
 object @user.friends
 
-attributes :id, :first_name, :last_name, :city, :state, :country, :email, :online, :photo_url
\ No newline at end of file
+attributes :id, :first_name, :last_name, :name, :location, :email, :online, :photo_url
\ No newline at end of file
diff --git a/app/views/clients/_sidebar.html.erb b/app/views/clients/_sidebar.html.erb
index 896a10565..6d4ed5f7b 100644
--- a/app/views/clients/_sidebar.html.erb
+++ b/app/views/clients/_sidebar.html.erb
@@ -26,67 +26,10 @@
         </div>
         <div layout-panel="expanded" class="panel expanded">
             <div layout-panel="header" class="panel-header">
-                <h2>friends<div class="badge">4</div></h2>
+                <h2>friends<div id='sidebar-friend-count' class="badge"></div></h2>
             </div>
             <div layout-panel="contents" class="panelcontents">
-                <ul>
-                    <li>
-                        <div class="avatar-small">
-                            <%= image_tag "avatars/avatar_david.jpg" %>
-                        </div>
-                        <div class="friend-name">
-                            David Wilson<br/>
-                            <span class="friend-status">
-                                <a href="#">In Session</a>, started at 12:34 pm
-                            </span>
-                        </div>
-                        <div class="friend-icon">
-                            <%= image_tag "shared/icon_session.png", :width=>24, :height=>24 %>
-                        </div>
-                        <br clear="all" />
-                    </li>
-
-                    <li>
-                        <div class="avatar-small">
-                            <%= image_tag "shared/avatar_creepyeye.jpg" %>
-                        </div>
-                        <div class="friend-name">
-                            Brian Smith<br/>
-                            <span class="friend-status">Available</span>
-                        </div>
-                        <div class="friend-icon"></div>
-                        <br clear="all" />
-                    </li>
-
-                    <li>
-                        <div class="avatar-small">
-                            <%= image_tag "shared/avatar_silverfox.jpg" %>
-                        </div>
-                        <div class="friend-name">
-                            Peter Walker<br/>
-                            <span class="friend-status">
-                                Recording: <a href="#">Seven Trails</a>
-                            </span>
-                        </div>
-                        <div class="friend-icon">
-                            <%= image_tag "sidebar/icon_recording.png", :width=>24, :height=>24 %>
-                        </div>
-                        <br clear="all" />
-                    </li>
-
-                    <li class="offline">
-                        <div class="avatar-small">
-                            <%= image_tag "shared/avatar_saltnpepper.jpg" %>
-                        </div>
-                        <div class="friend-name">
-                            Seth Call<br/>
-                            <span class="friend-status">
-                                Offline
-                            </span>
-                        </div>
-                        <div class="friend-icon"></div>
-                        <br clear="all" />
-                    </li>
+                <ul id="sidebar-friend-list">
                 </ul> 
             </div>
         </div>
@@ -222,3 +165,17 @@
         </div>
     </div>
 </div>
+
+<script type="text/template" id="template-friend-panel">
+    <li class="{cssClass}">
+        <div class="avatar-small"><img src="{avatar_url}" /></div>
+        <div class="friend-name">
+            {userName}<br/>
+            <span class="friend-status">
+                {status} {extra_info}
+            </span>
+        </div>
+        <div class="friend-icon">{info_image_url}</div>
+        <br clear="all" />
+    </li>
+</script>
diff --git a/app/views/clients/index.html.erb b/app/views/clients/index.html.erb
index 695b9ebd4..6f12e48d6 100644
--- a/app/views/clients/index.html.erb
+++ b/app/views/clients/index.html.erb
@@ -72,6 +72,9 @@
             var header = new JK.Header(JK.app);
             header.initialize();
 
+            var sidebar = new JK.Sidebar(JK.app);
+            sidebar.initialize();
+
             var homeScreen = new JK.HomeScreen(JK.app);
             homeScreen.initialize();