diff --git a/layouts/home.html b/layouts/home.html
index 07e75c0..7039396 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -6,6 +6,7 @@
   <title><%= @item[:title] %></title>
   <link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projection" />
   <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projection" />
+  <link rel="stylesheet" href="/css/thumbs.css" type="text/css" media="screen,projection" />
   <link rel="stylesheet" href="/css/mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" />  
   <link rel="stylesheet" href="/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
@@ -45,9 +46,11 @@
   <div id="flickr">
     <!-- <h1>Photos</h1> -->
     <ul class="inline">
-      <li>
-        <a href="http://farm3.static.flickr.com/2708/4302496460_a1ec313d06.jpg" rel="prettyPhoto[flickr]"><img src="/images/photos/4302496460_a1ec313d06.jpg" alt="Test Monochrome" /></a>
+      <% (1..20).each do |i| %>
+      <li class="<%= "t#{i}" %>">
+        <a href="http://farm3.static.flickr.com/2708/4302496460_a1ec313d06.jpg" rel="prettyPhoto[flickr]"></a>
       </li>
+      <% end %>
   </div>
   <%= render '_footer' %>
 </body>
diff --git a/output/css/style.css b/output/css/style.css
index e36c69a..1785a6d 100644
--- a/output/css/style.css
+++ b/output/css/style.css
@@ -221,14 +221,13 @@ ul.inline li:first-child {
   margin: 20px 0 0 20px;
   display: block;
   position: relative;
+}
+#flickr a {
   height: 75px;
   width: 75px;
-}
-#flickr li img {
-  position: absolute;
-}
-#flickr li img:hover {
-  top: -75px;
+  background: url(/images/photos.jpg) no-repeat top left;
+  background-position: -75px 0;
+  display: block;
 }
 
 /* Search Form //----------------------------------------------------------*/
diff --git a/output/css/thumbs.css b/output/css/thumbs.css
new file mode 100644
index 0000000..d8be37d
--- /dev/null
+++ b/output/css/thumbs.css
@@ -0,0 +1,120 @@
+#flickr li.t1 a {
+  background-position: -75px -75px;
+}
+#flickr li.t1 a:hover {
+  background-position: -75px 0;
+}
+#flickr li.t2 a {
+  background-position: -150px -75px;
+}
+#flickr li.t2 a:hover {
+  background-position: -150px 0;
+}
+#flickr li.t3 a {
+  background-position: -225px -75px;
+}
+#flickr li.t3 a:hover {
+  background-position: -225px 0;
+}
+#flickr li.t4 a {
+  background-position: -300px -75px;
+}
+#flickr li.t4 a:hover {
+  background-position: -300px 0;
+}
+#flickr li.t5 a {
+  background-position: -375px -75px;
+}
+#flickr li.t5 a:hover {
+  background-position: -375px 0;
+}
+#flickr li.t6 a {
+  background-position: -450px -75px;
+}
+#flickr li.t6 a:hover {
+  background-position: -450px 0;
+}
+#flickr li.t7 a {
+  background-position: -525px -75px;
+}
+#flickr li.t7 a:hover {
+  background-position: -525px 0;
+}
+#flickr li.t8 a {
+  background-position: -600px -75px;
+}
+#flickr li.t8 a:hover {
+  background-position: -600px 0;
+}
+#flickr li.t9 a {
+  background-position: -675px -75px;
+}
+#flickr li.t9 a:hover {
+  background-position: -675px 0;
+}
+#flickr li.t10 a {
+  background-position: -750px -75px;
+}
+#flickr li.t10 a:hover {
+  background-position: -750px 0;
+}
+#flickr li.t11 a {
+  background-position: -825px -75px;
+}
+#flickr li.t11 a:hover {
+  background-position: -825px 0;
+}
+#flickr li.t12 a {
+  background-position: -900px -75px;
+}
+#flickr li.t12 a:hover {
+  background-position: -900px 0;
+}
+#flickr li.t13 a {
+  background-position: -975px -75px;
+}
+#flickr li.t13 a:hover {
+  background-position: -975px 0;
+}
+#flickr li.t14 a {
+  background-position: -1050px -75px;
+}
+#flickr li.t14 a:hover {
+  background-position: -1050px 0;
+}
+#flickr li.t15 a {
+  background-position: -1125px -75px;
+}
+#flickr li.t15 a:hover {
+  background-position: -1125px 0;
+}
+#flickr li.t16 a {
+  background-position: -1200px -75px;
+}
+#flickr li.t16 a:hover {
+  background-position: -1200px 0;
+}
+#flickr li.t17 a {
+  background-position: -1275px -75px;
+}
+#flickr li.t17 a:hover {
+  background-position: -1275px 0;
+}
+#flickr li.t18 a {
+  background-position: -1350px -75px;
+}
+#flickr li.t18 a:hover {
+  background-position: -1350px 0;
+}
+#flickr li.t19 a {
+  background-position: -1425px -75px;
+}
+#flickr li.t19 a:hover {
+  background-position: -1425px 0;
+}
+#flickr li.t20 a {
+  background-position: -1500px -75px;
+}
+#flickr li.t20 a:hover {
+  background-position: -1500px 0;
+}
diff --git a/output/images/photos.jpg b/output/images/photos.jpg
new file mode 100644
index 0000000..feef7bf
Binary files /dev/null and b/output/images/photos.jpg differ
diff --git a/output/js/home.js b/output/js/home.js
index dad8b53..33b48c2 100644
--- a/output/js/home.js
+++ b/output/js/home.js
@@ -18,5 +18,5 @@ jQuery(function () {
   };
 
   // Populate Flickr
-  jQuery.getJSON("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=aa003631cc50bd47f27f242d30bcd22f&user_id=40215689%40N00&format=json&per_page=20&extras=url_sq,url_m&jsoncallback=?", populate_flickr);
+  //jQuery.getJSON("http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=aa003631cc50bd47f27f242d30bcd22f&user_id=40215689%40N00&format=json&per_page=20&extras=url_sq,url_m&jsoncallback=?", populate_flickr);
 });