diff --git a/web/app/assets/javascripts/accounts_audio_profile.js b/web/app/assets/javascripts/accounts_audio_profile.js
index b174689bc..a588452e5 100644
--- a/web/app/assets/javascripts/accounts_audio_profile.js
+++ b/web/app/assets/javascripts/accounts_audio_profile.js
@@ -30,21 +30,38 @@
 
     function populateAccountAudio() {
 
-      // load Audio Driver dropdown
-      var devices = context.jamClient.TrackGetDevices();
+      var badAudioConfigs = [];
+      var allAudioConfigs = context.jamClient.FTUEGetAllAudioConfigurations();
+      var goodAudioConfigs = context.jamClient.FTUEGetGoodAudioConfigurations();
 
+      for (var i=0; i < allAudioConfigs.length; i++) {
+        console.log("allAudioConfigs[i]=%o", allAudioConfigs[i]);
+        if ($.inArray(allAudioConfigs[i], goodAudioConfigs) === -1) {
+          console.log("pushing %o onto badAudioConfigs", allAudioConfigs[i]);
+          badAudioConfigs.push(allAudioConfigs[i]);
+        }
+      }
+
+      // render CONNECTED device profiles
       var options = {
-        devices: devices
+        configurations: goodAudioConfigs,
+        valid: 1
       }
 
       var template = context._.template($('#template-account-audio').html(), options, {variable: 'data'});
-
       appendAudio(template);
 
+      // render DISCONNECTED device profiles
+      options = {
+        configurations: badAudioConfigs,
+        valid: 0
+      }
+      template = context._.template($('#template-account-audio').html(), options, {variable: 'data'});
+      appendAudio(template);
     }
 
     function appendAudio(template) {
-      $('#account-audio-content-scroller table tbody').replaceWith(template);
+      $('#account-audio-content-scroller table tbody').append(template);
     }
 
     function resetForm() {
diff --git a/web/app/assets/stylesheets/client/account.css.scss b/web/app/assets/stylesheets/client/account.css.scss
index 341969dac..35beafe14 100644
--- a/web/app/assets/stylesheets/client/account.css.scss
+++ b/web/app/assets/stylesheets/client/account.css.scss
@@ -162,7 +162,13 @@
     }
   }
 
+  tr.invalid-profile {
+    background-color:red;
+  }
 
+  img.invalid-profile {
+    vertical-align:middle;
+  }
 
   .button-grey {
     margin-right:6px;
diff --git a/web/app/views/clients/_account_audio_profile.html.erb b/web/app/views/clients/_account_audio_profile.html.erb
index c16a0394b..9470b27a2 100644
--- a/web/app/views/clients/_account_audio_profile.html.erb
+++ b/web/app/views/clients/_account_audio_profile.html.erb
@@ -34,25 +34,28 @@
 
           </tbody>
         </table>
-        <br clear="all" />
         <div class="left"><a href="#" data-purpose="add-profile" class="button-orange">ADD NEW PROFILE</a></div><div class="right"><a href="javascript:history.go(-1)" class="button-grey">BACK</a></div>
       </div>
+      <br clear="all" />
+      <br clear="all" />
+      <br clear="all" />
+      <br clear="all" />
+      <div class="ml35">
+        <img src="/assets/content/icon_alert_big.png" class="invalid-profile" width="15" height="15" /> &mdash; INVALID CONFIGURATION OR DEVICE NOT CONNECTED
+      </div>
     </div>
   </div>
   <!-- end content scrolling area -->
 </div>
 
 <script type="text/template" id="template-account-audio">
-<tbody>
-      {% var keys = Object.keys(data.devices); %}
-      {% for (var i = 0; i < keys.length; i++) { %}
-          <tr>
-            <td>{{data.devices[keys[i]]}}</td>
-            <td class="actions"><a href="#" data-id="{{keys[i]}}" data-purpose="delete-audio-profile" class="button-orange">DELETE</a></td>
-          </tr>
-      {% } %}
-
-          </tbody>
+  {% var configs = data.configurations; %}
+  {% for (var i = 0; i < configs.length; i++) { %}
+      <tr>
+        <td>{{configs[i]}} &nbsp; {% if (data.valid === 0) { %} <img src="/assets/content/icon_alert_big.png" width="15" height="15" class="invalid-profile" /> {% } %}</td>
+        <td class="actions"><a href="#" data-id="{{configs[i]}}" data-purpose="delete-audio-profile" class="button-orange">DELETE</a></td>
+      </tr>
+  {% } %}
 
 </script>