diff --git a/templates/400.html b/templates/400.html
index 3837895..0184d44 100644
--- a/templates/400.html
+++ b/templates/400.html
@@ -1,293 +1,40 @@
 <!DOCTYPE html>
 <html lang=en>
-  <head>
-    <title>Short: the simple url shortener</title>
-    <style>
-    @import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
-
-    body {
-      background: #D3DEEA;
-    }
-
-    .top {
-      margin-top: 30px;
-    }
-
-    .container {
-      margin: 0 auto;
-      position: relative;
-      width: 250px;
-      height: 250px;
-      margin-top: -40px;
-    }
-
-    .ghost {
-      width: 50%;
-      height: 53%;
-      left: 25%;
-      top: 10%;
-      position: absolute;
-      border-radius: 50% 50% 0 0;
-      background: #EDEDED;
-      border: 1px solid #BFC0C0;
-      border-bottom: none;
-      animation: float 2s ease-out infinite;
-    }
-
-    .ghost-copy {
-      width: 50%;
-      height: 53%;
-      left: 25%;
-      top: 10%;
-      position: absolute;
-      border-radius: 50% 50% 0 0;
-      background: #EDEDED;
-      border: 1px solid #BFC0C0;
-      border-bottom: none;
-      animation: float 2s ease-out infinite;
-      z-index: 0;
-    }
-
-    .face {
-      position: absolute;
-      width: 100%;
-      height: 60%;
-      top: 20%;
-    }
-    .eye, .eye-right {
-      position: absolute;
-      background: #585959;
-      width: 13px;
-      height: 13px;
-      border-radius: 50%;
-      top: 40%;
-    }
-
-    .eye {
-      left: 25%;
-    }
-    .eye-right {
-      right: 25%;
-    }
-
-    .mouth {
-      position:absolute;
-      top: 50%;
-      left: 45%;
-      width: 10px;
-      height: 10px;
-      border: 3px solid;
-      border-radius: 50%;
-      border-color: transparent #585959 #585959 transparent;
-      transform: rotate(225deg);
-    }
-
-    .one, .two, .three, .four {
-      position: absolute;
-      background: #EDEDED;
-      top: 85%;
-      width: 25%;
-      height: 23%;
-      border: 1px solid #BFC0C0;
-      z-index: 0;
-    }
-
-    .one {
-      border-radius: 0 0 100% 30%;
-      left: -1px;
-    }
-
-    .two {
-      left: 23%;
-      border-radius: 0 0 50% 50%;
-    }
-
-    .three {
-      left: 50%;
-      border-radius: 0 0 50% 50%;
-    }
-
-    .four {
-      left: 74.5%;
-      border-radius: 0 0 30% 100%;
-    }
-
-    .shadow {
-      position: absolute;
-      width: 30%;
-      height: 7%;
-      background: #BFC0C0;
-      left: 35%;
-      top: 80%;
-      border-radius: 50%;
-      animation: scale 2s infinite;
-    }
-
-    @keyframes scale {
-      0% {
-        transform: scale(1);
-      }
-      50% {
-        transform: scale(1.1);
-      }
-      100% {
-        transform: scale(1);
-      }
-    }
-
-    @keyframes float {
-      50% {
-        transform: translateY(15px);
-      }
-    }
-
-    .bottom {
-      margin-top: 10px;
-    }
-
-    /*text styling*/
-    h1 {
-      font-family: 'Abril Fatface', serif;
-      color: #EDEDED;
-      text-align: center;
-      font-size: 9em;
-      margin: 0;
-      text-shadow: -1px 0 #BFC0C0, 0 1px #BFC0C0, 1px 0 #BFC0C0, 0 -1px #BFC0C0;
-    }
-    h3 {
-      font-family: 'Lato', sans-serif;
-      font-size: 2em;
-      text-transform: uppercase;
-      text-align: center;
-      color: #BFC0C0;
-      margin-top: -20px;
-      font-weight: 900;
-    }
-    p {
-      text-align: center;
-      font-family: 'Lato', sans-serif;
-      color: #585959;
-      font-size: .6em;
-      margin-top: -20px;
-      text-transform: uppercase;
-    }
-
-    .search {
-      text-align: center;
-    }
-
-    .buttons {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-top: 10px;
-    }
-
-    /*search style*/
-
-    .search-bar {
-      border: 1px solid #BFC0C0;
-      padding: 5px;
-      height: 20px;
-      margin-left: -30px;
-      width: 200px;
-      outline: none;
-      &:focus {
-        border: 1px solid #D3DEEA;
-      }
-    }
-
-    .search-btn {
-      position: absolute;
-      width: 30px;
-      height: 32px;
-      border: 1px solid #BFC0C0;
-      background: #BFC0C0;
-      text-align: center;
-      color: #EDEDED;
-      cursor: pointer;
-      font-size: 1em;
-      outline: none;
-      &:hover {
-        background: #EDEDED;
-        border: 1px solid #EDEDED;
-        color: #BFC0C0;
-        transition: all .2s ease;
-      }
-    }
-
-    .btn {
-      background: #EDEDED;
-      padding: 15px 20px;
-      margin: 5px;
-      color: #585959;
-      font-family: 'Lato', sans-serif;
-      text-transform: uppercase;
-      font-size: .6em;
-      letter-spacing: 1px;
-      border: 0;
-      &:hover {
-        background: #BFC0C0;
-        transition: all .4s ease-out;
-      }
-    }
-
-    footer {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      text-align: center;
-      font-size: 0.8em;
-      text-transform: uppercase;
-      padding: 10px;
-      color: #EA7996;
-      letter-spacing: 3px;
-      font-family: 'Lato', sans-serif;
-      a {
-        color: #ffffff;
-        text-decoration: none;
-        &:hover {
-          color: #7d7d7d;
-        }
-      }
-    }
-    </style>
-  </head>
-<body>
-<div id="background"></div>
-<div class="top">
-  <h1>400</h1>
-  <h3>Bad Request</h3>
-</div>
-<div class="container">
-  <div class="ghost-copy">
-    <div class="one"></div>
-    <div class="two"></div>
-    <div class="three"></div>
-    <div class="four"></div>
+  {{ template "header" }}
+  <body>
+  <div id="background"></div>
+  <div class="top">
+    <h1>400</h1>
+    <h3>Bad Request</h3>
   </div>
-  <div class="ghost">
-    <div class="face">
-      <div class="eye"></div>
-      <div class="eye-right"></div>
-      <div class="mouth"></div>
+  <div class="container">
+    <div class="ghost-copy">
+      <div class="one"></div>
+      <div class="two"></div>
+      <div class="three"></div>
+      <div class="four"></div>
     </div>
+    <div class="ghost">
+      <div class="face">
+        <div class="eye"></div>
+        <div class="eye-right"></div>
+        <div class="sad_mouth"></div>
+      </div>
+    </div>
+    <div class="shadow"></div>
+  </div>
+  <div class="bottom">
+    <p>Boo, looks like a ghost didn't like your request!
+    <br>
+    But you can try again, type an URL below to shorten it</p>
+    <form class="search" action="/" method="POST">
+      <input type="text" id="url" name="url" class="search-bar" placeholder="http://something :)">
+      <button type="submit" value="Submit" name="Submit" class="search-btn">
+        <i class="fa fa-search"></i>
+      </button>
+    </form>
   </div>
-  <div class="shadow"></div>
-</div>
-<div class="bottom">
-  <p>Boo, looks like a ghost didn't like your request!
-  <br>
-  But you can try again, type an URL below to shorten it</p>
-  <form class="search" action="/" method="POST">
-    <input type="text" id="url" name="url" class="search-bar" placeholder="http://something :)">
-    <button type="submit" value="Submit" name="Submit" class="search-btn">
-      <i class="fa fa-search"></i>
-    </button>
-  </form>
-</div>
 
-<footer>
-  <p>made by <a href="https://codepen.io/juliepark"> julie</a> ♡
-</footer>
-</body>
\ No newline at end of file
+  {{ template "footer" }}
+  </body>
+</html>
\ No newline at end of file
diff --git a/templates/404.html b/templates/404.html
index a1b8efd..be7cd44 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -1,293 +1,41 @@
 <!DOCTYPE html>
 <html lang=en>
-  <head>
-    <title>Short: the simple url shortener</title>
-    <style>
-    @import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
+  {{ template "header" }}
 
-    body {
-      background: #D3DEEA;
-    }
-
-    .top {
-      margin-top: 30px;
-    }
-
-    .container {
-      margin: 0 auto;
-      position: relative;
-      width: 250px;
-      height: 250px;
-      margin-top: -40px;
-    }
-
-    .ghost {
-      width: 50%;
-      height: 53%;
-      left: 25%;
-      top: 10%;
-      position: absolute;
-      border-radius: 50% 50% 0 0;
-      background: #EDEDED;
-      border: 1px solid #BFC0C0;
-      border-bottom: none;
-      animation: float 2s ease-out infinite;
-    }
-
-    .ghost-copy {
-      width: 50%;
-      height: 53%;
-      left: 25%;
-      top: 10%;
-      position: absolute;
-      border-radius: 50% 50% 0 0;
-      background: #EDEDED;
-      border: 1px solid #BFC0C0;
-      border-bottom: none;
-      animation: float 2s ease-out infinite;
-      z-index: 0;
-    }
-
-    .face {
-      position: absolute;
-      width: 100%;
-      height: 60%;
-      top: 20%;
-    }
-    .eye, .eye-right {
-      position: absolute;
-      background: #585959;
-      width: 13px;
-      height: 13px;
-      border-radius: 50%;
-      top: 40%;
-    }
-
-    .eye {
-      left: 25%;
-    }
-    .eye-right {
-      right: 25%;
-    }
-
-    .mouth {
-      position:absolute;
-      top: 50%;
-      left: 45%;
-      width: 10px;
-      height: 10px;
-      border: 3px solid;
-      border-radius: 50%;
-      border-color: transparent #585959 #585959 transparent;
-      transform: rotate(45deg);
-    }
-
-    .one, .two, .three, .four {
-      position: absolute;
-      background: #EDEDED;
-      top: 85%;
-      width: 25%;
-      height: 23%;
-      border: 1px solid #BFC0C0;
-      z-index: 0;
-    }
-
-    .one {
-      border-radius: 0 0 100% 30%;
-      left: -1px;
-    }
-
-    .two {
-      left: 23%;
-      border-radius: 0 0 50% 50%;
-    }
-
-    .three {
-      left: 50%;
-      border-radius: 0 0 50% 50%;
-    }
-
-    .four {
-      left: 74.5%;
-      border-radius: 0 0 30% 100%;
-    }
-
-    .shadow {
-      position: absolute;
-      width: 30%;
-      height: 7%;
-      background: #BFC0C0;
-      left: 35%;
-      top: 80%;
-      border-radius: 50%;
-      animation: scale 2s infinite;
-    }
-
-    @keyframes scale {
-      0% {
-        transform: scale(1);
-      }
-      50% {
-        transform: scale(1.1);
-      }
-      100% {
-        transform: scale(1);
-      }
-    }
-
-    @keyframes float {
-      50% {
-        transform: translateY(15px);
-      }
-    }
-
-    .bottom {
-      margin-top: 10px;
-    }
-
-    /*text styling*/
-    h1 {
-      font-family: 'Abril Fatface', serif;
-      color: #EDEDED;
-      text-align: center;
-      font-size: 9em;
-      margin: 0;
-      text-shadow: -1px 0 #BFC0C0, 0 1px #BFC0C0, 1px 0 #BFC0C0, 0 -1px #BFC0C0;
-    }
-    h3 {
-      font-family: 'Lato', sans-serif;
-      font-size: 2em;
-      text-transform: uppercase;
-      text-align: center;
-      color: #BFC0C0;
-      margin-top: -20px;
-      font-weight: 900;
-    }
-    p {
-      text-align: center;
-      font-family: 'Lato', sans-serif;
-      color: #585959;
-      font-size: .6em;
-      margin-top: -20px;
-      text-transform: uppercase;
-    }
-
-    .search {
-      text-align: center;
-    }
-
-    .buttons {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-top: 10px;
-    }
-
-    /*search style*/
-
-    .search-bar {
-      border: 1px solid #BFC0C0;
-      padding: 5px;
-      height: 20px;
-      margin-left: -30px;
-      width: 200px;
-      outline: none;
-      &:focus {
-        border: 1px solid #D3DEEA;
-      }
-    }
-
-    .search-btn {
-      position: absolute;
-      width: 30px;
-      height: 32px;
-      border: 1px solid #BFC0C0;
-      background: #BFC0C0;
-      text-align: center;
-      color: #EDEDED;
-      cursor: pointer;
-      font-size: 1em;
-      outline: none;
-      &:hover {
-        background: #EDEDED;
-        border: 1px solid #EDEDED;
-        color: #BFC0C0;
-        transition: all .2s ease;
-      }
-    }
-
-    .btn {
-      background: #EDEDED;
-      padding: 15px 20px;
-      margin: 5px;
-      color: #585959;
-      font-family: 'Lato', sans-serif;
-      text-transform: uppercase;
-      font-size: .6em;
-      letter-spacing: 1px;
-      border: 0;
-      &:hover {
-        background: #BFC0C0;
-        transition: all .4s ease-out;
-      }
-    }
-
-    footer {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      text-align: center;
-      font-size: 0.8em;
-      text-transform: uppercase;
-      padding: 10px;
-      color: #EA7996;
-      letter-spacing: 3px;
-      font-family: 'Lato', sans-serif;
-      a {
-        color: #ffffff;
-        text-decoration: none;
-        &:hover {
-          color: #7d7d7d;
-        }
-      }
-    }
-    </style>
-  </head>
-<body>
-<div id="background"></div>
-<div class="top">
-  <h1>404</h1>
-  <h3>page not found</h3>
-</div>
-<div class="container">
-  <div class="ghost-copy">
-    <div class="one"></div>
-    <div class="two"></div>
-    <div class="three"></div>
-    <div class="four"></div>
+  <body>
+  <div id="background"></div>
+  <div class="top">
+    <h1>404</h1>
+    <h3>page not found</h3>
   </div>
-  <div class="ghost">
-    <div class="face">
-      <div class="eye"></div>
-      <div class="eye-right"></div>
-      <div class="mouth"></div>
+  <div class="container">
+    <div class="ghost-copy">
+      <div class="one"></div>
+      <div class="two"></div>
+      <div class="three"></div>
+      <div class="four"></div>
     </div>
+    <div class="ghost">
+      <div class="face">
+        <div class="eye"></div>
+        <div class="eye-right"></div>
+        <div class="mouth"></div>
+      </div>
+    </div>
+    <div class="shadow"></div>
+  </div>
+  <div class="bottom">
+    <p>Boo, looks like a ghost stole this page!
+    <br>
+    But you can type an URL below to shorten it</p>
+    <form class="search" action="/" method="POST">
+      <input type="text" id="url" name="url" class="search-bar" placeholder="http://something :)">
+      <button type="submit" value="Submit" name="Submit" class="search-btn">
+        <i class="fa fa-search"></i>
+      </button>
+    </form>
   </div>
-  <div class="shadow"></div>
-</div>
-<div class="bottom">
-  <p>Boo, looks like a ghost stole this page!
-  <br>
-  But you can type an URL below to shorten it</p>
-  <form class="search" action="/" method="POST">
-    <input type="text" id="url" name="url" class="search-bar" placeholder="http://something :)">
-    <button type="submit" value="Submit" name="Submit" class="search-btn">
-      <i class="fa fa-search"></i>
-    </button>
-  </form>
-</div>
 
-<footer>
-  <p>made by <a href="https://codepen.io/juliepark"> julie</a> ♡
-</footer>
-</body>
\ No newline at end of file
+  {{ template "footer" }}
+  </body>
+</html>
\ No newline at end of file
diff --git a/templates/500.html b/templates/500.html
index 615282d..df07b3a 100644
--- a/templates/500.html
+++ b/templates/500.html
@@ -1,287 +1,35 @@
 <!DOCTYPE html>
 <html lang=en>
-  <head>
-    <title>Short: the simple url shortener</title>
-    <style>
-    @import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
+  {{ template "header" }}
 
-    body {
-      background: #D3DEEA;
-    }
-
-    .top {
-      margin-top: 30px;
-    }
-
-    .container {
-      margin: 0 auto;
-      position: relative;
-      width: 250px;
-      height: 250px;
-      margin-top: -40px;
-    }
-
-    .ghost {
-      width: 50%;
-      height: 53%;
-      left: 25%;
-      top: 10%;
-      position: absolute;
-      border-radius: 50% 50% 0 0;
-      background: #EDEDED;
-      border: 1px solid #BFC0C0;
-      border-bottom: none;
-      animation: float 2s ease-out infinite;
-    }
-
-    .ghost-copy {
-      width: 50%;
-      height: 53%;
-      left: 25%;
-      top: 10%;
-      position: absolute;
-      border-radius: 50% 50% 0 0;
-      background: #EDEDED;
-      border: 1px solid #BFC0C0;
-      border-bottom: none;
-      animation: float 2s ease-out infinite;
-      z-index: 0;
-    }
-
-    .face {
-      position: absolute;
-      width: 100%;
-      height: 60%;
-      top: 20%;
-    }
-    .eye, .eye-right {
-      position: absolute;
-      {# background: #585959; #}
-      width: 13px;
-      height: 13px;
-      border-radius: 50%;
-      top: 40%;
-    }
-
-    .eye {
-      left: 25%;
-    }
-    .eye-right {
-      right: 25%;
-    }
-
-    .mouth {
-      position:absolute;
-      top: 50%;
-      left: 45%;
-      width: 10px;
-      height: 10px;
-      border: 3px solid;
-      border-radius: 50%;
-      border-color: transparent #585959 #585959 transparent;
-      transform: rotate(225deg);
-    }
-
-    .one, .two, .three, .four {
-      position: absolute;
-      background: #EDEDED;
-      top: 85%;
-      width: 25%;
-      height: 23%;
-      border: 1px solid #BFC0C0;
-      z-index: 0;
-    }
-
-    .one {
-      border-radius: 0 0 100% 30%;
-      left: -1px;
-    }
-
-    .two {
-      left: 23%;
-      border-radius: 0 0 50% 50%;
-    }
-
-    .three {
-      left: 50%;
-      border-radius: 0 0 50% 50%;
-    }
-
-    .four {
-      left: 74.5%;
-      border-radius: 0 0 30% 100%;
-    }
-
-    .shadow {
-      position: absolute;
-      width: 30%;
-      height: 7%;
-      background: #BFC0C0;
-      left: 35%;
-      top: 80%;
-      border-radius: 50%;
-      animation: scale 2s infinite;
-    }
-
-    @keyframes scale {
-      0% {
-        transform: scale(1);
-      }
-      50% {
-        transform: scale(1.1);
-      }
-      100% {
-        transform: scale(1);
-      }
-    }
-
-    @keyframes float {
-      50% {
-        transform: translateY(15px);
-      }
-    }
-
-    .bottom {
-      margin-top: 10px;
-    }
-
-    /*text styling*/
-    h1 {
-      font-family: 'Abril Fatface', serif;
-      color: #EDEDED;
-      text-align: center;
-      font-size: 9em;
-      margin: 0;
-      text-shadow: -1px 0 #BFC0C0, 0 1px #BFC0C0, 1px 0 #BFC0C0, 0 -1px #BFC0C0;
-    }
-    h3 {
-      font-family: 'Lato', sans-serif;
-      font-size: 2em;
-      text-transform: uppercase;
-      text-align: center;
-      color: #BFC0C0;
-      margin-top: -20px;
-      font-weight: 900;
-    }
-    p {
-      text-align: center;
-      font-family: 'Lato', sans-serif;
-      color: #585959;
-      font-size: .6em;
-      margin-top: -20px;
-      text-transform: uppercase;
-    }
-
-    .search {
-      text-align: center;
-    }
-
-    .buttons {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-top: 10px;
-    }
-
-    /*search style*/
-
-    .search-bar {
-      border: 1px solid #BFC0C0;
-      padding: 5px;
-      height: 20px;
-      margin-left: -30px;
-      width: 200px;
-      outline: none;
-      &:focus {
-        border: 1px solid #D3DEEA;
-      }
-    }
-
-    .search-btn {
-      position: absolute;
-      width: 30px;
-      height: 32px;
-      border: 1px solid #BFC0C0;
-      background: #BFC0C0;
-      text-align: center;
-      color: #EDEDED;
-      cursor: pointer;
-      font-size: 1em;
-      outline: none;
-      &:hover {
-        background: #EDEDED;
-        border: 1px solid #EDEDED;
-        color: #BFC0C0;
-        transition: all .2s ease;
-      }
-    }
-
-    .btn {
-      background: #EDEDED;
-      padding: 15px 20px;
-      margin: 5px;
-      color: #585959;
-      font-family: 'Lato', sans-serif;
-      text-transform: uppercase;
-      font-size: .6em;
-      letter-spacing: 1px;
-      border: 0;
-      &:hover {
-        background: #BFC0C0;
-        transition: all .4s ease-out;
-      }
-    }
-
-    footer {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      text-align: center;
-      font-size: 0.8em;
-      text-transform: uppercase;
-      padding: 10px;
-      color: #EA7996;
-      letter-spacing: 3px;
-      font-family: 'Lato', sans-serif;
-      a {
-        color: #ffffff;
-        text-decoration: none;
-        &:hover {
-          color: #7d7d7d;
-        }
-      }
-    }
-    </style>
-  </head>
-<body>
-<div id="background"></div>
-<div class="top">
-  <h1>500</h1>
-  <h3>Internal server error</h3>
-</div>
-<div class="container">
-  <div class="ghost-copy">
-    <div class="one"></div>
-    <div class="two"></div>
-    <div class="three"></div>
-    <div class="four"></div>
+  <body>
+  <div id="background"></div>
+  <div class="top">
+    <h1>500</h1>
+    <h3>Internal server error</h3>
   </div>
-  <div class="ghost">
-    <div class="face">
-      <div class="eye"><h3 style="color:black;font-size:1.5em">X</h3></div>
-      <div class="eye-right"><h3 style="color:black;font-size:1.5em">X</h3></div>
-      <div class="mouth"></div>
+  <div class="container">
+    <div class="ghost-copy">
+      <div class="one"></div>
+      <div class="two"></div>
+      <div class="three"></div>
+      <div class="four"></div>
     </div>
+    <div class="ghost">
+      <div class="face">
+        <div class="deadeye"><h3 style="color:black;font-size:1.5em">X</h3></div>
+        <div class="deadeye-right"><h3 style="color:black;font-size:1.5em">X</h3></div>
+        <div class="mouth"></div>
+      </div>
+    </div>
+    <div class="shadow"></div>
+  </div>
+  <div class="bottom">
+    <p>Boo, the ghost is broken :(
+    <br>
+    His last words where: {{ . }} </p>
   </div>
-  <div class="shadow"></div>
-</div>
-<div class="bottom">
-  <p>Boo, the ghost is broken :(
-  <br>
-  His last words where: {{ . }} </p>
-</div>
 
-<footer>
-  <p>made by <a href="https://codepen.io/juliepark"> julie</a> ♡
-</footer>
-</body>
\ No newline at end of file
+  {{ template "footer" }}
+  </body>
+</html>
\ No newline at end of file
diff --git a/templates/footer.html b/templates/footer.html
new file mode 100644
index 0000000..9e1b755
--- /dev/null
+++ b/templates/footer.html
@@ -0,0 +1,5 @@
+{{ define "footer" }}
+<footer>
+  <p>html theme by <a href="https://codepen.io/juliepark"> julie</a> ♡
+</footer>
+{{ end }}
\ No newline at end of file
diff --git a/templates/header.html b/templates/header.html
new file mode 100644
index 0000000..6b2bb2a
--- /dev/null
+++ b/templates/header.html
@@ -0,0 +1,282 @@
+{{ define "header" }}
+<head>
+  <title>Short: the simple url shortener</title>
+    <style>
+    @import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
+
+    body {
+      background: #D3DEEA;
+    }
+
+    .top {
+      margin-top: 30px;
+    }
+
+    .container {
+      margin: 0 auto;
+      position: relative;
+      width: 250px;
+      height: 250px;
+      margin-top: -40px;
+    }
+
+    .ghost {
+      width: 50%;
+      height: 53%;
+      left: 25%;
+      top: 10%;
+      position: absolute;
+      border-radius: 50% 50% 0 0;
+      background: #EDEDED;
+      border: 1px solid #BFC0C0;
+      border-bottom: none;
+      animation: float 2s ease-out infinite;
+    }
+
+    .ghost-copy {
+      width: 50%;
+      height: 53%;
+      left: 25%;
+      top: 10%;
+      position: absolute;
+      border-radius: 50% 50% 0 0;
+      background: #EDEDED;
+      border: 1px solid #BFC0C0;
+      border-bottom: none;
+      animation: float 2s ease-out infinite;
+      z-index: 0;
+    }
+
+    .face {
+      position: absolute;
+      width: 100%;
+      height: 60%;
+      top: 20%;
+    }
+    .eye, .eye-right {
+      position: absolute;
+      background: #585959;
+      width: 13px;
+      height: 13px;
+      border-radius: 50%;
+      top: 40%;
+    }
+
+    .eye {
+      left: 25%;
+    }
+    .eye-right {
+      right: 25%;
+    }
+
+    .deadeye, .deadeye-right {
+      position: absolute;
+      width: 13px;
+      height: 13px;
+      border-radius: 50%;
+      top: 40%;
+    }
+
+    .deadeye {
+      left: 25%;
+    }
+    .deadeye-right {
+      right: 25%;
+    }
+
+    .mouth {
+      position:absolute;
+      top: 50%;
+      left: 45%;
+      width: 10px;
+      height: 10px;
+      border: 3px solid;
+      border-radius: 50%;
+      border-color: transparent #585959 #585959 transparent;
+      transform: rotate(45deg);
+    }
+
+    .sad_mouth {
+      position:absolute;
+      top: 50%;
+      left: 45%;
+      width: 10px;
+      height: 10px;
+      border: 3px solid;
+      border-radius: 50%;
+      border-color: transparent #585959 #585959 transparent;
+      transform: rotate(225deg);
+    }
+
+    .one, .two, .three, .four {
+      position: absolute;
+      background: #EDEDED;
+      top: 85%;
+      width: 25%;
+      height: 23%;
+      border: 1px solid #BFC0C0;
+      z-index: 0;
+    }
+
+    .one {
+      border-radius: 0 0 100% 30%;
+      left: -1px;
+    }
+
+    .two {
+      left: 23%;
+      border-radius: 0 0 50% 50%;
+    }
+
+    .three {
+      left: 50%;
+      border-radius: 0 0 50% 50%;
+    }
+
+    .four {
+      left: 74.5%;
+      border-radius: 0 0 30% 100%;
+    }
+
+    .shadow {
+      position: absolute;
+      width: 30%;
+      height: 7%;
+      background: #BFC0C0;
+      left: 35%;
+      top: 80%;
+      border-radius: 50%;
+      animation: scale 2s infinite;
+    }
+
+    @keyframes scale {
+      0% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.1);
+      }
+      100% {
+        transform: scale(1);
+      }
+    }
+
+    @keyframes float {
+      50% {
+        transform: translateY(15px);
+      }
+    }
+
+    .bottom {
+      margin-top: 10px;
+    }
+
+    /*text styling*/
+    h1 {
+      font-family: 'Abril Fatface', serif;
+      color: #EDEDED;
+      text-align: center;
+      font-size: 9em;
+      margin: 0;
+      text-shadow: -1px 0 #BFC0C0, 0 1px #BFC0C0, 1px 0 #BFC0C0, 0 -1px #BFC0C0;
+    }
+    h3 {
+      font-family: 'Lato', sans-serif;
+      font-size: 2em;
+      text-transform: uppercase;
+      text-align: center;
+      color: #BFC0C0;
+      margin-top: -20px;
+      font-weight: 900;
+    }
+    p {
+      text-align: center;
+      font-family: 'Lato', sans-serif;
+      color: #585959;
+      font-size: .6em;
+      margin-top: -20px;
+      text-transform: uppercase;
+    }
+
+    .search {
+      text-align: center;
+    }
+
+    .buttons {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 10px;
+    }
+
+    /*search style*/
+
+    .search-bar {
+      border: 1px solid #BFC0C0;
+      padding: 5px;
+      height: 20px;
+      margin-left: -30px;
+      width: 200px;
+      outline: none;
+      &:focus {
+        border: 1px solid #D3DEEA;
+      }
+    }
+
+    .search-btn {
+      position: absolute;
+      width: 30px;
+      height: 32px;
+      border: 1px solid #BFC0C0;
+      background: #BFC0C0;
+      text-align: center;
+      color: #EDEDED;
+      cursor: pointer;
+      font-size: 1em;
+      outline: none;
+      &:hover {
+        background: #EDEDED;
+        border: 1px solid #EDEDED;
+        color: #BFC0C0;
+        transition: all .2s ease;
+      }
+    }
+
+    .btn {
+      background: #EDEDED;
+      padding: 15px 20px;
+      margin: 5px;
+      color: #585959;
+      font-family: 'Lato', sans-serif;
+      text-transform: uppercase;
+      font-size: .6em;
+      letter-spacing: 1px;
+      border: 0;
+      &:hover {
+        background: #BFC0C0;
+        transition: all .4s ease-out;
+      }
+    }
+
+    footer {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      text-align: center;
+      font-size: 0.8em;
+      text-transform: uppercase;
+      padding: 10px;
+      color: #EA7996;
+      letter-spacing: 3px;
+      font-family: 'Lato', sans-serif;
+      a {
+        color: #ffffff;
+        text-decoration: none;
+        &:hover {
+          color: #7d7d7d;
+        }
+      }
+    }
+    </style>
+  </head>
+{{ end }}
diff --git a/templates/index.html b/templates/index.html
index 866a0bb..b4e2f7b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,87 +1,18 @@
 <!DOCTYPE html>
 <html lang=en>
-  <head>
-    <title>Short: the simple url shortener</title>
-    <style>
-		@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
-
-    body {
-      background: #D3DEEA;
-    }
-
-    form{
-			position:fixed;
-			top:32%;
-			left:35%;
-			width:500px;
-			font-family:georgia,garamond,serif;
-			font-size:16px;
-
-		}
-		.bottom {
-      position:fixed;
-			top:30%;
-			left:35%;
-			width:500px;
-    }
-
-		p {
-      text-align: center;
-      font-family: 'Lato', sans-serif;
-      color: #585959;
-      font-size: .6em;
-      margin-top: -20px;
-      text-transform: uppercase;
-    }
-
-		.search {
-      text-align: center;
-    }
-
-		.search-bar {
-      border: 1px solid #BFC0C0;
-      padding: 5px;
-      height: 20px;
-      margin-left: -30px;
-      width: 200px;
-      outline: none;
-      &:focus {
-        border: 1px solid #D3DEEA;
-      }
-    }
-
-		.search-btn {
-      position: absolute;
-      width: 30px;
-      height: 32px;
-      border: 1px solid #BFC0C0;
-      background: #BFC0C0;
-      text-align: center;
-      color: #EDEDED;
-      cursor: pointer;
-      font-size: 1em;
-      outline: none;
-      &:hover {
-        background: #EDEDED;
-        border: 1px solid #EDEDED;
-        color: #BFC0C0;
-        transition: all .2s ease;
-      }
-    }
-
-    </style>
-  </head>
-<body>
-<div class="bottom">
-  <p>Welcome to Short, the simple URL shortener,
-  <br>
-  Type an URL below to shorten it</p>
-  <form class="search" action="/" method="POST">
-    <input type="text" id="url" name="url" class="search-bar" placeholder="http://something :)">
-    <button type="submit" value="Submit" name="Submit" class="search-btn">
-      <i class="fa fa-search"></i>
-    </button>
-  </form>
-</div>
-</body>
+  {{ template "slimheader" }}
+  <body>
+  <div class="bottom">
+    <p>Welcome to Short, the simple URL shortener,
+    <br>
+    Type an URL below to shorten it</p>
+    <form class="search" action="/" method="POST">
+      <input type="text" id="url" name="url" class="search-bar" placeholder="http://something :)">
+      <button type="submit" value="Submit" name="Submit" class="search-btn">
+        <i class="fa fa-search"></i>
+      </button>
+    </form>
+  </div>
+  {{ template "footer" }}
+  </body>
 </html>
\ No newline at end of file
diff --git a/templates/ok.html b/templates/ok.html
index 15ba75b..ef328cc 100644
--- a/templates/ok.html
+++ b/templates/ok.html
@@ -1,33 +1,10 @@
 <!DOCTYPE html>
 <html lang=en>
-  <head>
-    <title>Short: the simple url shortner</title>
-    <style>
-		@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
-
-    body {
-      background: #D3DEEA;
-    }
-
-		.bottom {
-      position:fixed;
-			top:30%;
-			left:35%;
-    }
-
-		p {
-      text-align: center;
-      font-family: 'Lato', sans-serif;
-      color: #585959;
-      font-size: .9em;
-      margin-top: -20px;
-      text-transform: uppercase;
-    }
-    </style>
-  </head>
-<body>
-	<div class="bottom">
-		<p>{{ . }}</a></p>
-	</div>
-</body>
+  {{ template "slimheader" }}
+  <body>
+    <div class="bottom">
+      <p>{{ . }}</a></p>
+    </div>
+  {{ template "footer" }}
+  </body>
 </html>
\ No newline at end of file
diff --git a/templates/returnPage.html b/templates/returnPage.html
index 748825a..f1bcfc0 100644
--- a/templates/returnPage.html
+++ b/templates/returnPage.html
@@ -1,33 +1,10 @@
 <!DOCTYPE html>
 <html lang=en>
-  <head>
-    <title>Short: the simple url shortner</title>
-    <style>
-		@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
-
-    body {
-      background: #D3DEEA;
-    }
-
-		.bottom {
-      position:fixed;
-			top:30%;
-			left:35%;
-    }
-
-		p {
-      text-align: center;
-      font-family: 'Lato', sans-serif;
-      color: #585959;
-      font-size: 1em;
-      margin-top: -20px;
-      text-transform: uppercase;
-    }
-    </style>
-  </head>
-<body>
-	<div class="bottom">
-		<p>URL Shortened to <a href="{{ . }}">{{ . }}</a></p>
-	</div>
-</body>
+  {{ template "slimheader" }}
+  <body>
+    <div class="bottom">
+      <p>URL Shortened to <a href="{{ . }}">{{ . }}</a></p>
+    </div>
+  {{ template "footer" }}
+  </body>
 </html>
\ No newline at end of file
diff --git a/templates/slimheader.html b/templates/slimheader.html
new file mode 100644
index 0000000..21e877e
--- /dev/null
+++ b/templates/slimheader.html
@@ -0,0 +1,72 @@
+{{ define "slimheader" }}
+<head>
+  <title>Short: the simple url shortener</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lato');
+
+    body {
+      background: #D3DEEA;
+    }
+
+    form{
+      position:fixed;
+      top:32%;
+      left:35%;
+      width:500px;
+      font-family:georgia,garamond,serif;
+      font-size:16px;
+
+    }
+    .bottom {
+      position:fixed;
+      top:30%;
+      left:35%;
+      width:500px;
+    }
+
+    p {
+      text-align: center;
+      font-family: 'Lato', sans-serif;
+      color: #585959;
+      font-size: .6em;
+      margin-top: -20px;
+      text-transform: uppercase;
+    }
+
+    .search {
+      text-align: center;
+    }
+
+    .search-bar {
+      border: 1px solid #BFC0C0;
+      padding: 5px;
+      height: 20px;
+      margin-left: -30px;
+      width: 200px;
+      outline: none;
+      &:focus {
+        border: 1px solid #D3DEEA;
+      }
+    }
+
+    .search-btn {
+      position: absolute;
+      width: 30px;
+      height: 32px;
+      border: 1px solid #BFC0C0;
+      background: #BFC0C0;
+      text-align: center;
+      color: #EDEDED;
+      cursor: pointer;
+      font-size: 1em;
+      outline: none;
+      &:hover {
+        background: #EDEDED;
+        border: 1px solid #EDEDED;
+        color: #BFC0C0;
+        transition: all .2s ease;
+      }
+    }
+    </style>
+  </head>
+{{ end }}
\ No newline at end of file
