diff --git a/web_client/application/controllers/g3_client.php b/web_client/application/controllers/g3_client.php
index e5446016..0b4e993d 100644
--- a/web_client/application/controllers/g3_client.php
+++ b/web_client/application/controllers/g3_client.php
@@ -99,6 +99,10 @@ class G3_Client_Controller extends Template_Controller {
   private function _get_detail($resource) {
     $v = new View("{$resource->type}_detail.html");
     $v->resource = $resource;
+    $v->parent_path = substr($resource->path, 0, -strlen($resource->internet_address));
+    if (strrpos($v->parent_path, "/") == strlen($v->parent_path) - 1) {
+      $v->parent_path = substr($v->parent_path, 0, -1);
+    }
     return $v;
   }
 } // End G3 Client Controller
diff --git a/web_client/application/views/album_detail.html.php b/web_client/application/views/album_detail.html.php
index f6bd4278..bac3edcc 100644
--- a/web_client/application/views/album_detail.html.php
+++ b/web_client/application/views/album_detail.html.php
@@ -1,14 +1,19 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<ul id="thumb-grid" class="ui-helper-clearfix">
+<script>
+  var parent_path = "<?= $parent_path ?>";
+  var current_path = "<?= $resource->path ?>";
+  var resource_type = "album";
+</script>
+<ul id="wc-thumb-grid" class="ui-helper-clearfix">
   <? foreach ($resource->children as $child): ?>
-  <li class="thumb-grid-cell" ref="<?= $child->path ?>">
-  <a class="child-link" href="#">
-  <? if ($child->has_thumb): ?>
-    <img src="<?= $child->thumb_url ?>" title="<?= $child->title ?>" />
-  <? else: ?>
-    <span><?= $child->title ?></span>
-  <? endif ?>
-  </a>
+  <li class="wc-thumb-grid-cell" ref="<?= $child->path ?>">
+      <a class="wc-child-link wc-image-block" href="#">
+        <? if ($child->has_thumb): ?>
+        <img src="<?= $child->thumb_url ?>" title="<?= $child->title ?>" />
+        <? else: ?>
+        <span><?= $child->title ?></span>
+        <? endif ?>
+      </a>
   </li>
   <? endforeach ?>
 </ul>
diff --git a/web_client/application/views/main.html.php b/web_client/application/views/main.html.php
index a9102b3c..1f0f2991 100644
--- a/web_client/application/views/main.html.php
+++ b/web_client/application/views/main.html.php
@@ -4,11 +4,11 @@
 </div>
 <div id="center">
   <div class="wc-toolbar ui-widget-header ui-corner-all ui-helper-clearfix">
-    <div class="wc-buttonset ui-helper-clearfix">
-      <a href="#" ref="first" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-all" title="First"><span class="ui-icon ui-icon-seek-first"></span>First</a>
-      <a href="#" ref="previous" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-all" title="Previous"><span class="ui-icon ui-icon-seek-prev"></span>Previous</a>
-      <a href="#" ref="next" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-all" title="Next"><span class="ui-icon ui-icon-seek-next"></span>Next</a>
-      <a href="#" ref="last" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-all" title="Last"><span class="ui-icon ui-icon-seek-end"></span>Last</a>
+    <div class="wc-buttonset wc-buttonset-single ui-helper-clearfix">
+      <a href="#" ref="first" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-left" title="First"><span class="ui-icon ui-icon-seek-first"></span>First</a>
+      <a href="#" ref="previous" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo" title="Previous"><span class="ui-icon ui-icon-seek-prev"></span>Previous</a>
+      <a href="#" ref="next" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo" title="Next"><span class="ui-icon ui-icon-seek-next"></span>Next</a>
+      <a href="#" ref="last" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-right" title="Last"><span class="ui-icon ui-icon-seek-end"></span>Last</a>
     </div>
     <div class="wc-buttonset ui-helper-clearfix">
       <a href="#" ref="parent" class="wc-button ui-state-default ui-state-disabled wc-button-icon-solo ui-corner-all" title="Parent"><span class="ui-icon ui-icon-eject"></span>Parent</a>
@@ -20,7 +20,8 @@
     </div>
 
     <div class="wc-buttonset wc-buttonset-single ui-helper-clearfix">
-      <a href="#" ref="add" class="wc-button ui-state-default wc-button-icon-solo ui-corner-all" title="Add Resource"><span class="ui-icon ui-icon-transferthick-e-w"></span>Add Resource</a>
+      <a href="#" id="add-resource" ref="add_album" class="wc-button ui-state-active ui-corner-left" ><span>Add Album<span></a>
+      <a href="#" class="wc-button ui-state-active wc-button-icon-solo ui-corner-right" title="Resources"><span class="ui-icon ui-icon-triangle-1-s"></span>&nbsp</a>
     </div>
   </div>
   <div id="wc-detail">
diff --git a/web_client/application/views/movie_detail.html.php b/web_client/application/views/movie_detail.html.php
index 3ff9accb..e8ada54f 100644
--- a/web_client/application/views/movie_detail.html.php
+++ b/web_client/application/views/movie_detail.html.php
@@ -1,5 +1,10 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<div id="movie" ref="<?= $resource->path ?>">
+<script>
+  var parent_path = "<?= $parent_path ?>";
+  var current_path = "<?= $resource->path ?>";
+  var resource_type = "movie";
+</script>
+<div id="movie">
   <a id="movie-link" href="<?= $resource->url ?>" title="<?= $resource->title ?>"
    style="display: block; height: <?= $resource->size->height ?>px; width: <?= $resource->size->width ?>px;" />
 </div>
diff --git a/web_client/application/views/photo_detail.html.php b/web_client/application/views/photo_detail.html.php
index ca5533f6..0f7b6977 100644
--- a/web_client/application/views/photo_detail.html.php
+++ b/web_client/application/views/photo_detail.html.php
@@ -1,5 +1,10 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<div id="photo" ref="<?= $resource->path ?>">
+<script>
+  var parent_path = "<?= $parent_path ?>";
+  var current_path = "<?= $resource->path ?>";
+  var resource_type = "photo";
+</script>
+<div id="photo">
   <img src="<?= $resource->resize_url ?>" title="<?= $resource->title ?>" />
 </div>
 <div id="photo-info">
diff --git a/web_client/css/g3_client.css b/web_client/css/g3_client.css
index 8c01fdcb..2cff5504 100644
--- a/web_client/css/g3_client.css
+++ b/web_client/css/g3_client.css
@@ -87,6 +87,7 @@ span.error {
   height: 100%;
   overflow: auto;
   font-size: 1.1em;
+  padding-top: 5px;
 }
 
 #wc-body #left #album_tree ul li {
@@ -121,7 +122,12 @@ span.error {
   cursor: pointer;
 }
 
-#wc-body #center .thumb-grid-cell {
+#wc-body #center #wc-thumb-grid {
+  width: 100%;
+  list-style: none;
+}
+
+#wc-body #center .wc-thumb-grid-cell {
   border: 1px solid transparent;
   float: left;
   height: 200px;
@@ -132,8 +138,15 @@ span.error {
   width: 200px;
 }
 
-#wc-body #center .thumb-grid-cell img,
-#wc-body #center .thumb-grid-cell span {
+#wc-body #center .wc-thumb-grid-cell img {
+  display: block;
+  margin: 0 auto;
+  padding: 5%;
+  width: 89%;
+  -ms-interpolation-mode: bicubic;
+}
+
+#wc-body #center .wc-thumb-grid-cell span {
   vertical-align: middle;
 }
 
@@ -177,6 +190,14 @@ a.wc-button {
   float:left;
 }
 
+a.ui-state-active {
+  color: #EB8F00 !important;
+}
+
+a.ui-state-default {
+  background: #FFFFFF;
+}
+
 /* remove extra button width in IE */
 button.wc-button {
   width:auto;
diff --git a/web_client/js/g3_client.js b/web_client/js/g3_client.js
index 623a4f79..6948992c 100644
--- a/web_client/js/g3_client.js
+++ b/web_client/js/g3_client.js
@@ -22,17 +22,13 @@
           $(obj).html(data.content);
           if (data.status == "ok") {
             initializeDetail(obj);
-            save_paths($(".tree-title.ui-selected").parents("li:first").attr("ref"));
-          } else {
+           } else {
             ajaxifyLoginForm(obj);
           }
         }
       });
     } else {
-      console.group("ajaxifyLoginForm");
       initializeDetail(obj);
-      save_paths($(".tree-title.ui-selected").parents("li:first").attr("ref"));
-      console.groupEnd();
     }
   };
 
@@ -61,48 +57,42 @@
       return false;
     });
 
-    $("#center a.child-link").live("dblclick", function(event) {
+    $("#center a.wc-child-link").live("dblclick", function(event) {
       event.preventDefault();
       event.stopPropagation();
       var path = $(this).parents("li:first").attr("ref");
       var url = $(this).attr("href");
-      get_detail(path, function(path) {
-        var album = $("#album_tree [ref='" + path + "']");
-        if (album.length > 0) {
-          $(".tree-title.ui-selected").removeClass("ui-selected");
-          $(".tree-title", album).addClass("ui-selected");
-        }
-      });
+      get_detail(path, _set_active_album);
       return false;
     });
 
-    $("#center a.child-link").live("click", function(event) {
-      $(".thumb-grid-cell.ui-selected").removeClass("ui-selected");
+    $("#center a.wc-child-link").live("click", function(event) {
+      $(".wc-thumb-grid-cell.ui-selected").removeClass("ui-selected");
       $(this).parents("li:first").addClass("ui-selected");
-      _set_navigation_buttons($(".thumb-grid-cell.ui-selected").attr("ref"));
+      _set_navigation_buttons($(".wc-thumb-grid-cell.ui-selected").attr("ref"));
       return false;
     });
 
     $(".wc-button").live("click", function() {
-      if ($(this).parent("a").hasClass("ui-state-disabled")) {
+      if ($(this).hasClass("ui-state-disabled")) {
         return false;
       }
-      var selected = $(".thumb-grid-cell.ui-selected");
       switch ($(this).attr("ref")) {
       case "parent":
-        get_detail($("span", this).attr("ref"));
+        get_detail($("span", this).attr("ref"), _set_active_album);
         break;
       case "first":
       case "previous":
       case "next":
       case "last":
-        if (selected.length == 0) {
+        if (resource_type != "album") {
           get_detail($("span", this).attr("ref"));
         } else {
+          var selected = $(".wc-thumb-grid-cell.ui-selected");
           selected.removeClass("ui-selected");
           switch ($(this).attr("ref")) {
           case "first":
-            $(".thumb-grid-cell:first").addClass("ui-selected");
+            $(".wc-thumb-grid-cell:first").addClass("ui-selected");
             break;
           case "previous":
             selected.prev().addClass("ui-selected");
@@ -111,8 +101,7 @@
             selected.next().addClass("ui-selected");
             break;
           case "last":
-            $(".thumb-grid-cell:last").addClass("ui-selected");
-            _set_navigation_buttons();
+            $(".wc-thumb-grid-cell:last").addClass("ui-selected");
             break;
           }
           _set_navigation_buttons();
@@ -135,68 +124,60 @@
 
     $("#album_tree [ref=''] .tree-title:first").addClass("ui-selected");
     set_selected_thumb();
-  };
+    save_paths();
+  }
+
+  function _set_active_album(path) {
+    var album = $("#album_tree [ref='" + path + "']");
+    if (album.length > 0) {
+      $(".tree-title.ui-selected").removeClass("ui-selected");
+      $(".tree-title:first", album).addClass("ui-selected");
+    }
+  }
 
   function set_selected_thumb() {
-     if ($(".thumb-grid-cell.ui-selected").length == 0) {
-       $(".thumb-grid-cell:first").addClass("ui-selected");
+     if ($(".wc-thumb-grid-cell.ui-selected").length == 0) {
+       $(".wc-thumb-grid-cell:first").addClass("ui-selected");
      }
   }
 
   function get_detail(path, callback) {
     $.get("/g3_client/index.php/g3_client/detail", {path: path}, function(data, textStatus) {
-      console.group("get_detail.get callback");
       $("#wc-detail").html(data);
       set_selected_thumb();
-      save_paths(path);
+      save_paths();
       if (callback) {
         callback(path);
       }
-      console.groupEnd();
     });
   }
 
-  function save_paths(path) {
-    _paths[path] = [];
-    $(".thumb-grid-cell").each(function(i) {
-      _paths[path][i] = $(this).attr("ref");
+  function save_paths() {
+    _paths[current_path] = [];
+    $(".wc-thumb-grid-cell").each(function(i) {
+      _paths[current_path][i] = $(this).attr("ref");
     });
 
-    console.dir(_paths);
-    enable_toolbar_buttons(path);
+    _set_navigation_buttons();
   }
 
-  function enable_toolbar_buttons(path) {
-    if (path != "") {
+  function _set_navigation_buttons() {
+    if (current_path != "") {
       $(".wc-toolbar .ui-icon-eject").parent("a").removeClass("ui-state-disabled");
       $(".wc-toolbar .ui-icon-trash").parent("a").removeClass("ui-state-disabled");
     } else {
       $(".wc-toolbar .ui-icon-eject").parent("a").addClass("ui-state-disabled");
       $(".wc-toolbar .ui-icon-trash").parent("a").addClass("ui-state-disabled");
     }
-    $(".wc-toolbar .ui-icon-eject").attr("ref", _get_parent_path(path));
-    $(".wc-toolbar .ui-icon-pencil").attr("ref", path);
+    $(".wc-toolbar .ui-icon-eject").attr("ref", parent_path);
+    $(".wc-toolbar .ui-icon-pencil").attr("ref", current_path);
+    $(".wc-toolbar .ui-icon-trash").attr("ref", current_path);
+    $(".wc-toolbar #add-resource span")
+      .attr("ref", resource_type == "album" ? current_path : parent_path);
 
-    _set_navigation_buttons();
-  }
-
-  function _get_parent_path(path) {
-    var idx = path.lastIndexOf("/");
-    return idx != -1 ? path.substring(0, idx) : "";
-  }
-
-  function _set_navigation_buttons() {
-    var selected_path = $(".thumb-grid-cell.ui-selected").attr("ref");
-    if (selected_path == undefined) { // not found must be photo or movie
-      selected_path = $("#wc-detail div:first").attr("ref");
-    }
-    var parent_path = _get_parent_path(selected_path);
-    console.log("path: " + selected_path + "; parent_path: " + parent_path);
-    var paths = _paths[parent_path];
-    console.group("parent path");
-    console.dir(paths);
-    console.groupEnd();
+    var paths = _paths[resource_type == "album" ?  current_path : parent_path];
 
+    $(".wc-toolbar .ui-icon-pencil").attr("ref", current_path);
     if (paths.length > 0) {
       $(".wc-toolbar .ui-icon-seek-first").parent("a").removeClass("ui-state-disabled");
       $(".wc-toolbar .ui-icon-seek-end").parent("a").removeClass("ui-state-disabled");
@@ -207,6 +188,8 @@
       $(".wc-toolbar .ui-icon-seek-end").parent("a").addClass("ui-state-disabled");
     }
 
+    var selected_path =
+      resource_type == "album" ? $(".wc-thumb-grid-cell.ui-selected").attr("ref") : current_path;
     var i = 0;
     for (; i < paths.length; i++) {
       if (paths[i] == selected_path) {
@@ -228,6 +211,5 @@
       $(".wc-toolbar .ui-icon-seek-next").parent("a").addClass("ui-state-disabled");
       $(".wc-toolbar .ui-icon-seek-end").parent("a").addClass("ui-state-disabled");
     }
-    console.log("found path: " + paths[i]);
   }
- })(jQuery);
+})(jQuery);