diff --git a/sketches/site3/clear.html b/sketches/site3/clear.html
new file mode 100644
index 0000000..e8d46a5
--- /dev/null
+++ b/sketches/site3/clear.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html class="no-js" lang="">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title></title>
+        <meta name="description" content="">
+        <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
+
+        <link rel="manifest" href="site.webmanifest">
+        <link rel="apple-touch-icon" href="icon.png">
+        <!-- Place favicon.ico in the root directory -->
+
+        <link rel="stylesheet" href="css/normalize.css">
+        <link rel="stylesheet" href="css/main.css">
+        <link rel="stylesheet" type="text/css" href="style.css">
+
+    </head>
+    <body>
+        <!--[if lte IE 9]>
+            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
+        <![endif]-->
+
+        <!-- Add your site or application content here -->
+        <script src="js/vendor/modernizr-3.5.0.min.js"></script>
+        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+        <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
+        <script src="js/plugins.js"></script>
+        <script src="js/main.js"></script>
+
+        <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
+        <script>
+            window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
+            ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
+        </script>
+        <script src="https://www.google-analytics.com/analytics.js" async defer></script>
+    </body>
+</html>
diff --git a/sketches/site3/index.html b/sketches/site3/index.html
index ee671d9..4fbfc67 100644
--- a/sketches/site3/index.html
+++ b/sketches/site3/index.html
@@ -25,18 +25,22 @@
 
         <!-- Add your site or application content here -->
         <div class="container-fluid">
-        	<div class="row"><a class="heading" href="note.html" target="verso">Library of Contingencies*</a><a>
+        	<div class="row">
+                <a class="heading" href="note.html" target="verso">Library of Contingencies*</a>
+                <nav><ul class="heading">
+                    <a class="control" href="bootlegging.html" target="verso">shuffle</a>
+                <a class="control" href="clear.html" target="recto">clear</a>
+                <a class="control" href="https://pad.xpub.nl/p/empty_pad" target="bottom">pad</a>
+            </ul></nav>
         	</div>
   			<div class="row">
   				<div class="col">
 					<iframe class="cards" name="verso" src="note.html" target="recto"><a href="bootlegging.html">*A note to the reader</a></iframe>
-                    <a class="control" href="bootlegging.html" target="verso">shuffle</a>
 				</div>
   				<div class="col">
 					<iframe class="cards" name="recto" target="verso"></iframe>
-                    <a class="control" href="https://pad.xpub.nl/p/empty_pad" target="recto">clear</a>
-					<!-- <iframe name="bottom" style="border:none;"></iframe> -->
-  			</div>
+					<iframe class="cards" name="bottom"></iframe>
+                </div>
             <!-- flip -->
 		  <!-- <div class="row"><a href="note.html" target="verso">flip</a>
             </div> -->
diff --git a/sketches/site3/style.css b/sketches/site3/style.css
index 244c715..e0db82b 100644
--- a/sketches/site3/style.css
+++ b/sketches/site3/style.css
@@ -68,9 +68,9 @@ iframe[name="verso"] {
   background-image: url("./IMG/2px_grey.jpg");
 }
 
-.bottom {
+iframe[name="bottom"] {
   width: 100%;
-  border: none;
+  height: 100%
 }
 
 .cards {
@@ -96,6 +96,6 @@ img {
   border: solid 1px blue;
 }
 
-p {
-
+nav {
+text-align: right;
 }
\ No newline at end of file
