diff --git a/frontend/uxbox/ui/workspace/base.cljs b/frontend/uxbox/ui/workspace/base.cljs
index d4e4dff06..61e8b7162 100644
--- a/frontend/uxbox/ui/workspace/base.cljs
+++ b/frontend/uxbox/ui/workspace/base.cljs
@@ -127,8 +127,8 @@
 ;; Constants
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(def viewport-height  3000)
-(def viewport-width 3000)
+(def viewport-height  2048)
+(def viewport-width 2048)
 
 (def document-start-x 50)
 (def document-start-y 50)
diff --git a/frontend/uxbox/ui/workspace/canvas.cljs b/frontend/uxbox/ui/workspace/canvas.cljs
index 3b0916f09..37fd8be2e 100644
--- a/frontend/uxbox/ui/workspace/canvas.cljs
+++ b/frontend/uxbox/ui/workspace/canvas.cljs
@@ -13,7 +13,7 @@
             [uxbox.ui.dom :as dom]
             [uxbox.ui.util :as util]
             [uxbox.ui.workspace.base :as wb]
-            [uxbox.ui.workspace.rules :as wr]
+            [uxbox.ui.workspace.grid :refer (grid)]
             [uxbox.ui.workspace.toolboxes :as toolboxes]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -147,6 +147,8 @@
          (reset! wb/shapes-dragging? false))
        }
       (background)
+      (grid 1)
+
       [:svg.page-layout {}
        (for [shapeid (:shapes page)
              :let [item (get-in page [:shapes-by-id shapeid])]]
diff --git a/frontend/uxbox/ui/workspace/grid.cljs b/frontend/uxbox/ui/workspace/grid.cljs
index ed76a4a30..acb19fe6a 100644
--- a/frontend/uxbox/ui/workspace/grid.cljs
+++ b/frontend/uxbox/ui/workspace/grid.cljs
@@ -13,67 +13,68 @@
 
 (defn grid-render
   [own zoom]
-  (letfn [(vertical-line [position value padding]
+  (letfn [(vertical-line [page position value]
             (let [ticks-mod (/ 100 zoom)
                   step-size (/ 10 zoom)]
               (if (< (mod value ticks-mod) step-size)
                 (html [:line {:key position
-                              :y1 padding
-                              :y2 wb/viewport-width
+                              :y1 0
+                              :y2 (:height page)
                               :x1 position
                               :x2 position
                               :stroke grid-color
                               :stroke-width (/ 0.5 zoom)
                               :opacity 0.75}])
                 (html [:line {:key position
-                              :y1 padding
-                              :y2 wb/viewport-width
+                              :y1 0
+                              :y2 (:height page)
                               :x1 position
                               :x2 position
                               :stroke grid-color
                               :stroke-width (/ 0.5 zoom)
                               :opacity 0.25}]))))
-          (horizontal-line [position value padding]
+          (horizontal-line [page position value]
             (let [ticks-mod (/ 100 zoom)
                   step-size (/ 10 zoom)]
               (if (< (mod value ticks-mod) step-size)
                 (html [:line {:key position
                               :y1 position
                               :y2 position
-                              :x1 padding
-                              :x2 wb/viewport-height
+                              :x1 0
+                              :x2 (:width page)
                               :stroke grid-color
                               :stroke-width (/ 0.5 zoom)
                               :opacity 0.75}])
                 (html [:line {:key position
                               :y1 position
                               :y2 position
-                              :x1 padding
-                              :x2 wb/viewport-height
+                              :x1 0
+                              :x2 (:width page)
                               :stroke grid-color
                               :stroke-width (/ 0.5 zoom)
                               :opacity 0.25}]))))]
-    (let [padding (* 20 zoom)
+    (let [padding (* 0 zoom)
           ticks-mod (/ 100 zoom)
           step-size (/ 10 zoom)
           workspace (rum/react wb/workspace-state)
+          page (rum/react wb/page-state)
           enabled? (:grid-enabled workspace false)
-          vertical-ticks (range (- padding wb/document-start-y)
-                                (- wb/viewport-height wb/document-start-y padding)
+          vertical-ticks (range (- 0 wb/document-start-y)
+                                (- (:width page) wb/document-start-y)
                                 step-size)
-          horizontal-ticks (range (- padding wb/document-start-x)
-                                  (- wb/viewport-width wb/document-start-x padding)
+          horizontal-ticks (range (- 0 wb/document-start-x)
+                                  (- (:height page) wb/document-start-x)
                                   step-size)]
       (html
        [:g.grid
         {:style {:display (if enabled? "block" "none")}}
         (for [tick vertical-ticks]
           (let [position (+ tick wb/document-start-x)
-                line (vertical-line position tick padding)]
+                line (vertical-line page position tick)]
             (rum/with-key line (str "tick-" tick))))
         (for [tick horizontal-ticks]
           (let [position (+ tick wb/document-start-y)
-                line (horizontal-line position tick padding)]
+                line (horizontal-line page position tick)]
             (rum/with-key line (str "tick-" tick))))]))))
 
 (def grid
diff --git a/frontend/uxbox/ui/workspace/rules.cljs b/frontend/uxbox/ui/workspace/rules.cljs
index b5741d58e..f63ce7848 100644
--- a/frontend/uxbox/ui/workspace/rules.cljs
+++ b/frontend/uxbox/ui/workspace/rules.cljs
@@ -9,44 +9,86 @@
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.util :as util]))
 
+(def ^:static zoom 1)
+(def ^:static padding 20)
+(def ^:static step-size 10)
+(def ^:static start-width wb/document-start-x)
+(def ^:static start-height wb/document-start-y)
+(def ^:static big-ticks-mod (/ 100 zoom))
+(def ^:static mid-ticks-mod (/ 50 zoom))
+(def ^:static scroll-left 0)
+(def ^:static scroll-top 0)
+
+(defn h-line
+  [position value]
+  (cond
+    (< (mod value big-ticks-mod) step-size)
+    (html
+     [:g {:key position}
+      [:line {:x1 position :x2 position :y1 5 :y2 padding :stroke "#7f7f7f"}]
+      [:text {:x (+ position 2) :y 13 :fill "#7f7f7f" :style {:font-size "12px"}} value]])
+
+    (< (mod value mid-ticks-mod) step-size)
+    (html
+     [:line {:key position :x1 position :x2 position :y1 10 :y2 padding :stroke "#7f7f7f"}])
+
+    :else
+    (html
+     [:line {:key position :x1 position :x2 position :y1 15 :y2 padding :stroke "#7f7f7f"}])))
+
+(defn v-line
+  [position value]
+  (cond
+    (< (mod value big-ticks-mod) step-size)
+    (html
+     [:g {:key position}
+      [:line {:y1 position
+              :y2 position
+              :x1 5
+              :x2 padding
+              :stroke "#7f7f7f"}]
+      [:text {:y position
+              :x 5
+              :transform (str/format "rotate(90 0 %s)" position)
+              :fill "#7f7f7f"
+              :style {:font-size "12px"}}
+       value]])
+
+    (< (mod value mid-ticks-mod) step-size)
+    (html
+     [:line {:key position
+             :y1 position
+             :y2 position
+             :x1 10
+             :x2 padding
+             :stroke "#7f7f7f"}])
+
+    :else
+    (html
+     [:line {:key position
+             :y1 position
+             :y2 position
+             :x1 15
+             :x2 padding
+             :stroke "#7f7f7f"}])))
+
 (defn h-rule-render
   [own]
-  (let [left (or (rum/react wb/left-scroll) 0)
-        width wb/viewport-width
-        start-width wb/document-start-x
-        padding 20
-        zoom 1
-        big-ticks-mod (/ 100 zoom)
-        mid-ticks-mod (/ 50 zoom)
-        step-size 10
+  (let [width wb/viewport-width
         ticks (concat (range (- padding start-width) 0 step-size)
-                      (range 0 (- width start-width padding) step-size))
-        lines (fn [position value padding]
-                (cond
-                  (< (mod value big-ticks-mod) step-size)
-                  (do
-                    (html
-                     [:g {:key position}
-                      [:line {:x1 position :x2 position :y1 5 :y2 padding :stroke "#7f7f7f"}]
-                      [:text {:x (+ position 2) :y 13 :fill "#7f7f7f" :style {:font-size "12px"}} value]]))
-                  (< (mod value mid-ticks-mod) step-size)
-                  (html
-                   [:line {:key position :x1 position :x2 position :y1 10 :y2 padding :stroke "#7f7f7f"}])
-                  :else
-                  (html
-                   [:line {:key position :x1 position :x2 position :y1 15 :y2 padding :stroke "#7f7f7f"}])))]
+                      (range 0 (- width start-width padding) step-size))]
     (html
      [:svg.horizontal-rule
       {:width 3000
        :height 3000
-       :style {:left (str (- (- left 50)) "px")}}
+       :style {:left (str (- (- scroll-left wb/document-start-x)) "px")}}
       [:g
        [:rect {:x padding :y 0 :width width :height padding :fill "#bab7b7"}]
        [:rect {:x 0 :y 0 :width padding :height padding :fill "#bab7b7"}]]
       [:g
-       (for [tick ticks]
-         (let [position (* (+ tick start-width) zoom)]
-           (lines position tick padding)))]])))
+       (for [tick ticks
+             :let [pos (* (+ tick start-width) zoom)]]
+         (h-line pos tick))]])))
 
 (def h-rule
   (util/component
@@ -57,40 +99,18 @@
 (defn v-rule-render
   [own]
   (let [height wb/viewport-height
-        start-height wb/document-start-y
-        top (or (rum/react wb/top-scroll) 0)
-        zoom 1
-        padding 20
-        big-ticks-mod (/ 100 zoom)
-        mid-ticks-mod (/ 50 zoom)
-        step-size 10
         ticks (concat (range (- padding start-height) 0 step-size)
-                      (range 0 (- height start-height padding) step-size))
-        lines (fn [position value padding]
-                (cond
-                  (< (mod value big-ticks-mod) step-size)
-                  (html
-                   [:g {:key position}
-                    [:line {:y1 position :y2 position :x1 5 :x2 padding :stroke "#7f7f7f"}]
-                    [:text {:y position :x 5 :transform (str/format "rotate(90 0 %s)" position) :fill "#7f7f7f" :style {:font-size "12px"}} value]])
-
-                  (< (mod value mid-ticks-mod) step-size)
-                  (html
-                   [:line {:key position :y1 position :y2 position :x1 10 :x2 padding :stroke "#7f7f7f"}])
-
-                  :else
-                  (html
-                   [:line {:key position :y1 position :y2 position :x1 15 :x2 padding :stroke "#7f7f7f"}])))]
+                      (range 0 (- height start-height padding) step-size))]
     (html
      [:svg.vertical-rule
       {:width 3000
        :height 3000
-       :style {:top (str (- top) "px")}}
+       :style {:top (str (- 0 scroll-top) "px")}}
       [:g
        [:rect {:x 0 :y padding :height height :width padding :fill "#bab7b7"}]
-       (for [tick ticks]
-         (let [position (* (+ tick start-height) zoom)]
-           (lines position tick padding)))]])))
+       (for [tick ticks
+             :let [pos (* (+ tick start-height) zoom)]]
+         (v-line pos tick))]])))
 
 (def v-rule
   (util/component
diff --git a/frontend/uxbox/ui/workspace/workarea.cljs b/frontend/uxbox/ui/workspace/workarea.cljs
index 7ec38374b..0b7fba68b 100644
--- a/frontend/uxbox/ui/workspace/workarea.cljs
+++ b/frontend/uxbox/ui/workspace/workarea.cljs
@@ -42,7 +42,7 @@
                      :class (when drawing? "drawing")}
       [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
        (canvas)
-       (grid zoom)]])))
+       #_(grid zoom)]])))
 
 (def viewport
   (util/component