diff --git a/frontend/uxbox/ui/dashboard.cljs b/frontend/uxbox/ui/dashboard.cljs
index 651d7cecc1..fd8509d384 100644
--- a/frontend/uxbox/ui/dashboard.cljs
+++ b/frontend/uxbox/ui/dashboard.cljs
@@ -248,12 +248,11 @@
       (html
        [:section.dashboard-grid
         [:h2 "Your projects"]
-        [:div.dashboard-grid-content
          [:div.dashboard-grid-content
           [:div.grid-item.add-project {:on-click on-click}
            [:span "+ New project"]]
           (for [item (vals (:projects-by-id state))]
-            (rum/with-key (project-item item) (:id item)))]]]))))
+            (rum/with-key (project-item item) (:id item)))]]))))
 
 (def grid
   (util/component
diff --git a/frontend/uxbox/ui/elements.cljs b/frontend/uxbox/ui/elements.cljs
index 5bc1c9f056..94cfaab7b2 100644
--- a/frontend/uxbox/ui/elements.cljs
+++ b/frontend/uxbox/ui/elements.cljs
@@ -2,6 +2,8 @@
   (:require [sablono.core :as html :refer-macros [html]]
             [rum.core :as rum]
             [uxbox.ui.header :as ui.header]
+            [uxbox.ui.icons.dashboard :as icons]
+            [uxbox.ui.icons :as i]
             [uxbox.util :as util]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -13,7 +15,86 @@
   (html
    [:main.dashboard-main
     (ui.header/header)
-    [:p "FOOO"]]))
+    [:section.dashboard-content
+      [:section#dashboard-bar.dashboard-bar.library-bar
+        [:div.dashboard-info
+          [:span.dashboard-projects "20 elements"]
+          [:span "Sort by"]
+            #_(project-sort-selector (atom :name))]
+          [:div.dashboard-search
+            icons/search]]
+      [:section.dashboard-grid.library
+        [:h2 "Library name"]
+        [:div.dashboard-grid-content
+          [:div.grid-item.project-th
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon icons/search]
+              [:div.project-th-icon.delete icons/trash]]]
+          [:div.grid-item.project-th
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon icons/search]
+              [:div.project-th-icon.delete icons/trash]]]
+          [:div.grid-item.project-th
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon icons/search]
+              [:div.project-th-icon.delete icons/trash]]]
+          [:div.grid-item.project-th
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon icons/search]
+              [:div.project-th-icon.delete icons/trash]]]
+          [:div.grid-item.project-th
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon icons/search]
+              [:div.project-th-icon.delete icons/trash]]]
+          [:div.grid-item.project-th
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon icons/search]
+              [:div.project-th-icon.delete icons/trash]]]
+          [:div.grid-item.project-th
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon icons/search]
+              [:div.project-th-icon.delete icons/trash]]]
+          [:div.grid-item.project-th
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon icons/search]
+              [:div.project-th-icon.delete icons/trash]]]
+          [:div.grid-item.project-th
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon icons/search]
+              [:div.project-th-icon.delete icons/trash]]]
+          [:div.grid-item.project-th
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon icons/search]
+              [:div.project-th-icon.delete icons/trash]]]
+          [:div.grid-item.project-th
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon icons/search]
+              [:div.project-th-icon.delete icons/trash]]]
+          [:div.grid-item.project-th
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon icons/search]
+              [:div.project-th-icon.delete icons/trash]]]
+          [:div.grid-item.project-th
+            [:h3 "Custom element"]
+            [:div.project-th-actions
+              [:div.project-th-icon icons/search]
+              [:div.project-th-icon.delete icons/trash]]]
+        ]
+      ]
+    ]
+   ]))
 
 (def elements
   (util/component
diff --git a/frontend/uxbox/ui/header.cljs b/frontend/uxbox/ui/header.cljs
index f5c9f8793c..fa952167d2 100644
--- a/frontend/uxbox/ui/header.cljs
+++ b/frontend/uxbox/ui/header.cljs
@@ -15,13 +15,13 @@
      (nav/link "/" i/logo)]
     [:ul.main-nav
      [:li
-      [:a {:href "/"} "PROJECTS"]]
+      [:a {:href "/#/"} "PROJECTS"]]
      [:li.current
-      [:a {:href "/elements"} "ELEMENTS"]]
+      [:a {:href "/#/elements"} "ELEMENTS"]]
      [:li
-      [:a {:href "/icons"} "ICONS"]]
+      [:a {:href "/#/icons"} "ICONS"]]
      [:li
-      [:a {:href "/colors"} "COLORS"]]]
+      [:a {:href "/#/colors"} "COLORS"]]]
     (ui.u/user)]))
 
 (def ^:static header
diff --git a/resources/public/styles/base.scss b/resources/public/styles/base.scss
index f1e1487b8e..8b27915f3f 100644
--- a/resources/public/styles/base.scss
+++ b/resources/public/styles/base.scss
@@ -5,7 +5,6 @@ body {
   flex-direction: column;
   font-family: "sourcesanspro", sans-serif;
   height: 100%;
-  overflow: hidden;
   user-select: none;
 }
 
diff --git a/resources/public/styles/layouts/main-layout.scss b/resources/public/styles/layouts/main-layout.scss
index a99e192029..657c5c3c6e 100644
--- a/resources/public/styles/layouts/main-layout.scss
+++ b/resources/public/styles/layouts/main-layout.scss
@@ -3,13 +3,6 @@
   height: 100%;
   position: relative;
 
-  .dashboard-content {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-  }
-
   .workspace-content {
     display: flex;
     height: 100%;
@@ -17,3 +10,11 @@
   }
 
 }
+
+.dashboard-content {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
diff --git a/resources/public/styles/partials/dashboard-bar.scss b/resources/public/styles/partials/dashboard-bar.scss
index 193cc340ea..389b2e054d 100644
--- a/resources/public/styles/partials/dashboard-bar.scss
+++ b/resources/public/styles/partials/dashboard-bar.scss
@@ -44,4 +44,8 @@
 
   }
 
+  &.library-bar {
+    padding: $small $medium $small 230px;
+  }
+
 }
diff --git a/resources/public/styles/partials/dashboard-grid.scss b/resources/public/styles/partials/dashboard-grid.scss
index 504f757e57..a776bd9b49 100644
--- a/resources/public/styles/partials/dashboard-grid.scss
+++ b/resources/public/styles/partials/dashboard-grid.scss
@@ -11,9 +11,11 @@
     box-sizing: border-box;
     display: flex;
     flex-wrap: wrap;
-    min-height: 60vh;
+    height: 100%;
     justify-content: center;
     margin: $big;
+    max-height: 100%;
+    overflow: scroll;
     width: 100%;
 
     .grid-item {
@@ -126,5 +128,9 @@
     }
 
   }
+  // STYLES FOR LIBRARIES
+  &.library {
+    padding: $medium $medium $medium 250px;
+  }
 
 }
diff --git a/resources/public/styles/partials/main-bar.scss b/resources/public/styles/partials/main-bar.scss
index 713a0daedf..f0a360365c 100644
--- a/resources/public/styles/partials/main-bar.scss
+++ b/resources/public/styles/partials/main-bar.scss
@@ -72,10 +72,11 @@
     background-color: $color-white;
     border-radius: $br-small;
     box-sizing: border-box;
-    left: 0;
+    min-width: 150px;
     padding: 0 $small;
     position: absolute;
     top: 0;
+    right: 0;
     width: 100%;
     z-index: 12;
     @include animation(0,.2s,fadeInDown);