diff --git a/src/uxbox/ui/workspace/canvas.cljs b/src/uxbox/ui/workspace/canvas.cljs
index 8bc87c1a2..f3a6d17e7 100644
--- a/src/uxbox/ui/workspace/canvas.cljs
+++ b/src/uxbox/ui/workspace/canvas.cljs
@@ -16,7 +16,7 @@
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.dom :as dom]
             [uxbox.ui.workspace.base :as wb]
-            [uxbox.ui.workspace.selrect :refer (mouse-selrect)]
+            [uxbox.ui.workspace.selrect :refer (mouse-selrect shapes-selrect)]
             [uxbox.ui.workspace.grid :refer (grid)]
             [uxbox.ui.workspace.options :refer (element-opts)])
   (:import goog.events.EventType))
@@ -45,103 +45,6 @@
     :name "background"
     :mixins [mx/static]}))
 
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; Selected shapes.
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-(def ^:private
-  selection-circle-style
-  {:fillOpacity "0.5"
-   :strokeWidth "1px"
-   :vectorEffect "non-scaling-stroke"})
-
-(def ^:private
-  default-selection-props
-  {:r 4 :style selection-circle-style
-   :fill "lavender"
-   :stroke "gray"})
-
-(defn- selected-shapes-render
-  [own shapes selected]
-  (let [local (:rum/local own)
-        x (apply min (map :x shapes))
-        y (apply min (map :y shapes))
-        x' (apply max (map (fn [{:keys [x width]}] (+ x width)) shapes))
-        y' (apply max (map (fn [{:keys [y height]}] (+ y height)) shapes))
-        width (- x' x)
-        height (- y' y)]
-    (letfn [(on-mouse-down [event]
-              (dom/stop-propagation event)
-              (swap! local assoc :init-coords [x y])
-              (reset! wb/shapes-dragging? true))
-            (on-mouse-up [event]
-              (dom/stop-propagation event)
-              (reset! wb/shapes-dragging? false))]
-      (html
-       [:g {:class "shape selected"
-            :on-mouse-down on-mouse-down
-            :on-mouse-up on-mouse-up}
-        (for [item shapes]
-          (shapes/-render item nil))
-        [:g.controls
-         [:rect {:x x :y y :width width :height height
-                 :style {:stroke "black" :fill "transparent"
-                         :stroke-opacity "0.5"}}]
-         [:circle.top-left (merge default-selection-props
-                                  {:cx x :cy y})]
-         [:circle.top-right (merge default-selection-props
-                                   {:cx (+ x width) :cy y})]
-         [:circle.bottom-left (merge default-selection-props
-                                     {:cx x :cy (+ y height)})]
-         [:circle.bottom-right (merge default-selection-props
-                                      {:cx (+ x width) :cy (+ y height)})]]]))))
-
-(def selected-shapes
-  (mx/component
-   {:render selected-shapes-render
-    :name "selected-shapes"
-    :mixins [mx/static rum/reactive (mx/local {})]}))
-
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; Shape
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
-(defn selected-shape-render
-  [own shape selected]
-  (let [{:keys [id x y width height] :as shape} shape]
-    (letfn [(on-mouse-down [event]
-              (when-not (:blocked shape)
-                (let [local (:rum/local own)]
-                  (dom/stop-propagation event)
-                  (swap! local assoc :init-coords [x y])
-                  (reset! wb/shapes-dragging? true))))
-            (on-mouse-up [event]
-              (dom/stop-propagation event)
-              (reset! wb/shapes-dragging? false))]
-      (html
-       [:g.shape {:class "selected"
-                  :on-mouse-down on-mouse-down
-                  :on-mouse-up on-mouse-up}
-        (shapes/-render shape nil)
-        [:g.controls
-         [:rect {:x x :y y :width width :height height
-                 :style {:stroke "black" :fill "transparent"
-                         :stroke-opacity "0.5"}}]
-         [:circle.top-left (merge default-selection-props
-                                  {:cx x :cy y})]
-         [:circle.top-right (merge default-selection-props
-                                   {:cx (+ x width) :cy y})]
-         [:circle.bottom-left (merge default-selection-props
-                                     {:cx x :cy (+ y height)})]
-         [:circle.bottom-right (merge default-selection-props
-                                      {:cx (+ x width) :cy (+ y height)})]]]))))
-
-(def selected-shape
-  (mx/component
-   {:render selected-shape-render
-    :name "selected-shape"
-    :mixins [mx/static (mx/local {})]}))
-
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Shape
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -149,23 +52,31 @@
 (defn shape-render
   [own shape selected]
   ;; (println "shape" (:id shape))
-  (let [{:keys [id x y width height] :as shape} shape]
+  (let [{:keys [id x y width height] :as shape} shape
+        selected? (contains? selected id)]
     (letfn [(on-mouse-down [event]
               (when-not (:blocked shape)
                 (let [local (:rum/local own)]
                   (dom/stop-propagation event)
                   (swap! local assoc :init-coords [x y])
                   (reset! wb/shapes-dragging? true))
+                (cond
+                  (and (not selected?)
+                       (empty? selected))
+                  (rs/emit! (dw/select-shape id))
+
+                  (and (not selected?)
+                       (not (empty? selected)))
                   (if (.-ctrlKey event)
                     (rs/emit! (dw/select-shape id))
                     (rs/emit! (dw/deselect-all)
-                              (dw/select-shape id)))))
-
+                              (dw/select-shape id))))))
             (on-mouse-up [event]
               (dom/stop-propagation event)
               (reset! wb/shapes-dragging? false))]
       (html
-       [:g.shape {:on-mouse-down on-mouse-down
+       [:g.shape {:class (when selected? "selected")
+                  :on-mouse-down on-mouse-down
                   :on-mouse-up on-mouse-up}
         (shapes/-render shape nil)]))))
 
@@ -230,19 +141,20 @@
       (background)
       (grid 1)
       [:svg.page-layout {}
+       (shapes-selrect shapes-selected)
        [:g.main {}
-        (for [item shapes-notselected]
+        (for [item shapes]
           (-> (shape item workspace-selected)
               (rum/with-key (str (:id item)))))
 
-        (cond
+        #_(cond
           (= (count shapes-selected) 1)
           (let [item (first shapes-selected)]
             (selected-shape item workspace-selected))
 
           (> (count shapes-selected) 1)
           (selected-shapes shapes-selected))
-        (selrect)]]])))
+        (mouse-selrect)]]])))
 
 (def canvas
   (mx/component
diff --git a/src/uxbox/ui/workspace/selrect.cljs b/src/uxbox/ui/workspace/selrect.cljs
index aed54380e..89c75ba34 100644
--- a/src/uxbox/ui/workspace/selrect.cljs
+++ b/src/uxbox/ui/workspace/selrect.cljs
@@ -11,6 +11,10 @@
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.dom :as dom]))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Mouse Selection Rect
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
 (defn mouse-selrect-render
   [own]
   (when-let [data (rum/react wb/selrect-pos)]
@@ -28,3 +32,39 @@
     :name "mouse-selrect"
     :mixins [mx/static rum/reactive]}))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Shapes Selection Rect
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def ^:private selection-circle-style
+  {:fillOpacity "0.5"
+   :strokeWidth "1px"
+   :vectorEffect "non-scaling-stroke"})
+
+(def ^:private default-selection-props
+  {:r 4 :style selection-circle-style
+   :fill "lavender"
+   :stroke "gray"})
+
+(defn shapes-selrect-render
+  [own shapes]
+  (let [[width height x y] (sh/group-size-and-position shapes)]
+    (html
+     [:g.controls
+      [:rect {:x x :y y :width width :height height
+              :style {:stroke "black" :fill "transparent"
+                      :stroke-opacity "0.5"}}]
+      [:circle.top-left (merge default-selection-props
+                               {:cx x :cy y})]
+      [:circle.top-right (merge default-selection-props
+                                {:cx (+ x width) :cy y})]
+      [:circle.bottom-left (merge default-selection-props
+                                  {:cx x :cy (+ y height)})]
+      [:circle.bottom-right (merge default-selection-props
+                                   {:cx (+ x width) :cy (+ y height)})]])))
+
+(def ^:static shapes-selrect
+  (mx/component
+   {:render shapes-selrect-render
+    :name "shapes-selrect"
+    :mixins [mx/static]}))