diff --git a/src/gui/css/quickListCSS.tw b/src/gui/css/quickListCSS.tw
new file mode 100644
index 0000000000000000000000000000000000000000..c9abfac2f185cbf0c8af76145ca20e36ce6316c5
--- /dev/null
+++ b/src/gui/css/quickListCSS.tw
@@ -0,0 +1,79 @@
+:: Quick List stylesheet [stylesheet]
+
+.hidden
+{
+    display:none;
+}
+
+div.quicklist.devotion button.mindbroken
+{
+    background-color:red;
+}
+div.quicklist.devotion button.very-hateful
+{
+    background-color:darkviolet;
+}
+div.quicklist.devotion button.hateful
+{
+    background-color:darkviolet;
+}
+div.quicklist.devotion button.resistant
+{
+    background-color:mediumorchid;
+}
+div.quicklist.devotion button.ambivelent
+{ background-color:yellow; }
+div.quicklist.devotion button.accepting
+{ background-color:hotpink; }
+div.quicklist.devotion button.devoted
+{ background-color:deeppink; }
+div.quicklist.devotion button.worshipful
+{ background-color:magenta; }
+div.quicklist.trust button.mindbroken
+{ }
+div.quicklist.trust button.extremely-terrified
+{ background-color:darkgoldenrod; }
+div.quicklist.trust button.terrified
+{
+    background-color:goldenrod; }
+div.quicklist.trust button.frightened
+{
+    background-color:gold; }
+div.quicklist.trust button.fearful
+{
+    background-color:yellow; }
+div.quicklist.trust button.hate-careful
+{
+    background-color:orange; }
+div.quicklist.trust button.careful
+{
+    background-color:mediumaquamarine; }
+div.quicklist.trust button.bold
+{
+    background-color:orangered; }
+div.quicklist.trust button.trusting
+{
+    background-color:mediumseagreen; }
+div.quicklist.trust button.defiant
+{
+    background-color:darkred; }
+div.quicklist.trust button.profoundly-trusting
+{
+    background-color:seagreen; }
+div.quicklist
+{
+    table-layout: fixed;
+    text-align: center;
+    border-collapse: separate;
+    border-spacing: 2px;
+    border-style: hidden;
+    empty-cells: hide;
+    width: 70%;
+}
+div.quicklist button
+{
+    margin-top: 15px;
+    margin-right: 20px;
+    white-space: nowrap;
+}
+
diff --git a/src/js/hTagMacroJS.tw b/src/js/hTagMacroJS.tw
index 9e8c566b7eb23534f0753eb34b2c2b7e1cb0749d..db8d845a8e01ab6a325ede5e67a3c6b0ce8a8e4d 100644
--- a/src/js/hTagMacroJS.tw
+++ b/src/js/hTagMacroJS.tw
@@ -14,29 +14,39 @@
  * Usage: <<htag atributes>>...<</htag>>    
  * Usage: <<htag atributes tag>>...<</htag>>    
  */
-Macro.add('htag', {
-	tags     : null,
-		
-        munge(val, key) { return  key + '="' + val + '"'; },
-	handler() {
+Macro
+    .add(
+        'htag',
+        {   tags            : null
+        ,   handler()
+            {
 		const payload   =   this.payload[0].contents.replace(/(^\n+|\n+$)/, '');
 		let htag        =   'div';
 		let attributes;
+
+                var     munge   =   function (val, key) 
+                {
+                    return  key + '="' + val + '"';
+                };
 		
-                if  (1  >  this.args.length) {
-			return  this.error('invalid syntax, format: <<htag [id [ tag ] | attributes [ tag ] >>');
+                if  (1  >  this.args.length)
+                {
+                    return  
+                        this.error(
+                            'invalid syntax, format: <<htag [id [ tag ] | attributes [ tag ] >>'
+                        );
 		}
-                if (1 <  this.args.length) {
-                        htag    =   String(this.args[1]).trim();
+                if  (1  <  this.args.length)
+                {
+                    htag    =   String(this.args[1]).trim();
+                }
+                if  ("object"   === typeof this.args[0])
+                {
+                    attributes  =   $.map(this.args[0], munge).join(" ");
                 }
-                if  (typeof this.args[0] === "object") {
-                        attributes  =   //$.map(this.args[0], munge).join(" ");
-                                $.map(
-                                        this.args[0],
-                                        function (val, key) { return  key + '="' + val + '"'; })
-                                .join(" ");
-                } else {
-                        attributes  =   'id="' + String(this.args[0]).trim() + '"';
+                else
+                {
+                    attributes  =   'id="' + String(this.args[0]).trim() + '"';
                 }
 		Config.debug && this.debugView.modes({block: true});
 		
diff --git a/src/js/quickListJS.tw b/src/js/quickListJS.tw
new file mode 100644
index 0000000000000000000000000000000000000000..fc0c7f7ee9d380a48ab0e5411b805585877a2398
--- /dev/null
+++ b/src/js/quickListJS.tw
@@ -0,0 +1,54 @@
+:: Quick List [script]
+
+window.sortDomObjects = function (objects, attrName)
+{
+    var sortingByAttr = function (a, b)
+    {
+        var     aVal    =   parseInt(a.getAttribute(attrName))
+            ,   bVal    =   parseInt(b.getAttribute(attrName))
+            ;
+        return  bVal - aVal;
+    };
+    return  objects.toArray().sort(sortingByAttr);
+};
+
+window.sortButtonsByDevotion    =   function ()
+{
+    var $sortedButtons   =  $('#qlWrapper button').remove();
+
+    $sortedButtons  =   sortDomObjects($sortedButtons, 'data-devotion');
+
+    $($sortedButtons).appendTo($('#qlWrapper'));
+    quickListBuildLinks();
+};
+
+window.sortButtonsByTrust   =   function ()
+{
+    var $sortedButtons   =  $('#qlWrapper button').remove();
+
+    $sortedButtons  =   sortDomObjects($sortedButtons, 'data-trust');
+
+    $($sortedButtons).appendTo($('#qlWrapper'));
+    quickListBuildLinks();
+};
+
+window.quickListBuildLinks  =   function ()
+{
+    $("[data-scroll-to]").click(function() {
+            var     $this = $(this), $toElement = $this.attr('data-scroll-to'),
+                    /*
+                    * note the * 1 enforces $offset to be an integer, without
+                    *       it we scroll to True, which goes nowhere fast.
+                    */
+                    $offset =   $this.attr('data-scroll-offset')    * 1 || 0,
+                    $speed  =   $this.attr('data-scroll-speed')     * 1 || 500
+                ;
+            /*
+            *   Use javascript scrollTop animation for in page navigation.
+            */
+            $('html, body').animate({
+                    scrollTop: $($toElement).offset().top + $offset
+            }, $speed);
+    });
+};
+
diff --git a/src/js/utilJS.tw b/src/js/utilJS.tw
index 04abbefdb27a69eaf8345d678c525d448c070a27..d1ff2c92fe6a104eaf07e7c4b56494f4604f007e 100644
--- a/src/js/utilJS.tw
+++ b/src/js/utilJS.tw
@@ -473,4 +473,77 @@ window.weightedArray2HashMap = function weightedArray2HashMap(arr) {
 
 window.capFirstChar = function capFirstChar(string) {
 	return string.charAt(0).toUpperCase() + string.substr(1);
-}
\ No newline at end of file
+}
+
+window.getSlaveDisplayName = function (slave) 
+{
+    if  (   (!slave)
+        ||  (!State)
+        )
+    {
+        return  undefined;
+    }
+    var     surnamesFirstCountries  =   [   "Cambodian", "Chinese", "Hungarian", "Japanese", "Korean",
+                                            "Mongolian", "Taiwanese", "Vietnamese"
+                                        ]
+        ,   names   =   [   slave.slaveName, slave.slaveSurname || ""
+                        ];
+        ;
+    if  (   (1  !=  State.variables.surnameOrder)
+        &&  (surnamesFirstCountries.includes(slave.nationality))
+        )
+    {
+        names.reverse();
+    }
+    return  names.join(" ").trim();
+}
+
+window.getSlaveDevotionClass = function (slave) 
+{
+    if  (   (!slave)
+        ||  (!State)
+        )
+    {
+        return  undefined;
+    }
+    if  ('mindbroken' == slave.fetish)  return  'mindbroken';
+
+    if      (-95 >  slave.devotion)     return  'very-hateful';
+    else if (-50 >  slave.devotion)     return  'hateful';
+    else if (-20 >  slave.devotion)     return  'resistant';
+    else if (20  >= slave.devotion)     return  'ambivelent';
+    else if (50  >= slave.devotion)     return  'accepting';
+    else if (95  >= slave.devotion)     return  'devoted';
+    else                                return  'worshipful';
+}
+
+window.getSlaveTrustClass = function (slave) 
+{
+    if  (   (!slave)
+        ||  (!State)
+        )
+    {
+        return  undefined;
+    }
+    if  ('mindbroken' == slave.fetish)  return  '';
+
+    if      (-95 >  slave.trust)        return  'extremely-terrified';
+    else if (-50 >  slave.trust)        return  'terrified';
+    else if (-20 >  slave.trust)        return  'frightened';
+    else if (20  >= slave.trust)        return  'fearful';
+    else if (50  >= slave.trust)
+    {
+        if (-20 >  slave.devotion)      return  'hate-careful';
+        else                            return  'careful';
+    }
+    else if (95  >= slave.trust)
+    {
+        if (-20 >  slave.devotion)      return  'bold';
+        else                            return  'trusting';
+    }
+    else
+    {
+        if (-20 >  slave.devotion)      return  'defiant';
+        else                            return  'profoundly-trusting';
+    }
+}
diff --git a/src/uncategorized/slaveSummary.tw b/src/uncategorized/slaveSummary.tw
index 823b5f19a172c29017df7b44d87e470661a7a648..4150918a5adf4f37e4f89bd6218e003eedd9aadc 100644
--- a/src/uncategorized/slaveSummary.tw
+++ b/src/uncategorized/slaveSummary.tw
@@ -76,16 +76,7 @@
         _indexSlavesIdxs = $slaves.map(function(slave, idx) { return _passagePreFilter(slave) ? idx : null; }).filter(function(idx) { return idx !== null; })>>
 <<for !_.isUndefined(_ssi = _filteredSlaveIdxs.shift())>>
 <<set _Slave = $slaves[_ssi]>>
-<<if $surnameOrder != 1>>
-	<<if ["Cambodian", "Chinese", "Hungarian", "Japanese", "Korean", "Mongolian", "Taiwanese", "Vietnamese"].includes(_Slave.nationality)>>
-		<<set _slaveName = [_Slave.slaveSurname || "", _Slave.slaveName].join(" ").trim()>>
-	<<else>>
-		<<set _slaveName = [_Slave.slaveName, _Slave.slaveSurname || ""].join(" ").trim()>>
-	<</if>>
-<<else>>
-	<<set _slaveName = [_Slave.slaveName, _Slave.slaveSurname || ""].join(" ").trim()>>
-<</if>>
-
+<<set _slaveName = getSlaveDisplayName(_Slave);>>
 
 <<capture _ssi>>
 
@@ -99,20 +90,6 @@
                 <<if (/Select/i.test(_Pass))>>
                         <<set _offset = -25>>
                 <</if>>
-                <style>
-                        .hidden {   display:none;   }
-                        table.quicklist {
-				table-layout: fixed;
-				text-align: center;
-				border-collapse: separate;
-				border-spacing: 2px;
-				border-style: hidden;
-				empty-cells: hide;
-				width: 70%;
-                        }
-			table.quicklist td  { margin: 1px; }
-			table.quicklist col { width: 8%; }
-                </style>
 		<br />
                 <<set _tableCount = _tableCount || 0>>
                 <<set _tableCount++>>
@@ -128,56 +105,47 @@
                 <<htag _divAttributes>>
                 <<for !_.isUndefined(_ssii = _indexSlavesIdxs.shift())>>
                         <<set _IndexSlave = $slaves[_ssii]>>
-                        <<if $surnameOrder != 1>>
-                                <<if ["Cambodian", "Chinese", "Hungarian", "Japanese", "Korean", "Mongolian", "Taiwanese", "Vietnamese"].includes(_IndexSlave.nationality)>>
-                                        <<set _indexSlaveName = [_IndexSlave.slaveSurname || "", _IndexSlave.slaveName].join(" ").trim()>>
-                                <<else>>
-                                        <<set _indexSlaveName = [_IndexSlave.slaveName, _IndexSlave.slaveSurname || ""].join(" ").trim()>>
-                                <</if>>
-                        <<else>>
-                                <<set _indexSlaveName = [_IndexSlave.slaveName, _IndexSlave.slaveSurname || ""].join(" ").trim()>>
-                        <</if>>
-                        <<set _buttons.push('<button data-scroll-to="#slave-' + _IndexSlave.ID + '" data-scroll-offset="' + _offset + '">' + _indexSlaveName + '</button>'); >>
+                        <<set _indexSlaveName = getSlaveDisplayName(_IndexSlave);>>
+                        <<set _devotionClass = getSlaveDevotionClass(_IndexSlave);>>
+                        <<set _trustClass = getSlaveTrustClass(_IndexSlave);>>
+                        <<set _buttons.push({'data-name': _IndexSlave.slaveName, 'data-scroll-to': '#slave-' + _IndexSlave.ID, 'data-scroll-offset': _offset, 'data-devotion': _IndexSlave.devotion, 'data-trust': _IndexSlave.trust, class: _devotionClass + ' ' + _trustClass }); >>
                 <</for>>
 		<<if !_.isUndefined(_buttons[0])>>
-                        <table class="quicklist">
+                        <<set $sortQuickList = $sortQuickList || 'Devotion'>>
+	                //Sorting:// ''<span id="qlSort">$sortQuickList</span>.''
+                        <<link "Sort by Devotion">>
+                                <<set $sortQuickList = 'Devotion'>>
+                                <<replace "#qlSort">>$sortQuickList<</replace>>
+                                <<script>>
+                                        $('#qlWrapper').removeClass('trust').addClass('devotion');
+                                        sortButtonsByDevotion();
+                                <</script>>
+                        <</link>>
+                        <<link "Sort by Trust">>
+                                <<set $sortQuickList = 'Trust'>>
+                                <<replace "#qlSort">>$sortQuickList<</replace>>
+                                <<script>>
+                                        $('#qlWrapper').removeClass('devotion').addClass('trust');
+                                        sortButtonsByTrust();
+                                <</script>>
+                        <</link>>
+                        <br/>
+                        <div id="qlWrapper" class="quicklist devotion">
 			<<for !_.isUndefined(_buttons[0])>>
-				<tr>
-                                        <<for _cols = 0; _cols <= 4; _cols++>>
-                                                <<set _button = _buttons.shift()>>
-                                                <<if !_.isUndefined(_button)>>
-                                                        <td></td>
-							<td colspan="10">
-                                                                <<print _button>>
-                                                        </td>
-                                                <</if>>
-                                        <</for>>
-                                        <td></td>
-                                </tr>
+                                <<set _button = _buttons.shift()>>
+                                <<if !_.isUndefined(_button)>>
+                                        <<set _buttonSlaveName = _button['data-name'];>>
+                                        <<htag _button 'button'>>_buttonSlaveName<</htag>>
+                                <</if>>
                         <</for>>
-			</table>
+			</div>
                         <script>
-				/*
-				*   Use javascript scrollTop animation for in page navigation.
-				*/
 				$("[data-quick-index]").click(function () {
                                         var $this = $(this), which = $this.attr('data-quick-index');
                                         var $quick = $('div#list_index' + which);
                                         $quick.toggleClass("hidden");
                                 });
-                                $("[data-scroll-to]").click(function() {
-                                        var $this = $(this), $toElement = $this.attr('data-scroll-to'),
-                                                /*
-                                                * note the *1 enforces $offset to be an integer, without
-                                                * it we scroll to True, which goes nowhere fast.
-                                                */
-                                                $offset = $this.attr('data-scroll-offset') * 1 || 0,
-                                                $speed = $this.attr('data-scroll-speed') * 1 || 500;
-                                        $('html, body').animate({
-                                                scrollTop: $($toElement).offset().top + $offset
-                                        }, $speed);
-                                                          
-				});
+                                quickListBuildLinks();
                         </script>
                 <</if>>
                 <</htag>>