diff --git a/web/app/assets/javascripts/accounts_profile_experience.js b/web/app/assets/javascripts/accounts_profile_experience.js
index f3b0443d5..2a212acd5 100644
--- a/web/app/assets/javascripts/accounts_profile_experience.js
+++ b/web/app/assets/javascripts/accounts_profile_experience.js
@@ -8,8 +8,6 @@
     var logger = context.JK.logger;
     var EVENTS = context.JK.EVENTS;
     var api = context.JK.Rest();
-    var userId;
-    var user = {};
     var $screen = $('#account-profile-experience');
     var $scroller = $screen.find('#account-profile-content-scroller');
     var $instrumentSelector = null;
@@ -17,7 +15,6 @@
     var profileUtils = context.JK.ProfileUtils;
 
     function beforeShow(data) {
-        userId = data.id;
     }
 
     function afterShow(data) {
diff --git a/web/app/assets/javascripts/accounts_profile_interests.js b/web/app/assets/javascripts/accounts_profile_interests.js
index 814eb73b0..2edbf5f59 100644
--- a/web/app/assets/javascripts/accounts_profile_interests.js
+++ b/web/app/assets/javascripts/accounts_profile_interests.js
@@ -137,15 +137,23 @@
 
       // Column 3 - misc (play commitment, rates, cowriting purpose)
       $virtualBandCommitment.val(userDetail.virtual_band_commitment);
+      context.JK.dropdown($virtualBandCommitment);
+
       $traditionalBandCommitment.val(userDetail.traditional_band_commitment);
+      context.JK.dropdown($traditionalBandCommitment);
+
       $traditionalTouringOption.val(userDetail.traditional_band_touring ? '1' : '0');
+      context.JK.dropdown($traditionalTouringOption);
+
       $hourlyRate.val(userDetail.paid_sessions_hourly_rate);
       $dailyRate.val(userDetail.paid_sessions_daily_rate);
+      
       $cowritingPurpose.val(userDetail.cowriting_purpose);
+      context.JK.dropdown($cowritingPurpose);
     }
 
-    function bindGenreSelector($btnSelect, $genreList) {
-      $btnSelect.click(function(evt) {
+    function bindGenreSelector(type, $btnSelect, $genreList) {
+      $btnSelect.unbind('click').click(function(evt) {
         evt.stopPropagation();
         var genreText = $genreList.html();
         var genres = [];
@@ -153,7 +161,7 @@
           genres = genreText.split(GENRE_LIST_DELIMITER);
         }
 
-        ui.launchGenreSelectorDialog(genres, function(selectedGenres) {
+        ui.launchGenreSelectorDialog(type, genres, function(selectedGenres) {
           $genreList.html(selectedGenres && selectedGenres.length > 0 ? selectedGenres.join(GENRE_LIST_DELIMITER) : NONE_SPECIFIED);
         });
       });
@@ -161,17 +169,19 @@
 
     function events() {
 
-      bindGenreSelector($btnVirtualBandGenreSelect, $virtualBandGenreList);
-      bindGenreSelector($btnTraditionalBandGenreSelect, $traditionalBandGenreList);
-      bindGenreSelector($btnPaidSessionsGenreSelect, $paidSessionsGenreList);
-      bindGenreSelector($btnFreeSessionsGenreSelect, $freeSessionsGenreList);
-      bindGenreSelector($btnCowritingGenreSelect, $cowritingGenreList);
+      bindGenreSelector('virtual bands', $btnVirtualBandGenreSelect, $virtualBandGenreList);
+      bindGenreSelector('traditional bands', $btnTraditionalBandGenreSelect, $traditionalBandGenreList);
+      bindGenreSelector('paid sessions', $btnPaidSessionsGenreSelect, $paidSessionsGenreList);
+      bindGenreSelector('free sessions', $btnFreeSessionsGenreSelect, $freeSessionsGenreList);
+      bindGenreSelector('co-writing', $btnCowritingGenreSelect, $cowritingGenreList);
 
       $btnCancel.on('click', function(evt) { evt.stopPropagation(); navigateTo('/client#/profile/' + context.JK.currentUserId); return false; } );
       $btnBack.on('click', function(evt) { evt.stopPropagation(); navigateTo('/client#/account/profile/experience'); return false; } );
       $btnSubmit.on('click', function(evt) { evt.stopPropagation(); handleUpdateProfile(); return false; } );
 
-      context.JK.dropdown($('select', $screen));
+      context.JK.dropdown($virtualBandCommitment);
+      context.JK.dropdown($traditionalBandCommitment);
+      context.JK.dropdown($cowritingPurpose);
     }
 
     function renderInterests() {
diff --git a/web/app/assets/javascripts/dialog/genreSelectorDialog.js b/web/app/assets/javascripts/dialog/genreSelectorDialog.js
index 8b497f456..78f8c08dc 100644
--- a/web/app/assets/javascripts/dialog/genreSelectorDialog.js
+++ b/web/app/assets/javascripts/dialog/genreSelectorDialog.js
@@ -2,19 +2,50 @@
 
   "use strict";
   context.JK = context.JK || {};
-  context.JK.GenreSelectorDialog = function(app, genres, callback) {
+  context.JK.GenreSelectorDialog = function(app, type, genres, callback) {
     var logger = context.JK.logger;
     var rest = context.JK.Rest();
     var $dialog = null;
     var dialogId = 'genre-selector-dialog';
     var $screen = $('#' + dialogId);
     var $btnSelect = $screen.find(".btn-select-genres");
+    var $instructions = $screen.find('#instructions');
+    var $genres = $screen.find('.genres');
+    var GENRES_PER_COLUMN = 12;
 
     function beforeShow(data) {
     }
 
     function afterShow(data) {
+      var genreList = context.JK.genres;
 
+      $genres.empty();
+
+      if (genreList) {
+        var columns = genreList.length / GENRES_PER_COLUMN;
+        columns = Math.floor((genreList.length % GENRES_PER_COLUMN) === 0 ? columns : columns + 1);
+
+        var columnWidthPct = 100/columns;
+
+        $.each(genreList, function(index, val) {
+          if (index === 0 || index % GENRES_PER_COLUMN === 0) {
+            $genres.append('<div class="left" style="width:"' + columnWidthPct + '%;"><table>');
+          }
+
+          $genres.append('<tr>');
+          var checked = '';
+          if (genres && $.inArray(val.id, genres) > -1) {
+            checked = 'checked';
+          }
+
+          $genres.append('<td><input type="checkbox" value="' + val.id + '" ' + checked + ' />' + val.description + '</td>');
+          $genres.append('</tr>');
+
+          if (index === genreList.length-1 || (index+1) % GENRES_PER_COLUMN === 0) {
+            $genres.append('</table></div>')
+          }
+        });
+      }
     }
 
     function afterHide() {
@@ -25,7 +56,20 @@
     }
 
     function events() {
+      $btnSelect.click(function(evt) {
 
+        var selectedGenres = [];
+        $genres.find('input[type=checkbox]:checked').each(function(index) {
+          selectedGenres.push($(this).val());
+        });
+
+        if (callback) {
+          callback(selectedGenres);
+        }
+
+        app.layout.closeDialog(dialogId);
+
+      });
     }
 
     function initialize() {
@@ -35,7 +79,9 @@
         'afterHide': afterHide
       };
 
-      app.bindDialog('genre-selector-dialog', dialogBindings);
+      app.bindDialog(dialogId, dialogBindings);
+
+      $instructions.html('Select one or more genres for ' + type + ':');
 
       events();
     }
diff --git a/web/app/assets/javascripts/profile.js b/web/app/assets/javascripts/profile.js
index ac68b4622..916c6a8b4 100644
--- a/web/app/assets/javascripts/profile.js
+++ b/web/app/assets/javascripts/profile.js
@@ -680,13 +680,13 @@
           $paidGigSection.show();
 
           var genreList = profileUtils.paidSessionGenreList(user.genres);
-          $paidGigDetails.find("ul li:nth-child(1)").append(genreList.length > 0 ? genreList : NOT_SPECIFIED_TEXT);
+          $paidGigDetails.find("ul li:nth-child(1)").html('Genre(s): ' + (genreList.length > 0 ? genreList : NOT_SPECIFIED_TEXT));
 
           var hourlyRate = user.paid_sessions_hourly_rate;
-          $paidGigDetails.find("ul li:nth-child(2)").append(hourlyRate ? hourlyRate : NOT_SPECIFIED_TEXT);
+          $paidGigDetails.find("ul li:nth-child(2)").html('Hourly rate = ' + (hourlyRate ? hourlyRate : NOT_SPECIFIED_TEXT));
 
           var dailyRate = user.paid_sessions_daily_rate;
-          $paidGigDetails.find("ul li:nth-child(3)").append(dailyRate ? dailyRate : NOT_SPECIFIED_TEXT);
+          $paidGigDetails.find("ul li:nth-child(3)").html('Day rate = ' + (dailyRate ? dailyRate : NOT_SPECIFIED_TEXT));
         }
         else {
           $paidGigSection.hide();
@@ -697,7 +697,7 @@
           $freeGigSection.show();
 
           var genreList = profileUtils.freeSessionGenreList(user.genres);
-          $freeGigDetails.find("ul li:nth-child(1)").append(genreList.length > 0 ? genreList : NOT_SPECIFIED_TEXT);
+          $freeGigDetails.find("ul li:nth-child(1)").html('Genre(s): ' + (genreList.length > 0 ? genreList : NOT_SPECIFIED_TEXT));
         }
         else {
           $freeGigSection.hide();
@@ -708,10 +708,10 @@
           $cowritingSection.show();
 
           var genreList = profileUtils.cowritingGenreList(user.genres);
-          $cowritingDetails.find("ul li:nth-child(1)").append(genreList.length > 0 ? genreList : NOT_SPECIFIED_TEXT);
+          $cowritingDetails.find("ul li:nth-child(1)").html('Genre(s): ' + (genreList.length > 0 ? genreList : NOT_SPECIFIED_TEXT));
 
           var purpose = user.cowriting_purpose;
-          $cowritingDetails.find("ul li:nth-child(2)").append(purpose ? profileUtils.cowritingPurposeMap[purpose] : NOT_SPECIFIED_TEXT);
+          $cowritingDetails.find("ul li:nth-child(2)").html('Purpose: ' + (purpose ? profileUtils.cowritingPurposeMap[purpose] : NOT_SPECIFIED_TEXT));
         }
         else {
           $cowritingSection.hide();
@@ -722,14 +722,14 @@
           $traditionalBandSection.show();
 
           var genreList = profileUtils.traditionalBandGenreList(user.genres);
-          $traditionalBandDetails.find("ul li:nth-child(1)").append(genreList.length > 0 ? genreList : NOT_SPECIFIED_TEXT);
+          $traditionalBandDetails.find("ul li:nth-child(1)").html('Genre(s): ' + (genreList.length > 0 ? genreList : NOT_SPECIFIED_TEXT));
 
           var commitment = user.traditional_band_commitment;
-          $traditionalBandDetails.find("ul li:nth-child(2)").append(commitment ? profileUtils.bandCommitmentMap[commitment] : NOT_SPECIFIED_TEXT);
+          $traditionalBandDetails.find("ul li:nth-child(2)").html('Commitment: ' + (commitment ? profileUtils.bandCommitmentMap[commitment] : NOT_SPECIFIED_TEXT));
 
           var canTour = user.traditional_band_touring;
           var canTourResponse = canTour ? "Yes" : (canTour === false ? "No" : NOT_SPECIFIED_TEXT);
-          $traditionalBandDetails.find("ul li:nth-child(3)").append(canTourResponse);
+          $traditionalBandDetails.find("ul li:nth-child(3)").html('Touring: ' + canTourResponse);
         }
         else {
           $traditionalBandSection.hide();
@@ -740,10 +740,10 @@
           $virtualBandSection.show();
 
           var genreList = profileUtils.virtualBandGenreList(user.genres);
-          $virtualBandDetails.find("ul li:nth-child(1)").append(genreList.length > 0 ? genreList : NOT_SPECIFIED_TEXT);
+          $virtualBandDetails.find("ul li:nth-child(1)").html('Genre(s): ' + (genreList.length > 0 ? genreList : NOT_SPECIFIED_TEXT));
 
           var commitment = user.virtual_band_commitment;
-          $virtualBandDetails.find("ul li:nth-child(2)").append(commitment ? profileUtils.bandCommitmentMap[commitment] : NOT_SPECIFIED_TEXT);
+          $virtualBandDetails.find("ul li:nth-child(2)").html('Commitment: ' + (commitment ? profileUtils.bandCommitmentMap[commitment] : NOT_SPECIFIED_TEXT));
         }
         else {
           $virtualBandSection.hide();
diff --git a/web/app/assets/javascripts/ui_helper.js b/web/app/assets/javascripts/ui_helper.js
index 9ab17e3a3..ed0621e8e 100644
--- a/web/app/assets/javascripts/ui_helper.js
+++ b/web/app/assets/javascripts/ui_helper.js
@@ -62,8 +62,8 @@
       });
     }
 
-    function launchGenreSelectorDialog(genres, callback) {
-      var genreSelectorDialog = new JK.GenreSelectorDialog(JK.app, genres, callback);
+    function launchGenreSelectorDialog(type, genres, callback) {
+      var genreSelectorDialog = new JK.GenreSelectorDialog(JK.app, type, genres, callback);
       genreSelectorDialog.initialize();
       return genreSelectorDialog.showDialog();
     }
diff --git a/web/app/assets/javascripts/utils.js b/web/app/assets/javascripts/utils.js
index fef57ccf5..aee15f5c6 100644
--- a/web/app/assets/javascripts/utils.js
+++ b/web/app/assets/javascripts/utils.js
@@ -7,6 +7,7 @@
 
   context.JK = context.JK || {};
   var logger = context.JK.logger;
+  var api = context.JK.Rest();
   var AUDIO_DEVICE_BEHAVIOR = context.JK.AUDIO_DEVICE_BEHAVIOR;
 
   var ALERT_NAMES = context.JK.ALERT_NAMES;
@@ -22,6 +23,10 @@
 
   var os = null;
 
+  context.JK.getGenreList = function() {
+    return api.getGenres();
+  }
+
   context.JK.stringToBool = function (s) {
     switch (s.toLowerCase()) {
       case "true":
diff --git a/web/app/assets/stylesheets/client/profile.css.scss b/web/app/assets/stylesheets/client/profile.css.scss
index 94d057129..7a9ccbee5 100644
--- a/web/app/assets/stylesheets/client/profile.css.scss
+++ b/web/app/assets/stylesheets/client/profile.css.scss
@@ -9,6 +9,25 @@
       padding:0;
     }
   }
+
+  div.logo {
+    text-align: bottom;
+  }
+
+  img.logo {
+    margin-right: 20px;
+  }
+
+  ul {
+    margin:0px 0px 10px 0px;
+    padding:0px;
+  }
+
+  li {
+    margin-left: 15px;
+    margin-bottom: 0px !important;
+    list-style: disc;
+  }
 }
 
 .profile-head {
diff --git a/web/app/views/clients/_account_profile_interests.html.erb b/web/app/views/clients/_account_profile_interests.html.erb
index 811d1d3d7..e8bc49b08 100644
--- a/web/app/views/clients/_account_profile_interests.html.erb
+++ b/web/app/views/clients/_account_profile_interests.html.erb
@@ -44,10 +44,10 @@
             <div class="field left w35">
               <label>Play Commitment</label>
               <select id="virtual-band-commitment" name="virtual_band_commitment">
-                <option value='1'>infrequent</option>
-                <option value='2'>once a week</option>
-                <option value='3'>2-3 times a week</option>
-                <option value='4'>4+ times a week</option>
+                <option value="1">infrequent</option>
+                <option value="2">once a week</option>
+                <option value="3">2-3 times a week</option>
+                <option value="4">4+ times a week</option>
               </select>
             </div>
           </div>
@@ -83,10 +83,10 @@
             <div class="field left w15">
               <label>Play Commitment</label>
               <select id="traditional-band-commitment" name="traditional_band_commitment">
-                <option value='1'>infrequent</option>
-                <option value='2'>once a week</option>
-                <option value='3'>2-3 times a week</option>
-                <option value='4'>4+ times a week</option>
+                <option value="1">infrequent</option>
+                <option value="2">once a week</option>
+                <option value="3">2-3 times a week</option>
+                <option value="4">4+ times a week</option>
               </select>
             </div>
 
@@ -198,8 +198,8 @@
             <div class="field left w35">
               <label>Purpose</label>
               <select id="cowriting-purpose" name="cowriting_purpose">
-                <option value='2'>sell music</option>
                 <option value='1'>just for fun</option>
+                <option value='2'>sell music</option>
               </select>
             </div>
           </div>
diff --git a/web/app/views/clients/_profile.html.erb b/web/app/views/clients/_profile.html.erb
index 305abe3c2..73ac9a0c9 100644
--- a/web/app/views/clients/_profile.html.erb
+++ b/web/app/views/clients/_profile.html.erb
@@ -101,60 +101,62 @@
               <br clear="all" />
               <div id="no-samples" class="left">None specified</div>
 
-              <div id="jamkazam-samples" class="left">
-                <img src="/assets/header/logo.png" width="120" height="30" /><br/>
+              <div id="jamkazam-samples" class="left logo">
+                <img src="/assets/header/logo.png" class="logo" /><br/>
               </div>
 
-              <div id="soundcloud-samples" class="left">
-                <img src="/assets/header/logo.png" width="120" height="30" /><br/>
+              <div id="soundcloud-samples" class="left logo">
+                <img src="/assets/content/soundcloud-logo.png" class="logo" /><br/>
               </div>
 
-              <div id="youtube-samples" class="left">
-                <img src="/assets/header/logo.png" width="120" height="30" /><br/>
+              <div id="youtube-samples" class="left logo">
+                <img src="/assets/content/youtube-logo.png" class="logo" /><br/>
               </div>
 
               <br clear="all" />
-              <div><a href="/client#/account/profile" class="add-recordings">Add Recordings</a></div>
+              <div><a href="/client#/account/profile/samples" class="add-recordings">Add Recordings</a></div>
+              <br clear="all" />
               <br clear="all" />
 
               <div class="section-header">Online Presence</div>
               <br clear="all" />
               <div id="no-online-presence" class="left">None specified</div>
 
-              <div id="user-website" class="left">
-                <a rel="external"><img src="/assets/content/website-logo.png" /></a>
+              <div id="user-website" class="left logo">
+                <a rel="external"><img src="/assets/content/website-logo.png" class="logo" /></a>
               </div>
 
-              <div id="soundcloud-presence" class="left">
-                <a rel="external"><img src="/assets/content/soundcloud-logo.png" /></a>
+              <div id="soundcloud-presence" class="left logo">
+                <a rel="external"><img src="/assets/content/soundcloud-logo.png" class="logo" /></a>
               </div>
 
-              <div id="reverbnation-presence" class="left">
-                <a rel="external"><img src="/assets/content/reverbnation-logo.png" /></a>
+              <div id="reverbnation-presence" class="left logo">
+                <a rel="external"><img src="/assets/content/reverbnation-logo.png" class="logo" /></a>
               </div>
 
-              <div id="bandcamp-presence" class="left">
-                <a rel="external"><img src="/assets/content/bandcamp-logo.png" /></a>
+              <div id="bandcamp-presence" class="left logo">
+                <a rel="external"><img src="/assets/content/bandcamp-logo.png" class="logo" /></a>
               </div>
 
-              <div id="fandalism-presence" class="left">
-                <a rel="external"><img src="/assets/content/fandalism-logo.png" /></a>
+              <div id="fandalism-presence" class="left logo">
+                <a rel="external"><img src="/assets/content/fandalism-logo.png" class="logo" /></a>
               </div>
 
-              <div id="youtube-presence" class="left">
-                <a rel="external"><img src="/assets/content/youtube-logo.png" /></a>
+              <div id="youtube-presence" class="left logo">
+                <a rel="external"><img src="/assets/content/youtube-logo.png" class="logo" /></a>
               </div>
 
-              <div id="facebook-presence" class="left">
-                <a rel="external"><img src="/assets/content/facebook-logo.png" /></a>
+              <div id="facebook-presence" class="left logo">
+                <a rel="external"><img src="/assets/content/facebook-logo.png" class="logo" /></a>
               </div>
 
-              <div id="twitter-presence" class="left">
-                <a rel="external"><img src="/assets/content/twitter-logo.png" /></a>
+              <div id="twitter-presence" class="left logo">
+                <a rel="external"><img src="/assets/content/twitter-logo.png" class="logo" /></a>
               </div>
 
               <br clear="all" />
-              <div><a href="/client#/account/profile" class="add-sites">Add Sites</a></div>
+              <div><a href="/client#/account/profile/samples" class="add-sites">Add Sites</a></div>
+              <br clear="all" />
               <br clear="all" />
 
               <div class="section-header">Current Interests</div>
@@ -162,34 +164,34 @@
               <div id="no-interests" class="left">None specified</div>
 
               <div id="paid-gigs">
-                <div class="left profile-details">I'm interested in playing paid gigs</div>
+                <div class="left">I'm interested in playing paid gigs</div>
                 <br clear="all" />
                 <div id="paid-gig-details">
                   <ul>
-                    <li>Genre(s): </li>
-                    <li>Hourly rate = </li>
-                    <li>Day rate = </li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
                   </ul>
                 </div>
               </div>
 
               <div id="free-gigs">
-                <div class="left profile-details">I'm interested in playing free gigs</div>
+                <div class="left">I'm interested in playing free gigs</div>
                 <br clear="all" />
                 <div id="free-gig-details">
                   <ul>
-                    <li>Genre(s): </li>
+                    <li></li>
                   </ul>
                 </div>
               </div>
               
               <div id="cowriting">
-                <div class="left profile-details">Concert Gigs:</div>
+                <div class="left">I'm interested in co-writing:</div>
                 <br clear="all" />
                 <div id="cowriting-details">
                   <ul>
-                    <li>Genre(s): </li>
-                    <li>Purpose: </li>
+                    <li></li>
+                    <li></li>
                   </ul>
                 </div>
               </div>
@@ -199,29 +201,26 @@
                 <br clear="all" />
                 <div id="traditional-band-details">
                   <ul>
-                    <li>Genre(s): </li>
-                    <li>Commitment: </li>
-                    <li>Touring: </li>
+                    <li></li>
+                    <li></li>
+                    <li></li>
                   </ul>
                 </div>
               </div>
 
-              <br clear="all" />
-              <div><a href="/client#/account/profile" class="add-interests">Add Interests</a></div>
+              <div><a href="/client#/account/profile/interests" class="add-interests">Add Interests</a></div>
 
               <div id="virtual-band">
-                <div class="left profile-details">I'm interested in forming virtual band(s)</div>
+                <div class="left">I'm interested in forming virtual band(s)</div>
                 <br clear="all" />
                 <div id="virtual-band-details">
                   <ul>
-                    <li>Genre(s): </li>
-                    <li>Commitment: </li>
+                    <li></li>
+                    <li></li>
                   </ul>
                 </div>
               </div>
 
-              <br clear="all" />
-              <br clear="all" />
             </div>
           </div>
         </div>
diff --git a/web/app/views/clients/index.html.erb b/web/app/views/clients/index.html.erb
index a01f0b596..c6e4bbea8 100644
--- a/web/app/views/clients/index.html.erb
+++ b/web/app/views/clients/index.html.erb
@@ -136,6 +136,9 @@
             // This is a helper class with a singleton. No need to instantiate.
             JK.GenreSelectorHelper.initialize(JK.app);
 
+            JK.getGenreList().done(function(genres) {
+              JK.genres = genres;
+            });
             var recordingManager = new JK.RecordingManager(JK.app);
 
             var acceptFriendRequestDialog = new JK.AcceptFriendRequestDialog(JK.app);
diff --git a/web/app/views/dialogs/_genreSelectorDialog.html.haml b/web/app/views/dialogs/_genreSelectorDialog.html.haml
index 9d84afed9..db65167e9 100644
--- a/web/app/views/dialogs/_genreSelectorDialog.html.haml
+++ b/web/app/views/dialogs/_genreSelectorDialog.html.haml
@@ -1,11 +1,14 @@
 .dialog.dialog-overlay-sm{layout: 'dialog', 'layout-id' => 'genre-selector-dialog', id: 'genre-selector-dialog'}
   .content-head
-    = image_tag "content/icon_friend.png", {:width => 14, :height => 14, :class => 'content-icon' }
+    = image_tag "content/icon_checkmark_circle.png", {:width => 20, :height => 20, :class => 'content-icon' }
     %h1
       = 'select genre'
   .dialog-inner
-    = 'TESTING'
+    %span{id: 'instructions'}
+    %br{:clear => "all"}/
+    %br{:clear => "all"}/
+    .genres
 
   .right.action-buttons
-    %a.button-grey.btn-cancel-dialog{href:'#', 'layout-action' => 'cancel'} CANCEL
-    %a.button-orange.btn-select-genres{href:'#'} SELECT
\ No newline at end of file
+    %a.button-grey.btn-cancel-dialog{'layout-action' => 'cancel'} CANCEL
+    %a.button-orange.btn-select-genres SELECT
\ No newline at end of file
diff --git a/web/app/views/layouts/application.html.erb b/web/app/views/layouts/application.html.erb
index 975d3d55e..c0a5a6232 100644
--- a/web/app/views/layouts/application.html.erb
+++ b/web/app/views/layouts/application.html.erb
@@ -64,6 +64,10 @@
                 JK.currentUserAvatarUrl = null;
                 JK.currentUserName = null;
                 <% end %>
+
+                JK.getGenreList().done(function(genres) {
+                  JK.genres = genres;
+                });
             })
         </script>
 
diff --git a/web/app/views/layouts/landing.html.erb b/web/app/views/layouts/landing.html.erb
index 7ae5a821c..df95fab81 100644
--- a/web/app/views/layouts/landing.html.erb
+++ b/web/app/views/layouts/landing.html.erb
@@ -75,6 +75,9 @@
                 <% end %>
 
                 JK.app = JK.JamKazam();
+                JK.getGenreList().done(function(genres) {
+                  JK.genres = genres;
+                });
 
                 JK.app.initialize({inClient: false, layoutOpts: {layoutFooter: false, sizeOverlayToContent: true}});
             })
diff --git a/web/app/views/layouts/web.html.erb b/web/app/views/layouts/web.html.erb
index e3e828bc4..c816bf518 100644
--- a/web/app/views/layouts/web.html.erb
+++ b/web/app/views/layouts/web.html.erb
@@ -116,6 +116,10 @@
 
             JK.bindHoverEvents();
 
+            JK.getGenreList().done(function(genres) {
+              JK.genres = genres;
+            });
+
             JK.JamServer.connect() // singleton here defined in JamServer.js
                 .done(function() {
                   console.log("websocket connected")