diff --git a/src/app/pages/ShipyardPage.jsx b/src/app/pages/ShipyardPage.jsx
index 8ef8f8e4..74404f45 100644
--- a/src/app/pages/ShipyardPage.jsx
+++ b/src/app/pages/ShipyardPage.jsx
@@ -139,15 +139,16 @@ export default class ShipyardPage extends Page {
    * @param  {Object} u           Localized unit map
    * @param  {Function} fInt      Localized integer formatter
    * @param  {Function} fRound    Localized round formatter
+   * @param  {Boolean} highlight  Should this row be highlighted
    * @return {React.Component}    Table Row
    */
-  _shipRowElement(s, translate, u, fInt, fRound) {
+  _shipRowElement(s, translate, u, fInt, fRound, highlight) {
     let noTouch = this.context.noTouch;
 
     return <tr
         key={s.id}
         style={{ height: '1.5em' }}
-        className={cn({ highlighted: noTouch && this.state.shipId === s.id })}
+        className={cn({ highlighted: noTouch && this.state.shipId === s.id, alt: highlight })}
         onMouseEnter={noTouch && this._highlightShip.bind(this, s.id)}
       >
       <td className='ri'>{s.manufacturer}</td>
@@ -246,13 +247,26 @@ export default class ShipyardPage extends Page {
     let shipRows = new Array(shipSummaries.length);
     let detailRows = new Array(shipSummaries.length);
 
+    let lastShipSortValue = null;
+    let backgroundHighlight = false;
+
     for (let s of shipSummaries) {
-      detailRows[i] = this._shipRowElement(s, translate, units, fInt, formats.f1);
+      let shipSortValue = s[shipPredicate];
+      if( shipPredicateIndex != undefined ) {
+        shipSortValue = shipSortValue[shipPredicateIndex];
+      }
+
+      if( shipSortValue != lastShipSortValue ) {
+        backgroundHighlight = !backgroundHighlight;
+        lastShipSortValue = shipSortValue;
+      }
+
+      detailRows[i] = this._shipRowElement(s, translate, units, fInt, formats.f1, backgroundHighlight);
       shipRows[i] = (
         <tr
           key={i}
           style={{ height: '1.5em' }}
-          className={cn({ highlighted: noTouch && this.state.shipId === s.id })}
+          className={cn({ highlighted: noTouch && this.state.shipId === s.id, alt: backgroundHighlight })}
           onMouseEnter={noTouch && this._highlightShip.bind(this, s.id)}
         >
           <td className='le'><Link href={'/outfit/' + s.id}>{s.name}</Link></td>
@@ -316,16 +330,16 @@ export default class ShipyardPage extends Page {
                 <th colSpan={8} className='sortable lft' onClick={sortShips('intCount')}>{translate('internal compartments')}</th>
               </tr>
               <tr>
-	        <th className='sortable lft' onClick={sortShips('retailCost')}>{units.CR}</th>
-	        <th className='sortable lft' onClick={sortShips('hullMass')}>{units.T}</th>
-	        <th className='sortable lft' onClick={sortShips('speed')}>{units['m/s']}</th>
-	        <th className='sortable'  onClick={sortShips('boost')}>{units['m/s']}</th>
-	        <th>&nbsp;</th>
-	        <th className='sortable' onClick={sortShips('baseShieldStrength')}>{units.MJ}</th>
-	        <th className='sortable lft' onClick={sortShips('topSpeed')}>{units['m/s']}</th>
-	        <th className='sortable' onClick={sortShips('topBoost')}>{units['m/s']}</th>
-	        <th className='sortable' onClick={sortShips('maxJumpRange')}>{units.LY}</th>
-	        <th className='sortable' onClick={sortShips('maxCargo')}>{units.T}</th>
+                <th className='sortable lft' onClick={sortShips('retailCost')}>{units.CR}</th>
+                <th className='sortable lft' onClick={sortShips('hullMass')}>{units.T}</th>
+                <th className='sortable lft' onClick={sortShips('speed')}>{units['m/s']}</th>
+                <th className='sortable'  onClick={sortShips('boost')}>{units['m/s']}</th>
+                <th>&nbsp;</th>
+                <th className='sortable' onClick={sortShips('baseShieldStrength')}>{units.MJ}</th>
+                <th className='sortable lft' onClick={sortShips('topSpeed')}>{units['m/s']}</th>
+                <th className='sortable' onClick={sortShips('topBoost')}>{units['m/s']}</th>
+                <th className='sortable' onClick={sortShips('maxJumpRange')}>{units.LY}</th>
+                <th className='sortable' onClick={sortShips('maxCargo')}>{units.T}</th>
                 <th className='sortable lft' onMouseEnter={termtip.bind(null, 'power plant')} onMouseLeave={hide} onClick={sortShips('standard', 0)}>{'pp'}</th>
                 <th className='sortable' onMouseEnter={termtip.bind(null, 'thrusters')} onMouseLeave={hide} onClick={sortShips('standard', 1)}>{'th'}</th>
                 <th className='sortable' onMouseEnter={termtip.bind(null, 'frame shift drive')} onMouseLeave={hide} onClick={sortShips('standard', 2)}>{'fsd'}</th>
diff --git a/src/less/colors.less b/src/less/colors.less
index 4814e724..2a18f6de 100755
--- a/src/less/colors.less
+++ b/src/less/colors.less
@@ -18,6 +18,7 @@
 @bg: rgba(30,30,30,1);
 @bgBlack: #000;
 @primary-bg: fadeout(darken(@primary, 47%), 15%);
+@alt-primary-bg: fadeout(darken(@primary, 42%), 15%); // Lighter brown background
 @secondary-bg: fadeout(darken(@secondary, @bgDarken), @bgTransparency); // Brown background
 @warning-bg: fadeout(darken(@warning, @bgDarken), @bgTransparency); // Dark Red
 
diff --git a/src/less/table.less b/src/less/table.less
index 93f6f8e3..1cce0319 100755
--- a/src/less/table.less
+++ b/src/less/table.less
@@ -54,6 +54,10 @@ tbody tr {
   .no-touch &.highlight:hover, .no-touch &.highlighted {
     background-color: @warning-bg;
   }
+
+  &.alt {
+    background-color: @alt-primary-bg;
+  }
 }
 
 td {