From c1882af124a987d67782e7c84c533ea6bd340960 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Tue, 21 Nov 2023 14:56:51 +0100
Subject: [PATCH] :lipstick: Cleaned styles for new UI

---
 .../styles/common/refactor/animations.scss    |   22 +
 .../styles/common/refactor/basic-rules.scss   |    1 -
 .../common/refactor/common-dashboard.scss     |  168 ++
 .../common/refactor/common-refactor.scss      |   17 +
 .../styles/common/refactor/fonts.scss         |    1 +
 .../styles/common/refactor/spacing.scss       |  213 +-
 .../styles/main/layouts/main-layout.scss      | 1089 ----------
 frontend/src/app/main/style.clj               |    2 +-
 frontend/src/app/main/ui/comments.scss        |    8 +
 .../src/app/main/ui/components/forms.cljs     |   36 +-
 .../src/app/main/ui/components/forms.scss     |   13 +-
 frontend/src/app/main/ui/dashboard.cljs       |    2 +-
 frontend/src/app/main/ui/dashboard.scss       |   19 +-
 .../src/app/main/ui/dashboard/comments.cljs   |  112 +-
 .../src/app/main/ui/dashboard/comments.scss   |  597 +-----
 frontend/src/app/main/ui/dashboard/files.scss |  235 +--
 frontend/src/app/main/ui/dashboard/fonts.cljs |   22 +-
 frontend/src/app/main/ui/dashboard/fonts.scss |  875 +++-----
 frontend/src/app/main/ui/dashboard/grid.cljs  |   28 +-
 frontend/src/app/main/ui/dashboard/grid.scss  |  838 ++++----
 .../app/main/ui/dashboard/inline_edition.cljs |    1 -
 .../app/main/ui/dashboard/inline_edition.scss |   53 +
 .../src/app/main/ui/dashboard/libraries.scss  |  750 +------
 .../app/main/ui/dashboard/placeholder.cljs    |    6 +-
 .../app/main/ui/dashboard/placeholder.scss    |  118 +-
 .../src/app/main/ui/dashboard/projects.cljs   |   19 +-
 .../src/app/main/ui/dashboard/projects.scss   |  856 ++------
 .../src/app/main/ui/dashboard/search.cljs     |    4 -
 .../src/app/main/ui/dashboard/search.scss     |  332 +--
 .../src/app/main/ui/dashboard/sidebar.cljs    |  239 ++-
 .../src/app/main/ui/dashboard/sidebar.scss    |  278 ++-
 frontend/src/app/main/ui/dashboard/team.cljs  |    9 +-
 frontend/src/app/main/ui/dashboard/team.scss  | 1780 ++++++-----------
 .../src/app/main/ui/dashboard/templates.scss  |  199 +-
 frontend/src/app/main/ui/settings.cljs        |    4 +
 frontend/src/app/main/ui/settings.scss        |  856 ++------
 .../app/main/ui/settings/access_tokens.cljs   |    1 -
 .../app/main/ui/settings/access_tokens.scss   | 1011 ++--------
 .../src/app/main/ui/settings/feedback.cljs    |    3 +-
 .../src/app/main/ui/settings/feedback.scss    |  701 +------
 .../src/app/main/ui/settings/options.cljs     |   12 +-
 .../src/app/main/ui/settings/options.scss     |  647 +-----
 .../src/app/main/ui/settings/password.cljs    |    5 +-
 .../src/app/main/ui/settings/password.scss    |  647 +-----
 .../src/app/main/ui/settings/profile.cljs     |   10 +-
 .../src/app/main/ui/settings/profile.scss     |  809 +++-----
 .../src/app/main/ui/settings/sidebar.cljs     |    5 -
 .../src/app/main/ui/settings/sidebar.scss     |  995 ++-------
 48 files changed, 3271 insertions(+), 11377 deletions(-)
 create mode 100644 frontend/resources/styles/common/refactor/animations.scss
 create mode 100644 frontend/resources/styles/common/refactor/common-dashboard.scss

diff --git a/frontend/resources/styles/common/refactor/animations.scss b/frontend/resources/styles/common/refactor/animations.scss
new file mode 100644
index 000000000..44cdf2ee6
--- /dev/null
+++ b/frontend/resources/styles/common/refactor/animations.scss
@@ -0,0 +1,22 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@mixin animation($delay, $duration, $animation) {
+  -webkit-animation-delay: $delay;
+  -webkit-animation-duration: $duration;
+  -webkit-animation-name: $animation;
+  -webkit-animation-fill-mode: both;
+
+  -moz-animation-delay: $delay;
+  -moz-animation-duration: $duration;
+  -moz-animation-name: $animation;
+  -moz-animation-fill-mode: both;
+
+  animation-delay: $delay;
+  animation-duration: $duration;
+  animation-name: $animation;
+  animation-fill-mode: both;
+}
diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index 0cb5aea6f..cd3b86762 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -854,5 +854,4 @@
   align-items: center;
   justify-content: normal;
   width: 100%;
-  overflow: hidden;
 }
diff --git a/frontend/resources/styles/common/refactor/common-dashboard.scss b/frontend/resources/styles/common/refactor/common-dashboard.scss
new file mode 100644
index 000000000..dc0a728e0
--- /dev/null
+++ b/frontend/resources/styles/common/refactor/common-dashboard.scss
@@ -0,0 +1,168 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-refactor" as *;
+
+.dashboard-header {
+  align-items: center;
+  display: flex;
+  height: $s-64;
+  justify-content: space-between;
+  padding: $s-4 $s-16 $s-4 $s-8;
+  position: relative;
+  user-select: none;
+
+  &.team {
+    display: grid;
+    grid-template-columns: 20% 1fr 20%;
+  }
+
+  .element-name {
+    margin-right: $s-8;
+  }
+
+  .btn-secondary {
+    flex-shrink: 0;
+    height: $s-32;
+    svg {
+      height: $s-16;
+      width: $s-16;
+    }
+  }
+
+  svg {
+    fill: $db-secondary;
+    height: $s-12;
+    margin-right: $s-4;
+    width: $s-12;
+  }
+
+  nav {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+
+    ul {
+      display: flex;
+      font-size: $fs-14;
+      justify-content: center;
+      margin: 0;
+    }
+
+    li {
+      a {
+        display: flex;
+        align-items: center;
+        flex-basis: $s-140;
+        border-bottom: $s-3 solid transparent;
+        color: $df-secondary;
+        height: $s-40;
+        padding: $s-4 $s-24;
+        font-weight: $fw400;
+        &:hover {
+          color: $db-secondary;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+
+  .dashboard-title {
+    display: flex;
+    align-items: center;
+    margin-left: $s-12;
+
+    h1 {
+      color: $df-primary;
+      display: block;
+      flex-shrink: 0;
+      font-size: $fs-24;
+      font-weight: $fw400;
+      max-width: $s-712;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      user-select: all;
+      white-space: nowrap;
+      width: 100%;
+    }
+
+    .context-menu.is-open {
+      margin-top: $s-8;
+    }
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin-left: $s-8;
+
+    svg {
+      fill: $df-secondary;
+      width: $s-16;
+      height: $s-16;
+
+      &:hover {
+        fill: $da-tertiary;
+      }
+    }
+  }
+
+  .dashboard-buttons {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .dashboard-header-actions {
+    display: flex;
+  }
+
+  .pin-icon {
+    margin: 0 $s-8 0 $s-24;
+    background-color: transparent;
+    border: none;
+    svg {
+      fill: $df-secondary;
+    }
+
+    &.active {
+      svg {
+        fill: $db-cuaternary;
+      }
+    }
+  }
+  .dashboard-header-options {
+    li {
+      a {
+        font-size: $s-16;
+        color: $df-secondary;
+        border-color: transparent;
+        &:hover {
+          color: $df-primary;
+        }
+      }
+      &.active {
+        a {
+          color: $df-primary;
+        }
+      }
+    }
+  }
+}
+
+.btn-primary {
+  @extend .button-primary;
+  text-transform: uppercase;
+}
+
+.btn-secondary {
+  @extend .button-secondary;
+  color: $df-primary;
+  font-size: $fs-12;
+  text-transform: uppercase;
+  padding: 0 $s-16;
+}
diff --git a/frontend/resources/styles/common/refactor/common-refactor.scss b/frontend/resources/styles/common/refactor/common-refactor.scss
index 2793e6f16..c1033735c 100644
--- a/frontend/resources/styles/common/refactor/common-refactor.scss
+++ b/frontend/resources/styles/common/refactor/common-refactor.scss
@@ -16,4 +16,21 @@
 @import "common/refactor/z-index.scss";
 @import "common/refactor/mixins.scss";
 @import "common/refactor/focus.scss";
+@import "common/refactor/animations.scss";
 @import "common/refactor/basic-rules.scss";
+
+// Variables to use the library colors
+$db-primary: var(--color-background-primary);
+$db-secondary: var(--color-background-secondary);
+$db-tertiary: var(--color-background-tertiary);
+$db-cuaternary: var(--color-background-quaternary);
+$db-subtle: var(--color-background-subtle);
+$db-disabled: var(--color-background-disabled);
+
+$df-primary: var(--color-foreground-primary);
+$df-secondary: var(--color-foreground-secondary);
+$df-tertiary: var(--color-foreground-tertiary);
+$da-primary: var(--color-accent-primary);
+$da-primary-muted: var(--color-accent-primary-muted);
+$da-secondary: var(--color-accent-secondary);
+$da-tertiary: var(--color-accent-tertiary);
diff --git a/frontend/resources/styles/common/refactor/fonts.scss b/frontend/resources/styles/common/refactor/fonts.scss
index ef4df7c8c..40d1dcb87 100644
--- a/frontend/resources/styles/common/refactor/fonts.scss
+++ b/frontend/resources/styles/common/refactor/fonts.scss
@@ -16,6 +16,7 @@ $fs-12: math.div(12, $fs-base) + rem;
 $fs-14: math.div(14, $fs-base) + rem;
 $fs-16: math.div(16, $fs-base) + rem;
 $fs-24: math.div(24, $fs-base) + rem;
+$fs-36: math.div(36, $fs-base) + rem;
 
 // Font weight
 $fw400: 400; // Regular (CSS value: 'normal')
diff --git a/frontend/resources/styles/common/refactor/spacing.scss b/frontend/resources/styles/common/refactor/spacing.scss
index 2b046700c..c80afc3a3 100644
--- a/frontend/resources/styles/common/refactor/spacing.scss
+++ b/frontend/resources/styles/common/refactor/spacing.scss
@@ -10,77 +10,142 @@ $s-0: 0px;
 $s-1: 1px;
 $s-2: math.div(0.25rem, 2);
 $s-3: calc($s-1 + $s-2);
-$s-4: var(--s-4);
-$s-6: calc($s-2 + $s-4);
-$s-8: calc(var(--s-4) * 2);
-$s-12: calc(var(--s-4) * 3);
-$s-16: calc(var(--s-4) * 4);
-$s-20: calc(var(--s-4) * 5);
-$s-24: calc(var(--s-4) * 6);
-$s-28: calc(var(--s-4) * 7);
-$s-32: calc(var(--s-4) * 8);
-$s-36: calc(var(--s-4) * 9);
-$s-40: calc(var(--s-4) * 10);
-$s-44: calc(var(--s-4) * 11);
-$s-48: calc(var(--s-4) * 12);
-$s-52: calc(var(--s-4) * 13);
-$s-56: calc(var(--s-4) * 14);
-$s-60: calc(var(--s-4) * 15);
-$s-64: calc(var(--s-4) * 16);
-$s-68: calc(var(--s-4) * 17);
-$s-72: calc(var(--s-4) * 18);
-$s-76: calc(var(--s-4) * 19);
-$s-80: calc(var(--s-4) * 20);
-$s-84: calc(var(--s-4) * 21);
-$s-92: calc(var(--s-4) * 23);
-$s-96: calc(var(--s-4) * 24);
-$s-100: calc(var(--s-4) * 25);
-$s-104: calc(var(--s-4) * 26);
-$s-108: calc(var(--s-4) * 27);
-$s-116: calc(var(--s-4) * 29);
-$s-120: calc(var(--s-4) * 30);
-$s-124: calc(var(--s-4) * 31);
-$s-128: calc(var(--s-4) * 32);
-$s-136: calc(var(--s-4) * 34);
-$s-140: calc(var(--s-4) * 35);
-$s-148: calc(var(--s-4) * 37);
-$s-156: calc(var(--s-4) * 39);
-$s-152: calc(var(--s-4) * 38);
-$s-160: calc(var(--s-4) * 40);
-$s-168: calc(var(--s-4) * 42);
-$s-172: calc(var(--s-4) * 43);
-$s-180: calc(var(--s-4) * 45);
-$s-184: calc(var(--s-4) * 46);
-$s-188: calc(var(--s-4) * 47);
-$s-192: calc(var(--s-4) * 48);
-$s-196: calc(var(--s-4) * 49);
-$s-200: calc(var(--s-4) * 50);
-$s-216: calc(var(--s-4) * 54);
-$s-220: calc(var(--s-4) * 55);
-$s-228: calc(var(--s-4) * 57);
-$s-240: calc(var(--s-4) * 60);
-$s-248: calc(var(--s-4) * 62);
-$s-252: calc(var(--s-4) * 63);
-$s-256: calc(var(--s-4) * 64);
-$s-260: calc(var(--s-4) * 65);
-$s-272: calc(var(--s-4) * 68);
-$s-276: calc(var(--s-4) * 69);
-$s-280: calc(var(--s-4) * 70);
-$s-284: calc(var(--s-4) * 71);
-$s-300: calc(var(--s-4) * 75);
-$s-320: calc(var(--s-4) * 80);
-$s-348: calc(var(--s-4) * 87);
-$s-356: calc(var(--s-4) * 89);
-$s-364: calc(var(--s-4) * 91);
-$s-380: calc(var(--s-4) * 95);
-$s-400: calc(var(--s-4) * 100);
-$s-408: calc(var(--s-4) * 102);
-$s-440: calc(var(--s-4) * 110);
-$s-480: calc(var(--s-4) * 120);
-$s-500: calc(var(--s-4) * 125);
-$s-512: calc(var(--s-4) * 128);
-$s-520: calc(var(--s-4) * 130);
-$s-640: calc(var(--s-4) * 160);
-$s-664: calc(var(--s-4) * 166);
-$s-712: calc(var(--s-4) * 178);
-$s-736: calc(var(--s-4) * 184);
+$s-4: 0.25rem;
+$s-6: #{0.25 + math.div(0.25, 2)}rem;
+
+// To calculate:
+// https://docs.google.com/spreadsheets/d/1YVEfudB3bdO2ZOo5azZLJzZgA0Fkt1C85-1jVjuSYXg/edit?usp=sharing
+$s-8: #{0.25 * 2}rem;
+$s-12: #{0.25 * 3}rem;
+$s-16: #{0.25 * 4}rem;
+$s-20: #{0.25 * 5}rem;
+$s-24: #{0.25 * 6}rem;
+$s-28: #{0.25 * 7}rem;
+$s-32: #{0.25 * 8}rem;
+$s-36: #{0.25 * 9}rem;
+$s-40: #{0.25 * 10}rem;
+$s-44: #{0.25 * 11}rem;
+$s-48: #{0.25 * 12}rem;
+$s-52: #{0.25 * 13}rem;
+$s-56: #{0.25 * 14}rem;
+$s-60: #{0.25 * 15}rem;
+$s-64: #{0.25 * 16}rem;
+$s-68: #{0.25 * 17}rem;
+$s-72: #{0.25 * 18}rem;
+$s-76: #{0.25 * 19}rem;
+$s-80: #{0.25 * 20}rem;
+$s-84: #{0.25 * 21}rem;
+$s-88: #{0.25 * 22}rem;
+$s-92: #{0.25 * 23}rem;
+$s-96: #{0.25 * 24}rem;
+$s-100: #{0.25 * 25}rem;
+$s-104: #{0.25 * 26}rem;
+$s-108: #{0.25 * 27}rem;
+$s-112: #{0.25 * 28}rem;
+$s-116: #{0.25 * 29}rem;
+$s-120: #{0.25 * 30}rem;
+$s-124: #{0.25 * 31}rem;
+$s-128: #{0.25 * 32}rem;
+$s-132: #{0.25 * 33}rem;
+$s-136: #{0.25 * 34}rem;
+$s-140: #{0.25 * 35}rem;
+$s-144: #{0.25 * 36}rem;
+$s-148: #{0.25 * 37}rem;
+$s-152: #{0.25 * 38}rem;
+$s-156: #{0.25 * 39}rem;
+$s-160: #{0.25 * 40}rem;
+$s-164: #{0.25 * 41}rem;
+$s-168: #{0.25 * 42}rem;
+$s-172: #{0.25 * 43}rem;
+$s-176: #{0.25 * 44}rem;
+$s-180: #{0.25 * 45}rem;
+$s-184: #{0.25 * 46}rem;
+$s-188: #{0.25 * 47}rem;
+$s-192: #{0.25 * 48}rem;
+$s-196: #{0.25 * 49}rem;
+$s-200: #{0.25 * 50}rem;
+$s-204: #{0.25 * 51}rem;
+$s-208: #{0.25 * 52}rem;
+$s-212: #{0.25 * 53}rem;
+$s-216: #{0.25 * 54}rem;
+$s-220: #{0.25 * 55}rem;
+$s-224: #{0.25 * 56}rem;
+$s-228: #{0.25 * 57}rem;
+$s-232: #{0.25 * 58}rem;
+$s-236: #{0.25 * 59}rem;
+$s-240: #{0.25 * 60}rem;
+$s-244: #{0.25 * 61}rem;
+$s-248: #{0.25 * 62}rem;
+$s-252: #{0.25 * 63}rem;
+$s-256: #{0.25 * 64}rem;
+$s-260: #{0.25 * 65}rem;
+$s-264: #{0.25 * 66}rem;
+$s-268: #{0.25 * 67}rem;
+$s-272: #{0.25 * 68}rem;
+$s-276: #{0.25 * 69}rem;
+$s-280: #{0.25 * 70}rem;
+$s-284: #{0.25 * 71}rem;
+$s-288: #{0.25 * 72}rem;
+$s-292: #{0.25 * 73}rem;
+$s-296: #{0.25 * 74}rem;
+$s-300: #{0.25 * 75}rem;
+$s-304: #{0.25 * 76}rem;
+$s-308: #{0.25 * 77}rem;
+$s-312: #{0.25 * 78}rem;
+$s-316: #{0.25 * 79}rem;
+$s-320: #{0.25 * 80}rem;
+$s-324: #{0.25 * 81}rem;
+$s-328: #{0.25 * 82}rem;
+$s-332: #{0.25 * 83}rem;
+$s-336: #{0.25 * 84}rem;
+$s-340: #{0.25 * 85}rem;
+$s-344: #{0.25 * 86}rem;
+$s-348: #{0.25 * 87}rem;
+$s-352: #{0.25 * 88}rem;
+$s-356: #{0.25 * 89}rem;
+$s-360: #{0.25 * 90}rem;
+$s-364: #{0.25 * 91}rem;
+$s-368: #{0.25 * 92}rem;
+$s-372: #{0.25 * 93}rem;
+$s-376: #{0.25 * 94}rem;
+$s-380: #{0.25 * 95}rem;
+$s-384: #{0.25 * 96}rem;
+$s-388: #{0.25 * 97}rem;
+$s-392: #{0.25 * 98}rem;
+$s-396: #{0.25 * 99}rem;
+$s-400: #{0.25 * 100}rem;
+$s-404: #{0.25 * 101}rem;
+$s-408: #{0.25 * 102}rem;
+$s-412: #{0.25 * 103}rem;
+$s-416: #{0.25 * 104}rem;
+$s-420: #{0.25 * 105}rem;
+$s-424: #{0.25 * 106}rem;
+$s-428: #{0.25 * 107}rem;
+$s-432: #{0.25 * 108}rem;
+$s-436: #{0.25 * 109}rem;
+$s-440: #{0.25 * 110}rem;
+$s-444: #{0.25 * 111}rem;
+$s-448: #{0.25 * 112}rem;
+$s-452: #{0.25 * 113}rem;
+$s-456: #{0.25 * 114}rem;
+$s-460: #{0.25 * 115}rem;
+$s-464: #{0.25 * 116}rem;
+$s-468: #{0.25 * 117}rem;
+$s-472: #{0.25 * 118}rem;
+$s-476: #{0.25 * 119}rem;
+$s-480: #{0.25 * 120}rem;
+$s-484: #{0.25 * 121}rem;
+$s-488: #{0.25 * 122}rem;
+$s-492: #{0.25 * 123}rem;
+$s-496: #{0.25 * 124}rem;
+$s-500: #{0.25 * 125}rem;
+$s-512: #{0.25 * 128}rem;
+$s-520: #{0.25 * 130}rem;
+$s-580: #{0.25 * 145}rem;
+$s-612: #{0.25 * 153}rem;
+$s-640: #{0.25 * 160}rem;
+$s-664: #{0.25 * 166}rem;
+$s-712: #{0.25 * 178}rem;
+$s-736: #{0.25 * 184}rem;
+$s-800: #{0.25 * 200}rem;
+$s-1000: #{0.25 * 250}rem;
diff --git a/frontend/resources/styles/main/layouts/main-layout.scss b/frontend/resources/styles/main/layouts/main-layout.scss
index a9ba4a0ae..fbe768447 100644
--- a/frontend/resources/styles/main/layouts/main-layout.scss
+++ b/frontend/resources/styles/main/layouts/main-layout.scss
@@ -50,1092 +50,3 @@
   display: flex;
   flex-direction: column;
 }
-
-// NEW DASHBOARD CSS
-
-.delete-me-dashboard-layout-refactor {
-  background-color: $db-primary;
-  display: grid;
-  grid-template-rows: 50px 1fr;
-  grid-template-columns: 40px 256px 1fr;
-  height: 100vh;
-
-  .context-menu-items {
-    background-color: $db-tertiary;
-    border: 1px solid $db-cuaternary;
-    border-radius: 8px;
-    min-width: 252px;
-
-    svg {
-      fill: $df-secondary;
-    }
-
-    .separator {
-      border-color: transparent;
-      margin-top: 10px;
-    }
-
-    a,
-    .context-menu-action {
-      border-radius: 8px;
-      height: 40px;
-      margin: 5px;
-      color: $df-primary;
-      cursor: pointer;
-      width: auto;
-
-      &:hover {
-        background-color: $db-cuaternary;
-      }
-    }
-  }
-
-  .dashboard-sidebar {
-    background-color: $db-primary;
-    border-right: 1px solid $db-cuaternary;
-    grid-row: 1 / span 2;
-    grid-column: 1 / span 2;
-    margin: 0 1rem 0 0;
-    padding: 1rem 0 0 0;
-
-    .dropdown {
-      background-color: $db-tertiary;
-      border: 1px solid $db-cuaternary;
-      border-radius: 8px;
-      min-width: 252px;
-
-      .separator {
-        border-color: transparent;
-        margin-top: 10px;
-      }
-
-      li {
-        border-radius: 8px;
-        height: 40px;
-        margin: 5px;
-
-        &:hover {
-          background-color: $db-cuaternary;
-        }
-      }
-
-      &.options-dropdown {
-        li {
-          color: $df-primary;
-          &.warning {
-            color: $color-danger;
-          }
-        }
-      }
-    }
-
-    .sidebar-content {
-      .back-to-dashboard {
-        .icon {
-          svg {
-            fill: $df-secondary;
-          }
-        }
-        .text {
-          color: $df-primary;
-        }
-      }
-      .sidebar-team-switch {
-        .switch-content {
-          background-color: $db-tertiary;
-          border-radius: 8px;
-          border-color: transparent;
-          height: 48px;
-
-          .current-team {
-            border-right: 1px solid $db-primary;
-            height: 100%;
-          }
-
-          svg {
-            fill: $df-secondary;
-          }
-
-          .team-name {
-            .team-text {
-              color: $df-primary;
-              width: 145px;
-            }
-          }
-        }
-      }
-
-      .teams-dropdown {
-        background-color: $db-tertiary;
-        border-radius: 8px;
-        border: 1px solid $db-cuaternary;
-        min-width: 248px;
-
-        li {
-          border-radius: 8px;
-          height: 42px;
-          padding: 0 5px;
-          margin: 5px;
-
-          .team-text {
-            color: $df-primary;
-            width: 165px;
-          }
-          svg {
-            fill: $df-secondary;
-          }
-
-          &:hover {
-            background-color: $db-cuaternary;
-            .team-icon {
-              &.new-team {
-                background-color: $da-primary;
-                svg {
-                  fill: $db-secondary;
-                }
-              }
-            }
-          }
-
-          .team-icon {
-            &.new-team {
-              background-color: $db-cuaternary;
-            }
-          }
-        }
-      }
-
-      .sidebar-search {
-        background-color: $db-tertiary;
-        border-color: transparent;
-        border-radius: 8px;
-        margin-bottom: 2rem;
-        margin-top: 0;
-        position: relative;
-
-        .input-text {
-          border-radius: 8px;
-          color: $df-primary;
-          max-width: 100%;
-          padding: 6px 10px;
-
-          &:focus {
-            border: 1px solid $da-primary;
-          }
-        }
-        ::placeholder {
-          color: $df-secondary;
-        }
-
-        .search {
-          position: absolute;
-          top: 10px;
-          right: 2px;
-        }
-      }
-
-      .sidebar-nav {
-        li {
-          padding: 0.6rem 0.6rem 0.6rem 1.4rem;
-          &.current {
-            background-color: $db-cuaternary;
-            a {
-              font-weight: 400;
-              span {
-                color: $da-primary;
-              }
-            }
-            span {
-              color: $da-primary;
-            }
-          }
-          &:hover {
-            background-color: $db-cuaternary;
-          }
-          span {
-            color: $df-secondary;
-          }
-          &::before {
-            display: none;
-          }
-
-          svg {
-            display: none;
-          }
-        }
-      }
-    }
-
-    .sidebar-empty-placeholder {
-      color: $df-secondary;
-    }
-
-    // Profile sidebar
-    .profile-section {
-      background-color: $db-tertiary;
-      border-top: 1px solid $db-cuaternary;
-
-      span {
-        color: $df-primary;
-      }
-
-      .dashboard-comments-section {
-        border-color: transparent;
-        border-radius: 8px;
-        background-color: $db-primary;
-        height: 32px;
-        width: 32px;
-
-        .button {
-          border-radius: 8px;
-          background-color: $db-primary;
-          height: 32px;
-          width: 32px;
-
-          svg {
-            fill: $df-secondary;
-          }
-
-          &:hover {
-            background-color: $db-cuaternary;
-
-            svg {
-              fill: $da-primary;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Dashboard layout
-  .dashboard-content {
-    grid-row: 1 / span 2;
-    padding: 1rem 1rem 0 0;
-
-    .grid-empty-placeholder {
-      background-color: transparent;
-
-      .create-new {
-        background-color: $db-tertiary;
-        border-radius: 8px;
-        border: none;
-        color: $df-primary;
-        text-transform: uppercase;
-
-        &:hover {
-          background-color: $db-cuaternary;
-          color: $da-primary;
-        }
-      }
-
-      &.search {
-        border: 1px solid $db-cuaternary;
-        border-radius: 8px;
-        .text {
-          color: $df-primary;
-        }
-        .icon {
-          svg {
-            fill: $df-secondary;
-          }
-        }
-      }
-    }
-
-    // Settings
-    .dashboard-container {
-      background-color: transparent;
-      border-top: 1px solid $db-cuaternary;
-
-      .dashboard-settings {
-        a {
-          color: $df-secondary;
-        }
-        .form-container {
-          width: 800px;
-          margin: 80px auto auto 120px;
-          form {
-            width: 468px;
-            .fields-row {
-              .custom-input,
-              .custom-select {
-                flex-direction: column-reverse;
-                label {
-                  position: relative;
-                  text-transform: uppercase;
-                  color: $df-primary;
-                  font-size: 11px;
-                  margin-bottom: 12px;
-                  margin-left: -4px;
-                }
-                input,
-                select {
-                  background-color: $db-tertiary;
-                  border-radius: 8px;
-                  border-color: transparent;
-                  color: $df-primary;
-                  padding: 0 15px;
-                  &:focus {
-                    outline: 1px solid $da-primary;
-                  }
-                  ::placeholder {
-                    color: $df-secondary;
-                  }
-                }
-                .help-icon {
-                  bottom: 12px;
-                  top: auto;
-                  svg {
-                    fill: $df-secondary;
-                  }
-                }
-                &.disabled {
-                  input {
-                    background-color: $db-primary;
-                    border-color: $db-cuaternary;
-                    color: $df-secondary;
-                  }
-                }
-                .input-container {
-                  background-color: $db-tertiary;
-                  border-radius: 8px;
-                  border-color: transparent;
-                  margin-top: 22px;
-                  .main-content {
-                    label {
-                      position: absolute;
-                      top: -24px;
-                    }
-                    span {
-                      color: $df-primary;
-                    }
-                  }
-                  &:focus {
-                    border: 1px solid $da-primary;
-                  }
-                }
-                textarea {
-                  border-radius: 8px;
-                  padding: 12px 14px;
-                  background-color: $db-tertiary;
-                  color: $df-primary;
-                  border: none;
-                  &:focus {
-                    outline: 1px solid $da-primary;
-                  }
-                }
-              }
-            }
-            .field-title {
-              color: $df-primary;
-            }
-            .field-title:not(:first-child) {
-              margin-top: 64px;
-            }
-
-            .field-text {
-              color: $df-secondary;
-            }
-            button,
-            .btn-secondary {
-              width: 100%;
-              font-size: 11px;
-              text-transform: uppercase;
-              background-color: $db-tertiary;
-              color: $df-primary;
-              &:hover {
-                color: $da-primary;
-                background-color: $db-cuaternary;
-              }
-            }
-            hr {
-              display: none;
-            }
-          }
-          .links {
-            margin-top: 12px;
-          }
-        }
-      }
-
-      //Access tokens
-      .dashboard-access-tokens {
-        width: 800px;
-        margin-left: 120px;
-        margin-top: 80px;
-        .access-tokens-hero-container {
-          background-color: transparent;
-          .access-tokens-hero {
-            width: 468px;
-            flex-direction: column;
-            gap: 32px;
-            background-color: transparent;
-            margin: 0;
-            padding: 0;
-            .desc {
-              background-color: transparent;
-              width: 100%;
-              h2 {
-                color: $df-primary;
-                font-size: 24px;
-                font-weight: regular;
-                margin-bottom: 32px;
-              }
-              p {
-                color: $df-secondary;
-                margin-bottom: 0;
-                font-size: 14px;
-              }
-            }
-            button {
-              width: 100%;
-              font-size: 11px;
-              text-transform: uppercase;
-              background-color: $db-tertiary;
-              color: $df-primary;
-              &:hover {
-                color: $da-primary;
-                background-color: $db-cuaternary;
-              }
-            }
-          }
-        }
-        .dashboard-table {
-          width: 800px;
-          .table-rows {
-            padding-top: 0;
-            .table-row {
-              font-size: 14px;
-              min-height: 40px;
-              height: fit-content;
-              .name {
-                color: $df-primary;
-                max-width: 480px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                display: -webkit-box;
-                -webkit-line-clamp: 2;
-                -webkit-box-orient: vertical;
-              }
-              .expiration-date {
-                color: $df-secondary;
-              }
-            }
-          }
-        }
-        .access-tokens-empty {
-          width: 468px;
-          border: 1px solid $db-cuaternary;
-          border-radius: 8px;
-          margin-top: 32px;
-          font-size: 14px;
-          background-color: transparent;
-          color: $df-secondary;
-        }
-      }
-
-      // Team webhooks
-      &.dashboard-team-webhooks {
-        width: 800px;
-        margin-left: 120px;
-        margin-top: 80px;
-        border: none;
-        align-items: flex-start;
-        .webhooks-hero-container {
-          width: 468px;
-          background-color: transparent;
-          .webhooks-hero {
-            width: 468px;
-            flex-direction: column;
-            gap: 32px;
-            background-color: transparent;
-            margin: 0;
-            padding: 0;
-            .desc {
-              background-color: transparent;
-              width: 100%;
-              h2 {
-                color: $df-primary;
-                font-size: 24px;
-                font-weight: regular;
-                margin-bottom: 32px;
-              }
-              p {
-                color: $df-secondary;
-                margin-bottom: 0;
-                font-size: 14px;
-              }
-            }
-            .btn-primary {
-              width: 100%;
-              font-size: 11px;
-              text-transform: uppercase;
-              background-color: $db-tertiary;
-              color: $df-primary;
-              &:hover {
-                color: $da-primary;
-                background-color: $db-cuaternary;
-              }
-            }
-          }
-        }
-        .dashboard-table {
-          width: 800px;
-          .table-rows {
-            padding-top: 0;
-            .table-row {
-              font-size: 14px;
-              min-height: 40px;
-              height: fit-content;
-              .name {
-                color: $df-primary;
-                max-width: 480px;
-              }
-              .expiration-date {
-                color: $df-secondary;
-              }
-            }
-          }
-        }
-        .webhooks-empty {
-          width: 468px;
-          border: 1px solid $db-cuaternary;
-          border-radius: 8px;
-          margin-top: 32px;
-          font-size: 14px;
-          background-color: transparent;
-          color: $df-secondary;
-        }
-      }
-
-      // Members section
-      .dashboard-table {
-        .table-header {
-          background-color: transparent;
-          color: $df-secondary;
-          font-size: 12px;
-          text-transform: uppercase;
-        }
-        .table-rows {
-          .table-row {
-            background-color: $db-tertiary;
-            border-radius: 8px;
-            color: $df-primary;
-            .rol-selector {
-              background-color: $db-cuaternary;
-              border-color: transparent;
-              border-radius: 8px;
-            }
-          }
-        }
-        .member-info {
-          .member-name .you,
-          .member-email {
-            color: $df-secondary;
-          }
-        }
-        .status-badge {
-          border-radius: 8px;
-          color: $db-primary;
-          text-transform: uppercase;
-        }
-        .empty-invitations {
-          border: 1px solid $db-cuaternary;
-          border-radius: 8px;
-          color: $df-secondary;
-        }
-      }
-      .actions-dropdown,
-      .options-dropdown {
-        background-color: $db-tertiary;
-        border: 1px solid $db-cuaternary;
-        border-radius: 8px;
-        min-width: 252px;
-
-        .separator {
-          border-color: transparent;
-          margin-top: 10px;
-        }
-
-        li {
-          border-radius: 8px;
-          height: 40px;
-          margin: 5px;
-          color: $df-primary;
-
-          &:hover {
-            background-color: $db-cuaternary;
-          }
-        }
-
-        &.options-dropdown {
-          li {
-            color: $df-primary;
-            &.warning {
-              color: $color-danger;
-            }
-          }
-        }
-      }
-    }
-
-    // Team settings
-    .horizontal-blocks {
-      flex-direction: column;
-      gap: 24px;
-      .block {
-        background-color: transparent;
-        .label {
-          color: $df-secondary;
-          font-size: 11px;
-          text-transform: uppercase;
-        }
-        .icon {
-          svg {
-            fill: $df-secondary;
-          }
-        }
-        .name,
-        .text {
-          color: $df-primary;
-        }
-        &.info-block {
-          padding-top: 180px;
-          .icon {
-            left: 0;
-            height: 120px;
-            width: 120px;
-            img {
-              width: 120px;
-              height: 120px;
-            }
-            .update-overlay {
-              background-color: $da-primary;
-              height: 120px;
-              width: 120px;
-              svg {
-                fill: $db-primary;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .dashboard-header {
-    background-color: transparent;
-    .dashboard-title {
-      h1 {
-        color: $df-primary;
-        font-size: 24px;
-        font-weight: 400;
-        width: 100%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        display: block;
-        max-width: 700px;
-      }
-    }
-    .icon {
-      svg {
-        fill: $df-secondary;
-      }
-    }
-
-    // Settings sub-menu
-    .dashboard-header-options {
-      li {
-        a {
-          font-size: 16px;
-          color: $df-secondary;
-          border-color: transparent;
-          &:hover {
-            color: $df-primary;
-          }
-        }
-        &.active {
-          a {
-            color: $df-primary;
-          }
-        }
-      }
-    }
-  }
-
-  // Hero banners
-  .team-hero {
-    background-color: $db-tertiary;
-    border: none;
-    img {
-      border-radius: 4px;
-      margin-bottom: 0;
-      width: 230px;
-    }
-    .text {
-      .title {
-        color: $df-primary;
-        font-weight: 400;
-      }
-      .info {
-        color: $df-secondary;
-        a {
-          color: $da-primary;
-        }
-      }
-    }
-    svg {
-      fill: $df-secondary;
-    }
-    .invite {
-      height: 32px;
-    }
-  }
-
-  .hero-projects {
-    .tutorial,
-    .walkthrough {
-      background-color: $db-tertiary;
-      border: none;
-      img {
-        border-radius: 4px;
-        margin-bottom: 0;
-        width: 230px;
-      }
-      .text {
-        .title {
-          color: $df-primary;
-          font-weight: 400;
-        }
-        .info {
-          color: $df-secondary;
-          a {
-            color: $da-primary;
-          }
-        }
-      }
-      svg {
-        fill: $df-secondary;
-      }
-      .invite {
-        height: 32px;
-      }
-    }
-  }
-
-  // Dashboard content
-  .dashboard-project-row .project {
-    background-color: transparent;
-  
-    h2 {
-      color: $df-primary;
-      font-weight: 400;
-    }
-    span {
-      color: $df-secondary;
-    }
-    .project-actions {
-      svg {
-        fill: $df-primary;
-      }
-      .pin-icon {
-        svg.icon-pin-fill {
-          fill: $df-secondary;
-        }
-      }
-    }
-  }
-
-  .dashboard-sidebar .sidebar-content hr {
-    border-color: transparent;
-    margin: 0.8rem 15px;
-  }
-  
-  .icon {
-    svg {
-      fill: $df-secondary;
-    }
-  }
-
-  .btn-primary {
-    background-color: $da-tertiary;
-    border-radius: 8px;
-    color: $db-primary;
-    height: 32px;
-    text-transform: uppercase;
-    &:hover {
-      background-color: darken($da-tertiary, 10%);
-      color: $db-primary;
-    }
-  }
-
-   .btn-secondary {
-     background-color: $db-tertiary;
-     text-transform: uppercase;
-     border: none;
-     color: $df-primary;
-     border-radius: 8px;
-   
-     &:hover {
-       background-color: $db-cuaternary;
-       color: $da-primary;
-       svg {
-         fill: $da-primary;
-       }
-     }
-   }
-
-  // File cards
-  .dashboard-grid {
-    .grid-item {
-      &.project-th {
-        background-color: transparent;
-        border-radius: 8px;
-        padding-top: 0.3rem;
-        .info-wrapper {
-          cursor: pointer;
-          .item-info {
-            h3 {
-              color: $df-primary;
-              font-size: 16px;
-              font-weight: 400;
-            }
-          }
-          .date {
-            color: $df-secondary;
-          }
-          .project-th-actions {
-            .project-th-icon {
-              margin-top: 0;
-              .icon-actions {
-                fill: $df-secondary;
-              }
-            }
-          }
-        }
-
-        &:hover {
-          background-color: $db-tertiary;
-          .grid-item-th {
-            border: none;
-          }
-        }
-      }
-
-      .grid-item-th {
-        border-radius: 4px;
-        border: none;
-        cursor: pointer;
-      }
-
-      .item-badge {
-        background-color: $da-primary;
-        border: none;
-        border-radius: 4px;
-        svg {
-          fill: $db-secondary;
-        }
-      }
-    }
-  }
-
-  // Libraries slider
-  .dashboard-templates-section {
-    .title {
-      right: -24px;
-      button {
-        background-color: $db-cuaternary;
-        border: none;
-        span {
-          color: $df-primary;
-          font-weight: 400;
-        }
-      }
-    }
-    .content {
-      border-top-left-radius: 8px;
-      border: none;
-      background-color: $db-cuaternary;
-
-      .template-card {
-        color: $df-primary;
-        padding: 0.2rem 0.3rem 1rem 0.3rem;
-        border-radius: 8px;
-        .img-container {
-          border: none;
-          img {
-            border-radius: 4px;
-          }
-        }
-        .card-name {
-          span {
-            font-size: 16px;
-          }
-        }
-        .template-link {
-          .template-link-title {
-            color: $df-primary;
-            font-weight: 400;
-          }
-          .template-link-text {
-            color: $df-secondary;
-          }
-        }
-
-        &:hover {
-          background-color: $db-tertiary;
-          .img-container {
-            border: none;
-          }
-        }
-      }
-    }
-  }
-
-  // Input edit
-  .edit-wrapper {
-    border: none;
-    input {
-      background-color: $db-primary !important;
-      outline: 1px solid $da-primary !important;
-      border-radius: 8px;
-      color: $df-primary !important;
-      font-size: 16px !important;
-    }
-    .close {
-      right: -8px;
-      svg {
-        fill: $df-secondary;
-      }
-      &:hover {
-        svg {
-          fill: $color-danger;
-        }
-      }
-    }
-  }
-
-  // Inner sections
-  .dashboard-fonts {
-    background-color: $db-primary;
-    border-top: 1px solid $db-cuaternary;
-
-    .dashboard-fonts-hero {
-      background-color: transparent;
-      .desc {
-        width: 70%;
-        h2 {
-          color: $df-primary;
-          font-weight: 400;
-        }
-        p {
-          color: $df-secondary;
-          font-size: 14px;
-        }
-        .banner {
-          background-color: $db-primary;
-          border-radius: 8px;
-          border: 1px solid $db-cuaternary;
-          color: $df-primary;
-          font-size: 12px;
-          .content {
-            span {
-              a {
-                color: $da-primary;
-              }
-            }
-          }
-          .icon {
-            background-color: transparent;
-            svg {
-              fill: $df-secondary;
-            }
-          }
-          &.warning {
-            background-color: $db-cuaternary;
-          }
-        }
-      }
-    }
-
-    .installed-fonts-header {
-      background-color: transparent;
-      text-transform: uppercase;
-      color: $df-secondary;
-    }
-
-    .fonts-placeholder {
-      border: 1px solid $db-cuaternary;
-      border-radius: 8px;
-      .icon {
-        svg {
-          fill: $df-secondary;
-        }
-      }
-      .label {
-        color: $df-secondary;
-      }
-    }
-
-    .font-item {
-      background-color: $db-tertiary;
-      border-radius: 8px;
-      color: $df-secondary;
-      padding: 0.8rem 1.5rem;
-      min-height: auto;
-      margin-top: 4px;
-      &:not(:first-child) {
-        border: none;
-      }
-      .table-field {
-        color: $df-primary;
-        .variant {
-          background-color: $db-cuaternary;
-          border-radius: 8px;
-          margin-right: 4px;
-          padding-right: 4px;
-        }
-      }
-    }
-
-    .font-item {
-      input {
-        background-color: $db-tertiary;
-        border-color: transparent;
-        border-radius: 8px;
-        color: $df-primary;
-        font-size: 14px;
-        &:focus {
-          outline: 1px solid $da-primary;
-        }
-      }
-      > .variants {
-        padding-left: 1rem;
-      }
-    }
-
-    .installed-fonts-header {
-      padding-right: 0;
-      .search-input {
-        input {
-          background-color: $db-tertiary;
-          border-color: transparent;
-          border-radius: 8px;
-          color: $df-primary;
-          font-size: 14px;
-          height: 32px;
-          padding: 0 0.6rem;
-          width: 150px;
-          &:focus {
-            outline: 1px solid $da-primary;
-          }
-          &::placeholder {
-            color: $df-secondary;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/frontend/src/app/main/style.clj b/frontend/src/app/main/style.clj
index cc113941d..4e275cdf7 100644
--- a/frontend/src/app/main/style.clj
+++ b/frontend/src/app/main/style.clj
@@ -24,7 +24,7 @@
              (case kns
                "global"  knm
                "old-css" (if (nil? *css-data*) knm "")
-               (or (get *css-data* (keyword knm)) knm)))
+               (or (get *css-data* (keyword knm)) (str "_not_found_" knm))))
 
            (string? k)
            k))))
diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss
index d7a2e1de8..89fc247d7 100644
--- a/frontend/src/app/main/ui/comments.scss
+++ b/frontend/src/app/main/ui/comments.scss
@@ -9,6 +9,10 @@
 // Comment-thread-group
 .thread-group {
   padding: 0 $s-12;
+  cursor: pointer;
+  border-radius: $br-8;
+  padding: $s-8 $s-16;
+
   .section-title {
     @include titleTipography;
     height: $s-32;
@@ -39,6 +43,10 @@
     flex-direction: column;
     gap: $s-24;
   }
+
+  &:hover {
+    background: $db-primary;
+  }
 }
 
 // Comment-thread
diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs
index f148995a3..ee64dc30e 100644
--- a/frontend/src/app/main/ui/components/forms.cljs
+++ b/frontend/src/app/main/ui/components/forms.cljs
@@ -9,6 +9,7 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.main.ui.components.select :as cs]
    [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
@@ -252,10 +253,10 @@
         value      (or (get-in @form [:data input-name]) default)
         cvalue     (d/seek #(= value (:value %)) options)
         focus?     (mf/use-state false)
-        on-change
+
+        handle-change
         (fn [event]
-          (let [target (dom/get-target event)
-                value  (dom/get-value target)]
+          (let [value (if (string? event) event (dom/get-target-val event))]
             (fm/on-input-change form input-name value)))
 
         on-focus
@@ -267,33 +268,16 @@
           (reset! focus? false))]
 
     (if new-css-system
-      [:div {:class (stl/css :custom-select)}
-       [:select {:value value
-                 :on-change on-change
-                 :on-focus on-focus
-                 :on-blur on-blur
-                 :disabled disabled
-                 :data-test data-test}
-        (for [item options]
-          [:> :option (clj->js (cond-> {:key (:value item) :value (:value item)}
-                                 (:disabled item) (assoc :disabled "disabled")
-                                 (:hidden item) (assoc :style {:display "none"})))
-           (:label item)])]
-
-       [:div {:class (stl/css-case :input-container true
-                                   :disabled disabled
-                                   :focus @focus?)}
-        [:div {:class (stl/css :main-content)}
-         [:label {:class (stl/css :label)} label]
-         [:span {:class (stl/css :value)} (:label cvalue "")]]
-
-        [:div {:class (stl/css :icon)}
-         i/arrow-refactor]]]
+      [:div {:class (stl/css :select-wrapper)}
+       [:& cs/select
+        {:default-value value
+         :options options
+         :on-change handle-change}]]
 
 
       [:div.custom-select
        [:select {:value value
-                 :on-change on-change
+                 :on-change handle-change
                  :on-focus on-focus
                  :on-blur on-blur
                  :disabled disabled
diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss
index 707b1fc63..8c022b06a 100644
--- a/frontend/src/app/main/ui/components/forms.scss
+++ b/frontend/src/app/main/ui/components/forms.scss
@@ -23,12 +23,18 @@
     padding: 0;
     cursor: pointer;
     color: var(--modal-title-foreground-color);
-    text-transform: none;
+    text-transform: uppercase;
     input {
       @extend .input-element;
       color: var(--input-foreground-color-active);
       width: calc(100% - $s-1);
       margin-top: 0;
+
+      &:focus {
+        outline: none;
+        border: $s-1 solid var(--input-border-color-focus);
+        border-radius: $br-8;
+      }
     }
     // Input autofill
     input:-webkit-autofill,
@@ -39,11 +45,6 @@
       -webkit-box-shadow: 0 0 0 28px var(--input-background-color) inset !important;
       border: $s-1 solid var(--input-background-color);
     }
-    &:focus {
-      outline: none;
-      border: $s-1 solid var(--input-border-color-focus);
-      border-radius: $br-8;
-    }
   }
   &:global(.invalid) {
     input {
diff --git a/frontend/src/app/main/ui/dashboard.cljs b/frontend/src/app/main/ui/dashboard.cljs
index 4b7bc7bdf..54894422e 100644
--- a/frontend/src/app/main/ui/dashboard.cljs
+++ b/frontend/src/app/main/ui/dashboard.cljs
@@ -239,7 +239,7 @@
         ;; components on team change. Many components assumes that the
         ;; team is already set so don't put the team into mf/deps.
         (when team
-          [:main {:class (stl/css :dashboard-layout-refactor :dashboard)
+          [:main {:class (stl/css :dashboard)
                   :key (:id team)}
            [:& sidebar
             {:team team
diff --git a/frontend/src/app/main/ui/dashboard.scss b/frontend/src/app/main/ui/dashboard.scss
index 71d4d91e2..42c45ba1a 100644
--- a/frontend/src/app/main/ui/dashboard.scss
+++ b/frontend/src/app/main/ui/dashboard.scss
@@ -1,11 +1,22 @@
-@import "common/dependencies/colors";
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "refactor/common-refactor.scss" as *;
 
 .dashboard {
   background-color: $db-primary;
   display: grid;
-  grid-template-rows: 50px 1fr;
-  grid-template-columns: 40px 256px 1fr;
+  grid-template-columns: $s-40 $s-256 1fr;
+  grid-template-rows: $s-52 1fr;
   height: 100vh;
+
+  :global(svg#loader-pencil) {
+    fill: $df-secondary;
+    width: $s-32;
+  }
 }
 
 .dashboard-content {
@@ -13,5 +24,5 @@
   flex-direction: column;
   position: relative;
   grid-row: 1 / span 2;
-  padding: 1rem 1rem 0 0;
+  padding: $s-16 $s-16 0 0;
 }
diff --git a/frontend/src/app/main/ui/dashboard/comments.cljs b/frontend/src/app/main/ui/dashboard/comments.cljs
index 4b1815b3a..9f3b4e28a 100644
--- a/frontend/src/app/main/ui/dashboard/comments.cljs
+++ b/frontend/src/app/main/ui/dashboard/comments.cljs
@@ -22,12 +22,40 @@
    [potok.core :as ptk]
    [rumext.v2 :as mf]))
 
+(mf/defc comments-icon
+  [{:keys [profile show? on-show-comments]}]
+
+  (let [threads-map (mf/deref refs/comment-threads)
+
+        tgroups
+        (->> (vals threads-map)
+             (sort-by :modified-at)
+             (reverse)
+             (dcm/apply-filters {} profile)
+             (dcm/group-threads-by-file-and-page))
+
+        handle-keydown
+        (mf/use-callback
+         (mf/deps on-show-comments)
+         (fn [event]
+           (when (kbd/enter? event)
+             (on-show-comments event))))]
+
+    [:div {:class (stl/css :dashboard-comments-section)}
+     [:button
+      {:tab-index "0"
+       :on-click on-show-comments
+       :on-key-down handle-keydown
+       :data-test "open-comments"
+       :class (stl/css-case :button true
+                            :open show?
+                            :unread (boolean (seq tgroups)))}
+      i/chat]]))
+
 (mf/defc comments-section
-  [{:keys [profile team]}]
+  [{:keys [profile team show? on-show-comments on-hide-comments]}]
   (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        show-dropdown? (mf/use-state false)
-        show-dropdown  (mf/use-fn #(reset! show-dropdown? true))
-        hide-dropdown  (mf/use-fn #(reset! show-dropdown? false))
+
         threads-map    (mf/deref refs/comment-threads)
         users          (mf/deref refs/current-team-comments-users)
         team-id        (:id team)
@@ -38,6 +66,13 @@
                             (dcm/apply-filters {} profile)
                             (dcm/group-threads-by-file-and-page))
 
+        handle-keydown
+        (mf/use-callback
+         (mf/deps on-hide-comments)
+         (fn [event]
+           (when (kbd/enter? event)
+             (on-hide-comments event))))
+
         on-navigate
         (mf/use-callback
          (fn [thread]
@@ -48,42 +83,25 @@
       (mf/deps team-id)
       (fn []
         (st/emit! (dcm/retrieve-unread-comment-threads team-id))))
-    
+
     (mf/use-effect
-     (mf/deps @show-dropdown?)
+     (mf/deps show?)
      (fn []
-       (when @show-dropdown?
+       (when show?
          (st/emit! (ptk/event ::ev/event {::ev/name "open-comment-notifications"
                                           ::ev/origin "dashboard"})))))
 
     (if new-css-system
       [:div {:class (stl/css :dashboard-comments-section)}
-       [:div
-        {:tab-index "0"
-         :on-click show-dropdown
-         :on-key-down (fn [event]
-                        (when (kbd/enter? event)
-                          (show-dropdown event)))
-         :data-test "open-comments"
-         :class (stl/css-case :button true
-                              :open @show-dropdown?
-                              :unread (boolean (seq tgroups)))}
-        i/chat]
-
-       [:& dropdown {:show @show-dropdown? :on-close hide-dropdown}
+       [:& dropdown {:show show? :on-close on-hide-comments}
         [:div {:class (stl/css :dropdown :comments-section :comment-threads-section)}
          [:div {:class (stl/css :header)}
           [:h3 (tr "labels.comments")]
-          [:span {:class (stl/css :close)
-                  :tab-index (if @show-dropdown?
-                               "0"
-                               "-1")
-                  :on-click hide-dropdown
-                  :on-key-down (fn [event]
-                                 (when (kbd/enter? event)
-                                   (hide-dropdown event)))} i/close]]
-
-         [:hr]
+          [:button
+           {:class (stl/css :close)
+            :tab-index (if show? "0" "-1")
+            :on-click on-hide-comments
+            :on-key-down handle-keydown} i/close]]
 
          (if (seq tgroups)
            [:div {:class (stl/css :thread-groups)}
@@ -93,15 +111,12 @@
               :show-file-name true
               :users users}]
             (for [tgroup (rest tgroups)]
-              [:*
-               [:hr]
-
-               [:& cmt/comment-thread-group
-                {:group tgroup
-                 :on-thread-click on-navigate
-                 :show-file-name true
-                 :users users
-                 :key (:page-id tgroup)}]])]
+              [:& cmt/comment-thread-group
+               {:group tgroup
+                :on-thread-click on-navigate
+                :show-file-name true
+                :users users
+                :key (:page-id tgroup)}])]
 
            [:div {:class (stl/css :thread-groups-placeholder)}
             i/chat
@@ -111,26 +126,23 @@
       [:div.dashboard-comments-section
        [:div.button
         {:tab-index "0"
-         :on-click show-dropdown
+         :on-click on-show-comments
          :on-key-down (fn [event]
                         (when (kbd/enter? event)
-                          (show-dropdown event)))
+                          (on-show-comments event)))
          :data-test "open-comments"
-         :class (dom/classnames :open @show-dropdown?
+         :class (dom/classnames :open show?
                                 :unread (boolean (seq tgroups)))}
         i/chat]
 
-       [:& dropdown {:show @show-dropdown? :on-close hide-dropdown}
+       [:& dropdown {:show show? :on-close on-hide-comments}
         [:div.dropdown.comments-section.comment-threads-section.
          [:div.header
           [:h3 (tr "labels.comments")]
-          [:span.close {:tab-index (if @show-dropdown?
-                                     "0"
-                                     "-1")
-                        :on-click hide-dropdown
-                        :on-key-down (fn [event]
-                                       (when (kbd/enter? event)
-                                         (hide-dropdown event)))} i/close]]
+          [:span.close {:tab-index (if show? "0" "-1")
+                        :on-click on-hide-comments
+                        :on-key-down handle-keydown}
+           i/close]]
 
          [:hr]
 
diff --git a/frontend/src/app/main/ui/dashboard/comments.scss b/frontend/src/app/main/ui/dashboard/comments.scss
index e16952e48..9de57d692 100644
--- a/frontend/src/app/main/ui/dashboard/comments.scss
+++ b/frontend/src/app/main/ui/dashboard/comments.scss
@@ -1,526 +1,131 @@
-@import "common/dependencies/colors";
-$fs12: 0.75rem;
-$fs14: 0.875rem;
-$size-2: 0.5rem;
-$size-4: 1rem;
-$size-5: 1.5rem;
-$br2: 2px;
-$br3: 3px;
-$fw400: 400;
-$fw700: 700;
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
 
-.dropdown {
-  position: absolute;
-  max-height: 30rem;
-  background-color: #ffffff;
-  border-radius: 2px;
-  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-  z-index: 12;
-
-  background-color: #212426;
-  border: 1px solid #2e3434;
-  border-radius: 8px;
-  min-width: 252px;
-
-  hr {
-    margin: 0;
-    border-color: #e3e3e3;
-  }
-}
-
-.comments-section {
-  .thread-bubble {
-    position: absolute;
-    display: flex;
-    transform: translate(-15px, -15px);
-
-    cursor: pointer;
-    pointer-events: auto;
-    background-color: $color-gray-10;
-    color: $color-gray-60;
-    border: 1px solid #b1b2b5;
-    box-sizing: border-box;
-    box-shadow: 0px 4px 4px rgba($color-black, 0.25);
-
-    font-size: $fs12;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &.resolved {
-      color: $color-gray-10;
-      background-color: $color-gray-50;
-    }
-
-    &.unread {
-      background-color: $color-primary;
-    }
-    span {
-      user-select: none;
-    }
-  }
-
-  .thread-content {
-    position: absolute;
-    pointer-events: auto;
-    margin-left: 10px;
-    background: $color-white;
-    border: 1px solid $color-gray-20;
-    box-sizing: border-box;
-    box-shadow: 0px 2px 8px rgba($color-black, 0.25);
-    border-radius: $br2;
-    min-width: 280px;
-    max-width: 280px;
-    user-select: text;
-
-    .comments {
-      max-height: 420px;
-      min-height: 105px;
-      overflow-y: auto;
-    }
-
-    hr {
-      border: 0;
-      height: 1px;
-      background-color: $color-gray-20;
-      margin: 0px 10px;
-    }
-  }
-
-  .reply-form {
-    display: flex;
-    padding: 10px;
-    flex-direction: column;
-
-    &.edit-form {
-      padding-bottom: 0px;
-    }
-
-    textarea {
-      font-family: "worksans", sans-serif;
-      font-size: $fs12;
-      min-height: 32px;
-      outline: none;
-      overflow: hidden;
-      padding: $size-2;
-      resize: none;
-      width: 100%;
-      border-radius: $br2;
-      border: 1px solid $color-gray-20;
-      max-height: 4rem;
-    }
-
-    .buttons {
-      margin-top: 10px;
-      display: flex;
-      justify-content: flex-end;
-
-      input {
-        margin: 0px;
-        font-size: $fs14;
-
-        &:not(:last-child) {
-          margin-right: 6px;
-        }
-      }
-    }
-  }
-
-  .comment-container {
-    position: relative;
-  }
-
-  .comment {
-    display: flex;
-    flex-direction: column;
-    padding: $size-4 $size-2;
-
-    .author {
-      display: flex;
-      align-items: center;
-      height: 26px;
-      max-height: 26px;
-      position: relative;
-
-      .name {
-        display: flex;
-        flex-direction: column;
-
-        .fullname {
-          font-weight: $fw700;
-          color: $color-gray-60;
-          font-size: $fs12;
-
-          // @include text-ellipsis;
-          width: 174px;
-        }
-        .timeago {
-          margin-top: -2px;
-          font-size: $fs12;
-          color: $color-gray-30;
-        }
-      }
-
-      .avatar {
-        display: flex;
-        align-items: center;
-        padding-right: 6px;
-
-        img {
-          border-radius: 50%;
-          flex-shrink: 0;
-          height: 24px;
-          width: 24px;
-        }
-      }
-
-      .options-resolve {
-        position: absolute;
-        right: 20px;
-        top: 0px;
-        width: 16px;
-        height: 16px;
-
-        cursor: pointer;
-
-        svg {
-          width: 16px;
-          height: 16px;
-          fill: $color-gray-30;
-        }
-      }
-
-      .options {
-        position: absolute;
-        right: -2px;
-        top: 2px;
-        height: 16px;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-
-        .options-icon {
-          svg {
-            width: 14px;
-            height: 14px;
-            fill: $color-black;
-          }
-        }
-      }
-    }
-
-    .content {
-      margin: $size-4 0;
-      font-size: $fs14;
-      color: $color-black;
-      .text {
-        margin: 0 $size-2 0 26px;
-        white-space: pre-wrap;
-        display: inline-block;
-        word-break: break-word;
-      }
-    }
-  }
-
-  .comment-options-dropdown {
-    top: 7px;
-    right: 7px;
-    width: 150px;
-
-    border: 1px solid #b1b2b5;
-  }
-}
-
-.workspace-comment-threads-sidebar-header {
-  display: flex;
-  background-color: $color-black;
-  height: 34px;
-  align-items: center;
-  padding: 0px 9px;
-  color: $color-gray-10;
-  font-size: $fs12;
-  justify-content: space-between;
-
-  .options {
-    display: flex;
-    margin-right: 3px;
-    cursor: pointer;
-
-    .label {
-      padding-right: 8px;
-    }
-
-    .icon {
-      display: flex;
-      align-items: center;
-    }
-
-    svg {
-      fill: $color-gray-10;
-      width: 10px;
-      height: 10px;
-    }
-  }
-
-  .dropdown {
-    top: 80px;
-    right: 7px;
-  }
-}
-
-.comment-threads-section {
-  pointer-events: auto;
-
-  .thread-groups {
-    height: calc(100% - 34px);
-    overflow-y: scroll;
-    hr {
-      border: 0;
-      height: 1px;
-      background-color: $color-gray-30;
-      margin: 0px 0px;
-    }
-  }
-
-  .thread-group {
-    display: flex;
-    flex-direction: column;
-    font-size: $fs12;
-
-    .section-title {
-      margin: 0px 10px;
-      margin-top: 15px;
-
-      .icon {
-        margin-right: 4px;
-      }
-
-      .label {
-        &.filename {
-          font-weight: $fw700;
-        }
-      }
-
-      svg {
-        fill: $color-gray-10;
-        height: 10px;
-        width: 10px;
-      }
-    }
-  }
-
-  .thread-bubble {
-    position: unset;
-    transform: unset;
-    width: 24px;
-    height: 24px;
-    margin-right: 6px;
-    box-shadow: unset;
-  }
-
-  .comment {
-    cursor: pointer;
-    .author {
-      margin-bottom: $size-4;
-      .name {
-        display: flex;
-
-        .fullname {
-          width: unset;
-          max-width: 170px;
-          color: $color-gray-20;
-          padding-right: 3px;
-        }
-        .timeago {
-          margin-top: unset;
-          color: $color-gray-20;
-        }
-      }
-    }
-
-    .content {
-      margin-top: 0px;
-      color: $color-white;
-
-      &.replies {
-        margin: 0 $size-2 0 26px;
-        display: flex;
-        .total-replies {
-          margin-right: 9px;
-          color: $color-info;
-        }
-
-        .new-replies {
-          color: $color-primary;
-        }
-      }
-    }
-  }
-}
-
-.viewer-comments-container {
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-}
-
-.workspace-comments-container {
-  width: 100%;
-  height: 100%;
-  grid-column: 1 / span 2;
-  grid-row: 1 / span 2;
-  z-index: 1000;
-  pointer-events: none;
-  overflow: hidden;
-  user-select: text;
-
-  .threads {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-  }
-}
+@use "common/refactor/common-refactor.scss" as *;
 
 .dashboard-comments-section {
-  width: 25px;
-  height: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: $color-dashboard;
-  border-radius: $br3;
   position: relative;
+  border-radius: $br-8;
 
-  .button {
-    width: 25px;
-    height: 25px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: $color-dashboard;
-    border-radius: $br3;
-
-    svg {
-      width: 15px;
-      height: 15px;
-    }
-
-    &.unread {
-      background-color: $color-warning;
-      svg {
-        fill: #2e3434;
-      }
-    }
-
-    &.open {
-      background-color: $color-black;
-      svg {
-        fill: $color-primary;
-      }
-    }
+  button {
+    cursor: pointer;
+    background: none;
+    border: none;
   }
+}
 
-  .dropdown {
-    width: 280px;
-    bottom: 35px;
-    left: 0px;
+.thread-groups {
+  height: calc(100% - $s-32);
+  overflow-y: scroll;
+  max-height: $s-440;
+  overflow: auto;
+
+  hr {
+    background-color: $df-primary;
+    border: 0;
+    height: $s-1;
+    margin: 0;
   }
+}
 
-  .header {
-    display: flex;
-    height: 40px;
-    align-items: center;
-    padding: 0px 11px;
-
-    h3 {
-      font-weight: $fw400;
-      color: $color-black;
-      font-size: $fs14;
-      // line-height: $lh-128; // Original value was $fs18 => 1.125rem = 18px; 18px/14px = 128.571428571% => $lh-128 (rounded)
-      flex-grow: 1;
-    }
-
-    .close {
-      display: flex;
-      align-items: center;
-    }
-
-    svg {
-      width: 15px;
-      height: 15px;
-      transform: rotate(45deg);
-    }
-  }
-
-  .thread-groups {
-    max-height: calc(30rem - 40px);
-    overflow: auto;
-
-    hr {
-      background-color: $color-gray-10;
-    }
-  }
-
-  .thread-group .section-title {
-    color: $color-black;
-  }
-
-  .comment {
-    .author .name .fullname {
-      color: $color-gray-40;
-    }
-    .content {
-      color: $color-black;
-    }
-  }
+.thread-group {
+  display: flex;
+  flex-direction: column;
+  font-size: $fs-12;
 }
 
 .thread-groups-placeholder {
   align-items: center;
   display: flex;
   flex-direction: column;
-  font-size: $fs12;
-  padding: $size-5;
+  font-size: $fs-12;
+  padding: $s-24;
   text-align: center;
 
   svg {
-    fill: $color-gray-20;
-    height: 24px;
-    margin-bottom: $size-5;
-    width: 24px;
+    fill: $df-secondary;
+    height: $s-24;
+    margin-bottom: $s-24;
+    width: $s-24;
   }
 }
 
-.dashboard-comments-section {
-  border-color: transparent;
-  border-radius: 8px;
-  background-color: $db-primary;
-  height: 32px;
-  width: 32px;
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $br-8;
+  height: $s-32;
+  width: $s-32;
 
-  .button {
-    border-radius: 8px;
-    background-color: $db-primary;
-    height: 32px;
-    width: 32px;
+  svg {
+    width: $s-16;
+    height: $s-16;
+    fill: $df-secondary;
+  }
+
+  &.unread svg,
+  &.open svg {
+    fill: $da-tertiary;
+  }
+
+  &:hover {
+    background-color: $db-cuaternary;
 
     svg {
-      fill: $df-secondary;
-    }
-
-    &:hover {
-      background-color: $db-cuaternary;
-
-      svg {
-        fill: $da-primary;
-      }
+      fill: $da-primary;
+    }
+  }
+}
+
+.dropdown {
+  background-color: $db-tertiary;
+  border-radius: $br-8;
+  border: $s-1 solid transparent;
+  bottom: $s-4;
+  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
+  height: 40vh;
+  max-height: $s-480;
+  min-height: $s-200;
+  position: absolute;
+  width: 100%;
+  z-index: 12;
+
+  hr {
+    margin: 0;
+    border-color: $df-secondary;
+  }
+}
+
+.header {
+  display: flex;
+  height: $s-40;
+  align-items: center;
+  padding: 0 $s-12;
+
+  h3 {
+    color: $df-secondary;
+    font-size: $fs-11;
+    line-height: 1.28;
+    flex-grow: 1;
+    text-transform: uppercase;
+  }
+
+  .close {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    svg {
+      width: $s-16;
+      height: $s-16;
+      transform: rotate(45deg);
+      fill: $df-secondary;
     }
   }
 }
diff --git a/frontend/src/app/main/ui/dashboard/files.scss b/frontend/src/app/main/ui/dashboard/files.scss
index 6e68a7bc9..72b0485a5 100644
--- a/frontend/src/app/main/ui/dashboard/files.scss
+++ b/frontend/src/app/main/ui/dashboard/files.scss
@@ -1,237 +1,28 @@
-@import "common/dependencies/colors";
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
 
-// FIXME: Mostly duplcated from projects.css
-
-$br3: 3px;
-$fs14: 0.875rem;
-$fs18: 1.125rem;
-$fs22: 1.375rem;
-$fw400: 400;
-$fw600: 600;
-$lh-088: 0.88;
-$lh-115: 1.15; // original $title-lh-sm
-$size-1: 0.25rem;
-$size-2: 0.5rem;
-$size-4: 1rem;
-$size-5: 1.5rem;
-$size-6: 2rem;
+@use "common/refactor/common-refactor.scss" as *;
+@use "common/refactor/common-dashboard";
 
 .dashboard-container {
-  background-color: $color-dashboard;
   flex: 1 0 0;
-  margin-right: $size-4;
+  margin-right: $s-16;
   overflow-y: auto;
   width: 100%;
+  border-top: $s-1 solid $db-cuaternary;
+
   &.dashboard-projects {
     user-select: none;
   }
-  &.no-bg {
-    background-color: transparent;
-  }
   &.dashboard-shared {
-    width: calc(100vw - 320px);
-    margin-right: 50px;
+    width: calc(100vw - $s-320);
+    margin-right: $s-52;
   }
 
   &.search {
-    margin-top: 10px;
-  }
-}
-
-.dashboard-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $color-white;
-  height: 63px;
-  padding: $size-1 $size-4 $size-1 $size-2;
-  position: relative;
-  z-index: 10;
-  user-select: none;
-  &.team {
-    display: grid;
-    grid-template-columns: 20% 1fr 20%;
-  }
-
-  .element-name {
-    margin-right: $size-2;
-  }
-
-  .btn-secondary {
-    flex-shrink: 0;
-    z-index: 10;
-    height: 32px;
-  }
-
-  svg {
-    fill: $color-black;
-    height: 14px;
-    margin-right: $size-1;
-    width: 14px;
-  }
-
-  nav {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    z-index: 1;
-
-    ul {
-      display: flex;
-      font-size: $fs14;
-      justify-content: center;
-      margin: 0;
-    }
-
-    li {
-      a {
-        display: flex;
-        align-items: center;
-        flex-basis: 140px;
-        border-bottom: 3px solid transparent;
-        color: $color-gray-30;
-        height: 40px;
-        padding: $size-1 $size-5;
-        font-weight: $fw400;
-        &:hover {
-          color: $color-black;
-          text-decoration: none;
-        }
-      }
-
-      &.active {
-        a {
-          color: $color-black;
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  .dashboard-title {
-    display: flex;
-    align-items: center;
-    margin-left: 13px;
-
-    h1 {
-      color: $color-black;
-      display: flex;
-      flex-shrink: 0;
-      font-size: $fs22;
-      font-weight: $fw600;
-      z-index: 10;
-      user-select: all;
-    }
-
-    .context-menu.is-open {
-      margin-top: 10px;
-    }
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-left: $size-2;
-    z-index: 10;
-
-    svg {
-      fill: $color-gray-40;
-      width: 15px;
-      height: 15px;
-
-      &:hover {
-        fill: $color-primary-dark;
-      }
-    }
-  }
-
-  .dashboard-buttons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .dashboard-header-actions {
-    display: flex;
-  }
-
-  .pin-icon {
-    margin: 0 $size-2 0 $size-5;
-    background-color: transparent;
-    border: none;
-    svg {
-      fill: $color-gray-20;
-    }
-
-    &.active {
-      svg {
-        fill: $color-gray-50;
-      }
-    }
-  }
-}
-
-.dashboard-header {
-  background-color: transparent;
-  .dashboard-title {
-    h1 {
-      color: $df-primary;
-      font-size: 24px;
-      font-weight: 400;
-      width: 100%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      display: block;
-      max-width: 700px;
-    }
-  }
-  .icon {
-    svg {
-      fill: $df-secondary;
-    }
-  }
-
-  // Settings sub-menu
-  .dashboard-header-options {
-    li {
-      a {
-        font-size: 16px;
-        color: $df-secondary;
-        border-color: transparent;
-        &:hover {
-          color: $df-primary;
-        }
-      }
-      &.active {
-        a {
-          color: $df-primary;
-        }
-      }
-    }
-  }
-}
-
-.btn-secondary {
-  background-color: $db-tertiary;
-  text-transform: uppercase;
-  border: none;
-  color: $df-primary;
-  border-radius: 8px;
-
-  font-size: 0.75rem;
-  padding: 0 1rem;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &:hover {
-    background-color: $db-cuaternary;
-    color: $da-primary;
-    svg {
-      fill: $da-primary;
-    }
+    margin-top: $s-12;
   }
 }
diff --git a/frontend/src/app/main/ui/dashboard/fonts.cljs b/frontend/src/app/main/ui/dashboard/fonts.cljs
index e8551a5ae..cedfdaf56 100644
--- a/frontend/src/app/main/ui/dashboard/fonts.cljs
+++ b/frontend/src/app/main/ui/dashboard/fonts.cljs
@@ -122,6 +122,17 @@
          [:h2 (tr "labels.upload-custom-fonts")]
          [:& i18n/tr-html {:label "dashboard.fonts.hero-text1"}]
 
+         [:button
+          {:class (stl/css :btn-primary)
+           :on-click on-click
+           :tab-index "0"}
+          [:span (tr "labels.add-custom-font")]
+          [:& file-uploader {:input-id "font-upload"
+                             :accept cm/str-font-types
+                             :multi true
+                             :ref input-ref
+                             :on-selected on-selected}]]
+
          [:div {:class (stl/css :banner)}
           [:div {:class (stl/css :icon)} i/msg-info]
           [:div {:class (stl/css :content)}
@@ -135,16 +146,7 @@
              [:& i18n/tr-html {:tag-name "span"
                                :label "dashboard.fonts.warning-text"}]]])]
 
-        [:button
-         {:class (stl/css :btn-primary)
-          :on-click on-click
-          :tab-index "0"}
-         [:span (tr "labels.add-custom-font")]
-         [:& file-uploader {:input-id "font-upload"
-                            :accept cm/str-font-types
-                            :multi true
-                            :ref input-ref
-                            :on-selected on-selected}]]]
+        ]
 
        [:*
         (when (some? (vals @fonts))
diff --git a/frontend/src/app/main/ui/dashboard/fonts.scss b/frontend/src/app/main/ui/dashboard/fonts.scss
index 5273c0a9b..7265fa51c 100644
--- a/frontend/src/app/main/ui/dashboard/fonts.scss
+++ b/frontend/src/app/main/ui/dashboard/fonts.scss
@@ -1,621 +1,316 @@
-@import "common/dependencies/colors";
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
 
-$br3: 3px;
-$fs12: 0.75rem;
-$fs14: 0.875rem;
-$fs14: 0.875rem;
-$fs18: 1.125rem;
-$fs22: 1.375rem;
-$fw400: 400;
-$fw600: 600;
-$lh-088: 0.88;
-$lh-115: 1.15; // original $title-lh-sm
-$size-1: 0.25rem;
-$size-2: 0.5rem;
-$size-4: 1rem;
-$size-5: 1.5rem;
-$size-6: 2rem;
-
-.dashboard-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $color-white;
-  height: 63px;
-  padding: $size-1 $size-4 $size-1 $size-2;
-  position: relative;
-  z-index: 10;
-  user-select: none;
-  &.team {
-    display: grid;
-    grid-template-columns: 20% 1fr 20%;
-  }
-
-  .element-name {
-    margin-right: $size-2;
-  }
-
-  .btn-secondary {
-    flex-shrink: 0;
-    z-index: 10;
-    height: 32px;
-  }
-
-  svg {
-    fill: $color-black;
-    height: 14px;
-    margin-right: $size-1;
-    width: 14px;
-  }
-
-  nav {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    z-index: 1;
-
-    ul {
-      display: flex;
-      font-size: $fs14;
-      justify-content: center;
-      margin: 0;
-    }
-
-    li {
-      a {
-        display: flex;
-        align-items: center;
-        flex-basis: 140px;
-        border-bottom: 3px solid transparent;
-        color: $color-gray-30;
-        height: 40px;
-        padding: $size-1 $size-5;
-        font-weight: $fw400;
-        &:hover {
-          color: $color-black;
-          text-decoration: none;
-        }
-      }
-
-      &.active {
-        a {
-          color: $color-black;
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  .dashboard-title {
-    display: flex;
-    align-items: center;
-    margin-left: 13px;
-
-    h1 {
-      color: $color-black;
-      display: flex;
-      flex-shrink: 0;
-      font-size: $fs22;
-      font-weight: $fw600;
-      z-index: 10;
-      user-select: all;
-    }
-
-    .context-menu.is-open {
-      margin-top: 10px;
-    }
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-left: $size-2;
-    z-index: 10;
-
-    svg {
-      fill: $color-gray-40;
-      width: 15px;
-      height: 15px;
-
-      &:hover {
-        fill: $color-primary-dark;
-      }
-    }
-  }
-
-  .dashboard-buttons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .dashboard-header-actions {
-    display: flex;
-  }
-
-  .pin-icon {
-    margin: 0 $size-2 0 $size-5;
-    background-color: transparent;
-    border: none;
-    svg {
-      fill: $color-gray-20;
-    }
-
-    &.active {
-      svg {
-        fill: $color-gray-50;
-      }
-    }
-  }
-}
-
-.dashboard-header {
-  background-color: transparent;
-  .dashboard-title {
-    h1 {
-      color: $df-primary;
-      font-size: 24px;
-      font-weight: 400;
-      width: 100%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      display: block;
-      max-width: 700px;
-    }
-  }
-  .icon {
-    svg {
-      fill: $df-secondary;
-    }
-  }
-
-  // Settings sub-menu
-  .dashboard-header-options {
-    li {
-      a {
-        font-size: 16px;
-        color: $df-secondary;
-        border-color: transparent;
-        &:hover {
-          color: $df-primary;
-        }
-      }
-      &.active {
-        a {
-          color: $df-primary;
-        }
-      }
-    }
-  }
-}
+@use "common/refactor/common-refactor.scss" as *;
+@use "common/refactor/common-dashboard";
 
 .dashboard-fonts {
+  border-top: $s-1 solid $db-cuaternary;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  padding-left: $s-120;
+  overflow-y: auto;
+  padding-bottom: $s-120;
+}
 
-  .dashboard-installed-fonts {
-    max-width: 1000px;
-    width: 100%;
-    display: flex;
-    margin-top: $size-5;
-    flex-direction: column;
+.dashboard-installed-fonts {
+  max-width: $s-1000;
+  width: 100%;
+  display: flex;
+  margin-top: $s-24;
+  flex-direction: column;
 
-    h3 {
-      font-size: $fs14;
-      color: $color-gray-30;
-      margin: $size-1;
-    }
-
-    .font-item {
-      color: $color-black;
-    }
-  }
-
-  .installed-fonts-header {
-    color: $color-gray-40;
-    display: flex;
-    height: 40px;
-    font-size: $fs12;
-    background-color: $color-white;
-    align-items: center;
-    padding: 0px $size-5;
-
-    > .family {
-      min-width: 200px;
-      width: 200px;
-    }
-
-    > .variants {
-      padding-left: 12px;
-    }
-
-    .search-input {
-      display: flex;
-      flex-grow: 1;
-      justify-content: flex-end;
-
-      input {
-        font-size: $fs12;
-        border: 1px solid $color-gray-30;
-        border-radius: $br3;
-        width: 130px;
-        padding: $size-1;
-        margin: 0px;
-      }
-    }
+  h3 {
+    font-size: $fs-14;
+    color: $df-secondary;
+    margin: $s-4;
   }
 
   .font-item {
-    color: $color-gray-40;
-    font-size: $fs14;
-    background-color: $color-white;
-    display: flex;
-    max-width: 1000px;
-    width: 100%;
-    min-height: 97px;
-    align-items: center;
-    padding: $size-5;
-    justify-content: space-between;
-
-    &:not(:first-child) {
-      border-top: 1px solid $color-gray-10;
-    }
-
-    input {
-      border: 1px solid $color-gray-30;
-      border-radius: $br3;
-      margin: 0px;
-      padding: $size-2;
-      font-size: $fs12;
-    }
-
-    > .family {
-      min-width: 200px;
-      width: 200px;
-    }
-
-    > .filenames {
-      min-width: 200px;
-    }
-
-    > .variants {
-      font-size: $fs14;
-      display: flex;
-      flex-wrap: wrap;
-      flex-grow: 1;
-
-      .variant {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 8px 12px;
-        cursor: pointer;
-
-        .icon {
-          display: flex;
-          height: 16px;
-          width: 16px;
-          margin-left: 6px;
-          align-items: center;
-          svg {
-            fill: transparent;
-            width: 12px;
-            height: 12px;
-            transform: rotate(45deg);
-          }
-        }
-
-        &:hover {
-          .icon svg {
-            fill: $color-gray-30;
-          }
-        }
-      }
-    }
-
-    .filenames {
-      display: flex;
-      flex-direction: column;
-      font-size: $fs12;
-    }
-
-    .options {
-      display: flex;
-      justify-content: flex-end;
-      min-width: 180px;
-
-      .icon {
-        width: $size-5;
-        cursor: pointer;
-        display: flex;
-        margin-left: 10px;
-        justify-content: center;
-        align-items: center;
-        &.failure {
-          margin-right: 10px;
-          svg {
-            fill: $color-warning;
-          }
-        }
-        svg {
-          width: 16px;
-          height: 16px;
-          fill: $df-secondary;
-        }
-
-        &.close {
-          svg {
-            transform: rotate(45deg);
-            fill: $df-secondary;
-          }
-        }
-      }
-    }
-  }
-
-  .dashboard-fonts-upload {
-    max-width: 1000px;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-
-    .upload-button {
-      width: 100px;
-    }
-
-    .btn-secondary {
-      margin-left: 10px;
-    }
-  }
-
-  .dashboard-fonts-hero {
-    font-size: $fs14;
-    padding: $size-6;
-    background-color: $color-white;
-    margin-top: $size-6;
-    display: flex;
-    justify-content: space-between;
-
-    .banner {
-      background-color: $color-info-lighter;
-      display: grid;
-      grid-template-columns: 40px 1fr;
-      &:not(:last-child) {
-        margin-bottom: 10px;
-      }
-      .icon {
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
-        padding-top: 10px;
-        background-color: $color-info;
-        svg {
-          fill: $color-white;
-          height: 20px;
-          width: 20px;
-        }
-      }
-      .content {
-        margin: 10px;
-      }
-      &.warning {
-        background-color: $color-warning-lighter;
-        .icon {
-          background-color: $color-warning;
-        }
-      }
-    }
-
-    .desc {
-      h2 {
-        margin-bottom: $size-4;
-        color: $color-black;
-      }
-      width: 80%;
-      color: $color-gray-40;
-    }
-
-    .btn-primary {
-      flex-shrink: 0;
-    }
-  }
-
-  .fonts-placeholder {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    max-width: 1000px;
-    width: 100%;
-    height: 161px;
-
-    border: 1px dashed $color-gray-20;
-    margin-top: 16px;
-
-    .icon {
-      svg {
-        fill: $color-gray-40;
-        width: 32px;
-        height: 32px;
-      }
-    }
-
-    .label {
-      color: $color-gray-40;
-      font-size: $fs14;
-    }
+    color: $db-secondary;
   }
 }
 
-.dashboard-fonts {
-  background-color: $db-primary;
-  border-top: 1px solid $db-cuaternary;
+.installed-fonts-header {
+  align-items: center;
+  color: $df-secondary;
+  display: flex;
+  font-size: $fs-12;
+  height: $s-40;
+  padding-left: $s-24;
+  text-transform: uppercase;
 
-  .dashboard-fonts-hero {
-    background-color: transparent;
-    .desc {
-      width: 70%;
-      h2 {
-        color: $df-primary;
-        font-weight: 400;
-      }
-      p {
-        color: $df-secondary;
-        font-size: 14px;
-      }
-      .banner {
-        background-color: $db-primary;
-        border-radius: 8px;
-        border: 1px solid $db-cuaternary;
-        color: $df-primary;
-        font-size: 12px;
-        .content {
-          span {
-            a {
-              color: $da-primary;
-            }
-          }
-        }
-        .icon {
-          background-color: transparent;
-          svg {
-            fill: $df-secondary;
-          }
-        }
-        &.warning {
-          background-color: $db-cuaternary;
-        }
-      }
-    }
+  > .family {
+    min-width: $s-200;
+    width: $s-200;
   }
 
-  .installed-fonts-header {
-    background-color: transparent;
-    text-transform: uppercase;
-    color: $df-secondary;
+  > .variants {
+    padding-left: $s-12;
   }
+}
 
-  .fonts-placeholder {
-    border: 1px solid $db-cuaternary;
-    border-radius: 8px;
-    .icon {
-      svg {
-        fill: $df-secondary;
-      }
+.search-input {
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
+
+  input {
+    background-color: $db-tertiary;
+    border-color: transparent;
+    border-radius: $br-8;
+    border: $s-1 solid transparent;
+    color: $df-primary;
+    font-size: $fs-14;
+    height: $s-32;
+    margin: 0;
+    padding: 0 $s-8;
+    width: $s-152;
+
+    &:focus {
+      outline: $s-1 solid $da-primary;
     }
-    .label {
+    &::placeholder {
       color: $df-secondary;
     }
   }
-
-  .font-item {
-    background-color: $db-tertiary;
-    border-radius: 8px;
-    color: $df-secondary;
-    padding: 0.8rem 1.5rem;
-    min-height: auto;
-    margin-top: 4px;
-    &:not(:first-child) {
-      border: none;
-    }
-    .table-field {
-      color: $df-primary;
-      .variant {
-        background-color: $db-cuaternary;
-        border-radius: 8px;
-        margin-right: 4px;
-        padding-right: 4px;
-      }
-    }
-  }
-
-  .font-item {
-    input {
-      background-color: $db-tertiary;
-      border-color: transparent;
-      border-radius: 8px;
-      color: $df-primary;
-      font-size: 14px;
-      &:focus {
-        outline: 1px solid $da-primary;
-      }
-    }
-    > .variants {
-      padding-left: 1rem;
-    }
-  }
-
-  .installed-fonts-header {
-    padding-right: 0;
-    .search-input {
-      input {
-        background-color: $db-tertiary;
-        border-color: transparent;
-        border-radius: 8px;
-        color: $df-primary;
-        font-size: 14px;
-        height: 32px;
-        padding: 0 0.6rem;
-        width: 150px;
-        &:focus {
-          outline: 1px solid $da-primary;
-        }
-        &::placeholder {
-          color: $df-secondary;
-        }
-      }
-    }
-  }
 }
 
-.btn-primary {
-  background-color: $da-tertiary;
-  border-radius: 8px;
-  color: $db-primary;
-  height: 32px;
-  text-transform: uppercase;
-
-  appearance: none;
+.font-item {
   align-items: center;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  font-family: "worksans", sans-serif;
-  font-size: $fs12;
-  justify-content: center;
-  min-width: 25px;
-  padding: 0 1rem;
-  transition: all 0.4s;
-  text-decoration: none;
-
-  &:hover {
-    background-color: darken($da-tertiary, 10%);
-    color: $db-primary;
-  }
-}
-
-.btn-secondary {
   background-color: $db-tertiary;
-  text-transform: uppercase;
-  border: none;
-  color: $df-primary;
-  border-radius: 8px;
-
-  font-size: 0.75rem;
-  padding: 0 1rem;
-  cursor: pointer;
+  border-radius: $br-4;
+  color: $df-secondary;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  font-size: $fs-14;
+  justify-content: space-between;
+  margin-top: $s-4;
+  max-width: $s-1000;
+  padding: $s-12 $s-24;
+  width: 100%;
 
-  &:hover {
-    background-color: $db-cuaternary;
-    color: $da-primary;
-    svg {
-      fill: $da-primary;
+  input {
+    border: $s-1 solid transparent;
+    margin: 0;
+    padding: $s-8;
+
+    background-color: $db-tertiary;
+    border-radius: $br-8;
+    color: $df-primary;
+    font-size: $fs-14;
+
+    &:focus {
+      outline: $s-1 solid $da-primary;
+    }
+  }
+
+  > .family {
+    min-width: $s-200;
+    width: $s-200;
+  }
+
+  > .filenames {
+    min-width: $s-200;
+  }
+
+  > .variants {
+    font-size: $fs-14;
+    display: flex;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    padding-left: $s-16;
+
+    .variant {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: $s-8 $s-12;
+      cursor: pointer;
+
+      .icon {
+        display: flex;
+        height: $s-16;
+        width: $s-16;
+        margin-left: $s-6;
+        align-items: center;
+        svg {
+          fill: transparent;
+          width: $s-12;
+          height: $s-12;
+          transform: rotate(45deg);
+        }
+      }
+
+      &:hover {
+        .icon svg {
+          fill: $df-secondary;
+        }
+      }
+    }
+  }
+
+  .table-field {
+    color: $df-primary;
+    .variant {
+      background-color: $db-cuaternary;
+      border-radius: $br-8;
+      margin-right: $s-4;
+      padding-right: $s-4;
+    }
+  }
+
+  .filenames {
+    display: flex;
+    flex-direction: column;
+    font-size: $fs-12;
+  }
+
+  .options {
+    display: flex;
+    justify-content: flex-end;
+    min-width: $s-180;
+
+    .icon {
+      width: $s-24;
+      cursor: pointer;
+      display: flex;
+      margin-left: $s-12;
+      justify-content: center;
+      align-items: center;
+      &.failure {
+        margin-right: $s-12;
+        svg {
+          fill: var(--warning-color);
+        }
+      }
+      svg {
+        width: $s-16;
+        height: $s-16;
+        fill: $df-secondary;
+      }
+
+      &.close {
+        svg {
+          transform: rotate(45deg);
+          fill: $df-secondary;
+        }
+      }
     }
   }
 }
+
+.dashboard-fonts-upload {
+  max-width: $s-1000;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .upload-button {
+    width: $s-100;
+  }
+
+  .btn-secondary {
+    margin-left: $s-12;
+  }
+}
+
+.dashboard-fonts-hero {
+  font-size: $fs-14;
+  padding: $s-32 0;
+  margin-top: $s-80;
+  display: flex;
+  justify-content: space-between;
+
+  .btn-primary {
+    height: $s-40;
+    width: 100%;
+  }
+
+  .desc {
+    display: flex;
+    flex-direction: column;
+    gap: $s-24;
+    color: $db-secondary;
+    width: $s-500;
+
+    h2 {
+      color: $df-primary;
+      font-weight: 400;
+    }
+    p {
+      color: $df-secondary;
+      font-size: $fs-16;
+    }
+  }
+
+  .banner {
+    overflow: hidden;
+    display: grid;
+    grid-template-columns: $s-40 1fr;
+
+    background-color: $db-primary;
+    border-radius: $br-12;
+    border: $s-1 solid $db-cuaternary;
+    color: $df-primary;
+    font-size: $fs-12;
+
+    &:not(:last-child) {
+      margin-bottom: $s-12;
+    }
+    .icon {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      padding-top: $s-12;
+
+      svg {
+        fill: $df-secondary;
+        height: $s-20;
+        width: $s-20;
+      }
+    }
+    .content {
+      margin: $s-12;
+      a {
+        color: $da-primary;
+      }
+    }
+    &.warning {
+      background-color: $db-cuaternary;
+      .icon svg {
+        fill: var(--warning-color);
+      }
+    }
+  }
+
+  .btn-primary {
+    flex-shrink: 0;
+  }
+}
+
+.fonts-placeholder {
+  align-items: center;
+  border-radius: $br-8;
+  border: $s-1 solid $db-cuaternary;
+  display: flex;
+  flex-direction: column;
+  height: $s-160;
+  justify-content: center;
+  margin-top: $s-16;
+  max-width: $s-1000;
+  width: 100%;
+
+  .icon svg {
+    fill: $df-secondary;
+    width: $s-32;
+    height: $s-32;
+  }
+
+  .label {
+    color: $df-secondary;
+    font-size: $fs-14;
+  }
+}
diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs
index 61b58cf4e..2241a7239 100644
--- a/frontend/src/app/main/ui/dashboard/grid.cljs
+++ b/frontend/src/app/main/ui/dashboard/grid.cljs
@@ -313,11 +313,17 @@
       [:span.date time])))
 
 (defn create-counter-element
-  [_element file-count]
-  (let [counter-el (dom/create-element "div")]
-    (dom/set-property! counter-el "class" "drag-counter")
-    (dom/set-text! counter-el (str file-count))
-    counter-el))
+  [_element file-count new-css-system]
+  (if new-css-system
+    (let [counter-el (dom/create-element "div")]
+      (dom/set-property! counter-el "class" (stl/css :drag-counter))
+      (dom/set-text! counter-el (str file-count))
+      counter-el)
+
+    (let [counter-el (dom/create-element "div")]
+      (dom/set-property! counter-el "class" "drag-counter")
+      (dom/set-text! counter-el (str file-count))
+      counter-el)))
 
 (mf/defc grid-item
   {:wrap [mf/memo]}
@@ -366,10 +372,12 @@
                  select-current? (not (contains? selected-files (:id file)))
 
                  item-el         (mf/ref-val node-ref)
-                 counter-el      (create-counter-element item-el
-                                                         (if select-current?
-                                                           1
-                                                           (count selected-files)))]
+                 counter-el      (create-counter-element
+                                  item-el
+                                  (if select-current?
+                                    1
+                                    (count selected-files))
+                                  new-css-system)]
              (when select-current?
                (st/emit! (dd/clear-selected-files))
                (st/emit! (dd/toggle-file-select file)))
@@ -829,5 +837,3 @@
           {:dragging? @dragging?
            :limit limit
            :create-fn create-fn}])])))
-
-
diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss
index 8446762ca..096ef6903 100644
--- a/frontend/src/app/main/ui/dashboard/grid.scss
+++ b/frontend/src/app/main/ui/dashboard/grid.scss
@@ -1,517 +1,375 @@
-@import "common/dependencies/colors";
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
 
-$size-1: 0.25rem;
-$size-2: 0.5rem;
-$size-3: 0.75rem;
-$size-4: 1rem;
-$size-6: 2rem;
-$fs12: 0.75rem;
-$fs14: 0.875rem;
-$fs18: 1.125rem;
-$fw400: 400;
-$fw500: 500;
-$bp-max-1366: "(max-width: 1366px)";
-$br2: 2px;
-$br3: 3px;
-$br4: 4px;
-$br5: 5px;
-$lh-192: 1.92;
+@import "refactor/common-refactor.scss";
 
 .dashboard-grid {
-  font-size: $fs14;
+  font-size: $fs-14;
   height: 100%;
-  overflow: hidden;
   overflow-y: auto;
-  margin-bottom: 0;
+  overflow: hidden;
+}
 
-  .grid-row {
-    display: grid;
-    width: 99%;
-    margin-left: 13px;
+.grid-row {
+  display: grid;
+  width: 100%;
+  padding: 0 $s-12;
+}
+
+.grid-item {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 $s-260;
+  height: $s-232;
+  margin: $s-12 $s-16 $s-16 $s-8;
+  position: relative;
+  text-align: center;
+
+  a,
+  button {
+    width: 100%;
+    font-weight: $fw400;
+  }
+  button {
+    background-color: transparent;
+    border: none;
   }
 
-  .grid-item {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    flex: 1 0 260px;
-    height: 230px;
-    margin: $size-3 $size-4 $size-4 $size-2;
-    position: relative;
-    text-align: center;
-    a,
-    button {
-      width: 100%;
-      font-weight: $fw400;
-    }
-    button {
-      background-color: transparent;
-      border: none;
-    }
-    @media #{$bp-max-1366} {
-      height: 200px;
-      flex: 1 0 230px;
-    }
-
-    &:hover {
-      .grid-item-th {
-        border: 2px solid $color-primary;
-      }
-    }
-
-    .grid-item-th {
-      border-radius: $br3;
-      border: 2px solid lighten($color-gray-20, 15%);
-      text-align: initial;
-
-      img {
-        object-fit: contain;
-      }
-    }
-
-    &.dragged {
-      border-radius: $br3;
-      border: 2px solid lighten($color-gray-20, 15%);
-      text-align: initial;
-      max-height: 160px;
-    }
-
-    &.placeholder {
-      min-width: 115px;
-      max-width: 115px;
-
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      .placeholder-icon {
-        svg {
-          transform: rotate(-90deg);
-          width: 20px;
-          height: 20px;
-          fill: $color-gray-30;
-        }
-      }
-
-      .placeholder-label {
-        font-size: $fs14;
-      }
-    }
-
-    &.overlay {
-      border-radius: $br4;
-      border: 2px solid $color-primary;
-      height: 100%;
-      opacity: 0;
-      pointer-events: none;
-      position: absolute;
-      width: 100%;
-      z-index: 1;
-    }
-
-    &:hover .overlay {
-      display: block;
-      opacity: 1;
-    }
-
-    &.small-item {
-      max-width: 12%;
-      min-width: 190px;
-      padding: $size-4;
-      justify-content: center;
-    }
-
-    .grid-item-icon {
-      width: 90px;
-      height: 90px;
-    }
-    .info-wrapper {
-      display: grid;
-      grid-template-columns: 1fr auto;
-    }
-
-    .item-info {
-      display: grid;
-      padding: $size-2;
-      text-align: left;
-      width: 100%;
-      font-size: $fs12;
-
-      h3 {
-        border: 1px solid transparent;
-        color: $color-gray-60;
-        font-size: $fs14;
-        font-weight: $fw500;
-        overflow: hidden;
-        padding: 0;
-        height: 27px;
-        padding-right: $size-2;
-        text-overflow: ellipsis;
-        width: 100%;
-        white-space: nowrap;
-        line-height: $lh-192; // Original value was 27px; 27px/14px = 192.857142857% => $lh-192 (rounded)
-        max-width: 260px;
-        @media #{$bp-max-1366} {
-          max-width: 230px;
-        }
-      }
-
-      span.date {
-        color: $color-gray-30;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 100%;
-        white-space: nowrap;
-        max-width: 260px;
-        &::first-letter {
-          text-transform: capitalize;
-        }
-        @media #{$bp-max-1366} {
-          max-width: 230px;
-        }
-      }
-
-      .edit-wrapper {
-        .element-title {
-          padding: 0px;
-          height: 25px;
-          color: $color-gray-60;
-          font-size: $fs14;
-          font-weight: $fw400;
-        }
-      }
-    }
-
-    .item-badge {
-      background-color: $color-white;
-      border: 1px solid $color-gray-20;
-      border-radius: $br2;
-      position: absolute;
-      top: $size-2;
-      right: $size-2;
-      height: 32px;
-      width: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      svg {
-        fill: $color-gray-30;
-        height: 16px;
-        width: 16px;
-      }
-    }
-
-    &.add-file {
-      border: 1px dashed $color-gray-20;
-      justify-content: center;
-      box-shadow: none;
-
-      span {
-        color: $color-gray-60;
-        font-size: $fs14;
-      }
-
-      &:hover {
-        background-color: $color-white;
-        border: 2px solid $color-primary;
-      }
-    }
-
-    // PROJECTS, ELEMENTS & ICONS GRID
-    &.project-th {
-      background-color: $color-white;
-
-      &:hover,
-      &:focus,
-      &:focus-within {
-        .project-th-actions {
-          opacity: 1;
-        }
-        a {
-          text-decoration: none;
-        }
-      }
-
-      .selected {
-        .grid-item-th {
-          border: 2px solid $color-primary;
-        }
-      }
-
-      .project-th-actions {
-        align-items: center;
-        opacity: 0;
-        display: flex;
-        right: 5px;
-        justify-content: center;
-        width: 30px;
-        height: 100%;
-
-        span {
-          color: $color-black;
-        }
-
-        .project-th-icon {
-          align-items: center;
-          display: flex;
-          margin-right: $size-2;
-
-          &.menu {
-            margin-right: 0;
-            display: flex;
-            justify-content: center;
-            align-items: flex-end;
-            flex-direction: column;
-            width: 100%;
-            height: 30px;
-            margin-top: 20px;
-
-            > svg {
-              fill: $color-gray-60;
-              margin-right: 0;
-              height: 18px;
-              width: 18px;
-            }
-
-            &:hover,
-            &:focus {
-              > svg {
-                fill: $color-primary-dark;
-              }
-            }
-          }
-        }
-      }
-
-      .project-th-actions.force-display {
-        opacity: 1;
-      }
-    }
-
-    // IMAGES SECTION
-    &.images-th {
-      border: 1px dashed $color-gray-20;
-      border-bottom: 2px solid lighten($color-gray-20, 12%);
-
-      &:hover {
-        border-color: $color-primary;
-      }
-    }
-
-    .grid-item-image {
-      svg {
-        max-height: 100px;
-        max-width: 100px;
-        min-height: 40px;
-        min-width: 40px;
-        width: 8vw;
-      }
-    }
-
-    .color-swatch {
-      border-top-left-radius: $br5;
-      border-top-right-radius: $br5;
-      height: 25%;
-      left: 0;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-
-    .color-data {
-      color: $color-gray-30;
-      margin-top: 15px;
-    }
-
-    .drag-counter {
-      position: absolute;
-      top: 5px;
-      left: 4px;
-      width: 32px;
-      height: 32px;
-      background-color: $color-primary;
-      border-radius: 50%;
-      color: $color-black;
-      font-size: $fs18;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+  @media #{$bp-max-1366} {
+    height: $s-200;
+    flex: 1 0 $s-232;
   }
 
   .grid-item-th {
-    background-position: center;
-    background-size: auto 80%;
-    background-repeat: no-repeat;
-    border-top-left-radius: $br3;
-    border-top-right-radius: $br3;
-    height: 230px;
-    max-height: 160px;
-    overflow: hidden;
-    position: relative;
+    border-radius: $br-4;
+    text-align: initial;
+
+    img {
+      object-fit: contain;
+    }
+  }
+
+  &.dragged {
+    border-radius: $br-4;
+    border: $br-2 solid $da-primary;
+    text-align: initial;
+    max-height: $s-160;
+  }
+
+  &.overlay {
+    border-radius: $br-4;
+    border: $s-2 solid $da-tertiary;
+    height: 100%;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
     width: 100%;
+    z-index: $z-index-1;
+  }
 
-    background-color: $color-canvas;
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
+  &:hover .overlay {
+    display: block;
+    opacity: 1;
+  }
 
-    .img-th {
-      height: auto;
+  .info-wrapper {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    cursor: pointer;
+  }
+
+  .item-info {
+    display: grid;
+    padding: $s-8;
+    text-align: left;
+    width: 100%;
+    font-size: $fs-12;
+
+    h3 {
+      border: $s-1 solid transparent;
+      color: $df-primary;
+      font-size: $fs-16;
+      font-weight: $fw400;
+      height: $s-28;
+      line-height: 1.92;
+      max-width: $s-260;
+      overflow: hidden;
+      padding-right: $s-8;
+      padding: 0;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       width: 100%;
+
+      @media #{$bp-max-1366} {
+        max-width: $s-232;
+      }
+    }
+
+    .date {
+      color: $df-secondary;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+      white-space: nowrap;
+      max-width: $s-260;
+      &::first-letter {
+        text-transform: capitalize;
+      }
+      @media #{$bp-max-1366} {
+        max-width: $s-232;
+      }
+    }
+  }
+
+  .item-badge {
+    background-color: $da-primary;
+    border: none;
+    border-radius: $br-4;
+    position: absolute;
+    top: $s-8;
+    right: $s-8;
+    height: $s-32;
+    width: $s-32;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      fill: $db-secondary;
+      height: $s-16;
+      width: $s-16;
+    }
+  }
+
+  &.add-file {
+    border: $s-1 dashed $df-secondary;
+    justify-content: center;
+    box-shadow: none;
+
+    span {
+      color: $db-primary;
+      font-size: $fs-14;
+    }
+
+    &:hover {
+      background-color: $df-primary;
+      border: $s-2 solid $da-tertiary;
+    }
+  }
+}
+
+.drag-counter {
+  position: absolute;
+  top: $s-4;
+  left: $s-4;
+  width: $s-32;
+  height: $s-32;
+  background-color: $da-tertiary;
+  border-radius: 50%;
+  color: $db-secondary;
+  font-size: $fs-16;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// PROJECTS, ELEMENTS & ICONS GRID
+.project-th {
+  background-color: transparent;
+  border-radius: $br-8;
+  padding-top: $s-6;
+
+  &:hover,
+  &:focus,
+  &:focus-within {
+    background-color: $db-tertiary;
+    .project-th-actions {
+      opacity: 1;
+    }
+    a {
+      text-decoration: none;
+    }
+  }
+
+  .selected {
+    .grid-item-th {
+      border: 2px solid $da-tertiary;
+    }
+  }
+}
+
+.project-th-actions {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  opacity: 0;
+  right: $s-6;
+  width: $s-32;
+
+  span {
+    color: $db-secondary;
+  }
+
+  .project-th-icon {
+    align-items: center;
+    display: flex;
+    margin-right: $s-8;
+    margin-top: 0;
+
+    &.menu {
+      align-items: flex-end;
+      display: flex;
+      flex-direction: column;
+      height: $s-32;
+      justify-content: center;
+      margin-right: 0;
+      margin-top: $s-20;
+      width: 100%;
+
+      > svg {
+        fill: $df-secondary;
+        margin-right: 0;
+        height: $s-16;
+        width: $s-16;
+      }
+
+      &:hover,
+      &:focus {
+        > svg {
+          fill: $da-tertiary;
+        }
+      }
+    }
+  }
+}
+
+.project-th-actions.force-display {
+  opacity: 1;
+}
+
+.grid-item-th {
+  border-radius: $br-4;
+  cursor: pointer;
+
+  background-position: center;
+  background-size: auto 80%;
+  background-repeat: no-repeat;
+
+  height: $s-232;
+  max-height: $s-160;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  background-color: var(--canvas-color);
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+
+  .img-th {
+    height: auto;
+    width: 100%;
+  }
+
+  svg {
+    height: 100%;
+    width: 100%;
+  }
+
+  svg#loader-pencil {
+    fill: $db-cuaternary;
+  }
+}
+
+// LIBRARY VIEW
+.library {
+  height: $s-580;
+}
+
+.grid-item.project-th.library {
+  height: $s-612;
+  width: $s-300;
+}
+
+.grid-item-th.library {
+  background-color: $db-tertiary;
+  flex-direction: column;
+  height: 90%;
+  justify-content: flex-start;
+  max-height: 550px;
+  padding: $s-32;
+
+  .asset-section {
+    font-size: $fs-12;
+    color: $df-secondary;
+
+    &:not(:first-child) {
+      margin-top: $s-16;
+    }
+  }
+
+  .asset-title {
+    display: flex;
+    font-size: $fs-12;
+    text-transform: uppercase;
+
+    .num-assets {
+      color: $df-secondary;
+    }
+  }
+
+  .asset-list-item {
+    align-items: center;
+    border-radius: $br-4;
+    border: $s-1 solid transparent;
+    color: $df-primary;
+    display: flex;
+    font-size: $fs-12;
+    margin-top: $s-4;
+    padding: $s-2;
+    position: relative;
+
+    .name-block {
+      color: $df-secondary;
+      width: calc(100% - $s-24 - $s-8);
+    }
+
+    .item-name {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     svg {
-      height: 100%;
-      width: 100%;
+      background-color: var(--canvas-color);
+      border-radius: $br-4;
+      border: $s-2 solid transparent;
+      height: $s-24;
+      margin-right: $s-8;
+      width: $s-24;
     }
 
-    svg#loader-pencil {
-      fill: $color-gray-20;
-    }
-  }
-
-  // LIBRARY VIEW
-  .grid-item {
-    .library {
-      height: 580px;
+    .color-name {
+      color: $df-primary;
     }
 
-    &.project-th.library {
-      height: 610px;
-      width: 300px;
+    .color-value {
+      color: $df-secondary;
+      margin-left: $s-4;
+      text-transform: uppercase;
     }
 
-    .grid-item-th.library {
-      background-color: $color-gray-50;
-      flex-direction: column;
-      height: 90%;
-      justify-content: flex-start;
-      max-height: 550px;
-      padding: $size-6;
-
-      .asset-section {
-        font-size: $fs12;
-        color: $color-gray-20;
-
-        &:not(:first-child) {
-          margin-top: $size-4;
-        }
-      }
-
-      .asset-title {
-        display: flex;
-        font-size: $fs12;
-        text-transform: uppercase;
-
-        & .num-assets {
-          color: $color-gray-30;
-        }
-      }
-
-      .asset-list-item {
-        display: flex;
-        align-items: center;
-        border: 1px solid transparent;
-        border-radius: $br3;
-        margin-top: $size-1;
-        padding: 2px;
-        font-size: $fs12;
-        color: $color-white;
-        position: relative;
-
-        & .name-block {
-          color: $color-gray-20;
-          width: calc(100% - 24px - #{$size-2});
-        }
-
-        & .item-name {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          display: block;
-        }
-
-        & svg {
-          background-color: $color-canvas;
-          border-radius: $br4;
-          border: 2px solid transparent;
-          height: 24px;
-          width: 24px;
-          margin-right: $size-2;
-        }
-
-        & .color-name {
-          color: $color-white;
-        }
-
-        & .color-value {
-          margin-left: $size-1;
-          color: $color-gray-30;
-          text-transform: uppercase;
-        }
-
-        & .typography-sample {
-          height: 20px;
-          margin-right: $size-1;
-          width: 20px;
-        }
-      }
-    }
-  }
-}
-
-.dashboard-grid {
-  .grid-item {
-    &.project-th {
-      background-color: transparent;
-      border-radius: 8px;
-      padding-top: 0.3rem;
-      .info-wrapper {
-        cursor: pointer;
-        .item-info {
-          h3 {
-            color: $df-primary;
-            font-size: 16px;
-            font-weight: 400;
-          }
-        }
-        .date {
-          color: $df-secondary;
-        }
-        .project-th-actions {
-          .project-th-icon {
-            margin-top: 0;
-            .icon-actions {
-              fill: $df-secondary;
-            }
-          }
-        }
-      }
-
-      &:hover {
-        background-color: $db-tertiary;
-        .grid-item-th {
-          border: none;
-        }
-      }
-    }
-
-    .grid-item-th {
-      border-radius: 4px;
-      border: none;
-      cursor: pointer;
-    }
-
-    .item-badge {
-      background-color: $da-primary;
-      border: none;
-      border-radius: 4px;
-      svg {
-        fill: $db-secondary;
-      }
+    .typography-sample {
+      height: $s-20;
+      margin-right: $s-4;
+      width: $s-20;
     }
   }
 }
diff --git a/frontend/src/app/main/ui/dashboard/inline_edition.cljs b/frontend/src/app/main/ui/dashboard/inline_edition.cljs
index 3011ebdd5..00d269066 100644
--- a/frontend/src/app/main/ui/dashboard/inline_edition.cljs
+++ b/frontend/src/app/main/ui/dashboard/inline_edition.cljs
@@ -84,4 +84,3 @@
                               :on-blur on-blur}]
        [:span.close {:on-click on-cancel} i/close]])))
 
-
diff --git a/frontend/src/app/main/ui/dashboard/inline_edition.scss b/frontend/src/app/main/ui/dashboard/inline_edition.scss
index e69de29bb..8abb170cb 100644
--- a/frontend/src/app/main/ui/dashboard/inline_edition.scss
+++ b/frontend/src/app/main/ui/dashboard/inline_edition.scss
@@ -0,0 +1,53 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-refactor.scss" as *;
+
+.edit-wrapper {
+  border-radius: $br-4;
+  display: flex;
+  padding-right: $s-24;
+  position: relative;
+  margin-right: $s-24;
+
+  input.element-title {
+    background-color: $db-primary;
+    border-radius: $br-8;
+    color: $df-primary;
+    font-size: $fs-16;
+    height: $s-32;
+    margin: 0;
+    border: none;
+    padding: $s-6;
+    width: 100%;
+
+    &:focus-visible {
+      border: $s-1 solid $da-primary;
+      outline: none;
+    }
+  }
+
+  .close {
+    cursor: pointer;
+    position: absolute;
+
+    top: $s-1;
+    right: calc(-1 * $s-8);
+
+    svg {
+      fill: $df-secondary;
+      height: $s-16;
+      transform: rotate(45deg) translateY(7px);
+      width: $s-16;
+      margin: 0;
+    }
+    &:hover {
+      svg {
+        fill: var(--warning-color);
+      }
+    }
+  }
+}
diff --git a/frontend/src/app/main/ui/dashboard/libraries.scss b/frontend/src/app/main/ui/dashboard/libraries.scss
index 443f1b636..72b0485a5 100644
--- a/frontend/src/app/main/ui/dashboard/libraries.scss
+++ b/frontend/src/app/main/ui/dashboard/libraries.scss
@@ -1,752 +1,28 @@
-@import "common/dependencies/colors";
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
 
-// FIXME: Mostly duplcated from projects.css
-
-$br3: 3px;
-$fs14: 0.875rem;
-$fs18: 1.125rem;
-$fs22: 1.375rem;
-$fw400: 400;
-$fw600: 600;
-$lh-088: 0.88;
-$lh-115: 1.15; // original $title-lh-sm
-$size-1: 0.25rem;
-$size-2: 0.5rem;
-$size-4: 1rem;
-$size-5: 1.5rem;
-$size-6: 2rem;
-
-.dashboard-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $color-white;
-  height: 63px;
-  padding: $size-1 $size-4 $size-1 $size-2;
-  position: relative;
-  z-index: 10;
-  user-select: none;
-  &.team {
-    display: grid;
-    grid-template-columns: 20% 1fr 20%;
-  }
-
-  .element-name {
-    margin-right: $size-2;
-  }
-
-  .btn-secondary {
-    flex-shrink: 0;
-    z-index: 10;
-    height: 32px;
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-  }
-
-  svg {
-    fill: $color-black;
-    height: 14px;
-    margin-right: $size-1;
-    width: 14px;
-  }
-
-  nav {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    z-index: 1;
-
-    ul {
-      display: flex;
-      font-size: $fs14;
-      justify-content: center;
-      margin: 0;
-    }
-
-    li {
-      a {
-        display: flex;
-        align-items: center;
-        flex-basis: 140px;
-        border-bottom: 3px solid transparent;
-        color: $color-gray-30;
-        height: 40px;
-        padding: $size-1 $size-5;
-        font-weight: $fw400;
-        &:hover {
-          color: $color-black;
-          text-decoration: none;
-        }
-      }
-
-      &.active {
-        a {
-          color: $color-black;
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  .dashboard-title {
-    display: flex;
-    align-items: center;
-    margin-left: 13px;
-
-    h1 {
-      color: $color-black;
-      display: flex;
-      flex-shrink: 0;
-      font-size: $fs22;
-      font-weight: $fw600;
-      z-index: 10;
-      user-select: all;
-    }
-
-    .context-menu.is-open {
-      margin-top: 10px;
-    }
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-left: $size-2;
-    z-index: 10;
-
-    svg {
-      fill: $color-gray-40;
-      width: 15px;
-      height: 15px;
-
-      &:hover {
-        fill: $color-primary-dark;
-      }
-    }
-  }
-
-  .dashboard-buttons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .dashboard-header-actions {
-    display: flex;
-  }
-
-  .pin-icon {
-    margin: 0 $size-2 0 $size-5;
-    background-color: transparent;
-    border: none;
-    svg {
-      fill: $color-gray-20;
-    }
-
-    &.active {
-      svg {
-        fill: $color-gray-50;
-      }
-    }
-  }
-}
-
-.dashboard-header {
-  background-color: transparent;
-  .dashboard-title {
-    h1 {
-      color: $df-primary;
-      font-size: 24px;
-      font-weight: 400;
-      width: 100%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      display: block;
-      max-width: 700px;
-    }
-  }
-  .icon {
-    svg {
-      fill: $df-secondary;
-    }
-  }
-
-  // Settings sub-menu
-  .dashboard-header-options {
-    li {
-      a {
-        font-size: 16px;
-        color: $df-secondary;
-        border-color: transparent;
-        &:hover {
-          color: $df-primary;
-        }
-      }
-      &.active {
-        a {
-          color: $df-primary;
-        }
-      }
-    }
-  }
-}
+@use "common/refactor/common-refactor.scss" as *;
+@use "common/refactor/common-dashboard";
 
 .dashboard-container {
-  background-color: $color-dashboard;
   flex: 1 0 0;
-  margin-right: $size-4;
+  margin-right: $s-16;
   overflow-y: auto;
   width: 100%;
+  border-top: $s-1 solid $db-cuaternary;
+
   &.dashboard-projects {
     user-select: none;
   }
-  &.no-bg {
-    background-color: transparent;
-  }
   &.dashboard-shared {
-    width: calc(100vw - 320px);
-    margin-right: 50px;
+    width: calc(100vw - $s-320);
+    margin-right: $s-52;
   }
 
   &.search {
-    margin-top: 10px;
-  }
-}
-
-.dashboard-container {
-  background-color: transparent;
-  border-top: 1px solid $db-cuaternary;
-
-  .dashboard-settings {
-    a {
-      color: $df-secondary;
-    }
-    .form-container {
-      width: 800px;
-      margin: 80px auto auto 120px;
-      form {
-        width: 468px;
-        .fields-row {
-          .custom-input,
-          .custom-select {
-            flex-direction: column-reverse;
-            label {
-              position: relative;
-              text-transform: uppercase;
-              color: $df-primary;
-              font-size: 11px;
-              margin-bottom: 12px;
-              margin-left: -4px;
-            }
-            input,
-            select {
-              background-color: $db-tertiary;
-              border-radius: 8px;
-              border-color: transparent;
-              color: $df-primary;
-              padding: 0 15px;
-              &:focus {
-                outline: 1px solid $da-primary;
-              }
-              ::placeholder {
-                color: $df-secondary;
-              }
-            }
-            .help-icon {
-              bottom: 12px;
-              top: auto;
-              svg {
-                fill: $df-secondary;
-              }
-            }
-            &.disabled {
-              input {
-                background-color: $db-primary;
-                border-color: $db-cuaternary;
-                color: $df-secondary;
-              }
-            }
-            .input-container {
-              background-color: $db-tertiary;
-              border-radius: 8px;
-              border-color: transparent;
-              margin-top: 22px;
-              .main-content {
-                label {
-                  position: absolute;
-                  top: -24px;
-                }
-                span {
-                  color: $df-primary;
-                }
-              }
-              &:focus {
-                border: 1px solid $da-primary;
-              }
-            }
-            textarea {
-              border-radius: 8px;
-              padding: 12px 14px;
-              background-color: $db-tertiary;
-              color: $df-primary;
-              border: none;
-              &:focus {
-                outline: 1px solid $da-primary;
-              }
-            }
-          }
-        }
-        .field-title {
-          color: $df-primary;
-        }
-        .field-title:not(:first-child) {
-          margin-top: 64px;
-        }
-
-        .field-text {
-          color: $df-secondary;
-        }
-        button,
-        .btn-secondary {
-          width: 100%;
-          font-size: 11px;
-          text-transform: uppercase;
-          background-color: $db-tertiary;
-          color: $df-primary;
-          &:hover {
-            color: $da-primary;
-            background-color: $db-cuaternary;
-          }
-        }
-        hr {
-          display: none;
-        }
-      }
-      .links {
-        margin-top: 12px;
-      }
-    }
-  }
-
-  //Access tokens
-  .dashboard-access-tokens {
-    width: 800px;
-    margin-left: 120px;
-    margin-top: 80px;
-    .access-tokens-hero-container {
-      background-color: transparent;
-      .access-tokens-hero {
-        width: 468px;
-        flex-direction: column;
-        gap: 32px;
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        .desc {
-          background-color: transparent;
-          width: 100%;
-          h2 {
-            color: $df-primary;
-            font-size: 24px;
-            font-weight: regular;
-            margin-bottom: 32px;
-          }
-          p {
-            color: $df-secondary;
-            margin-bottom: 0;
-            font-size: 14px;
-          }
-        }
-        button {
-          width: 100%;
-          font-size: 11px;
-          text-transform: uppercase;
-          background-color: $db-tertiary;
-          color: $df-primary;
-          &:hover {
-            color: $da-primary;
-            background-color: $db-cuaternary;
-          }
-        }
-      }
-    }
-    .dashboard-table {
-      width: 800px;
-      .table-rows {
-        padding-top: 0;
-        .table-row {
-          font-size: 14px;
-          min-height: 40px;
-          height: fit-content;
-          .name {
-            color: $df-primary;
-            max-width: 480px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-          }
-          .expiration-date {
-            color: $df-secondary;
-          }
-        }
-      }
-    }
-    .access-tokens-empty {
-      width: 468px;
-      border: 1px solid $db-cuaternary;
-      border-radius: 8px;
-      margin-top: 32px;
-      font-size: 14px;
-      background-color: transparent;
-      color: $df-secondary;
-    }
-  }
-
-  // Team webhooks
-  &.dashboard-team-webhooks {
-    width: 800px;
-    margin-left: 120px;
-    margin-top: 80px;
-    border: none;
-    align-items: flex-start;
-    .webhooks-hero-container {
-      width: 468px;
-      background-color: transparent;
-      .webhooks-hero {
-        width: 468px;
-        flex-direction: column;
-        gap: 32px;
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        .desc {
-          background-color: transparent;
-          width: 100%;
-          h2 {
-            color: $df-primary;
-            font-size: 24px;
-            font-weight: regular;
-            margin-bottom: 32px;
-          }
-          p {
-            color: $df-secondary;
-            margin-bottom: 0;
-            font-size: 14px;
-          }
-        }
-        .btn-primary {
-          width: 100%;
-          font-size: 11px;
-          text-transform: uppercase;
-          background-color: $db-tertiary;
-          color: $df-primary;
-          &:hover {
-            color: $da-primary;
-            background-color: $db-cuaternary;
-          }
-        }
-      }
-    }
-    .dashboard-table {
-      width: 800px;
-      .table-rows {
-        padding-top: 0;
-        .table-row {
-          font-size: 14px;
-          min-height: 40px;
-          height: fit-content;
-          .name {
-            color: $df-primary;
-            max-width: 480px;
-          }
-          .expiration-date {
-            color: $df-secondary;
-          }
-        }
-      }
-    }
-    .webhooks-empty {
-      width: 468px;
-      border: 1px solid $db-cuaternary;
-      border-radius: 8px;
-      margin-top: 32px;
-      font-size: 14px;
-      background-color: transparent;
-      color: $df-secondary;
-    }
-  }
-
-  // Members section
-  .dashboard-table {
-    .table-header {
-      background-color: transparent;
-      color: $df-secondary;
-      font-size: 12px;
-      text-transform: uppercase;
-    }
-    .table-rows {
-      .table-row {
-        background-color: $db-tertiary;
-        border-radius: 8px;
-        color: $df-primary;
-        .rol-selector {
-          background-color: $db-cuaternary;
-          border-color: transparent;
-          border-radius: 8px;
-        }
-      }
-    }
-    .member-info {
-      .member-name .you,
-      .member-email {
-        color: $df-secondary;
-      }
-    }
-    .status-badge {
-      border-radius: 8px;
-      color: $db-primary;
-      text-transform: uppercase;
-    }
-    .empty-invitations {
-      border: 1px solid $db-cuaternary;
-      border-radius: 8px;
-      color: $df-secondary;
-    }
-  }
-  .actions-dropdown,
-  .options-dropdown {
-    background-color: $db-tertiary;
-    border: 1px solid $db-cuaternary;
-    border-radius: 8px;
-    min-width: 252px;
-
-    .separator {
-      border-color: transparent;
-      margin-top: 10px;
-    }
-
-    li {
-      border-radius: 8px;
-      height: 40px;
-      margin: 5px;
-      color: $df-primary;
-
-      &:hover {
-        background-color: $db-cuaternary;
-      }
-    }
-
-    &.options-dropdown {
-      li {
-        color: $df-primary;
-        &.warning {
-          color: $color-danger;
-        }
-      }
-    }
-  }
-}
-
-.dashboard-project-row {
-  margin-bottom: $size-5;
-  position: relative;
-
-  .project {
-    align-items: center;
-    background: $color-white;
-    border-radius: $br3;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: $size-4;
-    padding: $size-2 $size-2 $size-2 $size-4;
-    width: 99%;
-    max-height: 40px;
-    gap: $size-2;
-    .project-name-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      min-height: 32px;
-      margin-left: $size-2;
-    }
-    .show-more {
-      align-items: center;
-      color: $color-gray-30;
-      display: flex;
-      font-size: $fs14;
-      justify-content: space-between;
-      cursor: pointer;
-      background-color: transparent;
-      border: none;
-      .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;
-      padding: $size-2;
-    }
-
-    h2 {
-      cursor: pointer;
-      font-size: $fs18;
-      line-height: $lh-088; // Original value was 1rem = 16px; 16px/18px = 88.88888% => $lh-088
-      font-weight: $fw600;
-      color: $color-black;
-      margin-right: $size-1;
-    }
-
-    .edit-wrapper {
-      margin-right: $size-4;
-    }
-
-    .info {
-      font-size: $fs14;
-      line-height: $lh-115; // Original value was 1rem = 16px; 16px/14px = 114.285714286% => $lh-115 (rounded)
-      font-weight: $fw400;
-      color: $color-gray-60;
-      margin-left: 0.75rem;
-      @media (max-width: 760px) {
-        display: none;
-      }
-    }
-
-    .project-actions {
-      display: flex;
-      opacity: 1;
-      margin-left: $size-6;
-
-      .btn-small {
-        height: 32px;
-        margin: 0 $size-2;
-        width: 32px;
-        svg {
-          height: 16px;
-          width: 16px;
-        }
-      }
-    }
-
-    .pin-icon {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      margin-right: 14px;
-      background-color: transparent;
-      border: none;
-      svg {
-        width: 15px;
-        height: 15px;
-        fill: $color-gray-20;
-      }
-
-      &.active {
-        svg {
-          fill: $color-gray-50;
-        }
-      }
-    }
-  }
-
-  &:hover,
-  &:focus,
-  &:focus-within {
-    .project-actions {
-      opacity: 1;
-    }
-  }
-
-  .show-more {
-    align-items: center;
-    color: $color-gray-30;
-    display: flex;
-    font-size: $fs14;
-    justify-content: space-between;
-    cursor: pointer;
-    background-color: transparent;
-    border: none;
-    position: absolute;
-    top: 9px;
-    right: 53px;
-    .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;
-      }
-    }
-  }
-}
-
-.dashboard-project-row .project {
-  background-color: transparent;
-
-  h2 {
-    color: $df-primary;
-    font-weight: 400;
-  }
-  span,
-  .info {
-    color: $df-secondary;
-  }
-  .project-actions {
-    svg {
-      fill: $df-primary;
-    }
-    .pin-icon svg {
-      fill: $df-secondary;
-    }
-  }
-}
-
-.btn-secondary {
-  background-color: $db-tertiary;
-  text-transform: uppercase;
-  border: none;
-  color: $df-primary;
-  border-radius: 8px;
-
-  font-size: 0.75rem;
-  padding: 0 1rem;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &:hover {
-    background-color: $db-cuaternary;
-    color: $da-primary;
-    svg {
-      fill: $da-primary;
-    }
+    margin-top: $s-12;
   }
 }
diff --git a/frontend/src/app/main/ui/dashboard/placeholder.cljs b/frontend/src/app/main/ui/dashboard/placeholder.cljs
index 4d4e5e25f..6125dd166 100644
--- a/frontend/src/app/main/ui/dashboard/placeholder.cljs
+++ b/frontend/src/app/main/ui/dashboard/placeholder.cljs
@@ -26,7 +26,7 @@
         [:ul
          {:class (stl/css :grid-row :no-wrap)
           :style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
-         [:li {:class (stl/css :grid-item)}]]
+         [:li {:class (stl/css :grid-item :grid-empty-placeholder :dragged)}]]
 
         (= :libraries origin)
         [:div {:class (stl/css :grid-empty-placeholder :libs)
@@ -39,7 +39,8 @@
          {:class (stl/css :grid-empty-placeholder)
           :style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
          [:button {:class (stl/css :create-new)
-                   :on-click on-click} (tr "dashboard.new-file")]])
+                   :on-click on-click}
+          i/add-refactor]])
 
       ;; OLD
       (cond
@@ -69,4 +70,3 @@
       [:div.grid-empty-placeholder.loader
        [:div.icon i/loader]
        [:div.text (tr "dashboard.loading-files")]])))
-
diff --git a/frontend/src/app/main/ui/dashboard/placeholder.scss b/frontend/src/app/main/ui/dashboard/placeholder.scss
index 220f2152a..5b0b45df8 100644
--- a/frontend/src/app/main/ui/dashboard/placeholder.scss
+++ b/frontend/src/app/main/ui/dashboard/placeholder.scss
@@ -1,25 +1,34 @@
-@import "common/dependencies/colors";
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
 
-$br0: 0;
-$br3: 3px;
-$br12: 12px;
-$fs16: 1rem;
+@use "common/refactor/common-refactor.scss" as *;
+@use "./grid.scss";
 
 .grid-empty-placeholder {
-  border-radius: $br12;
+  border-radius: $br-12;
   display: grid;
-  background-color: rgba(227, 227, 227, 0.3);
-  padding: 13px;
-  margin-right: 13px;
-  height: 230px;
+  padding: $s-12;
+  margin-right: $s-12;
+  height: $s-232;
+
   &.loader {
     justify-items: center;
   }
+
   .icon {
     display: flex;
     align-items: center;
     justify-content: center;
+    svg {
+      width: $s-64;
+      height: $s-64;
+      fill: $df-secondary;
+    }
   }
+
   &.libs {
     background-image: url(/images/ph-left.svg), url(/images/ph-right.svg);
     background-position:
@@ -27,86 +36,57 @@ $fs16: 1rem;
       85% top;
     background-repeat: no-repeat;
     align-items: center;
-    border: 1px dashed #b1b2b5;
-    border-radius: $br3;
+    border: $s-1 solid $db-cuaternary;
+    border-radius: $br-4;
     display: flex;
     flex-direction: column;
-    height: 200px;
-    margin: 1rem;
-    padding: 3rem;
+    height: $s-200;
+    margin: $s-16;
+    padding: $s-48;
     justify-content: center;
+
     .text {
+      a {
+        color: $df-primary;
+      }
       p {
-        max-width: 360px;
+        max-width: $s-360;
         text-align: center;
-        font-size: $fs16;
+        font-size: $fs-16;
       }
     }
   }
-  .create-new {
-    background-color: white;
-    border: 2px solid $color-gray-10;
-    border-radius: $br3;
-    color: $color-black;
-    cursor: pointer;
-    height: 158px;
-    font-family: "worksans", sans-serif;
-    margin: 0.5rem;
-    &:hover {
-      border: 2px solid $color-primary;
-    }
-  }
-
-  &.search {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    height: 200px;
-    background: $color-white;
-    border: 1px dashed #e3e3e3;
-    border-radius: $br0;
-  }
-
-  svg {
-    width: 36px;
-    height: 36px;
-    fill: $color-gray-20;
-  }
-
-  .text {
-    margin-top: 10px;
-    color: $color-gray-30;
-    font-size: $fs16;
-  }
-}
-
-.grid-empty-placeholder {
-  background-color: transparent;
 
   .create-new {
     background-color: $db-tertiary;
-    border-radius: 8px;
-    border: none;
+    border-radius: $br-8;
     color: $df-primary;
+    cursor: pointer;
+    height: $s-160;
+    margin: $s-8;
     text-transform: uppercase;
+    border: $s-2 solid transparent;
+
+    svg {
+      width: $s-32;
+      height: $s-32;
+      stroke: $df-secondary;
+    }
 
     &:hover {
+      border: $s-2 solid $da-tertiary;
       background-color: $db-cuaternary;
       color: $da-primary;
-    }
-  }
 
-  &.search {
-    border: 1px solid $db-cuaternary;
-    border-radius: 8px;
-    .text {
-      color: $df-primary;
-    }
-    .icon {
       svg {
-        fill: $df-secondary;
+        stroke: $da-tertiary;
       }
     }
   }
+
+  .text {
+    margin-top: $s-12;
+    color: $df-secondary;
+    font-size: $fs-16;
+  }
 }
diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs
index d97dc9a16..f84f16006 100644
--- a/frontend/src/app/main/ui/dashboard/projects.cljs
+++ b/frontend/src/app/main/ui/dashboard/projects.cljs
@@ -79,17 +79,20 @@
 
     (if new-css-system
       [:div {:class (stl/css :team-hero)}
-       [:img {:src "images/deco-team-banner.png" :border "0"
-              :role "presentation"}]
+       [:div {:class (stl/css :img-wrapper)}
+        [:img {:src "images/deco-team-banner.png"
+               :border "0"
+               :role "presentation"}]]
        [:div {:class (stl/css :text)}
         [:div {:class (stl/css :title)} (tr "dasboard.team-hero.title")]
         [:div {:class (stl/css :info)}
          [:span (tr "dasboard.team-hero.text")]
-         [:a {:on-click on-nav-members-click} (tr "dasboard.team-hero.management")]]]
-       [:button
-        {:class (stl/css :btn-primary :invite)
-         :on-click on-invite-click}
-        (tr "onboarding.choice.team-up.invite-members")]
+         [:a {:on-click on-nav-members-click} (tr "dasboard.team-hero.management")]]
+        [:button
+         {:class (stl/css :btn-primary :invite)
+          :on-click on-invite-click}
+         (tr "onboarding.choice.team-up.invite-members")]]
+
        [:button
         {:class (stl/css :close)
          :on-click on-close-click
@@ -154,7 +157,7 @@
        [:div {:class (stl/css :thumbnail)}]
        [:div {:class (stl/css :text)}
         [:h2 {:class (stl/css :title)} (tr "dasboard.tutorial-hero.title")]
-        [:p {:clas (stl/css :info)} (tr "dasboard.tutorial-hero.info")]
+        [:p {:class (stl/css :info)} (tr "dasboard.tutorial-hero.info")]
         [:button {:class (stl/css :btn-primary :action)
                   :on-click download-tutorial}
          (case (:status @state)
diff --git a/frontend/src/app/main/ui/dashboard/projects.scss b/frontend/src/app/main/ui/dashboard/projects.scss
index ee5016a71..ff6d6cdbc 100644
--- a/frontend/src/app/main/ui/dashboard/projects.scss
+++ b/frontend/src/app/main/ui/dashboard/projects.scss
@@ -1,634 +1,104 @@
-@import "common/dependencies/colors";
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
 
-$br3: 3px;
-$br8: 8px;
-$br6: 6px;
-$fs14: 0.875rem;
-$fs18: 1.125rem;
-$fs22: 1.375rem;
-$fs24: 1.5rem;
-$fw400: 400;
-$fw600: 600;
-$fw700: 700;
-$lh-088: 0.88;
-$lh-115: 1.15; // original $title-lh-sm
-$size-1: 0.25rem;
-$size-2: 0.5rem;
-$size-4: 1rem;
-$size-5: 1.5rem;
-$size-6: 2rem;
-
-.dashboard-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $color-white;
-  height: 63px;
-  padding: $size-1 $size-4 $size-1 $size-2;
-  position: relative;
-  z-index: 10;
-  user-select: none;
-  &.team {
-    display: grid;
-    grid-template-columns: 20% 1fr 20%;
-  }
-
-  .element-name {
-    margin-right: $size-2;
-  }
-
-  .btn-secondary {
-    flex-shrink: 0;
-    z-index: 10;
-    height: 32px;
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-  }
-
-  svg {
-    fill: $color-black;
-    height: 14px;
-    margin-right: $size-1;
-    width: 14px;
-  }
-
-  nav {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    z-index: 1;
-
-    ul {
-      display: flex;
-      font-size: $fs14;
-      justify-content: center;
-      margin: 0;
-    }
-
-    li {
-      a {
-        display: flex;
-        align-items: center;
-        flex-basis: 140px;
-        border-bottom: 3px solid transparent;
-        color: $color-gray-30;
-        height: 40px;
-        padding: $size-1 $size-5;
-        font-weight: $fw400;
-        &:hover {
-          color: $color-black;
-          text-decoration: none;
-        }
-      }
-
-      &.active {
-        a {
-          color: $color-black;
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  .dashboard-title {
-    display: flex;
-    align-items: center;
-    margin-left: 13px;
-
-    h1 {
-      color: $color-black;
-      display: flex;
-      flex-shrink: 0;
-      font-size: $fs22;
-      font-weight: $fw600;
-      z-index: 10;
-      user-select: all;
-    }
-
-    .context-menu.is-open {
-      margin-top: 10px;
-    }
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-left: $size-2;
-    z-index: 10;
-
-    svg {
-      fill: $color-gray-40;
-      width: 15px;
-      height: 15px;
-
-      &:hover {
-        fill: $color-primary-dark;
-      }
-    }
-  }
-
-  .dashboard-buttons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .dashboard-header-actions {
-    display: flex;
-  }
-
-  .pin-icon {
-    margin: 0 $size-2 0 $size-5;
-    background-color: transparent;
-    border: none;
-    svg {
-      fill: $color-gray-20;
-    }
-
-    &.active {
-      svg {
-        fill: $color-gray-50;
-      }
-    }
-  }
-}
-
-.dashboard-header {
-  background-color: transparent;
-  .dashboard-title {
-    h1 {
-      color: $df-primary;
-      font-size: 24px;
-      font-weight: 400;
-      width: 100%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      display: block;
-      max-width: 700px;
-    }
-  }
-  .icon {
-    svg {
-      fill: $df-secondary;
-    }
-  }
-
-  // Settings sub-menu
-  .dashboard-header-options {
-    li {
-      a {
-        font-size: 16px;
-        color: $df-secondary;
-        border-color: transparent;
-        &:hover {
-          color: $df-primary;
-        }
-      }
-      &.active {
-        a {
-          color: $df-primary;
-        }
-      }
-    }
-  }
-}
+@use "common/refactor/common-refactor.scss" as *;
+@use "common/refactor/common-dashboard";
 
 .dashboard-container {
-  background-color: $color-dashboard;
   flex: 1 0 0;
-  margin-right: $size-4;
+  margin-right: $s-16;
   overflow-y: auto;
   width: 100%;
+  border-top: $s-1 solid $db-cuaternary;
+
   &.dashboard-projects {
     user-select: none;
   }
-  &.no-bg {
-    background-color: transparent;
-  }
   &.dashboard-shared {
-    width: calc(100vw - 320px);
-    margin-right: 50px;
+    width: calc(100vw - $s-320);
+    margin-right: $s-52;
   }
 
   &.search {
-    margin-top: 10px;
-  }
-}
-
-.dashboard-container {
-  background-color: transparent;
-  border-top: 1px solid $db-cuaternary;
-
-  .dashboard-settings {
-    a {
-      color: $df-secondary;
-    }
-    .form-container {
-      width: 800px;
-      margin: 80px auto auto 120px;
-      form {
-        width: 468px;
-        .fields-row {
-          .custom-input,
-          .custom-select {
-            flex-direction: column-reverse;
-            label {
-              position: relative;
-              text-transform: uppercase;
-              color: $df-primary;
-              font-size: 11px;
-              margin-bottom: 12px;
-              margin-left: -4px;
-            }
-            input,
-            select {
-              background-color: $db-tertiary;
-              border-radius: 8px;
-              border-color: transparent;
-              color: $df-primary;
-              padding: 0 15px;
-              &:focus {
-                outline: 1px solid $da-primary;
-              }
-              ::placeholder {
-                color: $df-secondary;
-              }
-            }
-            .help-icon {
-              bottom: 12px;
-              top: auto;
-              svg {
-                fill: $df-secondary;
-              }
-            }
-            &.disabled {
-              input {
-                background-color: $db-primary;
-                border-color: $db-cuaternary;
-                color: $df-secondary;
-              }
-            }
-            .input-container {
-              background-color: $db-tertiary;
-              border-radius: 8px;
-              border-color: transparent;
-              margin-top: 22px;
-              .main-content {
-                label {
-                  position: absolute;
-                  top: -24px;
-                }
-                span {
-                  color: $df-primary;
-                }
-              }
-              &:focus {
-                border: 1px solid $da-primary;
-              }
-            }
-            textarea {
-              border-radius: 8px;
-              padding: 12px 14px;
-              background-color: $db-tertiary;
-              color: $df-primary;
-              border: none;
-              &:focus {
-                outline: 1px solid $da-primary;
-              }
-            }
-          }
-        }
-        .field-title {
-          color: $df-primary;
-        }
-        .field-title:not(:first-child) {
-          margin-top: 64px;
-        }
-
-        .field-text {
-          color: $df-secondary;
-        }
-        button,
-        .btn-secondary {
-          width: 100%;
-          font-size: 11px;
-          text-transform: uppercase;
-          background-color: $db-tertiary;
-          color: $df-primary;
-          &:hover {
-            color: $da-primary;
-            background-color: $db-cuaternary;
-          }
-        }
-        hr {
-          display: none;
-        }
-      }
-      .links {
-        margin-top: 12px;
-      }
-    }
-  }
-
-  //Access tokens
-  .dashboard-access-tokens {
-    width: 800px;
-    margin-left: 120px;
-    margin-top: 80px;
-    .access-tokens-hero-container {
-      background-color: transparent;
-      .access-tokens-hero {
-        width: 468px;
-        flex-direction: column;
-        gap: 32px;
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        .desc {
-          background-color: transparent;
-          width: 100%;
-          h2 {
-            color: $df-primary;
-            font-size: 24px;
-            font-weight: regular;
-            margin-bottom: 32px;
-          }
-          p {
-            color: $df-secondary;
-            margin-bottom: 0;
-            font-size: 14px;
-          }
-        }
-        button {
-          width: 100%;
-          font-size: 11px;
-          text-transform: uppercase;
-          background-color: $db-tertiary;
-          color: $df-primary;
-          &:hover {
-            color: $da-primary;
-            background-color: $db-cuaternary;
-          }
-        }
-      }
-    }
-    .dashboard-table {
-      width: 800px;
-      .table-rows {
-        padding-top: 0;
-        .table-row {
-          font-size: 14px;
-          min-height: 40px;
-          height: fit-content;
-          .name {
-            color: $df-primary;
-            max-width: 480px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-          }
-          .expiration-date {
-            color: $df-secondary;
-          }
-        }
-      }
-    }
-    .access-tokens-empty {
-      width: 468px;
-      border: 1px solid $db-cuaternary;
-      border-radius: 8px;
-      margin-top: 32px;
-      font-size: 14px;
-      background-color: transparent;
-      color: $df-secondary;
-    }
-  }
-
-  // Team webhooks
-  &.dashboard-team-webhooks {
-    width: 800px;
-    margin-left: 120px;
-    margin-top: 80px;
-    border: none;
-    align-items: flex-start;
-    .webhooks-hero-container {
-      width: 468px;
-      background-color: transparent;
-      .webhooks-hero {
-        width: 468px;
-        flex-direction: column;
-        gap: 32px;
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        .desc {
-          background-color: transparent;
-          width: 100%;
-          h2 {
-            color: $df-primary;
-            font-size: 24px;
-            font-weight: regular;
-            margin-bottom: 32px;
-          }
-          p {
-            color: $df-secondary;
-            margin-bottom: 0;
-            font-size: 14px;
-          }
-        }
-        .btn-primary {
-          width: 100%;
-          font-size: 11px;
-          text-transform: uppercase;
-          background-color: $db-tertiary;
-          color: $df-primary;
-          &:hover {
-            color: $da-primary;
-            background-color: $db-cuaternary;
-          }
-        }
-      }
-    }
-    .dashboard-table {
-      width: 800px;
-      .table-rows {
-        padding-top: 0;
-        .table-row {
-          font-size: 14px;
-          min-height: 40px;
-          height: fit-content;
-          .name {
-            color: $df-primary;
-            max-width: 480px;
-          }
-          .expiration-date {
-            color: $df-secondary;
-          }
-        }
-      }
-    }
-    .webhooks-empty {
-      width: 468px;
-      border: 1px solid $db-cuaternary;
-      border-radius: 8px;
-      margin-top: 32px;
-      font-size: 14px;
-      background-color: transparent;
-      color: $df-secondary;
-    }
-  }
-
-  // Members section
-  .dashboard-table {
-    .table-header {
-      background-color: transparent;
-      color: $df-secondary;
-      font-size: 12px;
-      text-transform: uppercase;
-    }
-    .table-rows {
-      .table-row {
-        background-color: $db-tertiary;
-        border-radius: 8px;
-        color: $df-primary;
-        .rol-selector {
-          background-color: $db-cuaternary;
-          border-color: transparent;
-          border-radius: 8px;
-        }
-      }
-    }
-    .member-info {
-      .member-name .you,
-      .member-email {
-        color: $df-secondary;
-      }
-    }
-    .status-badge {
-      border-radius: 8px;
-      color: $db-primary;
-      text-transform: uppercase;
-    }
-    .empty-invitations {
-      border: 1px solid $db-cuaternary;
-      border-radius: 8px;
-      color: $df-secondary;
-    }
-  }
-  .actions-dropdown,
-  .options-dropdown {
-    background-color: $db-tertiary;
-    border: 1px solid $db-cuaternary;
-    border-radius: 8px;
-    min-width: 252px;
-
-    .separator {
-      border-color: transparent;
-      margin-top: 10px;
-    }
-
-    li {
-      border-radius: 8px;
-      height: 40px;
-      margin: 5px;
-      color: $df-primary;
-
-      &:hover {
-        background-color: $db-cuaternary;
-      }
-    }
-
-    &.options-dropdown {
-      li {
-        color: $df-primary;
-        &.warning {
-          color: $color-danger;
-        }
-      }
-    }
+    margin-top: $s-12;
   }
 }
 
 .dashboard-project-row {
-  margin-bottom: $size-5;
+  margin-bottom: $s-24;
   position: relative;
 
   .project {
     align-items: center;
-    background: $color-white;
-    border-radius: $br3;
+    background: $df-primary;
+    border-radius: $br-4;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    margin-top: $size-4;
-    padding: $size-2 $size-2 $size-2 $size-4;
+    margin-top: $s-16;
+    padding: $s-8 $s-8 $s-8 $s-16;
     width: 99%;
-    max-height: 40px;
-    gap: $size-2;
+    max-height: $s-40;
+    gap: $s-8;
+
     .project-name-wrapper {
       display: flex;
       align-items: center;
       justify-content: flex-start;
-      min-height: 32px;
-      margin-left: $size-2;
+      min-height: $s-32;
+      margin-left: $s-8;
     }
     .show-more {
       align-items: center;
-      color: $color-gray-30;
+      color: $df-secondary;
       display: flex;
-      font-size: $fs14;
+      font-size: $fs-14;
       justify-content: space-between;
       cursor: pointer;
       background-color: transparent;
       border: none;
       .placeholder-icon {
         transform: rotate(-90deg);
-        margin-left: 10px;
+        margin-left: $s-12;
         svg {
-          height: 14px;
-          width: 14px;
-          fill: $color-gray-30;
+          height: $s-16;
+          width: $s-16;
+          fill: $df-secondary;
         }
       }
       &:hover {
-        color: $color-primary-dark;
+        color: $da-tertiary;
         svg {
-          fill: $color-primary-dark;
+          fill: $da-tertiary;
         }
       }
     }
 
     .btn-secondary {
       border: none;
-      padding: $size-2;
+      padding: $s-8;
     }
 
     h2 {
       cursor: pointer;
-      font-size: $fs18;
-      line-height: $lh-088; // Original value was 1rem = 16px; 16px/18px = 88.88888% => $lh-088
-      font-weight: $fw600;
-      color: $color-black;
-      margin-right: $size-1;
+      font-size: $fs-16;
+      line-height: 0.8;
+      font-weight: $fw700;
+      color: $db-secondary;
+      margin-right: $s-4;
+      margin-right: $s-12;
     }
 
-    .edit-wrapper {
-      margin-right: $size-4;
-    }
-
-    .info {
-      font-size: $fs14;
-      line-height: $lh-115; // Original value was 1rem = 16px; 16px/14px = 114.285714286% => $lh-115 (rounded)
+    .info,
+    .recent-files-row-title-info {
+      font-size: $fs-14;
+      line-height: 1.15;
       font-weight: $fw400;
-      color: $color-gray-60;
-      margin-left: 0.75rem;
+      color: $db-primary;
       @media (max-width: 760px) {
         display: none;
       }
@@ -637,15 +107,19 @@ $size-6: 2rem;
     .project-actions {
       display: flex;
       opacity: 1;
-      margin-left: $size-6;
+      margin-left: $s-32;
 
       .btn-small {
-        height: 32px;
-        margin: 0 $size-2;
-        width: 32px;
+        height: $s-32;
+        margin: 0 $s-8;
+        width: $s-32;
+
+        &:not(:hover) {
+          background: transparent;
+        }
         svg {
-          height: 16px;
-          width: 16px;
+          height: $s-16;
+          width: $s-16;
         }
       }
     }
@@ -654,18 +128,18 @@ $size-6: 2rem;
       cursor: pointer;
       display: flex;
       align-items: center;
-      margin-right: 14px;
+      margin-right: $s-16;
       background-color: transparent;
       border: none;
       svg {
-        width: 15px;
-        height: 15px;
-        fill: $color-gray-20;
+        width: $s-16;
+        height: $s-16;
+        fill: $df-secondary;
       }
 
       &.active {
         svg {
-          fill: $color-gray-50;
+          fill: $db-tertiary;
         }
       }
     }
@@ -681,29 +155,29 @@ $size-6: 2rem;
 
   .show-more {
     align-items: center;
-    color: $color-gray-30;
+    color: $df-secondary;
     display: flex;
-    font-size: $fs14;
+    font-size: $fs-14;
     justify-content: space-between;
     cursor: pointer;
     background-color: transparent;
     border: none;
     position: absolute;
-    top: 9px;
-    right: 53px;
+    top: $s-8;
+    right: $s-52;
     .placeholder-icon {
       transform: rotate(-90deg);
-      margin-left: 10px;
+      margin-left: $s-8;
       svg {
-        height: 14px;
-        width: 14px;
-        fill: $color-gray-30;
+        height: $s-16;
+        width: $s-16;
+        fill: $df-secondary;
       }
     }
     &:hover {
-      color: $color-primary-dark;
+      color: $da-tertiary;
       svg {
-        fill: $color-primary-dark;
+        fill: $da-tertiary;
       }
     }
   }
@@ -717,7 +191,8 @@ $size-6: 2rem;
     font-weight: 400;
   }
   span,
-  .info {
+  .info,
+  .recent-files-row-title-info {
     color: $df-secondary;
   }
   .project-actions {
@@ -731,135 +206,165 @@ $size-6: 2rem;
 }
 
 .team-hero {
+  background-color: $db-tertiary;
+  border-radius: $br-8;
+  border: none;
   display: flex;
+  margin: $s-16;
+  padding: $s-8;
   position: relative;
-  border: 2px solid $color-gray-10;
-  border-radius: $br8;
-  padding: 20px;
-  margin: 0 1rem 0 21px;
-  height: 154px;
 
   .text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
     flex-grow: 1;
-    padding-left: 20px;
-    .title {
-      font-size: $fs24;
-      font-weight: $fw700;
-      color: $color-black;
+    padding: $s-20 $s-20;
+  }
+  .title {
+    font-size: $fs-24;
+    color: $df-primary;
+    font-weight: $fw400;
+  }
+  .info {
+    flex: 1;
+    font-size: $fs-16;
+    span {
+      color: $df-secondary;
+      display: block;
     }
-    .info {
-      span {
-        color: $color-gray-30;
-        display: block;
-      }
-      padding-top: 10px;
+    a {
+      color: $da-primary;
     }
+    padding-top: $s-8;
   }
   .close {
     position: absolute;
-    top: 20px;
-    right: 20px;
+    top: $s-20;
+    right: $s-20;
     background-color: transparent;
     border: none;
     cursor: pointer;
     svg {
       transform: rotate(45deg);
-      width: 16px;
-      height: 16px;
+      width: $s-16;
+      height: $s-16;
     }
   }
   .invite {
-    align-self: flex-end;
-    height: 40px;
-    font-family: "worksans", sans-serif;
-    width: 180px;
+    height: $s-32;
+    width: $s-180;
   }
+  .img-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $s-200;
+    height: $s-200;
+    overflow: hidden;
+    border-radius: $br-4;
+  }
+
   img {
-    width: 274px;
-    margin-bottom: -19px;
+    border-radius: $br-4;
+    height: $s-200;
+    width: auto;
+
     @media (max-width: 1200px) {
       display: none;
       width: 0;
     }
   }
+  svg {
+    fill: $df-secondary;
+  }
 }
 
 .hero-projects {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-gap: 30px;
-  margin: 0 1rem 1rem 1.2rem;
+  grid-gap: $s-32;
+  margin: 0 $s-16 $s-16 $s-20;
+
+  @media (max-width: 1366px) {
+    grid-template-columns: 1fr;
+  }
+
   .tutorial,
   .walkthrough {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: auto 1fr;
     position: relative;
-    border: 2px solid $color-gray-10;
-    border-radius: $br8;
-    min-height: 211px;
+    border-radius: $br-8;
+    min-height: $s-216;
+    background-color: $db-tertiary;
+    padding: $s-8;
 
     .thumbnail {
-      border-top-left-radius: $br6;
-      border-bottom-left-radius: $br6;
-      padding: 30px;
+      width: $s-200;
+      height: $s-200;
+      border-radius: $br-6;
+      padding: $s-32;
       display: block;
-      background-color: #e0e4e9;
+      background-color: var(--color-canvas);
+    }
+
+    img {
+      border-radius: $br-4;
+      margin-bottom: 0;
+      width: $s-232;
     }
 
     .text {
-      padding: 30px;
-      .title {
-        color: $color-black;
-        font-size: $fs24;
-        font-weight: $fw700;
-        margin-bottom: 8px;
-      }
-      .info {
-        color: $color-gray-50;
-        margin-bottom: 20px;
-        font-size: $fs14;
-      }
+      padding: $s-32;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .title {
+      color: $df-primary;
+      font-size: $fs-24;
+      font-weight: $fw400;
+      margin-bottom: $s-8;
+    }
+    .info {
+      flex: 1;
+      color: $df-secondary;
+      margin-bottom: $s-20;
+      font-size: $fs-16;
+    }
+    .invite {
+      height: $s-32;
     }
     .action {
-      font-family: "worksans", sans-serif;
-      width: 180px;
-      height: 40px;
+      width: $s-180;
+      height: $s-40;
     }
     .close {
       position: absolute;
       top: 0;
       right: 0;
-      width: $size-5;
+      width: $s-24;
       cursor: pointer;
       display: flex;
-      margin: 20px;
+      margin: $s-20;
       justify-content: center;
       align-items: center;
       background-color: transparent;
       border: none;
       .icon {
         svg {
-          fill: $color-gray-30;
-          height: 16px;
-          width: 16px;
+          fill: $df-secondary;
+          height: $s-16;
+          width: $s-16;
           transform: rotate(45deg);
           &:hover {
-            fill: $color-primary;
+            fill: $da-tertiary;
           }
         }
       }
     }
-
-    @media (max-width: 1846px) {
-      grid-template-columns: 190px 1fr;
-    }
-    @media (max-width: 1526px) {
-      grid-template-columns: 1fr;
-      .img {
-        display: none;
-        width: 0;
-      }
-    }
   }
   .walkthrough {
     .thumbnail {
@@ -879,31 +384,8 @@ $size-6: 2rem;
     .loader {
       display: flex;
       svg#loader-pencil {
-        width: 31px;
+        width: $s-32;
       }
     }
   }
 }
-
-.btn-secondary {
-  background-color: $db-tertiary;
-  text-transform: uppercase;
-  border: none;
-  color: $df-primary;
-  border-radius: 8px;
-
-  font-size: 0.75rem;
-  padding: 0 1rem;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &:hover {
-    background-color: $db-cuaternary;
-    color: $da-primary;
-    svg {
-      fill: $da-primary;
-    }
-  }
-}
diff --git a/frontend/src/app/main/ui/dashboard/search.cljs b/frontend/src/app/main/ui/dashboard/search.cljs
index ad9f517bf..1f47edb4e 100644
--- a/frontend/src/app/main/ui/dashboard/search.cljs
+++ b/frontend/src/app/main/ui/dashboard/search.cljs
@@ -96,7 +96,3 @@
                     :hide-new? true
                     :origin :search
                     :limit limit}])]])))
-
-
-
-
diff --git a/frontend/src/app/main/ui/dashboard/search.scss b/frontend/src/app/main/ui/dashboard/search.scss
index 016cd9996..9eb379706 100644
--- a/frontend/src/app/main/ui/dashboard/search.scss
+++ b/frontend/src/app/main/ui/dashboard/search.scss
@@ -1,325 +1,49 @@
-@import "common/dependencies/colors";
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
 
-$br0: 0;
-$br3: 3px;
-$br8: 8px;
-$br6: 6px;
-$br12: 12px;
-$fs14: 0.875rem;
-$fs16: 1rem;
-$fs18: 1.125rem;
-$fs22: 1.375rem;
-$fs24: 1.5rem;
-$fw400: 400;
-$fw600: 600;
-$fw700: 700;
-$lh-088: 0.88;
-$lh-115: 1.15; // original $title-lh-sm
-$size-1: 0.25rem;
-$size-2: 0.5rem;
-$size-4: 1rem;
-$size-5: 1.5rem;
-$size-6: 2rem;
-
-.dashboard-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $color-white;
-  height: 63px;
-  padding: $size-1 $size-4 $size-1 $size-2;
-  position: relative;
-  z-index: 10;
-  user-select: none;
-  &.team {
-    display: grid;
-    grid-template-columns: 20% 1fr 20%;
-  }
-
-  .element-name {
-    margin-right: $size-2;
-  }
-
-  .btn-secondary {
-    flex-shrink: 0;
-    z-index: 10;
-    height: 32px;
-  }
-
-  svg {
-    fill: $color-black;
-    height: 14px;
-    margin-right: $size-1;
-    width: 14px;
-  }
-
-  nav {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    z-index: 1;
-
-    ul {
-      display: flex;
-      font-size: $fs14;
-      justify-content: center;
-      margin: 0;
-    }
-
-    li {
-      a {
-        display: flex;
-        align-items: center;
-        flex-basis: 140px;
-        border-bottom: 3px solid transparent;
-        color: $color-gray-30;
-        height: 40px;
-        padding: $size-1 $size-5;
-        font-weight: $fw400;
-        &:hover {
-          color: $color-black;
-          text-decoration: none;
-        }
-      }
-
-      &.active {
-        a {
-          color: $color-black;
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  .dashboard-title {
-    display: flex;
-    align-items: center;
-    margin-left: 13px;
-
-    h1 {
-      color: $color-black;
-      display: flex;
-      flex-shrink: 0;
-      font-size: $fs22;
-      font-weight: $fw600;
-      z-index: 10;
-      user-select: all;
-    }
-
-    .context-menu.is-open {
-      margin-top: 10px;
-    }
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-left: $size-2;
-    z-index: 10;
-
-    svg {
-      fill: $color-gray-40;
-      width: 15px;
-      height: 15px;
-
-      &:hover {
-        fill: $color-primary-dark;
-      }
-    }
-  }
-
-  .dashboard-buttons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .dashboard-header-actions {
-    display: flex;
-  }
-
-  .pin-icon {
-    margin: 0 $size-2 0 $size-5;
-    background-color: transparent;
-    border: none;
-    svg {
-      fill: $color-gray-20;
-    }
-
-    &.active {
-      svg {
-        fill: $color-gray-50;
-      }
-    }
-  }
-}
-
-.grid-empty-placeholder {
-  border-radius: $br12;
-  display: grid;
-  background-color: rgba(227, 227, 227, 0.3);
-  padding: 13px;
-  margin-right: 13px;
-  height: 230px;
-  &.loader {
-    justify-items: center;
-  }
-  .icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  &.libs {
-    background-image: url(/images/ph-left.svg), url(/images/ph-right.svg);
-    background-position:
-      15% bottom,
-      85% top;
-    background-repeat: no-repeat;
-    align-items: center;
-    border: 1px dashed #b1b2b5;
-    border-radius: $br3;
-    display: flex;
-    flex-direction: column;
-    height: 200px;
-    margin: 1rem;
-    padding: 3rem;
-    justify-content: center;
-    .text {
-      p {
-        max-width: 360px;
-        text-align: center;
-        font-size: $fs16;
-      }
-    }
-  }
-  .create-new {
-    background-color: white;
-    border: 2px solid $color-gray-10;
-    border-radius: $br3;
-    color: $color-black;
-    cursor: pointer;
-    height: 158px;
-    font-family: "worksans", sans-serif;
-    margin: 0.5rem;
-    &:hover {
-      border: 2px solid $color-primary;
-    }
-  }
-
-  &.search {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    height: 200px;
-    // background: $color-white;
-    border: 1px dashed #e3e3e3;
-    border-radius: $br0;
-  }
-
-  svg {
-    width: 36px;
-    height: 36px;
-    fill: $color-gray-20;
-  }
-
-  .text {
-    margin-top: 10px;
-    color: $color-gray-30;
-    font-size: $fs16;
-  }
-}
+@use "common/refactor/common-refactor.scss" as *;
+@use "common/refactor/common-dashboard";
+@use "./placeholder.scss";
 
 .dashboard-container {
-  background-color: $color-dashboard;
   flex: 1 0 0;
-  margin-right: $size-4;
+  margin-right: $s-16;
   overflow-y: auto;
   width: 100%;
+  border-top: $s-1 solid $db-cuaternary;
+
   &.dashboard-projects {
     user-select: none;
   }
-  &.no-bg {
-    background-color: transparent;
-  }
   &.dashboard-shared {
-    width: calc(100vw - 320px);
-    margin-right: 50px;
+    width: calc(100vw - $s-320);
+    margin-right: $s-52;
   }
 
   &.search {
-    margin-top: 10px;
+    margin-top: $s-12;
   }
 }
 
-.dashboard-header {
-  background-color: transparent;
-  .dashboard-title {
-    h1 {
-      color: $df-primary;
-      font-size: 24px;
-      font-weight: 400;
-      width: 100%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      display: block;
-      max-width: 700px;
-    }
-  }
-  .icon {
-    svg {
-      fill: $df-secondary;
-    }
-  }
+.grid-empty-placeholder.search {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: $s-200;
+  background: transparent;
+  border: $s-1 solid $db-cuaternary;
+  border-radius: $br-8;
 
-  // Settings sub-menu
-  .dashboard-header-options {
-    li {
-      a {
-        font-size: 16px;
-        color: $df-secondary;
-        border-color: transparent;
-        &:hover {
-          color: $df-primary;
-        }
-      }
-      &.active {
-        a {
-          color: $df-primary;
-        }
-      }
-    }
-  }
-}
-
-.grid-empty-placeholder {
-  background-color: transparent;
-
-  .create-new {
-    background-color: $db-tertiary;
-    border-radius: 8px;
-    border: none;
+  .text {
     color: $df-primary;
-    text-transform: uppercase;
-
-    &:hover {
-      background-color: $db-cuaternary;
-      color: $da-primary;
-    }
   }
-
-  &.search {
-    border: 1px solid $db-cuaternary;
-    border-radius: 8px;
-    .text {
-      color: $df-primary;
-    }
-    .icon {
-      svg {
-        fill: $df-secondary;
-      }
-    }
+  .icon svg {
+    fill: $df-secondary;
+    width: $s-32;
+    height: $s-32;
   }
 }
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs
index 71840fed4..199463098 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.cljs
+++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs
@@ -21,7 +21,7 @@
    [app.main.ui.components.dropdown-menu :refer [dropdown-menu dropdown-menu-item*]]
    [app.main.ui.components.link :refer [link]]
    [app.main.ui.context :as ctx]
-   [app.main.ui.dashboard.comments :refer [comments-section]]
+   [app.main.ui.dashboard.comments :refer [comments-icon comments-section]]
    [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
    [app.main.ui.dashboard.project-menu :refer [project-menu]]
    [app.main.ui.dashboard.team-form]
@@ -909,112 +909,135 @@
              (st/emit! (ptk/event ::ev/event {::ev/name "show-release-notes" :version version}))
              (if (and (kbd/alt? event) (kbd/mod? event))
                (st/emit! (modal/show {:type :onboarding}))
-               (st/emit! (modal/show {:type :release-notes :version version}))))))]
+               (st/emit! (modal/show {:type :release-notes :version version}))))))
 
+        show-comments* (mf/use-state false)
+        show-comments? @show-comments*
+
+        handle-hide-comments
+        (mf/use-callback
+         (fn []
+           (reset! show-comments* false)))
+
+        handle-show-comments
+        (mf/use-callback
+         (fn []
+           (reset! show-comments* true)))]
     (if new-css-system
-      [:div {:class (stl/css :profile-section)}
-       [:div {:class (stl/css :profile)
-              :tab-index "0"
-              :on-click (fn [event]
-                          (dom/stop-propagation event)
-                          (reset! show true))
-              :on-key-down (fn [event]
-                             (when (kbd/enter? event)
-                               (reset! show true)))
-              :data-test "profile-btn"}
-        [:img {:src photo
-               :alt (:fullname profile)}]
-        [:span (:fullname profile)]]
-
-       [:& dropdown-menu {:on-close (fn [event]
-                                      (dom/stop-propagation event)
-                                      (reset! show false))
-                          :show @show}
-        [:ul {:class (stl/css :dropdown)}
-         [:li {:tab-index (if show "0" "-1")
-               :on-click (partial on-click :settings-profile)
-               :on-key-down (fn [event]
-                              (when (kbd/enter? event)
-                                (on-click :settings-profile event)))
-               :data-test "profile-profile-opt"}
-          [:span {:class (stl/css :text)} (tr "labels.your-account")]]
-
-         [:li {:class (stl/css :separator)
-               :tab-index (if show "0" "-1")
-               :on-click #(dom/open-new-window "https://help.penpot.app")
-               :on-key-down (fn [event]
-                              (when (kbd/enter? event)
-                                (dom/open-new-window "https://help.penpot.app")))
-               :data-test "help-center-profile-opt"}
-          [:span {:class (stl/css :text)} (tr "labels.help-center")]]
-
-         [:li {:tab-index (if show "0" "-1")
-               :on-click #(dom/open-new-window "https://community.penpot.app")
-               :on-key-down (fn [event]
-                              (when (kbd/enter? event)
-                                (dom/open-new-window "https://community.penpot.app")))}
-          [:span {:class (stl/css :text)} (tr "labels.community")]]
-
-         [:li {:tab-index (if show "0" "-1")
-               :on-click #(dom/open-new-window "https://www.youtube.com/c/Penpot")
-               :on-key-down (fn [event]
-                              (when (kbd/enter? event)
-                                (dom/open-new-window "https://www.youtube.com/c/Penpot")))}
-          [:span {:class (stl/css :text)} (tr "labels.tutorials")]]
-
-         [:li {:tab-index (if show "0" "-1")
-               :on-click show-release-notes
-               :on-key-down (fn [event]
-                              (when (kbd/enter? event)
-                                (show-release-notes)))}
-          [:span {:class (stl/css :text)} (tr "labels.release-notes")]]
-
-         [:li {:class (stl/css :separator)
-               :tab-index (if show "0" "-1")
-               :on-click #(dom/open-new-window "https://penpot.app/libraries-templates")
-               :on-key-down (fn [event]
-                              (when (kbd/enter? event)
-                                (dom/open-new-window "https://penpot.app/libraries-templates")))
-               :data-test "libraries-templates-profile-opt"}
-          [:span {:class (stl/css :text)} (tr "labels.libraries-and-templates")]]
-
-         [:li {:tab-index (if show "0" "-1")
-               :on-click #(dom/open-new-window "https://github.com/penpot/penpot")
-               :on-key-down (fn [event]
-                              (when (kbd/enter? event)
-                                (dom/open-new-window "https://github.com/penpot/penpot")))}
-          [:span {:class (stl/css :text)} (tr "labels.github-repo")]]
-
-         [:li {:tab-index (if show "0" "-1")
-               :on-click #(dom/open-new-window "https://penpot.app/terms")
-               :on-key-down (fn [event]
-                              (when (kbd/enter? event)
-                                (dom/open-new-window "https://penpot.app/terms")))}
-          [:span {:class (stl/css :text)} (tr "auth.terms-of-service")]]
-
-         (when (contains? cf/flags :user-feedback)
-           [:li {:class (stl/css :separator)
-                 :tab-index (if show "0" "-1")
-                 :on-click (partial on-click :settings-feedback)
-                 :on-key-down (fn [event]
-                                (when (kbd/enter? event)
-                                  (on-click :settings-feedback event)))
-                 :data-test "feedback-profile-opt"}
-            [:span {:class (stl/css :text)} (tr "labels.give-feedback")]])
-
-         [:li {:class (stl/css :separator)
-               :tab-index (if show "0" "-1")
-               :on-click #(on-click (du/logout) %)
-               :on-key-down (fn [event]
-                              (when (kbd/enter? event)
-                                (on-click (du/logout) event)))
-               :data-test "logout-profile-opt"}
-          [:span {:class (stl/css :icon)} i/exit]
-          [:span {:class (stl/css :text)} (tr "labels.logout")]]]]
-
+      [:*
        (when (and team profile)
-         [:& comments-section {:profile profile
-                               :team team}])]
+         [:& comments-section
+          {:profile profile
+           :team team
+           :show? show-comments?
+           :on-show-comments handle-show-comments
+           :on-hide-comments handle-hide-comments}])
+
+       [:div {:class (stl/css :profile-section)}
+        [:div {:class (stl/css :profile)
+               :tab-index "0"
+               :on-click (fn [event]
+                           (dom/stop-propagation event)
+                           (reset! show true))
+               :on-key-down (fn [event]
+                              (when (kbd/enter? event)
+                                (reset! show true)))
+               :data-test "profile-btn"}
+         [:img {:src photo
+                :alt (:fullname profile)}]
+         [:span (:fullname profile)]]
+
+        [:& dropdown-menu {:on-close (fn [event]
+                                       (dom/stop-propagation event)
+                                       (reset! show false))
+                           :show @show}
+         [:ul {:class (stl/css :dropdown)}
+          [:li {:tab-index (if show "0" "-1")
+                :on-click (partial on-click :settings-profile)
+                :on-key-down (fn [event]
+                               (when (kbd/enter? event)
+                                 (on-click :settings-profile event)))
+                :data-test "profile-profile-opt"}
+           [:span {:class (stl/css :text)} (tr "labels.your-account")]]
+
+          [:li {:class (stl/css :separator)
+                :tab-index (if show "0" "-1")
+                :on-click #(dom/open-new-window "https://help.penpot.app")
+                :on-key-down (fn [event]
+                               (when (kbd/enter? event)
+                                 (dom/open-new-window "https://help.penpot.app")))
+                :data-test "help-center-profile-opt"}
+           [:span {:class (stl/css :text)} (tr "labels.help-center")]]
+
+          [:li {:tab-index (if show "0" "-1")
+                :on-click #(dom/open-new-window "https://community.penpot.app")
+                :on-key-down (fn [event]
+                               (when (kbd/enter? event)
+                                 (dom/open-new-window "https://community.penpot.app")))}
+           [:span {:class (stl/css :text)} (tr "labels.community")]]
+
+          [:li {:tab-index (if show "0" "-1")
+                :on-click #(dom/open-new-window "https://www.youtube.com/c/Penpot")
+                :on-key-down (fn [event]
+                               (when (kbd/enter? event)
+                                 (dom/open-new-window "https://www.youtube.com/c/Penpot")))}
+           [:span {:class (stl/css :text)} (tr "labels.tutorials")]]
+
+          [:li {:tab-index (if show "0" "-1")
+                :on-click show-release-notes
+                :on-key-down (fn [event]
+                               (when (kbd/enter? event)
+                                 (show-release-notes)))}
+           [:span {:class (stl/css :text)} (tr "labels.release-notes")]]
+
+          [:li {:class (stl/css :separator)
+                :tab-index (if show "0" "-1")
+                :on-click #(dom/open-new-window "https://penpot.app/libraries-templates")
+                :on-key-down (fn [event]
+                               (when (kbd/enter? event)
+                                 (dom/open-new-window "https://penpot.app/libraries-templates")))
+                :data-test "libraries-templates-profile-opt"}
+           [:span {:class (stl/css :text)} (tr "labels.libraries-and-templates")]]
+
+          [:li {:tab-index (if show "0" "-1")
+                :on-click #(dom/open-new-window "https://github.com/penpot/penpot")
+                :on-key-down (fn [event]
+                               (when (kbd/enter? event)
+                                 (dom/open-new-window "https://github.com/penpot/penpot")))}
+           [:span {:class (stl/css :text)} (tr "labels.github-repo")]]
+
+          [:li {:tab-index (if show "0" "-1")
+                :on-click #(dom/open-new-window "https://penpot.app/terms")
+                :on-key-down (fn [event]
+                               (when (kbd/enter? event)
+                                 (dom/open-new-window "https://penpot.app/terms")))}
+           [:span {:class (stl/css :text)} (tr "auth.terms-of-service")]]
+
+          (when (contains? cf/flags :user-feedback)
+            [:li {:class (stl/css :separator)
+                  :tab-index (if show "0" "-1")
+                  :on-click (partial on-click :settings-feedback)
+                  :on-key-down (fn [event]
+                                 (when (kbd/enter? event)
+                                   (on-click :settings-feedback event)))
+                  :data-test "feedback-profile-opt"}
+             [:span {:class (stl/css :text)} (tr "labels.give-feedback")]])
+
+          [:li {:class (stl/css :separator)
+                :tab-index (if show "0" "-1")
+                :on-click #(on-click (du/logout) %)
+                :on-key-down (fn [event]
+                               (when (kbd/enter? event)
+                                 (on-click (du/logout) event)))
+                :data-test "logout-profile-opt"}
+           [:span {:class (stl/css :icon)} i/exit]
+           [:span {:class (stl/css :text)} (tr "labels.logout")]]]]
+
+        (when (and team profile)
+          [:& comments-icon
+           {:profile profile
+            :show? show-comments?
+            :on-show-comments handle-show-comments}])]]
 
       ;; OLD
       [:div.profile-section
@@ -1127,8 +1150,12 @@
           [:span.text (tr "labels.logout")]]]]
 
        (when (and team profile)
-         [:& comments-section {:profile profile
-                               :team team}])])))
+         [:& comments-section
+          {:profile profile
+           :team team
+           :show? show-comments?
+           :on-show-comments handle-show-comments
+           :on-hide-comments handle-hide-comments}])])))
 
 (mf/defc sidebar
   {::mf/wrap-props false
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss
index 687d3a968..0d745a079 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.scss
+++ b/frontend/src/app/main/ui/dashboard/sidebar.scss
@@ -1,20 +1,20 @@
-@import "common/dependencies/colors";
-$fs14: 0.875rem;
-$fs12: 0.75rem;
-$fw400: 400;
-$size-2: 0.5rem;
-$size-3: 0.75rem;
-$size-4: 1rem;
-$br3: 3px;
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-refactor.scss" as *;
+@use "common/refactor/common-dashboard";
 
 .dashboard-sidebar {
   grid-row: 1 / span 2;
   grid-column: 1 / span 2;
 
   background-color: $db-primary;
-  border-right: 1px solid $db-cuaternary;
-  margin: 0 1rem 0 0;
-  padding: 1rem 0 0 0;
+  border-right: $s-1 solid $db-cuaternary;
+  margin: 0 $s-16 0 0;
+  padding: $s-16 0 0 0;
 
   z-index: 1;
   display: flex;
@@ -31,31 +31,22 @@ $br3: 3px;
 
   hr {
     border-color: transparent;
-    margin: 0.8rem 15px;
-  }
-
-  .back-to-dashboard {
-    .icon svg {
-      fill: $df-secondary;
-    }
-    .text {
-      color: $df-primary;
-    }
+    margin: $s-12 $s-16;
   }
 }
 
 .sidebar-team-switch {
   position: relative;
   display: flex;
-  margin: 5px 15px;
+  margin: $s-4 $s-16;
 
   .switch-content {
     background-color: $db-tertiary;
-    border-radius: 8px;
-    height: 48px;
+    border-radius: $br-8;
+    height: $s-48;
     display: flex;
     width: 100%;
-    border: 1px solid transparent;
+    border: $s-1 solid transparent;
     align-items: center;
 
     svg {
@@ -70,8 +61,8 @@ $br3: 3px;
 
     svg {
       fill: $df-secondary;
-      width: 10px;
-      height: 10px;
+      width: $s-12;
+      height: $s-12;
     }
   }
 
@@ -81,23 +72,23 @@ $br3: 3px;
     display: flex;
     align-items: center;
     flex-grow: 1;
-    font-size: 0.875rem;
-    padding: 0px 10px;
+    font-size: $fs-14;
+    padding: 0 $s-12;
     background-color: transparent;
     border: none;
-    border-right: 1px solid $db-primary;
+    border-right: $s-1 solid $db-primary;
   }
 
   .team-name {
     flex-grow: 1;
     display: flex;
-    height: 40px;
+    height: $s-40;
     align-items: center;
   }
 
   .team-text {
     color: $df-primary;
-    width: 145px;
+    width: $s-144;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
@@ -107,26 +98,26 @@ $br3: 3px;
   .team-icon {
     display: flex;
     align-items: center;
-    padding-right: 10px;
+    padding-right: $s-12;
 
     img {
       border-radius: 50%;
       flex-shrink: 0;
-      height: 23px;
-      width: 23px;
+      height: $s-24;
+      width: $s-24;
     }
 
     svg {
-      width: 23px;
-      height: 23px;
+      width: $s-24;
+      height: $s-24;
     }
   }
 
   .switch-options {
     display: flex;
-    max-width: 22px;
-    min-width: 28px;
-    border-left: 1px solid #e3e3e3;
+    max-width: $s-24;
+    min-width: $s-28;
+    border-left: $s-1 solid $df-primary;
     justify-content: center;
     align-items: center;
     cursor: pointer;
@@ -135,16 +126,16 @@ $br3: 3px;
 
     svg {
       fill: $df-secondary;
-      width: 15px;
-      height: 13px;
+      width: $s-16;
+      height: $s-12;
     }
   }
 
   .dropdown {
-    right: 2px;
-    top: 50px;
-    min-width: 162px;
-    max-height: 30rem;
+    right: $s-2;
+    top: $s-52;
+    min-width: $s-160;
+    max-height: $s-480;
   }
 }
 
@@ -152,36 +143,36 @@ $br3: 3px;
   position: absolute;
   z-index: 12;
   background-color: $db-tertiary;
-  border: 1px solid $db-cuaternary;
-  border-radius: 8px;
+  border: $s-1 solid $db-cuaternary;
+  border-radius: $br-8;
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
 
   .separator {
     border-color: transparent;
-    margin-top: 10px;
+    margin-top: $s-12;
   }
 
   li {
-    border-radius: 8px;
-    height: 40px;
-    margin: 5px;
+    border-radius: $br-8;
+    height: $s-40;
+    margin: $s-6;
 
     display: flex;
     align-items: center;
     cursor: pointer;
-    font-size: 0.875rem;
-    padding: 5px 16px;
+    font-size: $fs-14;
+    padding: $s-6 $s-16;
 
     .warning {
-      color: #e65244;
+      color: var(--dark-warning-color);
     }
 
     &:hover {
       background-color: $db-cuaternary;
     }
     svg {
-      height: 12px;
-      width: 12px;
+      height: $s-12;
+      width: $s-12;
     }
   }
 
@@ -194,7 +185,7 @@ $br3: 3px;
     li {
       color: $df-primary;
       &.warning {
-        color: $color-danger;
+        color: var(--dark-warning-color);
       }
     }
   }
@@ -202,22 +193,22 @@ $br3: 3px;
 
 .teams-dropdown {
   background-color: $db-tertiary;
-  border-radius: 8px;
-  border: 1px solid $db-cuaternary;
-  min-width: 248px;
+  border-radius: $br-8;
+  border: $s-1 solid $db-cuaternary;
+  min-width: $s-248;
 
   left: 0;
-  top: 50px;
+  top: $s-52;
   z-index: 12;
-  max-height: 30rem;
+  max-height: $s-480;
   overflow-x: hidden;
   overflow-y: auto;
 
   li {
-    border-radius: 8px;
-    height: 42px;
-    padding: 0 5px;
-    margin: 5px;
+    border-radius: $br-8;
+    height: $s-40;
+    padding: 0 $s-6;
+    margin: $s-6;
 
     svg {
       fill: $df-secondary;
@@ -240,7 +231,7 @@ $br3: 3px;
     }
     .team-text {
       color: $df-primary;
-      width: 165px;
+      width: $s-168;
     }
 
     .new-team {
@@ -251,14 +242,14 @@ $br3: 3px;
       .team-icon {
         background-color: #2e3434;
         border-radius: 50%;
-        height: 24px;
-        margin-right: 10px;
-        padding: 6px;
-        width: 24px;
+        height: $s-24;
+        margin-right: $s-12;
+        padding: $s-6;
+        width: $s-24;
 
         svg {
-          height: 12px;
-          width: 12px;
+          height: $s-12;
+          width: $s-12;
         }
       }
     }
@@ -266,52 +257,52 @@ $br3: 3px;
 }
 
 .sidebar-empty-placeholder {
-  padding: 10px 12px;
+  padding: $s-12;
   color: $df-secondary;
   display: flex;
   align-items: flex-start;
 
   .icon {
-    padding: 0px 10px;
+    padding: 0 $s-12;
     svg {
-      fill: $color-gray-30;
-      width: 12px;
-      height: 12px;
+      fill: $df-secondary;
+      width: $s-12;
+      height: $s-12;
     }
   }
   .text {
-    font-size: $fs12;
+    font-size: $fs-12;
   }
 }
 
 .sidebar-search {
   align-items: center;
-  border: 1px solid transparent;
+  border: $s-1 solid transparent;
   display: flex;
-  margin: 5px 15px;
+  margin: $s-6 $s-16;
 
   background-color: $db-tertiary;
-  border-radius: 8px;
-  margin-bottom: 2rem;
+  border-radius: $br-8;
+  margin-bottom: $s-32;
   margin-top: 0;
   position: relative;
 
   .input-text {
     background: transparent;
     border: 0;
-    font-size: 0.875rem;
+    font-size: $fs-14;
     margin: 0;
     width: 100%;
-    height: 40px;
+    height: $s-40;
 
-    border-radius: 8px;
+    border-radius: $br-8;
     color: $df-primary;
     max-width: 100%;
-    padding: 6px 10px;
+    padding: $s-6 $s-12;
 
     &:focus,
     &:focus-within {
-      border: 1px solid $da-primary;
+      border: $s-1 solid $da-primary;
     }
   }
   ::placeholder {
@@ -323,19 +314,19 @@ $br3: 3px;
     align-items: center;
     cursor: pointer;
     display: flex;
-    height: 22px;
+    height: $s-24;
     margin-left: auto;
-    padding: 0 0.5rem;
-    width: 32px;
+    padding: 0 $s-8;
+    width: $s-32;
 
     position: absolute;
-    top: 10px;
-    right: 2px;
+    top: $s-12;
+    right: $s-2;
 
     svg {
-      fill: $color-gray-30;
-      height: 15px;
-      width: 15px;
+      fill: $df-secondary;
+      height: $s-16;
+      width: $s-16;
     }
   }
 
@@ -343,7 +334,7 @@ $br3: 3px;
     transform: rotate(45deg);
 
     &:hover {
-      fill: $color-danger;
+      fill: var(--warning-color);
     }
   }
 }
@@ -364,7 +355,7 @@ $br3: 3px;
     cursor: pointer;
     display: flex;
     flex-shrink: 0;
-    padding: 0.6rem 0.6rem 0.6rem 1.4rem;
+    padding: $s-8 $s-8 $s-8 $s-24;
     a {
       font-weight: $fw400;
       width: 100%;
@@ -374,15 +365,15 @@ $br3: 3px;
     }
 
     svg {
-      fill: $color-black;
-      margin-right: 8px;
-      height: $size-3;
-      width: $size-3;
+      fill: $db-secondary;
+      margin-right: $s-8;
+      height: $s-12;
+      width: $s-12;
     }
 
     .element-title {
       color: $df-secondary;
-      font-size: $fs14;
+      font-size: $fs-14;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -390,42 +381,35 @@ $br3: 3px;
 
     &.recent-projects {
       svg {
-        fill: $color-white;
+        fill: $df-primary;
       }
     }
 
-    & .edit-wrapper {
-      border: 1px solid $color-gray-10;
-      border-radius: $br3;
-      display: flex;
-      width: 100%;
-    }
-
     input.element-title {
       border: 0;
-      height: 30px;
-      padding: 5px;
+      height: $s-32;
+      padding: $s-6;
       margin: 0;
       width: 100%;
-      background-color: $color-white;
+      background-color: $df-primary;
     }
 
     .close {
-      background-color: $color-white;
+      background-color: $df-primary;
       cursor: pointer;
-      padding-left: 5px;
+      padding-left: $s-6;
 
       svg {
-        fill: $color-gray-30;
-        height: 15px;
+        fill: $df-secondary;
+        height: $s-16;
         transform: rotate(45deg) translateY(7px);
-        width: 15px;
+        width: $s-16;
         margin: 0;
       }
     }
 
     .element-subtitle {
-      color: $color-gray-20;
+      color: $df-secondary;
       font-style: italic;
     }
 
@@ -446,11 +430,11 @@ $br3: 3px;
   align-items: center;
   cursor: pointer;
   display: flex;
-  padding: 10px 15px;
+  padding: $s-12 $s-16;
   position: relative;
 
   background-color: $db-tertiary;
-  border-top: 1px solid $db-cuaternary;
+  border-top: $s-1 solid $db-cuaternary;
 
   .profile {
     align-items: center;
@@ -459,56 +443,56 @@ $br3: 3px;
     flex-grow: 1;
 
     span {
-      // @include text-ellipsis;
+      @include text-ellipsis;
       color: $df-primary;
-      margin: 10px;
-      font-size: $fs14;
-      max-width: 160px;
+      margin: $s-12;
+      font-size: $fs-14;
+      max-width: $s-160;
     }
 
     img {
       border-radius: 50%;
       flex-shrink: 0;
-      height: 25px;
-      width: 25px;
+      height: $s-40;
+      width: $s-40;
     }
     svg {
-      height: 10px;
+      height: $s-12;
       margin-left: auto;
-      margin-right: $size-2;
-      width: 10px;
+      margin-right: $s-8;
+      width: $s-12;
     }
   }
 
   .dropdown {
-    left: 15px;
-    bottom: 45px;
+    left: $s-16;
+    bottom: $s-44;
 
-    background-color: #212426;
-    border: 1px solid #2e3434;
-    border-radius: 8px;
-    min-width: 252px;
+    background-color: $db-primary;
+    border: $s-1 solid $db-tertiary;
+    border-radius: $br-8;
+    min-width: $s-252;
 
-    // @include animation(0, 0.2s, fadeInUp);
+    @include animation(0, 0.2s, fadeInUp);
 
     li {
-      font-size: $fs14;
-      padding: $size-2 $size-4;
+      font-size: $fs-14;
+      padding: $s-8 $s-16;
 
       svg {
-        fill: $color-gray-20;
-        margin-right: $size-2;
+        fill: $df-secondary;
+        margin-right: $s-8;
 
-        height: 12px;
-        width: 12px;
+        height: $s-12;
+        width: $s-12;
       }
 
       .text {
-        color: #ffffff;
+        color: $df-primary;
       }
 
       &.separator {
-        border-top: 1px solid transparent;
+        border-top: $s-1 solid transparent;
       }
     }
   }
diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs
index dcb5cf8c2..919675791 100644
--- a/frontend/src/app/main/ui/dashboard/team.cljs
+++ b/frontend/src/app/main/ui/dashboard/team.cljs
@@ -678,7 +678,7 @@
           [:span {:class (stl/css :rol-label)} label]])
 
        [:& dropdown {:show @show? :on-close on-hide}
-        [:ul.dropdown.options-dropdown
+        [:ul {:class (stl/css :dropdown :options-dropdown)}
          [:li {:data-role "admin" :on-click on-change'} (tr "labels.admin")]
          [:li {:data-role "editor" :on-click on-change'} (tr "labels.editor")]]]]
 
@@ -1148,12 +1148,6 @@
 (mf/defc webhooks-hero
   {::mf/wrap-props false}
   []
-  #_[:div.banner
-   [:div.title (tr "labels.webhooks")
-    [:div.description (tr "dashboard.webhooks.description")]]
-   [:div.create-container
-    [:div.create (tr "dashboard.webhooks.create")]]]
-
   (let [new-css-system (mf/use-ctx ctx/new-css-system)]
     (if new-css-system
       [:div {:class (stl/css :webhooks-hero-container)}
@@ -1478,4 +1472,3 @@
             [:span.icon i/file-html]
             [:span.text (tr "labels.num-of-files" (i18n/c (:files stats)))]]]]]]])))
 
-
diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss
index 9a1306770..b8e3882a8 100644
--- a/frontend/src/app/main/ui/dashboard/team.scss
+++ b/frontend/src/app/main/ui/dashboard/team.scss
@@ -4,7 +4,590 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "common/refactor/common-refactor.scss" as *;
+@use "common/refactor/common-dashboard";
+
+.dashboard-container {
+  flex: 1 0 0;
+  margin-right: $s-16;
+  overflow-y: auto;
+  width: 100%;
+  border-top: $s-1 solid $db-cuaternary;
+
+  &.dashboard-projects {
+    user-select: none;
+  }
+  &.dashboard-shared {
+    width: calc(100vw - $s-320);
+    margin-right: $s-52;
+  }
+
+  &.search {
+    margin-top: $s-12;
+  }
+}
+
+.dashboard-team-webhooks {
+  display: flex;
+  flex-direction: column;
+  width: $s-800;
+  margin-left: $s-120;
+  margin-top: $s-80;
+  border: none;
+  align-items: flex-start;
+}
+
+.webhooks-empty {
+  align-items: center;
+  background-color: transparent;
+  border-radius: $br-8;
+  border: $s-1 solid $db-cuaternary;
+  color: $df-secondary;
+  display: flex;
+  flex-direction: column;
+  font-size: $fs-12;
+  justify-content: center;
+  margin-top: $s-32;
+  max-width: $s-1000;
+  min-height: $s-136;
+  padding: $s-32;
+  text-align: center;
+  width: $s-468;
+}
+
+.webhooks-hero-container {
+  max-width: $s-1000;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  width: $s-468;
+  background-color: transparent;
+
+  .upload-button {
+    width: $s-100;
+  }
+
+  .btn-secondary {
+    margin-left: $s-12;
+  }
+}
+
+.webhooks-hero {
+  font-size: $fs-14;
+  display: flex;
+  flex-direction: column;
+  gap: $s-32;
+  justify-content: space-between;
+  margin-top: $s-32;
+  margin: 0;
+  padding: $s-32;
+  padding: 0;
+  width: $s-468;
+
+  .desc {
+    color: $df-secondary;
+    width: 100%;
+
+    h2 {
+      color: $df-primary;
+      font-size: $fs-24;
+      font-weight: regular;
+      margin-bottom: $s-32;
+    }
+    p {
+      color: $df-secondary;
+      margin-bottom: 0;
+      font-size: $fs-16;
+    }
+  }
+  .btn-primary {
+    flex-shrink: 0;
+    width: 100%;
+    font-size: $fs-12;
+    text-transform: uppercase;
+    background-color: $db-tertiary;
+    color: $df-primary;
+    &:hover {
+      color: $da-primary;
+      background-color: $db-cuaternary;
+    }
+  }
+}
+
+.dropdown {
+  background-color: $db-tertiary;
+  border-radius: $br-8;
+  border: $s-1 solid $db-cuaternary;
+  box-shadow: 0 $s-2 $s-8 rgba(0, 0, 0, 0.25);
+  left: calc(-1 * $s-144);
+  max-height: $s-480;
+  min-width: $s-252;
+  overflow-y: auto;
+  position: absolute;
+  top: $s-32;
+  width: $s-152;
+  z-index: 12;
+
+  hr {
+    margin: 0;
+    border-color: $df-secondary;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: $fs-14;
+    padding: $s-4 $s-16;
+    border-radius: $br-8;
+    height: $s-40;
+    margin: $s-6;
+    color: $df-primary;
+
+    &:hover {
+      background-color: $db-cuaternary;
+    }
+
+    &.title {
+      font-weight: $fw700;
+      cursor: default;
+    }
+  }
+
+  .separator {
+    border-color: transparent;
+    margin-top: $s-8;
+  }
+
+  &.options-dropdown {
+    li {
+      color: $df-primary;
+      &.warning {
+        color: var(--warning-color);
+      }
+    }
+  }
+}
+
+.dashboard-table {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: $s-20;
+  font-size: $fs-16;
+
+  .table-header {
+    color: $df-secondary;
+    display: grid;
+    font-size: $fs-12;
+    grid-template-columns: 43% 1fr $s-108 $s-12;
+    height: $s-40;
+    max-width: $s-1000;
+    padding: 0 $s-16;
+    text-transform: uppercase;
+    user-select: none;
+    width: 100%;
+  }
+  .table-rows {
+    display: flex;
+    flex-direction: column;
+    max-width: $s-1000;
+    width: 100%;
+    margin-top: $s-16;
+    color: $db-secondary;
+  }
+
+  .table-row {
+    align-items: center;
+    background-color: $db-tertiary;
+    border-radius: $br-8;
+    color: $df-primary;
+    display: flex;
+    height: $s-64;
+    padding: 0 $s-16;
+    width: 100%;
+
+    &:not(:first-child) {
+      margin-top: $s-16;
+    }
+  }
+
+  .table-field {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      padding-left: $s-12;
+      cursor: pointer;
+    }
+
+    &.name {
+      width: 43%;
+      min-width: $s-300;
+      display: flex;
+    }
+    &.roles {
+      flex-grow: 1;
+      cursor: default;
+      position: relative;
+      .rol-label {
+        user-select: none;
+      }
+      .rol-selector {
+        &.has-priv {
+          cursor: pointer;
+        }
+        min-width: $s-160;
+        height: $s-32;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: $s-4 $s-8;
+        font-size: $fs-14;
+        background-color: $db-cuaternary;
+        border-color: transparent;
+        border-radius: $br-8;
+      }
+
+      .dropdown {
+        left: 0;
+      }
+    }
+
+    &.actions {
+      position: relative;
+      .actions-dropdown {
+        max-height: $s-480;
+        min-width: $s-180;
+      }
+
+      svg {
+        fill: $df-secondary;
+      }
+    }
+
+    &.status {
+      .status-badge {
+        min-width: $s-76;
+        height: $s-24;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: $br-8;
+        color: $db-primary;
+        text-transform: uppercase;
+
+        &.pending {
+          background-color: var(--warning-color);
+        }
+
+        &.expired {
+          background-color: $df-secondary;
+        }
+
+        .status-label {
+          font-size: $fs-12;
+        }
+      }
+    }
+
+    &.uri {
+      flex-grow: 1;
+    }
+
+    &.active {
+      min-width: $s-100;
+    }
+
+    &.last-delivery {
+      display: flex;
+      justify-content: center;
+      width: $s-52;
+      position: relative;
+      .success svg {
+        fill: $da-tertiary;
+        width: $s-16;
+        height: $s-16;
+      }
+      .failure svg {
+        fill: var(--warning-color);
+        width: $s-16;
+        height: $s-16;
+      }
+
+      .icon-container {
+        width: $s-16;
+        height: $s-16;
+        overflow-x: visible;
+      }
+
+      .icon {
+        padding: 0;
+      }
+    }
+
+    .tooltip {
+      display: none;
+      position: absolute;
+      top: calc(-1 * $s-56);
+      left: 50%;
+      transform: translate(-50%, 0);
+      text-align: center;
+
+      .label {
+        border-radius: $br-4;
+        color: $df-primary;
+        background-color: $db-secondary;
+        white-space: nowrap;
+        padding: $s-12 $s-20;
+      }
+
+      .arrow-down {
+        margin: 0 auto;
+        width: 0;
+        height: 0;
+        border-left: $s-8 solid transparent;
+        border-right: $s-8 solid transparent;
+        border-top: $s-8 solid $db-secondary;
+      }
+    }
+
+    .last-delivery-icon:hover {
+      .tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .member-info {
+    display: flex;
+    flex-direction: column;
+    margin-left: $s-16;
+  }
+  .member-name {
+    font-size: $fs-16;
+  }
+  .you {
+    color: $df-secondary;
+    margin-left: $s-6;
+  }
+  .member-email {
+    color: $df-secondary;
+    font-size: $fs-12;
+  }
+  .member-image {
+    height: $s-32;
+    width: $s-32;
+    img {
+      border-radius: 50%;
+    }
+  }
+
+  .dashboard-team-webhooks & {
+    width: $s-800;
+    .table-rows {
+      padding-top: 0;
+      .table-row {
+        font-size: $fs-16;
+        min-height: $s-40;
+        height: fit-content;
+        .name {
+          color: $df-primary;
+          max-width: $s-480;
+        }
+        .expiration-date {
+          color: $df-secondary;
+        }
+      }
+    }
+  }
+
+  &.team-members {
+    margin-bottom: $s-52;
+  }
+
+  &.invitations {
+    .table-row {
+      display: grid;
+      grid-template-columns: 43% 1fr $s-108 $s-12;
+    }
+  }
+
+  svg {
+    width: $s-12;
+    height: $s-12;
+    fill: $df-secondary;
+  }
+}
+
+.empty-invitations {
+  height: $s-156;
+  max-width: $s-1000;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin-top: $s-16;
+  border: $s-1 solid $db-cuaternary;
+  border-radius: $br-8;
+  color: $df-secondary;
+}
+
+.team-settings {
+  display: flex;
+  justify-content: center;
+  margin-top: $s-16;
+
+  svg {
+    width: $s-20;
+    height: $s-20;
+  }
+
+  .horizontal-blocks {
+    display: flex;
+    max-width: $s-1000;
+    justify-content: space-between;
+    width: 100%;
+    flex-direction: column;
+    gap: $s-24;
+  }
+
+  .block {
+    display: flex;
+    max-width: $s-324;
+    width: $s-324;
+    flex-direction: column;
+    padding: $s-12;
+
+    .label {
+      color: $df-secondary;
+      font-size: $fs-12;
+      text-transform: uppercase;
+    }
+    .icon svg {
+      fill: $df-secondary;
+    }
+    .name,
+    .text {
+      color: $df-primary;
+    }
+  }
+
+  .info-block {
+    position: relative;
+    padding-top: $s-180;
+
+    .name {
+      margin-top: $s-12;
+      font-size: $fs-24;
+      color: $df-primary;
+      @include text-ellipsis;
+      margin-right: $s-88;
+    }
+
+    .icon {
+      position: absolute;
+      padding: $s-16;
+      right: 0;
+      top: 0;
+      left: 0;
+      height: $s-120;
+      width: $s-120;
+
+      img {
+        border-radius: 50%;
+        width: $s-120;
+        height: $s-120;
+      }
+
+      .update-overlay {
+        opacity: 0;
+        cursor: pointer;
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        color: $df-primary;
+        z-index: 14;
+
+        background-color: $da-primary;
+        height: $s-120;
+        width: $s-120;
+
+        svg {
+          fill: $db-primary;
+        }
+      }
+
+      &:hover {
+        .update-overlay {
+          opacity: 1;
+          width: $s-72;
+          height: $s-72;
+          top: $s-16;
+          left: $s-16;
+        }
+      }
+    }
+  }
+
+  .owner-block {
+    img {
+      width: $s-32;
+      height: $s-32;
+      border-radius: 50%;
+    }
+
+    svg {
+      width: $s-12;
+      height: $s-12;
+      fill: $db-secondary;
+    }
+
+    .owner {
+      margin-top: $s-6;
+      display: flex;
+      align-items: center;
+      color: $db-secondary;
+      .icon {
+        margin-right: $s-12;
+      }
+    }
+
+    .summary {
+      margin-top: $s-6;
+      color: $db-secondary;
+      .icon {
+        padding: 0 $s-12;
+        margin-right: $s-12;
+      }
+    }
+  }
+
+  .stats-block {
+    svg {
+      fill: $db-secondary;
+    }
+
+    .projects,
+    .files {
+      margin-top: $s-8;
+      display: flex;
+      align-items: center;
+      color: $db-secondary;
+
+      .icon {
+        display: flex;
+        align-items: center;
+        padding: 0 $s-2;
+        margin-right: $s-12;
+      }
+    }
+  }
+}
 
 .modal-team-container {
   @extend .modal-container-base;
@@ -140,1198 +723,3 @@
     }
   }
 }
-
-/////
-
-@import "common/dependencies/colors";
-
-$br2: 2px;
-$br3: 3px;
-$br4: 4px;
-$br8: 8px;
-$br6: 6px;
-$br12: 12px;
-$fs12: 0.75rem;
-$fs13: 0.8125rem;
-$fs14: 0.875rem;
-$fs16: 1rem;
-$fs18: 1.125rem;
-$fs22: 1.375rem;
-$fs24: 1.5rem;
-$fs36: 2.25rem;
-$fw400: 400;
-$fw500: 500;
-$fw600: 600;
-$fw700: 700;
-$lh-088: 0.88;
-$lh-115: 1.15; // original $title-lh-sm
-$lh-500: 5; // original $title-lh-sm
-$size-1: 0.25rem;
-$size-2: 0.5rem;
-$size-4: 1rem;
-$size-5: 1.5rem;
-$size-6: 2rem;
-
-.dashboard-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $color-white;
-  height: 63px;
-  padding: $size-1 $size-4 $size-1 $size-2;
-  position: relative;
-  z-index: 10;
-  user-select: none;
-  &.team {
-    display: grid;
-    grid-template-columns: 20% 1fr 20%;
-  }
-
-  .element-name {
-    margin-right: $size-2;
-  }
-
-  .btn-secondary {
-    flex-shrink: 0;
-    z-index: 10;
-    height: 32px;
-  }
-
-  svg {
-    fill: $color-black;
-    height: 14px;
-    margin-right: $size-1;
-    width: 14px;
-  }
-
-  nav {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    z-index: 1;
-
-    ul {
-      display: flex;
-      font-size: $fs14;
-      justify-content: center;
-      margin: 0;
-    }
-
-    li {
-      a {
-        display: flex;
-        align-items: center;
-        flex-basis: 140px;
-        border-bottom: 3px solid transparent;
-        color: $color-gray-30;
-        height: 40px;
-        padding: $size-1 $size-5;
-        font-weight: $fw400;
-        &:hover {
-          color: $color-black;
-          text-decoration: none;
-        }
-      }
-
-      //&.active {
-      //  a {
-      //    color: $color-black;
-      //    border-color: $color-primary;
-      //  }
-      //}
-    }
-  }
-
-  .dashboard-title {
-    display: flex;
-    align-items: center;
-    margin-left: 13px;
-
-    h1 {
-      color: $color-black;
-      display: flex;
-      flex-shrink: 0;
-      font-size: $fs22;
-      font-weight: $fw600;
-      z-index: 10;
-      user-select: all;
-    }
-
-    .context-menu.is-open {
-      margin-top: 10px;
-    }
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-left: $size-2;
-    z-index: 10;
-
-    svg {
-      fill: $color-gray-40;
-      width: 15px;
-      height: 15px;
-
-      &:hover {
-        fill: $color-primary-dark;
-      }
-    }
-  }
-
-  .dashboard-buttons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .dashboard-header-actions {
-    display: flex;
-  }
-
-  .pin-icon {
-    margin: 0 $size-2 0 $size-5;
-    background-color: transparent;
-    border: none;
-    svg {
-      fill: $color-gray-20;
-    }
-
-    &.active {
-      svg {
-        fill: $color-gray-50;
-      }
-    }
-  }
-}
-
-.dashboard-header {
-  background-color: transparent;
-  .dashboard-title {
-    h1 {
-      color: $df-primary;
-      font-size: 24px;
-      font-weight: 400;
-      width: 100%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      display: block;
-      max-width: 700px;
-    }
-  }
-  .icon {
-    svg {
-      fill: $df-secondary;
-    }
-  }
-
-  // Settings sub-menu
-  .dashboard-header-options {
-    li {
-      a {
-        font-size: 16px;
-        color: $df-secondary;
-        border-color: transparent;
-        &:hover {
-          color: $df-primary;
-        }
-      }
-      &.active {
-        a {
-          color: $df-primary;
-        }
-      }
-    }
-  }
-}
-
-.dashboard-container {
-  background-color: $color-dashboard;
-  flex: 1 0 0;
-  margin-right: $size-4;
-  overflow-y: auto;
-  width: 100%;
-  &.dashboard-projects {
-    user-select: none;
-  }
-  &.no-bg {
-    background-color: transparent;
-  }
-  &.dashboard-shared {
-    width: calc(100vw - 320px);
-    margin-right: 50px;
-  }
-
-  &.search {
-    margin-top: 10px;
-  }
-}
-
-.dashboard-container {
-  background-color: transparent;
-  border-top: 1px solid $db-cuaternary;
-
-  .dashboard-settings {
-    a {
-      color: $df-secondary;
-    }
-    .form-container {
-      width: 800px;
-      margin: 80px auto auto 120px;
-      form {
-        width: 468px;
-        .fields-row {
-          .custom-input,
-          .custom-select {
-            flex-direction: column-reverse;
-            label {
-              position: relative;
-              text-transform: uppercase;
-              color: $df-primary;
-              font-size: 11px;
-              margin-bottom: 12px;
-              margin-left: -4px;
-            }
-            input,
-            select {
-              background-color: $db-tertiary;
-              border-radius: 8px;
-              border-color: transparent;
-              color: $df-primary;
-              padding: 0 15px;
-              &:focus {
-                outline: 1px solid $da-primary;
-              }
-              ::placeholder {
-                color: $df-secondary;
-              }
-            }
-            .help-icon {
-              bottom: 12px;
-              top: auto;
-              svg {
-                fill: $df-secondary;
-              }
-            }
-            &.disabled {
-              input {
-                background-color: $db-primary;
-                border-color: $db-cuaternary;
-                color: $df-secondary;
-              }
-            }
-            .input-container {
-              background-color: $db-tertiary;
-              border-radius: 8px;
-              border-color: transparent;
-              margin-top: 22px;
-              .main-content {
-                label {
-                  position: absolute;
-                  top: -24px;
-                }
-                span {
-                  color: $df-primary;
-                }
-              }
-              &:focus {
-                border: 1px solid $da-primary;
-              }
-            }
-            textarea {
-              border-radius: 8px;
-              padding: 12px 14px;
-              background-color: $db-tertiary;
-              color: $df-primary;
-              border: none;
-              &:focus {
-                outline: 1px solid $da-primary;
-              }
-            }
-          }
-        }
-        .field-title {
-          color: $df-primary;
-        }
-        .field-title:not(:first-child) {
-          margin-top: 64px;
-        }
-
-        .field-text {
-          color: $df-secondary;
-        }
-        button,
-        .btn-secondary {
-          width: 100%;
-          font-size: 11px;
-          text-transform: uppercase;
-          background-color: $db-tertiary;
-          color: $df-primary;
-          &:hover {
-            color: $da-primary;
-            background-color: $db-cuaternary;
-          }
-        }
-        hr {
-          display: none;
-        }
-      }
-      .links {
-        margin-top: 12px;
-      }
-    }
-  }
-
-  //Access tokens
-  .dashboard-access-tokens {
-    width: 800px;
-    margin-left: 120px;
-    margin-top: 80px;
-    .access-tokens-hero-container {
-      background-color: transparent;
-      .access-tokens-hero {
-        width: 468px;
-        flex-direction: column;
-        gap: 32px;
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        .desc {
-          background-color: transparent;
-          width: 100%;
-          h2 {
-            color: $df-primary;
-            font-size: 24px;
-            font-weight: regular;
-            margin-bottom: 32px;
-          }
-          p {
-            color: $df-secondary;
-            margin-bottom: 0;
-            font-size: 14px;
-          }
-        }
-        button {
-          width: 100%;
-          font-size: 11px;
-          text-transform: uppercase;
-          background-color: $db-tertiary;
-          color: $df-primary;
-          &:hover {
-            color: $da-primary;
-            background-color: $db-cuaternary;
-          }
-        }
-      }
-    }
-    .dashboard-table {
-      width: 800px;
-      .table-rows {
-        padding-top: 0;
-        .table-row {
-          font-size: 14px;
-          min-height: 40px;
-          height: fit-content;
-          .name {
-            color: $df-primary;
-            max-width: 480px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-          }
-          .expiration-date {
-            color: $df-secondary;
-          }
-        }
-      }
-    }
-    .access-tokens-empty {
-      width: 468px;
-      border: 1px solid $db-cuaternary;
-      border-radius: 8px;
-      margin-top: 32px;
-      font-size: 14px;
-      background-color: transparent;
-      color: $df-secondary;
-    }
-  }
-
-  // Team webhooks
-  &.dashboard-team-webhooks {
-    width: 800px;
-    margin-left: 120px;
-    margin-top: 80px;
-    border: none;
-    align-items: flex-start;
-    .webhooks-hero-container {
-      width: 468px;
-      background-color: transparent;
-      .webhooks-hero {
-        width: 468px;
-        flex-direction: column;
-        gap: 32px;
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        .desc {
-          background-color: transparent;
-          width: 100%;
-          h2 {
-            color: $df-primary;
-            font-size: 24px;
-            font-weight: regular;
-            margin-bottom: 32px;
-          }
-          p {
-            color: $df-secondary;
-            margin-bottom: 0;
-            font-size: 14px;
-          }
-        }
-        .btn-primary {
-          width: 100%;
-          font-size: 11px;
-          text-transform: uppercase;
-          background-color: $db-tertiary;
-          color: $df-primary;
-          &:hover {
-            color: $da-primary;
-            background-color: $db-cuaternary;
-          }
-        }
-      }
-    }
-    .dashboard-table {
-      width: 800px;
-      .table-rows {
-        padding-top: 0;
-        .table-row {
-          font-size: 14px;
-          min-height: 40px;
-          height: fit-content;
-          .name {
-            color: $df-primary;
-            max-width: 480px;
-          }
-          .expiration-date {
-            color: $df-secondary;
-          }
-        }
-      }
-    }
-    .webhooks-empty {
-      width: 468px;
-      border: 1px solid $db-cuaternary;
-      border-radius: 8px;
-      margin-top: 32px;
-      font-size: 14px;
-      background-color: transparent;
-      color: $df-secondary;
-    }
-  }
-
-  // Members section
-  .dashboard-table {
-    .table-header {
-      background-color: transparent;
-      color: $df-secondary;
-      font-size: 12px;
-      text-transform: uppercase;
-    }
-    .table-rows {
-      .table-row {
-        background-color: $db-tertiary;
-        border-radius: 8px;
-        color: $df-primary;
-        .rol-selector {
-          background-color: $db-cuaternary;
-          border-color: transparent;
-          border-radius: 8px;
-        }
-      }
-    }
-    .member-info {
-      .member-name .you,
-      .member-email {
-        color: $df-secondary;
-      }
-    }
-    .status-badge {
-      border-radius: 8px;
-      color: $db-primary;
-      text-transform: uppercase;
-    }
-    .empty-invitations {
-      border: 1px solid $db-cuaternary;
-      border-radius: 8px;
-      color: $df-secondary;
-    }
-  }
-  .actions-dropdown,
-  .options-dropdown {
-    background-color: $db-tertiary;
-    border: 1px solid $db-cuaternary;
-    border-radius: 8px;
-    min-width: 252px;
-
-    .separator {
-      border-color: transparent;
-      margin-top: 10px;
-    }
-
-    li {
-      border-radius: 8px;
-      height: 40px;
-      margin: 5px;
-      color: $df-primary;
-
-      &:hover {
-        background-color: $db-cuaternary;
-      }
-    }
-
-    &.options-dropdown {
-      li {
-        color: $df-primary;
-        &.warning {
-          color: $color-danger;
-        }
-      }
-    }
-  }
-}
-
-.dashboard-table {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 20px;
-  font-size: $fs16;
-
-  &.team-members {
-    margin-bottom: 52px;
-  }
-
-  &.invitations {
-    .table-row {
-      display: grid;
-      grid-template-columns: 43% 1fr 109px 12px;
-    }
-  }
-
-  .table-header {
-    display: grid;
-    grid-template-columns: 43% 1fr 109px 12px;
-    max-width: 1040px;
-    background-color: $color-white;
-    color: $color-gray-30;
-    width: 100%;
-    height: 40px;
-    padding: 0px 16px;
-  }
-
-  .table-rows {
-    display: flex;
-    flex-direction: column;
-    max-width: 1040px;
-    width: 100%;
-    margin-top: 16px;
-    color: $color-black;
-  }
-
-  .table-row {
-    display: flex;
-    width: 100%;
-    height: 45px;
-    align-items: center;
-    padding: 0px 16px;
-  }
-
-  .table-field {
-    display: flex;
-    align-items: center;
-
-    .icon {
-      padding-left: 10px;
-      cursor: pointer;
-    }
-  }
-
-  svg {
-    width: 10px;
-    height: 10px;
-    fill: $color-black;
-  }
-}
-
-.dashboard-team-members,
-.dashboard-team-invitations,
-.dashboard-team-webhooks {
-  .empty-invitations {
-    height: 156px;
-    max-width: 1040px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    border: 1px dashed $color-gray-20;
-    margin-top: 16px;
-  }
-  .table-header {
-    user-select: none;
-  }
-
-  .table-row {
-    background-color: $color-white;
-    height: 63px;
-    &:not(:first-child) {
-      margin-top: 16px;
-    }
-  }
-
-  .table-field {
-    &.name {
-      width: 43%;
-      min-width: 300px;
-      display: flex;
-      .member-info {
-        display: flex;
-        flex-direction: column;
-        margin-left: 16px;
-        .member-name {
-          font-size: $fs16;
-          .you {
-            color: $color-gray-30;
-            margin-left: 5px;
-          }
-        }
-        .member-email {
-          color: $color-gray-30;
-          font-size: $fs12;
-        }
-      }
-
-      .member-image {
-        height: 32px;
-        width: 32px;
-        img {
-          border-radius: 50%;
-        }
-      }
-    }
-
-    &.roles {
-      flex-grow: 1;
-      cursor: default;
-      position: relative;
-      .rol-label {
-        user-select: none;
-      }
-      .rol-selector {
-        &.has-priv {
-          border: 1px solid $color-gray-20;
-          cursor: pointer;
-        }
-        min-width: 160px;
-        height: 32px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-radius: $br2;
-        padding: 3px 8px;
-        font-size: $fs14;
-      }
-    }
-
-    &.actions {
-      position: relative;
-      .actions-dropdown {
-        max-height: 30rem;
-        min-width: 180px;
-      }
-
-      svg {
-        fill: $df-secondary;
-      }
-    }
-
-    &.status {
-      .status-badge {
-        color: $color-white;
-        border-radius: $br12;
-        min-width: 74px;
-        height: 24px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        &.pending {
-          background-color: $color-warning;
-        }
-
-        &.expired {
-          background-color: $color-gray-20;
-        }
-
-        .status-label {
-          font-size: $fs12;
-        }
-      }
-    }
-
-    &.uri {
-      flex-grow: 1;
-    }
-
-    &.active {
-      min-width: 100px;
-    }
-
-    &.last-delivery {
-      display: flex;
-      justify-content: center;
-      width: 50px;
-      position: relative;
-      .success svg {
-        fill: $color-primary;
-        width: 16px;
-        height: 16px;
-      }
-      .failure svg {
-        fill: $color-warning;
-        width: 16px;
-        height: 16px;
-      }
-
-      .icon-container {
-        width: 16px;
-        height: 16px;
-        overflow-x: visible;
-      }
-
-      .icon {
-        padding: 0;
-      }
-    }
-
-    .tooltip {
-      display: none;
-      position: absolute;
-      top: -58px;
-      left: 50%;
-      transform: translate(-50%, 0);
-      text-align: center;
-
-      .label {
-        border-radius: $br3;
-        color: $color-white;
-        background-color: $color-black;
-        white-space: nowrap;
-        padding: 12px 20px;
-      }
-
-      .arrow-down {
-        margin: 0 auto;
-        width: 0;
-        height: 0;
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        border-top: 8px solid $color-black;
-      }
-    }
-
-    .last-delivery-icon:hover {
-      .tooltip {
-        display: block;
-      }
-    }
-  }
-
-  .dropdown {
-    position: absolute;
-    max-height: 30rem;
-    overflow-y: auto;
-    background-color: $color-white;
-    border-radius: $br4;
-    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-    z-index: 12;
-    top: 30px;
-    left: -151px;
-    width: 155px;
-
-    hr {
-      margin: 0;
-      border-color: $color-gray-10;
-    }
-
-    li {
-      display: flex;
-      align-items: center;
-      color: $color-gray-60;
-      cursor: pointer;
-      font-size: $fs14;
-      height: 31px;
-      padding: 5px 16px;
-
-      &.title {
-        font-weight: $fw600;
-        cursor: default;
-      }
-
-      &:hover {
-        background-color: $color-primary-lighter;
-      }
-    }
-  }
-}
-
-.dashboard-team-settings {
-  .team-settings {
-    display: flex;
-    justify-content: center;
-    margin-top: 16px;
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-
-    .horizontal-blocks {
-      display: flex;
-      max-width: 1010px;
-      justify-content: space-between;
-      width: 100%;
-    }
-
-    .block {
-      display: flex;
-      max-width: 324px;
-      width: 324px;
-      background-color: $color-white;
-      flex-direction: column;
-      padding: 12px;
-
-      .label {
-        font-size: $fs13;
-        color: $color-gray-30;
-      }
-    }
-
-    .info-block {
-      position: relative;
-
-      .name {
-        margin-top: 10px;
-        font-size: $fs24;
-        color: $color-black;
-        @include text-ellipsis;
-        margin-right: 90px;
-      }
-
-      .icon {
-        position: absolute;
-        padding: 15px;
-        width: 100px;
-        height: 100px;
-        right: 0px;
-        top: 0px;
-
-        img {
-          border-radius: 50%;
-          width: 70px;
-          height: 70px;
-        }
-
-        .update-overlay {
-          opacity: 0;
-          cursor: pointer;
-          position: absolute;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 71px;
-          height: 71px;
-          border-radius: 50%;
-          color: $color-white;
-          background: $color-primary-dark;
-          z-index: 14;
-
-          svg {
-            fill: $color-white;
-          }
-        }
-
-        &:hover {
-          .update-overlay {
-            opacity: 1;
-            width: 72px;
-            height: 72px;
-            top: 14px;
-            left: 14px;
-          }
-        }
-      }
-    }
-
-    .owner-block {
-      img {
-        width: 30px;
-        height: 30px;
-        border-radius: 50%;
-      }
-
-      svg {
-        width: 12px;
-        height: 12px;
-        fill: $color-black;
-      }
-
-      .owner {
-        margin-top: 5px;
-        display: flex;
-        align-items: center;
-        color: $color-black;
-        .icon {
-          margin-right: 12px;
-        }
-      }
-
-      .summary {
-        margin-top: 5px;
-        color: $color-black;
-        .icon {
-          padding: 0px 10px;
-          margin-right: 12px;
-        }
-      }
-    }
-
-    .stats-block {
-      svg {
-        fill: $color-black;
-      }
-
-      .projects,
-      .files {
-        margin-top: 7px;
-        display: flex;
-        align-items: center;
-        color: $color-black;
-
-        .icon {
-          display: flex;
-          align-items: center;
-          padding: 0px 2px;
-          margin-right: 14px;
-        }
-      }
-    }
-  }
-}
-
-.dashboard-team-webhooks {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .webhooks-hero-container {
-    max-width: 1000px;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-
-    .upload-button {
-      width: 100px;
-    }
-
-    .btn-secondary {
-      margin-left: 10px;
-    }
-  }
-
-  .webhooks-hero {
-    font-size: $fs14;
-
-    padding: $size-6;
-    background-color: $color-white;
-    margin-top: $size-6;
-    display: flex;
-    justify-content: space-between;
-
-    .banner {
-      background-color: unset;
-
-      display: flex;
-
-      .icon {
-        display: flex;
-        align-items: center;
-        padding-left: 0px;
-        padding-right: 10px;
-        svg {
-          fill: $color-info;
-        }
-      }
-    }
-
-    .desc {
-      h2 {
-        margin-bottom: $size-4;
-        color: $color-black;
-      }
-      width: 80%;
-      color: $color-gray-40;
-      p {
-        font-size: $fs16;
-      }
-    }
-
-    .btn-primary {
-      flex-shrink: 0;
-    }
-  }
-
-  .webhooks-empty {
-    text-align: center;
-    max-width: 1000px;
-    width: 100%;
-    padding: $size-6;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border: 1px dashed $color-gray-20;
-    color: $color-gray-40;
-    margin-top: 12px;
-    min-height: 136px;
-  }
-}
-
-.webhooks-modal {
-  .action-buttons {
-    gap: 10px;
-
-    .cancel-button {
-      border: 1px solid $color-gray-30;
-      background: $color-canvas;
-      border-radius: $br3;
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-      margin-right: 8px;
-
-      &:hover {
-        background: $color-gray-20;
-      }
-    }
-  }
-  .input-checkbox label {
-    font-size: $fs14;
-    color: $color-black;
-  }
-
-  .explain {
-    font-size: $fs12;
-    color: $color-gray-40;
-  }
-}
-
-.dashboard-team-settings {
-  .team-settings {
-    .horizontal-blocks {
-      flex-direction: column;
-      gap: 24px;
-      .block {
-        background-color: transparent;
-        .label {
-          color: $df-secondary;
-          font-size: 11px;
-          text-transform: uppercase;
-        }
-        .icon {
-          svg {
-            fill: $df-secondary;
-          }
-        }
-        .name,
-        .text {
-          color: $df-primary;
-        }
-        &.info-block {
-          padding-top: 180px;
-          .icon {
-            left: 0;
-            height: 120px;
-            width: 120px;
-            img {
-              width: 120px;
-              height: 120px;
-            }
-            .update-overlay {
-              background-color: $da-primary;
-              height: 120px;
-              width: 120px;
-              svg {
-                fill: $db-primary;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.btn-secondary {
-  background-color: $db-tertiary;
-  text-transform: uppercase;
-  border: none;
-  color: $df-primary;
-  border-radius: 8px;
-
-  font-size: 0.75rem;
-  padding: 0 1rem;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &:hover {
-    background-color: $db-cuaternary;
-    color: $da-primary;
-    text-decoration: none;
-    svg {
-      fill: $da-primary;
-    }
-  }
-}
-
-.btn-primary {
-  background-color: $da-tertiary;
-  border-radius: 8px;
-  color: $db-primary;
-  height: 32px;
-  text-transform: uppercase;
-
-  appearance: none;
-  align-items: center;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  font-family: "worksans", sans-serif;
-  font-size: $fs12;
-  justify-content: center;
-  min-width: 25px;
-  padding: 0 1rem;
-  transition: all 0.4s;
-  text-decoration: none;
-
-  &:hover {
-    background-color: darken($da-tertiary, 10%);
-    color: $db-primary;
-  }
-}
diff --git a/frontend/src/app/main/ui/dashboard/templates.scss b/frontend/src/app/main/ui/dashboard/templates.scss
index 8f6ba747f..9a62effef 100644
--- a/frontend/src/app/main/ui/dashboard/templates.scss
+++ b/frontend/src/app/main/ui/dashboard/templates.scss
@@ -4,18 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "common/dependencies/colors";
-
-$br10: 10px;
-$lh-normal: normal;
-$fs18: 1.125rem;
-$fw600: 600;
-$fs16: 1rem;
-$br5: 5px;
-$fw500: 500;
-$fs14: 0.875rem;
-$fs12: 0.75rem;
-$size-2: 0.5rem;
+@use "common/refactor/common-refactor.scss" as *;
 
 .dashboard-templates-section {
   position: absolute;
@@ -24,54 +13,53 @@ $size-2: 0.5rem;
   justify-content: flex-end;
   bottom: 0;
   width: 100%;
-  height: 228px;
+  height: $s-228;
   transition: bottom 300ms;
   pointer-events: none;
   &.collapsed {
-    bottom: -228px;
+    bottom: calc(-1 * $s-228);
     transition: bottom 300ms;
   }
 
   .title {
     pointer-events: all;
     width: fit-content;
-    top: -56px;
-    right: -28px;
+    top: calc(-1 * $s-56);
     text-align: right;
-    height: 56px;
+    height: $s-56;
     position: absolute;
+    right: calc(-1 * $s-24);
+
     button {
       border: none;
       cursor: pointer;
-      height: 58px;
+      height: $s-56;
       display: inline-flex;
       align-items: center;
-      border-top: 2px solid #e4e4e4;
-      border-left: 2px solid #e4e4e4;
-      border-right: 2px solid #e4e4e4;
-      border-top-left-radius: $br10;
-      border-top-right-radius: $br10;
-      margin-right: 30px;
-      background-color: $color-white;
+      border-top-left-radius: $br-10;
+      border-top-right-radius: $br-10;
+      margin-right: $s-32;
       position: relative;
       z-index: 1;
+      background-color: $db-cuaternary;
+
       span {
         display: inline-block;
         vertical-align: middle;
-        line-height: $lh-normal;
-        font-size: $fs18;
-        font-weight: $fw600;
-        color: $color-black;
-        margin-left: 18px;
-        margin-right: 10px;
+        line-height: 1.2;
+        font-size: $fs-16;
+        margin-left: $s-16;
+        margin-right: $s-8;
+        color: $df-primary;
+        font-weight: $fw400;
         &.icon {
-          margin-left: 10px;
-          margin-right: 16px;
+          margin-left: $s-16;
+          margin-right: $s-16;
         }
       }
       svg {
-        width: 12px;
-        height: 12px;
+        width: $s-12;
+        height: $s-12;
         fill: $df-secondary;
       }
     }
@@ -79,52 +67,51 @@ $size-2: 0.5rem;
 
   .button {
     position: absolute;
-    top: 133px;
-    border: 2px solid #e0e4e9;
+    top: $s-136;
+    border: $s-2 solid $df-secondary;
     border-radius: 50%;
     text-align: center;
-    width: 35px;
-    height: 35px;
+    width: $s-36;
+    height: $s-36;
     cursor: pointer;
-    background-color: $color-white;
+    background-color: $df-primary;
     display: flex;
     align-items: center;
     justify-content: center;
     pointer-events: all;
     svg {
-      width: 12px;
-      height: 12px;
+      width: $s-12;
+      height: $s-12;
       fill: $df-secondary;
     }
 
     &.left {
       left: 0;
-      margin-left: 43px;
+      margin-left: $s-44;
     }
 
     &.right {
       right: 0;
-      margin-right: 43px;
+      margin-right: $s-44;
     }
 
     &:hover {
-      border: 2px solid $color-primary;
+      border: $s-2 solid $da-tertiary;
     }
   }
 
   .content {
     pointer-events: all;
-    background-color: $color-white;
     width: 200%;
-    height: 229px;
-    border-top: 2px solid #e4e4e4;
-    border-left: 2px solid #e4e4e4;
-    margin-left: 5px;
+    height: $s-228;
+    margin-left: $s-6;
     position: absolute;
+    border-top-left-radius: $s-8;
+    background-color: $db-cuaternary;
 
     .card-container {
-      width: 275px;
-      margin-top: 20px;
+      width: $s-276;
+      margin-top: $s-20;
       display: inline-block;
       text-align: center;
       vertical-align: top;
@@ -135,111 +122,69 @@ $size-2: 0.5rem;
 
     .template-card {
       display: inline-block;
-      width: 255px;
-      font-size: $fs16;
-      color: #181a22;
+      width: $s-256;
+      font-size: $fs-16;
       cursor: pointer;
+      color: $df-primary;
+      padding: $s-3 $s-6 $s-16 $s-6;
+      border-radius: $br-8;
+
       .img-container {
         width: 100%;
-        height: 135px;
-        margin-bottom: 15px;
-        border-radius: $br5;
-        border: 2px solid #e0e4e9;
+        height: $s-136;
+        margin-bottom: $s-16;
+        border-radius: $br-5;
         display: flex;
         justify-content: center;
         flex-direction: column;
+
+        img {
+          border-radius: $br-4;
+        }
       }
 
       .card-name {
-        padding: 0 5px;
+        padding: 0 $s-6;
         display: flex;
         justify-content: space-between;
-        height: 23px;
+        height: $s-24;
+        align-items: center;
+
+        .icon {
+          width: $s-16;
+          height: $s-16;
+        }
         svg {
-          width: 16px;
-          height: 16px;
+          width: $s-16;
+          height: $s-16;
           fill: $df-secondary;
         }
         span {
           font-weight: $fw500;
-          font-size: $fs14;
+          font-size: $fs-16;
         }
       }
 
       .template-link {
-        border: 2px solid transparent;
-        margin: 30px;
-        padding: 32px 0;
+        border: $s-2 solid transparent;
+        margin: $s-32;
+        padding: $s-32 0;
       }
 
       .template-link-title {
-        font-size: $fs14;
-        font-weight: $fw600;
-        color: $color-gray-60;
+        font-size: $fs-14;
+        color: $df-primary;
+        font-weight: $fw400;
       }
 
       .template-link-text {
-        font-size: $fs12;
-        margin-top: $size-2;
-        color: $color-gray-50;
-      }
-
-      &:hover {
-        .img-container {
-          border: 2px solid $color-primary;
-        }
-      }
-    }
-  }
-}
-
-.dashboard-templates-section {
-  .title {
-    right: -24px;
-    button {
-      background-color: $db-cuaternary;
-      border: none;
-      span {
-        color: $df-primary;
-        font-weight: 400;
-      }
-    }
-  }
-  .content {
-    border-top-left-radius: 8px;
-    border: none;
-    background-color: $db-cuaternary;
-
-    .template-card {
-      color: $df-primary;
-      padding: 0.2rem 0.3rem 1rem 0.3rem;
-      border-radius: 8px;
-      .img-container {
-        border: none;
-        img {
-          border-radius: 4px;
-        }
-      }
-      .card-name {
-        span {
-          font-size: 16px;
-        }
-      }
-      .template-link {
-        .template-link-title {
-          color: $df-primary;
-          font-weight: 400;
-        }
-        .template-link-text {
-          color: $df-secondary;
-        }
+        font-size: $fs-12;
+        margin-top: $s-8;
+        color: $df-secondary;
       }
 
       &:hover {
         background-color: $db-tertiary;
-        .img-container {
-          border: none;
-        }
       }
     }
   }
diff --git a/frontend/src/app/main/ui/settings.cljs b/frontend/src/app/main/ui/settings.cljs
index 7fdcaef88..946f6f1c6 100644
--- a/frontend/src/app/main/ui/settings.cljs
+++ b/frontend/src/app/main/ui/settings.cljs
@@ -7,9 +7,11 @@
 (ns app.main.ui.settings
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.main.data.dashboard.shortcuts :as sc]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.context :as ctx]
+   [app.main.ui.hooks :as hooks]
    [app.main.ui.settings.access-tokens :refer [access-tokens-page]]
    [app.main.ui.settings.change-email]
    [app.main.ui.settings.delete-account]
@@ -44,6 +46,8 @@
         profile (mf/deref refs/profile)
         locale  (mf/deref i18n/locale)]
 
+    (hooks/use-shortcuts ::dashboard sc/shortcuts)
+
     (mf/use-effect
      #(when (nil? profile)
         (st/emit! (rt/nav :auth-login))))
diff --git a/frontend/src/app/main/ui/settings.scss b/frontend/src/app/main/ui/settings.scss
index 2f907fb3f..e295be303 100644
--- a/frontend/src/app/main/ui/settings.scss
+++ b/frontend/src/app/main/ui/settings.scss
@@ -1,23 +1,11 @@
-@import "common/dependencies/colors";
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
 
-$fs14: 0.875rem;
-$fs22: 1.5rem;
-$fs24: 1.5rem;
-$lh-500: 5;
-$fs12: 0.75rem;
-$fs16: 1rem;
-$fw400: 400;
-$fw600: 600;
-$size-1: 0.25rem;
-$size-2: 0.5rem;
-$size-3: 0.75rem;
-$size-4: 1rem;
-$size-5: 1.5rem;
-$size-6: 2rem;
-$br3: 3px;
-$br4: 4px;
-$br5: 5px;
-$fw700: 700;
+@use "common/refactor/common-refactor.scss" as *;
+@use "common/refactor/common-dashboard";
 
 .dashboard {
   background-color: $db-primary;
@@ -35,540 +23,23 @@ $fw700: 700;
   padding: 1rem 1rem 0 0;
 }
 
-.dashboard-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $color-white;
-  height: 63px;
-  padding: $size-1 $size-4 $size-1 $size-2;
-  position: relative;
-  z-index: 10;
-  user-select: none;
-  &.team {
-    display: grid;
-    grid-template-columns: 20% 1fr 20%;
-  }
-
-  .element-name {
-    margin-right: $size-2;
-  }
-
-  .btn-secondary {
-    flex-shrink: 0;
-    z-index: 10;
-    height: 32px;
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-  }
-
-  svg {
-    fill: $color-black;
-    height: 14px;
-    margin-right: $size-1;
-    width: 14px;
-  }
-
-  nav {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    z-index: 1;
-
-    ul {
-      display: flex;
-      font-size: $fs14;
-      justify-content: center;
-      margin: 0;
-    }
-
-    li {
-      a {
-        display: flex;
-        align-items: center;
-        flex-basis: 140px;
-        border-bottom: 3px solid transparent;
-        color: $color-gray-30;
-        height: 40px;
-        padding: $size-1 $size-5;
-        font-weight: $fw400;
-        &:hover {
-          color: $color-black;
-          text-decoration: none;
-        }
-      }
-
-      &.active {
-        a {
-          color: $color-black;
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  .dashboard-title {
-    display: flex;
-    align-items: center;
-    margin-left: 13px;
-
-    h1 {
-      color: $color-black;
-      display: flex;
-      flex-shrink: 0;
-      font-size: $fs22;
-      font-weight: $fw600;
-      z-index: 10;
-      user-select: all;
-    }
-
-    .context-menu.is-open {
-      margin-top: 10px;
-    }
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-left: $size-2;
-    z-index: 10;
-
-    svg {
-      fill: $color-gray-40;
-      width: 15px;
-      height: 15px;
-
-      &:hover {
-        fill: $color-primary-dark;
-      }
-    }
-  }
-
-  .dashboard-buttons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .dashboard-header-actions {
-    display: flex;
-  }
-
-  .pin-icon {
-    margin: 0 $size-2 0 $size-5;
-    background-color: transparent;
-    border: none;
-    svg {
-      fill: $color-gray-20;
-    }
-
-    &.active {
-      svg {
-        fill: $color-gray-50;
-      }
-    }
-  }
-}
-
-.dashboard-header {
-  background-color: transparent;
-  .dashboard-title {
-    h1 {
-      color: $df-primary;
-      font-size: 24px;
-      font-weight: 400;
-      width: 100%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      display: block;
-      max-width: 700px;
-    }
-  }
-  .icon {
-    svg {
-      fill: $df-secondary;
-    }
-  }
-
-  // Settings sub-menu
-  .dashboard-header-options {
-    li {
-      a {
-        font-size: 16px;
-        color: $df-secondary;
-        border-color: transparent;
-        &:hover {
-          color: $df-primary;
-        }
-      }
-      &.active {
-        a {
-          color: $df-primary;
-        }
-      }
-    }
-  }
-}
-
 .dashboard-container {
-  background-color: $color-dashboard;
   flex: 1 0 0;
-  margin-right: $size-4;
+  margin-right: $s-16;
   overflow-y: auto;
   width: 100%;
+  border-top: $s-1 solid $db-cuaternary;
+
   &.dashboard-projects {
     user-select: none;
   }
-  &.no-bg {
-    background-color: transparent;
-  }
   &.dashboard-shared {
-    width: calc(100vw - 320px);
-    margin-right: 50px;
+    width: calc(100vw - $s-320);
+    margin-right: $s-52;
   }
 
   &.search {
-    margin-top: 10px;
-  }
-}
-
-.dashboard-container {
-  background-color: transparent;
-  border-top: 1px solid $db-cuaternary;
-
-  .dashboard-settings {
-    a {
-      color: $df-secondary;
-    }
-    .form-container {
-      width: 800px;
-      margin: 80px auto auto 120px;
-      form {
-        width: 468px;
-        .fields-row {
-          .custom-input,
-          .custom-select {
-            flex-direction: column-reverse;
-            label {
-              position: relative;
-              text-transform: uppercase;
-              color: $df-primary;
-              font-size: 11px;
-              margin-bottom: 12px;
-              margin-left: -4px;
-            }
-            input,
-            select {
-              background-color: $db-tertiary;
-              border-radius: 8px;
-              border-color: transparent;
-              color: $df-primary;
-              padding: 0 15px;
-              &:focus {
-                outline: 1px solid $da-primary;
-              }
-              ::placeholder {
-                color: $df-secondary;
-              }
-            }
-            .help-icon {
-              bottom: 12px;
-              top: auto;
-              svg {
-                fill: $df-secondary;
-              }
-            }
-            &.disabled {
-              input {
-                background-color: $db-primary;
-                border-color: $db-cuaternary;
-                color: $df-secondary;
-              }
-            }
-            .input-container {
-              background-color: $db-tertiary;
-              border-radius: 8px;
-              border-color: transparent;
-              margin-top: 22px;
-              .main-content {
-                label {
-                  position: absolute;
-                  top: -24px;
-                }
-                span {
-                  color: $df-primary;
-                }
-              }
-              &:focus {
-                border: 1px solid $da-primary;
-              }
-            }
-            textarea {
-              border-radius: 8px;
-              padding: 12px 14px;
-              background-color: $db-tertiary;
-              color: $df-primary;
-              border: none;
-              &:focus {
-                outline: 1px solid $da-primary;
-              }
-            }
-          }
-        }
-        .field-title {
-          color: $df-primary;
-        }
-        .field-title:not(:first-child) {
-          margin-top: 64px;
-        }
-
-        .field-text {
-          color: $df-secondary;
-        }
-        button,
-        .btn-secondary {
-          width: 100%;
-          font-size: 11px;
-          text-transform: uppercase;
-          background-color: $db-tertiary;
-          color: $df-primary;
-          &:hover {
-            color: $da-primary;
-            background-color: $db-cuaternary;
-          }
-        }
-        hr {
-          display: none;
-        }
-      }
-      .links {
-        margin-top: 12px;
-      }
-    }
-  }
-
-  //Access tokens
-  .dashboard-access-tokens {
-    width: 800px;
-    margin-left: 120px;
-    margin-top: 80px;
-    .access-tokens-hero-container {
-      background-color: transparent;
-      .access-tokens-hero {
-        width: 468px;
-        flex-direction: column;
-        gap: 32px;
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        .desc {
-          background-color: transparent;
-          width: 100%;
-          h2 {
-            color: $df-primary;
-            font-size: 24px;
-            font-weight: regular;
-            margin-bottom: 32px;
-          }
-          p {
-            color: $df-secondary;
-            margin-bottom: 0;
-            font-size: 14px;
-          }
-        }
-        button {
-          width: 100%;
-          font-size: 11px;
-          text-transform: uppercase;
-          background-color: $db-tertiary;
-          color: $df-primary;
-          &:hover {
-            color: $da-primary;
-            background-color: $db-cuaternary;
-          }
-        }
-      }
-    }
-    .dashboard-table {
-      width: 800px;
-      .table-rows {
-        padding-top: 0;
-        .table-row {
-          font-size: 14px;
-          min-height: 40px;
-          height: fit-content;
-          .name {
-            color: $df-primary;
-            max-width: 480px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-          }
-          .expiration-date {
-            color: $df-secondary;
-          }
-        }
-      }
-    }
-    .access-tokens-empty {
-      width: 468px;
-      border: 1px solid $db-cuaternary;
-      border-radius: 8px;
-      margin-top: 32px;
-      font-size: 14px;
-      background-color: transparent;
-      color: $df-secondary;
-    }
-  }
-
-  // Team webhooks
-  &.dashboard-team-webhooks {
-    width: 800px;
-    margin-left: 120px;
-    margin-top: 80px;
-    border: none;
-    align-items: flex-start;
-    .webhooks-hero-container {
-      width: 468px;
-      background-color: transparent;
-      .webhooks-hero {
-        width: 468px;
-        flex-direction: column;
-        gap: 32px;
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        .desc {
-          background-color: transparent;
-          width: 100%;
-          h2 {
-            color: $df-primary;
-            font-size: 24px;
-            font-weight: regular;
-            margin-bottom: 32px;
-          }
-          p {
-            color: $df-secondary;
-            margin-bottom: 0;
-            font-size: 14px;
-          }
-        }
-        .btn-primary {
-          width: 100%;
-          font-size: 11px;
-          text-transform: uppercase;
-          background-color: $db-tertiary;
-          color: $df-primary;
-          &:hover {
-            color: $da-primary;
-            background-color: $db-cuaternary;
-          }
-        }
-      }
-    }
-    .dashboard-table {
-      width: 800px;
-      .table-rows {
-        padding-top: 0;
-        .table-row {
-          font-size: 14px;
-          min-height: 40px;
-          height: fit-content;
-          .name {
-            color: $df-primary;
-            max-width: 480px;
-          }
-          .expiration-date {
-            color: $df-secondary;
-          }
-        }
-      }
-    }
-    .webhooks-empty {
-      width: 468px;
-      border: 1px solid $db-cuaternary;
-      border-radius: 8px;
-      margin-top: 32px;
-      font-size: 14px;
-      background-color: transparent;
-      color: $df-secondary;
-    }
-  }
-
-  // Members section
-  .dashboard-table {
-    .table-header {
-      background-color: transparent;
-      color: $df-secondary;
-      font-size: 12px;
-      text-transform: uppercase;
-    }
-    .table-rows {
-      .table-row {
-        background-color: $db-tertiary;
-        border-radius: 8px;
-        color: $df-primary;
-        .rol-selector {
-          background-color: $db-cuaternary;
-          border-color: transparent;
-          border-radius: 8px;
-        }
-      }
-    }
-    .member-info {
-      .member-name .you,
-      .member-email {
-        color: $df-secondary;
-      }
-    }
-    .status-badge {
-      border-radius: 8px;
-      color: $db-primary;
-      text-transform: uppercase;
-    }
-    .empty-invitations {
-      border: 1px solid $db-cuaternary;
-      border-radius: 8px;
-      color: $df-secondary;
-    }
-  }
-  .actions-dropdown,
-  .options-dropdown {
-    background-color: $db-tertiary;
-    border: 1px solid $db-cuaternary;
-    border-radius: 8px;
-    min-width: 252px;
-
-    .separator {
-      border-color: transparent;
-      margin-top: 10px;
-    }
-
-    li {
-      border-radius: 8px;
-      height: 40px;
-      margin: 5px;
-      color: $df-primary;
-
-      &:hover {
-        background-color: $db-cuaternary;
-      }
-    }
-
-    &.options-dropdown {
-      li {
-        color: $df-primary;
-        &.warning {
-          color: $color-danger;
-        }
-      }
-    }
+    margin-top: $s-12;
   }
 }
 
@@ -577,121 +48,226 @@ $fw700: 700;
   width: 100%;
   justify-content: center;
   align-items: center;
+  a {
+    color: $df-secondary;
+  }
+}
 
-  .form-container {
-    margin-top: 50px;
-    display: flex;
-    max-width: 368px;
-    margin-bottom: 2rem;
-    width: 100%;
+.form-container {
+  width: 800px;
+  margin: 50px auto 2rem 120px;
+  display: flex;
+  max-width: 368px;
+  width: 100%;
 
-    &.two-columns {
-      max-width: 536px;
-      justify-content: space-between;
-      flex-direction: row;
-    }
-
-    h2 {
-      margin-bottom: 1rem;
-    }
+  &.two-columns {
+    max-width: 536px;
+    justify-content: space-between;
+    flex-direction: row;
   }
 
-  .avatar-form {
-    display: flex;
-    flex-direction: column;
-    width: 120px;
-    min-width: 120px;
+  h2 {
+    margin-bottom: 1rem;
+  }
 
-    img {
-      border-radius: 50%;
-      flex-shrink: 0;
-      height: 120px;
-      margin-right: $size-4;
-      width: 120px;
-    }
+  form {
+    width: 468px;
 
-    .image-change-field {
-      position: relative;
-      width: 120px;
-      height: 120px;
-
-      .update-overlay {
-        opacity: 0;
-        cursor: pointer;
-        position: absolute;
-        width: 121px;
-        height: 121px;
-        border-radius: 50%;
-        font-size: $fs24;
-        color: $color-white;
-        line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500
-        text-align: center;
-        background: $color-primary-dark;
-        z-index: 14;
+    .custom-input,
+    .custom-select {
+      flex-direction: column-reverse;
+      label {
+        position: relative;
+        text-transform: uppercase;
+        color: $df-primary;
+        font-size: 11px;
+        margin-bottom: 12px;
+        margin-left: -4px;
       }
-
-      input[type="file"] {
-        width: 120px;
-        height: 120px;
-        position: absolute;
-        opacity: 0;
-        cursor: pointer;
-        top: 0;
-        z-index: 15;
+      input,
+      select {
+        background-color: $db-tertiary;
+        border-radius: 8px;
+        border-color: transparent;
+        color: $df-primary;
+        padding: 0 15px;
+        &:focus {
+          outline: 1px solid $da-primary;
+        }
+        ::placeholder {
+          color: $df-secondary;
+        }
       }
-
-      &:hover {
-        .update-overlay {
-          opacity: 0.8;
+      .help-icon {
+        bottom: 12px;
+        top: auto;
+        svg {
+          fill: $df-secondary;
+        }
+      }
+      &.disabled {
+        input {
+          background-color: $db-primary;
+          border-color: $db-cuaternary;
+          color: $df-secondary;
+        }
+      }
+      .input-container {
+        background-color: $db-tertiary;
+        border-radius: 8px;
+        border-color: transparent;
+        margin-top: 22px;
+        .main-content {
+          label {
+            position: absolute;
+            top: -24px;
+          }
+          span {
+            color: $df-primary;
+          }
+        }
+        &:focus {
+          border: 1px solid $da-primary;
+        }
+      }
+      textarea {
+        border-radius: 8px;
+        padding: 12px 14px;
+        background-color: $db-tertiary;
+        color: $df-primary;
+        border: none;
+        &:focus {
+          outline: 1px solid $da-primary;
         }
       }
     }
-  }
 
-  .profile-form {
-    display: flex;
-    flex-direction: column;
-    max-width: 368px;
-    width: 100%;
+    .field-title {
+      color: $df-primary;
+    }
+    .field-title:not(:first-child) {
+      margin-top: 64px;
+    }
 
-    .newsletter-subs {
-      border-bottom: 1px solid $color-gray-20;
-      border-top: 1px solid $color-gray-20;
-      padding: 30px 0;
-      margin-bottom: 31px;
-
-      .newsletter-title {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-30;
-        font-size: $fs14;
-      }
-
-      label {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-60;
-        font-size: $fs12;
-        margin-right: -17px;
-        margin-bottom: 13px;
-      }
-
-      .info {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-30;
-        font-size: $fs12;
-        margin-bottom: 8px;
-      }
-
-      .input-checkbox label {
-        align-items: flex-start;
+    .field-text {
+      color: $df-secondary;
+    }
+    button,
+    .btn-secondary {
+      width: 100%;
+      font-size: 11px;
+      text-transform: uppercase;
+      background-color: $db-tertiary;
+      color: $df-primary;
+      &:hover {
+        color: $da-primary;
+        background-color: $db-cuaternary;
       }
     }
+    hr {
+      display: none;
+    }
   }
+  .links {
+    margin-top: 12px;
+  }
+}
 
-  .options-form,
-  .password-form {
-    h2 {
-      font-size: $fs14;
-      margin-bottom: 20px;
+.profile-form {
+  display: flex;
+  flex-direction: column;
+  max-width: 368px;
+  width: 100%;
+
+  .newsletter-subs {
+    border-bottom: 1px solid $df-secondary;
+    border-top: 1px solid $df-secondary;
+    padding: 30px 0;
+    margin-bottom: 31px;
+
+    .newsletter-title {
+      font-family: "worksans", sans-serif;
+      color: $df-secondary;
+      font-size: $fs-14;
+    }
+
+    label {
+      font-family: "worksans", sans-serif;
+      color: $db-primary;
+      font-size: $fs-12;
+      margin-right: -17px;
+      margin-bottom: 13px;
+    }
+
+    .info {
+      font-family: "worksans", sans-serif;
+      color: $df-secondary;
+      font-size: $fs-12;
+      margin-bottom: 8px;
+    }
+
+    .input-checkbox label {
+      align-items: flex-start;
     }
   }
 }
+
+.avatar-form {
+  display: flex;
+  flex-direction: column;
+  width: 120px;
+  min-width: 120px;
+
+  img {
+    border-radius: 50%;
+    flex-shrink: 0;
+    height: 120px;
+    margin-right: $s-16;
+    width: 120px;
+  }
+
+  .image-change-field {
+    position: relative;
+    width: 120px;
+    height: 120px;
+
+    .update-overlay {
+      opacity: 0;
+      cursor: pointer;
+      position: absolute;
+      width: 121px;
+      height: 121px;
+      border-radius: 50%;
+      font-size: $fs-24;
+      color: $df-primary;
+      line-height: 5;
+      text-align: center;
+      background: $da-tertiary;
+      z-index: 14;
+    }
+
+    input[type="file"] {
+      width: 120px;
+      height: 120px;
+      position: absolute;
+      opacity: 0;
+      cursor: pointer;
+      top: 0;
+      z-index: 15;
+    }
+
+    &:hover {
+      .update-overlay {
+        opacity: 0.8;
+      }
+    }
+  }
+}
+
+.options-form,
+.password-form {
+  h2 {
+    font-size: $fs-14;
+    margin-bottom: 20px;
+  }
+}
diff --git a/frontend/src/app/main/ui/settings/access_tokens.cljs b/frontend/src/app/main/ui/settings/access_tokens.cljs
index 5de70c98c..6d5a0bafd 100644
--- a/frontend/src/app/main/ui/settings/access_tokens.cljs
+++ b/frontend/src/app/main/ui/settings/access_tokens.cljs
@@ -423,4 +423,3 @@
             (for [token tokens]
               [:& access-token-item {:token token :key (:id token)}])]])]])))
 
-
diff --git a/frontend/src/app/main/ui/settings/access_tokens.scss b/frontend/src/app/main/ui/settings/access_tokens.scss
index fd76557f7..2e9b8ef17 100644
--- a/frontend/src/app/main/ui/settings/access_tokens.scss
+++ b/frontend/src/app/main/ui/settings/access_tokens.scss
@@ -4,7 +4,170 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@import "refactor/common-refactor.scss";
+@use "common/refactor/common-refactor.scss" as *;
+
+.dashboard-table {
+  display: flex;
+  flex-direction: column;
+  font-size: $fs-16;
+  margin-top: $s-20;
+  width: $s-800;
+
+  .table-header {
+    color: $df-secondary;
+    display: grid;
+    font-size: $fs-12;
+    grid-template-columns: 43% 1fr $s-108 $s-12;
+    height: $s-40;
+    max-width: $s-1000;
+    padding: 0 $s-16;
+    text-transform: uppercase;
+    width: 100%;
+  }
+
+  .table-rows {
+    color: $db-secondary;
+    display: flex;
+    flex-direction: column;
+    margin-top: $s-16;
+    max-width: $s-1000;
+    padding-top: 0;
+    width: 100%;
+  }
+
+  .table-row {
+    align-items: center;
+    background-color: $db-tertiary;
+    border-radius: $br-8;
+    color: $df-primary;
+    display: grid;
+    font-size: $fs-14;
+    grid-template-columns: 1fr 43% $s-12;
+    height: fit-content;
+    min-height: $s-40;
+    padding: 0 $s-16;
+    width: 100%;
+
+    &:not(:first-child) {
+      margin-top: $s-8;
+    }
+  }
+
+  .table-field {
+    display: flex;
+    align-items: center;
+
+    .icon {
+      padding-left: $s-12;
+      cursor: pointer;
+    }
+
+    &.name {
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      color: $df-primary;
+      display: -webkit-box;
+      max-width: $s-480;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &.expiration-date {
+      color: $df-secondary;
+      font-size: $fs-14;
+
+      .content {
+        padding: $s-2 $s-6;
+        &.expired {
+          background-color: var(--warning-color);
+          border-radius: $br-4;
+          color: $db-secondary;
+        }
+      }
+    }
+    &.access-token-created {
+      word-break: break-all;
+    }
+
+    &.actions {
+      position: relative;
+    }
+  }
+
+  svg {
+    width: $s-12;
+    height: $s-12;
+    fill: $df-primary;
+  }
+}
+
+.dashboard-access-tokens {
+  display: flex;
+  flex-direction: column;
+  margin-left: $s-120;
+  margin-top: $s-80;
+  width: $s-800;
+}
+
+.access-tokens-hero-container {
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  max-width: $s-1000;
+  width: 100%;
+}
+
+.access-tokens-hero {
+  display: flex;
+  flex-direction: column;
+  font-size: $fs-14;
+  gap: $s-32;
+  justify-content: space-between;
+  width: $s-468;
+
+  .desc {
+    background-color: transparent;
+    color: $df-secondary;
+    width: 100%;
+
+    h2 {
+      color: $df-primary;
+      font-size: $fs-24;
+      font-weight: regular;
+      margin-bottom: $s-32;
+    }
+    p {
+      color: $df-secondary;
+      margin-bottom: 0;
+      font-size: $fs-14;
+    }
+  }
+  .btn-primary {
+    flex-shrink: 0;
+  }
+}
+
+.access-tokens-empty {
+  align-items: center;
+  border-radius: $br-8;
+  border: $s-1 solid $db-cuaternary;
+  color: $df-secondary;
+  display: flex;
+  flex-direction: column;
+  font-size: $fs-14;
+  justify-content: center;
+  margin-top: $s-32;
+  max-width: $s-1000;
+  min-height: $s-136;
+  padding: $s-32;
+  text-align: center;
+  width: $s-468;
+}
+
+.btn-primary {
+  @extend .button-primary;
+  height: $s-32;
+}
 
 .modal-overlay {
   @extend .modal-overlay-base;
@@ -80,849 +243,3 @@
     }
   }
 }
-
-//////
-
-@import "common/dependencies/colors";
-
-$br3: 3px;
-$br4: 4px;
-$br8: 8px;
-$br6: 6px;
-$fs12: 0.75rem;
-$fs14: 0.875rem;
-$fs16: 1rem;
-$fs18: 1.125rem;
-$fs22: 1.375rem;
-$fs24: 1.5rem;
-$fs36: 2.25rem;
-$fw400: 400;
-$fw500: 500;
-$fw600: 600;
-$fw700: 700;
-$lh-088: 0.88;
-$lh-115: 1.15; // original $title-lh-sm
-$lh-500: 5; // original $title-lh-sm
-$size-1: 0.25rem;
-$size-2: 0.5rem;
-$size-4: 1rem;
-$size-5: 1.5rem;
-$size-6: 2rem;
-
-.form-container,
-.generic-form {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-
-  .forms-container {
-    display: flex;
-    margin-top: 40px;
-    width: 536px;
-    justify-content: center;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-    // flex-basis: 368px;
-  }
-
-  .fields-row {
-    margin-bottom: 20px;
-    flex-direction: column;
-
-    .options {
-      display: flex;
-      justify-content: flex-end;
-      font-size: $fs14;
-      margin-top: 13px;
-    }
-  }
-
-  .field {
-    margin-bottom: 20px;
-  }
-
-  h1 {
-    font-size: $fs36;
-    color: #2c233e;
-    margin-bottom: 20px;
-  }
-
-  .subtitle {
-    font-size: $fs24;
-    color: #2c233e;
-    margin-bottom: 20px;
-  }
-
-  .notification-icon {
-    justify-content: center;
-    display: flex;
-    margin-bottom: 3rem;
-
-    svg {
-      fill: $color-gray-60;
-      height: 40%;
-      width: 40%;
-    }
-  }
-
-  .notification-text {
-    font-size: $fs18;
-    color: $color-gray-60;
-    margin-bottom: 20px;
-  }
-
-  .notification-text-email {
-    background: $color-gray-10;
-    border-radius: $br3;
-    color: $color-gray-60;
-    font-size: $fs18;
-    font-weight: $fw500;
-    margin: 1.5rem 0 2.5rem 0;
-    padding: 1rem;
-    text-align: center;
-  }
-
-  h2 {
-    font-size: $fs24;
-    color: $color-gray-60;
-    // height: 40px;
-    display: flex;
-    align-items: center;
-  }
-
-  a {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  p {
-    color: $color-gray-60;
-  }
-
-  hr {
-    border-color: $color-gray-20;
-  }
-}
-
-.dashboard-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $color-white;
-  height: 63px;
-  padding: $size-1 $size-4 $size-1 $size-2;
-  position: relative;
-  z-index: 10;
-  user-select: none;
-  &.team {
-    display: grid;
-    grid-template-columns: 20% 1fr 20%;
-  }
-
-  .element-name {
-    margin-right: $size-2;
-  }
-
-  .btn-secondary {
-    flex-shrink: 0;
-    z-index: 10;
-    height: 32px;
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-  }
-
-  svg {
-    fill: $color-black;
-    height: 14px;
-    margin-right: $size-1;
-    width: 14px;
-  }
-
-  nav {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    z-index: 1;
-
-    ul {
-      display: flex;
-      font-size: $fs14;
-      justify-content: center;
-      margin: 0;
-    }
-
-    li {
-      a {
-        display: flex;
-        align-items: center;
-        flex-basis: 140px;
-        border-bottom: 3px solid transparent;
-        color: $color-gray-30;
-        height: 40px;
-        padding: $size-1 $size-5;
-        font-weight: $fw400;
-        &:hover {
-          color: $color-black;
-          text-decoration: none;
-        }
-      }
-
-      &.active {
-        a {
-          color: $color-black;
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  .dashboard-title {
-    display: flex;
-    align-items: center;
-    margin-left: 13px;
-
-    h1 {
-      color: $color-black;
-      display: flex;
-      flex-shrink: 0;
-      font-size: $fs22;
-      font-weight: $fw600;
-      z-index: 10;
-      user-select: all;
-    }
-
-    .context-menu.is-open {
-      margin-top: 10px;
-    }
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-left: $size-2;
-    z-index: 10;
-
-    svg {
-      fill: $color-gray-40;
-      width: 15px;
-      height: 15px;
-
-      &:hover {
-        fill: $color-primary-dark;
-      }
-    }
-  }
-
-  .dashboard-buttons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .dashboard-header-actions {
-    display: flex;
-  }
-
-  .pin-icon {
-    margin: 0 $size-2 0 $size-5;
-    background-color: transparent;
-    border: none;
-    svg {
-      fill: $color-gray-20;
-    }
-
-    &.active {
-      svg {
-        fill: $color-gray-50;
-      }
-    }
-  }
-}
-
-.dashboard-settings {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-
-  .form-container {
-    margin-top: 50px;
-    display: flex;
-    max-width: 368px;
-    margin-bottom: 2rem;
-    width: 100%;
-
-    &.two-columns {
-      max-width: 536px;
-      justify-content: space-between;
-      flex-direction: row;
-    }
-
-    h2 {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .avatar-form {
-    display: flex;
-    flex-direction: column;
-    width: 120px;
-    min-width: 120px;
-
-    img {
-      border-radius: 50%;
-      flex-shrink: 0;
-      height: 120px;
-      margin-right: $size-4;
-      width: 120px;
-    }
-
-    .image-change-field {
-      position: relative;
-      width: 120px;
-      height: 120px;
-
-      .update-overlay {
-        opacity: 0;
-        cursor: pointer;
-        position: absolute;
-        width: 121px;
-        height: 121px;
-        border-radius: 50%;
-        font-size: $fs24;
-        color: $color-white;
-        line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500
-        text-align: center;
-        background: $color-primary-dark;
-        z-index: 14;
-      }
-
-      input[type="file"] {
-        width: 120px;
-        height: 120px;
-        position: absolute;
-        opacity: 0;
-        cursor: pointer;
-        top: 0;
-        z-index: 15;
-      }
-
-      &:hover {
-        .update-overlay {
-          opacity: 0.8;
-        }
-      }
-    }
-  }
-
-  .profile-form {
-    display: flex;
-    flex-direction: column;
-    max-width: 368px;
-    width: 100%;
-
-    .newsletter-subs {
-      border-bottom: 1px solid $color-gray-20;
-      border-top: 1px solid $color-gray-20;
-      padding: 30px 0;
-      margin-bottom: 31px;
-
-      .newsletter-title {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-30;
-        font-size: $fs14;
-      }
-
-      label {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-60;
-        font-size: $fs12;
-        margin-right: -17px;
-        margin-bottom: 13px;
-      }
-
-      .info {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-30;
-        font-size: $fs12;
-        margin-bottom: 8px;
-      }
-
-      .input-checkbox label {
-        align-items: flex-start;
-      }
-    }
-  }
-
-  .options-form,
-  .password-form {
-    h2 {
-      font-size: $fs14;
-      margin-bottom: 20px;
-    }
-  }
-}
-
-.access-tokens-modal {
-  .action-buttons {
-    gap: 10px;
-
-    .cancel-button {
-      border: 1px solid $color-gray-30;
-      background: $color-canvas;
-      border-radius: $br3;
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-      margin-right: 8px;
-
-      &:hover {
-        background: $color-gray-20;
-      }
-    }
-  }
-  .access-token-created {
-    position: relative;
-    word-break: break-all;
-
-    .custom-input input {
-      background-color: $color-success-lighter;
-      border: 0;
-      padding: 0 0 0 15px;
-    }
-  }
-
-  .help-icon {
-    border: none;
-    height: 40px;
-    width: 40px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    cursor: pointer;
-    background-color: $color-success-lighter;
-
-    svg {
-      fill: $color-gray-30;
-    }
-
-    &:hover {
-      svg {
-        fill: $color-gray-60;
-      }
-    }
-  }
-
-  .token-created-info {
-    font-size: $fs12;
-    color: $color-gray-40;
-  }
-}
-
-.dashboard-settings {
-  a {
-    color: $df-secondary;
-  }
-  .form-container {
-    width: 800px;
-    margin: 80px auto auto 120px;
-    form {
-      width: 468px;
-      .fields-row {
-        .custom-input,
-        .custom-select {
-          flex-direction: column-reverse;
-          label {
-            position: relative;
-            text-transform: uppercase;
-            color: $df-primary;
-            font-size: 11px;
-            margin-bottom: 12px;
-            margin-left: -4px;
-          }
-          input,
-          select {
-            background-color: $db-tertiary;
-            border-radius: 8px;
-            border-color: transparent;
-            color: $df-primary;
-            padding: 0 15px;
-            &:focus {
-              outline: 1px solid $da-primary;
-            }
-            ::placeholder {
-              color: $df-secondary;
-            }
-          }
-          .help-icon {
-            bottom: 12px;
-            top: auto;
-            svg {
-              fill: $df-secondary;
-            }
-          }
-          &.disabled {
-            input {
-              background-color: $db-primary;
-              border-color: $db-cuaternary;
-              color: $df-secondary;
-            }
-          }
-          .input-container {
-            background-color: $db-tertiary;
-            border-radius: 8px;
-            border-color: transparent;
-            margin-top: 22px;
-            .main-content {
-              label {
-                position: absolute;
-                top: -24px;
-              }
-              span {
-                color: $df-primary;
-              }
-            }
-            &:focus {
-              border: 1px solid $da-primary;
-            }
-          }
-          textarea {
-            border-radius: 8px;
-            padding: 12px 14px;
-            background-color: $db-tertiary;
-            color: $df-primary;
-            border: none;
-            &:focus {
-              outline: 1px solid $da-primary;
-            }
-          }
-        }
-      }
-      .field-title {
-        color: $df-primary;
-      }
-      .field-title:not(:first-child) {
-        margin-top: 64px;
-      }
-
-      .field-text {
-        color: $df-secondary;
-      }
-      button,
-      .btn-secondary {
-        width: 100%;
-        font-size: 11px;
-        text-transform: uppercase;
-        background-color: $db-tertiary;
-        color: $df-primary;
-        &:hover {
-          color: $da-primary;
-          background-color: $db-cuaternary;
-        }
-      }
-      hr {
-        display: none;
-      }
-    }
-    .links {
-      margin-top: 12px;
-    }
-  }
-}
-
-.dashboard-table {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 20px;
-  font-size: $fs16;
-
-  &.team-members {
-    margin-bottom: 52px;
-  }
-
-  &.invitations {
-    .table-row {
-      display: grid;
-      grid-template-columns: 43% 1fr 109px 12px;
-    }
-  }
-
-  .table-header {
-    display: grid;
-    grid-template-columns: 43% 1fr 109px 12px;
-    max-width: 1040px;
-    background-color: $color-white;
-    color: $color-gray-30;
-    width: 100%;
-    height: 40px;
-    padding: 0px 16px;
-  }
-
-  .table-rows {
-    display: flex;
-    flex-direction: column;
-    max-width: 1040px;
-    width: 100%;
-    margin-top: 16px;
-    color: $color-black;
-  }
-
-  .table-row {
-    display: flex;
-    width: 100%;
-    height: 45px;
-    align-items: center;
-    padding: 0px 16px;
-  }
-
-  .table-field {
-    display: flex;
-    align-items: center;
-
-    .icon {
-      padding-left: 10px;
-      cursor: pointer;
-    }
-  }
-
-  svg {
-    width: 10px;
-    height: 10px;
-    fill: $df-primary;
-  }
-}
-
-.dashboard-table {
-  .table-header {
-    background-color: transparent;
-    color: $df-secondary;
-    font-size: 12px;
-    text-transform: uppercase;
-  }
-  .table-rows {
-    .table-row {
-      background-color: $db-tertiary;
-      border-radius: 8px;
-      color: $df-primary;
-      .rol-selector {
-        background-color: $db-cuaternary;
-        border-color: transparent;
-        border-radius: 8px;
-      }
-    }
-  }
-  .member-info {
-    .member-name .you,
-    .member-email {
-      color: $df-secondary;
-    }
-  }
-  .status-badge {
-    border-radius: 8px;
-    color: $db-primary;
-    text-transform: uppercase;
-  }
-  .empty-invitations {
-    border: 1px solid $db-cuaternary;
-    border-radius: 8px;
-    color: $df-secondary;
-  }
-}
-
-.dashboard-access-tokens {
-  width: 800px;
-  margin-left: 120px;
-  margin-top: 80px;
-  .access-tokens-hero-container {
-    background-color: transparent;
-    .access-tokens-hero {
-      width: 468px;
-      flex-direction: column;
-      gap: 32px;
-      background-color: transparent;
-      margin: 0;
-      padding: 0;
-      .desc {
-        background-color: transparent;
-        width: 100%;
-        h2 {
-          color: $df-primary;
-          font-size: 24px;
-          font-weight: regular;
-          margin-bottom: 32px;
-        }
-        p {
-          color: $df-secondary;
-          margin-bottom: 0;
-          font-size: 14px;
-        }
-      }
-      button {
-        width: 100%;
-        font-size: 11px;
-        text-transform: uppercase;
-        background-color: $db-tertiary;
-        color: $df-primary;
-        &:hover {
-          color: $da-primary;
-          background-color: $db-cuaternary;
-        }
-      }
-    }
-  }
-  .dashboard-table {
-    width: 800px;
-    .table-rows {
-      padding-top: 0;
-      .table-row {
-        font-size: 14px;
-        min-height: 40px;
-        height: fit-content;
-        .name {
-          color: $df-primary;
-          max-width: 480px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-        }
-        .expiration-date {
-          color: $df-secondary;
-        }
-      }
-    }
-  }
-  .access-tokens-empty {
-    width: 468px;
-    border: 1px solid $db-cuaternary;
-    border-radius: 8px;
-    margin-top: 32px;
-    font-size: 14px;
-    background-color: transparent;
-    color: $df-secondary;
-  }
-}
-
-.dashboard-access-tokens {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .access-tokens-hero-container {
-    max-width: 1000px;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .access-tokens-hero {
-    font-size: $fs14;
-    padding: $size-6;
-    background-color: $color-white;
-    margin-top: $size-6;
-    display: flex;
-    justify-content: space-between;
-
-    .desc {
-      width: 80%;
-      color: $color-gray-40;
-      h2 {
-        margin-bottom: $size-4;
-        color: $color-black;
-      }
-      p {
-        font-size: $fs16;
-      }
-    }
-
-    .btn-primary {
-      flex-shrink: 0;
-    }
-  }
-
-  .access-tokens-empty {
-    text-align: center;
-    max-width: 1000px;
-    width: 100%;
-    padding: $size-6;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border: 1px dashed $color-gray-20;
-    color: $color-gray-40;
-    margin-top: 12px;
-    min-height: 136px;
-  }
-
-  .table-row {
-    background-color: $color-white;
-    display: grid;
-    grid-template-columns: 1fr 43% 12px;
-    height: 63px;
-    &:not(:first-child) {
-      margin-top: 8px;
-    }
-  }
-
-  .table-field {
-    &.name {
-      color: $color-gray-60;
-    }
-
-    &.expiration-date {
-      color: $color-gray-40;
-      font-size: $fs14;
-      .content {
-        padding: 2px 5px;
-        &.expired {
-          background-color: $color-warning-lighter;
-          border-radius: $br4;
-          color: $color-gray-40;
-        }
-      }
-    }
-
-    &.access-token-created {
-      word-break: break-all;
-    }
-
-    &.actions {
-      position: relative;
-    }
-  }
-}
-
-.btn-primary {
-  background-color: $da-tertiary;
-  border-radius: 8px;
-  color: $db-primary;
-  height: 32px;
-  text-transform: uppercase;
-
-  appearance: none;
-  align-items: center;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  font-family: "worksans", sans-serif;
-  font-size: $fs12;
-  justify-content: center;
-  min-width: 25px;
-  padding: 0 1rem;
-  transition: all 0.4s;
-  text-decoration: none;
-
-  &:hover {
-    background-color: darken($da-tertiary, 10%);
-    color: $db-primary;
-  }
-}
diff --git a/frontend/src/app/main/ui/settings/feedback.cljs b/frontend/src/app/main/ui/settings/feedback.cljs
index 711537fe3..d59185f13 100644
--- a/frontend/src/app/main/ui/settings/feedback.cljs
+++ b/frontend/src/app/main/ui/settings/feedback.cljs
@@ -63,7 +63,7 @@
                   (rx/subs on-succes on-error)))))]
 
     (if new-css-system
-      [:& fm/form {:class "feedback-form"
+      [:& fm/form {:class (stl/css :feedback-form)
                    :on-submit on-submit
                    :form form}
 
@@ -159,4 +159,3 @@
       [:div.dashboard-settings
        [:div.form-container
         [:& feedback-form]]])))
-
diff --git a/frontend/src/app/main/ui/settings/feedback.scss b/frontend/src/app/main/ui/settings/feedback.scss
index bc73d1e2f..dec2597db 100644
--- a/frontend/src/app/main/ui/settings/feedback.scss
+++ b/frontend/src/app/main/ui/settings/feedback.scss
@@ -1,690 +1,25 @@
-@import "common/dependencies/colors";
-
-$br2: 2px;
-$br3: 3px;
-$br4: 4px;
-$br8: 8px;
-$br6: 6px;
-$fs12: 0.75rem;
-$fs14: 0.875rem;
-$fs16: 1rem;
-$fs18: 1.125rem;
-$fs22: 1.375rem;
-$fs24: 1.5rem;
-$fs36: 2.25rem;
-$fw400: 400;
-$fw500: 500;
-$fw600: 600;
-$fw700: 700;
-$lh-088: 0.88;
-$lh-115: 1.15; // original $title-lh-sm
-$lh-500: 5; // original $title-lh-sm
-$size-1: 0.25rem;
-$size-2: 0.5rem;
-$size-4: 1rem;
-$size-5: 1.5rem;
-$size-6: 2rem;
-
-.form-container,
-.generic-form {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-
-  .forms-container {
-    display: flex;
-    margin-top: 40px;
-    width: 536px;
-    justify-content: center;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-    // flex-basis: 368px;
-  }
-
-  .fields-row {
-    margin-bottom: 20px;
-    flex-direction: column;
-
-    .options {
-      display: flex;
-      justify-content: flex-end;
-      font-size: $fs14;
-      margin-top: 13px;
-    }
-  }
-
-  .field {
-    margin-bottom: 20px;
-  }
-
-  h1 {
-    font-size: $fs36;
-    color: #2c233e;
-    margin-bottom: 20px;
-  }
-
-  .subtitle {
-    font-size: $fs24;
-    color: #2c233e;
-    margin-bottom: 20px;
-  }
-
-  .notification-icon {
-    justify-content: center;
-    display: flex;
-    margin-bottom: 3rem;
-
-    svg {
-      fill: $color-gray-60;
-      height: 40%;
-      width: 40%;
-    }
-  }
-
-  .notification-text {
-    font-size: $fs18;
-    color: $color-gray-60;
-    margin-bottom: 20px;
-  }
-
-  .notification-text-email {
-    background: $color-gray-10;
-    border-radius: $br3;
-    color: $color-gray-60;
-    font-size: $fs18;
-    font-weight: $fw500;
-    margin: 1.5rem 0 2.5rem 0;
-    padding: 1rem;
-    text-align: center;
-  }
-
-  h2 {
-    font-size: $fs24;
-    color: $color-gray-60;
-    // height: 40px;
-    display: flex;
-    align-items: center;
-  }
-
-  a {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  p {
-    color: $color-gray-60;
-  }
-
-  hr {
-    border-color: $color-gray-20;
-  }
-}
-
-.dashboard-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $color-white;
-  height: 63px;
-  padding: $size-1 $size-4 $size-1 $size-2;
-  position: relative;
-  z-index: 10;
-  user-select: none;
-  &.team {
-    display: grid;
-    grid-template-columns: 20% 1fr 20%;
-  }
-
-  .element-name {
-    margin-right: $size-2;
-  }
-
-  .btn-secondary {
-    flex-shrink: 0;
-    z-index: 10;
-    height: 32px;
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-  }
-
-  svg {
-    fill: $color-black;
-    height: 14px;
-    margin-right: $size-1;
-    width: 14px;
-  }
-
-  nav {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    z-index: 1;
-
-    ul {
-      display: flex;
-      font-size: $fs14;
-      justify-content: center;
-      margin: 0;
-    }
-
-    li {
-      a {
-        display: flex;
-        align-items: center;
-        flex-basis: 140px;
-        border-bottom: 3px solid transparent;
-        color: $color-gray-30;
-        height: 40px;
-        padding: $size-1 $size-5;
-        font-weight: $fw400;
-        &:hover {
-          color: $color-black;
-          text-decoration: none;
-        }
-      }
-
-      &.active {
-        a {
-          color: $color-black;
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  .dashboard-title {
-    display: flex;
-    align-items: center;
-    margin-left: 13px;
-
-    h1 {
-      color: $color-black;
-      display: flex;
-      flex-shrink: 0;
-      font-size: $fs22;
-      font-weight: $fw600;
-      z-index: 10;
-      user-select: all;
-    }
-
-    .context-menu.is-open {
-      margin-top: 10px;
-    }
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-left: $size-2;
-    z-index: 10;
-
-    svg {
-      fill: $color-gray-40;
-      width: 15px;
-      height: 15px;
-
-      &:hover {
-        fill: $color-primary-dark;
-      }
-    }
-  }
-
-  .dashboard-buttons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .dashboard-header-actions {
-    display: flex;
-  }
-
-  .pin-icon {
-    margin: 0 $size-2 0 $size-5;
-    background-color: transparent;
-    border: none;
-    svg {
-      fill: $color-gray-20;
-    }
-
-    &.active {
-      svg {
-        fill: $color-gray-50;
-      }
-    }
-  }
-}
-
-.dashboard-settings {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-
-  .form-container {
-    margin-top: 50px;
-    display: flex;
-    max-width: 368px;
-    margin-bottom: 2rem;
-    width: 100%;
-
-    &.two-columns {
-      max-width: 536px;
-      justify-content: space-between;
-      flex-direction: row;
-    }
-
-    h2 {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .avatar-form {
-    display: flex;
-    flex-direction: column;
-    width: 120px;
-    min-width: 120px;
-
-    img {
-      border-radius: 50%;
-      flex-shrink: 0;
-      height: 120px;
-      margin-right: $size-4;
-      width: 120px;
-    }
-
-    .image-change-field {
-      position: relative;
-      width: 120px;
-      height: 120px;
-
-      .update-overlay {
-        opacity: 0;
-        cursor: pointer;
-        position: absolute;
-        width: 121px;
-        height: 121px;
-        border-radius: 50%;
-        font-size: $fs24;
-        color: $color-white;
-        line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500
-        text-align: center;
-        background: $color-primary-dark;
-        z-index: 14;
-      }
-
-      input[type="file"] {
-        width: 120px;
-        height: 120px;
-        position: absolute;
-        opacity: 0;
-        cursor: pointer;
-        top: 0;
-        z-index: 15;
-      }
-
-      &:hover {
-        .update-overlay {
-          opacity: 0.8;
-        }
-      }
-    }
-  }
-
-  .profile-form {
-    display: flex;
-    flex-direction: column;
-    max-width: 368px;
-    width: 100%;
-
-    .newsletter-subs {
-      border-bottom: 1px solid $color-gray-20;
-      border-top: 1px solid $color-gray-20;
-      padding: 30px 0;
-      margin-bottom: 31px;
-
-      .newsletter-title {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-30;
-        font-size: $fs14;
-      }
-
-      label {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-60;
-        font-size: $fs12;
-        margin-right: -17px;
-        margin-bottom: 13px;
-      }
-
-      .info {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-30;
-        font-size: $fs12;
-        margin-bottom: 8px;
-      }
-
-      .input-checkbox label {
-        align-items: flex-start;
-      }
-    }
-  }
-
-  .options-form,
-  .password-form {
-    h2 {
-      font-size: $fs14;
-      margin-bottom: 20px;
-    }
-  }
-}
-
-.dashboard-access-tokens {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .access-tokens-hero-container {
-    max-width: 1000px;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .access-tokens-hero {
-    font-size: $fs14;
-    padding: $size-6;
-    background-color: $color-white;
-    margin-top: $size-6;
-    display: flex;
-    justify-content: space-between;
-
-    .desc {
-      width: 80%;
-      color: $color-gray-40;
-      h2 {
-        margin-bottom: $size-4;
-        color: $color-black;
-      }
-      p {
-        font-size: $fs16;
-      }
-    }
-
-    .btn-primary {
-      flex-shrink: 0;
-    }
-  }
-
-  .access-tokens-empty {
-    text-align: center;
-    max-width: 1000px;
-    width: 100%;
-    padding: $size-6;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border: 1px dashed $color-gray-20;
-    color: $color-gray-40;
-    margin-top: 12px;
-    min-height: 136px;
-  }
-
-  .table-row {
-    background-color: $color-white;
-    display: grid;
-    grid-template-columns: 1fr 43% 12px;
-    height: 63px;
-    &:not(:first-child) {
-      margin-top: 8px;
-    }
-  }
-
-  .table-field {
-    &.name {
-      color: $color-gray-60;
-    }
-
-    &.expiration-date {
-      color: $color-gray-40;
-      font-size: $fs14;
-      .content {
-        padding: 2px 5px;
-        &.expired {
-          background-color: $color-warning-lighter;
-          border-radius: $br4;
-          color: $color-gray-40;
-        }
-      }
-    }
-
-    &.access-token-created {
-      word-break: break-all;
-    }
-
-    &.actions {
-      position: relative;
-    }
-  }
-}
-
-.access-tokens-modal {
-  .action-buttons {
-    gap: 10px;
-
-    .cancel-button {
-      border: 1px solid $color-gray-30;
-      background: $color-canvas;
-      border-radius: $br3;
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-      margin-right: 8px;
-
-      &:hover {
-        background: $color-gray-20;
-      }
-    }
-  }
-  .access-token-created {
-    position: relative;
-    word-break: break-all;
-
-    .custom-input input {
-      background-color: $color-success-lighter;
-      border: 0;
-      padding: 0 0 0 15px;
-    }
-  }
-
-  .help-icon {
-    border: none;
-    height: 40px;
-    width: 40px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    cursor: pointer;
-    background-color: $color-success-lighter;
-
-    svg {
-      fill: $color-gray-30;
-    }
-
-    &:hover {
-      svg {
-        fill: $color-gray-60;
-      }
-    }
-  }
-
-  .token-created-info {
-    font-size: $fs12;
-    color: $color-gray-40;
-  }
-}
-
-.dashboard-settings {
-  a {
-    color: $df-secondary;
-  }
-  .form-container {
-    width: 800px;
-    margin: 80px auto auto 120px;
-    form {
-      width: 468px;
-      .fields-row {
-        .custom-input,
-        .custom-select {
-          flex-direction: column-reverse;
-          label {
-            position: relative;
-            text-transform: uppercase;
-            color: $df-primary;
-            font-size: 11px;
-            margin-bottom: 12px;
-            margin-left: -4px;
-          }
-          input,
-          select {
-            background-color: $db-tertiary;
-            border-radius: 8px;
-            border-color: transparent;
-            color: $df-primary;
-            padding: 0 15px;
-            &:focus {
-              outline: 1px solid $da-primary;
-            }
-            ::placeholder {
-              color: $df-secondary;
-            }
-          }
-          .help-icon {
-            bottom: 12px;
-            top: auto;
-            svg {
-              fill: $df-secondary;
-            }
-          }
-          &.disabled {
-            input {
-              background-color: $db-primary;
-              border-color: $db-cuaternary;
-              color: $df-secondary;
-            }
-          }
-          .input-container {
-            background-color: $db-tertiary;
-            border-radius: 8px;
-            border-color: transparent;
-            margin-top: 22px;
-            .main-content {
-              label {
-                position: absolute;
-                top: -24px;
-              }
-              span {
-                color: $df-primary;
-              }
-            }
-            &:focus {
-              border: 1px solid $da-primary;
-            }
-          }
-          textarea {
-            border-radius: 8px;
-            padding: 12px 14px;
-            background-color: $db-tertiary;
-            color: $df-primary;
-            border: none;
-            &:focus {
-              outline: 1px solid $da-primary;
-            }
-          }
-        }
-      }
-      .field-title {
-        color: $df-primary;
-      }
-      .field-title:not(:first-child) {
-        margin-top: 64px;
-      }
-
-      .field-text {
-        color: $df-secondary;
-      }
-      button,
-      .btn-secondary {
-        width: 100%;
-        font-size: 11px;
-        text-transform: uppercase;
-        background-color: $db-tertiary;
-        color: $df-primary;
-        &:hover {
-          color: $da-primary;
-          background-color: $db-cuaternary;
-        }
-      }
-      hr {
-        display: none;
-      }
-    }
-    .links {
-      margin-top: 12px;
-    }
-  }
-}
-
-.btn-secondary {
-  background-color: $db-tertiary;
-  text-transform: uppercase;
-  border: none;
-  color: $df-primary;
-  border-radius: 8px;
-
-  font-size: 0.75rem;
-  padding: 0 1rem;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 40px;
-
-  &:hover {
-    background-color: $db-cuaternary;
-    color: $da-primary;
-    svg {
-      fill: $da-primary;
-    }
-  }
-}
-
-.description {
-  :global(.custom-input label) {
-    position: initial;
-    margin-bottom: 8px;
-  }
-
-  :global(.custom-input textarea) {
-    background-color: $color-white;
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-refactor" as *;
+@use "./profile";
+
+.feedback-form {
+  textarea {
+    border-radius: $br-8;
+    padding: $br-12;
     background-color: $db-tertiary;
-    border-radius: 8px;
-    border: none;
     color: $df-primary;
-    font-size: $fs14;
-    margin: 0;
-    padding: 15px 15px 0 15px;
-    width: 100%;
+    border: none;
 
+    ::placeholder {
+      color: $db-disabled;
+    }
     &:focus {
-      outline: 1px solid $da-primary;
+      outline: $s-1 solid $da-primary;
     }
   }
 }
diff --git a/frontend/src/app/main/ui/settings/options.cljs b/frontend/src/app/main/ui/settings/options.cljs
index 78a0c5130..2ec247659 100644
--- a/frontend/src/app/main/ui/settings/options.cljs
+++ b/frontend/src/app/main/ui/settings/options.cljs
@@ -50,7 +50,7 @@
                    :on-submit on-submit
                    :form form}
 
-       [:h2 (tr "labels.language")]
+       [:h3 (tr "labels.language")]
 
        [:div {:class (stl/css :fields-row)}
         [:& fm/select {:options (into [{:label "Auto (browser)" :value ""}]
@@ -60,7 +60,7 @@
                        :name :lang
                        :data-test "setting-lang"}]]
 
-       [:h2 (tr "dashboard.theme-change")]
+       [:h3 (tr "dashboard.theme-change")]
        [:div {:class (stl/css :fields-row)}
         [:& fm/select {:label (tr "dashboard.select-ui-theme")
                        :name :theme
@@ -71,7 +71,8 @@
 
        [:> fm/submit-button*
         {:label (tr "dashboard.update-settings")
-         :data-test "submit-lang-change"}]]
+         :data-test "submit-lang-change"
+         :class (stl/css :btn-primary)}]]
 
       ;; OLD
       [:& fm/form {:class "options-form"
@@ -102,9 +103,8 @@
 
     (if new-css-system
       [:div {:class (stl/css :dashboard-settings)}
-       [:div
-        {:class (stl/css :form-container)
-         :data-test "settings-form"}
+       [:div {:class (stl/css :form-container) :data-test "settings-form"}
+        [:h2 (tr "labels.settings")]
         [:& options-form {}]]]
       
       ;; OLD
diff --git a/frontend/src/app/main/ui/settings/options.scss b/frontend/src/app/main/ui/settings/options.scss
index 0f94e82b4..474e96838 100644
--- a/frontend/src/app/main/ui/settings/options.scss
+++ b/frontend/src/app/main/ui/settings/options.scss
@@ -1,642 +1,7 @@
-@import "common/dependencies/colors";
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
 
-$br3: 3px;
-$br4: 4px;
-$br8: 8px;
-$br6: 6px;
-$fs12: 0.75rem;
-$fs14: 0.875rem;
-$fs16: 1rem;
-$fs18: 1.125rem;
-$fs22: 1.375rem;
-$fs24: 1.5rem;
-$fs36: 2.25rem;
-$fw400: 400;
-$fw500: 500;
-$fw600: 600;
-$fw700: 700;
-$lh-088: 0.88;
-$lh-115: 1.15; // original $title-lh-sm
-$lh-500: 5; // original $title-lh-sm
-$size-1: 0.25rem;
-$size-2: 0.5rem;
-$size-4: 1rem;
-$size-5: 1.5rem;
-$size-6: 2rem;
-
-.form-container,
-.generic-form {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-
-  .forms-container {
-    display: flex;
-    margin-top: 40px;
-    width: 536px;
-    justify-content: center;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-    // flex-basis: 368px;
-  }
-
-  .fields-row {
-    margin-bottom: 20px;
-    flex-direction: column;
-
-    .options {
-      display: flex;
-      justify-content: flex-end;
-      font-size: $fs14;
-      margin-top: 13px;
-    }
-  }
-
-  .field {
-    margin-bottom: 20px;
-  }
-
-  h1 {
-    font-size: $fs36;
-    color: #2c233e;
-    margin-bottom: 20px;
-  }
-
-  .subtitle {
-    font-size: $fs24;
-    color: #2c233e;
-    margin-bottom: 20px;
-  }
-
-  .notification-icon {
-    justify-content: center;
-    display: flex;
-    margin-bottom: 3rem;
-
-    svg {
-      fill: $color-gray-60;
-      height: 40%;
-      width: 40%;
-    }
-  }
-
-  .notification-text {
-    font-size: $fs18;
-    color: $color-gray-60;
-    margin-bottom: 20px;
-  }
-
-  .notification-text-email {
-    background: $color-gray-10;
-    border-radius: $br3;
-    color: $color-gray-60;
-    font-size: $fs18;
-    font-weight: $fw500;
-    margin: 1.5rem 0 2.5rem 0;
-    padding: 1rem;
-    text-align: center;
-  }
-
-  h2 {
-    font-size: $fs24;
-    color: $df-primary;
-    // height: 40px;
-    display: flex;
-    align-items: center;
-  }
-
-  a {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  p {
-    color: $color-gray-60;
-  }
-
-  hr {
-    border-color: $color-gray-20;
-  }
-}
-
-.dashboard-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $color-white;
-  height: 63px;
-  padding: $size-1 $size-4 $size-1 $size-2;
-  position: relative;
-  z-index: 10;
-  user-select: none;
-  &.team {
-    display: grid;
-    grid-template-columns: 20% 1fr 20%;
-  }
-
-  .element-name {
-    margin-right: $size-2;
-  }
-
-  .btn-secondary {
-    flex-shrink: 0;
-    z-index: 10;
-    height: 32px;
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-  }
-
-  svg {
-    fill: $color-black;
-    height: 14px;
-    margin-right: $size-1;
-    width: 14px;
-  }
-
-  nav {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    z-index: 1;
-
-    ul {
-      display: flex;
-      font-size: $fs14;
-      justify-content: center;
-      margin: 0;
-    }
-
-    li {
-      a {
-        display: flex;
-        align-items: center;
-        flex-basis: 140px;
-        border-bottom: 3px solid transparent;
-        color: $color-gray-30;
-        height: 40px;
-        padding: $size-1 $size-5;
-        font-weight: $fw400;
-        &:hover {
-          color: $color-black;
-          text-decoration: none;
-        }
-      }
-
-      &.active {
-        a {
-          color: $color-black;
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  .dashboard-title {
-    display: flex;
-    align-items: center;
-    margin-left: 13px;
-
-    h1 {
-      color: $color-black;
-      display: flex;
-      flex-shrink: 0;
-      font-size: $fs22;
-      font-weight: $fw600;
-      z-index: 10;
-      user-select: all;
-    }
-
-    .context-menu.is-open {
-      margin-top: 10px;
-    }
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-left: $size-2;
-    z-index: 10;
-
-    svg {
-      fill: $color-gray-40;
-      width: 15px;
-      height: 15px;
-
-      &:hover {
-        fill: $color-primary-dark;
-      }
-    }
-  }
-
-  .dashboard-buttons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .dashboard-header-actions {
-    display: flex;
-  }
-
-  .pin-icon {
-    margin: 0 $size-2 0 $size-5;
-    background-color: transparent;
-    border: none;
-    svg {
-      fill: $color-gray-20;
-    }
-
-    &.active {
-      svg {
-        fill: $color-gray-50;
-      }
-    }
-  }
-}
-
-.dashboard-settings {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-
-  .form-container {
-    margin-top: 50px;
-    display: flex;
-    max-width: 368px;
-    margin-bottom: 2rem;
-    width: 100%;
-
-    &.two-columns {
-      max-width: 536px;
-      justify-content: space-between;
-      flex-direction: row;
-    }
-
-    h2 {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .avatar-form {
-    display: flex;
-    flex-direction: column;
-    width: 120px;
-    min-width: 120px;
-
-    img {
-      border-radius: 50%;
-      flex-shrink: 0;
-      height: 120px;
-      margin-right: $size-4;
-      width: 120px;
-    }
-
-    .image-change-field {
-      position: relative;
-      width: 120px;
-      height: 120px;
-
-      .update-overlay {
-        opacity: 0;
-        cursor: pointer;
-        position: absolute;
-        width: 121px;
-        height: 121px;
-        border-radius: 50%;
-        font-size: $fs24;
-        color: $color-white;
-        line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500
-        text-align: center;
-        background: $color-primary-dark;
-        z-index: 14;
-      }
-
-      input[type="file"] {
-        width: 120px;
-        height: 120px;
-        position: absolute;
-        opacity: 0;
-        cursor: pointer;
-        top: 0;
-        z-index: 15;
-      }
-
-      &:hover {
-        .update-overlay {
-          opacity: 0.8;
-        }
-      }
-    }
-  }
-
-  .profile-form {
-    display: flex;
-    flex-direction: column;
-    max-width: 368px;
-    width: 100%;
-
-    .newsletter-subs {
-      border-bottom: 1px solid $color-gray-20;
-      border-top: 1px solid $color-gray-20;
-      padding: 30px 0;
-      margin-bottom: 31px;
-
-      .newsletter-title {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-30;
-        font-size: $fs14;
-      }
-
-      label {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-60;
-        font-size: $fs12;
-        margin-right: -17px;
-        margin-bottom: 13px;
-      }
-
-      .info {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-30;
-        font-size: $fs12;
-        margin-bottom: 8px;
-      }
-
-      .input-checkbox label {
-        align-items: flex-start;
-      }
-    }
-  }
-
-  .options-form,
-  .password-form {
-    h2 {
-      font-size: $fs14;
-      margin-bottom: 20px;
-    }
-  }
-}
-
-.dashboard-access-tokens {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .access-tokens-hero-container {
-    max-width: 1000px;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .access-tokens-hero {
-    font-size: $fs14;
-    padding: $size-6;
-    background-color: $color-white;
-    margin-top: $size-6;
-    display: flex;
-    justify-content: space-between;
-
-    .desc {
-      width: 80%;
-      color: $color-gray-40;
-      h2 {
-        margin-bottom: $size-4;
-        color: $color-black;
-      }
-      p {
-        font-size: $fs16;
-      }
-    }
-
-    .btn-primary {
-      flex-shrink: 0;
-    }
-  }
-
-  .access-tokens-empty {
-    text-align: center;
-    max-width: 1000px;
-    width: 100%;
-    padding: $size-6;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border: 1px dashed $color-gray-20;
-    color: $color-gray-40;
-    margin-top: 12px;
-    min-height: 136px;
-  }
-
-  .table-row {
-    background-color: $color-white;
-    display: grid;
-    grid-template-columns: 1fr 43% 12px;
-    height: 63px;
-    &:not(:first-child) {
-      margin-top: 8px;
-    }
-  }
-
-  .table-field {
-    &.name {
-      color: $color-gray-60;
-    }
-
-    &.expiration-date {
-      color: $color-gray-40;
-      font-size: $fs14;
-      .content {
-        padding: 2px 5px;
-        &.expired {
-          background-color: $color-warning-lighter;
-          border-radius: $br4;
-          color: $color-gray-40;
-        }
-      }
-    }
-
-    &.access-token-created {
-      word-break: break-all;
-    }
-
-    &.actions {
-      position: relative;
-    }
-  }
-}
-
-.access-tokens-modal {
-  .action-buttons {
-    gap: 10px;
-
-    .cancel-button {
-      border: 1px solid $color-gray-30;
-      background: $color-canvas;
-      border-radius: $br3;
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-      margin-right: 8px;
-
-      &:hover {
-        background: $color-gray-20;
-      }
-    }
-  }
-  .access-token-created {
-    position: relative;
-    word-break: break-all;
-
-    .custom-input input {
-      background-color: $color-success-lighter;
-      border: 0;
-      padding: 0 0 0 15px;
-    }
-  }
-
-  .help-icon {
-    border: none;
-    height: 40px;
-    width: 40px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    cursor: pointer;
-    background-color: $color-success-lighter;
-
-    svg {
-      fill: $color-gray-30;
-    }
-
-    &:hover {
-      svg {
-        fill: $color-gray-60;
-      }
-    }
-  }
-
-  .token-created-info {
-    font-size: $fs12;
-    color: $color-gray-40;
-  }
-}
-
-.dashboard-settings {
-  a {
-    color: $df-secondary;
-  }
-  .form-container {
-    width: 800px;
-    margin: 80px auto auto 120px;
-    form {
-      width: 468px;
-      .fields-row {
-        .custom-input,
-        .custom-select {
-          flex-direction: column-reverse;
-          label {
-            position: relative;
-            text-transform: uppercase;
-            color: $df-primary;
-            font-size: 11px;
-            margin-bottom: 12px;
-            margin-left: -4px;
-          }
-          input,
-          select {
-            background-color: $db-tertiary;
-            border-radius: 8px;
-            border-color: transparent;
-            color: $df-primary;
-            padding: 0 15px;
-            &:focus {
-              outline: 1px solid $da-primary;
-            }
-            ::placeholder {
-              color: $df-secondary;
-            }
-          }
-          .help-icon {
-            bottom: 12px;
-            top: auto;
-            svg {
-              fill: $df-secondary;
-            }
-          }
-          &.disabled {
-            input {
-              background-color: $db-primary;
-              border-color: $db-cuaternary;
-              color: $df-secondary;
-            }
-          }
-          .input-container {
-            background-color: $db-tertiary;
-            border-radius: 8px;
-            border-color: transparent;
-            margin-top: 22px;
-            .main-content {
-              label {
-                position: absolute;
-                top: -24px;
-              }
-              span {
-                color: $df-primary;
-              }
-            }
-            &:focus {
-              border: 1px solid $da-primary;
-            }
-          }
-          textarea {
-            border-radius: 8px;
-            padding: 12px 14px;
-            background-color: $db-tertiary;
-            color: $df-primary;
-            border: none;
-            &:focus {
-              outline: 1px solid $da-primary;
-            }
-          }
-        }
-      }
-      .field-title {
-        color: $df-primary;
-      }
-      .field-title:not(:first-child) {
-        margin-top: 64px;
-      }
-
-      .field-text {
-        color: $df-secondary;
-      }
-      button,
-      .btn-secondary {
-        width: 100%;
-        font-size: 11px;
-        text-transform: uppercase;
-        background-color: $db-tertiary;
-        color: $df-primary;
-        &:hover {
-          color: $da-primary;
-          background-color: $db-cuaternary;
-        }
-      }
-      hr {
-        display: none;
-      }
-    }
-    .links {
-      margin-top: 12px;
-    }
-  }
-}
+@use "./profile" as *;
diff --git a/frontend/src/app/main/ui/settings/password.cljs b/frontend/src/app/main/ui/settings/password.cljs
index 27eb69a12..6dd7f7f4f 100644
--- a/frontend/src/app/main/ui/settings/password.cljs
+++ b/frontend/src/app/main/ui/settings/password.cljs
@@ -83,7 +83,7 @@
       [:& fm/form {:class (stl/css :password-form)
                    :on-submit on-submit
                    :form form}
-       [:h2 (t locale "dashboard.password-change")]
+
        [:div {:class (stl/css :fields-row)}
         [:& fm/input
          {:type "password"
@@ -144,8 +144,9 @@
      #(dom/set-html-title (tr "title.settings.password")))
 
     (if new-css-system
-      [:section {:class (stl/css :dashboard-settings :form-container)}
+      [:section {:class (stl/css :dashboard-settings)}
        [:div {:class (stl/css :form-container)}
+        [:h2 (t locale "dashboard.password-change")]
         [:& password-form {:locale locale}]]]
 
       ;; old
diff --git a/frontend/src/app/main/ui/settings/password.scss b/frontend/src/app/main/ui/settings/password.scss
index aa7e88cbc..474e96838 100644
--- a/frontend/src/app/main/ui/settings/password.scss
+++ b/frontend/src/app/main/ui/settings/password.scss
@@ -1,642 +1,7 @@
-@import "common/dependencies/colors";
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
 
-$br3: 3px;
-$br4: 4px;
-$br8: 8px;
-$br6: 6px;
-$fs12: 0.75rem;
-$fs14: 0.875rem;
-$fs16: 1rem;
-$fs18: 1.125rem;
-$fs22: 1.375rem;
-$fs24: 1.5rem;
-$fs36: 2.25rem;
-$fw400: 400;
-$fw500: 500;
-$fw600: 600;
-$fw700: 700;
-$lh-088: 0.88;
-$lh-115: 1.15; // original $title-lh-sm
-$lh-500: 5; // original $title-lh-sm
-$size-1: 0.25rem;
-$size-2: 0.5rem;
-$size-4: 1rem;
-$size-5: 1.5rem;
-$size-6: 2rem;
-
-.form-container,
-.generic-form {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-
-  .forms-container {
-    display: flex;
-    margin-top: 40px;
-    width: 536px;
-    justify-content: center;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-    // flex-basis: 368px;
-  }
-
-  .fields-row {
-    margin-bottom: 20px;
-    flex-direction: column;
-
-    .options {
-      display: flex;
-      justify-content: flex-end;
-      font-size: $fs14;
-      margin-top: 13px;
-    }
-  }
-
-  .field {
-    margin-bottom: 20px;
-  }
-
-  h1 {
-    font-size: $fs36;
-    color: #2c233e;
-    margin-bottom: 20px;
-  }
-
-  .subtitle {
-    font-size: $fs24;
-    color: #2c233e;
-    margin-bottom: 20px;
-  }
-
-  .notification-icon {
-    justify-content: center;
-    display: flex;
-    margin-bottom: 3rem;
-
-    svg {
-      fill: $color-gray-60;
-      height: 40%;
-      width: 40%;
-    }
-  }
-
-  .notification-text {
-    font-size: $fs18;
-    color: $color-gray-60;
-    margin-bottom: 20px;
-  }
-
-  .notification-text-email {
-    background: $color-gray-10;
-    border-radius: $br3;
-    color: $color-gray-60;
-    font-size: $fs18;
-    font-weight: $fw500;
-    margin: 1.5rem 0 2.5rem 0;
-    padding: 1rem;
-    text-align: center;
-  }
-
-  h2 {
-    font-size: $fs24;
-    color: $color-gray-60;
-    // height: 40px;
-    display: flex;
-    align-items: center;
-  }
-
-  a {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  p {
-    color: $color-gray-60;
-  }
-
-  hr {
-    border-color: $color-gray-20;
-  }
-}
-
-.dashboard-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $color-white;
-  height: 63px;
-  padding: $size-1 $size-4 $size-1 $size-2;
-  position: relative;
-  z-index: 10;
-  user-select: none;
-  &.team {
-    display: grid;
-    grid-template-columns: 20% 1fr 20%;
-  }
-
-  .element-name {
-    margin-right: $size-2;
-  }
-
-  .btn-secondary {
-    flex-shrink: 0;
-    z-index: 10;
-    height: 32px;
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-  }
-
-  svg {
-    fill: $color-black;
-    height: 14px;
-    margin-right: $size-1;
-    width: 14px;
-  }
-
-  nav {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    z-index: 1;
-
-    ul {
-      display: flex;
-      font-size: $fs14;
-      justify-content: center;
-      margin: 0;
-    }
-
-    li {
-      a {
-        display: flex;
-        align-items: center;
-        flex-basis: 140px;
-        border-bottom: 3px solid transparent;
-        color: $color-gray-30;
-        height: 40px;
-        padding: $size-1 $size-5;
-        font-weight: $fw400;
-        &:hover {
-          color: $color-black;
-          text-decoration: none;
-        }
-      }
-
-      &.active {
-        a {
-          color: $color-black;
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  .dashboard-title {
-    display: flex;
-    align-items: center;
-    margin-left: 13px;
-
-    h1 {
-      color: $color-black;
-      display: flex;
-      flex-shrink: 0;
-      font-size: $fs22;
-      font-weight: $fw600;
-      z-index: 10;
-      user-select: all;
-    }
-
-    .context-menu.is-open {
-      margin-top: 10px;
-    }
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-left: $size-2;
-    z-index: 10;
-
-    svg {
-      fill: $color-gray-40;
-      width: 15px;
-      height: 15px;
-
-      &:hover {
-        fill: $color-primary-dark;
-      }
-    }
-  }
-
-  .dashboard-buttons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .dashboard-header-actions {
-    display: flex;
-  }
-
-  .pin-icon {
-    margin: 0 $size-2 0 $size-5;
-    background-color: transparent;
-    border: none;
-    svg {
-      fill: $color-gray-20;
-    }
-
-    &.active {
-      svg {
-        fill: $color-gray-50;
-      }
-    }
-  }
-}
-
-.dashboard-settings {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-
-  .form-container {
-    margin-top: 50px;
-    display: flex;
-    max-width: 368px;
-    margin-bottom: 2rem;
-    width: 100%;
-
-    &.two-columns {
-      max-width: 536px;
-      justify-content: space-between;
-      flex-direction: row;
-    }
-
-    h2 {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .avatar-form {
-    display: flex;
-    flex-direction: column;
-    width: 120px;
-    min-width: 120px;
-
-    img {
-      border-radius: 50%;
-      flex-shrink: 0;
-      height: 120px;
-      margin-right: $size-4;
-      width: 120px;
-    }
-
-    .image-change-field {
-      position: relative;
-      width: 120px;
-      height: 120px;
-
-      .update-overlay {
-        opacity: 0;
-        cursor: pointer;
-        position: absolute;
-        width: 121px;
-        height: 121px;
-        border-radius: 50%;
-        font-size: $fs24;
-        color: $color-white;
-        line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500
-        text-align: center;
-        background: $color-primary-dark;
-        z-index: 14;
-      }
-
-      input[type="file"] {
-        width: 120px;
-        height: 120px;
-        position: absolute;
-        opacity: 0;
-        cursor: pointer;
-        top: 0;
-        z-index: 15;
-      }
-
-      &:hover {
-        .update-overlay {
-          opacity: 0.8;
-        }
-      }
-    }
-  }
-
-  .profile-form {
-    display: flex;
-    flex-direction: column;
-    max-width: 368px;
-    width: 100%;
-
-    .newsletter-subs {
-      border-bottom: 1px solid $color-gray-20;
-      border-top: 1px solid $color-gray-20;
-      padding: 30px 0;
-      margin-bottom: 31px;
-
-      .newsletter-title {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-30;
-        font-size: $fs14;
-      }
-
-      label {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-60;
-        font-size: $fs12;
-        margin-right: -17px;
-        margin-bottom: 13px;
-      }
-
-      .info {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-30;
-        font-size: $fs12;
-        margin-bottom: 8px;
-      }
-
-      .input-checkbox label {
-        align-items: flex-start;
-      }
-    }
-  }
-
-  .options-form,
-  .password-form {
-    h2 {
-      font-size: $fs14;
-      margin-bottom: 20px;
-    }
-  }
-}
-
-.dashboard-access-tokens {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .access-tokens-hero-container {
-    max-width: 1000px;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .access-tokens-hero {
-    font-size: $fs14;
-    padding: $size-6;
-    background-color: $color-white;
-    margin-top: $size-6;
-    display: flex;
-    justify-content: space-between;
-
-    .desc {
-      width: 80%;
-      color: $color-gray-40;
-      h2 {
-        margin-bottom: $size-4;
-        color: $color-black;
-      }
-      p {
-        font-size: $fs16;
-      }
-    }
-
-    .btn-primary {
-      flex-shrink: 0;
-    }
-  }
-
-  .access-tokens-empty {
-    text-align: center;
-    max-width: 1000px;
-    width: 100%;
-    padding: $size-6;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border: 1px dashed $color-gray-20;
-    color: $color-gray-40;
-    margin-top: 12px;
-    min-height: 136px;
-  }
-
-  .table-row {
-    background-color: $color-white;
-    display: grid;
-    grid-template-columns: 1fr 43% 12px;
-    height: 63px;
-    &:not(:first-child) {
-      margin-top: 8px;
-    }
-  }
-
-  .table-field {
-    &.name {
-      color: $color-gray-60;
-    }
-
-    &.expiration-date {
-      color: $color-gray-40;
-      font-size: $fs14;
-      .content {
-        padding: 2px 5px;
-        &.expired {
-          background-color: $color-warning-lighter;
-          border-radius: $br4;
-          color: $color-gray-40;
-        }
-      }
-    }
-
-    &.access-token-created {
-      word-break: break-all;
-    }
-
-    &.actions {
-      position: relative;
-    }
-  }
-}
-
-.access-tokens-modal {
-  .action-buttons {
-    gap: 10px;
-
-    .cancel-button {
-      border: 1px solid $color-gray-30;
-      background: $color-canvas;
-      border-radius: $br3;
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-      margin-right: 8px;
-
-      &:hover {
-        background: $color-gray-20;
-      }
-    }
-  }
-  .access-token-created {
-    position: relative;
-    word-break: break-all;
-
-    .custom-input input {
-      background-color: $color-success-lighter;
-      border: 0;
-      padding: 0 0 0 15px;
-    }
-  }
-
-  .help-icon {
-    border: none;
-    height: 40px;
-    width: 40px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    cursor: pointer;
-    background-color: $color-success-lighter;
-
-    svg {
-      fill: $color-gray-30;
-    }
-
-    &:hover {
-      svg {
-        fill: $color-gray-60;
-      }
-    }
-  }
-
-  .token-created-info {
-    font-size: $fs12;
-    color: $color-gray-40;
-  }
-}
-
-.dashboard-settings {
-  a {
-    color: $df-secondary;
-  }
-  .form-container {
-    width: 800px;
-    margin: 80px auto auto 120px;
-    form {
-      width: 468px;
-      .fields-row {
-        .custom-input,
-        .custom-select {
-          flex-direction: column-reverse;
-          label {
-            position: relative;
-            text-transform: uppercase;
-            color: $df-primary;
-            font-size: 11px;
-            margin-bottom: 12px;
-            margin-left: -4px;
-          }
-          input,
-          select {
-            background-color: $db-tertiary;
-            border-radius: 8px;
-            border-color: transparent;
-            color: $df-primary;
-            padding: 0 15px;
-            &:focus {
-              outline: 1px solid $da-primary;
-            }
-            ::placeholder {
-              color: $df-secondary;
-            }
-          }
-          .help-icon {
-            bottom: 12px;
-            top: auto;
-            svg {
-              fill: $df-secondary;
-            }
-          }
-          &.disabled {
-            input {
-              background-color: $db-primary;
-              border-color: $db-cuaternary;
-              color: $df-secondary;
-            }
-          }
-          .input-container {
-            background-color: $db-tertiary;
-            border-radius: 8px;
-            border-color: transparent;
-            margin-top: 22px;
-            .main-content {
-              label {
-                position: absolute;
-                top: -24px;
-              }
-              span {
-                color: $df-primary;
-              }
-            }
-            &:focus {
-              border: 1px solid $da-primary;
-            }
-          }
-          textarea {
-            border-radius: 8px;
-            padding: 12px 14px;
-            background-color: $db-tertiary;
-            color: $df-primary;
-            border: none;
-            &:focus {
-              outline: 1px solid $da-primary;
-            }
-          }
-        }
-      }
-      .field-title {
-        color: $df-primary;
-      }
-      .field-title:not(:first-child) {
-        margin-top: 64px;
-      }
-
-      .field-text {
-        color: $df-secondary;
-      }
-      button,
-      .btn-secondary {
-        width: 100%;
-        font-size: 11px;
-        text-transform: uppercase;
-        background-color: $db-tertiary;
-        color: $df-primary;
-        &:hover {
-          color: $da-primary;
-          background-color: $db-cuaternary;
-        }
-      }
-      hr {
-        display: none;
-      }
-    }
-    .links {
-      margin-top: 12px;
-    }
-  }
-}
+@use "./profile" as *;
diff --git a/frontend/src/app/main/ui/settings/profile.cljs b/frontend/src/app/main/ui/settings/profile.cljs
index fc9879445..8dfb6b87b 100644
--- a/frontend/src/app/main/ui/settings/profile.cljs
+++ b/frontend/src/app/main/ui/settings/profile.cljs
@@ -61,7 +61,8 @@
           :name :fullname
           :label (tr "dashboard.your-name")}]]
 
-       [:div {:class (stl/css :fields-row)}
+       [:div {:class (stl/css :fields-row)
+              :on-click #(modal/show! :change-email {})}
         [:& fm/input
          {:type "email"
           :name :email
@@ -76,7 +77,8 @@
 
        [:> fm/submit-button*
         {:label (tr "dashboard.save-settings")
-         :disabled (empty? (:touched @form))}]
+         :disabled (empty? (:touched @form))
+         :className (stl/css :btn-primary)}]
 
        [:div {:class (stl/css :links)}
         [:div {:class (stl/css :link-item)}
@@ -160,7 +162,8 @@
       (dom/set-html-title (tr "title.settings.profile")))
     (if new-css-system
       [:div {:class (stl/css :dashboard-settings)}
-       [:div {:class (stl/css :form-container :two-columns)}
+       [:div {:class (stl/css :form-container)}
+        [:h2 (tr "labels.profile")]
         [:& profile-photo-form]
         [:& profile-form]]]
       
@@ -170,4 +173,3 @@
         [:& profile-photo-form]
         [:& profile-form]]])))
 
-
diff --git a/frontend/src/app/main/ui/settings/profile.scss b/frontend/src/app/main/ui/settings/profile.scss
index aa7e88cbc..dc13b0231 100644
--- a/frontend/src/app/main/ui/settings/profile.scss
+++ b/frontend/src/app/main/ui/settings/profile.scss
@@ -1,111 +1,217 @@
-@import "common/dependencies/colors";
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
 
-$br3: 3px;
-$br4: 4px;
-$br8: 8px;
-$br6: 6px;
-$fs12: 0.75rem;
-$fs14: 0.875rem;
-$fs16: 1rem;
-$fs18: 1.125rem;
-$fs22: 1.375rem;
-$fs24: 1.5rem;
-$fs36: 2.25rem;
-$fw400: 400;
-$fw500: 500;
-$fw600: 600;
-$fw700: 700;
-$lh-088: 0.88;
-$lh-115: 1.15; // original $title-lh-sm
-$lh-500: 5; // original $title-lh-sm
-$size-1: 0.25rem;
-$size-2: 0.5rem;
-$size-4: 1rem;
-$size-5: 1.5rem;
-$size-6: 2rem;
+@use "common/refactor/common-refactor" as *;
 
-.form-container,
-.generic-form {
+.dashboard-settings {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  a {
+    color: $df-secondary;
+  }
+}
+
+.form-container {
   display: flex;
   justify-content: center;
   flex-direction: column;
-
-  .forms-container {
-    display: flex;
-    margin-top: 40px;
-    width: 536px;
-    justify-content: center;
-  }
+  max-width: $s-368;
+  margin-bottom: $s-32;
+  width: $s-580;
+  margin: $s-80 auto auto $s-120;
+  justify-content: center;
 
   form {
     display: flex;
     flex-direction: column;
-    // flex-basis: 368px;
+    width: $s-500;
+
+    .btn-secondary {
+      width: 100%;
+      font-size: $fs-11;
+      text-transform: uppercase;
+      background-color: $db-tertiary;
+      color: $df-primary;
+      &:hover {
+        color: $da-primary;
+        background-color: $db-cuaternary;
+      }
+    }
+    hr {
+      display: none;
+    }
   }
 
   .fields-row {
-    margin-bottom: 20px;
+    margin-bottom: $s-20;
     flex-direction: column;
 
     .options {
       display: flex;
       justify-content: flex-end;
-      font-size: $fs14;
-      margin-top: 13px;
+      font-size: $fs-14;
+      margin-top: $s-12;
+    }
+
+    :global(input) {
+      height: $s-40;
     }
   }
 
   .field {
-    margin-bottom: 20px;
+    margin-bottom: $s-20;
+  }
+
+  .field-title {
+    color: $df-primary;
+
+    &:not(:first-child) {
+      margin-top: $s-64;
+    }
+  }
+
+  .field-text {
+    color: $df-secondary;
+  }
+
+  .custom-input,
+  .custom-select {
+    flex-direction: column-reverse;
+    label {
+      position: relative;
+      text-transform: uppercase;
+      color: $df-primary;
+      font-size: $fs-11;
+      margin-bottom: $s-12;
+      margin-left: calc(-1 * $s-4);
+    }
+    input,
+    select {
+      background-color: $db-tertiary;
+      border-radius: $br-8;
+      border-color: transparent;
+      color: $df-primary;
+      padding: 0 $s-16;
+      &:focus {
+        outline: $s-1 solid $da-primary;
+      }
+      ::placeholder {
+        color: $df-secondary;
+      }
+    }
+    .help-icon {
+      bottom: $s-12;
+      top: auto;
+      svg {
+        fill: $df-secondary;
+      }
+    }
+    &.disabled {
+      input {
+        background-color: $db-primary;
+        border-color: $db-cuaternary;
+        color: $df-secondary;
+      }
+    }
+    .input-container {
+      background-color: $db-tertiary;
+      border-radius: $br-8;
+      border-color: transparent;
+      margin-top: $s-24;
+      .main-content {
+        label {
+          position: absolute;
+          top: calc(-1 * $s-24);
+        }
+        span {
+          color: $df-primary;
+        }
+      }
+      &:focus {
+        border: $s-1 solid $da-primary;
+      }
+    }
+    textarea {
+      border-radius: $br-8;
+      padding: $s-12 $s-16;
+      background-color: $db-tertiary;
+      color: $df-primary;
+      border: none;
+      &:focus {
+        outline: $s-1 solid $da-primary;
+      }
+    }
+  }
+
+  &.two-columns {
+    max-width: $s-520;
+    justify-content: space-between;
+    flex-direction: row;
   }
 
   h1 {
-    font-size: $fs36;
-    color: #2c233e;
-    margin-bottom: 20px;
+    font-size: $fs-36;
+    color: $db-tertiary;
+    margin-bottom: $s-20;
   }
 
   .subtitle {
-    font-size: $fs24;
-    color: #2c233e;
-    margin-bottom: 20px;
+    font-size: $fs-24;
+    color: $db-tertiary;
+    margin-bottom: $s-20;
   }
 
   .notification-icon {
     justify-content: center;
     display: flex;
-    margin-bottom: 3rem;
+    margin-bottom: $s-48;
 
     svg {
-      fill: $color-gray-60;
+      fill: $db-primary;
       height: 40%;
       width: 40%;
     }
   }
 
   .notification-text {
-    font-size: $fs18;
-    color: $color-gray-60;
-    margin-bottom: 20px;
+    font-size: $fs-16;
+    color: $db-primary;
+    margin-bottom: $s-20;
   }
 
   .notification-text-email {
-    background: $color-gray-10;
-    border-radius: $br3;
-    color: $color-gray-60;
-    font-size: $fs18;
+    background: $df-primary;
+    border-radius: $br-4;
+    color: $db-primary;
+    font-size: $fs-16;
     font-weight: $fw500;
-    margin: 1.5rem 0 2.5rem 0;
-    padding: 1rem;
+    margin: $s-24 0 $s-40 0;
+    padding: $s-16;
     text-align: center;
   }
 
   h2 {
-    font-size: $fs24;
-    color: $color-gray-60;
-    // height: 40px;
+    font-size: $fs-24;
+    font-weight: $fw400;
+    color: $df-primary;
     display: flex;
     align-items: center;
+    margin: $s-16 0;
+  }
+
+  h3 {
+    font-size: $fs-12;
+    font-weight: $fw400;
+    color: $df-primary;
+    display: flex;
+    align-items: center;
+    margin: $s-8 0;
+    text-transform: uppercase;
   }
 
   a {
@@ -115,528 +221,115 @@ $size-6: 2rem;
   }
 
   p {
-    color: $color-gray-60;
+    color: $db-primary;
   }
 
   hr {
-    border-color: $color-gray-20;
+    border-color: $df-secondary;
+  }
+
+  .links {
+    margin-top: $s-12;
   }
 }
 
-.dashboard-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $color-white;
-  height: 63px;
-  padding: $size-1 $size-4 $size-1 $size-2;
-  position: relative;
-  z-index: 10;
-  user-select: none;
-  &.team {
-    display: grid;
-    grid-template-columns: 20% 1fr 20%;
-  }
-
-  .element-name {
-    margin-right: $size-2;
-  }
-
-  .btn-secondary {
-    flex-shrink: 0;
-    z-index: 10;
-    height: 32px;
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-  }
-
-  svg {
-    fill: $color-black;
-    height: 14px;
-    margin-right: $size-1;
-    width: 14px;
-  }
-
-  nav {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    z-index: 1;
-
-    ul {
-      display: flex;
-      font-size: $fs14;
-      justify-content: center;
-      margin: 0;
-    }
-
-    li {
-      a {
-        display: flex;
-        align-items: center;
-        flex-basis: 140px;
-        border-bottom: 3px solid transparent;
-        color: $color-gray-30;
-        height: 40px;
-        padding: $size-1 $size-5;
-        font-weight: $fw400;
-        &:hover {
-          color: $color-black;
-          text-decoration: none;
-        }
-      }
-
-      &.active {
-        a {
-          color: $color-black;
-          border-color: $color-primary;
-        }
-      }
-    }
-  }
-
-  .dashboard-title {
-    display: flex;
-    align-items: center;
-    margin-left: 13px;
-
-    h1 {
-      color: $color-black;
-      display: flex;
-      flex-shrink: 0;
-      font-size: $fs22;
-      font-weight: $fw600;
-      z-index: 10;
-      user-select: all;
-    }
-
-    .context-menu.is-open {
-      margin-top: 10px;
-    }
-  }
-
-  .icon {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-left: $size-2;
-    z-index: 10;
-
-    svg {
-      fill: $color-gray-40;
-      width: 15px;
-      height: 15px;
-
-      &:hover {
-        fill: $color-primary-dark;
-      }
-    }
-  }
-
-  .dashboard-buttons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .dashboard-header-actions {
-    display: flex;
-  }
-
-  .pin-icon {
-    margin: 0 $size-2 0 $size-5;
-    background-color: transparent;
-    border: none;
-    svg {
-      fill: $color-gray-20;
-    }
-
-    &.active {
-      svg {
-        fill: $color-gray-50;
-      }
-    }
-  }
-}
-
-.dashboard-settings {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-
-  .form-container {
-    margin-top: 50px;
-    display: flex;
-    max-width: 368px;
-    margin-bottom: 2rem;
-    width: 100%;
-
-    &.two-columns {
-      max-width: 536px;
-      justify-content: space-between;
-      flex-direction: row;
-    }
-
-    h2 {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .avatar-form {
-    display: flex;
-    flex-direction: column;
-    width: 120px;
-    min-width: 120px;
-
-    img {
-      border-radius: 50%;
-      flex-shrink: 0;
-      height: 120px;
-      margin-right: $size-4;
-      width: 120px;
-    }
-
-    .image-change-field {
-      position: relative;
-      width: 120px;
-      height: 120px;
-
-      .update-overlay {
-        opacity: 0;
-        cursor: pointer;
-        position: absolute;
-        width: 121px;
-        height: 121px;
-        border-radius: 50%;
-        font-size: $fs24;
-        color: $color-white;
-        line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500
-        text-align: center;
-        background: $color-primary-dark;
-        z-index: 14;
-      }
-
-      input[type="file"] {
-        width: 120px;
-        height: 120px;
-        position: absolute;
-        opacity: 0;
-        cursor: pointer;
-        top: 0;
-        z-index: 15;
-      }
-
-      &:hover {
-        .update-overlay {
-          opacity: 0.8;
-        }
-      }
-    }
-  }
-
-  .profile-form {
-    display: flex;
-    flex-direction: column;
-    max-width: 368px;
-    width: 100%;
-
-    .newsletter-subs {
-      border-bottom: 1px solid $color-gray-20;
-      border-top: 1px solid $color-gray-20;
-      padding: 30px 0;
-      margin-bottom: 31px;
-
-      .newsletter-title {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-30;
-        font-size: $fs14;
-      }
-
-      label {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-60;
-        font-size: $fs12;
-        margin-right: -17px;
-        margin-bottom: 13px;
-      }
-
-      .info {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-30;
-        font-size: $fs12;
-        margin-bottom: 8px;
-      }
-
-      .input-checkbox label {
-        align-items: flex-start;
-      }
-    }
-  }
-
-  .options-form,
-  .password-form {
-    h2 {
-      font-size: $fs14;
-      margin-bottom: 20px;
-    }
-  }
-}
-
-.dashboard-access-tokens {
+form.avatar-form {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  width: $s-148;
+  height: $s-148;
+  margin: $s-16 0;
 
-  .access-tokens-hero-container {
-    max-width: 1000px;
+  img {
+    border-radius: 50%;
+    flex-shrink: 0;
+    height: 100%;
+    margin-right: $s-16;
     width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .access-tokens-hero {
-    font-size: $fs14;
-    padding: $size-6;
-    background-color: $color-white;
-    margin-top: $size-6;
-    display: flex;
-    justify-content: space-between;
-
-    .desc {
-      width: 80%;
-      color: $color-gray-40;
-      h2 {
-        margin-bottom: $size-4;
-        color: $color-black;
-      }
-      p {
-        font-size: $fs16;
-      }
-    }
-
-    .btn-primary {
-      flex-shrink: 0;
-    }
-  }
-
-  .access-tokens-empty {
-    text-align: center;
-    max-width: 1000px;
-    width: 100%;
-    padding: $size-6;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border: 1px dashed $color-gray-20;
-    color: $color-gray-40;
-    margin-top: 12px;
-    min-height: 136px;
-  }
-
-  .table-row {
-    background-color: $color-white;
-    display: grid;
-    grid-template-columns: 1fr 43% 12px;
-    height: 63px;
-    &:not(:first-child) {
-      margin-top: 8px;
-    }
-  }
-
-  .table-field {
-    &.name {
-      color: $color-gray-60;
-    }
-
-    &.expiration-date {
-      color: $color-gray-40;
-      font-size: $fs14;
-      .content {
-        padding: 2px 5px;
-        &.expired {
-          background-color: $color-warning-lighter;
-          border-radius: $br4;
-          color: $color-gray-40;
-        }
-      }
-    }
-
-    &.access-token-created {
-      word-break: break-all;
-    }
-
-    &.actions {
-      position: relative;
-    }
   }
 }
 
-.access-tokens-modal {
-  .action-buttons {
-    gap: 10px;
+.image-change-field {
+  position: relative;
+  width: 100%;
+  height: 100%;
 
-    .cancel-button {
-      border: 1px solid $color-gray-30;
-      background: $color-canvas;
-      border-radius: $br3;
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-      margin-right: 8px;
-
-      &:hover {
-        background: $color-gray-20;
-      }
-    }
-  }
-  .access-token-created {
-    position: relative;
-    word-break: break-all;
-
-    .custom-input input {
-      background-color: $color-success-lighter;
-      border: 0;
-      padding: 0 0 0 15px;
-    }
-  }
-
-  .help-icon {
-    border: none;
-    height: 40px;
-    width: 40px;
-    position: absolute;
-    top: 0;
-    right: 0;
+  .update-overlay {
+    opacity: 0;
     cursor: pointer;
-    background-color: $color-success-lighter;
-
-    svg {
-      fill: $color-gray-30;
-    }
-
-    &:hover {
-      svg {
-        fill: $color-gray-60;
-      }
-    }
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    font-size: $fs-24;
+    color: $df-primary;
+    line-height: 6;
+    text-align: center;
+    background: $da-tertiary;
+    z-index: 14;
   }
 
-  .token-created-info {
-    font-size: $fs12;
-    color: $color-gray-40;
+  input[type="file"] {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    top: 0;
+    z-index: 15;
+  }
+
+  &:hover {
+    .update-overlay {
+      opacity: 0.8;
+    }
   }
 }
 
-.dashboard-settings {
-  a {
+.profile-form {
+  display: flex;
+  flex-direction: column;
+  max-width: $s-368;
+  width: 100%;
+}
+
+.newsletter-subs {
+  border-bottom: $s-1 solid $df-secondary;
+  border-top: $s-1 solid $df-secondary;
+  padding: $s-32 0;
+  margin-bottom: $s-32;
+
+  .newsletter-title {
+    font-family: "worksans", sans-serif;
     color: $df-secondary;
+    font-size: $fs-14;
   }
-  .form-container {
-    width: 800px;
-    margin: 80px auto auto 120px;
-    form {
-      width: 468px;
-      .fields-row {
-        .custom-input,
-        .custom-select {
-          flex-direction: column-reverse;
-          label {
-            position: relative;
-            text-transform: uppercase;
-            color: $df-primary;
-            font-size: 11px;
-            margin-bottom: 12px;
-            margin-left: -4px;
-          }
-          input,
-          select {
-            background-color: $db-tertiary;
-            border-radius: 8px;
-            border-color: transparent;
-            color: $df-primary;
-            padding: 0 15px;
-            &:focus {
-              outline: 1px solid $da-primary;
-            }
-            ::placeholder {
-              color: $df-secondary;
-            }
-          }
-          .help-icon {
-            bottom: 12px;
-            top: auto;
-            svg {
-              fill: $df-secondary;
-            }
-          }
-          &.disabled {
-            input {
-              background-color: $db-primary;
-              border-color: $db-cuaternary;
-              color: $df-secondary;
-            }
-          }
-          .input-container {
-            background-color: $db-tertiary;
-            border-radius: 8px;
-            border-color: transparent;
-            margin-top: 22px;
-            .main-content {
-              label {
-                position: absolute;
-                top: -24px;
-              }
-              span {
-                color: $df-primary;
-              }
-            }
-            &:focus {
-              border: 1px solid $da-primary;
-            }
-          }
-          textarea {
-            border-radius: 8px;
-            padding: 12px 14px;
-            background-color: $db-tertiary;
-            color: $df-primary;
-            border: none;
-            &:focus {
-              outline: 1px solid $da-primary;
-            }
-          }
-        }
-      }
-      .field-title {
-        color: $df-primary;
-      }
-      .field-title:not(:first-child) {
-        margin-top: 64px;
-      }
 
-      .field-text {
-        color: $df-secondary;
-      }
-      button,
-      .btn-secondary {
-        width: 100%;
-        font-size: 11px;
-        text-transform: uppercase;
-        background-color: $db-tertiary;
-        color: $df-primary;
-        &:hover {
-          color: $da-primary;
-          background-color: $db-cuaternary;
-        }
-      }
-      hr {
-        display: none;
-      }
-    }
-    .links {
-      margin-top: 12px;
-    }
+  label {
+    font-family: "worksans", sans-serif;
+    color: $db-primary;
+    font-size: $fs-12;
+    margin-right: calc(-1 * $s-16);
+    margin-bottom: $s-12;
+  }
+
+  .info {
+    color: $df-secondary;
+    font-size: $fs-12;
+    margin-bottom: $s-8;
+  }
+
+  .input-checkbox label {
+    align-items: flex-start;
   }
 }
+
+.btn-secondary {
+  @extend .button-secondary;
+  height: $s-32;
+}
+
+.btn-primary {
+  @extend .button-primary;
+  height: $s-32;
+}
diff --git a/frontend/src/app/main/ui/settings/sidebar.cljs b/frontend/src/app/main/ui/settings/sidebar.cljs
index 4edbc733f..cb13feab0 100644
--- a/frontend/src/app/main/ui/settings/sidebar.cljs
+++ b/frontend/src/app/main/ui/settings/sidebar.cljs
@@ -82,31 +82,26 @@
         [:ul {:class (stl/css :sidebar-nav :no-overflow)}
          [:li {:class (when profile? (stl/css :current))
                :on-click go-settings-profile}
-          i/user
           [:span {:class (stl/css :element-title)} (tr "labels.profile")]]
 
          [:li {:class (when password? (stl/css :current))
                :on-click go-settings-password}
-          i/lock
           [:span {:class (stl/css :element-title)} (tr "labels.password")]]
 
          [:li {:class (when options? (stl/css :current))
                :on-click go-settings-options
                :data-test "settings-profile"}
-          i/tree
           [:span {:class (stl/css :element-title)} (tr "labels.settings")]]
 
          (when (contains? cf/flags :access-tokens)
            [:li {:class (when access-tokens? (stl/css :current))
                  :on-click go-settings-access-tokens
                  :data-test "settings-access-tokens"}
-            i/icon-key
             [:span {:class (stl/css :element-title)} (tr "labels.access-tokens")]])
 
          [:hr]
 
          [:li {:on-click show-release-notes :data-test "release-notes"}
-          i/pencil
           [:span {:class (stl/css :element-title)} (tr "labels.release-notes")]]
 
          (when (contains? cf/flags :user-feedback)
diff --git a/frontend/src/app/main/ui/settings/sidebar.scss b/frontend/src/app/main/ui/settings/sidebar.scss
index bc77f93fb..263ff24af 100644
--- a/frontend/src/app/main/ui/settings/sidebar.scss
+++ b/frontend/src/app/main/ui/settings/sidebar.scss
@@ -1,33 +1,22 @@
-@import "common/dependencies/colors";
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
 
-$fs14: 0.875rem;
-$fs24: 1.5rem;
-$lh-500: 5;
-$fs12: 0.75rem;
-$fs16: 1rem;
-$fw400: 400;
-$size-2: 0.5rem;
-$size-3: 0.75rem;
-$size-4: 1rem;
-$size-6: 2rem;
-$br3: 3px;
-$br4: 4px;
-$br5: 5px;
-$fw700: 700;
+@use "common/refactor/common-refactor.scss" as *;
 
 .dashboard-sidebar {
-  grid-row: 1 / span 2;
-  grid-column: 1 / span 2;
-
   background-color: $db-primary;
-  border-right: 1px solid $db-cuaternary;
-  margin: 0 1rem 0 0;
-  padding: 1rem 0 0 0;
-
-  z-index: 1;
+  border-right: $s-1 solid $db-cuaternary;
   display: flex;
   flex-direction: column;
+  grid-column: 1 / span 2;
+  grid-row: 1 / span 2;
   height: 100%;
+  margin: 0 $s-16 0 0;
+  padding: $s-16 0 0 0;
+  z-index: 1;
 }
 
 .sidebar-content {
@@ -39,884 +28,132 @@ $fw700: 700;
 
   hr {
     border-color: transparent;
-    margin: 0.8rem 15px;
-  }
-
-  .back-to-dashboard {
-    .icon svg {
-      fill: $df-secondary;
-    }
-    .text {
-      color: $df-primary;
-    }
+    margin: $s-12 $s-16;
   }
 }
 
-.dashboard-sidebar {
-  background-color: $color-white;
-  z-index: 1;
+.sidebar-nav {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  padding-top: $size-2;
+  margin: 0;
+  overflow-y: auto;
+  user-select: none;
 
-  .sidebar-content {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow-y: auto;
-    padding: 0;
-
-    //hr {
-    //  border-color: $color-gray-10;
-    //  margin: 1rem 15px;
-    //}
+  &.no-overflow {
+    overflow: unset;
   }
 
-  .sidebar-team-switch {
-    position: relative;
-    display: flex;
-    margin: 5px 15px;
-
-    .teams-dropdown {
-      left: 0;
-      top: 50px;
-      z-index: 12;
-      max-height: 30rem;
-      min-width: 234px;
-      overflow-y: auto;
-    }
-
-    .options-dropdown {
-      right: 2px;
-      top: 50px;
-      z-index: 12;
-      max-height: 30rem;
-      min-width: 162px;
-    }
-
-    .switch-content {
-      height: 40px;
-      display: flex;
-      width: 100%;
-      border: 1px solid $color-gray-10;
-      border-radius: $br5;
-      align-items: center;
-    }
-
-    .switch-options {
-      display: flex;
-      max-width: 22px;
-      min-width: 28px;
-      border-left: 1px solid $color-gray-10;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      background-color: transparent;
-      border: none;
-      svg {
-        width: 15px;
-        height: 13px;
-        fill: $color-gray-60;
-      }
-    }
-
-    .current-team {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      flex-grow: 1;
-      font-size: $fs14;
-      padding: 0px 10px;
-      background-color: transparent;
-      border: none;
-    }
-
-    .team-name {
-      flex-grow: 1;
-      display: flex;
-      height: 40px;
-      align-items: center;
-
-      &.action {
-        .team-icon {
-          border-radius: 50%;
-          background-color: $color-gray-10;
-          height: 24px;
-          margin-right: 10px;
-          padding: 6px;
-          width: 24px;
-
-          svg {
-            height: 12px;
-            width: 12px;
-          }
-        }
-
-        &:hover {
-          .team-icon {
-            background-color: $color-primary;
-          }
-        }
-
-        .team-text {
-          width: 150px;
-        }
-      }
-
-      .team-icon {
-        display: flex;
-        align-items: center;
-        padding-right: 10px;
-
-        svg {
-          width: 23px;
-          height: 23px;
-          fill: $color-gray-60;
-        }
-
-        img {
-          border-radius: 50%;
-          flex-shrink: 0;
-          height: 23px;
-          width: 23px;
-        }
-      }
-
-      .team-text {
-        color: $color-gray-60;
-        // @include text-ellipsis;
-        width: 130px;
-        text-align: left;
-      }
-
-      .icon {
-        margin-left: auto;
-        svg {
-          fill: $color-gray-60;
-        }
-      }
-    }
-
-    .switch-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      svg {
-        width: 10px;
-        height: 10px;
-        fill: $color-gray-60;
-      }
-    }
-  }
-
-  .sidebar-empty-placeholder {
-    padding: 10px 12px;
-    color: $color-gray-30;
-    display: flex;
-    align-items: flex-start;
-
-    .icon {
-      padding: 0px 10px;
-      svg {
-        fill: $color-gray-30;
-        width: 12px;
-        height: 12px;
-      }
-    }
-    .text {
-      font-size: $fs12;
-    }
-  }
-
-  .sidebar-nav {
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    margin: 0;
-    user-select: none;
-
-    // TODO: should be deprecated / unclear name
-    &.dashboard-common {
-      overflow: unset;
-    }
-
-    &.no-overflow {
-      overflow: unset;
-    }
-
-    & > li {
-      align-items: center;
-      cursor: pointer;
-      display: flex;
-      flex-shrink: 0;
-      padding: $size-2;
-      a {
-        font-weight: $fw400;
-        width: 100%;
-        &:hover {
-          text-decoration: none;
-        }
-      }
-
-      svg {
-        fill: $color-black;
-        margin-right: 8px;
-        height: $size-3;
-        width: $size-3;
-      }
-
-      span.element-title {
-        color: $color-gray-60;
-        font-size: $fs14;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      &::before {
-        background-color: transparent;
-        border-radius: $br3;
-        content: "";
-        height: 26px;
-        margin-right: $size-2;
-        width: 4px;
-      }
-
-      &.recent-projects {
-        svg {
-          fill: $color-white;
-        }
-      }
-
-      & .edit-wrapper {
-        border: 1px solid $color-gray-10;
-        border-radius: $br3;
-        display: flex;
-        width: 100%;
-      }
-
-      input.element-title {
-        border: 0;
-        height: 30px;
-        padding: 5px;
-        margin: 0;
-        width: 100%;
-        background-color: $color-white;
-      }
-
-      .close {
-        background-color: $color-white;
-        cursor: pointer;
-        padding-left: 5px;
-
-        svg {
-          fill: $color-gray-30;
-          height: 15px;
-          transform: rotate(45deg) translateY(7px);
-          width: 15px;
-          margin: 0;
-        }
-      }
-
-      .element-subtitle {
-        color: $color-gray-20;
-        font-style: italic;
-      }
-
-      &:hover {
-        &::before {
-          background-color: $color-gray-10;
-        }
-      }
-
-      &.current {
-        a {
-          font-weight: $fw700;
-        }
-
-        &::before {
-          background-color: $color-primary;
-        }
-      }
-
-      &.dragging {
-        //background-color: color.adjust($color-primary, $alpha: -0.69);
-      }
-    }
-  }
-
-  .sidebar-search {
+  li {
     align-items: center;
-    background-color: $color-white;
-    border: 1px solid $color-gray-10;
-    border-radius: $br5;
-    display: flex;
-    margin: 5px 15px;
-
-    .input-text {
-      background: transparent;
-      border: 0;
-      color: $color-gray-60;
-      font-size: $fs14;
-      padding: 6px;
-      margin: 0;
-      max-width: 195px;
-      width: 100%;
-      height: 40px;
-    }
-
-    &:focus,
-    &:focus-within {
-      border-color: $color-black;
-    }
-
-    .search,
-    .clear-search {
-      align-items: center;
-      cursor: pointer;
-      display: flex;
-      height: 22px;
-      margin-left: auto;
-      padding: 0 $size-2;
-      width: 32px;
-
-      svg {
-        fill: $color-gray-30;
-        height: 15px;
-        width: 15px;
-      }
-    }
-
-    .clear-search svg {
-      transform: rotate(45deg);
-
-      &:hover {
-        fill: $color-danger;
-      }
-    }
-  }
-
-  &.profile-bar {
-    background-color: $color-gray-10;
-
-    .dashboard-sidebar-inside {
-      display: none;
-    }
-  }
-}
-
-.dashboard-sidebar {
-  &.settings {
-    .back-to-dashboard {
-      padding: 12px 18px;
-      font-size: $fs14;
-      cursor: pointer;
-      display: flex;
-
-      .icon {
-        display: flex;
-        align-items: center;
-        margin-right: 14px;
-      }
-
-      .text {
-        color: $color-gray-60;
-      }
-
-      svg {
-        fill: $color-gray-60;
-        transform: rotate(90deg);
-        width: 12px;
-        height: 12px;
-      }
-    }
-  }
-}
-
-.dashboard-settings {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-
-  .form-container {
-    margin-top: 50px;
-    display: flex;
-    max-width: 368px;
-    margin-bottom: 2rem;
-    width: 100%;
-
-    &.two-columns {
-      max-width: 536px;
-      justify-content: space-between;
-      flex-direction: row;
-    }
-
-    h2 {
-      margin-bottom: 1rem;
-    }
-  }
-
-  .avatar-form {
-    display: flex;
-    flex-direction: column;
-    width: 120px;
-    min-width: 120px;
-
-    img {
-      border-radius: 50%;
-      flex-shrink: 0;
-      height: 120px;
-      margin-right: $size-4;
-      width: 120px;
-    }
-
-    .image-change-field {
-      position: relative;
-      width: 120px;
-      height: 120px;
-
-      .update-overlay {
-        opacity: 0;
-        cursor: pointer;
-        position: absolute;
-        width: 121px;
-        height: 121px;
-        border-radius: 50%;
-        font-size: $fs24;
-        color: $color-white;
-        line-height: $lh-500; // Original value was 120px; 120px/24px = 500% => $lh-500
-        text-align: center;
-        background: $color-primary-dark;
-        z-index: 14;
-      }
-
-      input[type="file"] {
-        width: 120px;
-        height: 120px;
-        position: absolute;
-        opacity: 0;
-        cursor: pointer;
-        top: 0;
-        z-index: 15;
-      }
-
-      &:hover {
-        .update-overlay {
-          opacity: 0.8;
-        }
-      }
-    }
-  }
-
-  .profile-form {
-    display: flex;
-    flex-direction: column;
-    max-width: 368px;
-    width: 100%;
-
-    .newsletter-subs {
-      border-bottom: 1px solid $color-gray-20;
-      border-top: 1px solid $color-gray-20;
-      padding: 30px 0;
-      margin-bottom: 31px;
-
-      .newsletter-title {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-30;
-        font-size: $fs14;
-      }
-
-      label {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-60;
-        font-size: $fs12;
-        margin-right: -17px;
-        margin-bottom: 13px;
-      }
-
-      .info {
-        font-family: "worksans", sans-serif;
-        color: $color-gray-30;
-        font-size: $fs12;
-        margin-bottom: 8px;
-      }
-
-      .input-checkbox label {
-        align-items: flex-start;
-      }
-    }
-  }
-
-  .options-form,
-  .password-form {
-    h2 {
-      font-size: $fs14;
-      margin-bottom: 20px;
-    }
-  }
-}
-
-.dashboard-access-tokens {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .access-tokens-hero-container {
-    max-width: 1000px;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .access-tokens-hero {
-    font-size: $fs14;
-    padding: $size-6;
-    background-color: $color-white;
-    margin-top: $size-6;
-    display: flex;
-    justify-content: space-between;
-
-    .desc {
-      width: 80%;
-      color: $color-gray-40;
-      h2 {
-        margin-bottom: $size-4;
-        color: $color-black;
-      }
-      p {
-        font-size: $fs16;
-      }
-    }
-
-    .btn-primary {
-      flex-shrink: 0;
-    }
-  }
-
-  .access-tokens-empty {
-    text-align: center;
-    max-width: 1000px;
-    width: 100%;
-    padding: $size-6;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border: 1px dashed $color-gray-20;
-    color: $color-gray-40;
-    margin-top: 12px;
-    min-height: 136px;
-  }
-
-  .table-row {
-    background-color: $color-white;
-    display: grid;
-    grid-template-columns: 1fr 43% 12px;
-    height: 63px;
-    &:not(:first-child) {
-      margin-top: 8px;
-    }
-  }
-
-  .table-field {
-    &.name {
-      color: $color-gray-60;
-    }
-
-    &.expiration-date {
-      color: $color-gray-40;
-      font-size: $fs14;
-      .content {
-        padding: 2px 5px;
-        &.expired {
-          background-color: $color-warning-lighter;
-          border-radius: $br4;
-          color: $color-gray-40;
-        }
-      }
-    }
-
-    &.access-token-created {
-      word-break: break-all;
-    }
-
-    &.actions {
-      position: relative;
-    }
-  }
-}
-
-.access-tokens-modal {
-  .action-buttons {
-    gap: 10px;
-
-    .cancel-button {
-      border: 1px solid $color-gray-30;
-      background: $color-canvas;
-      border-radius: $br3;
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-      margin-right: 8px;
-
-      &:hover {
-        background: $color-gray-20;
-      }
-    }
-  }
-  .access-token-created {
-    position: relative;
-    word-break: break-all;
-
-    .custom-input input {
-      background-color: $color-success-lighter;
-      border: 0;
-      padding: 0 0 0 15px;
-    }
-  }
-
-  .help-icon {
-    border: none;
-    height: 40px;
-    width: 40px;
-    position: absolute;
-    top: 0;
-    right: 0;
     cursor: pointer;
-    background-color: $color-success-lighter;
+    display: flex;
+    flex-shrink: 0;
+    padding: $s-8 $s-8 $s-8 $s-24;
+
+    a {
+      font-weight: $fw400;
+      width: 100%;
+      &:hover {
+        text-decoration: none;
+      }
+    }
 
     svg {
-      fill: $color-gray-30;
+      fill: $db-secondary;
+      margin-right: $s-8;
+      height: $s-12;
+      width: $s-12;
+    }
+
+    span {
+      color: $df-secondary;
+      font-size: $fs-14;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &::before {
+      display: none;
+      background-color: transparent;
+      border-radius: $br-4;
+      content: "";
+      height: $s-24;
+      margin-right: $s-8;
+      width: $s-4;
+    }
+
+    &.recent-projects {
+      svg {
+        fill: $df-primary;
+      }
+    }
+
+    & .edit-wrapper {
+      border: $s-1 solid $df-primary;
+      border-radius: $br-4;
+      display: flex;
+      width: 100%;
+    }
+
+    input.element-title {
+      border: 0;
+      height: $s-32;
+      padding: $s-6;
+      margin: 0;
+      width: 100%;
+      background-color: $df-primary;
+    }
+
+    .element-subtitle {
+      color: $df-secondary;
+      font-style: italic;
     }
 
     &:hover {
-      svg {
-        fill: $color-gray-60;
-      }
-    }
-  }
-
-  .token-created-info {
-    font-size: $fs12;
-    color: $color-gray-40;
-  }
-}
-
-.dashboard-sidebar {
-  background-color: $db-primary;
-  border-right: 1px solid $db-cuaternary;
-  grid-row: 1 / span 2;
-  grid-column: 1 / span 2;
-  margin: 0 1rem 0 0;
-  padding: 1rem 0 0 0;
-
-  .dropdown {
-    background-color: $db-tertiary;
-    border: 1px solid $db-cuaternary;
-    border-radius: 8px;
-    min-width: 252px;
-
-    .separator {
-      border-color: transparent;
-      margin-top: 10px;
-    }
-
-    li {
-      border-radius: 8px;
-      height: 40px;
-      margin: 5px;
-
-      &:hover {
-        background-color: $db-cuaternary;
+      background-color: $db-cuaternary;
+      &::before {
+        background-color: $df-primary;
       }
     }
 
-    &.options-dropdown {
-      li {
-        color: $df-primary;
-        &.warning {
-          color: $color-danger;
-        }
+    &.current {
+      background-color: $db-cuaternary;
+      a {
+        font-weight: $fw400;
+        color: $da-primary;
       }
-    }
-  }
-
-  .sidebar-content {
-    .back-to-dashboard {
-      .icon {
-        svg {
-          fill: $df-secondary;
-        }
-      }
-      .text {
-        color: $df-primary;
-      }
-    }
-    .sidebar-team-switch {
-      .switch-content {
-        background-color: $db-tertiary;
-        border-radius: 8px;
-        border-color: transparent;
-        height: 48px;
-
-        .current-team {
-          border-right: 1px solid $db-primary;
-          height: 100%;
-        }
-
-        svg {
-          fill: $df-secondary;
-        }
-
-        .team-name {
-          .team-text {
-            color: $df-primary;
-            width: 145px;
-          }
-        }
-      }
-    }
-
-    .teams-dropdown {
-      background-color: $db-tertiary;
-      border-radius: 8px;
-      border: 1px solid $db-cuaternary;
-      min-width: 248px;
-
-      li {
-        border-radius: 8px;
-        height: 42px;
-        padding: 0 5px;
-        margin: 5px;
-
-        .team-text {
-          color: $df-primary;
-          width: 165px;
-        }
-        svg {
-          fill: $df-secondary;
-        }
-
-        &:hover {
-          background-color: $db-cuaternary;
-          .team-icon {
-            &.new-team {
-              background-color: $da-primary;
-              svg {
-                fill: $db-secondary;
-              }
-            }
-          }
-        }
-
-        .team-icon {
-          &.new-team {
-            background-color: $db-cuaternary;
-          }
-        }
-      }
-    }
-
-    .sidebar-search {
-      background-color: $db-tertiary;
-      border-color: transparent;
-      border-radius: 8px;
-      margin-bottom: 2rem;
-      margin-top: 0;
-      position: relative;
-
-      .input-text {
-        border-radius: 8px;
-        color: $df-primary;
-        max-width: 100%;
-        padding: 6px 10px;
-
-        &:focus {
-          border: 1px solid $da-primary;
-        }
-      }
-      ::placeholder {
-        color: $df-secondary;
+      span {
+        color: $da-primary;
       }
 
-      .search {
-        position: absolute;
-        top: 10px;
-        right: 2px;
-      }
-    }
-
-    .sidebar-nav {
-      li {
-        padding: 0.6rem 0.6rem 0.6rem 1.4rem;
-        &.current {
-          background-color: $db-cuaternary;
-          a {
-            font-weight: 400;
-            span {
-              color: $da-primary;
-            }
-          }
-          span {
-            color: $da-primary;
-          }
-        }
-        &:hover {
-          background-color: $db-cuaternary;
-        }
-        span {
-          color: $df-secondary;
-        }
-        &::before {
-          display: none;
-        }
-
-        svg {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .sidebar-empty-placeholder {
-    color: $df-secondary;
-  }
-
-  // Profile sidebar
-  .profile-section {
-    background-color: $db-tertiary;
-    border-top: 1px solid $db-cuaternary;
-
-    span {
-      color: $df-primary;
-    }
-
-    .dashboard-comments-section {
-      border-color: transparent;
-      border-radius: 8px;
-      background-color: $db-primary;
-      height: 32px;
-      width: 32px;
-
-      .button {
-        border-radius: 8px;
-        background-color: $db-primary;
-        height: 32px;
-        width: 32px;
-
-        svg {
-          fill: $df-secondary;
-        }
-
-        &:hover {
-          background-color: $db-cuaternary;
-
-          svg {
-            fill: $da-primary;
-          }
-        }
+      &::before {
+        background-color: $da-tertiary;
       }
     }
   }
 }
+
+.back-to-dashboard {
+  padding: $s-12 $s-16;
+  font-size: $fs-14;
+  cursor: pointer;
+  display: flex;
+
+  .icon {
+    display: flex;
+    align-items: center;
+    margin-right: $s-12;
+  }
+
+  .text {
+    color: $df-primary;
+  }
+
+  svg {
+    fill: $df-secondary;
+    transform: rotate(90deg);
+    width: $s-12;
+    height: $s-12;
+  }
+}