diff --git a/frontend/uxbox/ui/elements.cljs b/frontend/uxbox/ui/elements.cljs
index 6038f2cf3f..d2e9f7da5c 100644
--- a/frontend/uxbox/ui/elements.cljs
+++ b/frontend/uxbox/ui/elements.cljs
@@ -26,69 +26,82 @@
         [:h2 "Library name"]
         [:div.dashboard-grid-content
           [:div.grid-item.project-th
+            [:span.grid-item-image icons/image]
             [:h3 "Custom element"]
             [:div.project-th-actions
-              [:div.project-th-icon icons/pencil]
+              [:div.project-th-icon.edit icons/pencil]
               [:div.project-th-icon.delete icons/trash]]]
           [:div.grid-item.project-th
+            [:span.grid-item-image icons/image]
             [:h3 "Custom element"]
             [:div.project-th-actions
-              [:div.project-th-icon icons/pencil]
+              [:div.project-th-icon.edit icons/pencil]
               [:div.project-th-icon.delete icons/trash]]]
           [:div.grid-item.project-th
+            [:span.grid-item-image icons/image]
             [:h3 "Custom element"]
             [:div.project-th-actions
-              [:div.project-th-icon icons/pencil]
+              [:div.project-th-icon.edit icons/pencil]
               [:div.project-th-icon.delete icons/trash]]]
           [:div.grid-item.project-th
+            [:span.grid-item-image icons/image]
             [:h3 "Custom element"]
             [:div.project-th-actions
-              [:div.project-th-icon icons/pencil]
+              [:div.project-th-icon.edit icons/pencil]
               [:div.project-th-icon.delete icons/trash]]]
           [:div.grid-item.project-th
+            [:span.grid-item-image icons/image]
             [:h3 "Custom element"]
             [:div.project-th-actions
-              [:div.project-th-icon icons/pencil]
+              [:div.project-th-icon.edit icons/pencil]
               [:div.project-th-icon.delete icons/trash]]]
           [:div.grid-item.project-th
+            [:span.grid-item-image icons/image]
             [:h3 "Custom element"]
             [:div.project-th-actions
-              [:div.project-th-icon icons/pencil]
+              [:div.project-th-icon.edit icons/pencil]
               [:div.project-th-icon.delete icons/trash]]]
           [:div.grid-item.project-th
+            [:span.grid-item-image icons/image]
             [:h3 "Custom element"]
             [:div.project-th-actions
-              [:div.project-th-icon icons/pencil]
+              [:div.project-th-icon.edit icons/pencil]
               [:div.project-th-icon.delete icons/trash]]]
           [:div.grid-item.project-th
+            [:span.grid-item-image icons/image]
             [:h3 "Custom element"]
             [:div.project-th-actions
-              [:div.project-th-icon icons/pencil]
+              [:div.project-th-icon.edit icons/pencil]
               [:div.project-th-icon.delete icons/trash]]]
           [:div.grid-item.project-th
+            [:span.grid-item-image icons/image]
             [:h3 "Custom element"]
             [:div.project-th-actions
-              [:div.project-th-icon icons/pencil]
+              [:div.project-th-icon.edit icons/pencil]
               [:div.project-th-icon.delete icons/trash]]]
           [:div.grid-item.project-th
+            [:span.grid-item-image icons/image]
             [:h3 "Custom element"]
             [:div.project-th-actions
-              [:div.project-th-icon icons/pencil]
+              [:div.project-th-icon.edit icons/pencil]
               [:div.project-th-icon.delete icons/trash]]]
           [:div.grid-item.project-th
+            [:span.grid-item-image icons/image]
             [:h3 "Custom element"]
             [:div.project-th-actions
-              [:div.project-th-icon icons/pencil]
+              [:div.project-th-icon.edit icons/pencil]
               [:div.project-th-icon.delete icons/trash]]]
           [:div.grid-item.project-th
+            [:span.grid-item-image icons/image]
             [:h3 "Custom element"]
             [:div.project-th-actions
-              [:div.project-th-icon icons/pencil]
+              [:div.project-th-icon.edit icons/pencil]
               [:div.project-th-icon.delete icons/trash]]]
           [:div.grid-item.project-th
+            [:span.grid-item-image icons/image]
             [:h3 "Custom element"]
             [:div.project-th-actions
-              [:div.project-th-icon icons/pencil]
+              [:div.project-th-icon.edit icons/pencil]
               [:div.project-th-icon.delete icons/trash]]]
         ]
       ]
diff --git a/resources/public/styles/main.scss b/resources/public/styles/main.scss
index 72ea0a9f86..d2f83af169 100644
--- a/resources/public/styles/main.scss
+++ b/resources/public/styles/main.scss
@@ -40,5 +40,6 @@
 @import 'partials/dashboard-bar';
 @import 'partials/dashboard-grid';
 @import 'partials/activity-bar';
+@import 'partials/library-bar';
 @import 'partials/lightbox';
 @import 'partials/color-palette';
diff --git a/resources/public/styles/partials/dashboard-grid.scss b/resources/public/styles/partials/dashboard-grid.scss
index 03a5e3da3a..d44f30a9ef 100644
--- a/resources/public/styles/partials/dashboard-grid.scss
+++ b/resources/public/styles/partials/dashboard-grid.scss
@@ -26,6 +26,7 @@
       flex-direction: column;
       flex-shrink: 0;
       height: 150px;
+      justify-content: center;
       margin: $medium $medium 0 $medium;
       padding: $medium;
       position: relative;
@@ -119,12 +120,28 @@
 
             }
 
+            &.edit {
+
+              &:hover {
+                transform: scale(1.4);
+              }
+
+            }
+
           }
 
         }
 
       }
 
+      .grid-item-image {
+        svg {
+          height: 20%;
+          max-width: 120px;
+          width: 40%;
+        }
+      }
+
     }
 
   }
diff --git a/resources/public/styles/partials/library-bar.scss b/resources/public/styles/partials/library-bar.scss
new file mode 100644
index 0000000000..bbc5764f65
--- /dev/null
+++ b/resources/public/styles/partials/library-bar.scss
@@ -0,0 +1,75 @@
+.activity-bar {
+  background-color: $color-white;
+  bottom: 0;
+  height: 100%;
+  position: fixed;
+  right: 0;
+  width: 250px;
+
+  .activity-bar-inside {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    padding-top: 70px;
+  }
+
+  h4 {
+    color: $color-gray-dark;
+    font-size: $fs16;
+    font-weight: bold;
+    margin-bottom: $x-small;
+  }
+
+  .date-ribbon {
+    background-color: lighten($color-gray-light, 12%);
+    box-sizing: border-box;
+    color: $color-white;
+    font-size: $fs12;
+    font-weight: bold;
+    padding: 2px;
+    text-align: center;
+    width: 100%;
+  }
+
+  .activity-input {
+    border-bottom: 1px solid $color-gray-lighter;
+    box-sizing: border-box;
+    display: flex;
+    font-size: $fs13;
+    padding: $small;
+    width: 100%;
+
+    img.activity-author {
+      border-radius: 50%;
+      flex-shrink: 0;
+      height: 30px;
+      margin-right: $medium;
+      width: 30px;
+    }
+
+    .activity-content {
+      display: flex;
+      flex-direction: column;
+
+      .activity-project {
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+
+        a {
+          font-weight: bold;
+          margin: 0 3px;
+        }
+
+      }
+
+      .activity-time {
+        color: $color-gray-light;
+        font-size: $fs11;
+        font-style: italic;
+      }
+    }
+  }
+
+}