diff --git a/_site_generated/assets/css/all.css b/_site_generated/assets/css/all.css
index aff2746..be29754 100644
--- a/_site_generated/assets/css/all.css
+++ b/_site_generated/assets/css/all.css
@@ -7540,7 +7540,11 @@ small {
   background-color: transparent;
 }
 .home-item-cntr {
-  padding: 10px 15px 15px 15px;
+  padding: 0px 15px 0px 15px;
+  height: 100%;
+}
+a > div.home-item-cntr:hover {
+  background: rgba(4, 4, 4, 0.1);
 }
 .home-item-cntr.welcome {
   padding: 20px 30px 30px 30px;
@@ -7569,6 +7573,7 @@ small {
   font-size: 24px;
 }
 .home-item-label {
+  padding-top: 10px;
   margin-bottom: 10px;
 }
 .home-item-label > .pull-left {
diff --git a/_site_generated/assets/js/all.js b/_site_generated/assets/js/all.js
index 747cf1a..5eecbb2 100644
--- a/_site_generated/assets/js/all.js
+++ b/_site_generated/assets/js/all.js
@@ -30811,6 +30811,80 @@ angular.module('wcodpApp').factory('solr', ['$http', '$location', function($http
 );
 
 
+angular.module('wcodpApp').factory('marinePlanner', ['$http', '$timeout', function($http, $timeout) {
+
+    var _availableLayers = [],
+        _availableLayersEndpoint = 'http://visualize.westcoastoceans.org/geoportal-ids/',
+        _layerUrlPattern = 'http://visualize.westcoastoceans.org/{layerSlug}/';
+
+
+    /**
+     * The first time the function is called, it stores a promise for an 
+     * ajax call to grab the full list of UUIDs for layers Todd has added
+     * to MP. The first use of the promise will cache the list for further
+     * uses of the promise.
+     */
+
+
+
+    /**
+     * [_getListOfLayers description]
+     * @param  {Function} callback [description]
+     * @return {[type]}            [description]
+     */
+    function _getListOfLayers (callback) {
+        if (_availableLayers.length > 0) {
+            callback(_availableLayers);
+        } else {
+            // Grab list of visualizable layers from mp.
+            $http.get(_availableLayersEndpoint).success(function (data) {
+                // 'data' should be a collection of objects, each containing 
+                // an id and a slug.
+                
+                // Cache result so we don't always have to fetch the list 
+                // from marine planner.
+                _availableLayers = data;
+                
+                // Satisfy the current request.
+                callback(_availableLayers);
+
+            }).error(function (data) {
+                if (console) { console.log('Error getting available layers list from marine planner.'); }  
+            });
+        }
+    }
+
+
+    /**
+     * [_getLayerSlug description]
+     * @param  {[type]} uuid [description]
+     * @param  {[type]} list [description]
+     * @return {[type]}      [description]
+     */
+    function _getLayerSlug (uuid, list) {
+        // TODO, probably using underscore
+        return 'slug-slug';
+    }
+
+
+    return {
+
+        getMarinePlannerUrl: function (uuid, success_callback, error_callback) {
+            _getListOfLayers(function (list) {
+                var slug = _getLayerSlug(uuid, list),
+                    url = slug ? _layerUrlPattern.replace('{layerSlug}', slug) : null;
+                if (url) {
+                    success_callback(url);
+                } else {
+                    error_callback();
+                }
+            });
+        }
+
+    };
+
+}]);
+
 angular.module('wcodpApp').factory('packery', ['$timeout', function($timeout) {
 
     var pckry,
@@ -31855,7 +31929,7 @@ angular.module('wcodpApp').directive('resultsList', ['$http', '$location', funct
 }]);
 
 
-angular.module('wcodpApp').directive('result', ['$http', '$location', 'metadata', function($http, $location, metadata) {
+angular.module('wcodpApp').directive('result', ['$http', '$location', 'metadata', function($http, $location, metadata, marinePlanner) {
 
     return {
         templateUrl: '/assets/views/ResultView.html',
@@ -31873,6 +31947,8 @@ angular.module('wcodpApp').directive('result', ['$http', '$location', 'metadata'
 
             scope.map = null;
 
+            scope.marinePlannerUrl = '';
+
             scope.metadata = {
                 datePublished: '',
                 creator: '',
@@ -32057,6 +32133,21 @@ angular.module('wcodpApp').directive('result', ['$http', '$location', 'metadata'
             scope.jsonUrl = function () {
                 return scope.metadataXmlUrl() + '&f=pjson';
             };
+            
+            scope.marinePlannerUrl = function () {
+                var uuid = scope.resultData['sys.sync.foreign.id_s'];
+                if (scope.marinePlannerUrl.length > 0) {
+                    return scope.marinePlannerUrl;
+                } else {
+                    var success = function (result) {
+                        scope.marinePlannerUrl = result;
+                    };
+                    var error = function () {
+                        scope.marinePlannerUrl = '#error';
+                    };
+                    marinePlanner.getMarinePlannerUrl(uuid, success, error);
+                }
+            };
 
             scope.getLinks = function () {
                 $http.get(scope.jsonUrl()).success(function (data) {
diff --git a/site_raw/_includes/css/main.css b/site_raw/_includes/css/main.css
index f04742a..7c1060b 100644
--- a/site_raw/_includes/css/main.css
+++ b/site_raw/_includes/css/main.css
@@ -192,7 +192,11 @@ small {
   background-color: transparent;
 }
 .home-item-cntr {
-  padding: 10px 15px 15px 15px;
+  padding: 0px 15px 0px 15px;
+  height: 100%;
+}
+a > div.home-item-cntr:hover {
+  background: rgba(4, 4, 4, 0.1);
 }
 .home-item-cntr.welcome {
   padding: 20px 30px 30px 30px;
@@ -221,6 +225,7 @@ small {
   font-size: 24px;
 }
 .home-item-label {
+  padding-top: 10px;
   margin-bottom: 10px;
 }
 .home-item-label > .pull-left {
diff --git a/site_raw/_includes/less/main.less b/site_raw/_includes/less/main.less
index 36677e9..cbb3e61 100644
--- a/site_raw/_includes/less/main.less
+++ b/site_raw/_includes/less/main.less
@@ -234,7 +234,10 @@ small {
 .home-item.lightGrey { background-color: @lightGrey; }
 .home-item.transparent { background-color: transparent; }
 
-.home-item-cntr { padding: 10px 15px 15px 15px; }
+.home-item-cntr { padding: 0px 15px 0px 15px; height: 100%; }
+a > div.home-item-cntr:hover {
+  background: rgba(4, 4, 4, 0.1);
+}
 .home-item-cntr.welcome { padding: 20px 30px 30px 30px; }
 
 .home-item-cntr.search { padding: 30px 20px 20px 20px; }
@@ -267,6 +270,7 @@ small {
   font-size: 24px;
 }
 .home-item-label {
+  padding-top: 10px;
   margin-bottom: 10px;
 }
 .home-item-label > .pull-left {
diff --git a/site_raw/assets/js/all.js b/site_raw/assets/js/all.js
index ba19076..fcd4063 100644
--- a/site_raw/assets/js/all.js
+++ b/site_raw/assets/js/all.js
@@ -47,6 +47,7 @@ angular.module('wcodpApp', ['ui.bootstrap', 'leaflet-directive']);
 {% include js/filters/TitleCase.js%}
 // Services
 {% include js/services/Solr.js %}
+{% include js/services/MarinePlanner.js %}
 {% include js/services/Packery.js %}
 {% include js/services/Metadata.js %}
 {% include js/services/BrowserSize.js %}