diff --git a/css/pear.css b/css/pear.css
index 881bf2b5..ce42c70f 100644
--- a/css/pear.css
+++ b/css/pear.css
@@ -143,22 +143,3 @@ a, .g-menu a, #g-dialog a, .g-button, .g-button:hover, .g-button:active, a.ui-st
  padding-top: 6px;
 }
 
-a.buttonFirst { background-position: 0px 0px !important; }
-a.buttonFirst:hover { background-position: -15px 0px !important; }
-a.buttonPrev { background-position:  0px -15px !important; }
-a.buttonPrev:hover { background-position:  -15px -15px !important; }
-a.buttonNext { background-position: 0px -30px !important;}
-a.buttonNext:hover { background-position: -15px -30px !important;}
-a.buttonLast { background-position: 0px -45px !important; }
-a.buttonLast:hover { background-position: -15px -45px !important; }
-
-a.buttonNext, a.buttonLast { float: right; }
-a.buttonFirst, a.buttonPrev { float: left; }
-
-.g-paginator .buttonAction {
-	background: url("../icons/paginator.gif") no-repeat 0 0;
-	height: 15px;
-	width: 15px;
-	margin-left: 0;
-	display: block;
-}
diff --git a/icons/addcomment.gif b/icons/addcomment.gif
deleted file mode 100644
index 35cd6f81..00000000
Binary files a/icons/addcomment.gif and /dev/null differ
diff --git a/icons/album.gif b/icons/album.gif
deleted file mode 100644
index 9c59d447..00000000
Binary files a/icons/album.gif and /dev/null differ
diff --git a/icons/carousel.png b/icons/carousel.png
deleted file mode 100644
index 17dab5b3..00000000
Binary files a/icons/carousel.png and /dev/null differ
diff --git a/icons/carousel_active.png b/icons/carousel_active.png
deleted file mode 100644
index 52be650e..00000000
Binary files a/icons/carousel_active.png and /dev/null differ
diff --git a/icons/cart.gif b/icons/cart.gif
deleted file mode 100644
index 27e7be94..00000000
Binary files a/icons/cart.gif and /dev/null differ
diff --git a/icons/close.gif b/icons/close.gif
deleted file mode 100644
index 3019ba47..00000000
Binary files a/icons/close.gif and /dev/null differ
diff --git a/icons/color.css b/icons/color.css
deleted file mode 100644
index 890e5112..00000000
--- a/icons/color.css
+++ /dev/null
@@ -1,278 +0,0 @@
-/* <?php $colorpackName = $gallery->i18n('Ice Carbon Icons'); ?>
- * $Revision: 16034 $
- */
-
-#gallery {
-	color: #999 !important;
-	background-color: #333 !important;
-}
-body.gallery { background-color: #333 !important; }
-
-.gbBlock {
-	border-color: #666 !important;
-}
-
-.gcBorder1 { border-color: #6f6f6f !important; }
-.gcBorder2 { border-color: #666 !important; }
-
-#gallery a { color: #999 !important; }
-#gallery a:hover { color: #ccc !important; }
-#gallery a:active { color: #ccc !important; }
-
-.giError { color: #f00 !important; }
-.giInfo { color: #888 !important; }
-.block-core-PeerList .current { color: #ccc !important; }
-
-table.gbDataTable th { background-color: #4f4f4f !important; }
-.gbEven { background-color: #3f3f3f !important; }
-.gbOdd { background-color: #393939 !important; }
-
-#gallery select { 
-	background-color: #bbb !important; 
-	-moz-border-top-colors: #AAA #EEE !important;
-	-moz-border-left-colors: #AAA #EEE !important;
-	-moz-border-bottom-colors: #AAA #EEE !important;
-	-moz-border-right-colors: #AAA #EEE !important;
-}
-
-#gallery input { 
-   	background-color: #bbb !important; 
-    	-moz-border-top-colors: #AAA #EEE !important;
-    	-moz-border-left-colors: #AAA #EEE !important;
-    	-moz-border-bottom-colors: #AAA #EEE !important;
-    	-moz-border-right-colors: #AAA #EEE !important;
-}
-
-#gallery textarea { 
-   	background-color: #bbb !important;
-    	-moz-border-top-colors: #AAA #EEE !important;
-    	-moz-border-left-colors: #AAA #EEE !important;
-    	-moz-border-bottom-colors: #AAA #EEE !important;
-    	-moz-border-right-colors: #AAA #EEE !important;
-}
-
-#gallery input:focus, #gallery textarea:focus {
-	background-color: #ddd !important;
-	-moz-border-top-colors: #AAA #EEE !important;
-	-moz-border-left-colors: #AAA #EEE !important;
-	-moz-border-bottom-colors: #AAA #EEE !important;
-	-moz-border-right-colors: #AAA #EEE !important;
-}
-
-#gallery input.inputTypeSubmit, #gallery input.inputTypeButton {  /* No input[type=submit] in IE */
-  	color: #333 !important;
-  	background-color: #eee !important;
-}
-#gallery input.inputTypeSubmit:hover, #gallery input.inputTypeButton:hover {  /* No input[type=submit] in IE */
-  	background-color:  #ccc !important;
-}
-
-#gallery select:hover { 
-   	 background-color: #ddd !important;
-	-moz-border-top-colors: #AAA #EEE !important;
-    	-moz-border-left-colors: #AAA #EEE !important;
-    	-moz-border-bottom-colors: #AAA #EEE !important;
-    	-moz-border-right-colors: #AAA #EEE !important;
-}
-
-#gallery div.gbTabBar a {
-  	color: #00a0ff !important;
-}
-
-#gsSidebarCol {
-  	border: #666 1px solid !important;
-  	background-color: #333 !important;
-}
-
-#gallery img.giThumbnail:hover {
-	border-color: #333 !important;
-    	background-color: #555 !important;
-}
-
-#gallery img.giThumbnailIce {
-	background-color: #444 !important;
-	border: 1px solid #666 !important;
-}
-#gallery img.giThumbnailIce:hover {
-	background-color: #555 !important;
-}
-
-#microThumb img.giThumbnailIce {
-	border-color: #333 !important;
-}
-
-#microThumb img.giThumbnailIce:hover {
-	border-color: #666 !important;
-}
-
-#microThumbCurrent img.giThumbnailIce {
-  	border-color: #333 !important;
-}
-
-#microThumbCurrent img.giThumbnailIce:hover {
-	border-color: #666 !important;
-}
-
-#gsNavBar div.gbBreadCrumb {
- 	background-image: none !important; 
-}
-
-#photoframe {
-	background-color: #333 !important;
-	border: 0px solid #ddd !important;
-	padding: 0px !important; 
-	-moz-border-radius: 0px !important;
-}
-
-div.gbTabBar span.o {
-  	padding: 6px 0 5px 16px !important;
-  	background: url('table_left.gif') no-repeat left top !important;
-}
-
-#gallery div.gbTabBar span span {
-  	padding: 6px 16px 5px 4px !important;
-  	background: url('table_right.gif') no-repeat right top !important;
-}
-
-#gallery div.gbTabBar a {
-  	color: #666 !important;
-  	text-decoration: none !important;
-}
-
-#gallery div.gbTabBar a:hover { color: #333 !important; }
-
-#gallery div.gbTabBar span.giSelected {
-  	background-image: url('table_left_on.gif') !important;
-}
-
-#gallery div.gbTabBar span.giSelected span {
-  	color: #333;
-  	background-image: url('table_right_on.gif') !important;
-}
-
-span.bsw_ButtonEnabled {
-  	color: #ddd !important;
-}	
-.autoCompleteContainer li {
-  background-color: #333 !important;
-}
-
-.buttonAction a {
-  display: block !important;
-  width: 20px !important;
-  height: 20px !important; 
-  margin-left: 7px !important;
-}
-
-.buttonAction a {
-  opacity: 1.0 !important;
-  filter: alpha(opacity=100) !important; /* IE's opacity*/
-}
-
-.buttonAction a:hover { 
-  opacity: 1.0 !important;
-  filter: alpha(opacity=100)!important; /* IE's opacity*/
- }
-
- .iconAlbum {
-  background: url('album.gif') no-repeat !important;
-  background-position: center center !important;
-}
-
-.buttonClose a {
-  padding: 0px !important;
-  width: 15px !important;
-  height: 15px !important;
-  background: url('close.gif') no-repeat !important;
-  margin: 1px !important;
-}
-.buttonClose a:hover { background-position: -15px 0 !important; }
-
-.buttonFirst a {
-  width: 15px !important;
-  height: 15px !important;
-  margin-left: 0px !important;
-  background: url('first.gif') no-repeat !important;
-}
-.buttonFirst a:hover { background-position: -15px 0 !important; }
-
-.buttonLast a {
-  width: 15px !important;
-  height: 15px !important;
-  margin-left: 0px !important;  
-  background: url('last.gif') no-repeat !important;
-}
-.buttonLast a:hover { background-position: -15px 0 !important; }
-
-.buttonPrev a {
-  width: 15px !important;
-  height: 15px !important;
-  margin-left: 0px !important;
-  background: url('prev.gif') no-repeat !important;
-}
-.buttonPrev a:hover { background-position: -15px 0 !important; }
-
-.buttonNext a {
-  width: 15px !important;
-  height: 15px !important;
-  margin-left: 0px !important;
-  background: url('next.gif') no-repeat !important;
-}
-.buttonNext a:hover { background-position: -15px 0 !important; }
-
-.buttonExif a {
-  width: 18px !important;
-  height: 15px !important;
-  padding: 0px !important;  
-  background: url('exif.gif') no-repeat !important;
-}
-.buttonExif a:hover { background-position: -18px 0 !important; }
-
-.buttonPopup a {
-  width: 17px !important;
-  height: 15px !important;
-  padding: 0px !important;  
-  background: url('popup.gif') no-repeat !important;
-}
-.buttonPopup a:hover { background-position: -17px 0 !important; }
-
-.buttonAddComment a {
-  width: 15px !important;
-  height: 15px !important;
-  padding: 0px !important;  
-  background: url('addcomment.gif') no-repeat !important;
-}
-.buttonAddComment a:hover { background-position: -15px 0 !important; }
-
-.buttonViewComments a {
-  width: 15px !important;
-  height: 15px !important;
-  padding: 0px !important;  
-  background: url('viewcomments.gif') no-repeat !important;
-}
-.buttonViewComments a:hover { background-position: -15px 0 !important; }
-
-.buttonViewSlideshow a {
-  width: 15px !important;
-  height: 15px !important;
-  padding: 0px !important;  
-  background: url('slideshow.gif') no-repeat !important;
-}
-.buttonViewSlideshow a:hover { background-position: -15px 0 !important; }
-
-.buttonCart a {
-  width: 16px !important;
-  height: 15px !important;
-  padding: 0px !important;
-  background: url('cart.gif') no-repeat !important;
-}
-.buttonCart a:hover { background-position: -16px 0 !important; }
-
-.buttonShowSidebar a {
-  width: 15px !important;
-  height: 15px !important;
-  padding: 0px !important;
-  background: url('showsidebar.gif') no-repeat !important;
-}
-.buttonShowSidebar a:hover { background-position: -15px 0 !important; }
-
diff --git a/icons/exif.gif b/icons/exif.gif
deleted file mode 100644
index 281214be..00000000
Binary files a/icons/exif.gif and /dev/null differ
diff --git a/icons/grid.png b/icons/grid.png
deleted file mode 100644
index 11238964..00000000
Binary files a/icons/grid.png and /dev/null differ
diff --git a/icons/grid_active.png b/icons/grid_active.png
deleted file mode 100644
index 2602a795..00000000
Binary files a/icons/grid_active.png and /dev/null differ
diff --git a/icons/mosaic.png b/icons/mosaic.png
deleted file mode 100644
index 484fa7bd..00000000
Binary files a/icons/mosaic.png and /dev/null differ
diff --git a/icons/mosaic_active.png b/icons/mosaic_active.png
deleted file mode 100644
index aedf8d48..00000000
Binary files a/icons/mosaic_active.png and /dev/null differ
diff --git a/icons/paginator.gif b/icons/paginator.gif
deleted file mode 100644
index fb884748..00000000
Binary files a/icons/paginator.gif and /dev/null differ
diff --git a/icons/pear.css b/icons/pear.css
index fe2bac04..548a17fe 100644
--- a/icons/pear.css
+++ b/icons/pear.css
@@ -92,8 +92,8 @@ background: transparent url('pear_logo_sml.png') no-repeat center left;
 	position: relative;
 	color: #FFFFFF;
 	height: 17px;
-	padding: 0px 0px;
-	width: auto;
+	padding: 0px 0px 0px 30px;
+	width: 131px;
 	float: right;
 	z-index: 100;
 	font-size: 12px;
@@ -310,39 +310,45 @@ cursor: default;
 
 /************************ VIEW CONTROLS **************************/
 #viewControls {
-position: relative;
-color: #616161;
-width: 334px;
-float: left;
-			 margin-left: 30px;
-			 margin-top: 13px;
-			 z-index: 800;
-			 font-size: 12px;
-			 text-shadow:  #111111 0px -1px 1px;
+    position: relative;
+    color: #616161;
+    width: 370px;
+    float: left;
+    padding-left: 30px;
+    padding-top: 13px;
+    z-index: 800;
+    font-size: 12px;
+    text-shadow:  #111111 0px -1px 1px;
 }
 
-.japanese #viewControls {
-	font-size: 11px;
-}
-
-#viewControls .separator {
-width: 55px;
-height: 18px;
-				padding-left: 5px;
-}
 #viewControls .label {
 	margin-top:-1px;
 }
 
 #viewControls .viewSwitcher {
 height: 14px;
-
-				margin-right: 17px;
+margin-right: 17px;
 float: left;
 cursor: pointer; /* hand-shaped cursor */
-cursor: hand; /* for IE 5.x */
-				font-weight: bold;
+font-weight: bold;
 }
+.vs-icon {
+    background-image: url('viewMode.png');
+    background-repeat: no-repeat;
+    width: 20px;
+    height: 15px;
+    display: block;
+    float: left;
+}
+
+.vs-icon-grid { background-position: 0px 0px; } 
+.hover-with-viewSwitcher .vs-icon-grid, .sel-with-viewSwitcher .vs-icon-grid { background-position: 0px -15px; }
+.vs-icon-mosaic { background-position: -20px 0px; }
+.hover-with-viewSwitcher .vs-icon-mosaic, .sel-with-viewSwitcher .vs-icon-mosaic { background-position: -20px -15px; }
+.vs-icon-carousel { background-position: -40px 0px; }
+.hover-with-viewSwitcher .vs-icon-carousel, .sel-with-viewSwitcher .vs-icon-carousel { background-position: -40px -15px; }
+.vs-icon-slideshow { background-position: -60px 0px; }
+.hover-with-viewSwitcher .vs-icon-slideshow, .sel-with-viewSwitcher .vs-icon-slideshow { background-position: -60px -15px; }
 
 #viewControls .viewSwitcher:hover, #viewControls .sel-with-viewSwitcher, #viewControls .hover-with-viewSwitcher {
 color: #ffffff;
@@ -350,58 +356,8 @@ color: #ffffff;
 #viewControls .sel-with-viewSwitcher {
 	cursor: default;
 }
-#viewControls #grid {
-background: url('grid.png') center left no-repeat;
-						text-indent: 20px;
-
-}
-
-#viewControls #grid:hover,
-#viewControls #grid.sel {
-color: #ffffff;
-background: url('grid_active.png') center left no-repeat;
-
-}
-
-#viewControls #carousel {
-	text-indent: 22px;
-background: url('carousel.png') center left no-repeat;
-
-}
-
-#viewControls #carousel:hover,
-#viewControls #carousel.sel {
-background: url('carousel_active.png') center left no-repeat;
-
-}
 
 
-
-#viewControls #mosaic {
-
-background: url('mosaic.png') center left no-repeat;
-						text-indent: 20px;
-}
-
-#viewControls #mosaic:hover,
-#viewControls #mosaic.sel {
-background: url('mosaic_active.png') center left no-repeat;
-
-}
-
-#viewControls #slideshow {
-	text-indent: 16px;
-background: url('slideshow.png') center left no-repeat;
-float: left;
-			 margin-right: 0px;
-}
-
-#viewControls #slideshow:hover,
-#viewControls #slideshow.sel {
-color: #ffffff;
-background: url('slideshow_active.png') center left no-repeat;
-
-}
 /************************ DETAIL VIEW **************************/
 
 #detailView {
diff --git a/icons/popup.gif b/icons/popup.gif
deleted file mode 100644
index fbb09ea0..00000000
Binary files a/icons/popup.gif and /dev/null differ
diff --git a/icons/showsidebar.gif b/icons/showsidebar.gif
deleted file mode 100644
index b5fcd868..00000000
Binary files a/icons/showsidebar.gif and /dev/null differ
diff --git a/icons/slideshow.gif b/icons/slideshow.gif
deleted file mode 100644
index 2738b9c8..00000000
Binary files a/icons/slideshow.gif and /dev/null differ
diff --git a/icons/slideshow.png b/icons/slideshow.png
deleted file mode 100644
index 54b04497..00000000
Binary files a/icons/slideshow.png and /dev/null differ
diff --git a/icons/slideshow_active.png b/icons/slideshow_active.png
deleted file mode 100644
index 4aa7386c..00000000
Binary files a/icons/slideshow_active.png and /dev/null differ
diff --git a/icons/table_left.gif b/icons/table_left.gif
deleted file mode 100644
index fa3981cf..00000000
Binary files a/icons/table_left.gif and /dev/null differ
diff --git a/icons/table_left_on.gif b/icons/table_left_on.gif
deleted file mode 100644
index 9cd7c879..00000000
Binary files a/icons/table_left_on.gif and /dev/null differ
diff --git a/icons/table_right.gif b/icons/table_right.gif
deleted file mode 100644
index cf4b804d..00000000
Binary files a/icons/table_right.gif and /dev/null differ
diff --git a/icons/table_right_on.gif b/icons/table_right_on.gif
deleted file mode 100644
index f508859e..00000000
Binary files a/icons/table_right_on.gif and /dev/null differ
diff --git a/icons/viewMode.png b/icons/viewMode.png
new file mode 100644
index 00000000..2054c833
Binary files /dev/null and b/icons/viewMode.png differ
diff --git a/icons/viewcomments.gif b/icons/viewcomments.gif
deleted file mode 100644
index fd3ca07d..00000000
Binary files a/icons/viewcomments.gif and /dev/null differ
diff --git a/js/pear.js b/js/pear.js
index 522f009a..e462a13a 100644
--- a/js/pear.js
+++ b/js/pear.js
@@ -135,7 +135,7 @@ function updateHash() {
         img = "img=" + currentImg;
     }
     hash = "#" + img + getViewMode() + "&bgcolor=" + bgcolor;
-    if($('#paginator')) { $('#paginator a').each(function () { val = $(this).attr("href"); i = val.indexOf("#"); if (i !== -1) { val = val.substr(0, i) } $(this).attr("href", val + hash); }); 
+    if($('#paginator')) { $('#paginator a').each(function () { val = $(this).attr("href"); i = val.indexOf("#"); if (i !== -1) { val = val.substr(0, i); } $(this).attr("href", val + hash); }); 
     }
     window.location.hash = hash;
 }
@@ -523,12 +523,13 @@ function bodyLoad(vm, bgcolor) {
         }
       },
       function() {
-        if(mosaicView) { return; }
+        var sib_height;
+        if (mosaicView) { return; }
         // Reset item height and position
         if ($(this).next().height()) {
-          var sib_height = $(this).next().height();
+          sib_height = $(this).next().height();
         } else {
-          var sib_height = $(this).prev().height();
+          sib_height = $(this).prev().height();
         }
         if ($.browser.msie && $.browser.version >= 8) {
           sib_height = sib_height + 1;
@@ -539,6 +540,14 @@ function bodyLoad(vm, bgcolor) {
         $("#g-place-holder").remove();
       }
     );
+    $(".viewSwitcher").hover(
+        function() {
+            $(this).addClass("hover-with-viewSwitcher");
+        },
+        function() {
+            $(this).removeClass("hover-with-viewSwitcher");
+        }
+    );
 }
 
 function preFetch() {
diff --git a/views/page.html.php b/views/page.html.php
index 652fb69d..a582df65 100644
--- a/views/page.html.php
+++ b/views/page.html.php
@@ -169,22 +169,22 @@
 
 	<div class="" style="" id="viewControls">
 <? if ($theme->page_subtype != "movie"): ?>
-		<div title="Display this album in a grid view" id="grid" class="grid viewSwitcher sel sel-with-viewSwitcher" onclick="switchToGrid(true);">
-			<div class="label">Grid</div>
+		<div title="Display this album in a grid view" id="grid" class="grid viewSwitcher sel sel-with-viewSwitcher viewSwitcher-icon" onclick="switchToGrid(true);">
+			<span class="vs-icon vs-icon-grid"></span>Grid
 		</div>
 		<div title="Display this album in a mosaic view" id="mosaic" class="viewSwitcher mosaic" onclick="switchToMosaic(true);">
 			<!-- <div style="margin-top:-2px;margin-left:-4px;"> -->
-			<div class="label">Mosaic</div>
+			<span class="vs-icon vs-icon-mosaic"></span>Mosaic
 		</div>
 		<div title="Display this album in a carousel view" id="carousel" class="carousel viewSwitcher" onclick="startImageFlow(true);">
 			<!-- <div style="margin-top:-2px;"> -->
-			<div class="label">Carousel</div>
+			<span class="vs-icon vs-icon-carousel"></span>Carousel
 		</div>
 		<div title="Play a slideshow of this album" id="slideshow" class="viewSwitcher slideshow slideshow-with-viewSwitcher">
 			<!-- <div style="margin-top:-2px;margin-left:-2px;"> -->
-			<div class="label">Slideshow</div>
+			<span class="vs-icon vs-icon-slideshow"></span>Slideshow
 		</div>
-		<div class="clear"></div>
+        <div class="clear"></div>
 <? endif ?>
 	</div>
 	<? if (!module::get_var("th_pear4gallery3", "hide_logo")): ?><button id="logoButton"></button><?endif?>