diff --git a/Dockerfile b/Dockerfile
index 4d55b14..623fc26 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM golang:1.12.4 as builder
+FROM golang:1.12.9 as builder
 
 ENV CGO_ENABLED=0
 
diff --git a/main.go b/main.go
index 54e1933..98b310f 100644
--- a/main.go
+++ b/main.go
@@ -22,34 +22,48 @@ import (
 	"github.com/patrickmn/go-cache"
 )
 
-const letterBytes = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" // Base strings for RandStringBytesMaskImprSrc
+const letterBytes = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" // Base strings for randStringBytesMaskImprSrc
 const (
 	letterIdxBits = 6                    // 6 bits to represent a letter index
 	letterIdxMask = 1<<letterIdxBits - 1 // All 1-bits, as many as letterIdxBits
 	letterIdxMax  = 63 / letterIdxBits   // # of letter indices fitting in 63 bits
 )
-const appVersion = "1.0.1"
+const appVersion = "1.1.0"
 
 var src = rand.NewSource(time.Now().UnixNano())
 var pool = cache.New(240*time.Hour, 1*time.Hour)
-var okTmpl = template.Must(template.ParseFiles("templates/ok.html"))
-var indexTmpl = template.Must(template.ParseFiles("templates/index.html"))
-var returnTmpl = template.Must(template.ParseFiles("templates/returnPage.html"))
-var notFoundTmpl = template.Must(template.ParseFiles("templates/404.html"))
-var badRequestTmpl = template.Must(template.ParseFiles("templates/400.html"))
-var internalErrorTmpl = template.Must(template.ParseFiles("templates/500.html"))
+var templates *template.Template
+var allFiles []string
+
+func init() {
+	files, err := ioutil.ReadDir("templates")
+	if err != nil {
+		log.Fatalln(err)
+	}
+	for _, file := range files {
+		filename := file.Name()
+		if strings.HasSuffix(filename, ".html") {
+			allFiles = append(allFiles, "templates/"+filename)
+		}
+	}
+	templates, err = template.ParseFiles(allFiles...)
+	if err != nil {
+		log.Fatalln(err)
+	}
+}
 
 func index(w http.ResponseWriter, r *http.Request) {
-	indexTmpl.Execute(w, indexTmpl)
+	t := templates.Lookup("index.html")
+	t.Execute(w, nil)
 }
 
 // get executes the  GET command
 func get(key string) (string, bool) {
 	value, status := pool.Get(key)
-	if status {
-		return value.(string), status
+	if !status {
+		return "", status
 	}
-	return "", false
+	return value.(string), status
 }
 
 // set executes the redis SET command
@@ -63,22 +77,23 @@ func set(key, suffix string) {
 func redirect(w http.ResponseWriter, r *http.Request, path string) {
 	vals := mux.Vars(r)
 	key := vals["key"]
+	t := templates.Lookup("404.html")
 	if path != "" {
 		key = strings.Replace(key, path, "", 1)
 	}
 	rgx, _ := regexp.Compile("[a-zA-Z0-9]+")
 	key = rgx.FindString(key)
 	key, status := get(key)
-	if status {
-		u, _ := url.Parse(key)
-		if u.Scheme == "" {
-			u.Scheme = "https"
-		}
-		http.Redirect(w, r, u.String(), http.StatusFound)
-	} else {
+	if !status {
 		w.WriteHeader(http.StatusNotFound)
-		notFoundTmpl.Execute(w, notFoundTmpl)
+		t.Execute(w, nil)
+		return
 	}
+	u, _ := url.Parse(key)
+	if u.Scheme == "" {
+		u.Scheme = "https"
+	}
+	http.Redirect(w, r, u.String(), http.StatusFound)
 }
 
 // shortner reads url from a POST request, validates the url, generate a
@@ -87,30 +102,30 @@ func redirect(w http.ResponseWriter, r *http.Request, path string) {
 // then if writes the kv pair suffix, url to the database and return the
 // shortened url to the user
 func shortner(w http.ResponseWriter, r *http.Request, proto, domain, hostSuf, path string, urlSize int) {
-	if govalidator.IsURL(r.FormValue("url")) {
-		u, _ := url.Parse(r.FormValue("url"))
-
-		suffix := RandStringBytesMaskImprSrc(urlSize)
-		for {
-			_, status := get(suffix)
-			if status {
-				suffix = RandStringBytesMaskImprSrc(urlSize)
-			} else {
-				break
-			}
-		}
-		set(u.String(), suffix)
-		shortend := proto + "://" + domain + hostSuf + path + suffix
-		returnTmpl.Execute(w, shortend)
-
-	} else {
+	ret := templates.Lookup("returnPage.html")
+	badR := templates.Lookup("400.html")
+	if !govalidator.IsURL(r.FormValue("url")) {
 		w.WriteHeader(http.StatusBadRequest)
-		badRequestTmpl.Execute(w, badRequestTmpl)
+		badR.Execute(w, nil)
+		return
 	}
+	u, _ := url.Parse(r.FormValue("url"))
+	suffix := randStringBytesMaskImprSrc(urlSize)
+
+	for {
+		_, status := get(suffix)
+		if !status {
+			break
+		}
+		suffix = randStringBytesMaskImprSrc(urlSize)
+	}
+	set(u.String(), suffix)
+	shortend := proto + "://" + domain + hostSuf + path + suffix
+	ret.Execute(w, shortend)
 }
 
-// RandStringBytesMaskImprSrc Generate random string of n size
-func RandStringBytesMaskImprSrc(n int) string {
+// randStringBytesMaskImprSrc Generate random string of n size
+func randStringBytesMaskImprSrc(n int) string {
 	b := make([]byte, n)
 	// A src.Int63() generates 63 random bits, enough for letterIdxMax characters!
 	for i, cache, remain := n-1, src.Int63(), letterIdxMax; i >= 0; {
@@ -130,9 +145,10 @@ func RandStringBytesMaskImprSrc(n int) string {
 // internalError receives a http.ResponseWriter, msg and error and
 // return a internal error page with http code 500 to the user
 func internalError(w http.ResponseWriter, msg string, err error) {
+	t := templates.Lookup("500.html")
 	log.Println(err)
 	w.WriteHeader(http.StatusInternalServerError)
-	internalErrorTmpl.Execute(w, msg+err.Error())
+	t.Execute(w, msg+err.Error())
 }
 
 // itemsCount returns the number of kv pairs on the in meomry database
@@ -161,6 +177,7 @@ func itemsDump(w http.ResponseWriter, r *http.Request) {
 
 // itemsFromFile loads kv pairs from the dumpFile json to the in memory database
 func itemsFromFile(w http.ResponseWriter, r *http.Request, dumpFile string) {
+	t := templates.Lookup("ok.html")
 	jsonFile, err := ioutil.ReadFile(dumpFile)
 	var dumpObj map[string]cache.Item
 	json.Unmarshal([]byte(jsonFile), &dumpObj)
@@ -168,12 +185,13 @@ func itemsFromFile(w http.ResponseWriter, r *http.Request, dumpFile string) {
 		internalError(w, "Cannot open file "+dumpFile+": ", err)
 	} else {
 		pool = cache.NewFrom(240*time.Hour, 1*time.Hour, dumpObj)
-		okTmpl.Execute(w, "Imported "+strconv.Itoa(len(dumpObj))+" items to the DB")
+		t.Execute(w, "Imported "+strconv.Itoa(len(dumpObj))+" items to the DB")
 	}
 }
 
 // itemsFromPost loads kv pairs from a json POST to the in memory database
 func itemsFromPost(w http.ResponseWriter, r *http.Request) {
+	t := templates.Lookup("ok.html")
 	decoder := json.NewDecoder(r.Body)
 	var dumpObj map[string]cache.Item
 	err := decoder.Decode(&dumpObj)
@@ -181,12 +199,13 @@ func itemsFromPost(w http.ResponseWriter, r *http.Request) {
 		internalError(w, "Cannot parse JSON: ", err)
 	} else {
 		pool = cache.NewFrom(240*time.Hour, 1*time.Hour, dumpObj)
-		okTmpl.Execute(w, "Imported "+strconv.Itoa(len(dumpObj))+" items to the DB")
+		t.Execute(w, "Imported "+strconv.Itoa(len(dumpObj))+" items to the DB")
 	}
 }
 
 // itemsDumpToFile dumps the kv pairs from the in memory database to the dumpFile
 func itemsDumpToFile(w http.ResponseWriter, r *http.Request, dumpFile string) {
+	t := templates.Lookup("ok.html")
 	dumpObj, _ := json.Marshal(
 		pool.Items(),
 	)
@@ -194,7 +213,7 @@ func itemsDumpToFile(w http.ResponseWriter, r *http.Request, dumpFile string) {
 	if err != nil {
 		internalError(w, "Failed to open json file: ", err)
 	} else {
-		okTmpl.Execute(w, "Dump writen to: "+dumpFile)
+		t.Execute(w, "Dump writen to: "+dumpFile)
 	}
 }
 
@@ -218,7 +237,7 @@ func main() {
 	}
 
 	if *port > 65535 || *port < 1 {
-
+		log.Fatalln("Invalid port number")
 	}
 	if *path != "" && !strings.HasSuffix(*path, "/") {
 		*path = *path + "/"
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