diff --git a/sketches/.DS_Store b/sketches/.DS_Store
new file mode 100644
index 0000000..c3f0f91
Binary files /dev/null and b/sketches/.DS_Store differ
diff --git a/sketches/IMG/Tasks_of_the_Contingent_Librarian3.jpg b/sketches/IMG/Tasks_of_the_Contingent_Librarian3.jpg
new file mode 100644
index 0000000..a3188f1
Binary files /dev/null and b/sketches/IMG/Tasks_of_the_Contingent_Librarian3.jpg differ
diff --git a/sketches/bootlegging.html b/sketches/bootlegging.html
index 6d3354e..1d4b929 100644
--- a/sketches/bootlegging.html
+++ b/sketches/bootlegging.html
@@ -16,8 +16,8 @@
   	<div class="container-fluid">
   		<div class="row">
   			<div class="col-md-4">
-  				<p><a class="nav" href="collect.html">collect</a>
-            <a class="nav" href="collate.html">collate</a></p>
+  				<li class="nav"><a class=nav href="collect.html">collect</a> 
+          <a class=nav href="collate.html">collate</a></li>
   			</div>
   			<div class="col-md-4"><h1><a href="index.html">Library of Contingencies*</a></h1></div>
   			<div class="col-md-4">
diff --git a/sketches/collate.html b/sketches/collate.html
index 7c966bc..9463ce1 100644
--- a/sketches/collate.html
+++ b/sketches/collate.html
@@ -16,8 +16,8 @@
   	<div class="container-fluid">
   		<div class="row">
   			<div class="col-md-4">
-  				<p><a class="nav" href="collect.html">collect</a>
-  				<a class="nav" href="collate.html">collate</a></p>
+  				<li class="nav"><a class=nav href="collect.html">collect</a> 
+          <a class=nav href="collate.html">collate</a></li>
   			</div>
   			<div class="col-md-4"><h1><a href="index.html">Library of Contingencies*</a></h1></div>
   			<div class="col-md-4">
diff --git a/sketches/collect.html b/sketches/collect.html
index e9ba720..e09d932 100644
--- a/sketches/collect.html
+++ b/sketches/collect.html
@@ -16,8 +16,8 @@
   	<div class="container-fluid">
   		<div class="row">
   			<div class="col-md-4">
-  				<p><a class="nav" href="collect.html">collect</a>
-            <a class="nav" href="collate.html">collate</a></p>
+  				<li class="nav"><a class=nav href="collect.html">collect</a> 
+          <a class=nav href="collate.html">collate</a></li>
   			</div>
   			<div class="col-md-4"><h1><a href="index.html">Library of Contingencies*</a></h1></div>
   			<div class="col-md-4">
diff --git a/sketches/diversifying.html b/sketches/diversifying.html
index 5efc07c..97bb952 100644
--- a/sketches/diversifying.html
+++ b/sketches/diversifying.html
@@ -16,8 +16,8 @@
   	<div class="container-fluid">
   		<div class="row">
   			<div class="col-md-4">
-  				<p><a class="nav" href="collect.html">collect</a>
-            <a class="nav" href="collate.html">collate</a></p>
+  				<li class="nav"><a class=nav href="collect.html">collect</a> 
+          <a class=nav href="collate.html">collate</a></li>
   			</div>
   			<div class="col-md-4"><h1><a href="index.html">Library of Contingencies*</a></h1></div>
   			<div class="col-md-4">
diff --git a/sketches/index.html b/sketches/index.html
index 3458edc..6a7e89b 100644
--- a/sketches/index.html
+++ b/sketches/index.html
@@ -16,8 +16,8 @@
   	<div class="container-fluid">
   		<div class="row">
   			<div class="col-md-4">
-  				<p><a class="nav" href="collect.html">collect</a>
-  				<a class="nav" href="collate.html">collate</a></p>
+  				<li class="nav"><a class=nav href="collect.html">collect</a> 
+  				<a class=nav href="collate.html">collate</a></li>
   			</div>
   			<div class="col-md-4"><h1><a href="index.html">Library of Contingencies*</a></h1></div>
   			<div class="col-md-4">
@@ -26,12 +26,10 @@
   	<div class="container-fluid">
   		<div class="row">
 			<div class="col">
+    <!--     <img src="./IMG/Tasks_of_the_Contingent_Librarian3.jpg" class="img-responsive" alt="Responsive image"> -->
 			</div>
 			<div class="col">
-				<h2>*A note to the reader:<br>
-This text has been written with the intention to be materialised in a very specific form; a set of A6-sized index cards, contained in a box. Please read it while holding the cards in your hands, shuffling and reordering them, making your own text as you read.
-These cards list the tasks performed on the site of contingencies, the bootleg library. Tasks are described on the obverse, and related images and references are on the reverse.
-</h2>
+				<img src="./IMG/Tasks_of_the_Contingent_Librarian3.jpg" class="img-responsive" alt="Responsive image">
 			</div>
 		</div>
 	</div>
diff --git a/sketches/multiplying.html b/sketches/multiplying.html
index 5efc07c..97bb952 100644
--- a/sketches/multiplying.html
+++ b/sketches/multiplying.html
@@ -16,8 +16,8 @@
   	<div class="container-fluid">
   		<div class="row">
   			<div class="col-md-4">
-  				<p><a class="nav" href="collect.html">collect</a>
-            <a class="nav" href="collate.html">collate</a></p>
+  				<li class="nav"><a class=nav href="collect.html">collect</a> 
+          <a class=nav href="collate.html">collate</a></li>
   			</div>
   			<div class="col-md-4"><h1><a href="index.html">Library of Contingencies*</a></h1></div>
   			<div class="col-md-4">
diff --git a/sketches/republishing.html b/sketches/republishing.html
index 1351ebb..65c4744 100644
--- a/sketches/republishing.html
+++ b/sketches/republishing.html
@@ -16,8 +16,8 @@
   	<div class="container-fluid">
   		<div class="row">
   			<div class="col-md-4">
-  				<p><a class="nav" href="collect.html">collect</a>
-            <a class="nav" href="collate.html">collate</a></p>
+  				<li class="nav"><a class=nav href="collect.html">collect</a> 
+          <a class=nav href="collate.html">collate</a></li>
   			</div>
   			<div class="col-md-4"><h1><a href="index.html">Library of Contingencies*</a></h1></div>
   			<div class="col-md-4">
diff --git a/sketches/style.css b/sketches/style.css
index 2f34521..5f0a7a9 100644
--- a/sketches/style.css
+++ b/sketches/style.css
@@ -7,7 +7,13 @@ padding: 6px;
 }
 
 a {
-	display: inline;
+
+}
+
+.nav {
+	display: block;
+	border: 1px solid black;
+	padding: 6px;
 }
 a:link {
 	color: blue;
@@ -35,11 +41,12 @@ h2 {
 
 div .container-fluid {
 	background-color: grey;
-	padding-top: 12px;
+	/*padding-top: 12px;*/
 }
 
 .col-md-4 {
-padding:6px;
+padding-left: 6px;
+padding-right: 6px;
 }
 
 p .nav{
@@ -49,7 +56,6 @@ font-size: 0.9em;
 iframe {
 	width: 100%;
 	height: 100%;
-
 }
 
 img {
@@ -58,6 +64,11 @@ img {
 	background-color: black;
 }
 
+li .nav {
+  float: left;
+  height: 50px;
+}
+
 title {
 font-family: sans-serif;
 font-size: 1.2em;
diff --git a/sketches/tasks.html b/sketches/tasks.html
index 10726d0..c36e564 100644
--- a/sketches/tasks.html
+++ b/sketches/tasks.html
@@ -16,8 +16,8 @@
   	<div class="container-fluid">
   		<div class="row">
   			<div class="col-md-4">
-  				<p><a class="nav" href="collect.html">collect</a>
-            <a class="nav" href="collate.html">collate</a></p>
+  				<li class="nav"><a class=nav href="collect.html">collect</a> 
+          <a class=nav href="collate.html">collate</a></li>
   			</div>
   			<div class="col-md-4"><h1><a href="index.html">Library of Contingencies*</a></h1></div>
   			<div class="col-md-4">