diff --git a/assets/css/screen.css b/assets/css/screen.css
index 65ade90..c3f81ec 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -329,7 +329,7 @@ table {
 
 /* line 49, ../sass/lib/_preboot.scss */
 body {
-  background-image: url("/img/background-pattern.png");
+  background: #f2f2f2;
   color: #2e2e2e;
 }
 /* line 61, ../../../../../.rvm/gems/ruby-1.9.3-p194/gems/compass-0.12.2.rc.0/frameworks/compass/stylesheets/compass/typography/_vertical_rhythm.scss */
@@ -1444,44 +1444,46 @@ p {
   margin-bottom: 1.5em;
   font-size: 0.875em;
   line-height: 1.714em;
+  margin-top: 0;
 }
-/* line 69, ../sass/lib/_typography.scss */
+/* line 70, ../sass/lib/_typography.scss */
 p.large {
   font-size: 1.125em;
   line-height: 1.333em;
 }
-/* line 72, ../sass/lib/_typography.scss */
+/* line 73, ../sass/lib/_typography.scss */
 p.small {
   font-size: 0.813em;
   line-height: 1.846em;
 }
 
-/* line 79, ../sass/lib/_typography.scss */
+/* line 80, ../sass/lib/_typography.scss */
 a {
   color: #27adec;
   text-decoration: none;
 }
-/* line 82, ../sass/lib/_typography.scss */
+/* line 83, ../sass/lib/_typography.scss */
 a:hover, a:focus {
   color: #55c8fe;
   text-decoration: underline;
 }
 
-/* line 90, ../sass/lib/_typography.scss */
+/* line 91, ../sass/lib/_typography.scss */
 ul, ol {
   font-size: 0.875em;
   line-height: 1.714em;
-  margin-top: 1.5em;
   margin-bottom: 1.5em;
   padding-left: 1.25em;
+  margin-top: 0;
 }
 
-/* line 99, ../sass/lib/_typography.scss */
+/* line 100, ../sass/lib/_typography.scss */
 dl {
   font-size: 0.875em;
   line-height: 1.714em;
+  margin-top: 0;
 }
-/* line 101, ../sass/lib/_typography.scss */
+/* line 103, ../sass/lib/_typography.scss */
 dl dt {
   font-size: 1.125em;
   line-height: 1.333em;
@@ -1489,13 +1491,13 @@ dl dt {
   font-family: "PTSans";
   font-weight: 700;
 }
-/* line 107, ../sass/lib/_typography.scss */
+/* line 109, ../sass/lib/_typography.scss */
 dl dd {
   margin: 0;
   margin-bottom: 1.5em;
 }
 
-/* line 115, ../sass/lib/_typography.scss */
+/* line 117, ../sass/lib/_typography.scss */
 code {
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
@@ -1506,7 +1508,7 @@ code {
   background: #ebebeb;
   padding: .25em;
 }
-/* line 120, ../sass/lib/_typography.scss */
+/* line 122, ../sass/lib/_typography.scss */
 code[lang] {
   font-size: 0.875em;
   line-height: 1.714em;
@@ -1520,7 +1522,7 @@ code[lang] {
   display: block;
 }
 
-/* line 133, ../sass/lib/_typography.scss */
+/* line 135, ../sass/lib/_typography.scss */
 abbr[title] {
   cursor: help;
 }
@@ -2448,6 +2450,36 @@ input[type="submit"][class^="icon-"]::before, input[type="submit"][type=search]:
   text-shadow: 0 -1px 0 #e37b2f;
 }
 
+/* line 89, ../sass/lib/_patterns.scss */
+.box, .well {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 0.063em;
+  padding: 1.438em;
+}
+
+/* line 94, ../sass/lib/_patterns.scss */
+.box {
+  -webkit-box-shadow: 0 1px 1px #a6a6a6;
+  -moz-box-shadow: 0 1px 1px #a6a6a6;
+  box-shadow: 0 1px 1px #a6a6a6;
+  background: white;
+  border-color: #cccccc;
+}
+
+/* line 100, ../sass/lib/_patterns.scss */
+.well {
+  -webkit-box-shadow: inset 0 1px 1px #a6a6a6, 0 1px 1px white;
+  -moz-box-shadow: inset 0 1px 1px #a6a6a6, 0 1px 1px white;
+  box-shadow: inset 0 1px 1px #a6a6a6, 0 1px 1px white;
+  background: #ebebeb;
+  border-color: #cccccc;
+}
+
 /* line 1, ../sass/demo.scss */
 .row {
   width: 100%;
diff --git a/assets/sass/lib/_patterns.scss b/assets/sass/lib/_patterns.scss
index 236ab33..1d7068e 100644
--- a/assets/sass/lib/_patterns.scss
+++ b/assets/sass/lib/_patterns.scss
@@ -84,4 +84,21 @@
 
 .icon-close {
 	@extend .icon-cancel
+}
+
+.box, .well {
+	@include border-radius(4px);
+	@include rhythm-borders(1px, 1);
+}
+
+.box {
+	@include box-shadow(0 1px 1px $lightGray);
+	background: $white;
+	border-color: $lighterGray;
+}
+
+.well {
+	@include box-shadow(inset 0 1px 1px $lightGray, 0 1px 1px $white);
+	background: $lightestGray;
+	border-color: $lighterGray;
 }
\ No newline at end of file
diff --git a/assets/sass/lib/_preboot.scss b/assets/sass/lib/_preboot.scss
index be85905..f8caae1 100644
--- a/assets/sass/lib/_preboot.scss
+++ b/assets/sass/lib/_preboot.scss
@@ -48,6 +48,6 @@ $linkHover:           $lightBlue;
 
 body {
 	@include establish-baseline(16px);
-	background-image: url("/img/background-pattern.png");
+	background: #f2f2f2;
 	color: #2e2e2e;
 }
\ No newline at end of file
diff --git a/assets/sass/lib/_typography.scss b/assets/sass/lib/_typography.scss
index 0515d77..109dd0b 100644
--- a/assets/sass/lib/_typography.scss
+++ b/assets/sass/lib/_typography.scss
@@ -66,6 +66,7 @@ blockquote {
 p {
 	@include trailer(1);
 	@include adjust-font-size-to(14px);
+	margin-top:0;
 	&.large {
 		@include adjust-font-size-to(18px);
 	}
@@ -89,15 +90,16 @@ a {
 
 ul, ol {
 	@include adjust-font-size-to(14px);
-	@include leader(1);
 	@include trailer(1);
 	padding-left: 1.25em;
+	margin-top:0;
 	li {
 	}
 }
 
 dl {
 	@include adjust-font-size-to(14px);
+	margin-top:0;
 	dt {
 		@include adjust-font-size-to(18px);
 		color: $darkestGray;
diff --git a/views/index.erubis b/views/index.erubis
index eff49a9..1f86df7 100644
--- a/views/index.erubis
+++ b/views/index.erubis
@@ -182,31 +182,34 @@
 			<div class="row">
 				<div class="lists">
 					<h3 class="divider">Lists</h3>
-					<dl>
-						<dt>Dolor sit amet</dt>
-						<dd>Aliquam tincidunt mauris eu risus.</dd>
-						<dt>Vestibulum</dt>
-						<dd>Aliquam tincidunt mauris eu risus.</dd>
-						<dt>Dapibus neque</dt>
-						<dd>Consectetuer adipiscing elit.</dd>
-					</dl>
-					<ul>
-					  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
-					  <li>Aliquam tincidunt mauris eu risus.</li>
-					  <li>Vestibulum auctor dapibus neque.</li>
-					</ul>
-					<ol>
-					  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
-					  <li>Aliquam tincidunt mauris eu risus.</li>
-					  <li>Vestibulum auctor dapibus neque.</li>
-					</ol>
+					<div class="well">
+						<dl>
+							<dt>Dolor sit amet</dt>
+							<dd>Aliquam tincidunt mauris eu risus.</dd>
+							<dt>Vestibulum</dt>
+							<dd>Aliquam tincidunt mauris eu risus.</dd>
+							<dt>Dapibus neque</dt>
+							<dd>Consectetuer adipiscing elit.</dd>
+						</dl>
+						<ul>
+						  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+						  <li>Aliquam tincidunt mauris eu risus.</li>
+						  <li>Vestibulum auctor dapibus neque.</li>
+						</ul>
+						<ol>
+						  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+						  <li>Aliquam tincidunt mauris eu risus.</li>
+						  <li>Vestibulum auctor dapibus neque.</li>
+						</ol>
+					</div>
 				</div>
 				<div class="paragraphs">
 					<h3 class="divider">Paragraphs &amp; Code</h3>
-					<p><abbr title="How should I know?">Pellentesque</abbr> habitant <em>morbi</em> tristique <strong>senectus</strong> et netus et <code>malesuada</code> fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
-					<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
-					<blockquote>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
-					<code class="block" lang="javascript">http.createServer(function (request, response) {    
+					<div class="box">
+						<p><abbr title="How should I know?">Pellentesque</abbr> habitant <em>morbi</em> tristique <strong>senectus</strong> et netus et <code>malesuada</code> fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+						<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+						<blockquote>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
+						<code class="block" lang="javascript">http.createServer(function (request, response) {    
   path.exists(filePath, function(exists) {
     if (exists) {
       fs.readFile(filePath, function(error, content) {
@@ -218,6 +221,7 @@
     }
   });     
 }).listen(8125);</code>
+					</div>
 				</div>
 
 			</div>