diff --git a/backbonestore.nw b/backbonestore.nw
index 834db60..e67db0f 100644
--- a/backbonestore.nw
+++ b/backbonestore.nw
@@ -169,8 +169,10 @@ Also, it would be nice to know the total price of the Item.
 <<cart models>>=
 class Item extends Backbone.Model
     update: (amount) ->
-        @set
-            quantity: @get('quantity')
+        if amount == @get('quantity')
+            return
+        @set {quantity: amount}, {silent: true}
+        @collection.trigger('change', this)
 
     price: () ->
         @get('product').get('price') * @get('quantity')
@@ -499,24 +501,24 @@ The product detail template is fairly straightforward.  There is no
 <<product detail template>>=
 %script#store_item_template(type= "text/x-underscore-template")
   .item-detail
-  .item-image
-    %img(src="<%= large_image %>" alt="<%= title %>")/
-  .item-info
-  .item-artist <%= artist %>
-  .item-title <%= title %>
-  .item-price $<%= price %>
-  .item-form
-  %form(action="#/cart" method="post")
-    %p
-      %label Quantity:
-      %input(type="text" size="2" name="quantity" value="1" class="uqf")/
-    %p
-      %input(type="submit" value="Add to Cart" class="uq")/
+    .item-image
+      %img(src="<%= large_image %>" alt="<%= title %>")/
+    .item-info
+      .item-artist <%= artist %>
+      .item-title <%= title %>
+      .item-price $<%= price %>
+      .item-form
+      %form(action="#/cart" method="post")
+        %p
+          %label Quantity:
+          %input(type="text" size="2" name="quantity" value="1" class="uqf")/
+        %p
+          %input(type="submit" value="Add to Cart" class="uq")/
 
-  .item-link
-    %a(href="<%= url %>") Buy this item on Amazon
-  .back-link
-    %a(href="#") &laquo; Back to Items
+      .item-link
+        %a(href="<%= url %>") Buy this item on Amazon
+      .back-link
+        %a(href="#") &laquo; Back to Items
 @
 
 So, let's talk about that shopping cart thing.  We've been making the
@@ -735,6 +737,11 @@ rounded(radius)
   border-top-right-radius: radius
   border-bottom-left-radius: radius
 
+background_gradient(base)
+  background: base
+  background: -webkit-gradient(linear, left top, left bottom, from(lighten(base, 20%)), to(darken(base, 20%)))
+  background: -moz-linear-gradient(top,  lighten(base, 20%), darken(base, 20%))
+
 @
 
 And if you look down below you'll see the [[rounded()]] function
@@ -756,9 +763,10 @@ body
 
 
 #header
-  background: #C97E41
+  background_gradient(#999)
   margin: 0px
   padding: 20px
+  border-bottom: 1px solid #ccc
 
   h1
     font-family: Inconsolata, Monaco, Courier, mono
@@ -771,7 +779,7 @@ body
     right: 0px
     text-align: right
     padding: 10px
-    background: #714625
+    background_gradient(#555)
     color: #FFF
     font-size: 12px
     font-weight: bold
@@ -802,9 +810,11 @@ img
   font-size: 14px
 
 .item-detail
+  margin: 10px 0 0 10px
 
   .item-image
     float:left
+    margin-right: 10px
 
   .item-info
     padding: 100px 10px 0px 10px
diff --git a/index.haml b/index.haml
index f736192..aacd764 100644
--- a/index.haml
+++ b/index.haml
@@ -18,24 +18,24 @@
 
     %script#store_item_template(type= "text/x-underscore-template")
       .item-detail
-      .item-image
-        %img(src="<%= large_image %>" alt="<%= title %>")/
-      .item-info
-      .item-artist <%= artist %>
-      .item-title <%= title %>
-      .item-price $<%= price %>
-      .item-form
-      %form(action="#/cart" method="post")
-        %p
-          %label Quantity:
-          %input(type="text" size="2" name="quantity" value="1" class="uqf")/
-        %p
-          %input(type="submit" value="Add to Cart" class="uq")/
+        .item-image
+          %img(src="<%= large_image %>" alt="<%= title %>")/
+        .item-info
+          .item-artist <%= artist %>
+          .item-title <%= title %>
+          .item-price $<%= price %>
+          .item-form
+          %form(action="#/cart" method="post")
+            %p
+              %label Quantity:
+              %input(type="text" size="2" name="quantity" value="1" class="uqf")/
+            %p
+              %input(type="submit" value="Add to Cart" class="uq")/
 
-      .item-link
-        %a(href="<%= url %>") Buy this item on Amazon
-      .back-link
-        %a(href="#") &laquo; Back to Items
+          .item-link
+            %a(href="<%= url %>") Buy this item on Amazon
+          .back-link
+            %a(href="#") &laquo; Back to Items
     %script#store_cart_template(type="text/x-underscore-template")
       %p Items: <%= count %> ($<%= cost %>)
 
diff --git a/index.html b/index.html
index add6bdb..5540ed0 100644
--- a/index.html
+++ b/index.html
@@ -21,29 +21,31 @@
       </ul>
     </script>
     <script id="store_item_template" type="text/x-underscore-template">
-      <div class="item-detail"></div>
-      <div class="item-image">
-        <img alt="<%= title %>" src="<%= large_image %>" />
-      </div>
-      <div class="item-info"></div>
-      <div class="item-artist"><%= artist %></div>
-      <div class="item-title"><%= title %></div>
-      <div class="item-price">$<%= price %></div>
-      <div class="item-form"></div>
-      <form action="#/cart" method="post">
-        <p>
-          <label>Quantity:</label>
-          <input class="uqf" name="quantity" size="2" type="text" value="1" />
-        </p>
-        <p>
-          <input class="uq" type="submit" value="Add to Cart" />
-        </p>
-      </form>
-      <div class="item-link">
-        <a href="<%= url %>">Buy this item on Amazon</a>
-      </div>
-      <div class="back-link">
-        <a href="#">&laquo; Back to Items</a>
+      <div class="item-detail">
+        <div class="item-image">
+          <img alt="<%= title %>" src="<%= large_image %>" />
+        </div>
+        <div class="item-info">
+          <div class="item-artist"><%= artist %></div>
+          <div class="item-title"><%= title %></div>
+          <div class="item-price">$<%= price %></div>
+          <div class="item-form"></div>
+          <form action="#/cart" method="post">
+            <p>
+              <label>Quantity:</label>
+              <input class="uqf" name="quantity" size="2" type="text" value="1" />
+            </p>
+            <p>
+              <input class="uq" type="submit" value="Add to Cart" />
+            </p>
+          </form>
+          <div class="item-link">
+            <a href="<%= url %>">Buy this item on Amazon</a>
+          </div>
+          <div class="back-link">
+            <a href="#">&laquo; Back to Items</a>
+          </div>
+        </div>
       </div>
     </script>
     <script id="store_cart_template" type="text/x-underscore-template">
diff --git a/jsonstore.css b/jsonstore.css
index 80b30cd..9cd3d21 100644
--- a/jsonstore.css
+++ b/jsonstore.css
@@ -6,9 +6,12 @@ body {
   padding: 0px;
 }
 #header {
-  background: #c97e41;
+  background: #999;
+  background: -webkit-gradient(linear, left top, left bottom, from(#b8b8b8), to(#7a7a7a));
+  background: -moz-linear-gradient(top, #b8b8b8, #7a7a7a);
   margin: 0px;
   padding: 20px;
+  border-bottom: 1px solid #ccc;
 }
 #header h1 {
   font-family: Inconsolata, Monaco, Courier, mono;
@@ -21,7 +24,9 @@ body {
   right: 0px;
   text-align: right;
   padding: 10px;
-  background: #714625;
+  background: #555;
+  background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#444));
+  background: -moz-linear-gradient(top, #666, #444);
   color: #fff;
   font-size: 12px;
   font-weight: bold;
@@ -61,8 +66,12 @@ img {
   font-weight: bold;
   font-size: 14px;
 }
+.item-detail {
+  margin: 10px 0 0 10px;
+}
 .item-detail .item-image {
   float: left;
+  margin-right: 10px;
 }
 .item-detail .item-info {
   padding: 100px 10px 0px 10px;
diff --git a/jsonstore.styl b/jsonstore.styl
index e0e72a8..dbeebf3 100644
--- a/jsonstore.styl
+++ b/jsonstore.styl
@@ -12,6 +12,11 @@ rounded(radius)
   border-top-right-radius: radius
   border-bottom-left-radius: radius
 
+background_gradient(base)
+  background: base
+  background: -webkit-gradient(linear, left top, left bottom, from(lighten(base, 20%)), to(darken(base, 20%)))
+  background: -moz-linear-gradient(top,  lighten(base, 20%), darken(base, 20%))
+
 body
   font-family: "Lucida Grande", Lucida, Helvetica, Arial, sans-serif
   background: #FFF
@@ -21,9 +26,10 @@ body
 
 
 #header
-  background: #C97E41
+  background_gradient(#999)
   margin: 0px
   padding: 20px
+  border-bottom: 1px solid #ccc
 
   h1
     font-family: Inconsolata, Monaco, Courier, mono
@@ -36,7 +42,7 @@ body
     right: 0px
     text-align: right
     padding: 10px
-    background: #714625
+    background_gradient(#555)
     color: #FFF
     font-size: 12px
     font-weight: bold
@@ -67,9 +73,11 @@ img
   font-size: 14px
 
 .item-detail
+  margin: 10px 0 0 10px
 
   .item-image
     float:left
+    margin-right: 10px
 
   .item-info
     padding: 100px 10px 0px 10px
diff --git a/store.coffee b/store.coffee
index aa97be2..50da8ac 100644
--- a/store.coffee
+++ b/store.coffee
@@ -12,8 +12,10 @@ class ProductCollection extends Backbone.Collection
 
 class Item extends Backbone.Model
     update: (amount) ->
-        @set
-            quantity: @get('quantity')
+        if amount == @get('quantity')
+            return
+        @set {quantity: amount}, {silent: true}
+        @collection.trigger('change', this)
 
     price: () ->
         @get('product').get('price') * @get('quantity')
diff --git a/store.js b/store.js
index 8e92e4f..dd064df 100644
--- a/store.js
+++ b/store.js
@@ -36,9 +36,15 @@
       Item.__super__.constructor.apply(this, arguments);
     }
     Item.prototype.update = function(amount) {
-      return this.set({
-        quantity: this.get('quantity')
+      if (amount === this.get('quantity')) {
+        return;
+      }
+      this.set({
+        quantity: amount
+      }, {
+        silent: true
       });
+      return this.collection.trigger('change', this);
     };
     Item.prototype.price = function() {
       return this.get('product').get('price') * this.get('quantity');