diff --git a/.re-natal b/.re-natal
index b79a302ae4..58421ce73d 100644
--- a/.re-natal
+++ b/.re-natal
@@ -3,7 +3,8 @@
   "interface": "om-next",
   "androidHost": "10.0.3.2",
   "modules": [
-    "react-native-contacts"
+    "react-native-contacts",
+    "react-native-invertible-scroll-view"
   ],
   "imageDirs": [
     "images"
diff --git a/package.json b/package.json
index a6b7177900..d9360d09d2 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "react-native": "0.20.0",
     "react-native-contacts": "^0.2.1",
     "react-native-i18n": "0.0.8",
+    "react-native-invertible-scroll-view": "^0.2.0",
     "web3": "^0.15.2"
   }
 }
diff --git a/src/messenger/android/chat.cljs b/src/messenger/android/chat.cljs
index 590d112fdb..54b718fc4b 100644
--- a/src/messenger/android/chat.cljs
+++ b/src/messenger/android/chat.cljs
@@ -1,7 +1,7 @@
 (ns messenger.android.chat
   (:require-macros
    [natal-shell.components :refer [view text image touchable-highlight list-view
-                                   toolbar-android]]
+                                   text-input toolbar-android]]
    [natal-shell.data-source :refer [data-source clone-with-rows]]
    [natal-shell.core :refer [with-error-view]]
    [natal-shell.alert :refer [alert]])
@@ -10,6 +10,8 @@
             [messenger.state :as state]
             [messenger.android.resources :as res]))
 
+(set! js/InvertibleScrollView (js/require "react-native-invertible-scroll-view"))
+
 (defn nav-pop [nav]
   (binding [state/*nav-render* false]
     (.pop nav)))
@@ -20,34 +22,42 @@
          [:message/by-id id])
   static om/IQuery
   (query [this]
-         '[:id :body :outgoing :delivery-status :datetime])
+         '[:id :body :outgoing :delivery-status :date :new-day])
   Object
-  (render [this]
-          (let [{:keys [id body outgoing delivery-status datetime]}
-                (om/props this)]
-            (view {:height 70}
-                  (text {:style {:marginVertical 10
-                                 :fontFamily "Avenir-Roman"
-                                 :fontSize 11
-                                 :color "#AAB2B2"
-                                 :letterSpacing 1
-                                 :lineHeight 15
-                                 :textAlign "center"
-                                 :opacity 0.8}}
-                        datetime)
-                  (view {:style (merge {:borderRadius 6
-                                        :marginVertical 5
-                                        :paddingVertical 12
-                                        :paddingHorizontal 16}
-                                       (if outgoing
-                                         {:backgroundColor "#D3EEEF"
-                                          :alignSelf "flex-end"}
-                                         {:backgroundColor "#FBF6E3"
-                                          :alignSelf "flex-start"}))}
-                        (text {:style {:fontSize 14
-                                       :fontFamily "Avenir-Roman"
-                                       :color "#4A5258"}}
-                              body))))))
+  (render
+   [this]
+   (let [{:keys [id body outgoing delivery-status date new-day]}
+         (om/props this)]
+     (view {:paddingHorizontal 15}
+           ;;; date
+           (when new-day
+             (text {:style {:marginVertical 10
+                            :fontFamily "Avenir-Roman"
+                            :fontSize 11
+                            :color "#AAB2B2"
+                            :letterSpacing 1
+                            :lineHeight 15
+                            :textAlign "center"
+                            :opacity 0.8}}
+                   date))
+           ;;; body
+           (view {:style (merge {:width 260
+                                 :marginVertical 5}
+                                (if outgoing
+                                  {:alignSelf "flex-end"}
+                                  {:alignSelf "flex-start"}))}
+                 (view {:style (merge {:borderRadius 6
+                                       :paddingVertical 12
+                                       :paddingHorizontal 16}
+                                      (if outgoing
+                                        {:backgroundColor "#D3EEEF"
+                                         :alignSelf "flex-end"}
+                                        {:backgroundColor "#FBF6E3"
+                                         :alignSelf "flex-start"}))}
+                       (text {:style {:fontSize 14
+                                      :fontFamily "Avenir-Roman"
+                                      :color "#4A5258"}}
+                             body)))))))
 
 (def message (om/factory Message {:keyfn :id}))
 
@@ -56,10 +66,13 @@
 
 (defn generate-message [n]
   {:id n
-   :body "This is a text. This is a text."
+   :body (if (= (rem n 3) 0)
+           (apply str n "." (repeat 5 " This is a text."))
+           (str n ". This is a text."))
    :outgoing (< (rand) 0.5)
    :delivery-status (if (< (rand) 0.5) :delivered :seen)
-   :datetime "15:30"})
+   :date "TODAY"
+   :new-day (= (rem n 3) 0)})
 
 (defn generate-messages [n]
   (map generate-message (range 1 (inc n))))
@@ -67,31 +80,42 @@
 (defn load-messages []
   (clone-with-rows (data-source {:rowHasChanged (fn [row1 row2]
                                                   (not= row1 row2))})
-                   (vec (generate-messages 10))))
+                   (vec (generate-messages 100))))
+
+(defui NewMessage
+  Object
+  (render
+   [this]
+   (view {}
+         (text-input {}))))
+
+(def new-message (om/factory NewMessage))
 
 (defui Chat
-  ;; static om/IQuery
-  ;; (query [this]
-  ;;        '[:contacts-ds])
   Object
-  ;; (componentDidMount [this]
-  ;;                    (load-contacts))
-  (render [this]
-          (let [{:keys [nav]} (om/get-computed this)
-                messages-ds (load-messages)]
-            (view {:style {:flex 1}}
-                  (toolbar-android {:logo res/logo-icon
-                                    :title "Chat name"
-                                    :titleColor "#4A5258"
-                                    :subtitle "Last seen just now"
-                                    :subtitleColor "#AAB2B2"
-                                    :navIcon res/nav-back-icon
-                                    :style {:backgroundColor "#e9eaed"
-                                            :height 56}
-                                    :onIconClicked (fn []
-                                                     (nav-pop nav))})
-                  (list-view {:dataSource messages-ds
-                              :renderRow render-row
-                              :style {}})))))
+  (render
+   [this]
+   (let [{:keys [nav]} (om/get-computed this)
+         messages-ds (load-messages)]
+     (view {:style {:flex 1}}
+           (toolbar-android {:logo res/logo-icon
+                             :title "Chat name"
+                             :titleColor "#4A5258"
+                             :subtitle "Last seen just now"
+                             :subtitleColor "#AAB2B2"
+                             :navIcon res/nav-back-icon
+                             :style {:backgroundColor "#e9eaed"
+                                     :height 56}
+                             :onIconClicked (fn []
+                                              (nav-pop nav))})
+           (list-view {:dataSource messages-ds
+                       :renderScrollComponent
+                       (fn [props]
+                         (js/React.createElement js/InvertibleScrollView
+                                                 (clj->js (merge (js->clj props)
+                                                                 {:inverted true}))))
+                       :renderRow render-row
+                       :style {}})
+           (new-message)))))
 
 (def chat (om/factory Chat))