diff --git a/frontend/templates/supporter.html b/frontend/templates/supporter.html
index 02b2e886..f6ec78b5 100644
--- a/frontend/templates/supporter.html
+++ b/frontend/templates/supporter.html
@@ -52,7 +52,19 @@
         });
     });
 </script>
-<link rel="stylesheet" href="/static/css/book_list.css">
+
+<!-- Beware of fadeIn/fadeOut jQuery animations; they add an inline "display: block"
+which overrides display: none in the stylesheet.  Sneaky! -->
+<script type="text/javascript">
+$(document).ready(function(){
+	$('#toggle-list').click(function(){
+    	$('div.panelview').addClass("listview").removeClass("panelview");
+	});
+	$('#toggle-panel').click(function(){
+    	$('div.listview').addClass("panelview").removeClass("listview");
+	});
+});
+</script>
 
 {% endblock %}
 
@@ -204,20 +216,15 @@ how do I integrate the your wishlist thing with the tabs thing?
                         <ul class="book-list-view">
                             <li>View As:</li>
                             <li class="view-list">
-                                <a href="#view-list">
+                                <a href="#" id="toggle-list">
                                 <img src="/static/images/booklist/view-list.png" align="view list" title="view list" height="21" width="24" />
                                 </a>
                             </li>
                             <li class="view-list">
-                                <a href="#view-icon">
+                                <a href="#" id="toggle-panel">
                                 <img src="/static/images/booklist/view-icon.png" align="view icon" title="view icon" height="22" width="22" />
                                 </a>
                             </li>
-                            <li class="view-list">
-                            <a href="#view-icon-small">
-                            <img src="/static/images/booklist/view-small-icon.png" align="view icon small" title="view icon small" height="22" width="22" />
-                            </a>
-                            </li>
                         </ul>
                 </div>
                 <div class="content-block-content">
@@ -239,44 +246,51 @@ how do I integrate the your wishlist thing with the tabs thing?
                     {% for work in wishlist.works.all %}
                        <!-- classify which tab depending on work.last_campaign_status -->
                        {% if work.last_campaign_status == 'SUCCESSFUL' %}
-                            <div class="tabs tabs-1">
+                            <div class="listview tabs tabs-1">
                        {% else %}{% if work.last_campaign_status == 'ACTIVE' %}
-                            <div class="tabs tabs-2">
+                            <div class="listview tabs tabs-2">
                        {% else %}
-                            <div class="tabs tabs-3">
+                            <div class="listview tabs tabs-3">
                        {% endif %}{% endif %}
-                    <div class="book-list {% cycle 'row1' 'row2' %}">
-                        <div class="book-thumb">
-                            <a href="#"><img src="{{ work.cover_image_small }}" alt="Book name" title="book name"  /></a>
+                    <div class="listview book-list {% cycle 'row1' 'row2' %}">
+                        <div class="listview book-thumb">
+                            <a href="#"><img src="{{ work.cover_image_thumbnail }}" alt="Book name" title="book name" /></a>
                         </div>
-                        <div class="book-name">
-                        <span>
-                            <a href="{% url work work.id %}">{{ work.title }}</a>
-                        </span>
+                        <div class="listview book-name">
+                        	<span>
+                            	<a href="{% url work work.id %}">{{ work.title }}</a>
+                        	</span>
                         </div>
+                        <div class="listview author">
+    						<span id="{{ work.author }}">James K. Polk</span>
+				    	</div>
                         {% ifequal supporter request.user %}
-                        <div class="remove-wishlist">
+                        <div class="listview remove-wishlist">
                             <span id="{{ work.id }}">Remove from Wishlist</span>
                         </div>
                         {% else %}{% if work in shared_works %}
-                        <div>
+                        <div class="listview on-wishlist">
                             <span>On Your Wishlist!</span>
                         </div>
                         {% else %}{% if request.user.is_anonymous %}
-                        <div class="create-account">
+                        <div class="listview create-account">
                             <span>Add to Wishlist</span>
                         </div>
                         {% else %}
-                        <div class="add-wishlist">
+                        <div class="listview add-wishlist">
                             <span id="{{ work.editions.all.0.googlebooks_id }}">Add to Wishlist</span>
                         </div>
                         {% endif %}{% endif %}{% endifequal %}
-                        <div class="booklist-status">
-                            <span class="booklist-status-text">{{ work.last_campaign_status }}</span>
-                            <span class="booklist-status-img">
-                                <img src="/static/images/icon-book{{ work.percent_unglued }}.png" title="book list status" alt="book list status" />
-                            </span>
-                        </div>
+                        <div class="listview booklist-status">
+                        	<span class="booklist-status-label">Status:&nbsp;</span><span class="booklist-status-text">{{ work.last_campaign_status }}</span>
+						</div>
+						<div class="listview icons">
+        				    <div class="booklist-status-img">
+            					<img src="/static/images/images/icon-book-37by25-4.png" title="book list status" alt="book list status" />
+				            </div>
+            				<div class="booklist-status-label">100%</div>
+				            <div class="right_add"><img src="/static/images/book-panel/add_gray.png" border="0" /></div>
+					    </div>
                         <div class="unglue-this none">
                             <div class="unglue-this-inner1">
                                 <div class="unglue-this-inner2">
diff --git a/static/css/book_list.css b/static/css/book_list.css
index b2f26c20..b9e3cc36 100755
--- a/static/css/book_list.css
+++ b/static/css/book_list.css
@@ -72,9 +72,6 @@ div.book-list.listview div.booklist-status {
   padding-right: 5px;
   text-transform: capitalize;
 }
-.booklist-status.listview .booklist-status-img p {
-  display: none;
-}
 div.unglue-this a {
   text-transform: uppercase;
   color: #3d4e53;
@@ -176,9 +173,31 @@ ul.navigation li a:hover, ul.navigation li.active a {
 }
 .book-thumb.listview a img {
   position: absolute;
-  top: -20px;
-  left: -50px;
+  /* the excerpt you get looks cooler if you select from the middle, but 
+    	the popup version doesn't extend past the containing div's boundaries,
+    	so the positioned part is cut off.
+    	top:-20px;
+		left:-50px;
+		*/
+
 }
 .listview.author {
   display: none;
 }
+.listview.icons {
+  float: left;
+}
+.listview.icons .booklist-status-img {
+  -moz-border-radius: 4px 4px 4px 4px;
+  -webkit-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+  background-color: #fff;
+  margin-top: 4px;
+  height: 37px;
+}
+.listview.icons .booklist-status-img img {
+  padding: 5px;
+}
+.listview.icons .booklist-status-label, .listview.icons .right_add {
+  display: none;
+}
diff --git a/static/css/book_panel.css b/static/css/book_panel.css
index 03c376a8..18baea62 100644
--- a/static/css/book_panel.css
+++ b/static/css/book_panel.css
@@ -64,6 +64,7 @@
   background-color: #ffffff;
   color: #3d4e53;
   border: 5px solid #edf3f4;
+  position: relative;
   /*	might need this for panel hover state; don't want it for nonhover. hm.
 	a {
     	color: @dark-green;
@@ -84,7 +85,10 @@
   padding: 5px 0px;
   margin: 0px;
 }
-div.remove-wishlist.panelview {
+.panelview.remove-wishlist,
+.panelview.on-wishlist,
+.panelview.create-account,
+.panelview.add-wishlist {
   display: none;
 }
 .panelview.book-name, .panelview.author {
@@ -101,6 +105,26 @@ div.remove-wishlist.panelview {
   float: left;
   font-weight: bold;
 }
+.panelview.icons {
+  position: absolute;
+  bottom: 0px;
+  width: 140px;
+}
+.panelview.icons .booklist-status-img {
+  float: left;
+}
+.panelview.icons .booklist-status-label {
+  position: absolute;
+  color: #8dc63f;
+  padding-left: 5px;
+  left: 40px;
+  bottom: 5px;
+}
+.panelview.icons .right_add {
+  float: right;
+  padding: 10px 10px 0 0;
+  width: 24px;
+}
 /*2 start*/
 .greenpanel2 {
   font-family: Arial, Helvetica, sans-serif;
diff --git a/static/less/book_list.less b/static/less/book_list.less
index 28607420..dbf9ffbd 100755
--- a/static/less/book_list.less
+++ b/static/less/book_list.less
@@ -70,10 +70,6 @@ div.book-list.listview{
 		padding-right:5px;
 		text-transform:capitalize;
 	}
-	
-	.booklist-status-img p {
-		display: none;
-	}
 }
 
 div.unglue-this {
@@ -190,11 +186,32 @@ ul.navigation li a:hover, ul.navigation li.active a {
     
     img {
     	position:absolute;
+    	/* the excerpt you get looks cooler if you select from the middle, but 
+    	the popup version doesn't extend past the containing div's boundaries,
+    	so the positioned part is cut off.
     	top:-20px;
 		left:-50px;
+		*/
     }
 }
 
 .listview.author {
 	display: none;
 }
+
+.listview.icons {
+	float: left;
+	.booklist-status-img {
+		.border-radius(4px, 4px, 4px, 4px);
+		background-color: #fff;
+		margin-top: 4px;
+		height: 37px;
+
+		img {
+			padding: 5px;
+		}
+	}
+	.booklist-status-label, .right_add {
+		display: none;
+	}
+}
diff --git a/static/less/book_panel.less b/static/less/book_panel.less
index 2a0734e2..d237dae7 100644
--- a/static/less/book_panel.less
+++ b/static/less/book_panel.less
@@ -68,6 +68,7 @@
     background-color: #ffffff;
     color: @text-blue;
     border: 5px solid @pale-blue;
+    position: relative;
     
     &:hover {
     	color: @text-blue;
@@ -91,8 +92,10 @@
 */
 }
 
-div.remove-wishlist.panelview {
-	display: none;
+.panelview {
+	&.remove-wishlist, &.on-wishlist, &.create-account, &.add-wishlist {
+		display: none;
+	}
 }
 
 .panelview.book-name, .panelview.author {
@@ -102,6 +105,7 @@ div.remove-wishlist.panelview {
     color: #3d4e53;
 }
 
+
 .panelview.booklist-status {
     color: @green;
     text-align: left;
@@ -112,6 +116,30 @@ div.remove-wishlist.panelview {
     }
 }
 
+.panelview.icons {
+	position: absolute;
+	bottom: 0px;
+	width: 140px;
+	
+	.booklist-status-img {
+		float: left;
+	}
+	
+	.booklist-status-label {
+		position: absolute;
+//		float: left;
+		color: @green;
+		padding-left: 5px;
+		left: 40px;
+		bottom: 5px;
+	}
+	
+	.right_add {
+		float: right;
+		padding:10px 10px 0 0;
+		width:24px;
+	}
+}
 
 /*2 start*/
 
diff --git a/static/less/layout.css b/static/less/layout.css
index d2705a7b..62bbf696 100644
--- a/static/less/layout.css
+++ b/static/less/layout.css
@@ -112,9 +112,6 @@ div.book-list.listview div.booklist-status {
   padding-right: 5px;
   text-transform: capitalize;
 }
-.booklist-status.listview .booklist-status-img p {
-  display: none;
-}
 div.unglue-this a {
   text-transform: uppercase;
   color: #3d4e53;
@@ -266,12 +263,49 @@ ul.navigation li a:hover, ul.navigation li.active a {
 }
 .book-thumb.listview a img {
   position: absolute;
-  top: -20px;
-  left: -50px;
+  /* the excerpt you get looks cooler if you select from the middle, but 
+    	the popup version doesn't extend past the containing div's boundaries,
+    	so the positioned part is cut off.
+    	top:-20px;
+		left:-50px;
+		*/
+
 }
 .listview.author {
   display: none;
 }
+.listview.icons {
+  float: left;
+}
+.listview.icons .booklist-status-img {
+  -moz-border-radius: 4px 4px 4px 4px;
+  -webkit-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+  -moz-border-radius: 4px 4px 4px 4px;
+  -webkit-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+  -moz-border-radius: 4px 4px 4px 4px;
+  -webkit-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+  -moz-border-radius: 4px 4px 4px 4px;
+  -webkit-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+  -moz-border-radius: 4px 4px 4px 4px;
+  -webkit-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+  -moz-border-radius: 4px 4px 4px 4px;
+  -webkit-border-radius: 4px 4px 4px 4px;
+  border-radius: 4px 4px 4px 4px;
+  background-color: #fff;
+  margin-top: 4px;
+  height: 37px;
+}
+.listview.icons .booklist-status-img img {
+  padding: 5px;
+}
+.listview.icons .booklist-status-label, .listview.icons .right_add {
+  display: none;
+}
 .header-text {
   height: 36px;
   line-height: 36px;
@@ -342,6 +376,7 @@ ul.navigation li a:hover, ul.navigation li.active a {
   background-color: #ffffff;
   color: #3d4e53;
   border: 5px solid #edf3f4;
+  position: relative;
   /*	might need this for panel hover state; don't want it for nonhover. hm.
 	a {
     	color: @dark-green;
@@ -362,7 +397,10 @@ ul.navigation li a:hover, ul.navigation li.active a {
   padding: 5px 0px;
   margin: 0px;
 }
-div.remove-wishlist.panelview {
+.panelview.remove-wishlist,
+.panelview.on-wishlist,
+.panelview.create-account,
+.panelview.add-wishlist {
   display: none;
 }
 .panelview.book-name, .panelview.author {
@@ -379,6 +417,26 @@ div.remove-wishlist.panelview {
   float: left;
   font-weight: bold;
 }
+.panelview.icons {
+  position: absolute;
+  bottom: 0px;
+  width: 140px;
+}
+.panelview.icons .booklist-status-img {
+  float: left;
+}
+.panelview.icons .booklist-status-label {
+  position: absolute;
+  color: #8dc63f;
+  padding-left: 5px;
+  left: 40px;
+  bottom: 5px;
+}
+.panelview.icons .right_add {
+  float: right;
+  padding: 10px 10px 0 0;
+  width: 24px;
+}
 /*2 start*/
 .greenpanel2 {
   font-family: Arial, Helvetica, sans-serif;
@@ -1585,6 +1643,7 @@ div.content-block-content {
   background-color: #ffffff;
   color: #3d4e53;
   border: 5px solid #edf3f4;
+  position: relative;
   /*	might need this for panel hover state; don't want it for nonhover. hm.
 	a {
     	color: @dark-green;
@@ -1605,7 +1664,10 @@ div.content-block-content {
   padding: 5px 0px;
   margin: 0px;
 }
-div.remove-wishlist.panelview {
+.panelview.remove-wishlist,
+.panelview.on-wishlist,
+.panelview.create-account,
+.panelview.add-wishlist {
   display: none;
 }
 .panelview.book-name, .panelview.author {
@@ -1622,6 +1684,26 @@ div.remove-wishlist.panelview {
   float: left;
   font-weight: bold;
 }
+.panelview.icons {
+  position: absolute;
+  bottom: 0px;
+  width: 140px;
+}
+.panelview.icons .booklist-status-img {
+  float: left;
+}
+.panelview.icons .booklist-status-label {
+  position: absolute;
+  color: #8dc63f;
+  padding-left: 5px;
+  left: 40px;
+  bottom: 5px;
+}
+.panelview.icons .right_add {
+  float: right;
+  padding: 10px 10px 0 0;
+  width: 24px;
+}
 /*2 start*/
 .greenpanel2 {
   font-family: Arial, Helvetica, sans-serif;
diff --git a/static/supporter_integration_test.html b/static/supporter_integration_test.html
index d82e2930..37363144 100644
--- a/static/supporter_integration_test.html
+++ b/static/supporter_integration_test.html
@@ -4,10 +4,10 @@
 <!-- there's stuff we need from here and stuff that's incompatible:
 <link href="css/layout.css" rel="stylesheet" type="text/css" />  -->
 
-<link type="text/css" rel="stylesheet" href="/static/css/sitewide.css" />
-<link type="text/css" rel="stylesheet" href="/static/css/supporter_layout.css" />
-<link type="text/css" rel="stylesheet" href="/static/css/book_list.css" />
-<link type="text/css" rel="stylesheet" href="/static/css/book_panel.css" />
+<link type="text/css" rel="stylesheet" href="css/sitewide.css" />
+<link type="text/css" rel="stylesheet" href="css/supporter_layout.css" />
+<link type="text/css" rel="stylesheet" href="css/book_list.css" />
+<link type="text/css" rel="stylesheet" href="css/book_panel.css" />
 
 <script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
 
@@ -51,13 +51,13 @@ $(document).ready(function(){
     	</div>
 		<div class="listview booklist-status">
         	<span class="booklist-status-label">Status:&nbsp;</span><span class="booklist-status-text">Active</span>
-			<!-- images differ for list and panel; need to deal. maybe can use smaller version in rounded-corner pale-background div? -->
-			<!-- also this span is not nested in the panel view but is in list. how to deal? -->
-            <span class="booklist-status-img">
+		</div>
+		<div class="listview icons">
+            <div class="booklist-status-img">
             	<img src="images/images/icon-book-37by25-4.png" title="book list status" alt="book list status" />
-            	<p>100%</p>
-            	<p class="right_add"><img src="/static/images/book-panel/add_gray.png" border="0" /></p>
-            </span>
+            </div>
+            <div class="booklist-status-label">100%</div>
+            <div class="right_add"><img src="images/book-panel/add_gray.png" border="0" /></div>
         </div>
         <div class="listview unglue-this none">
         	<div class="listview unglue-this-inner1">