diff --git a/breve.cabal b/breve.cabal
index 6bd2229..106245f 100644
--- a/breve.cabal
+++ b/breve.cabal
@@ -17,6 +17,7 @@ build-type:          Simple
 extra-source-files:  README.md, LICENSE
 data-files:          static/*.png, static/*.html, static/*.css,
                      views/*.html
+data-files:          static/*.png, static/*.css
 cabal-version:       >=1.10
 
 source-repository head
@@ -28,11 +29,13 @@ executable breve
   hs-source-dirs:    src
   default-language:  Haskell2010
   other-modules:     Application, Breve.Common,
+  other-modules:     Application, Views, Breve.Settings,
                      Breve.Generator, Breve.UrlTable
   other-extensions:  OverloadedStrings
   build-depends:     base >=4.8 && <5.0,
                      simple, wai, wai-extra, warp,
                      aeson, bytestring, binary,
+                     Spock, blaze-html, wai-middleware-static, 
                      transformers, mtl,
                      hashtables, cryptohash, random,
                      xdg-basedir, configurator, directory
diff --git a/src/Views.hs b/src/Views.hs
new file mode 100644
index 0000000..0cc7a0b
--- /dev/null
+++ b/src/Views.hs
@@ -0,0 +1,51 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Views where
+
+import Data.Text                     (Text)
+import Data.Text.Lazy                (toStrict)
+import Text.Blaze.Html.Renderer.Text (renderHtml)
+import Text.Blaze.Html5            as H
+import Text.Blaze.Html5.Attributes as A
+
+render :: Html -> Text
+render = toStrict . renderHtml
+
+done :: String -> Html
+done url = template $ do
+  "here's your new link: "
+  a ! href (toValue url) $ (toHtml url)
+
+index :: Html
+index = template $ do
+  H.form ! method "POST" $ do
+    "your url:"
+    input ! type_ "text" ! name "url"
+    input ! type_ "submit" ! value "go"
+
+message :: String -> Html
+message = template . toHtml
+
+template :: Html -> Html
+template fill =
+  docTypeHtml $ do
+    H.head $ do
+      H.title "breve: url shortener"
+      meta ! name "description" ! content "url shortener"
+      meta ! name "keywords" ! content "url, shortener"
+      meta ! name "author" ! content "Michele Guerini Rocco"
+      meta ! charset "utf-8"
+      link ! rel "stylesheet" ! href "main.css" ! type_ "text/css"
+      link ! rel "apple-touch-icon" ! href "icon-big.png"
+      link ! rel "icon" ! type_ "image/png" ! href "/icon-medium.png" ! sizes "96x96"
+      link ! rel "icon" ! type_ "image/png" ! href "/icon-small.png" ! sizes "16x16"
+      script ! src "https://cdn.rawgit.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js" $ mempty
+    body $ do
+      header $ do
+          h1 $ a ! href "/" $ "BREVE"
+          h2 "a url shortener"
+      H.div ! A.id "center" $ fill
+      footer $ do
+          "breve is open"
+          a ! href "https://github.com/rnhmjoj/breve" $ "source"
+          H.span "© Rnhmjoj"
\ No newline at end of file
diff --git a/views/done.html b/views/done.html
deleted file mode 100644
index 04f273d..0000000
--- a/views/done.html
+++ /dev/null
@@ -1 +0,0 @@
-here's your new link: <a href="$link$">$link$</a>
\ No newline at end of file
diff --git a/views/index.html b/views/index.html
deleted file mode 100644
index 2924fed..0000000
--- a/views/index.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<form method="POST">
-    your url: <input type="text" name="url">
-    <input type="submit" value="go">
-</form>
\ No newline at end of file