diff --git a/public/main.css b/public/main.css
new file mode 100644
index 0000000..f147ce8
--- /dev/null
+++ b/public/main.css
@@ -0,0 +1,143 @@
+@import url(https://fonts.googleapis.com/css?family=Cabin:400);
+.search-form {
+  background: #151515;
+  height: 100%;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+}
+
+.search-form:before,
+.search-form:after {
+  content: '';
+  display: block;
+  height: 1px;
+  left: 50%;
+  margin: 0 0 0 -400px;
+  position: absolute;
+  width: 800px;
+}
+
+.search-form:before {
+  background: #444;
+  background: linear-gradient(left, #151515, #444, #151515);
+  top: 192px;
+}
+
+.search-form:after {
+  background: #000;
+  background: linear-gradient(left, #151515, #000, #151515);
+  top: 191px;
+}
+
+.search-form form {
+  background: #111;
+  background: linear-gradient(#1b1b1b, #111);
+  border: 1px solid #000;
+  border-radius: 5px;
+  box-shadow: inset 0 0 0 1px #272727;
+  display: inline-block;
+  font-size: 0px;
+  margin: 150px auto 0;
+  padding: 20px;
+  position: relative;
+  z-index: 1;
+}
+
+.search-form input {
+  background: #222;
+  background: linear-gradient(#333, #222);
+  border: 1px solid #444;
+  border-radius: 5px 0 0 5px;
+  box-shadow: 0 2px 0 #000;
+  color: #888;
+  display: block;
+  float: left;
+  font-family: 'Cabin', helvetica, arial, sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  height: 40px;
+  margin: 0;
+  padding: 0 10px;
+  text-shadow: 0 -1px 0 #000;
+  width: 200px;
+}
+
+.ie .search-form input {
+  line-height: 40px;
+}
+
+.search-form input::-webkit-input-placeholder {
+  color: #888;
+}
+
+.search-form input:-moz-placeholder {
+  color: #888;
+}
+
+.search-form input:focus {
+  animation: glow 800ms ease-out infinite alternate;
+  background: #222922;
+  background: linear-gradient(#333933, #222922);
+  border-color: #393;
+  box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
+  color: #efe;
+  outline: none;
+}
+
+.search-form input:focus::-webkit-input-placeholder {
+  color: #efe;
+}
+
+.search-form input:focus:-moz-placeholder {
+  color: #efe;
+}
+
+.search-form button {
+  background: #222;
+  background: linear-gradient(#333, #222);
+  box-sizing: border-box;
+  border: 1px solid #444;
+  border-left-color: #000;
+  border-radius: 0 5px 5px 0;
+  box-shadow: 0 2px 0 #000;
+  color: #fff;
+  display: block;
+  float: left;
+  font-family: 'Cabin', helvetica, arial, sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+  height: 40px;
+  line-height: 40px;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  text-shadow: 0 -1px 0 #000;
+  width: 80px;
+}
+
+.search-form button:hover,
+.search-form button:focus {
+  background: #292929;
+  background: linear-gradient(#393939, #292929);
+  color: #5f5;
+  outline: none;
+}
+
+.search-form button:active {
+  background: #292929;
+  background: linear-gradient(#393939, #292929);
+  box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
+  top: 1px;
+}
+
+@keyframes glow {
+  0% {
+    border-color: #393;
+    box-shadow: 0 0 5px rgba(0, 255, 0, .2), inset 0 0 5px rgba(0, 255, 0, .1), 0 2px 0 #000;
+  }
+  100% {
+    border-color: #6f6;
+    box-shadow: 0 0 20px rgba(0, 255, 0, .6), inset 0 0 10px rgba(0, 255, 0, .4), 0 2px 0 #000;
+  }
+}
diff --git a/server/server.js b/server/server.js
index ac267ea..6277564 100644
--- a/server/server.js
+++ b/server/server.js
@@ -16,6 +16,7 @@ const server = express()
 // set template engine
 server.set('view engine', 'ejs')
 server.set('views', path.join(__dirname, 'templates'))
+server.use('/public', express.static('public'))
 
 // set up console logs in dev mode
 if (process.env.NODE_ENV !== 'production') {
diff --git a/server/templates/footer.ejs b/server/templates/footer.ejs
new file mode 100644
index 0000000..15b9011
--- /dev/null
+++ b/server/templates/footer.ejs
@@ -0,0 +1,3 @@
+</body>
+
+</html>
diff --git a/server/templates/header.ejs b/server/templates/header.ejs
index 5960e31..3eec78e 100644
--- a/server/templates/header.ejs
+++ b/server/templates/header.ejs
@@ -1 +1,14 @@
-<h1>Penis</h1>
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Goodreads API</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous">
+  <link rel="stylesheet" href="/public/main.css" />
+</head>
+
+<body>
diff --git a/server/templates/index.ejs b/server/templates/index.ejs
index 9a71e42..fbbfbb7 100644
--- a/server/templates/index.ejs
+++ b/server/templates/index.ejs
@@ -1,3 +1,7 @@
 <% include header %>
-<h1>An awesome template</h1>
-{{>header }}
+
+<h1>Welcome</h1>
+
+<p>To the most legit website in the world. Besides rating books you can also buy the best drugs.</p>
+
+<% include footer %>
diff --git a/server/templates/result.ejs b/server/templates/result.ejs
new file mode 100644
index 0000000..795c3ce
--- /dev/null
+++ b/server/templates/result.ejs
@@ -0,0 +1,3 @@
+<% include header %>
+
+<% include footer %>
diff --git a/server/templates/search.ejs b/server/templates/search.ejs
new file mode 100644
index 0000000..fb4ab50
--- /dev/null
+++ b/server/templates/search.ejs
@@ -0,0 +1,10 @@
+<% include header %>
+
+<section class="search-form">
+  <form class="pure-form " action="" method="">
+    <input type="text" placeholder="Enter ISBN" autofocus required />
+    <button>Search</button>
+  </form>
+</section>
+
+<% include footer %>