diff --git a/frontend/resources/styles/common/dependencies/mixin.scss b/frontend/resources/styles/common/dependencies/mixin.scss
index 294a82203..0daf5ff32 100644
--- a/frontend/resources/styles/common/dependencies/mixin.scss
+++ b/frontend/resources/styles/common/dependencies/mixin.scss
@@ -8,21 +8,23 @@
 /// This mixin allows you  to add styles to a specific Media query inside the style selector specifying which Breaking Point you want to choose.
 /// @group Mixins
 /// @parameter $point - This parameter decide which one of Breaking Point you want to use: "bp-desktop" (Desktop), "bp-tablet" (Tablet) and "bp-mobile" (Mobile).
-@mixin bp($point) {
-  $bp-mobile: "(min-width: 720px)";
-  $bp-tablet: "(min-width: 1020px)";
-  $bp-desktop: "(min-width: 1366px)";
+$bp-min-720: "(min-width: 720px)";
+$bp-min-1020: "(min-width: 1020px)";
+$bp-min-1366: "(min-width: 1366px)";
+$bp-max-1366: "(max-width: 1366px)";
+$bp-min-2556: "(min-width: 2556px)";
 
+@mixin bp($point) {
   @if $point == mobile {
-    @media #{$bp-desktop} {
+    @media #{$bp-min-720} {
       @content;
     }
   } @else if $point == tablet {
-    @media #{$bp-tablet} {
+    @media #{$bp-min-1020} {
       @content;
     }
   } @else if $point == desktop {
-    @media #{$bp-mobile} {
+    @media #{$bp-min-1366} {
       @content;
     }
   }
diff --git a/frontend/resources/styles/main/layouts/main-layout.scss b/frontend/resources/styles/main/layouts/main-layout.scss
index bc4ffcb33..cdcd7f22b 100644
--- a/frontend/resources/styles/main/layouts/main-layout.scss
+++ b/frontend/resources/styles/main/layouts/main-layout.scss
@@ -14,17 +14,19 @@
   background-color: $color-white;
   display: grid;
   grid-template-rows: 50px 1fr;
-  grid-template-columns: 40px 220px 1fr;
+  grid-template-columns: 40px 256px 1fr;
   height: 100vh;
 
   .dashboard-sidebar {
     grid-row: 1 / span 2;
     grid-column: 1 / span 2;
+    padding: 1rem;
     // overflow: hidden;
   }
 
   .dashboard-content {
     grid-row: 1 / span 2;
+    padding: 1rem 1rem 0 0;
   }
 }
 
diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss
index b286fcec3..f2ef5fbea 100644
--- a/frontend/resources/styles/main/partials/dashboard-grid.scss
+++ b/frontend/resources/styles/main/partials/dashboard-grid.scss
@@ -7,39 +7,37 @@
 .dashboard-grid {
   font-size: $fs14;
   height: 100%;
+  overflow: hidden;
 
   .grid-row {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
     width: 100%;
-    align-content: flex-start;
-
-    &.no-wrap {
-      flex-wrap: nowrap;
-    }
   }
 
   .grid-item {
     align-items: center;
-    border: 2px solid lighten($color-gray-20, 13%);
-    border-radius: $br-small;
     cursor: pointer;
     display: flex;
     flex-direction: column;
-    flex-shrink: 0;
-    height: 200px;
-    margin: $size-4;
-    max-width: 260px;
-    min-width: 260px;
+    flex: 1 0 260px;
+    height: 230px;
+    margin: $size-3 $size-4 $size-4 $size-2;
     position: relative;
     text-align: center;
-    width: 18%;
+    @media #{$bp-max-1366} {
+      height: 200px;
+      flex: 1 0 230px;
+    }
 
     &:hover {
-      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+      .grid-item-th {
+        border: 2px solid $color-primary;
+      }
     }
 
     .grid-item-th {
+      border-radius: $br-small;
+      border: 2px solid lighten($color-gray-20, 15%);
       text-align: initial;
     }
 
@@ -94,6 +92,7 @@
     }
 
     .item-info {
+      color: $color-gray-30;
       display: flex;
       flex-direction: column;
       padding: $size-2;
@@ -103,7 +102,7 @@
       h3 {
         border: 1px solid transparent;
         color: $color-gray-60;
-        font-size: $fs14;
+        font-size: $fs16;
         font-weight: 400;
         overflow: hidden;
         padding: 0;
@@ -116,8 +115,8 @@
       }
 
       span.date {
-        color: $color-gray-20;
-        font-size: $fs12;
+        color: $color-gray-30;
+        font-size: $fs14;
         overflow: hidden;
         text-overflow: ellipsis;
         width: 100%;
@@ -181,7 +180,9 @@
       }
 
       &.selected {
-        border: 2px solid $color-primary;
+        .grid-item-th {
+          border: 2px solid $color-primary;
+        }
       }
 
       .project-th-actions {
@@ -295,6 +296,7 @@
     border-top-left-radius: $br-small;
     border-top-right-radius: $br-small;
     height: 70%;
+    max-height: 160px;
     overflow: hidden;
     position: relative;
     width: 100%;
diff --git a/frontend/resources/styles/main/partials/dashboard-header.scss b/frontend/resources/styles/main/partials/dashboard-header.scss
index 911e67c00..cdc98d2fa 100644
--- a/frontend/resources/styles/main/partials/dashboard-header.scss
+++ b/frontend/resources/styles/main/partials/dashboard-header.scss
@@ -80,7 +80,7 @@
       color: $color-black;
       display: flex;
       flex-shrink: 0;
-      font-size: $fs18;
+      font-size: $fs22;
       font-weight: 600;
       z-index: 10;
     }
diff --git a/frontend/resources/styles/main/partials/dashboard-sidebar.scss b/frontend/resources/styles/main/partials/dashboard-sidebar.scss
index 2df415293..fa571cd84 100644
--- a/frontend/resources/styles/main/partials/dashboard-sidebar.scss
+++ b/frontend/resources/styles/main/partials/dashboard-sidebar.scss
@@ -403,9 +403,8 @@
     @include animation(0, 0.2s, fadeInUp);
 
     li {
-      height: 32px;
       font-size: $fs14;
-      padding: 5px 10px;
+      padding: $size-2 $size-4;
 
       svg {
         fill: $color-gray-20;
diff --git a/frontend/resources/styles/main/partials/dashboard.scss b/frontend/resources/styles/main/partials/dashboard.scss
index 338385b79..5c6841dc1 100644
--- a/frontend/resources/styles/main/partials/dashboard.scss
+++ b/frontend/resources/styles/main/partials/dashboard.scss
@@ -13,13 +13,17 @@
   overflow-y: auto;
   user-select: none;
 
+  &.no-bg {
+    background-color: transparent;
+  }
+
   &.search {
     margin-top: 10px;
   }
 }
 
 .dashboard-project-row {
-  margin-bottom: $size-4;
+  margin-bottom: $size-5;
 
   .project {
     align-items: center;
@@ -27,11 +31,41 @@
     border-radius: $br-small;
     display: flex;
     flex-direction: row;
-    margin-left: $size-4;
+    justify-content: space-between;
+    align-items: center;
     margin-top: $size-4;
     padding: $size-1 $size-1 $size-1 $size-2;
-    width: fit-content;
+    width: 100%;
     height: 40px;
+    .project-name-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      min-height: 32px;
+    }
+    .show-more {
+      align-items: center;
+      color: $color-gray-30;
+      display: flex;
+      font-size: $fs14;
+      justify-content: space-between;
+      cursor: pointer;
+      .placeholder-icon {
+        transform: rotate(-90deg);
+        margin-left: 10px;
+        svg {
+          height: 14px;
+          width: 14px;
+          fill: $color-gray-30;
+        }
+      }
+      &:hover {
+        color: $color-primary-dark;
+        svg {
+          fill: $color-primary-dark;
+        }
+      }
+    }
 
     .btn-secondary {
       border: none;
@@ -40,9 +74,9 @@
 
     h2 {
       cursor: pointer;
-      font-size: $fs14;
+      font-size: $fs18;
       line-height: 1rem;
-      font-weight: 500;
+      font-weight: 600;
       color: $color-black;
       margin-right: $size-4;
     }
@@ -52,18 +86,27 @@
     }
 
     .info {
-      font-size: $fs14;
+      font-size: $fs16;
       line-height: 1rem;
       font-weight: unset;
       color: $color-gray-30;
     }
 
+    .project-actions {
+      display: none;
+      margin-left: $size-6;
+
+      .btn-small {
+        padding: $size-2;
+        margin: 0 $size-2;
+      }
+    }
+
     .pin-icon {
       cursor: pointer;
       display: flex;
       align-items: center;
-      margin-left: 40px;
-      margin-right: 10px;
+      margin-right: 14px;
       svg {
         width: 15px;
         height: 15px;
@@ -77,10 +120,17 @@
       }
     }
   }
+  &:hover {
+    .project-actions {
+      display: flex;
+    }
+  }
 }
 
 .recent-files-row-title-info {
-  font-size: $fs14;
+  color: $color-gray-30;
+  line-height: 1rem;
+  font-size: $fs16;
 }
 
 .dashboard-table {
diff --git a/frontend/src/app/main/ui/dashboard/files.cljs b/frontend/src/app/main/ui/dashboard/files.cljs
index 251be9a69..c6fc077c2 100644
--- a/frontend/src/app/main/ui/dashboard/files.cljs
+++ b/frontend/src/app/main/ui/dashboard/files.cljs
@@ -121,10 +121,9 @@
                  (dd/clear-selected-files))))
 
     [:*
-     [:& header {:team team 
-                 :project project
+     [:& header {:team team :project project 
                  :on-create-clicked on-create-clicked}]
-     [:section.dashboard-container
+     [:section.dashboard-container.no-bg
       [:& grid {:project project
                 :files files
                 :on-create-clicked on-create-clicked
diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs
index de1ac3b5c..3682220fd 100644
--- a/frontend/src/app/main/ui/dashboard/grid.cljs
+++ b/frontend/src/app/main/ui/dashboard/grid.cljs
@@ -7,7 +7,6 @@
 (ns app.main.ui.dashboard.grid
   (:require
    [app.common.logging :as log]
-   [app.common.math :as mth]
    [app.main.data.dashboard :as dd]
    [app.main.data.messages :as dm]
    [app.main.features :as features]
@@ -26,7 +25,6 @@
    [app.util.keyboard :as kbd]
    [app.util.time :as dt]
    [app.util.timers :as ts]
-   [app.util.webapi :as wapi]
    [beicon.core :as rx]
    [rumext.alpha :as mf]))
 
@@ -280,44 +278,13 @@
                               :project project}])]))
 
 (mf/defc line-grid-row
-  [{:keys [files selected-files on-load-more dragging? origin] :as props}]
-  (let [rowref           (mf/use-ref)
-
-        width            (mf/use-state nil)
-
-        itemsize       290
-        ratio          (if (some? @width) (/ @width itemsize) 0)
-        nitems         (mth/floor ratio)
-        limit          (min 10 ;; Configuration in backend to return recent files
-                            (if (and (some? @width)
-                                     (> (* itemsize (count files)) @width)
-                                     (< (- ratio nitems) 0.51))
-                              (dec nitems) ;; Leave space for the "show all" block
-                              nitems))
-
-        limit          (if dragging?
+  [{:keys [files selected-files dragging? limit] :as props}]
+  (let [limit          (if dragging?
                          (dec limit)
-                         limit)
+                         limit)]
 
-        limit          (max 1 limit)]
-
-    (mf/use-effect
-      (fn []
-        (let [node (mf/ref-val rowref)
-              mnt? (volatile! true)
-              sub  (->> (wapi/observe-resize node)
-                        (rx/observe-on :af)
-                        (rx/subs (fn [entries]
-                                   (let [row (first entries)
-                                         row-rect (.-contentRect ^js row)
-                                         row-width (.-width ^js row-rect)]
-                                     (when @mnt?
-                                       (reset! width row-width))))))]
-          (fn []
-            (vreset! mnt? false)
-            (rx/dispose! sub)))))
-
-    [:div.grid-row.no-wrap {:ref rowref}
+    [:div.grid-row.no-wrap
+     {:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
      (when dragging?
        [:div.grid-item])
      (for [item (take limit files)]
@@ -326,17 +293,10 @@
          :file item
          :selected-files selected-files
          :key (:id item)
-         :navigate? false
-         :origin origin}])
-     (when (and (> limit 0)
-                (> (count files) limit))
-       [:div.grid-item.placeholder {:on-click on-load-more}
-        [:div.placeholder-icon i/arrow-down]
-        [:div.placeholder-label
-         (tr "dashboard.show-all-files")]])]))
+         :navigate? false}])]))
 
 (mf/defc line-grid
-  [{:keys [project team files on-load-more on-create-clicked origin] :as props}]
+  [{:keys [project team files limit on-create-clicked] :as props}]
   (let [dragging?        (mf/use-state false)
         project-id       (:id project)
         team-id          (:id team)
@@ -419,9 +379,8 @@
        [:& line-grid-row {:files files
                           :team-id team-id
                           :selected-files selected-files
-                          :on-load-more on-load-more
                           :dragging? @dragging?
-                          :origin origin}]
+                          :limit limit}]
 
        :else
        [:& empty-placeholder {:dragging? @dragging?
diff --git a/frontend/src/app/main/ui/dashboard/libraries.cljs b/frontend/src/app/main/ui/dashboard/libraries.cljs
index df8e838fd..be8b19278 100644
--- a/frontend/src/app/main/ui/dashboard/libraries.cljs
+++ b/frontend/src/app/main/ui/dashboard/libraries.cljs
@@ -40,7 +40,7 @@
      [:header.dashboard-header
       [:div.dashboard-title
        [:h1 (tr "dashboard.libraries-title")]]]
-     [:section.dashboard-container
+     [:section.dashboard-container.no-bg
       [:& grid {:files files
                 :project default-project
                 :origin :libraries}]]]))
diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs
index 1622eb3f4..90c1ccfab 100644
--- a/frontend/src/app/main/ui/dashboard/projects.cljs
+++ b/frontend/src/app/main/ui/dashboard/projects.cljs
@@ -6,6 +6,7 @@
 
 (ns app.main.ui.dashboard.projects
   (:require
+   [app.common.math :as mth]
    [app.main.data.dashboard :as dd]
    [app.main.data.events :as ev]
    [app.main.refs :as refs]
@@ -18,6 +19,8 @@
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.router :as rt]
    [app.util.time :as dt]
+   [app.util.webapi :as wapi]
+   [beicon.core :as rx]
    [cuerdas.core :as str]
    [okulary.core :as l]
    [rumext.alpha :as mf]))
@@ -52,6 +55,16 @@
          #(st/emit! (rt/nav :dashboard-files {:team-id (:team-id project)
                                               :project-id (:id project)})))
 
+        width            (mf/use-state nil)
+        rowref           (mf/use-ref)
+        itemsize       (if (>= @width 1030)
+                         280
+                         230)
+
+        ratio          (if (some? @width) (/ @width itemsize) 0)
+        nitems         (mth/floor ratio)
+        limit          (min 10 nitems)
+        limit          (max 1 limit)
         toggle-pin
         (mf/use-callback
          (mf/deps project)
@@ -107,54 +120,76 @@
                      (dd/fetch-recent-files (:id team))
                      (dd/clear-selected-files))))]
 
+    (mf/use-effect
+     (fn []
+       (let [node (mf/ref-val rowref)
+             mnt? (volatile! true)
+             sub  (->> (wapi/observe-resize node)
+                       (rx/observe-on :af)
+                       (rx/subs (fn [entries]
+                                  (let [row (first entries)
+                                        row-rect (.-contentRect ^js row)
+                                        row-width (.-width ^js row-rect)]
+                                    (when @mnt?
+                                      (reset! width row-width))))))]
+         (fn []
+           (vreset! mnt? false)
+           (rx/dispose! sub)))))
     [:div.dashboard-project-row {:class (when first? "first")}
-     [:div.project
-      (if (:edition? @local)
-        [:& inline-edition {:content (:name project)
-                            :on-end on-edit}]
-        [:h2 {:on-click on-nav
-              :on-context-menu on-menu-click}
-         (if (:is-default project)
-           (tr "labels.drafts")
-           (:name project))])
+     [:div.project {:ref rowref}
+      [:div.project-name-wrapper
+       (if (:edition? @local)
+         [:& inline-edition {:content (:name project)
+                             :on-end on-edit}]
+         [:h2 {:on-click on-nav
+               :on-context-menu on-menu-click}
+          (if (:is-default project)
+            (tr "labels.drafts")
+            (:name project))])
 
-      [:& project-menu {:project project
-                        :show? (:menu-open @local)
-                        :left (:x (:menu-pos @local))
-                        :top (:y (:menu-pos @local))
-                        :on-edit on-edit-open
-                        :on-menu-close on-menu-close
-                        :on-import on-import}]
+       [:& project-menu {:project project
+                         :show? (:menu-open @local)
+                         :left (:x (:menu-pos @local))
+                         :top (:y (:menu-pos @local))
+                         :on-edit on-edit-open
+                         :on-menu-close on-menu-close
+                         :on-import on-import}]
 
-      [:span.info (str file-count " files")]
-      (when (> file-count 0)
-        (let [time (-> (:modified-at project)
-                       (dt/timeago {:locale locale}))]
-          [:span.recent-files-row-title-info (str ", " time)]))
+       [:span.info (str file-count " files")]
+       (when (> file-count 0)
+         (let [time (-> (:modified-at project)
+                        (dt/timeago {:locale locale}))]
+           [:span.recent-files-row-title-info (str ", " time)]))
+       [:div.project-actions
+        (when-not (:is-default project)
+          [:span.pin-icon.tooltip.tooltip-bottom
+           {:class (when (:is-pinned project) "active")
+            :on-click toggle-pin :alt (tr "dashboard.pin-unpin")}
+           (if (:is-pinned project)
+             i/pin-fill
+             i/pin)])
 
-      (when-not (:is-default project)
-        [:span.pin-icon.tooltip.tooltip-bottom
-         {:class (when (:is-pinned project) "active")
-          :on-click toggle-pin :alt (tr "dashboard.pin-unpin")}
-         (if (:is-pinned project)
-           i/pin-fill
-           i/pin)])
+        [:a.btn-secondary.btn-small.tooltip.tooltip-bottom
+         {:on-click create-file :alt (tr "dashboard.new-file") :data-test "project-new-file"}
+         i/close]
 
-      [:a.btn-secondary.btn-small.tooltip.tooltip-bottom
-       {:on-click (partial create-file "dashboard:folder") :alt (tr "dashboard.new-file") :data-test "project-new-file"}
-       i/close]
-
-      [:a.btn-secondary.btn-small.tooltip.tooltip-bottom
-       {:on-click on-menu-click :alt (tr "dashboard.options") :data-test "project-options"}
-       i/actions]]
+        [:a.btn-secondary.btn-small.tooltip.tooltip-bottom
+         {:on-click on-menu-click :alt (tr "dashboard.options") :data-test "project-options"}
+         i/actions]]]
+      (when (and (> limit 0)
+                 (> file-count limit))
+        [:div.show-more {:on-click on-nav}
+         [:div.placeholder-label
+          (tr "dashboard.show-all-files")]
+         [:div.placeholder-icon i/arrow-down]])]
 
      [:& line-grid
       {:project project
        :team team
-       :on-load-more on-nav
        :files files
        :on-create-clicked (partial create-file "dashboard:empty-folder-placeholder")
-       :origin :project}]]))
+       :limit limit}]]))
+
 
 (def recent-files-ref
   (l/derived :dashboard-recent-files st/state))
@@ -183,7 +218,7 @@
     (when (seq projects)
       [:*
        [:& header]
-       [:section.dashboard-container
+       [:section.dashboard-container.no-bg
         (for [{:keys [id] :as project} projects]
           (let [files (when recent-map
                         (->> (vals recent-map)
diff --git a/frontend/src/app/main/ui/dashboard/search.cljs b/frontend/src/app/main/ui/dashboard/search.cljs
index ccf4419c4..ff5dc5593 100644
--- a/frontend/src/app/main/ui/dashboard/search.cljs
+++ b/frontend/src/app/main/ui/dashboard/search.cljs
@@ -39,7 +39,7 @@
       [:div.dashboard-title
        [:h1 (tr "dashboard.title-search")]]]
 
-     [:section.dashboard-container.search
+     [:section.dashboard-container.search.no-bg
       (cond
         (empty? search-term)
         [:div.grid-empty-placeholder.search