diff --git a/frontend/src/uxbox/main/refs.cljs b/frontend/src/uxbox/main/refs.cljs
index 201da00c6..438422477 100644
--- a/frontend/src/uxbox/main/refs.cljs
+++ b/frontend/src/uxbox/main/refs.cljs
@@ -24,6 +24,14 @@
   (let [id (l/focus ul/selected-page state)]
     (get-in state [:pages id])))
 
+(defn- resolve-project-pages
+  [state]
+  (let [project (get-in state [:workspace :project])
+        get-order #(get-in % [:metadata :order])]
+    (->> (vals (:pages state))
+         (filter #(= project (:project %)))
+         (sort-by get-order))))
+
 (def workspace
   (l/derive ul/workspace st/state))
 
@@ -32,6 +40,10 @@
   (-> (l/lens resolve-project)
       (l/derive st/state)))
 
+(def selected-project-pages
+  (-> (l/lens resolve-project-pages)
+      (l/derive st/state)))
+
 (def selected-page
   "Ref to the current selected page."
   (-> (l/lens resolve-page)
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs
index 59ab70495..f24879797 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs
@@ -6,23 +6,20 @@
 ;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.workspace.sidebar.options.interactions
-  (:require [sablono.core :refer-macros [html]]
-            [rum.core :as rum]
-            [lentes.core :as l]
-            [uxbox.util.i18n :refer (tr)]
+  (:require [lentes.core :as l]
+            [uxbox.builtins.icons :as i]
+            [uxbox.util.i18n :refer [tr]]
             [uxbox.util.router :as r]
-            [potok.core :as ptk]
-            [uxbox.util.mixins :as mx :include-macros true]
+            [uxbox.main.refs :as refs]
             [uxbox.main.store :as st]
             [uxbox.main.data.shapes :as uds]
             [uxbox.main.data.lightbox :as udl]
-            [uxbox.main.ui.workspace.sidebar.sitemap :refer (pages-ref)]
-            [uxbox.builtins.icons :as i]
             [uxbox.main.ui.lightbox :as lbx]
             [uxbox.main.ui.colorpicker :as cp]
             [uxbox.util.dom :as dom]
-            [uxbox.util.data :refer (parse-int parse-float read-string)]
-            [uxbox.util.spec :refer (color?)]))
+            [uxbox.util.data :refer [read-string]]
+            [uxbox.util.spec :refer [color?]]
+            [uxbox.util.mixins :as mx :include-macros true]))
 
 ;; --- Helpers
 
@@ -55,8 +52,8 @@
     ;; :holdrelease "Hold release"
     (pr-str trigger)))
 
-(defn- interactions-list-render
-  [own shape form-ref]
+(mx/defc interactions-list
+  [shape form-ref]
   (letfn [(on-edit [item event]
             (dom/prevent-default event)
             (reset! form-ref item))
@@ -68,75 +65,55 @@
             (dom/prevent-default event)
             (let [delete (partial delete item)]
               (udl/open! :confirm {:on-accept delete})))]
-    (html
-     [:ul.element-list
-      (for [item (vals (:interactions shape))
-            :let [key (pr-str (:id item))]]
-        [:li {:key key}
-         [:div.list-icon i/action]
-         [:span (translate-trigger-name (:trigger item))]
-         [:div.list-actions
-          [:a {:on-click (partial on-edit item)} i/pencil]
-          [:a {:on-click (partial on-delete item)} i/trash]]])])))
-
-(def interactions-list
-  (mx/component
-   {:render interactions-list-render
-    :name "interactions-list"
-    :mixins [mx/static]}))
+    [:ul.element-list
+     (for [item (vals (:interactions shape))
+           :let [key (pr-str (:id item))]]
+       [:li {:key key}
+        [:div.list-icon i/action]
+        [:span (translate-trigger-name (:trigger item))]
+        [:div.list-actions
+         [:a {:on-click (partial on-edit item)} i/pencil]
+         [:a {:on-click (partial on-delete item)} i/trash]]])]))
 
 ;; --- Trigger Input
 
-(defn- trigger-input-render
-  [own form-ref]
+(mx/defc trigger-input
+  [form-ref]
   (when-not (:trigger @form-ref)
     (swap! form-ref assoc :trigger :click))
-  (html
-   [:div
-    [:span "Trigger"]
-    [:div.row-flex
-     [:select.input-select {:placeholder "Choose a trigger"
-                            :on-change (partial on-change form-ref :trigger)
-                            :value (pr-str (:trigger @form-ref))}
-      [:option {:value ":click"} "Click"]
-      [:option {:value ":doubleclick"} "Double-click"]
-      [:option {:value ":rightclick"} "Right-click"]
-      [:option {:value ":hover"} "Hover"]
-      [:option {:value ":mousein"} "Mouse in"]
-      [:option {:value ":mouseout"} "Mouse out"]
-      #_[:option {:value ":swiperight"} "Swipe right"]
-      #_[:option {:value ":swipeleft"} "Swipe left"]
-      #_[:option {:value ":swipedown"} "Swipe dpwn"]
-      #_[:option {:value ":touchandhold"} "Touch and hold"]
-      #_[:option {:value ":holdrelease"} "Hold release"]
-      #_[:option {:value ":keypress"} "Key press"]
-      #_[:option {:value ":pageisloaded"} "Page is loaded"]
-      #_[:option {:value ":windowscroll"} "Window is scrolled to"]]]]))
-
-(def trigger-input
-  (mx/component
-   {:render trigger-input-render
-    :name "trigger-input"
-    :mixins [mx/static]}))
+  [:div
+   [:span "Trigger"]
+   [:div.row-flex
+    [:select.input-select {:placeholder "Choose a trigger"
+                           :on-change (partial on-change form-ref :trigger)
+                           :value (pr-str (:trigger @form-ref))}
+     [:option {:value ":click"} "Click"]
+     [:option {:value ":doubleclick"} "Double-click"]
+     [:option {:value ":rightclick"} "Right-click"]
+     [:option {:value ":hover"} "Hover"]
+     [:option {:value ":mousein"} "Mouse in"]
+     [:option {:value ":mouseout"} "Mouse out"]
+     #_[:option {:value ":swiperight"} "Swipe right"]
+     #_[:option {:value ":swipeleft"} "Swipe left"]
+     #_[:option {:value ":swipedown"} "Swipe dpwn"]
+     #_[:option {:value ":touchandhold"} "Touch and hold"]
+     #_[:option {:value ":holdrelease"} "Hold release"]
+     #_[:option {:value ":keypress"} "Key press"]
+     #_[:option {:value ":pageisloaded"} "Page is loaded"]
+     #_[:option {:value ":windowscroll"} "Window is scrolled to"]]]])
 
 ;; --- URL Input
 
-(defn- url-input-render
-  [own form-ref]
-  (html
-   [:div
-    [:span "Url"]
-    [:div.row-flex
-     [:input.input-text
-      {:placeholder "http://"
-       :on-change (partial on-change form-ref :url)
-       :value (:url @form-ref "")
-       :type "url"}]]]))
-
-(def url-input
-  (mx/component
-   {:render url-input-render
-    :name "url-input"}))
+(mx/defc url-input
+  [form-ref]
+  [:div
+   [:span "Url"]
+   [:div.row-flex
+    [:input.input-text
+     {:placeholder "http://"
+      :on-change (partial on-change form-ref :url)
+      :value (:url @form-ref "")
+      :type "url"}]]])
 
 ;; --- Elements Input
 
@@ -151,232 +128,179 @@
                   (conj acc shape))))]
       (reduce resolve-shape [] shapes))))
 
-(defn- elements-input-render
-  [own page form-ref]
+(mx/defc elements-input
+  [page form-ref]
   (let [shapes (collect-shapes @st/state page)]
-    (html
-     [:div
-      [:span "Element"]
-      [:div.row-flex
-       [:select.input-select
-        {:placeholder "Choose an element"
-         :on-change (partial on-change form-ref :element)
-         :value (pr-str (:element @form-ref))}
-        [:option {:value "nil"} "---"]
-        (for [shape shapes
-              :let [key (pr-str (:id shape))]]
-          [:option {:key key :value key} (:name shape)])]]])))
-
-(def elements-input
-  (mx/component
-   {:render elements-input-render
-    :name "elements-input"}))
+    [:div
+     [:span "Element"]
+     [:div.row-flex
+      [:select.input-select
+       {:placeholder "Choose an element"
+        :on-change (partial on-change form-ref :element)
+        :value (pr-str (:element @form-ref))}
+       [:option {:value "nil"} "---"]
+       (for [shape shapes
+             :let [key (pr-str (:id shape))]]
+         [:option {:key key :value key} (:name shape)])]]]))
 
 ;; --- Page Input
 
-(defn- pages-input-render
-  [own form-ref path]
-  (let [pages @pages-ref]
+(mx/defc pages-input
+  {:mixins [mx/reactive]}
+  [form-ref path]
+  ;; FIXME: react on ref
+  (let [pages (mx/react refs/selected-project-pages)]
     (when (and (not (:page @form-ref))
                (pos? (count pages)))
       (swap! form-ref assoc :page (:id (first pages))))
-    (html
-     [:div
-      [:span "Page"]
-      [:div.row-flex
-       [:select.input-select {:placeholder "Choose a page"
-                              :on-change (partial on-change form-ref :page)
-                              :value (pr-str (:page @form-ref))}
-        (for [page pages
-              :let [key (:index page)]]
-          [:option {:key key :value key} (:name page)])]]])))
-
-(def pages-input
-  (mx/component
-   {:render pages-input-render
-    :name "pages-input"}))
+    [:div
+     [:span "Page"]
+     [:div.row-flex
+      [:select.input-select {:placeholder "Choose a page"
+                             :on-change (partial on-change form-ref :page)
+                             :value (pr-str (:page @form-ref))}
+       (for [page pages
+             :let [key (pr-str (:id page))]]
+         [:option {:key key :value key} (:name page)])]]]))
 
 ;; --- Animation
 
-(defn- animation-input-render
-  [own form-ref]
+(mx/defc animation-input
+  [form-ref]
   (when-not (:action @form-ref)
     (swap! form-ref assoc :animation :none))
-  (html
-   [:div
-    [:span "Animation"]
-    [:div.row-flex
-     [:select.input-select
-      {:placeholder "Animation"
-       :on-change (partial on-change form-ref :animation)
-       :value (pr-str (:animation @form-ref))}
-      [:option {:value ":none"} "None"]
-      [:option {:value ":fade"} "Fade"]
-      [:option {:value ":slide"} "Slide"]]]]))
-
-(def animation-input
-  (mx/component
-   {:render animation-input-render
-    :name "animation-input"}))
+  [:div
+   [:span "Animation"]
+   [:div.row-flex
+    [:select.input-select
+     {:placeholder "Animation"
+      :on-change (partial on-change form-ref :animation)
+      :value (pr-str (:animation @form-ref))}
+     [:option {:value ":none"} "None"]
+     [:option {:value ":fade"} "Fade"]
+     [:option {:value ":slide"} "Slide"]]]])
 
 ;; --- MoveTo Input
 
-(defn- moveto-input-render
-  [own form-ref]
+(mx/defc moveto-input
+  [form-ref]
   (when-not (:moveto-x @form-ref)
     (swap! form-ref assoc :moveto-x 0))
   (when-not (:moveto-y @form-ref)
     (swap! form-ref assoc :moveto-y 0))
-  (html
-   [:div
-    [:span "Move to position"]
-    [:div.row-flex
-     [:div.input-element.pixels
-      [:input.input-text
-       {:placeholder "X"
-        :on-change (partial on-change form-ref :moveto-x)
-        :type "number"
-        :value (:moveto-x @form-ref "")}]]
-     [:div.input-element.pixels
-      [:input.input-text
-       {:placeholder "Y"
-        :on-change (partial on-change form-ref :moveto-y)
-        :type "number"
-        :value (:moveto-y @form-ref "")}]]]]))
-
-(def moveto-input
-  (mx/component
-   {:render moveto-input-render
-    :name "moveto-input"}))
+  [:div
+   [:span "Move to position"]
+   [:div.row-flex
+    [:div.input-element.pixels
+     [:input.input-text
+      {:placeholder "X"
+       :on-change (partial on-change form-ref :moveto-x)
+       :type "number"
+       :value (:moveto-x @form-ref "")}]]
+    [:div.input-element.pixels
+     [:input.input-text
+      {:placeholder "Y"
+       :on-change (partial on-change form-ref :moveto-y)
+       :type "number"
+       :value (:moveto-y @form-ref "")}]]]])
 
 ;; --- MoveBy Input
 
-(defn- moveby-input-render
-  [own form-ref]
+(mx/defc moveby-input
+  [form-ref]
   (when-not (:moveby-x @form-ref)
     (swap! form-ref assoc :moveby-x 0))
   (when-not (:moveby-y @form-ref)
     (swap! form-ref assoc :moveby-y 0))
-  (html
-   [:div
-    [:span "Move to position"]
-    [:div.row-flex
-     [:div.input-element.pixels
-      [:input.input-text
-       {:placeholder "X"
-        :on-change (partial on-change form-ref :moveby-x)
-        :type "number"
-        :value (:moveby-x @form-ref "")}]]
-     [:div.input-element.pixels
-      [:input.input-text
-       {:placeholder "Y"
-        :on-change (partial on-change form-ref :moveby-y)
-        :type "number"
-        :value (:moveby-y @form-ref "")}]]]]))
-
-(def moveby-input
-  (mx/component
-   {:render moveby-input-render
-    :name "moveby-input"}))
+  [:div
+   [:span "Move to position"]
+   [:div.row-flex
+    [:div.input-element.pixels
+     [:input.input-text
+      {:placeholder "X"
+       :on-change (partial on-change form-ref :moveby-x)
+       :type "number"
+       :value (:moveby-x @form-ref "")}]]
+    [:div.input-element.pixels
+     [:input.input-text
+      {:placeholder "Y"
+       :on-change (partial on-change form-ref :moveby-y)
+       :type "number"
+       :value (:moveby-y @form-ref "")}]]]])
 
 ;; --- Opacity Input
 
-(defn- opacity-input-render
-  [own form-ref]
+(mx/defc opacity-input
+  [form-ref]
   (when-not (:opacity @form-ref)
     (swap! form-ref assoc :opacity 100))
-  (html
-   [:div
-    [:span "Opacity"]
-    [:div.row-flex
-     [:div.input-element.percentail
-      [:input.input-text
-       {:placeholder "%"
-        :on-change (partial on-change form-ref :opacity)
-        :min "0"
-        :max "100"
-        :type "number"
-        :value (:opacity @form-ref "")}]]]]))
-
-(def opacity-input
-  (mx/component
-   {:render opacity-input-render
-    :name "opacity-input"}))
+  [:div
+   [:span "Opacity"]
+   [:div.row-flex
+    [:div.input-element.percentail
+     [:input.input-text
+      {:placeholder "%"
+       :on-change (partial on-change form-ref :opacity)
+       :min "0"
+       :max "100"
+       :type "number"
+       :value (:opacity @form-ref "")}]]]])
 
 ;; --- Rotate Input
 
-(defn rotate-input-render
-  [own form-ref]
-  (html
-   [:div
-    [:span "Rotate (dg)"]
-    [:div.row-flex
-     [:div.input-element.degrees
-      [:input.input-text
-       {:placeholder "dg"
-        :on-change (partial on-change form-ref :rotation)
-        :type "number"
-        :value (:rotation @form-ref "")}]]]]))
-
-(def rotate-input
-  (mx/component
-   {:render rotate-input-render
-    :name "rotate-input"}))
+(mx/defc rotate-input
+  [form-ref]
+  [:div
+   [:span "Rotate (dg)"]
+   [:div.row-flex
+    [:div.input-element.degrees
+     [:input.input-text
+      {:placeholder "dg"
+       :on-change (partial on-change form-ref :rotation)
+       :type "number"
+       :value (:rotation @form-ref "")}]]]])
 
 ;; --- Resize Input
 
-(defn- resize-input-render
-  [own form-ref]
-  (html
-   [:div
-    [:span "Resize"]
-    [:div.row-flex
-     [:div.input-element.pixels
-      [:input.input-text
-       {:placeholder "Width"
-        :on-change (partial on-change form-ref :resize-width)
-        :type "number"
-        :value (:resize-width @form-ref "")}]]
-     [:div.input-element.pixels
-      [:input.input-text
-       {:placeholder "Height"
-        :on-change (partial on-change form-ref :resize-height)
-        :type "number"
-        :value (:resize-height @form-ref "")}]]]]))
-
-(def resize-input
-  (mx/component
-   {:render resize-input-render
-    :name "resize-input"}))
+(mx/defc resize-input
+  [form-ref]
+  [:div
+   [:span "Resize"]
+   [:div.row-flex
+    [:div.input-element.pixels
+     [:input.input-text
+      {:placeholder "Width"
+       :on-change (partial on-change form-ref :resize-width)
+       :type "number"
+       :value (:resize-width @form-ref "")}]]
+    [:div.input-element.pixels
+     [:input.input-text
+      {:placeholder "Height"
+       :on-change (partial on-change form-ref :resize-height)
+       :type "number"
+       :value (:resize-height @form-ref "")}]]]])
 
 ;; --- Color Input
 
-(defn- colorpicker-render
-  [own {:keys [x y on-change value]}]
+(mx/defc colorpicker
+  [{:keys [x y on-change value]}]
   (let [left (- x 260)
         top (- y 50)]
-    (html
-     [:div.colorpicker-tooltip
-      {:style {:left (str left "px")
-               :top (str top "px")}}
+    [:div.colorpicker-tooltip
+     {:style {:left (str left "px")
+              :top (str top "px")}}
 
-      (cp/colorpicker
-       :theme :small
-       :value value
-       :on-change on-change)])))
-
-(def ^:private colorpicker
-  (mx/component
-   {:render colorpicker-render
-    :name "colorpicker"
-    :mixins [mx/reactive mx/static]}))
+     (cp/colorpicker
+      :theme :small
+      :value value
+      :on-change on-change)]))
 
 (defmethod lbx/render-lightbox :interactions/colorpicker
   [params]
   (colorpicker params))
 
-(defn- color-input-render
-  [own form-ref]
+(mx/defc color-input
+  [form-ref]
   (when-not (:fill-color @form-ref)
     (swap! form-ref assoc :fill-color "#000000"))
   (when-not (:stroke-color @form-ref)
@@ -401,157 +325,132 @@
               (udl/open! :interactions/colorpicker opts)))]
     (let [stroke-color (:stroke-color @form-ref)
           fill-color (:fill-color @form-ref)]
-      (html
-       [:div
-        [:div.row-flex
-         [:div.column-half
-          [:span "Fill"]
-          [:div.color-data
-           [:span.color-th
-            {:style {:background-color fill-color}
-             :on-click (partial show-picker :fill-color)}]
-           [:div.color-info
-            [:input
-             {:on-change on-change-fill-color
-              :value fill-color}]]]]
-         [:div.column-half
-          [:span "Stroke"]
-          [:div.color-data
-           [:span.color-th
-            {:style {:background-color stroke-color}
-             :on-click (partial show-picker :stroke-color)}]
-           [:div.color-info
-            [:input
-             {:on-change on-change-stroke-color
-              :value stroke-color}]]]]]]))))
-
-(def color-input
-  (mx/component
-   {:render color-input-render
-    :name "color-input"}))
+      [:div
+       [:div.row-flex
+        [:div.column-half
+         [:span "Fill"]
+         [:div.color-data
+          [:span.color-th
+           {:style {:background-color fill-color}
+            :on-click (partial show-picker :fill-color)}]
+          [:div.color-info
+           [:input
+            {:on-change on-change-fill-color
+             :value fill-color}]]]]
+        [:div.column-half
+         [:span "Stroke"]
+         [:div.color-data
+          [:span.color-th
+           {:style {:background-color stroke-color}
+            :on-click (partial show-picker :stroke-color)}]
+          [:div.color-info
+           [:input
+            {:on-change on-change-stroke-color
+             :value stroke-color}]]]]]])))
 
 ;; --- Easing Input
 
-(defn- easing-input-render
-  [own form-ref]
+(mx/defc easing-input
+  [form-ref]
   (when-not (:easing @form-ref)
     (swap! form-ref assoc :easing :linear))
-  (html
-   [:div
-    [:span "Easing"]
-    [:div.row-flex
-     [:select.input-select
-      {:placeholder "Easing"
-       :on-change (partial on-change form-ref :easing)
-       :value (pr-str (:easing @form-ref))}
-      [:option {:value ":linear"} "Linear"]
-      [:option {:value ":easein"} "Ease in"]
-      [:option {:value ":easeout"} "Ease out"]
-      [:option {:value ":easeinout"} "Ease in out"]]]]))
-
-(def easing-input
-  (mx/component
-   {:render easing-input-render
-    :name "easing-input"}))
+  [:div
+   [:span "Easing"]
+   [:div.row-flex
+    [:select.input-select
+     {:placeholder "Easing"
+      :on-change (partial on-change form-ref :easing)
+      :value (pr-str (:easing @form-ref))}
+     [:option {:value ":linear"} "Linear"]
+     [:option {:value ":easein"} "Ease in"]
+     [:option {:value ":easeout"} "Ease out"]
+     [:option {:value ":easeinout"} "Ease in out"]]]])
 
 ;; --- Duration Input
 
-(defn- duration-input-render
-  [own form-ref]
+(mx/defc duration-input
+  [form-ref]
   (when-not (:duration @form-ref)
     (swap! form-ref assoc :duration 300))
   (when-not (:delay @form-ref)
     (swap! form-ref assoc :delay 0))
-  (html
-   [:div
-    [:span "Duration  |  Delay"]
-    [:div.row-flex
-     [:div.input-element.miliseconds
-      [:input.input-text
-       {:placeholder "Duration"
-        :type "number"
-        :on-change (partial on-change form-ref :duration)
-        :value (pr-str (:duration @form-ref))}]]
-     [:div.input-element.miliseconds
-      [:input.input-text {:placeholder "Delay"
+  [:div
+   [:span "Duration  |  Delay"]
+   [:div.row-flex
+    [:div.input-element.miliseconds
+     [:input.input-text
+      {:placeholder "Duration"
+       :type "number"
+       :on-change (partial on-change form-ref :duration)
+       :value (pr-str (:duration @form-ref))}]]
+    [:div.input-element.miliseconds
+     [:input.input-text {:placeholder "Delay"
                          :type "number"
                          :on-change (partial on-change form-ref :delay)
-                         :value (pr-str (:delay @form-ref))}]]]]))
-
-(def duration-input
-  (mx/component
-   {:render duration-input-render
-    :name "duration-input"}))
+                         :value (pr-str (:delay @form-ref))}]]]])
 
 ;; --- Action Input
 
-(defn- action-input-render
-  [own page form-ref]
+(mx/defc action-input
+  [page form-ref]
   (when-not (:action @form-ref)
     (swap! form-ref assoc :action :show))
-
   (let [form @form-ref
         simple? #{:gotourl :gotopage}
         elements? (complement simple?)
         animation? #{:show :hide :toggle}
         only-easing? (complement animation?)]
-    (html
-     [:div
-      [:span "Action"]
-      [:div.row-flex
-       [:select.input-select
-        {:placeholder "Choose an action"
-         :on-change (partial on-change form-ref :action [:trigger])
-         :value (pr-str (:action form))}
-        [:option {:value ":show"} "Show"]
-        [:option {:value ":hide"} "Hide"]
-        [:option {:value ":toggle"} "Toggle"]
-        ;; [:option {:value ":moveto"} "Move to"]
-        [:option {:value ":moveby"} "Move by"]
-        [:option {:value ":opacity"} "Opacity"]
-        [:option {:value ":size"} "Size"]
-        [:option {:value ":color"} "Color"]
-        ;; [:option {:value ":rotate"} "Rotate"]
-        [:option {:value ":gotopage"} "Go to page"]
-        [:option {:value ":gotourl"} "Go to URL"]
-        #_[:option {:value ":goback"} "Go back"]
-        [:option {:value ":scrolltoelement"} "Scroll to element"]]]
+    [:div
+     [:span "Action"]
+     [:div.row-flex
+      [:select.input-select
+       {:placeholder "Choose an action"
+        :on-change (partial on-change form-ref :action [:trigger])
+        :value (pr-str (:action form))}
+       [:option {:value ":show"} "Show"]
+       [:option {:value ":hide"} "Hide"]
+       [:option {:value ":toggle"} "Toggle"]
+       ;; [:option {:value ":moveto"} "Move to"]
+       [:option {:value ":moveby"} "Move by"]
+       [:option {:value ":opacity"} "Opacity"]
+       [:option {:value ":size"} "Size"]
+       [:option {:value ":color"} "Color"]
+       ;; [:option {:value ":rotate"} "Rotate"]
+       [:option {:value ":gotopage"} "Go to page"]
+       [:option {:value ":gotourl"} "Go to URL"]
+       #_[:option {:value ":goback"} "Go back"]
+       [:option {:value ":scrolltoelement"} "Scroll to element"]]]
 
-      (case (:action form)
-        :gotourl (url-input form-ref)
-        :gotopage (pages-input form-ref)
-        :color (color-input form-ref)
-        ;; :rotate (rotate-input form-ref)
-        :size (resize-input form-ref)
-        :moveto (moveto-input form-ref)
-        :moveby (moveby-input form-ref)
-        :opacity (opacity-input form-ref)
-        nil)
+     (case (:action form)
+       :gotourl (url-input form-ref)
+       :gotopage (pages-input form-ref)
+       :color (color-input form-ref)
+       ;; :rotate (rotate-input form-ref)
+       :size (resize-input form-ref)
+       :moveto (moveto-input form-ref)
+       :moveby (moveby-input form-ref)
+       :opacity (opacity-input form-ref)
+       nil)
 
-      (when (elements? (:action form))
-        (elements-input page form-ref))
+     (when (elements? (:action form))
+       (elements-input page form-ref))
 
-      (when (and (animation? (:action form))
-                 (:element @form-ref))
-        (animation-input form-ref))
+     (when (and (animation? (:action form))
+                (:element @form-ref))
+       (animation-input form-ref))
 
-      (when (or (not= (:animation form :none) :none)
-                (and (only-easing? (:action form))
-                     (:element form)))
-        (mx/concat
-         (easing-input form-ref)
-         (duration-input form-ref)))
-      ])))
-
-(def action-input
-  (mx/component
-   {:render action-input-render
-    :name "action-input"}))
+     (when (or (not= (:animation form :none) :none)
+               (and (only-easing? (:action form))
+                    (:element form)))
+       (mx/concat
+        (easing-input form-ref)
+        (duration-input form-ref)))
+     ]))
 
 ;; --- Form
 
-(defn- interactions-form-render
-  [own shape form-ref]
+(mx/defc interactions-form
+  [shape form-ref]
   (letfn [(on-submit [event]
             (dom/prevent-default event)
             (let [shape-id (:id shape)
@@ -561,48 +460,35 @@
           (on-cancel [event]
             (dom/prevent-default event)
             (reset! form-ref nil))]
-    (html
-     [:form {:on-submit on-submit}
-      (trigger-input form-ref)
-      (action-input (:page shape) form-ref)
-      [:div.row-flex
-       [:input.btn-primary.btn-small.save-btn
+    [:form {:on-submit on-submit}
+     (trigger-input form-ref)
+     (action-input (:page shape) form-ref)
+     [:div.row-flex
+      [:input.btn-primary.btn-small.save-btn
         {:value "Save" :type "submit"}]
-       [:a.cancel-btn {:on-click on-cancel}
-        "Cancel"]]])))
-
-(def interactions-form
-  (mx/component
-   {:render interactions-form-render
-    :name "interactions-form"}))
+      [:a.cancel-btn {:on-click on-cancel}
+       "Cancel"]]]))
 
 ;; --- Interactions Menu
 
-(defn- interactions-menu-render
+(mx/defcs interactions-menu
+  {:mixins [mx/static (mx/local)]}
   [own menu shape]
   (let [local (:rum/local own)
         form-ref (l/derive (l/key :form) local)
         interactions (:interactions shape)
         create-interaction #(reset! form-ref {})]
-    (html
-     [:div.element-set {:key (str (:id menu))}
-      [:div.element-set-title (:name menu)]
-      [:div.element-set-content
-       (if @form-ref
-         (interactions-form shape form-ref)
-         [:div
-          (interactions-list shape form-ref)
-          [:input.btn-primary.btn-small
-           {:value "New interaction"
-            :on-click create-interaction
-            :type "button"}]])]])))
-
-(def interactions-menu
-  (mx/component
-   {:render interactions-menu-render
-    :name "interactions-menu"
-    :mixins [mx/static (mx/local)]}))
-
+    [:div.element-set {:key (str (:id menu))}
+     [:div.element-set-title (:name menu)]
+     [:div.element-set-content
+      (if @form-ref
+        (interactions-form shape form-ref)
+        [:div
+         (interactions-list shape form-ref)
+         [:input.btn-primary.btn-small
+          {:value "New interaction"
+           :on-click create-interaction
+           :type "button"}]])]]))
 
 ;; --- Not implemented stuff
 
diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
index 01f8881bd..903de059d 100644
--- a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
@@ -24,21 +24,6 @@
             [uxbox.util.dom :as dom]
             [uxbox.util.mixins :as mx :include-macros true]))
 
-;; --- Refs
-
-(defn- resolve-pages
-  [state]
-  (let [project (get-in state [:workspace :project])]
-    (->> (vals (:pages state))
-         (filter #(= project (:project %)))
-         (sort-by #(get-in % [:metadata :order])))))
-
-(def pages-ref
-  (-> (l/lens resolve-pages)
-      (l/derive st/state)))
-
-;; --- Component
-
 (mx/defcs page-item
   {:mixins [(mx/local) mx/static mx/reactive]}
   [{:keys [rum/local] :as own} page total active?]
@@ -120,7 +105,7 @@
   {:mixins [mx/static mx/reactive]}
   []
   (let [project (mx/react refs/selected-project)
-        pages (mx/react pages-ref)
+        pages (mx/react refs/selected-project-pages)
         current (mx/react refs/selected-page)
         create #(udl/open! :page-form {:page {:project (:id project)}})
         close #(st/emit! (dw/toggle-flag :sitemap))]