diff --git a/scripts/CardListController.js b/scripts/CardListController.js
index 6eadeea..3276100 100644
--- a/scripts/CardListController.js
+++ b/scripts/CardListController.js
@@ -1,4 +1,4 @@
-angular.module('flashy.CardListController', ['ui.router', 'angular.filter']).
+angular.module('flashy.CardListController', ['ui.router', 'angular.filter', 'ngSanitize']).
     controller('CardListController', function($scope, $rootScope, $state, $http, $stateParams) {
         // cards array
         sectionId = $stateParams.sectionId;
@@ -18,6 +18,7 @@ angular.module('flashy.CardListController', ['ui.router', 'angular.filter']).
             console.log('go to feed');
         };
 
+
         // unhide card
         $scope.unhide = function(card) {
             $http.post('/api/flashcards/' + card.id + '/unhide/').
@@ -177,4 +178,28 @@ angular.module('flashy.CardListController', ['ui.router', 'angular.filter']).
         };
 
     }
-);
+).
+filter('displayCard', function($sce) {
+    return function(card) {
+        // text to display as html
+        var cardText = "";
+
+        var start = 0; // where to start next string break
+
+        // get all display pieces and blank pieces
+        for (var i = 0; i < card.mask.length; i++) {
+          cardText = cardText.concat( card.text.substring(start, card.mask[i][0]) );
+          cardText = cardText.concat("<b>");
+          cardText = cardText.concat( card.text.substring(card.mask[i][0], card.mask[i][1]) );
+          cardText = cardText.concat("</b>");
+          start = card.mask[i][1];
+        }
+
+        // get remaining dislay pieces, if any
+        if (start != card.mask.length - 1)
+          cardText = cardText.concat( card.text.substring(start) );
+
+        //cardText = cardText.concat("</span>");
+        return $sce.trustAsHtml(cardText);
+    };
+});
diff --git a/templates/cardlist.html b/templates/cardlist.html
index 67a6ce6..038353a 100644
--- a/templates/cardlist.html
+++ b/templates/cardlist.html
@@ -2,7 +2,7 @@
   <div class="row">
     <a class="btn" id="showHidden" ng-click="show = !show" style="margin-top: 15px">Show Hidden</a>
 
-    <div class="input-field col s6 right">
+    <div class="input-field col s4 right">
       <i class="mdi-action-search prefix"></i>
       <input id="search" type="text" class="validate" ng-model="searchText"/>
       <label for="search">Search</label>
@@ -60,10 +60,11 @@
 
   <div class="list" style="padding: 0px 15px">
     <ul class="collection"
-        ng-repeat="(weeknum, week_cards) in cards | filter:searchText | filter:filterByDate | groupBy: 'material_week_num' | orderBy:-material_week_num">
+        ng-repeat="(weeknum, week_cards) in cards | filter:searchText | filter:filterByDate | groupBy: 'material_week_num'">
       <li class="collection-header"><h3>Week {{weeknum}}</h3></li>
       <li class="collection-item" ng-click="expand = !expand" ng-repeat="card in week_cards" ng-show="show || !card.is_hidden">
-        <div>{{card.text}}
+        <div>
+          <span ng-bind-html="card | displayCard"></span>
           <span class="badge">{{dayofweek(card)}}</span>
           <p class="right-align" ng-show="expand">
             <a href="" class="tooltipped" ng-click="pull(card)" ng-show="!card.is_in_deck" data-position="bottom" data-delay="50" data-tooltip="Add to Deck">