diff --git a/index.html b/index.html
index 73adfe6..631723f 100755
--- a/index.html
+++ b/index.html
@@ -36,6 +36,9 @@ $(document).ready(function(){
 				return true
 			}
 		})
+	$('.button.cover').click(goToMagazineCover)
+	$('.button.next-article').click(nextArticle)
+	$('.button.prev-article').click(prevArticle)
 
 	// XXX add splash screen...
 	// XXX
@@ -454,6 +457,14 @@ function createPage(article, template){
 <div class="viewer">
 
 	<!-- XXX add toolbars here... -->
+	<div class="top-toolbar">
+		mooo
+		<div class="button cover">Issue Cover</div>
+		<div class="button prev-article">Prev Article</div>
+		<div class="button next-article">Next Article</div>
+	</div>
+	<div class="bottom-toolbar">
+	</div>
 
 <div class="scaler">
 <div class="aligner">
diff --git a/magazine.css b/magazine.css
index 802f2c9..2e8c6f3 100755
--- a/magazine.css
+++ b/magazine.css
@@ -133,11 +133,55 @@ body {
 	background: silver;
 }
 
+.top-toolbar, .bottom-toolbar {
+	display: block;
+	position: absolute;
+	z-index: 1000;
+	text-align: center;
+	overflow: hidden;
+
+	background: black;
+	opacity: 0.4;
+
+	height: 50px;
+	left: 0px;
+}
+
+.top-toolbar {
+	top: 0px;
+	width: 100%;
+}
+
+.bottom-toolbar {
+	bottom: 0px;
+	width: 100%;
+}
+
+.button {
+	display: inline-block;
+	color: white;
+	font-size: 25px;
+	font-weight: bold;
+
+	cursor: hand;
+
+	vertical-align: center;
+
+	width: auto;
+
+	margin-left: 20px;
+	margin-right: 20px;
+}
 
 /* modes */
 .page-view-mode.viewer {
 }
 
+.page-view-mode .top-toolbar,
+.page-view-mode .bottom-toolbar {
+	height: 0px;
+}
+
 .page-view-mode .page .content {
 }
 .page-view-mode .current.page .content {