diff --git a/src/cljc/auto_ap/ledger/reports.cljc b/src/cljc/auto_ap/ledger/reports.cljc
index 4a59fb35..3dad705f 100644
--- a/src/cljc/auto_ap/ledger/reports.cljc
+++ b/src/cljc/auto_ap/ledger/reports.cljc
@@ -530,8 +530,8 @@
               [title a b (and (:value a) (:value b)
                               {:border (:border b)
                                                     :format :dollar
-                                                    :value  (- (:value a)
-                                                               (:value b))})]))))
+                               :value  (- (or (:value a) 0.0)
+                                          (or (:value b) 0.0))})]))))
 
 (defn summarize-balance-sheet [pnl-data]
   (let [pnl-datas (map (fn [p]
diff --git a/src/cljs/auto_ap/effects.cljs b/src/cljs/auto_ap/effects.cljs
index a2d741b8..3837a89d 100644
--- a/src/cljs/auto_ap/effects.cljs
+++ b/src/cljs/auto_ap/effects.cljs
@@ -17,7 +17,8 @@
 (re-frame/reg-fx
  :redirect
  (fn [uri]
-   (pushy/set-token! p/history uri)))
+   (pushy/set-token! p/history uri)
+   (p/dispatch-route (p/parse-url uri))))
 
 (re-frame/reg-fx
  :set-uri-params
diff --git a/src/cljs/auto_ap/history.cljs b/src/cljs/auto_ap/history.cljs
index 483e27ca..63177fd8 100644
--- a/src/cljs/auto_ap/history.cljs
+++ b/src/cljs/auto_ap/history.cljs
@@ -6,11 +6,11 @@
             [cemerick.url :refer [url]]
             [re-frame.core :as re-frame]))
 
-(defn- parse-url [url]
+(defn parse-url [url]
   (println "parsing url" url)
   (bidi/match-route routes/routes url))
 
-(defn- dispatch-route [matched-route]
+(defn dispatch-route [matched-route]
   (println "Matched route" matched-route)
   (re-frame/dispatch [:auto-ap.events/set-active-route (:handler matched-route) (u/query-params) (:route-params matched-route)]))
 
diff --git a/src/cljs/auto_ap/views/components/date_range_filter.cljs b/src/cljs/auto_ap/views/components/date_range_filter.cljs
index c7eea34e..060ff224 100644
--- a/src/cljs/auto_ap/views/components/date_range_filter.cljs
+++ b/src/cljs/auto_ap/views/components/date_range_filter.cljs
@@ -1,8 +1,6 @@
 (ns auto-ap.views.components.date-range-filter
   (:require
-   [clojure.spec.alpha :as s]
-   [auto-ap.entities.invoice :as invoice]
-   [auto-ap.views.utils :refer [bind-field date-picker-optional date->str local-now standard]]
+   [auto-ap.views.utils :refer [bind-field date-picker date->str local-now standard]]
    [cljs-time.core :as t]
    [re-frame.core :as re-frame]))
 
@@ -37,9 +35,9 @@
    [:div.field.has-addons
     [:div.control 
      [bind-field
-      [date-picker-optional
+      [date-picker
        {:event on-change-event
-        :type "date2"
+        :type "date"
         :placeholder "Start"
         :class "is-small"
         :field        [:start]
@@ -47,9 +45,9 @@
         :output :text}]]]
     [:div.control
      [bind-field
-      [date-picker-optional
+      [date-picker
        {:event        on-change-event
-        :type "date2"
+        :type "date"
         :class "is-small"
         :placeholder  "End"
         :field        [:end]
diff --git a/src/cljs/auto_ap/views/components/number-filter b/src/cljs/auto_ap/views/components/number-filter
deleted file mode 100644
index e9286807..00000000
--- a/src/cljs/auto_ap/views/components/number-filter
+++ /dev/null
@@ -1,43 +0,0 @@
-(ns auto-ap.views.components.number-filter
-  (:require
-   [clojure.spec.alpha :as s]
-   [auto-ap.entities.invoice :as invoice]
-   [auto-ap.views.components.typeahead :refer [typeahead]]
-   [auto-ap.views.utils :refer [bind-field date-picker date->str local-now standard]]
-   [cljs-time.core :as t]
-   [re-frame.core :as re-frame]))
-
-(defn dispatch-change [on-change-event start end]
-  (fn [_]
-    (re-frame/dispatch (into on-change-event [[:start] start]) )
-    (re-frame/dispatch (into on-change-event [[:end] end]))))
-
-(defn number-filter [{:keys [value on-change-event]}]
-  [:div
-   [:div.field.has-addons
-    [:div.control 
-     [bind-field
-      [date-picker {:class-name "input is-fullwidth"
-                    :class "input"
-                    :format-week-number (fn [] "")
-                    :previous-month-button-label ""
-                    :placeholder-text "Start"
-                    :next-month-button-label ""
-                    :next-month-label ""
-                    :event on-change-event
-                    :type "date"
-                    :field [:start]
-                    :subscription value}]]]
-    [:div.control
-     [bind-field
-      [date-picker {:class-name "input is-fullwidth"
-                    :class "input"
-                    :format-week-number (fn [] "")
-                    :previous-month-button-label ""
-                    :placeholder-text "End"
-                    :next-month-button-label ""
-                    :event on-change-event
-                    :next-month-label ""
-                    :type "date"
-                    :field [:end]
-                    :subscription value}]]]]])
diff --git a/src/cljs/auto_ap/views/components/number_filter.cljs b/src/cljs/auto_ap/views/components/number_filter.cljs
index 0e371001..3ce3740b 100644
--- a/src/cljs/auto_ap/views/components/number_filter.cljs
+++ b/src/cljs/auto_ap/views/components/number_filter.cljs
@@ -1,9 +1,6 @@
 (ns auto-ap.views.components.number-filter
   (:require
-   [clojure.spec.alpha :as s]
-   [auto-ap.entities.invoice :as invoice]
-   [auto-ap.views.utils :refer [bind-field date-picker date->str local-now standard]]
-   [cljs-time.core :as t]
+   [auto-ap.views.utils :refer [bind-field]]
    [re-frame.core :as re-frame]))
 
 (defn dispatch-change [on-change-event start end]
@@ -30,5 +27,4 @@
                       :field [:amount-lte]
                       :event on-change-event
                       :step "0.01"
-                      :subscription value}]]]]]]
-  )
+                      :subscription value}]]]]]])
diff --git a/src/cljs/auto_ap/views/pages/admin/clients/form.cljs b/src/cljs/auto_ap/views/pages/admin/clients/form.cljs
index ee55c28c..1f1133be 100644
--- a/src/cljs/auto_ap/views/pages/admin/clients/form.cljs
+++ b/src/cljs/auto_ap/views/pages/admin/clients/form.cljs
@@ -13,13 +13,10 @@
    [auto-ap.views.components.typeahead.vendor
     :refer [search-backed-typeahead]]
    [auto-ap.views.utils
-    :refer [date->str
-            date-picker
-            date-picker-friendly
+    :refer [date-picker
             dispatch-event
             horizontal-field
-            multi-field
-            standard]]
+            multi-field]]
    [bidi.bidi :as bidi]
    [cljs-time.coerce :as coerce]
    [cljs-time.core :as t]
@@ -135,15 +132,7 @@
                                 :location (:location x)})
                              (:ezcater-locations new-client-data))
 
-        :locked-until (cond (not (:locked-until new-client-data))
-                            nil
-
-                            (instance? goog.date.Date (:locked-until new-client-data))
-                            (date->str (:locked-until new-client-data) standard)
-
-                            :else
-                            (:locked-until new-client-data)
-                            )
+        :locked-until (:locked-until new-client-data)
         :locations (mapv :location (:locations new-client-data))
         :matches (mapv :match (:matches new-client-data))
         :location-matches (:location-matches new-client-data)
@@ -171,15 +160,7 @@
                                :numeric-code (when-not (str/blank? numeric-code)
                                                (js/parseInt numeric-code))
                                :include-in-reports include-in-reports
-                               :start-date (cond (not start-date)
-                                                 nil
-
-                                                 (instance? goog.date.Date start-date)
-                                                 (date->str start-date standard)
-
-                                                 :else
-                                                 start-date
-                                                 )
+                               :start-date start-date
                                :type type
                                :id id
                                :sort-order i
@@ -204,7 +185,7 @@
   :<- [::subs/route-params]
   :<- [::subs/clients-by-id]
   (fn [[rp clients-by-id]]
-    (or (clients-by-id (:id rp))
+    (or (get  clients-by-id (:id rp))
         {})))
 
 (re-frame/reg-event-fx
@@ -405,15 +386,9 @@
                         :field       [:numeric-code]}]]]
        [form-builder/field
         "Start date"
-        [date-picker {:class-name                  "input"
-                      :class                       "input"
-                      :format-week-number          (fn [] "")
-                      :previous-month-button-label ""
-                      :placeholder                 "mm/dd/yyyy"
-                      :next-month-button-label     ""
-                      :next-month-label            ""
-                      :type                        "date"
-                      :field                       [:start-date]}]]]
+        [date-picker {:type   "date"
+                               :output :cljs-date
+                               :field  [:start-date]}]]]
       (when (#{:check ":check"} type )
         [:div
 
@@ -600,7 +575,8 @@
 
      [form-builder/field
       "Locked Until"
-      [date-picker-friendly {:type  "date"
+      [date-picker {:type  "date"
+                             :output :cljs-date
                              :field [:locked-until]
                              :style {:width "15em"}}]]]))
 
diff --git a/src/cljs/auto_ap/views/pages/invoices/form.cljs b/src/cljs/auto_ap/views/pages/invoices/form.cljs
index 789e9094..1034ed75 100644
--- a/src/cljs/auto_ap/views/pages/invoices/form.cljs
+++ b/src/cljs/auto_ap/views/pages/invoices/form.cljs
@@ -23,7 +23,7 @@
     :refer [search-backed-typeahead]]
    [auto-ap.views.pages.invoices.common :refer [invoice-read]]
    [auto-ap.views.utils
-    :refer [date-picker-optional
+    :refer [date-picker
             dispatch-event
             with-user]]
    [cljs-time.core :as c]
@@ -366,21 +366,21 @@
         "Date"
         [:label 
          [form-builder/raw-field
-          [date-picker-optional {:type  "date2"
-                                 :field [:date]
-                                 :output :cljs-date}]]]]
+          [date-picker {:type   "date"
+                        :field  [:date]
+                        :output :cljs-date}]]]]
 
        [form-builder/field
         "Due (optional)"
-        [date-picker-optional {:type       "date2"
-                               :field      [:due]
-                               :output :cljs-date}]]
+        [date-picker {:type   "date"
+                      :field  [:due]
+                      :output :cljs-date}]]
        [form-builder/vertical-control 
         "Scheduled payment (optional)"
         [left-stack
          [:div.control
           [form-builder/raw-field 
-           [date-picker-optional {:type       "date2"
+           [date-picker {:type       "date"
                                   :field [:scheduled-payment]
                                   :output :cljs-date}]]]
          [:div.control
diff --git a/src/cljs/auto_ap/views/pages/invoices/handwritten_checks.cljs b/src/cljs/auto_ap/views/pages/invoices/handwritten_checks.cljs
index a30c687b..3fafacfe 100644
--- a/src/cljs/auto_ap/views/pages/invoices/handwritten_checks.cljs
+++ b/src/cljs/auto_ap/views/pages/invoices/handwritten_checks.cljs
@@ -1,84 +1,69 @@
 (ns auto-ap.views.pages.invoices.handwritten-checks
-  (:require [auto-ap.entities.invoice :as invoice]
-            [auto-ap.forms :as forms]
-            [auto-ap.status :as status]
-            [auto-ap.subs :as subs]
-            [auto-ap.utils :refer [by]]
-            [auto-ap.views.components.modal :as modal]
-            [auto-ap.views.pages.data-page :as data-page]
-            [auto-ap.views.pages.invoices.common
-             :refer
-             [does-amount-exceed-outstanding? invoice-read]]
-            [auto-ap.views.pages.invoices.form :as form]
-            [auto-ap.views.utils
-             :refer
-             [date-picker dispatch-event horizontal-field with-user]]
-            [clojure.string :as str]
-            [re-frame.core :as re-frame]))
-
-(def handwrite-checks-form (forms/vertical-form {:submit-event [::save]
-                                                 :change-event [::forms/change ::form]
-                                                 :can-submit [::can-submit]
-                                                 :id ::form}))
+  (:require
+   [auto-ap.forms :as forms]
+   [auto-ap.forms.builder :as form-builder]
+   [auto-ap.status :as status]
+   [auto-ap.subs :as subs]
+   [auto-ap.views.components.modal :as modal]
+   [auto-ap.views.components.money-field :refer [money-field]]
+   [auto-ap.views.pages.invoices.common
+    :refer [does-amount-exceed-outstanding? invoice-read]]
+   [auto-ap.views.utils
+    :refer [date-picker dispatch-event with-user]]
+   [clojure.string :as str]
+   [re-frame.core :as re-frame]))
 
 (defn form []
   (let [real-bank-accounts @(re-frame/subscribe [::subs/real-bank-accounts])
-        {:keys [data active? error id]} @(re-frame/subscribe [::forms/form ::form])
-        {:keys [form-inline horizontal-field field raw-field error-notification submit-button]} handwrite-checks-form]
-    (form-inline {}
-                 [:<>
-                  [:div.field
-                   [:label.label  "Pay using"]
-                   [:div.control 
-                    [:span.select
-                     [raw-field
-                      [:select {:type "select"
-                                :field :bank-account-id}
-                       (for [{:keys [id number name]} real-bank-accounts]
-                         ^{:key id} [:option {:value id} name])]]]]]
-                  (field "Date"
-                         [date-picker {:class-name "input"
-                                       :class "input"
-                                       :format-week-number (fn [] "")
-                                       :previous-month-button-label ""
-                                       :placeholder "mm/dd/yyyy"
-                                       :next-month-button-label ""
-                                       :next-month-label ""
-                                       :type "date"
-                                       :field [:date]
-                                       :spec ::invoice/date}])
-                  (field "Check number"
-                         [:input.input {:type "number"
-                                        :field [:check-number]}])
-                  [:table.table.is-fullwidth
-                   [:thead
-                    [:tr
-                     [:th "Invoice ID"]
-                     [:th {:style {"width" "14em"}} "Payment"]]]
-                   [:tbody
-                    (doall  
-                     (for [{:keys [payment outstanding-balance invoice-number id] :as i} (:invoices data)]
-                       ^{:key id}
-                       [:tr
-                        [:td invoice-number]
-                        [:td  [:div.field.has-addons.is-extended
-                               [:p.control [:a.button.is-static "$"]]
-                               [:p.control
-
-                                (raw-field 
-                                 [:input.input.has-text-right {:type "number"
-                                                :field [:invoice-amounts id :amount]
-                                                #_#_:max outstanding-balance
-                                                :step "0.01"}])]]]]))]]])))
+        {:keys [data]} @(re-frame/subscribe [::forms/form ::form])]
+    [form-builder/builder {:submit-event [::save]
+                           :can-submit   [::can-submit]
+                           :id           ::form}
+     [form-builder/vertical-control 
+      "Pay using"
+      [:div.control 
+       [:span.select
+        [form-builder/raw-field
+         [:select {:type  "select"
+                   :field :bank-account-id}
+          (for [{:keys [id name]} real-bank-accounts]
+            ^{:key id} [:option {:value id} name])]]]]]
+     [form-builder/field 
+      "Date"
+      [date-picker {:type   "date"
+                    :output :cljs-date
+                    :field  [:date]}]]
+     [form-builder/field 
+      "Check number"
+      [:input.input {:type  "number"
+                     :field [:check-number]}]]
+     [:table.table.is-fullwidth
+      [:thead
+       [:tr
+        [:th "Invoice ID"]
+        [:th {:style {"width" "14em"}} "Payment"]]]
+      [:tbody
+       (doall  
+         (for [{:keys [invoice-number id]} (:invoices data)]
+           ^{:key id}
+           [:tr
+            [:td invoice-number]
+            [:td
+             [form-builder/raw-field 
+              [money-field {:type     "money"
+                            :field    [:invoice-amounts id :amount]
+                            :style    {:max-width "8em"}
+                            }]]]]))]]
+     [form-builder/hidden-submit-button]]))
 
 (re-frame/reg-sub
  ::can-submit
  :<- [::forms/form ::form]
  (fn [{ {:keys [check-number date invoices invoice-amounts]} :data}]
    (boolean (cond (seq (filter
-                        (fn [{:keys [id outstanding-balance]}]
-                          (does-amount-exceed-outstanding? (get-in invoice-amounts [id :amount]) outstanding-balance ))
-                        invoices))
+                         (fn [{:keys [id outstanding-balance]}]
+                           (does-amount-exceed-outstanding? (get-in invoice-amounts [id :amount]) outstanding-balance ))
+                         invoices))
                   false
 
                   :else
@@ -132,6 +117,6 @@
 (re-frame/reg-event-fx
  ::succeeded
  [(forms/triggers-stop ::form)]
- (fn [{:keys [db]} [_ invoices]]
+ (fn [_ _]
    {:dispatch [::modal/modal-closed]}))
 
diff --git a/src/cljs/auto_ap/views/pages/ledger/balance_sheet.cljs b/src/cljs/auto_ap/views/pages/ledger/balance_sheet.cljs
index 529839c5..e856d0a9 100644
--- a/src/cljs/auto_ap/views/pages/ledger/balance_sheet.cljs
+++ b/src/cljs/auto_ap/views/pages/ledger/balance_sheet.cljs
@@ -13,11 +13,9 @@
    [auto-ap.views.pages.ledger.side-bar :refer [ledger-side-bar]]
    [auto-ap.views.pages.ledger.table :as ledger-table]
    [auto-ap.views.utils
-    :refer [date->str
-            date-picker-friendly
+    :refer [date-picker
             dispatch-event
             local-now
-            standard
             with-user]]
    [cljs-time.core :as t]
    [clojure.set :as set]
@@ -78,9 +76,7 @@
     :graphql {:token     user
               :query-obj {:venia/queries [[:balance-sheet
                                            (-> (:data db)
-                                               (assoc :client-id (:id client))
-                                               (update :date (fnil #(date->str % standard) nil))
-                                               (update :comparison-date (fnil #(date->str % standard) nil)))
+                                               (assoc :client-id (:id client)))
                                            [[:balance-sheet-accounts [:name :amount :account-type :id :numeric-code]]
                                             [:comparable-balance-sheet-accounts [:name :amount :account-type :id :numeric-code]]]]]}
 
@@ -122,9 +118,7 @@ NOTE: Please review the transactions we may have question for you here: https://
      :graphql {:token     user
                :query-obj {:venia/queries [[:balance-sheet-pdf
                                             (-> (:data db)
-                                                (assoc :client-id (:id client))
-                                                (update :date (fnil #(date->str % standard) nil))
-                                                (update :comparison-date (fnil #(date->str % standard) nil)))
+                                                (assoc :client-id (:id client)))
                                             [:url :name]]]}
 
                :owns-state {:single ::page}
@@ -139,7 +133,7 @@ NOTE: Please review the transactions we may have question for you here: https://
                                                                :from-numeric-code from-numeric-code
                                                                :to-numeric-code   to-numeric-code
                                                                :date-range        {:start "2000-01-01"
-                                                                                   :end   (date->str date-range standard)}}]}))
+                                                                                   :end   date-range}}]}))
 
 (re-frame/reg-event-fx
  ::ledger-params-change
@@ -206,9 +200,9 @@ NOTE: Please review the transactions we may have question for you here: https://
                       [:div.control 
                        [:p.help "Date"]
                        (raw-field
-                         [date-picker-friendly {:cljs-date? true
-                                                :type "date"
-                                                :field [:date]}])]]
+                         [date-picker {:output :cljs-date
+                                       :type   "date"
+                                       :field  [:date]}])]]
                      [:div.level-item 
                       [:div.control 
                        [:div.mt-3] 
@@ -224,9 +218,9 @@ NOTE: Please review the transactions we may have question for you here: https://
                         [:div.control
                          [:p.help "Comparison Date"]
                          (raw-field
-                           [date-picker-friendly {:cljs-date? true
-                                                  :type "date"
-                                                  :field     [:comparison-date]}])])]]
+                           [date-picker {:output :cljs-date
+                                         :type   "date"
+                                         :field  [:comparison-date]}])])]]
                     [:div.level-right
                      [:div.buttons 
 
diff --git a/src/cljs/auto_ap/views/pages/ledger/external_import.cljs b/src/cljs/auto_ap/views/pages/ledger/external_import.cljs
index 1bff9894..be752b57 100644
--- a/src/cljs/auto_ap/views/pages/ledger/external_import.cljs
+++ b/src/cljs/auto_ap/views/pages/ledger/external_import.cljs
@@ -1,20 +1,17 @@
 (ns auto-ap.views.pages.ledger.external-import
-  (:require [auto-ap.subs :as subs]
-            [auto-ap.views.components.layouts :refer [side-bar-layout]]
-            [goog.string :as gstring]
-            [auto-ap.forms :as forms]
-            [auto-ap.utils :refer [by]]
-            [auto-ap.events :as events]
-            [auto-ap.views.pages.ledger.side-bar :refer [ledger-side-bar]]
-            [auto-ap.views.utils :refer [date->str date-picker bind-field local-now standard ->$ str->date dispatch-event]]
-            [auto-ap.views.components.dropdown :refer [drop-down drop-down-contents]]
-            [cljs-time.core :as t]
-            [re-frame.core :as re-frame]
-            [reagent.core :as r]
-            [clojure.string :as str]
-            [auto-ap.status :as status]))
-
-
+  (:require
+   [auto-ap.events :as events]
+   [auto-ap.forms :as forms]
+   [auto-ap.status :as status]
+   [auto-ap.subs :as subs]
+   [auto-ap.views.components.dropdown
+    :refer [drop-down drop-down-contents]]
+   [auto-ap.views.components.layouts :refer [side-bar-layout]]
+   [auto-ap.views.pages.ledger.side-bar :refer [ledger-side-bar]]
+   [auto-ap.views.utils :refer [bind-field dispatch-event]]
+   [clojure.string :as str]
+   [re-frame.core :as re-frame]
+   [reagent.core :as r]))
 
 (re-frame/reg-sub
  ::loading
diff --git a/src/cljs/auto_ap/views/pages/ledger/profit_and_loss.cljs b/src/cljs/auto_ap/views/pages/ledger/profit_and_loss.cljs
index ec0fc73e..05f0a861 100644
--- a/src/cljs/auto_ap/views/pages/ledger/profit_and_loss.cljs
+++ b/src/cljs/auto_ap/views/pages/ledger/profit_and_loss.cljs
@@ -16,7 +16,7 @@
    [auto-ap.views.pages.ledger.table :as ledger-table]
    [auto-ap.views.utils
     :refer [date->str
-            date-picker-friendly
+            date-picker
             dispatch-event
             local-today
             multi-field
@@ -73,7 +73,7 @@
                       :owns-state {:single ::page}
                       :query-obj {:venia/queries [[:profit-and-loss
                                                    {:client-ids (map :id (:clients (:data db)))
-                                                    :periods (mapv encode-period (:periods (:data db)))
+                                                    :periods (mapv #(select-keys % #{:start :end} ) (:periods (:data db)))
                                                     :include-deltas  (:include-deltas (:data db))
                                                     :column-per-location (:column-per-location (:data db))}
                                                    [[:periods [[:accounts [:name :amount :client_id :account-type :id :count :numeric-code :location]]]]]]]} 
@@ -129,7 +129,7 @@ NOTE: Please review the transactions we may have question for you here: https://
                                                    {:client-ids (map :id (:clients (:data db)))
                                                     :include-deltas  (:include-deltas (:data db))
                                                     :column-per-location (:column-per-location (:data db))
-                                                    :periods (mapv encode-period (:periods (:data db)))}
+                                                    :periods (mapv #(select-keys % #{:start :end}) (:periods (:data db)))}
                                                    [:url :name]]]} 
                       :on-success [::received-pdf]}
             :set-uri-params {:periods (mapv encode-period (:periods (:data db)))
@@ -288,10 +288,10 @@ NOTE: Please review the transactions we may have question for you here: https://
                 [:div.field.has-addons
                  [:div.control
                   (raw-field 
-                   [date-picker-friendly {:placeholder "End date"
-                                          :type "date"
-                                          :cljs-date? true
-                                          :field [:thirteen-periods-end]}])]
+                    [date-picker {:placeholder "End date"
+                                  :type        "date"
+                                  :output      :cljs-date
+                                  :field       [:thirteen-periods-end]}])]
                  [period-preset-button {:title "13 periods"
                                         :periods (let [today (or (some-> (:thirteen-periods-end data))
                                                                  (local-today))]
@@ -309,8 +309,8 @@ NOTE: Please review the transactions we may have question for you here: https://
                 [:div.field.has-addons
                  [:div.control
                   (raw-field 
-                   [date-picker-friendly {:placeholder "End date"
-                                          :cljs-date? true
+                   [date-picker {:placeholder "End date"
+                                          :output :cljs-date
                                           :type "date"
                                           :field [:twelve-periods-end]}])]
                  [period-preset-button {:title "12 months"
@@ -388,15 +388,15 @@ NOTE: Please review the transactions we may have question for you here: https://
                     [:div.control
                      [:p.help "From"]
                      (raw-field
-                      [date-picker-friendly {:type "date"
-                                             :cljs-date? true
+                      [date-picker {:type "date"
+                                             :output :cljs-date
                                              :field [:periods i :start]}])]
 
                     [:div.control
                      [:p.help "To"]
                      (raw-field
-                      [date-picker-friendly {:type "date"
-                                             :cljs-date? true
+                      [date-picker {:type "date"
+                                             :output :cljs-date
                                              :field [:periods i :end]}])]])))]]]
 
            [:div.level-item
diff --git a/src/cljs/auto_ap/views/pages/pos/form.cljs b/src/cljs/auto_ap/views/pages/pos/form.cljs
index 58e2d5f0..3ae576e9 100644
--- a/src/cljs/auto_ap/views/pages/pos/form.cljs
+++ b/src/cljs/auto_ap/views/pages/pos/form.cljs
@@ -1,20 +1,15 @@
 (ns auto-ap.views.pages.pos.form
-  (:require 
-            [auto-ap.events :as events]
-            [auto-ap.forms :as forms]
-            [auto-ap.subs :as subs]
-            [auto-ap.utils :refer [dollars=]]
-            [auto-ap.views.components.dropdown :refer [drop-down]]
-            [auto-ap.views.components.expense-accounts-field :as expense-accounts-field :refer [expense-accounts-field recalculate-amounts]]
-            [auto-ap.views.components.layouts :as layouts]
-            [auto-ap.views.components.money-field :refer [money-field]]
-            [auto-ap.views.components.typeahead :refer [typeahead-v3]]
-            [auto-ap.status :as status]
-            [auto-ap.views.utils :refer [date->str date-picker dispatch-event standard with-user]]
-            [cljs-time.core :as c]
-            [clojure.spec.alpha :as s]
-            [clojure.string :as str]
-            [re-frame.core :as re-frame]))
+  (:require
+   [auto-ap.forms :as forms]
+   [auto-ap.subs :as subs]
+   [auto-ap.views.components.layouts :as layouts]
+   [auto-ap.views.components.money-field :refer [money-field]]
+   [auto-ap.views.components.typeahead :refer [typeahead-v3]]
+   [auto-ap.views.utils
+    :refer [date->str date-picker dispatch-event standard]]
+   [re-frame.core :as re-frame]
+   [auto-ap.forms.builder :as form-builder]))
+
 (re-frame/reg-sub
  ::can-submit
  :<- [::forms/form ::form]
@@ -27,70 +22,67 @@
    (let [which (update which :date #(date->str % standard))]
      (forms/start-form db ::form which))))
 
-(def sales-order-form (forms/vertical-form {:can-submit [::can-submit]
-                                        :change-event [::forms/changed]
-                                        :submit-event [::saving ]
-                                        :id ::form}))
 
-(defn form [{:keys [can-change-amount?] :as params}]
+(defn form []
   [layouts/side-bar {:on-close   (dispatch-event [::forms/form-closing ::form ])}
-   (let [{:keys [data active? error id]} @(re-frame/subscribe [::forms/form ::form])
-         {:keys [form-inline field raw-field error-notification submit-button ]} sales-order-form]
-     (with-meta 
-       (form-inline (assoc params :title "Sales order") 
-                    [:<>
-                     (when-not @(re-frame/subscribe [::subs/client])
-                       (field [:span "Client"
-                               [:span.has-text-danger " *"]]
-                              [typeahead-v3 {:entities @(re-frame/subscribe [::subs/clients])
-                                             :entity->text :name
-                                             :type "typeahead-v3"
-                                             :field [:client]
-                                             :disabled true}]))
+   (let [{:keys [data]} @(re-frame/subscribe [::forms/form ::form])]
+     [form-builder/builder {:can-submit   [::can-submit]
+                            :submit-event [::saving ]
+                            :id           ::form}
+      [form-builder/section {:title "Sales Order"}
+       (when-not @(re-frame/subscribe [::subs/client])
+         [form-builder/field 
+          "Client"
+          [typeahead-v3 {:entities     @(re-frame/subscribe [::subs/clients])
+                         :entity->text :name
+                         :type         "typeahead-v3"
+                         :field        [:client]
+                         :disabled     true}]])
 
 
-                     (field "Date"
-                            [date-picker {:class-name "input"
-                                          :class "input"
-                                          :type "date"
-                                          :disabled true
-                                          :field [:date]}])
-                     (field "Total"
-                            [money-field {:type "money"
-                                          :field [:total]
-                                          :disabled true}])
-                     (field "Tax"
-                            [money-field {:type "money"
-                                          :field [:tax]
-                                          :disabled true}])
-                     (field "Discount"
-                            [money-field {:type "money"
-                                          :field [:discount]
-                                          :disabled true}])
+       [form-builder/field "Date"
+        [date-picker {:type     "date"
+                      :output   :cljs-date
+                      :disabled true
+                      :field    [:date]}]]
+       [form-builder/field
+        "Total"
+        [money-field {:type     "money"
+                      :field    [:total]
+                      :disabled true}]]
+       [form-builder/field "Tax"
+        [money-field {:type     "money"
+                      :field    [:tax]
+                      :disabled true}]
+        [form-builder/field 
+         "Discount"
+         [money-field {:type     "money"
+                       :field    [:discount]
+                       :disabled true}]]]
 
-                     (field "Returns"
-                            [money-field {:type "money"
-                                          :field [:returns]
-                                          :disabled true}])
+       [form-builder/field "Returns"
+        [money-field {:type     "money"
+                      :field    [:returns]
+                      :disabled true}]]
 
-                     (field "Service Charge"
-                            [money-field {:type "money"
-                                          :field [:service-charge]
-                                          :disabled true}])
+       [form-builder/field "Service Charge"
+        [money-field {:type     "money"
+                      :field    [:service-charge]
+                      :disabled true}]]
 
-                     (field "Tip"
-                            [money-field {:type "money"
-                                          :field [:tip]
-                                          :disabled true}])
+       [form-builder/field
+        "Tip"
+        [money-field {:type     "money"
+                      :field    [:tip]
+                      :disabled true}]]
 
-                     [:h1.subtitle.is-4 "Charges"]
-                     [:ul 
-                      (for [charge (:charges data)]
-                        [:li (:type-name charge) ": " (:total charge)])]
+       [form-builder/section {:title "Charges"}
+        [:ul 
+         (for [charge (:charges data)]
+           [:li (:type-name charge) ": " (:total charge)])]]
 
-                     [:h1.subtitle.is-4 "Line Items"]
-                     [:ul 
-                      (for [line-item (:line-items data)]
-                        [:li (:item-name line-item) ": " (:total line-item) [:span.tag (:category line-item)]])]])
-       {:key (:id data)}))])
+       [form-builder/section {:title "Line Items"}
+        [:ul 
+         (for [line-item (:line-items data)]
+           [:li (:item-name line-item) ": " (:total line-item) [:span.tag (:category line-item)]])]]]])])
 
diff --git a/src/cljs/auto_ap/views/utils.cljs b/src/cljs/auto_ap/views/utils.cljs
index e6523da6..a7e2cfe1 100644
--- a/src/cljs/auto_ap/views/utils.cljs
+++ b/src/cljs/auto_ap/views/utils.cljs
@@ -251,6 +251,7 @@
         options (if allow-nil?
                   (with-keys (conj rest [:option {:value nil}]))
                   (with-keys rest))]
+    (println "KEYS" keys (dissoc keys :allow-nil?))
     (into [dom (dissoc keys :allow-nil?)]  options)))
 
 
@@ -340,33 +341,6 @@
     (into [dom keys] (with-keys rest))))
 
 (defmethod do-bind "date" [dom {:keys [field event subscription class spec] :as keys} & rest]
-  (let [field (if (keyword? field) [field] field)
-        event (if (keyword? event) [event] event)
-        selected (get-in subscription field)
-
-        selected (cond (string? selected)
-                       (c/to-date (t/to-default-time-zone (t/from-default-time-zone (str->date selected standard))))
-
-                       (instance? goog.date.DateTime selected)
-                       (c/to-date (t/to-default-time-zone (t/from-default-time-zone selected)))
-
-                       (instance? goog.date.Date selected)
-                       (c/to-date selected)
-
-                       :else
-                       selected )
-        keys (assoc keys
-                    :on-change (if (:cljs-date? keys)
-                                 (dispatch-cljs-date-change (conj event field))
-                                 (dispatch-date-change (conj event field)))
-                    :selected selected
-                    :class (str class
-                                (when (and spec (not (s/valid? spec (get-in subscription field))))
-                                  " is-danger")))
-        keys (dissoc keys :field :subscription :event :spec)]
-    (into [dom keys] (with-keys rest))))
-
-(defmethod do-bind "date2" [dom {:keys [field event subscription class spec] :as keys} & rest]
   (let [field (if (keyword? field) [field] field)
         event (if (keyword? event) [event] event)
         selected (get-in subscription field)
@@ -489,21 +463,6 @@
     [:div.field-body]
     (with-keys (map (fn [x] [:div.field x]) controls)))])
 
-(def date-picker
-  (reagent/adapt-react-class (.-default react-datepicker)))
-
-(defn date-picker-friendly [params]
-  [date-picker  (assoc params
-                      :class-name "input"
-                      :disabled-keyboard-navigation true
-                      :start-open false
-                      :class "input"
-                      :format-week-number (fn [] "")
-                      :previous-month-button-label ""
-                      :next-month-button-label ""
-                      :next-month-label ""
-                      :type "date")])
-
 (defn coerce-date [d]
   (cond (and (string? d)
              (some->> (re-find #"^(\d{4})" d)
@@ -524,7 +483,7 @@
         :else
         nil ))
 
-(defn date-picker-optional-internal [params]
+(defn date-picker-internal [params]
   
   (let [[text set-text ]   (react/useState (some-> params :value coerce-date (date->str standard)))
         [value set-value ] (react/useState (some-> params :value coerce-date))
@@ -565,8 +524,8 @@
                            :type "date" :placeholder "12/1/2021")]
       ]]))
 
-(defn date-picker-optional []
-  [:f> date-picker-optional-internal
+(defn date-picker []
+  [:f> date-picker-internal
    (r/props (r/current-component))])
 
 (defn local-now []