diff --git a/project.clj b/project.clj
index a074ae06..3e786486 100644
--- a/project.clj
+++ b/project.clj
@@ -12,7 +12,12 @@
                  [ring/ring-defaults "0.2.1"]
                  [ring/ring-json "0.4.0"]
                  [ring "1.4.0"]
-                 [yogthos/config "0.8"]]
+                 [yogthos/config "0.8"]
+                 [org.clojure/java.jdbc "0.7.3"]
+                 ;; https://mvnrepository.com/artifact/postgresql/postgresql
+                 [postgresql/postgresql "9.3-1102.jdbc41"]
+                 [cljs-http "0.1.44"]
+                 [org.clojure/core.async "0.3.465"]]
   :plugins [[lein-ring "0.9.7"]
             [lein-cljsbuild "1.1.5"]]
   :clean-targets ^{:protect false} ["resources/public/js/compiled" "target"]
diff --git a/resources/public/index.html b/resources/public/index.html
index 8f4cfa1f..56ae1190 100644
--- a/resources/public/index.html
+++ b/resources/public/index.html
@@ -12,10 +12,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" integrity="sha256-HEtF7HLJZSC3Le1HcsWbz1hDYFPZCqDhZa9QsCgVUdw=" crossorigin="anonymous" />
 
   <style>
-    .dz-error-mark { display:none} .dz-details {display:none}
-    .dz-success-mark {display:none}
-    .dz-image {display:none}
-    form { width: 100% }
+    form {  border: 2px dashed lightgray;}
 
     html,body {
   font-family: 'Open Sans', serif;
@@ -261,8 +258,6 @@
   </div>
 </footer>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js" integrity="sha256-5CEXP4Sh+bwJYBngjYYh2TEev9kTDwcjw60jZatTHtY=" crossorigin="anonymous"></script>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js" integrity="sha256-QHdJObhDO++VITP6S4tMlDHRWMaUOk+s/xWIRgF/YY0=" crossorigin="anonymous"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js" integrity="sha256-4PIvl58L9q7iwjT654TQJM+C/acEyoG738iL8B8nhXg=" crossorigin="anonymous"></script>
 
 <script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
@@ -305,23 +300,6 @@
       })
       });
 
-
-
-        var myDropzone = new Dropzone("#my-dropzone");
-        myDropzone.on("success", function(file, a) {
-        $("h2").show();
-        $(".found-invoices").show();
-        JSON.parse(a).map(function(x) {
-        console.log(x);
-        var tr = $("<tr>");
-            tr.append($("<td>").text(x['customer-identifier']));
-            tr.append($("<td>").text(x['invoice-number']));
-            tr.append($("<td>").text(x['date']));
-            tr.append($("<td>").text(x['total']));
-        $("tbody").append(tr);
-        });
-        });
-          });
           */
       </script>
     </div>
diff --git a/src/clj/auto_ap/handler.clj b/src/clj/auto_ap/handler.clj
index 201686fe..889eef08 100644
--- a/src/clj/auto_ap/handler.clj
+++ b/src/clj/auto_ap/handler.clj
@@ -6,29 +6,43 @@
             [ring.middleware.multipart-params :as mp]
             [ring.util.response :as response]
             [ring.middleware.defaults :refer [wrap-defaults site-defaults]]
-            [ring.middleware.json :refer [wrap-json-response]]))
+            [ring.middleware.reload :refer [wrap-reload]]
+            [ring.middleware.json :refer [wrap-json-response]]
+            [clojure.java.jdbc :as j]))
+
+(use 'clojure.java.jdbc)
+
+(let [db-host "ec2-54-235-123-153.compute-1.amazonaws.com"
+      db-port 5432
+      db-name "dbfemhppkdksfp"]
+
+  (def db {:classname "org.postgresql.Driver" ; must be in classpath
+           :ssl true
+           :sslfactory "org.postgresql.ssl.NonValidatingFactory"
+           :subprotocol "postgresql"
+           :subname (str "//" db-host ":" db-port "/" db-name)
+                                        ; Any additional keys are passed to the driver
+                                        ; as driver-specific properties.
+           :user "tkilrhrhzlumol"
+           :password "de6117f8551364ac84ed31c1231941f53ab0b5470c9956f478b2025ab5a0fb8b"}))
+
 
 (defroutes app-routes
   (GET "/" [] (response/resource-response "index.html" {:root "public"}))
+  (GET "/api/invoices" []
+       (j/query db "SELECT * FROM invoices"))
   (POST "/pdf-upload"
         {{  files "file"} :params :as params}
-        (let [{:keys [filename tempfile]} (second files)]
-          (println tempfile)
-          #_(io/copy tempfile (io/file "resources" "public" filename))
-          (for [{:keys [total date invoice-number customer-identifier]} (parse/parse-file (.getPath tempfile))]
+        (let [{:keys [filename tempfile]} files]
+          (for [{:keys [total date invoice-number customer-identifier]}
+                (parse/parse-file (.getPath tempfile))]
             {"customer-identifier" customer-identifier
              "invoice-number" invoice-number
              "date" date
              "total" total})))
   (route/resources "/")
   (routes (ANY "*" [] (response/resource-response "index.html" {:root "public"})))
-  
-
   (route/not-found "Not Found"))
 
-#_(defroutes routes
-  (GET "/" [] (resource-response "index.html" {:root "public"}))
-  (resources "/"))
-
 (def app
-  (wrap-json-response (mp/wrap-multipart-params app-routes)))
+  (wrap-json-response (mp/wrap-multipart-params (wrap-reload app-routes))))
diff --git a/src/clj/auto_ap/parse.clj b/src/clj/auto_ap/parse.clj
index ad15bc36..2cd71e14 100644
--- a/src/clj/auto_ap/parse.clj
+++ b/src/clj/auto_ap/parse.clj
@@ -50,5 +50,4 @@
   [file]
   (->  (sh/sh "pdftotext" "-layout" file "-")
        :out
-       (doto println)
        parse))
diff --git a/src/cljs/auto_ap/db.cljs b/src/cljs/auto_ap/db.cljs
index 7d6c7404..f52ae4d8 100644
--- a/src/cljs/auto_ap/db.cljs
+++ b/src/cljs/auto_ap/db.cljs
@@ -3,4 +3,5 @@
 (def default-db
   {:company {:name "Campbell brewery"}
    :invoices #{}
+   :unpaid-invoices #{}
    })
diff --git a/src/cljs/auto_ap/events.cljs b/src/cljs/auto_ap/events.cljs
index 9d813885..1935927a 100644
--- a/src/cljs/auto_ap/events.cljs
+++ b/src/cljs/auto_ap/events.cljs
@@ -19,3 +19,8 @@
  ::imported-invoices
  (fn  [db [_ new-invoices]]
    (update-in db [:invoices] into new-invoices)))
+
+(re-frame/reg-event-db
+ ::received-invoices
+ (fn  [db [_ new-invoices]]
+   (update-in db [:unpaid-invoices] into new-invoices)))
diff --git a/src/cljs/auto_ap/subs.cljs b/src/cljs/auto_ap/subs.cljs
index 8c545008..c86916ab 100644
--- a/src/cljs/auto_ap/subs.cljs
+++ b/src/cljs/auto_ap/subs.cljs
@@ -15,3 +15,8 @@
  ::invoices
  (fn [db]
    (:invoices db)))
+
+(re-frame/reg-sub
+ ::unpaid-invoices
+ (fn [db]
+   (:unpaid-invoices db)))
diff --git a/src/cljs/auto_ap/views.cljs b/src/cljs/auto_ap/views.cljs
index 24c006ad..dcfe81cb 100644
--- a/src/cljs/auto_ap/views.cljs
+++ b/src/cljs/auto_ap/views.cljs
@@ -1,10 +1,15 @@
 (ns auto-ap.views
+  (:require-macros [cljs.core.async.macros :refer [go]])
+  
+
   (:require [re-frame.core :as re-frame]
             [reagent.core :as reagent]
             [auto-ap.subs :as subs]
             [auto-ap.events :as events]
             [auto-ap.routes :as routes]
-            [bidi.bidi :as bidi]))
+            [bidi.bidi :as bidi]
+            [cljs-http.client :as http]
+             [cljs.core.async :refer [<!]]))
 
 (defn active-when= [active-page candidate]
   (when (= active-page candidate) " active"))
@@ -12,22 +17,25 @@
 (def dropzone
   (with-meta
     (fn []
-      [:form {:action "/pdf-upload" :class ".dropzone"}
-       [:div {:class "card"}
-        [:div {:class "card-header"}
-         [:span {:class "card-header-title"} "Upload Invoices"]]
-        [:div {:class "card-content"}
-         [:span {:class "icon"}
-          [:i {:class "fa fa-cloud-download"}]]
-         "Drop invoice pdfs here" 
-         [:input {:type "file", :name "file", :style {:display "none"}}]]]])
+      [:form {:action "/pdf-upload"}
+       [:div.tile.notification
+        [:div.has-text-centered {:style {:padding "80px 0px" :width "100%"}}
+         [:span
+          [:span {:class "icon"}
+           [:i {:class "fa fa-cloud-download"}]]
+          
+          "Drop any invoices you want to process here"]]]])
     {:component-did-mount (fn [this]
                             (js/Dropzone. (reagent/dom-node this)
                                           (clj->js {:init (fn []
                                                             (.on (js-this) "success" (fn [_ files]
                                                                                        (re-frame/dispatch [::events/imported-invoices (js->clj (.parse js/JSON files))])
                                                                                        )))
-                                                    :url "/pdf-upload"})))}))
+                                                    :paramName "file"
+                                                    :url "/pdf-upload"
+                                                    :previewsContainer "#dz-hidden"
+                                                    :previewTemplate "<div class='dz-hidden-preview'></div>"
+                                                    })))}))
 
 (defmulti active-page identity)
 
@@ -41,16 +49,48 @@
        [:a {:href (bidi/path-for routes/routes :import-invoices)} "Import some invoices"]]]]]])
 
 (defmethod active-page :unpaid-invoices []
-  [:div {:class "inbox-messages"}
-   [:h1.title "Unpaid invoices"]])
+  [(with-meta
+     (fn []
+       (let [invoices (re-frame/subscribe [::subs/unpaid-invoices])]
+         
+         [:div {:class "inbox-messages"}
+          [:h1.title "Unpaid invoices"]
+          [:table {:class "table", :style {:width "100%"}}
+           [:thead  
+            [:tr  
+             [:th "Customer"]
+             [:th "Invoice #"]
+             [:th "Date"]
+             [:th "Amount"]]]
+           [:tbody (for [{:strs [customer_identifier invoice_number date total] :as i} @invoices]
+                     ^{:key (str customer_identifier "-" invoice_number)}
+                     [:tr
+                      [:td customer_identifier]
+                      [:td invoice_number]
+                      [:td date]
+                      [:td total]])]]]))
+     {:component-did-mount (fn []
+                             (go
+                               (->> (<! (http/get "/api/invoices"))
+                                    :body
+                                    (.parse js/JSON )
+                                    (js->clj)
+                                    (conj [::events/received-invoices])
+                                    (re-frame/dispatch))))})])
 
 (defmethod active-page :paid-invoices []
   [:div {:class "inbox-messages"}
    [:h1.title "Paid invoices"]])
 
 (defmethod active-page :invoices []
-  [:div {:class "inbox-messages"}
-   [:h1.title "All invoices"]])
+  [(with-meta
+     (fn []
+       [:div {:class "inbox-messages"}
+        [:h1.title "All invoices"]])
+     {:component-did-mount (fn []
+                             (go
+                               (re-frame/dispatch [::events/received-invoices (<! (http/get "/api/invoices"))]))
+                             )})])
 
 (defmethod active-page :import-invoices []
   (let [invoices (re-frame/subscribe [::subs/invoices])]
@@ -147,50 +187,6 @@
          [:a {:href "https://github.com/"} "Integreat"]"."]
         [:p  
          [:a {:class "icon", :href "https://github.com/dansup/bulma-templates"}
-          [:i {:class "fa fa-github"}]]]]]]]))
-
-
-
-;; 
-;;   <nav class="navbar has-shadow">
-;;     <div class="container">
-;;       <div class="navbar-brand">
-;;         <a class="navbar-item" href="../">
-;;           <h1>Auto-ap</h1>
-;;         </a>
-;; 
-;;         <div class="navbar-burger burger" data-target="navMenu">
-;;           <span></span>
-;;           <span></span>
-;;           <span></span>
-;;         </div>
-;;       </div>
-;; 
-;;       <div id="navMenu" class="navbar-menu">
-;;         <div class="navbar-end">
-;;           <div class="navbar-item has-dropdown is-active">
-;;             <a class="navbar-link login">
-;;               Login
-;;             </a>
-;; 
-;;             <div class="navbar-dropdown" style="display:none">
-;;               <a class="navbar-item">
-;;                 Dashboard
-;;               </a>
-;;               <a class="navbar-item">
-;;                 Profile
-;;               </a>
-;;               <a class="navbar-item">
-;;                 Settings
-;;               </a>
-;;               <hr class="navbar-divider">
-;;               <div class="navbar-item">
-;;                 Logout
-;;               </div>
-;;             </div>
-;;           </div>
-;;         </div>
-;;       </div>
-;;     </div>
-;;   </nav>
+          [:i {:class "fa fa-github"}]]]]]]
+     [:div#dz-hidden]]))