diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index 25d70b6f6..5b79ec81d 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -408,6 +408,8 @@
   border-radius: $br-4;
   box-shadow: inset 0 0 0px 2px rgb(255 255 255 / 20%);
   svg {
+    width: $s-16;
+    height: $s-16;
     display: none;
     stroke: var(--input-checkbox-inactive-foreground-color);
   }
diff --git a/frontend/resources/styles/main-default.scss b/frontend/resources/styles/main-default.scss
index 8690f68d5..f3fd5e5bc 100644
--- a/frontend/resources/styles/main-default.scss
+++ b/frontend/resources/styles/main-default.scss
@@ -53,9 +53,6 @@
 // Partials
 //#################################################
 
-@import "main/partials/viewer";
-@import "main/partials/viewer-header";
-@import "main/partials/viewer-thumbnails";
 @import "main/partials/activity-bar";
 @import "main/partials/debug-icons-preview";
 @import "main/partials/editable-label";
@@ -67,6 +64,5 @@
 @import "main/partials/user-settings";
 @import "main/partials/workspace";
 @import "main/partials/color-bullet";
-@import "main/partials/inspect";
 @import "main/partials/exception-page";
 @import "main/partials/signup-questions";
diff --git a/frontend/resources/styles/main/partials/inspect.scss b/frontend/resources/styles/main/partials/inspect.scss
deleted file mode 100644
index bc83f6c05..000000000
--- a/frontend/resources/styles/main/partials/inspect.scss
+++ /dev/null
@@ -1,487 +0,0 @@
-// 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
-
-.inspect-svg-wrapper {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.expand-button,
-.copy-button {
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 0.3s;
-  position: absolute;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-
-  .code-block & {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  svg {
-    width: 16px;
-    height: 16px;
-    fill: $color-gray-20;
-    transition: fill 0.3s;
-
-    &:hover {
-      fill: $color-primary;
-    }
-  }
-}
-
-.expand-button {
-  right: 24px;
-  top: -1px;
-
-  svg {
-    transform: rotate(45deg);
-  }
-}
-.copy-button {
-  right: 0;
-  top: 0;
-}
-
-.attributes-block {
-  user-select: text;
-
-  border-bottom: 1px solid $color-gray-60;
-  padding-bottom: 0.5rem;
-  font-size: $fs12;
-
-  .attributes-text-block {
-    border-bottom: 1px solid $color-gray-60;
-  }
-
-  & :last-child {
-    border-bottom: none;
-  }
-
-  .attributes-label {
-    color: $color-gray-20;
-  }
-
-  .attributes-value {
-    color: $color-white;
-  }
-
-  .attributes-block-title {
-    position: relative;
-    color: $color-gray-10;
-    padding: 0.5rem;
-    font-size: $fs14;
-
-    .copy-button {
-      padding: 0.5rem;
-      margin-top: 0.25rem;
-    }
-  }
-
-  .attributes-unit-row {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    padding: 0.6rem 1.6rem 0.6rem 0.5rem;
-
-    .attributes-label,
-    .attributes-value {
-      margin-right: 0.5rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      width: 50%;
-      .items {
-        margin-right: 5px;
-      }
-    }
-    .copy-button {
-      padding: 0.6rem 0.5rem;
-      margin-top: 0.25rem;
-    }
-  }
-
-  .attributes-color-row {
-    display: flex;
-    flex-direction: column;
-    padding: 1rem 0;
-    position: relative;
-
-    .attributes-color-id {
-      display: flex;
-      align-items: center;
-
-      & > * {
-        margin: 0 0.5rem;
-      }
-      margin-bottom: 0.5rem;
-    }
-
-    .attributes-color-value {
-      display: flex;
-      align-items: center;
-
-      & > * {
-        margin: 0 0.5rem;
-      }
-
-      & :last-child {
-        margin-right: 0;
-      }
-    }
-
-    .color-text {
-      width: 3rem;
-      text-transform: uppercase;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-
-    .attributes-color-display {
-      display: flex;
-    }
-
-    .color-bullet {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      border: 1px solid $color-gray-30;
-    }
-
-    .hide-color .color-bullet {
-      visibility: hidden;
-    }
-    .copy-button {
-      padding: 1rem 0.5rem;
-      margin-top: 0.25rem;
-    }
-
-    select {
-      font-size: $fs12;
-      margin: 0;
-      background: none;
-      color: $color-gray-20;
-      border: none;
-      border-bottom: 1px solid $color-gray-30;
-      padding: 0 1rem 0.25rem 0.25rem;
-      margin-top: 2px;
-      background-image: url("/images/icons/arrow-down-white.svg");
-      background-repeat: no-repeat;
-      background-position: 95% 48%;
-      background-size: 10px;
-      cursor: pointer;
-      outline: none;
-      &:focus,
-      &:focus-within {
-        border: 1px solid $color-primary;
-      }
-
-      option {
-        padding: 1rem;
-        background-color: $color-gray-50;
-        border: none;
-      }
-    }
-  }
-
-  .attributes-content-row {
-    position: relative;
-    margin: 0.5rem;
-    width: calc(100% - 1rem);
-
-    .attributes-content {
-      overflow-y: auto;
-      max-height: 5rem;
-      background: $color-gray-60;
-      border-radius: $br4;
-      padding: 1rem 0.5rem;
-      color: $color-gray-10;
-      white-space: pre-wrap;
-    }
-
-    .copy-button {
-      padding: 0.5rem;
-      margin-top: 0.25rem;
-    }
-  }
-
-  .attributes-image-row {
-    position: relative;
-    display: flex;
-    padding: 0.25rem;
-    align-items: center;
-    justify-content: center;
-    margin: 0.5rem;
-    background: $color-gray-60;
-    border-radius: $br4;
-
-    width: calc(100% - 1rem);
-    min-height: 5rem;
-
-    img {
-      max-height: 8rem;
-      max-width: 100%;
-      width: auto;
-    }
-  }
-
-  .attributes-shadow-row {
-    position: relative;
-    display: flex;
-    margin: 0.5rem;
-    padding-right: 2rem;
-    justify-content: space-between;
-
-    & > :first-child {
-      color: $color-gray-10;
-    }
-
-    .attributes-shadow {
-      display: flex;
-      margin-left: 4px;
-    }
-  }
-
-  .attributes-stroke-row {
-    position: relative;
-    display: flex;
-    margin: 0.5rem;
-    padding-right: 2rem;
-    justify-content: space-between;
-  }
-
-  .attributes-typography-name-row {
-    position: relative;
-    margin-top: 0.5rem;
-    border: 1px solid $color-black;
-    border-radius: $br4;
-    margin: 0.5rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .copy-button {
-      padding: 0.5rem;
-      margin-top: 0.25rem;
-    }
-  }
-
-  .attributes-typography-row {
-    position: relative;
-    margin: 0.5rem;
-    padding-right: 2rem;
-
-    .typography-sample {
-      font-size: $fs16;
-    }
-  }
-
-  .download-button {
-    display: block;
-    text-align: center;
-    border: 1px solid $color-gray-60;
-    background-color: $color-gray-60;
-    padding: 0.5rem 1rem;
-    color: $color-gray-10;
-    width: calc(100% - 1rem);
-    border-radius: $br4;
-    margin: 0.5rem;
-    cursor: pointer;
-    text-decoration: none;
-
-    &:hover {
-      background-color: $color-primary;
-      color: $color-black;
-    }
-  }
-
-  .attributes-block-title,
-  .attributes-unit-row,
-  .attributes-color-row,
-  .attributes-shadow-row,
-  .attributes-stroke-row,
-  .attributes-typography-row,
-  .attributes-content-row,
-  .attributes-typography-name-row {
-    &:hover {
-      .expand-button,
-      .copy-button {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-  }
-
-  .attributes-shadow-block,
-  .attributes-stroke-block,
-  .attributes-fill-block {
-    border-top: 1px solid $color-gray-60;
-  }
-
-  .attributes-shadow-blocks :first-child,
-  .attributes-stroke-blocks :first-child,
-  .attributes-fill-blocks :first-child {
-    border-top: none;
-  }
-}
-
-.code-block {
-  position: relative;
-  margin-top: 0.5rem;
-  border-top: 1px solid $color-gray-60;
-
-  &:last-child {
-    margin-bottom: 18px;
-  }
-
-  &:hover {
-    .code-row-lang {
-      .expand-button,
-      .copy-button {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-  }
-
-  .code-row-lang {
-    color: $color-gray-10;
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    font-size: $fs14;
-    margin: 0.5rem;
-
-    .expand-button,
-    .copy-button {
-      margin-top: 8px;
-    }
-
-    .custom-select {
-      border: 1px solid $color-gray-40;
-      border-radius: 3px;
-      cursor: pointer;
-      padding: 0.25rem 1.5rem 0.25rem 0.25rem;
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      .dropdown-button {
-        position: absolute;
-        right: 0.25rem;
-        top: 7px;
-
-        svg {
-          fill: $color-gray-40;
-          height: 10px;
-          width: 10px;
-        }
-      }
-    }
-
-    .custom-select-dropdown {
-      background-color: $color-white;
-      border-radius: 3px;
-      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-      left: 0;
-      max-height: 30rem;
-      min-width: 7rem;
-      position: absolute;
-      overflow-y: auto;
-      top: 30px;
-      z-index: 12;
-
-      li {
-        color: $color-gray-60;
-        cursor: pointer;
-        font-size: 0.875rem;
-        display: flex;
-        gap: 0 10px;
-        justify-content: flex-start;
-        padding: 0.5rem;
-
-        .checked-element {
-          padding-left: 0;
-        }
-      }
-
-      svg {
-        visibility: hidden;
-        width: 8px;
-        height: 8px;
-        background: none;
-        margin: 0.25rem;
-        fill: $color-black;
-      }
-
-      .is-selected svg {
-        visibility: visible;
-      }
-    }
-  }
-
-  .code-row-display {
-    line-height: 1;
-    margin: 0.5rem;
-    font-size: $fs14;
-    max-height: var(--code-height, 400px);
-    overflow: auto;
-
-    .code-display {
-      font-family: monospace;
-      border-radius: $br4;
-      padding: 0.5rem 1rem;
-      overflow: hidden;
-      white-space: pre;
-      min-width: fit-content;
-      background: $color-gray-60;
-      user-select: text;
-
-      .hljs-attr {
-        color: #a6e22e;
-      }
-      .hljs-comment {
-        color: $color-gray-30;
-      }
-      .hljs-string {
-        color: #66d9ef;
-      }
-    }
-  }
-  .resize-area {
-    width: 100%;
-    position: absolute;
-    bottom: -15px;
-    left: 0;
-    height: 18px;
-    z-index: 1;
-    cursor: ns-resize;
-  }
-}
-
-.element-options > :first-child {
-  border-top: none;
-}
-
-.inspect-annotation {
-  .content {
-    background-color: $color-gray-60;
-    color: $color-white;
-    margin: 0 10px;
-    padding: 10px;
-    font-size: $fs14;
-    overflow-wrap: anywhere;
-    white-space: pre-wrap;
-  }
-}
diff --git a/frontend/resources/styles/main/partials/viewer-header.scss b/frontend/resources/styles/main/partials/viewer-header.scss
deleted file mode 100644
index 550148aa5..000000000
--- a/frontend/resources/styles/main/partials/viewer-header.scss
+++ /dev/null
@@ -1,234 +0,0 @@
-.viewer-header {
-  align-items: center;
-  background-color: $color-gray-50;
-  border-bottom: 1px solid $color-gray-60;
-  display: grid;
-  grid-template-columns: 1fr 130px 1fr;
-  height: 48px;
-  padding: 0 $size-4 0 55px;
-  top: 0;
-  position: absolute;
-  justify-content: space-between;
-  width: 100vw;
-
-  a {
-    font-size: $fs12;
-  }
-
-  .nav-zone {
-    justify-content: flex-start;
-    width: 100%;
-  }
-
-  .main-icon {
-    align-items: center;
-    background-color: $color-gray-60;
-    cursor: pointer;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 48px;
-
-    a {
-      height: 30px;
-
-      svg {
-        fill: $color-gray-30;
-        height: 30px;
-        width: 28px;
-      }
-
-      &:hover {
-        svg {
-          fill: $color-primary;
-        }
-      }
-    }
-  }
-
-  .options-zone {
-    align-items: center;
-    display: flex;
-    justify-content: flex-end;
-    position: relative;
-    z-index: 10;
-
-    > * {
-      margin-left: $size-5;
-      @media only screen and (max-width: 1366px) {
-        margin-left: 0.5rem;
-      }
-    }
-
-    .btn-primary {
-      flex-shrink: 0;
-      svg {
-        display: none;
-      }
-      @media only screen and (max-width: 1366px) {
-        padding: 0 0.5rem;
-        svg {
-          display: inline-block;
-        }
-        span {
-          display: none;
-        }
-      }
-      &:hover {
-        svg {
-          fill: $color-gray-20;
-        }
-      }
-    }
-
-    .view-options {
-      align-items: center;
-      cursor: pointer;
-      display: flex;
-      position: relative;
-
-      > span {
-        color: $color-gray-10;
-        font-size: $fs14;
-        margin-right: $size-1;
-      }
-
-      > .icon {
-        align-items: center;
-        cursor: pointer;
-        display: flex;
-        justify-content: center;
-
-        svg {
-          fill: $color-gray-10;
-          height: 12px;
-          width: 12px;
-        }
-
-        &:hover {
-          > svg {
-            fill: $color-primary;
-          }
-        }
-      }
-
-      .dropdown {
-        min-width: 295px;
-        top: 45px;
-        left: -25px;
-      }
-    }
-  }
-
-  .sitemap-zone {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    padding: $size-1;
-    position: relative;
-    width: 100%;
-
-    .icon {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      svg {
-        fill: $color-gray-20;
-        height: 12px;
-        margin-right: $size-2;
-        width: 12px;
-      }
-    }
-
-    .breadcrumb {
-      display: grid;
-      grid-template-columns: auto 10px auto 10px auto;
-    }
-
-    .breadcrumb,
-    .current-frame {
-      position: relative;
-
-      > span {
-        color: $color-gray-20;
-        margin-right: $size-1;
-        font-size: $fs14;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      > .dropdown {
-        top: 45px;
-        right: 10px;
-      }
-    }
-
-    .current-frame {
-      display: grid;
-      grid-template-columns: 14px 1fr;
-      span {
-        color: $color-white;
-        margin-right: $size-1;
-      }
-
-      .counters {
-        color: $color-gray-20;
-      }
-    }
-  }
-
-  .mode-zone {
-    display: flex;
-    height: 100%;
-
-    .mode-zone-button {
-      background: inherit;
-      border: none;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      height: 100%;
-      width: 48px;
-
-      svg {
-        fill: $color-gray-20;
-        width: 20px;
-        height: 20px;
-      }
-
-      &.active {
-        background: $color-gray-60;
-        svg {
-          fill: $color-primary;
-        }
-      }
-    }
-  }
-
-  .users-zone {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    margin: 0;
-
-    li {
-      margin-left: $size-2;
-      position: relative;
-
-      img {
-        border: 3px solid #f3dd14;
-        border-radius: 50%;
-        flex-shrink: 0;
-        height: 25px;
-        width: 25px;
-      }
-    }
-  }
-}
diff --git a/frontend/resources/styles/main/partials/viewer-thumbnails.scss b/frontend/resources/styles/main/partials/viewer-thumbnails.scss
deleted file mode 100644
index 2ba7a859f..000000000
--- a/frontend/resources/styles/main/partials/viewer-thumbnails.scss
+++ /dev/null
@@ -1,192 +0,0 @@
-.viewer-thumbnails {
-  grid-row: 1 / span 1;
-  grid-column: 1 / span 1;
-
-  background-color: $color-gray-50;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  z-index: 11;
-
-  &.invisible {
-    visibility: hidden;
-    pointer-events: none;
-  }
-
-  &.expanded {
-    grid-row: 1 / span 2;
-
-    .btn-expand svg {
-      transform: rotate(180deg);
-    }
-  }
-
-  .thumbnails-summary {
-    padding: 0.5rem 1rem;
-    display: flex;
-    justify-content: space-between;
-
-    .buttons {
-      display: flex;
-      justify-content: space-between;
-      width: 50px;
-
-      span {
-        cursor: pointer;
-      }
-
-      svg {
-        fill: $color-gray-30;
-        height: 20px;
-        width: 20px;
-
-        &:hover {
-          fill: $color-white;
-        }
-      }
-
-      .btn-close {
-        transform: rotate(45deg);
-      }
-    }
-
-    .counter {
-      color: $color-gray-10;
-    }
-  }
-
-  .thumbnails-content {
-    display: grid;
-    grid-template-columns: 40px auto 40px;
-    grid-template-rows: auto;
-  }
-
-  .left-scroll-handler {
-    grid-column: 1 / span 1;
-    grid-row: 1 / span 1;
-
-    background-color: $color-gray-50;
-    opacity: 0;
-    display: flex;
-    z-index: 12;
-    cursor: pointer;
-
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    &:hover {
-      opacity: 0.5;
-    }
-
-    svg {
-      transform: rotate(180deg);
-      width: 30px;
-      height: 30px;
-    }
-  }
-
-  .right-scroll-handler {
-    grid-column: 3 / span 1;
-    grid-row: 1 / span 1;
-
-    background-color: $color-gray-50;
-    opacity: 0;
-    display: flex;
-    z-index: 12;
-    cursor: pointer;
-
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    &:hover {
-      opacity: 0.5;
-    }
-
-    svg {
-      width: 30px;
-      height: 30px;
-    }
-  }
-
-  .thumbnails-list {
-    grid-column: 1 / span 3;
-    grid-row: 1 / span 1;
-
-    display: flex;
-    flex-wrap: nowrap;
-    overflow: hidden;
-
-    .thumbnails-list-inside {
-      display: flex;
-      position: relative;
-    }
-  }
-
-  .thumbnails-list-expanded {
-    grid-column: 1 / span 3;
-    grid-row: 1 / span 1;
-
-    display: flex;
-    flex-wrap: wrap;
-    overflow: hidden;
-  }
-
-  .thumbnail-item {
-    display: flex;
-    flex-direction: column;
-    padding: 1rem;
-    cursor: pointer;
-  }
-
-  .thumbnail-preview {
-    background-color: $color-gray-40;
-    width: 120px;
-    min-height: 120px;
-    height: 120px;
-    border: 1px solid $color-gray-20;
-    border-radius: $br2;
-    padding: 4px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-
-    &.selected {
-      border-color: $color-primary;
-    }
-
-    &:hover {
-      border-color: $color-primary;
-      outline: 2px solid $color-primary;
-    }
-  }
-
-  .thumbnail-info {
-    padding: 0.5rem 0;
-    width: 120px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    span {
-      font-size: $fs12;
-    }
-  }
-}
-
-.thumbnail-close {
-  grid-row: 1 / span 2;
-  grid-column: 1 / span 1;
-  z-index: 11;
-
-  &.invisible {
-    display: none;
-  }
-}
diff --git a/frontend/resources/styles/main/partials/viewer.scss b/frontend/resources/styles/main/partials/viewer.scss
deleted file mode 100644
index 3a52326a7..000000000
--- a/frontend/resources/styles/main/partials/viewer.scss
+++ /dev/null
@@ -1,214 +0,0 @@
-.viewer-content {
-  background-color: black;
-  display: grid;
-  grid-template-rows: 232px auto;
-  grid-template-columns: 1fr;
-}
-.fullscreen.viewer-layout {
-  .viewer-section {
-    & .viewer-go-prev,
-    & .viewer-go-next {
-      .arrow {
-        display: none;
-      }
-    }
-  }
-}
-.fullscreen.viewer-layout.force-visible {
-  .viewer-section {
-    & .viewer-go-prev,
-    & .viewer-go-next {
-      .arrow {
-        display: flex;
-      }
-    }
-  }
-}
-
-.viewer-loader {
-  svg#loader-pencil {
-    fill: $color-gray-50;
-  }
-}
-
-.viewer-section {
-  height: calc(100vh - 48px);
-  grid-row: 1 / span 2;
-  grid-column: 1 / span 1;
-  display: flex;
-  align-items: center;
-  flex-flow: wrap;
-  overflow: auto;
-
-  &.fullscreen {
-    height: 100vh;
-    margin-top: 0px;
-  }
-
-  & .viewer-go-prev,
-  & .viewer-go-next {
-    position: absolute;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    width: 53px;
-    z-index: 2;
-    .arrow {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: $br12;
-      background: $color-gray-50;
-      width: 24px;
-      height: 24px;
-      cursor: pointer;
-      fill: $color-gray-30;
-
-      svg {
-        width: 12px;
-        height: 12px;
-      }
-
-      &:hover {
-        background: $color-primary;
-        fill: $color-black;
-      }
-    }
-  }
-
-  & .viewer-go-next {
-    right: 8px;
-    width: 46px;
-    svg {
-      margin-left: 2px;
-    }
-  }
-
-  & .viewer-go-next.right-bar {
-    right: 0;
-  }
-
-  & .viewer-go-prev {
-    left: 0;
-    padding-left: 29px;
-    svg {
-      margin-right: 2px;
-    }
-  }
-
-  & .viewer-go-prev.left-bar {
-    left: 0;
-  }
-
-  & .viewer-bottom {
-    position: absolute;
-    bottom: 8px;
-    height: 30px;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    z-index: 2;
-
-    &.left-bar {
-      width: 100%;
-    }
-
-    .reset {
-      display: flex;
-      align-items: center;
-      border-radius: $br12;
-      background: $color-gray-50;
-      width: 24px;
-      height: 24px;
-      cursor: pointer;
-      fill: $color-gray-30;
-      margin-left: 29px;
-
-      svg {
-        margin-left: 4px;
-        width: 15px;
-        height: 15px;
-      }
-
-      &:hover {
-        background: $color-primary;
-        fill: $color-black;
-      }
-    }
-
-    .counter {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: $br12;
-      background: $color-gray-50;
-      width: 67px;
-      height: 25px;
-      fill: $color-gray-20;
-    }
-  }
-
-  & .viewer-wrapper {
-    margin-left: auto;
-    margin-right: auto;
-    position: relative;
-  }
-
-  & .viewer-clipper {
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-template-columns: 1fr;
-    justify-items: center;
-    align-items: center;
-    overflow: hidden;
-
-    svg {
-      transform-origin: center;
-    }
-  }
-
-  & .viewer-wrapper-out {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  & .comments-right-sidebar {
-    position: absolute;
-    right: 0;
-    top: 50px;
-    width: 256px;
-    height: calc(100vh - 48px);
-    z-index: 9;
-  }
-
-  .empty-state {
-    width: 100vw;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
-.viewport-container {
-  clip-path: inset(0 0 0 0);
-  grid-column: 1 / 1;
-  grid-row: 1 / 1;
-
-  .not-fixed {
-    position: absolute;
-  }
-
-  .fixed {
-    position: fixed;
-    pointer-events: none;
-
-    .frame-children g {
-      pointer-events: auto;
-    }
-  }
-}
diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs
index b7e730766..2f86b0bce 100644
--- a/frontend/src/app/main/ui/viewer.cljs
+++ b/frontend/src/app/main/ui/viewer.cljs
@@ -92,45 +92,29 @@
 
 (mf/defc viewer-pagination
   [{:keys [index num-frames left-bar right-bar comment-sidebar] :as props}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        go-prev-frame  (mf/use-fn #(st/emit! dv/select-prev-frame))
+  (let [go-prev-frame  (mf/use-fn #(st/emit! dv/select-prev-frame))
         go-next-frame  (mf/use-fn #(st/emit! dv/select-next-frame))
         go-first-frame (mf/use-fn #(st/emit! dv/select-first-frame))]
-    (if new-css-system
-      [:*
-       (when (pos? index)
-         [:button {:class (stl/css-case :viewer-go-prev true
-                                        :left-bar left-bar)
-                   :on-click go-prev-frame}
-          i/arrow-refactor])
-       (when (< (+ index 1) num-frames)
-         [:button {:class (stl/css-case :viewer-go-next  true
-                                        :comment-sidebar comment-sidebar
-                                        :right-bar right-bar)
-                   :on-click go-next-frame}
-          i/arrow-refactor])
-       [:div {:class (stl/css-case :viewer-bottom true
-                                   :left-bar left-bar)}
-        [:button {:on-click go-first-frame
-                  :class (stl/css :reset-button)}
-         i/reload-refactor]
-        [:span {:class (stl/css :counter)}
-         (str/join " / " [(+ index 1) num-frames])]
-        [:span]]]
-
-
-      ;; OLD
-      [:*
-       (when (pos? index)
-         [:div.viewer-go-prev {:class (when left-bar "left-bar")}
-          [:div.arrow {:on-click go-prev-frame} i/go-prev]])
-       (when (< (+ index 1) num-frames)
-         [:div.viewer-go-next {:class (when right-bar "right-bar")}
-          [:div.arrow {:on-click go-next-frame} i/go-next]])
-       [:div.viewer-bottom {:class (when left-bar "left-bar")}
-        [:div.reset {:on-click go-first-frame} i/reset]
-        [:div.counter (str/join " / " [(+ index 1) num-frames])]
-        [:span]]])))
+    [:*
+     (when (pos? index)
+       [:button {:class (stl/css-case :viewer-go-prev true
+                                      :left-bar left-bar)
+                 :on-click go-prev-frame}
+        i/arrow-refactor])
+     (when (< (+ index 1) num-frames)
+       [:button {:class (stl/css-case :viewer-go-next  true
+                                      :comment-sidebar comment-sidebar
+                                      :right-bar right-bar)
+                 :on-click go-next-frame}
+        i/arrow-refactor])
+     [:div {:class (stl/css-case :viewer-bottom true
+                                 :left-bar left-bar)}
+      [:button {:on-click go-first-frame
+                :class (stl/css :reset-button)}
+       i/reload-refactor]
+      [:span {:class (stl/css :counter)}
+       (str/join " / " [(+ index 1) num-frames])]
+      [:span]]]))
 
 (mf/defc viewer-pagination-and-sidebar
   {::mf/wrap [mf/memo]}
@@ -175,21 +159,21 @@
 
     [:*
      (when (or close-click-outside? background-overlay?)
-       [:div.viewer-overlay-background
-        {:class (dom/classnames :visible background-overlay?)
-         :style {:width (:width wrapper-size)
-                 :height (:height wrapper-size)
-                 :position "absolute"
-                 :left 0
-                 :top 0}
-         :on-click on-click}])
+       [:div {:class (stl/css-case  :viewer-overlay-background true
+                                    :visible background-overlay?)
+              :style {:width (:width wrapper-size)
+                      :height (:height wrapper-size)
+                      :position "absolute"
+                      :left 0
+                      :top 0}
+              :on-click on-click}])
 
-     [:div.viewport-container.viewer-overlay
-      {:id (dm/str "overlay-" (:id overlay-frame))
-       :style {:width (:width size)
-               :height (:height size)
-               :left (* (:x overlay-position) zoom)
-               :top (* (:y overlay-position) zoom)}}
+     [:div {:class (stl/css :viewer-overlay :viewport-container)
+            :id (dm/str "overlay-" (:id overlay-frame))
+            :style {:width (:width size)
+                    :height (:height size)
+                    :left (* (:x overlay-position) zoom)
+                    :top (* (:y overlay-position) zoom)}}
 
       [:& interactions/viewport
        {:frame overlay-frame
@@ -205,141 +189,72 @@
   [{:keys [wrapper-size orig-frame orig-viewport-ref orig-size page file users current-viewport-ref
            size frame interactions-mode overlays zoom section index]}]
 
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)]
-    (if new-css-system
-      [:*
-       [:& viewer-pagination-and-sidebar
-        {:section section
-         :index index
-         :page page
-         :users users
-         :frame frame
-         :interactions-mode interactions-mode}]
+  [:*
+   [:& viewer-pagination-and-sidebar
+    {:section section
+     :index index
+     :page page
+     :users users
+     :frame frame
+     :interactions-mode interactions-mode}]
 
-       [:div {:class (stl/css :viewer-wrapper)
-              :style {:width (:width wrapper-size)
-                      :height (:height wrapper-size)}}
-        [:div {:class (stl/css :viewer-clipper)}
+   [:div {:class (stl/css :viewer-wrapper)
+          :style {:width (:width wrapper-size)
+                  :height (:height wrapper-size)}}
+    [:div {:class (stl/css :viewer-clipper)}
 
-         (when orig-frame
-           [:div {:class (stl/css :viewport-container)
-                  :ref orig-viewport-ref
-                  :style {:width (:width orig-size)
-                          :height (:height orig-size)
-                          :position "relative"}}
+     (when orig-frame
+       [:div {:class (stl/css :viewport-container)
+              :ref orig-viewport-ref
+              :style {:width (:width orig-size)
+                      :height (:height orig-size)
+                      :position "relative"}}
 
-            [:& interactions/viewport
-             {:frame orig-frame
-              :base-frame orig-frame
-              :frame-offset (gpt/point 0 0)
-              :size orig-size
-              :page page
-              :users users
-              :interactions-mode interactions-mode}]])
+        [:& interactions/viewport
+         {:frame orig-frame
+          :base-frame orig-frame
+          :frame-offset (gpt/point 0 0)
+          :size orig-size
+          :page page
+          :users users
+          :interactions-mode interactions-mode}]])
 
-         [:div {:class (stl/css :viewport-container)
-                :ref current-viewport-ref
-                :style {:width (:width size)
-                        :height (:height size)
-                        :position "relative"}}
+     [:div {:class (stl/css :viewport-container)
+            :ref current-viewport-ref
+            :style {:width (:width size)
+                    :height (:height size)
+                    :position "relative"}}
 
-          [:& interactions/viewport
-           {:frame frame
-            :base-frame frame
-            :frame-offset (gpt/point 0 0)
-            :size size
-            :page page
-            :interactions-mode interactions-mode}]
+      [:& interactions/viewport
+       {:frame frame
+        :base-frame frame
+        :frame-offset (gpt/point 0 0)
+        :size size
+        :page page
+        :interactions-mode interactions-mode}]
 
-          (for [overlay overlays]
-            [:& viewer-overlay
-             {:overlay overlay
-              :key (dm/str (:id overlay))
-              :page page
-              :frame frame
-              :zoom zoom
-              :wrapper-size wrapper-size
-              :interactions-mode interactions-mode}])]]
+      (for [overlay overlays]
+        [:& viewer-overlay
+         {:overlay overlay
+          :key (dm/str (:id overlay))
+          :page page
+          :frame frame
+          :zoom zoom
+          :wrapper-size wrapper-size
+          :interactions-mode interactions-mode}])]]
 
 
-        (when (= section :comments)
-          [:& comments-layer {:file file
-                              :users users
-                              :frame frame
-                              :page page
-                              :zoom zoom}])]]
-
-
-
-      ;; OLD
-      [:*
-       [:& viewer-pagination-and-sidebar
-        {:section section
-         :index index
-         :page page
-         :users users
-         :frame frame
-         :interactions-mode interactions-mode}]
-
-       [:div.viewer-wrapper
-        {:style {:width (:width wrapper-size)
-                 :height (:height wrapper-size)}}
-        [:div.viewer-clipper
-         (when orig-frame
-           [:div.viewport-container
-            {:ref orig-viewport-ref
-             :style {:width (:width orig-size)
-                     :height (:height orig-size)
-                     :position "relative"}}
-
-            [:& interactions/viewport
-             {:frame orig-frame
-              :base-frame orig-frame
-              :frame-offset (gpt/point 0 0)
-              :size orig-size
-              :page page
-              :users users
-              :interactions-mode interactions-mode}]])
-
-         [:div.viewport-container
-          {:ref current-viewport-ref
-           :style {:width (:width size)
-                   :height (:height size)
-                   :position "relative"}}
-
-          [:& interactions/viewport
-           {:frame frame
-            :base-frame frame
-            :frame-offset (gpt/point 0 0)
-            :size size
-            :page page
-            :interactions-mode interactions-mode}]
-
-          (for [overlay overlays]
-            [:& viewer-overlay
-             {:overlay overlay
-              :key (dm/str (:id overlay))
-              :page page
-              :frame frame
-              :zoom zoom
-              :wrapper-size wrapper-size
-              :interactions-mode interactions-mode}])]]
-
-
-        (when (= section :comments)
-          [:& comments-layer {:file file
-                              :users users
-                              :frame frame
-                              :page page
-                              :zoom zoom}])]])))
+    (when (= section :comments)
+      [:& comments-layer {:file file
+                          :users users
+                          :frame frame
+                          :page page
+                          :zoom zoom}])]])
 
 (mf/defc viewer-content
   {::mf/wrap-props false}
   [{:keys [data page-id share-id section index interactions-mode] :as props}]
   (let [{:keys [file users project permissions]} data
-
-        new-css-system (mf/use-ctx ctx/new-css-system)
-
         allowed (or
                  (= section :interactions)
                  (and (= section :comments)
@@ -597,153 +512,80 @@
              fonts (into #{} (keep :font-id) text-nodes)]
          (run! fonts/ensure-loaded! fonts))))
 
-    (if new-css-system
-      [:div#viewer-layout
-       {:class (stl/css-case
-                :force-visible (:show-thumbnails local)
-                :viewer-layout (not= section :inspect)
-                :inspect-layout (= section :inspect)
-                :fullscreen fullscreen?)}
+    [:div#viewer-layout
+     {:class (stl/css-case
+              :force-visible (:show-thumbnails local)
+              :viewer-layout (not= section :inspect)
+              :inspect-layout (= section :inspect)
+              :fullscreen fullscreen?)}
 
-       [:div {:class (stl/css :viewer-content)}
-        [:& header/header {:project project
-                           :index index
-                           :file file
-                           :page page
-                           :frame frame
-                           :permissions permissions
-                           :zoom zoom
-                           :section section
-                           :interactions-mode interactions-mode}]
+     [:div {:class (stl/css :viewer-content)}
+      [:& header/header {:project project
+                         :index index
+                         :file file
+                         :page page
+                         :frame frame
+                         :permissions permissions
+                         :zoom zoom
+                         :section section
+                         :interactions-mode interactions-mode}]
 
-        [:button {:on-click on-thumbnails-close
-                  :class (stl/css-case :thumbnails-close true
-                                       :invisible (not (:show-thumbnails local false)))}]
+      [:button {:on-click on-thumbnails-close
+                :class (stl/css-case :thumbnails-close true
+                                     :invisible (not (:show-thumbnails local false)))}]
 
-        [:& thumbnails-panel {:frames frames
-                              :show? (:show-thumbnails local false)
-                              :page page
-                              :index index
-                              :thumbnail-data (:thumbnails file)}]
+      [:& thumbnails-panel {:frames frames
+                            :show? (:show-thumbnails local false)
+                            :page page
+                            :index index
+                            :thumbnail-data (:thumbnails file)}]
 
-        [:section {:id "viewer-section"
-                   :ref viewer-section-ref
-                   :class (stl/css-case :viewer-section true
-                                        :fulscreen fullscreen?)
-                   :on-click click-on-screen}
-         (cond
-           (empty? frames)
-           [:section {:class (stl/css :empty-state)}
-            [:span (tr "viewer.empty-state")]]
+      [:section {:id "viewer-section"
+                 :ref viewer-section-ref
+                 :class (stl/css-case :viewer-section true
+                                      :fulscreen fullscreen?)
+                 :on-click click-on-screen}
+       (cond
+         (empty? frames)
+         [:section {:class (stl/css :empty-state)}
+          [:span (tr "viewer.empty-state")]]
 
-           (nil? frame)
-           [:section {:class (stl/css :empty-state)}
-            (when (some? index)
-              [:span (tr "viewer.frame-not-found")])]
+         (nil? frame)
+         [:section {:class (stl/css :empty-state)}
+          (when (some? index)
+            [:span (tr "viewer.frame-not-found")])]
 
-           (some? frame)
-           (if (= :inspect section)
-             [:& inspect/viewport
-              {:frame frame
-               :page page
-               :file file
-               :section section
-               :local local
-               :size size
-               :index index
-               :viewer-pagination viewer-pagination
-               :interactions-mode interactions-mode
-               :share-id share-id}]
+         (some? frame)
+         (if (= :inspect section)
+           [:& inspect/viewport
+            {:frame frame
+             :page page
+             :file file
+             :section section
+             :local local
+             :size size
+             :index index
+             :viewer-pagination viewer-pagination
+             :interactions-mode interactions-mode
+             :share-id share-id}]
 
-             [:& (mf/provider ctx/current-zoom) {:value zoom}
-              [:& viewer-wrapper
-               {:wrapper-size wrapper-size
-                :orig-frame orig-frame
-                :orig-viewport-ref orig-viewport-ref
-                :orig-size orig-size
-                :page page
-                :file file
-                :users users
-                :current-viewport-ref current-viewport-ref
-                :size size
-                :frame frame
-                :interactions-mode interactions-mode
-                :overlays overlays
-                :zoom zoom
-                :section section
-                :index index}]]))]]]
-
-      ;; OLD
-      [:div#viewer-layout
-       {:class (dom/classnames
-                :force-visible (:show-thumbnails local)
-                :viewer-layout (not= section :inspect)
-                :inspect-layout (= section :inspect)
-                :fullscreen fullscreen?)}
-
-       [:div.viewer-content
-        [:& header/header {:project project
-                           :index index
-                           :file file
-                           :page page
-                           :frame frame
-                           :permissions permissions
-                           :zoom zoom
-                           :section section
-                           :interactions-mode interactions-mode}]
-        [:div.thumbnail-close {:on-click on-thumbnails-close
-                               :class (dom/classnames :invisible (not (:show-thumbnails local false)))}]
-        [:& thumbnails-panel {:frames frames
-                              :show? (:show-thumbnails local false)
-                              :page page
-                              :index index
-                              :thumbnail-data (:thumbnails file)}]
-        [:section.viewer-section {:id "viewer-section"
-                                  :ref viewer-section-ref
-                                  :class (if fullscreen? "fullscreen" "")
-                                  :on-click click-on-screen}
-         (cond
-           (empty? frames)
-           [:section.empty-state
-            [:span (tr "viewer.empty-state")]]
-
-           (nil? frame)
-           [:section.empty-state
-            (when (some? index)
-              [:span (tr "viewer.frame-not-found")])]
-
-           (some? frame)
-           (if (= :inspect section)
-             [:& inspect/viewport
-              {:frame frame
-               :page page
-               :file file
-               :section section
-               :local local
-               :size size
-               :index index
-               :viewer-pagination viewer-pagination
-               :interactions-mode interactions-mode
-               :share-id share-id}]
-
-
-             [:& (mf/provider ctx/current-zoom) {:value zoom}
-              [:& viewer-wrapper
-               {:wrapper-size wrapper-size
-                :orig-frame orig-frame
-                :orig-viewport-ref orig-viewport-ref
-                :orig-size orig-size
-                :page page
-                :file file
-                :users users
-                :current-viewport-ref current-viewport-ref
-                :size size
-                :frame frame
-                :interactions-mode interactions-mode
-                :overlays overlays
-                :zoom zoom
-                :section section
-                :index index}]]))]]])))
+           [:& (mf/provider ctx/current-zoom) {:value zoom}
+            [:& viewer-wrapper
+             {:wrapper-size wrapper-size
+              :orig-frame orig-frame
+              :orig-viewport-ref orig-viewport-ref
+              :orig-size orig-size
+              :page page
+              :file file
+              :users users
+              :current-viewport-ref current-viewport-ref
+              :size size
+              :frame frame
+              :interactions-mode interactions-mode
+              :overlays overlays
+              :zoom zoom
+              :section section
+              :index index}]]))]]]))
 
 ;; --- Component: Viewer
 
diff --git a/frontend/src/app/main/ui/viewer.scss b/frontend/src/app/main/ui/viewer.scss
index 7825fe3a4..e31ff3b28 100644
--- a/frontend/src/app/main/ui/viewer.scss
+++ b/frontend/src/app/main/ui/viewer.scss
@@ -124,6 +124,7 @@
   border-radius: $br-8;
   width: $s-64;
   height: $s-32;
+  color: var(--viewer-thumbnails-control-foreground-color);
   background-color: var(--viewer-controls-background-color);
 }
 
@@ -140,3 +141,40 @@
   align-items: center;
   overflow: hidden;
 }
+
+.viewer-overlay-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  &.visible {
+    background-color: rgb(0, 0, 0, 0.2);
+  }
+}
+
+.viewer-overlay {
+  position: absolute;
+}
+
+.viewport-container {
+  clip-path: inset(0 0 0 0);
+  grid-column: 1 / 1;
+  grid-row: 1 / 1;
+
+  .not-fixed {
+    position: absolute;
+  }
+
+  .fixed {
+    position: fixed;
+    pointer-events: none;
+
+    .frame-children g {
+      pointer-events: auto;
+    }
+  }
+}
+
+:global(svg#loader-pencil) {
+  fill: var(--icon-foreground);
+}
diff --git a/frontend/src/app/main/ui/viewer/comments.cljs b/frontend/src/app/main/ui/viewer/comments.cljs
index b9eed98bf..2514fbb14 100644
--- a/frontend/src/app/main/ui/viewer/comments.cljs
+++ b/frontend/src/app/main/ui/viewer/comments.cljs
@@ -18,7 +18,6 @@
    [app.main.store :as st]
    [app.main.ui.comments :as cmt]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.comments :as wc]
    [app.util.dom :as dom]
@@ -31,7 +30,6 @@
    ::mf/wrap-props false}
   []
   (let [{cmode :mode cshow :show show-sidebar? :show-sidebar?} (mf/deref refs/comments-local)
-        new-css-system  (mf/use-ctx ctx/new-css-system)
         show-dropdown?  (mf/use-state false)
         toggle-dropdown (mf/use-fn #(swap! show-dropdown? not))
         hide-dropdown   (mf/use-fn #(reset! show-dropdown? false))
@@ -54,103 +52,67 @@
 
         update-options
         (mf/use-callback
+         (mf/deps show-sidebar?)
          (fn [event]
            (let [mode (-> (dom/get-target event)
                           (dom/get-data "value")
-                          (boolean))]
-             (st/emit! (dcm/update-options {:show-sidebar? mode})))))]
+                          (boolean))
+                 _ (prn mode)]
+             (st/emit! (dcm/update-options {:show-sidebar? (not mode)})))))]
 
-    (if new-css-system
-      [:div {:class (stl/css :view-options)
-             :on-click toggle-dropdown}
-       [:span {:class (stl/css :dropdown-title)}
-        (tr "labels.comments")]
-       [:span {:class (stl/css :icon-dropdown)}
-        i/arrow-refactor]
-       [:& dropdown {:show @show-dropdown?
-                     :on-close hide-dropdown}
-        [:ul {:class (stl/css :dropdown)}
-         [:li {:class (stl/css-case :dropdown-element true
-                                    :selected (or (= :all cmode) (nil? cmode)))
-               :data-value :all
-               :on-click update-mode}
+    [:div {:class (stl/css :view-options)
+           :on-click toggle-dropdown}
+     [:span {:class (stl/css :dropdown-title)}
+      (tr "labels.comments")]
+     [:span {:class (stl/css :icon-dropdown)}
+      i/arrow-refactor]
+     [:& dropdown {:show @show-dropdown?
+                   :on-close hide-dropdown}
+      [:ul {:class (stl/css :dropdown)}
+       [:li {:class (stl/css-case :dropdown-element true
+                                  :selected (or (= :all cmode) (nil? cmode)))
+             :data-value :all
+             :on-click update-mode}
 
-          [:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
-          (when (or (= :all cmode) (nil? cmode))
-            [:span {:class (stl/css :icon)} i/tick-refactor])]
+        [:span {:class (stl/css :label)} (tr "labels.show-all-comments")]
+        (when (or (= :all cmode) (nil? cmode))
+          [:span {:class (stl/css :icon)} i/tick-refactor])]
 
-         [:li {:class (stl/css-case :dropdown-element true
-                                    :selected (= :yours cmode))
-               :data-value :yours
-               :on-click update-mode}
+       [:li {:class (stl/css-case :dropdown-element true
+                                  :selected (= :yours cmode))
+             :data-value :yours
+             :on-click update-mode}
 
-          [:span {:class (stl/css :label)}
-           (tr "labels.show-your-comments")]
+        [:span {:class (stl/css :label)}
+         (tr "labels.show-your-comments")]
 
-          (when (= :yours cmode)
-            [:span {:class (stl/css :icon)}
-             i/tick-refactor])]
+        (when (= :yours cmode)
+          [:span {:class (stl/css :icon)}
+           i/tick-refactor])]
 
-         [:li {:class (stl/css :separator)}]
+       [:li {:class (stl/css :separator)}]
 
-         [:li {:class (stl/css-case :dropdown-element true
-                                    :selected (= :pending cshow))
-               :data-value (if (= :pending cshow) :all :pending)
-               :on-click update-show}
+       [:li {:class (stl/css-case :dropdown-element true
+                                  :selected (= :pending cshow))
+             :data-value (if (= :pending cshow) :all :pending)
+             :on-click update-show}
 
-          [:span {:class (stl/css :label)}
-           (tr "labels.hide-resolved-comments")]
-          (when  (= :pending cshow)
-            [:span {:class (stl/css :icon)}
-             i/tick-refactor])]
+        [:span {:class (stl/css :label)}
+         (tr "labels.hide-resolved-comments")]
+        (when  (= :pending cshow)
+          [:span {:class (stl/css :icon)}
+           i/tick-refactor])]
 
-         [:li {:class (stl/css :separator)}]
+       [:li {:class (stl/css :separator)}]
 
-         [:li {:class (stl/css-case :dropdown-element true
-                                    :selected show-sidebar?)
-               :data-value (not show-sidebar?)
-               :on-click update-options}
+       [:li {:class (stl/css-case :dropdown-element true
+                                  :selected show-sidebar?)
+             :data-value show-sidebar?
+             :on-click update-options}
 
-          [:span {:class (stl/css :label)} (tr "labels.show-comments-list")]
-          (when show-sidebar?
-            [:span {:class (stl/css :icon)} i/tick-refactor])]]]]
-
-
-
-      ; OLD
-      [:div.view-options {:on-click toggle-dropdown}
-       [:span.label (tr "labels.comments")]
-       [:span.icon i/arrow-down]
-       [:& dropdown {:show @show-dropdown?
-                     :on-close hide-dropdown}
-
-        [:ul.dropdown.with-check
-         [:li {:class (dom/classnames :selected (or (= :all cmode) (nil? cmode)))
-               :data-value :all
-               :on-click update-mode}
-          [:span.icon i/tick]
-          [:span.label (tr "labels.show-all-comments")]]
-
-         [:li {:class (dom/classnames :selected (= :yours cmode))
-               :data-value :yours
-               :on-click update-mode}
-          [:span.icon i/tick]
-          [:span.label (tr "labels.show-your-comments")]]
-
-         [:hr]
-
-         [:li {:class (dom/classnames :selected (= :pending cshow))
-               :data-value (if (= :pending cshow) :all :pending)
-               :on-click update-show}
-          [:span.icon i/tick]
-          [:span.label (tr "labels.hide-resolved-comments")]]
-
-         [:hr]
-         [:li {:class (dom/classnames :selected show-sidebar?)
-               :data-value (not show-sidebar?)
-               :on-click update-options}
-          [:span.icon i/tick]
-          [:span.label (tr "labels.show-comments-list")]]]]])))
+        [:span {:class (stl/css :label)} (tr "labels.show-comments-list")]
+        (when show-sidebar?
+          [:span {:class (stl/css :icon)} i/tick-refactor])]]]]))
 
 
 (defn- update-thread-position [positions {:keys [id] :as thread}]
@@ -162,8 +124,7 @@
 
 (mf/defc comments-layer
   [{:keys [zoom file users frame page] :as props}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        profile        (mf/deref refs/profile)
+  (let [profile        (mf/deref refs/profile)
         local          (mf/deref refs/comments-local)
 
         open-thread-id (:open local)
@@ -234,81 +195,44 @@
              (st/emit! (dcm/create-thread-on-viewer params)
                        (dcm/close-thread)))))]
 
-    (if new-css-system
-      [:div {:class (stl/css :comments-section)
-             :on-click on-click}
-       [:div {:class (stl/css :viewer-comments-container)}
-        [:div {:class (stl/css :threads)}
-         (for [item threads]
-           [:& cmt/thread-bubble
-            {:thread item
-             :position-modifier modifier1
-             :zoom zoom
-             :on-click on-bubble-click
-             :open? (= (:id item) (:open local))
-             :key (:seqn item)
-             :origin :viewer}])
+    [:div {:class (stl/css :comments-section)
+           :on-click on-click}
+     [:div {:class (stl/css :viewer-comments-container)}
+      [:div {:class (stl/css :threads)}
+       (for [item threads]
+         [:& cmt/thread-bubble
+          {:thread item
+           :position-modifier modifier1
+           :zoom zoom
+           :on-click on-bubble-click
+           :open? (= (:id item) (:open local))
+           :key (:seqn item)
+           :origin :viewer}])
 
-         (when-let [thread (get threads-map open-thread-id)]
-           [:& cmt/thread-comments
-            {:thread thread
-             :position-modifier modifier1
-             :users users
-             :zoom zoom}])
+       (when-let [thread (get threads-map open-thread-id)]
+         [:& cmt/thread-comments
+          {:thread thread
+           :position-modifier modifier1
+           :users users
+           :zoom zoom}])
 
-         (when-let [draft (:draft local)]
-           [:& cmt/draft-thread
-            {:draft draft
-             :position-modifier modifier1
-             :on-cancel on-draft-cancel
-             :on-submit on-draft-submit
-             :zoom zoom}])]]]
-
-
-      [:div.comments-section {:on-click on-click}
-       [:div.viewer-comments-container
-        [:div.threads
-         (for [item threads]
-           [:& cmt/thread-bubble
-            {:thread item
-             :position-modifier modifier1
-             :zoom zoom
-             :on-click on-bubble-click
-             :open? (= (:id item) (:open local))
-             :key (:seqn item)
-             :origin :viewer}])
-
-         (when-let [thread (get threads-map open-thread-id)]
-           [:& cmt/thread-comments
-            {:thread thread
-             :position-modifier modifier1
-             :users users
-             :zoom zoom}])
-
-         (when-let [draft (:draft local)]
-           [:& cmt/draft-thread
-            {:draft draft
-             :position-modifier modifier1
-             :on-cancel on-draft-cancel
-             :on-submit on-draft-submit
-             :zoom zoom}])]]])))
+       (when-let [draft (:draft local)]
+         [:& cmt/draft-thread
+          {:draft draft
+           :position-modifier modifier1
+           :on-cancel on-draft-cancel
+           :on-submit on-draft-submit
+           :zoom zoom}])]]]))
 
 (mf/defc comments-sidebar
   [{:keys [users frame page]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        profile     (mf/deref refs/profile)
+  (let [profile     (mf/deref refs/profile)
         local      (mf/deref refs/comments-local)
         threads-map (mf/deref refs/comment-threads)
         threads     (->> (vals threads-map)
                          (dcm/apply-filters local profile)
                          (filter (fn [{:keys [position]}]
                                    (gsh/has-point? frame position))))]
-    (if new-css-system
-      [:aside {:class (stl/css :comments-sidebar)}
-       [:div {:class (stl/css :settings-bar-inside)}
-        [:& wc/comments-sidebar {:from-viewer true :users users :threads threads :page-id (:id page)}]]]
-
-
-      [:aside.settings-bar.settings-bar-right.comments-right-sidebar
-       [:div.settings-bar-inside
-        [:& wc/comments-sidebar {:users users :threads threads :page-id (:id page)}]]])))
+    [:aside {:class (stl/css :comments-sidebar)}
+     [:div {:class (stl/css :settings-bar-inside)}
+      [:& wc/comments-sidebar {:from-viewer true :users users :threads threads :page-id (:id page)}]]]))
diff --git a/frontend/src/app/main/ui/viewer/header.cljs b/frontend/src/app/main/ui/viewer/header.cljs
index 83bf05914..ab5933155 100644
--- a/frontend/src/app/main/ui/viewer/header.cljs
+++ b/frontend/src/app/main/ui/viewer/header.cljs
@@ -14,7 +14,6 @@
    [app.main.data.viewer.shortcuts :as sc]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.context :as ctx]
    [app.main.ui.export :refer [export-progress-widget]]
    [app.main.ui.formats :as fmt]
    [app.main.ui.icons :as i]
@@ -45,8 +44,7 @@
            on-zoom-fill]
     :as props}]
 
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        open*           (mf/use-state false)
+  (let [open*           (mf/use-state false)
         open?           (deref open*)
         open-dropdown
         (mf/use-fn
@@ -72,92 +70,57 @@
          (mf/deps on-decrease)
          (fn [event]
            (dom/stop-propagation event)
-           (on-decrease)))
+           (on-decrease)))]
 
-        show-dropdown? (mf/use-state false)]
+    [:div {:class (stl/css-case :zoom-widget true
+                                :selected open?)
+           :on-click open-dropdown
+           :title (tr "workspace.header.zoom")}
+     [:span {:class (stl/css :label)} (fmt/format-percent zoom)]
+     [:& dropdown {:show open?
+                   :on-close close-dropdown}
+      [:ul {:class (stl/css :dropdown)}
+       [:li  {:class (stl/css :basic-zoom-bar)}
+        [:span {:class (stl/css :zoom-btns)}
+         [:button {:class (stl/css :zoom-btn)
+                   :on-click on-decrease}
+          [:span {:class (stl/css :zoom-icon)}
+           i/remove-refactor]]
+         [:p  {:class (stl/css :zoom-text)}
+          (fmt/format-percent zoom)]
+         [:button {:class (stl/css :zoom-btn)
+                   :on-click on-increase}
+          [:span {:class (stl/css :zoom-icon)}
+           i/add-refactor]]]
+        [:button {:class (stl/css :reset-btn)
+                  :on-click on-zoom-reset}
+         (tr "workspace.header.reset-zoom")]]
 
-    (if new-css-system
-      [:div {:class (stl/css-case :zoom-widget true
-                                  :selected open?)
-             :on-click open-dropdown
-             :title (tr "workspace.header.zoom")}
-       [:span {:class (stl/css :label)} (fmt/format-percent zoom)]
-       [:& dropdown {:show open?
-                     :on-close close-dropdown}
-        [:ul {:class (stl/css :dropdown)}
-         [:li  {:class (stl/css :basic-zoom-bar)}
-          [:span {:class (stl/css :zoom-btns)}
-           [:button {:class (stl/css :zoom-btn)
-                     :on-click on-decrease}
-            [:span {:class (stl/css :zoom-icon)}
-             i/remove-refactor]]
-           [:p  {:class (stl/css :zoom-text)}
-            (fmt/format-percent zoom)]
-           [:button {:class (stl/css :zoom-btn)
-                     :on-click on-increase}
-            [:span {:class (stl/css :zoom-icon)}
-             i/add-refactor]]]
-          [:button {:class (stl/css :reset-btn)
-                    :on-click on-zoom-reset}
-           (tr "workspace.header.reset-zoom")]]
-
-         [:li {:class (stl/css :zoom-option)
-               :on-click on-zoom-fit}
-          (tr "workspace.header.zoom-fit")
-          [:span  {:class (stl/css :shortcuts)}
-           (for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))]
-             [:span {:class (stl/css :shortcut-key)
-                     :key (str "zoom-fit-" sc)} sc])]]
-         [:li {:class (stl/css :zoom-option)
-               :on-click on-zoom-fill}
-          (tr "workspace.header.zoom-fill")
-          [:span  {:class (stl/css :shortcuts)}
-           (for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))]
-             [:span {:class (stl/css :shortcut-key)
-                     :key (str "zoom-fill-" sc)} sc])]]
-         [:li {:class (stl/css :zoom-option)
-               :on-click on-fullscreen}
-          (tr "workspace.header.zoom-full-screen")
-          [:span  {:class (stl/css :shortcuts)}
-           (for [sc (scd/split-sc (sc/get-tooltip :toggle-fullscreen))]
-             [:span {:class (stl/css :shortcut-key)
-                     :key (str "zoom-fullscreen-" sc)} sc])]]]]]
-
-
-      ;; OLD
-      [:div.zoom-widget {:on-click
-                         (fn [event]
-                           (dom/stop-propagation event)
-                           (reset! show-dropdown? true))}
-       [:span.label (fmt/format-percent zoom)]
-       [:span.icon i/arrow-down]
-       [:& dropdown {:show @show-dropdown?
-                     :on-close #(reset! show-dropdown? false)}
-        [:ul.dropdown
-         [:li.basic-zoom-bar
-          [:span.zoom-btns
-           [:button {:on-click (fn [event]
-                                 (dom/stop-propagation event)
-                                 (dom/prevent-default event)
-                                 (on-decrease))} "-"]
-           [:p.zoom-size (fmt/format-percent zoom)]
-           [:button {:on-click (fn [event]
-                                 (dom/stop-propagation event)
-                                 (dom/prevent-default event)
-                                 (on-increase))} "+"]]
-          [:button.reset-btn {:on-click on-zoom-reset} (tr "workspace.header.reset-zoom")]]
-         [:li.separator]
-         [:li {:on-click on-zoom-fit}
-          (tr "workspace.header.zoom-fit") [:span (sc/get-tooltip :toggle-zoom-style)]]
-         [:li {:on-click on-zoom-fill}
-          (tr "workspace.header.zoom-fill") [:span (sc/get-tooltip :toggle-zoom-style)]]
-         [:li {:on-click on-fullscreen}
-          (tr "workspace.header.zoom-full-screen") [:span (sc/get-tooltip :toggle-fullscreen)]]]]])))
+       [:li {:class (stl/css :zoom-option)
+             :on-click on-zoom-fit}
+        (tr "workspace.header.zoom-fit")
+        [:span  {:class (stl/css :shortcuts)}
+         (for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))]
+           [:span {:class (stl/css :shortcut-key)
+                   :key (str "zoom-fit-" sc)} sc])]]
+       [:li {:class (stl/css :zoom-option)
+             :on-click on-zoom-fill}
+        (tr "workspace.header.zoom-fill")
+        [:span  {:class (stl/css :shortcuts)}
+         (for [sc (scd/split-sc (sc/get-tooltip :toggle-zoom-style))]
+           [:span {:class (stl/css :shortcut-key)
+                   :key (str "zoom-fill-" sc)} sc])]]
+       [:li {:class (stl/css :zoom-option)
+             :on-click on-fullscreen}
+        (tr "workspace.header.zoom-full-screen")
+        [:span  {:class (stl/css :shortcuts)}
+         (for [sc (scd/split-sc (sc/get-tooltip :toggle-fullscreen))]
+           [:span {:class (stl/css :shortcut-key)
+                   :key (str "zoom-fullscreen-" sc)} sc])]]]]]))
 
 (mf/defc header-options
   [{:keys [section zoom page file index permissions interactions-mode]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        fullscreen?    (mf/deref fullscreen-ref)
+  (let [fullscreen?    (mf/deref fullscreen-ref)
 
         toggle-fullscreen
         (mf/use-callback
@@ -196,89 +159,49 @@
         (mf/use-fn
          #(st/emit! dv/zoom-to-fit))]
 
-    (if new-css-system
-      [:div {:class (stl/css :options-zone)}
-       (case section
-         :interactions [:*
-                        (when index
-                          [:& flows-menu {:page page :index index}])
-                        [:& interactions-menu {:interactions-mode interactions-mode}]]
-         :comments [:& comments-menu]
-         [:div {:class (stl/css :view-options)}])
+    [:div {:class (stl/css :options-zone)}
+     (case section
+       :interactions [:*
+                      (when index
+                        [:& flows-menu {:page page :index index}])
+                      [:& interactions-menu {:interactions-mode interactions-mode}]]
+       :comments [:& comments-menu]
+       [:div {:class (stl/css :view-options)}])
 
-       [:& export-progress-widget]
+     [:& export-progress-widget]
 
-       [:& zoom-widget
-        {:zoom zoom
-         :on-increase handle-increase
-         :on-decrease handle-decrease
-         :on-zoom-reset handle-zoom-reset
-         :on-zoom-fill handle-zoom-fill
-         :on-zoom-fit  handle-zoom-fit
-         :on-fullscreen toggle-fullscreen}]
+     [:& zoom-widget
+      {:zoom zoom
+       :on-increase handle-increase
+       :on-decrease handle-decrease
+       :on-zoom-reset handle-zoom-reset
+       :on-zoom-fill handle-zoom-fill
+       :on-zoom-fit  handle-zoom-fit
+       :on-fullscreen toggle-fullscreen}]
 
-       (when (:can-edit permissions)
-         [:span {:on-click go-to-workspace
-                 :class (stl/css :edit-btn)}
-          i/curve-refactor])
+     (when (:can-edit permissions)
+       [:span {:on-click go-to-workspace
+               :class (stl/css :edit-btn)}
+        i/curve-refactor])
 
-       [:span {:title (tr "viewer.header.fullscreen")
-               :class (stl/css-case :fullscreen-btn true
-                                    :selected fullscreen?)
-               :on-click toggle-fullscreen}
-        i/expand-refactor]
+     [:span {:title (tr "viewer.header.fullscreen")
+             :class (stl/css-case :fullscreen-btn true
+                                  :selected fullscreen?)
+             :on-click toggle-fullscreen}
+      i/expand-refactor]
 
-       (when (:is-admin permissions)
-         [:button {:on-click open-share-dialog
-                   :class (stl/css :share-btn)}
-          (tr "labels.share")])
+     (when (:is-admin permissions)
+       [:button {:on-click open-share-dialog
+                 :class (stl/css :share-btn)}
+        (tr "labels.share")])
 
-       (when-not (:is-logged permissions)
-         [:span {:on-click open-login-dialog
-                 :class (stl/css :go-log-btn)} (tr "labels.log-or-sign")])]
-
-
-      ;; OLD
-      [:div.options-zone
-       (case section
-         :interactions [:*
-                        (when index
-                          [:& flows-menu {:page page :index index}])
-                        [:& interactions-menu {:interactions-mode interactions-mode}]]
-         :comments [:& comments-menu]
-
-         [:div.view-options])
-
-       [:& export-progress-widget]
-       [:& zoom-widget
-        {:zoom zoom
-         :on-increase handle-increase
-         :on-decrease handle-decrease
-         :on-zoom-reset handle-zoom-reset
-         :on-zoom-fill handle-zoom-fill
-         :on-zoom-fit  handle-zoom-fit
-         :on-fullscreen toggle-fullscreen}]
-
-       [:span.btn-icon-dark.btn-small.tooltip.tooltip-bottom-left
-        {:alt (tr "viewer.header.fullscreen")
-         :on-click toggle-fullscreen}
-        (if fullscreen?
-          i/full-screen-off
-          i/full-screen)]
-
-       (when (:is-admin permissions)
-         [:span.btn-primary.tooltip.tooltip-bottom-left {:on-click open-share-dialog :alt (tr "labels.share-prototype")} i/export [:span (tr "labels.share-prototype")]])
-
-       (when (:can-edit permissions)
-         [:span.btn-text-dark {:on-click go-to-workspace} (tr "labels.edit-file")])
-
-       (when-not (:is-logged permissions)
-         [:span.btn-text-dark {:on-click open-login-dialog} (tr "labels.log-or-sign")])])))
+     (when-not (:is-logged permissions)
+       [:span {:on-click open-login-dialog
+               :class (stl/css :go-log-btn)} (tr "labels.log-or-sign")])]))
 
 (mf/defc header-sitemap
   [{:keys [project file page frame] :as props}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        project-name   (:name project)
+  (let [project-name   (:name project)
         file-name      (:name file)
         page-name      (:name page)
         page-id        (:id page)
@@ -306,66 +229,37 @@
            (st/emit! (dv/go-to-page page-id))
            (reset! show-dropdown? false)))]
 
-    (if new-css-system
-      [:div {:class (stl/css :sitemap-zone)
-             :title (tr "viewer.header.sitemap")}
-       [:span {:class (stl/css :project-name)} project-name]
-       [:div {:class (stl/css :sitemap-text)}
-        [:div {:class (stl/css :breadcrumb)
-               :on-click open-dropdown}
-         [:span  {:class (stl/css :breadcrumb-text)}
-          (dm/str file-name " / " page-name)]
-         [:span {:class (stl/css :icon)} i/arrow-refactor]
-         [:span "/"]
-         [:& dropdown {:show @show-dropdown?
-                       :on-close close-dropdown}
-          [:ul {:class (stl/css :dropdown-sitemap)}
-           (for [id (get-in file [:data :pages])]
-             [:li {:class (stl/css-case :dropdown-element true
-                                        :selected (= page-id id))
-                   :id (str id)
-                   :key (str id)
-                   :on-click (partial navigate-to id)}
-              [:span {:class (stl/css :label)}
-               (get-in file [:data :pages-index id :name])]
-              (when (= page-id id)
-                [:span {:class (stl/css :icon-check)} i/tick-refactor])])]]]
-        [:div {:class (stl/css :current-frame)
-               :on-click toggle-thumbnails}
-         [:span {:class (stl/css :frame-name)} frame-name]
-         [:span {:class (stl/css :icon)} i/arrow-refactor]]]]
-
-
-      ;; OLD
-      [:div.sitemap-zone {:alt (tr "viewer.header.sitemap")}
-       [:div.breadcrumb
-        {:on-click open-dropdown}
-        [:span.project-name project-name]
-        [:span "/"]
-        [:span.file-name file-name]
-        [:span "/"]
-
-        [:span.page-name page-name]
-        [:& dropdown {:show @show-dropdown?
-                      :on-close close-dropdown}
-         [:ul.dropdown
-          (for [id (get-in file [:data :pages])]
-            [:li {:id (str id)
-                  :key (str id)
-                  :on-click (partial navigate-to id)}
-             (get-in file [:data :pages-index id :name])])]]]
-
-       [:span.icon {:on-click open-dropdown} i/arrow-down]
-       [:div.current-frame
-        {:on-click toggle-thumbnails}
-        [:span.label "/"]
-        [:span.label frame-name]]
-       [:span.icon {:on-click toggle-thumbnails} i/arrow-down]])))
+    [:div {:class (stl/css :sitemap-zone)
+           :title (tr "viewer.header.sitemap")}
+     [:span {:class (stl/css :project-name)} project-name]
+     [:div {:class (stl/css :sitemap-text)}
+      [:div {:class (stl/css :breadcrumb)
+             :on-click open-dropdown}
+       [:span  {:class (stl/css :breadcrumb-text)}
+        (dm/str file-name " / " page-name)]
+       [:span {:class (stl/css :icon)} i/arrow-refactor]
+       [:span "/"]
+       [:& dropdown {:show @show-dropdown?
+                     :on-close close-dropdown}
+        [:ul {:class (stl/css :dropdown-sitemap)}
+         (for [id (get-in file [:data :pages])]
+           [:li {:class (stl/css-case :dropdown-element true
+                                      :selected (= page-id id))
+                 :id (str id)
+                 :key (str id)
+                 :on-click (partial navigate-to id)}
+            [:span {:class (stl/css :label)}
+             (get-in file [:data :pages-index id :name])]
+            (when (= page-id id)
+              [:span {:class (stl/css :icon-check)} i/tick-refactor])])]]]
+      [:div {:class (stl/css :current-frame)
+             :on-click toggle-thumbnails}
+       [:span {:class (stl/css :frame-name)} frame-name]
+       [:span {:class (stl/css :icon)} i/arrow-refactor]]]]))
 
 (mf/defc header
   [{:keys [project file page frame zoom section permissions index interactions-mode]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        go-to-dashboard
+  (let [go-to-dashboard
         (mf/use-fn
          #(st/emit! (dv/go-to-dashboard)))
 
@@ -389,98 +283,52 @@
               (st/emit! (dv/go-to-section section))
               (open-login-dialog)))))]
 
-    (if new-css-system
-      [:header {:class (stl/css :viewer-header)}
-       [:div {:class (stl/css :nav-zone)}
-        ;; If the user doesn't have permission we disable the link
-        [:a {:class (stl/css :home-link)
-             :on-click go-to-dashboard
-             :style {:cursor (when-not (:can-edit permissions) "auto")
-                     :pointer-events (when-not (:can-edit permissions) "none")}}
-         [:span {:class (stl/css :logo-icon)}
-          i/logo-icon]]
-
-        [:& header-sitemap {:project project
-                            :file file
-                            :page page
-                            :frame frame
-                            :index index}]]
-
-       [:div {:class (stl/css :mode-zone)}
-        [:button {:on-click navigate
-                  :data-value :interactions
-                  :class (stl/css-case :mode-zone-btn true
-                                       :selected (= section :interactions))
-                  :title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))}
-         i/play-refactor]
-
-        (when (or (:can-edit permissions)
-                  (= (:who-comment permissions) "all"))
-          [:button {:on-click navigate
-                    :data-value :comments
-                    :class (stl/css-case :mode-zone-btn true
-                                         :selected (= section :comments))
-                    :title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))}
-           i/comments-refactor])
-
-        (when (or (= (:type permissions) :membership)
-                  (and (= (:type permissions) :share-link)
-                       (= (:who-inspect permissions) "all")))
-          [:button {:on-click go-to-inspect
-                    :class (stl/css-case :mode-zone-btn true
-                                         :selected (= section :inspect))
-                    :title (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))}
-           i/code-refactor])]
-
-       [:& header-options {:section section
-                           :permissions permissions
-                           :page page
-                           :file file
-                           :index index
-                           :zoom zoom
-                           :interactions-mode interactions-mode}]]
-
-
-      ;; OLD
-      [:header.viewer-header
-       [:div.nav-zone
+    [:header {:class (stl/css :viewer-header)}
+     [:div {:class (stl/css :nav-zone)}
             ;; If the user doesn't have permission we disable the link
-        [:div.main-icon {:style {:cursor (when-not (:can-edit permissions) "auto")}}
-         [:a {:on-click go-to-dashboard
-              :style {:pointer-events (when-not (:can-edit permissions) "none")}} i/logo-icon]]
+      [:a {:class (stl/css :home-link)
+           :on-click go-to-dashboard
+           :style {:cursor (when-not (:can-edit permissions) "auto")
+                   :pointer-events (when-not (:can-edit permissions) "none")}}
+       [:span {:class (stl/css :logo-icon)}
+        i/logo-icon]]
 
-        [:& header-sitemap {:project project :file file :page page :frame frame :index index}]]
+      [:& header-sitemap {:project project
+                          :file file
+                          :page page
+                          :frame frame
+                          :index index}]]
 
-       [:div.mode-zone
-        [:button.mode-zone-button.tooltip.tooltip-bottom
-         {:on-click navigate
-          :data-value :interactions
-          :class (dom/classnames :active (= section :interactions))
-          :alt (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))}
-         i/play]
+     [:div {:class (stl/css :mode-zone)}
+      [:button {:on-click navigate
+                :data-value :interactions
+                :class (stl/css-case :mode-zone-btn true
+                                     :selected (= section :interactions))
+                :title (tr "viewer.header.interactions-section" (sc/get-tooltip :open-interactions))}
+       i/play-refactor]
 
-        (when (or (:can-edit permissions)
-                  (= (:who-comment permissions) "all"))
-          [:button.mode-zone-button.tooltip.tooltip-bottom
-           {:on-click navigate
-            :data-value :comments
-            :class (dom/classnames :active (= section :comments))
-            :alt (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))}
-           i/chat])
+      (when (or (:can-edit permissions)
+                (= (:who-comment permissions) "all"))
+        [:button {:on-click navigate
+                  :data-value :comments
+                  :class (stl/css-case :mode-zone-btn true
+                                       :selected (= section :comments))
+                  :title (tr "viewer.header.comments-section" (sc/get-tooltip :open-comments))}
+         i/comments-refactor])
 
-        (when (or (= (:type permissions) :membership)
-                  (and (= (:type permissions) :share-link)
-                       (= (:who-inspect permissions) "all")))
-          [:button.mode-zone-button.tooltip.tooltip-bottom
-           {:on-click go-to-inspect
-            :class (dom/classnames :active (= section :inspect))
-            :alt (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))}
-           i/code])]
+      (when (or (= (:type permissions) :membership)
+                (and (= (:type permissions) :share-link)
+                     (= (:who-inspect permissions) "all")))
+        [:button {:on-click go-to-inspect
+                  :class (stl/css-case :mode-zone-btn true
+                                       :selected (= section :inspect))
+                  :title (tr "viewer.header.inspect-section" (sc/get-tooltip :open-inspect))}
+         i/code-refactor])]
 
-       [:& header-options {:section section
-                           :permissions permissions
-                           :page page
-                           :file file
-                           :index index
-                           :zoom zoom
-                           :interactions-mode interactions-mode}]])))
+     [:& header-options {:section section
+                         :permissions permissions
+                         :page page
+                         :file file
+                         :index index
+                         :zoom zoom
+                         :interactions-mode interactions-mode}]]))
diff --git a/frontend/src/app/main/ui/viewer/header.scss b/frontend/src/app/main/ui/viewer/header.scss
index f1bef24f9..633d7bf9d 100644
--- a/frontend/src/app/main/ui/viewer/header.scss
+++ b/frontend/src/app/main/ui/viewer/header.scss
@@ -53,6 +53,7 @@
 
 .project-name {
   @include tabTitleTipography;
+  color: var(--title-foreground-color);
 }
 
 .sitemap-text {
diff --git a/frontend/src/app/main/ui/viewer/inspect/annotation.cljs b/frontend/src/app/main/ui/viewer/inspect/annotation.cljs
index 401b8c111..a3cccae4d 100644
--- a/frontend/src/app/main/ui/viewer/inspect/annotation.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/annotation.cljs
@@ -5,15 +5,19 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.viewer.inspect.annotation
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.main.ui.components.copy-button :refer [copy-button]]
+   [app.main.ui.components.title-bar :refer [title-bar]]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
 (mf/defc annotation
   [{:keys [content] :as props}]
-  [:div.attributes-block.inspect-annotation
-   [:div.attributes-block-title
-    [:div.attributes-block-title-text (tr "workspace.options.component.annotation")]
+  [:div {:class (stl/css :attributes-block)}
+   [:& title-bar {:collapsable? false
+                  :title        (tr "workspace.options.component.annotation")
+                  :class        (stl/css :title-spacing-annotation)}
     [:& copy-button {:data content}]]
-   [:div.content content]])
+
+   [:div {:class (stl/css :annotation-content)} content]])
diff --git a/frontend/src/app/main/ui/viewer/inspect/annotation.scss b/frontend/src/app/main/ui/viewer/inspect/annotation.scss
new file mode 100644
index 000000000..ddceb455d
--- /dev/null
+++ b/frontend/src/app/main/ui/viewer/inspect/annotation.scss
@@ -0,0 +1,20 @@
+// 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
+
+@import "refactor/common-refactor.scss";
+
+.attributes-block {
+  @include flexColumn;
+}
+
+.title-spacing-annotation {
+  @extend .attr-title;
+}
+
+.annotation-content {
+  @include titleTipography;
+  color: var(--entry-foreground-color);
+}
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs
index c34c6f8f2..ef8763117 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs
@@ -9,7 +9,6 @@
   (:require
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.title-bar :refer [title-bar]]
-   [app.main.ui.context :as ctx]
    [app.util.code-gen.style-css :as css]
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -19,36 +18,20 @@
 
 (mf/defc blur-panel
   [{:keys [objects shapes]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        shapes (->> shapes (filter has-blur?))]
-    (if new-css-system
-      (when (seq shapes)
-        [:div {:class (stl/css :attributes-block)}
-         [:& title-bar {:collapsable? false
-                        :title        (tr "inspect.attributes.blur")
-                        :class        (stl/css :title-spacing-blur)}
-          (when (= (count shapes) 1)
-            [:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])]
+  (let [shapes (->> shapes (filter has-blur?))]
+    (when (seq shapes)
+      [:div {:class (stl/css :attributes-block)}
+       [:& title-bar {:collapsable? false
+                      :title        (tr "inspect.attributes.blur")
+                      :class        (stl/css :title-spacing-blur)}
+        (when (= (count shapes) 1)
+          [:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])]
 
-         [:div {:class (stl/css :attributes-content)}
-          (for [shape shapes]
-            [:div {:class (stl/css :blur-row)}
-             [:div {:class (stl/css :global/attr-label)} "Filter"]
-             [:div {:class (stl/css :global/attr-value)}
-              [:& copy-button {:data (css/get-css-property objects shape :filter)}
-               [:div {:class (stl/css :button-children)}
-                (css/get-css-value objects shape :filter)]]]])]])
-
-
-      (when (seq shapes)
-        [:div.attributes-block
-         [:div.attributes-block-title
-          [:div.attributes-block-title-text (tr "inspect.attributes.blur")]
-          (when (= (count shapes) 1)
-            [:& copy-button {:data (css/get-css-property objects (first shapes) :filter)}])]
-
-         (for [shape shapes]
-           [:div.attributes-unit-row
-            [:div.attributes-label (tr "inspect.attributes.blur.value")]
-            [:div.attributes-value (css/get-css-value objects shape :filter)]
-            [:& copy-button {:data (css/get-css-property objects shape :filter)}]])]))))
+       [:div {:class (stl/css :attributes-content)}
+        (for [shape shapes]
+          [:div {:class (stl/css :blur-row)}
+           [:div {:class (stl/css :global/attr-label)} "Filter"]
+           [:div {:class (stl/css :global/attr-value)}
+            [:& copy-button {:data (css/get-css-property objects shape :filter)}
+             [:div {:class (stl/css :button-children)}
+              (css/get-css-value objects shape :filter)]]]])]])))
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss
index 403c1fbd3..e2da40708 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/blur.scss
@@ -8,15 +8,16 @@
 
 .attributes-block {
   @include flexColumn;
-  .title-spacing-blur {
-    @extend .attr-title;
-  }
 }
-.attributes-content {
-  .blur-row {
-    @extend .attr-row;
-  }
-  .button-children {
-    @extend .copy-button-children;
-  }
+
+.title-spacing-blur {
+  @extend .attr-title;
+}
+
+.blur-row {
+  @extend .attr-row;
+}
+
+.button-children {
+  @extend .copy-button-children;
 }
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
index 9fc7e6957..1fa810340 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.cljs
@@ -12,12 +12,9 @@
    [app.config :as cf]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.color-bullet :refer [color-bullet color-name]]
    [app.main.ui.components.color-bullet-new :as cbn]
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.select :refer [select]]
-   [app.main.ui.context :as ctx]
-   [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [cuerdas.core :as str]
    [okulary.core :as l]
@@ -47,147 +44,94 @@
   (or (mf/deref file-colors-ref) (mf/deref refs/workspace-file-colors)))
 
 (mf/defc color-row [{:keys [color format copy-data on-change-format]}]
-  (let [new-css-system     (mf/use-ctx ctx/new-css-system)
-        colors-library     (get-colors-library color)
+  (let [colors-library     (get-colors-library color)
         file-colors        (get-file-colors)
         color-library-name (get-in (or colors-library file-colors) [(:id color) :name])
         color              (assoc color :color-library-name color-library-name)
         image              (:image color)]
 
-    (if new-css-system
-      [:*
-       [:div {:class (stl/css :attributes-color-row)}
-        [:div {:class (stl/css :bullet-wrapper)
-               :style #js {"--bullet-size" "16px"}}
-         [:& cbn/color-bullet {:color color
-                               :mini? true}]]
-
-        (when-not image
-          [:div {:class (stl/css :format-wrapper)}
-           (when-not (and on-change-format (or (:gradient color) image))
-             [:div {:class (stl/css :select-format-wrapper)}
-              [:& select
-               {:default-value format
-                :options [{:value :hex :label (tr "inspect.attributes.color.hex")}
-                          {:value :rgba :label (tr "inspect.attributes.color.rgba")}
-                          {:value :hsla :label (tr "inspect.attributes.color.hsla")}]
-                :on-change on-change-format}]])
-           (when (:gradient color)
-             [:div {:class (stl/css :format-info)} "rgba"])])
-
-        (if (and copy-data (not image))
-          [:& copy-button {:data copy-data
-                           :class (stl/css :color-row-copy-btn)}
-           [:*
-            [:div {:class (stl/css :first-row)}
-             [:div {:class (stl/css :name-opacity)}
-              [:span {:class (stl/css-case :color-value-wrapper true
-                               :gradient-name (:gradient color))}
-               (if (:gradient color)
-                 [:& cbn/color-name {:color color
-                                     :size 80}]
-                 (case format
-                   :hex [:& cbn/color-name {:color color
-                                            :size 80}]
-                   :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
-                           [:* (str/fmt "%s, %s, %s, %s" r g b a)])
-                   :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
-                               result (cc/format-hsla [h s l a])]
-                           [:* result])))]
-
-              (when-not (:gradient color)
-                [:span {:class (stl/css :opacity-info)}
-                 (str (* 100 (:opacity color)) "%")])]]
-
-            (when color-library-name
-              [:div {:class (stl/css :second-row)}
-               [:div {:class (stl/css :color-name-library)}
-                color-library-name]])]]
-
-          [:div {:class (stl/css :color-info)}
-           [:div {:class (stl/css :first-row)}
-            [:div {:class (stl/css :name-opacity)}
-             [:span {:class (stl/css-case :color-value-wrapper true
-                              :gradient-name (:gradient color))}
-              (if (:gradient color)
-                [:& cbn/color-name {:color color
-                                    :size 80}]
-                (case format
-                  :hex [:& cbn/color-name {:color color
-                                           :size 80}]
-                  :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
-                          [:* (str/fmt "%s, %s, %s, %s" r g b a)])
-                  :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
-                              result (cc/format-hsla [h s l a])]
-                          [:* result])))]
-
-             (when-not (:gradient color)
-               [:span {:class (stl/css :opacity-info)}
-                (str (* 100 (:opacity color)) "%")])]]
-
-           (when color-library-name
-             [:div {:class (stl/css :second-row)}
-              [:div {:class (stl/css :color-name-library)}
-               color-library-name]])])]
-
-       (when image
-         (let [mtype     (-> image :mtype)
-               name      (or (:name image) (tr "media.image"))
-               extension (cm/mtype->extension mtype)]
-           [:a {:class (stl/css :download-button)
-                :target "_blank"
-                :download (cond-> name extension (str/concat extension))
-                :href (cf/resolve-file-media image)}
-            (tr "inspect.attributes.image.download")]))]
-
-      [:*
-       [:div.attributes-color-row
-        (when color-library-name
-          [:div.attributes-color-id
-           [:& color-bullet {:color color}]
-           [:div color-library-name]])
-
-        [:div.attributes-color-value {:class (when color-library-name "hide-color")}
-         [:& color-bullet {:color color}]
-
-         (cond
-           (:gradient color)
-           [:& color-name {:color color}]
-
-           (= format :rgba)
-           (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
-             [:div (str/fmt "%s, %s, %s, %s" r g b a)])
-
-           (= format :hsla)
-           (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
-                 result (cc/format-hsla [h s l a])]
-             [:div result])
-
-           :else
-           [:*
-            [:& color-name {:color color}]
-            (when-not (:gradient color) [:div (str (* 100 (:opacity color)) "%")])])
+    [:*
+     [:div {:class (stl/css :attributes-color-row)}
+      [:div {:class (stl/css :bullet-wrapper)
+             :style #js {"--bullet-size" "16px"}}
+       [:& cbn/color-bullet {:color color
+                             :mini? true}]]
 
+      (when-not image
+        [:div {:class (stl/css :format-wrapper)}
          (when-not (and on-change-format (or (:gradient color) image))
-           [:select.color-format-select {:on-change #(-> (dom/get-target-val %) keyword on-change-format)}
-            [:option {:value "hex"}
-             (tr "inspect.attributes.color.hex")]
+           [:div {:class (stl/css :select-format-wrapper)}
+            [:& select
+             {:default-value format
+              :options [{:value :hex :label (tr "inspect.attributes.color.hex")}
+                        {:value :rgba :label (tr "inspect.attributes.color.rgba")}
+                        {:value :hsla :label (tr "inspect.attributes.color.hsla")}]
+              :on-change on-change-format}]])
+         (when (:gradient color)
+           [:div {:class (stl/css :format-info)} "rgba"])])
 
-            [:option {:value "rgba"}
-             (tr "inspect.attributes.color.rgba")]
+      (if (and copy-data (not image))
+        [:& copy-button {:data copy-data
+                         :class (stl/css :color-row-copy-btn)}
+         [:*
+          [:div {:class (stl/css :first-row)}
+           [:div {:class (stl/css :name-opacity)}
+            [:span {:class (stl/css-case :color-value-wrapper true
+                                         :gradient-name (:gradient color))}
+             (if (:gradient color)
+               [:& cbn/color-name {:color color
+                                   :size 80}]
+               (case format
+                 :hex [:& cbn/color-name {:color color
+                                          :size 80}]
+                 :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
+                         [:* (str/fmt "%s, %s, %s, %s" r g b a)])
+                 :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
+                             result (cc/format-hsla [h s l a])]
+                         [:* result])))]
 
-            [:option {:value "hsla"}
-             (tr "inspect.attributes.color.hsla")]])]
+            (when-not (:gradient color)
+              [:span {:class (stl/css :opacity-info)}
+               (str (* 100 (:opacity color)) "%")])]]
 
-        (when (and copy-data (not image))
-          [:& copy-button {:data copy-data}])]
+          (when color-library-name
+            [:div {:class (stl/css :second-row)}
+             [:div {:class (stl/css :color-name-library)}
+              color-library-name]])]]
 
-       (when image
-         (let [mtype     (-> image :mtype)
-               name      (or (:name image) (tr "media.image"))
-               extension (cm/mtype->extension mtype)]
-           [:a.download-button {:target "_blank"
-                                :download (cond-> name extension (str/concat extension))
-                                :href (cf/resolve-file-media image)}
-            (tr "inspect.attributes.image.download")]))])))
+        [:div {:class (stl/css :color-info)}
+         [:div {:class (stl/css :first-row)}
+          [:div {:class (stl/css :name-opacity)}
+           [:span {:class (stl/css-case :color-value-wrapper true
+                                        :gradient-name (:gradient color))}
+            (if (:gradient color)
+              [:& cbn/color-name {:color color
+                                  :size 80}]
+              (case format
+                :hex [:& cbn/color-name {:color color
+                                         :size 80}]
+                :rgba (let [[r g b a] (cc/hex->rgba (:color color) (:opacity color))]
+                        [:* (str/fmt "%s, %s, %s, %s" r g b a)])
+                :hsla (let [[h s l a] (cc/hex->hsla (:color color) (:opacity color))
+                            result (cc/format-hsla [h s l a])]
+                        [:* result])))]
+
+           (when-not (:gradient color)
+             [:span {:class (stl/css :opacity-info)}
+              (str (* 100 (:opacity color)) "%")])]]
+
+         (when color-library-name
+           [:div {:class (stl/css :second-row)}
+            [:div {:class (stl/css :color-name-library)}
+             color-library-name]])])]
+
+     (when image
+       (let [mtype     (-> image :mtype)
+             name      (or (:name image) (tr "media.image"))
+             extension (cm/mtype->extension mtype)]
+         [:a {:class (stl/css :download-button)
+              :target "_blank"
+              :download (cond-> name extension (str/concat extension))
+              :href (cf/resolve-file-media image)}
+          (tr "inspect.attributes.image.download")]))]))
 
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
index 709ca251e..b95541732 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
@@ -10,70 +10,45 @@
   display: grid;
   grid-template-columns: $s-16 $s-72 $s-156;
   gap: $s-4;
-  .bullet-wrapper {
-    @include flexCenter;
-    height: $s-32;
-  }
-  .format-wrapper {
-    width: $s-72;
-    height: $s-32;
-    .select-format-wrapper {
-      width: 100%;
-      div {
-        background-color: transparent;
-        border: none;
-        padding-left: $s-2;
-        color: var(--menu-foreground-color-rest);
-      }
-    }
-    .format-info {
-      @include tabTitleTipography;
-      display: flex;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      padding-left: $s-2;
-      font-size: $fs-12;
-      color: var(--menu-foreground-color-rest);
-    }
+}
+
+.bullet-wrapper {
+  @include flexCenter;
+  height: $s-32;
+}
+
+.format-wrapper {
+  width: $s-72;
+  height: $s-32;
+}
+
+.select-format-wrapper {
+  width: 100%;
+  div {
+    background-color: transparent;
+    border: none;
+    padding-left: $s-2;
+    color: var(--menu-foreground-color-rest);
   }
 }
 
+.format-info {
+  @include tabTitleTipography;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding-left: $s-2;
+  font-size: $fs-12;
+  color: var(--menu-foreground-color-rest);
+}
+
 .color-info {
   display: flex;
   align-items: flex-start;
   gap: $s-4;
   flex-grow: 1;
 
-  .color-name-wrapper {
-    @include titleTipography;
-    @include flexColumn;
-    padding: $s-8 $s-4 $s-8 $s-8;
-    height: $s-32;
-    max-width: $s-80;
-    &.gradient-color {
-      max-width: $s-124;
-    }
-    .color-name-library {
-      @include titleTipography;
-      @include textEllipsis;
-      text-align: left;
-      height: $s-16;
-      color: var(--menu-foreground-color-rest);
-    }
-    .color-value-wrapper {
-      @include titleTipography;
-      height: $s-16;
-      color: var(--menu-foreground-color);
-    }
-  }
-
-  .opacity-info {
-    @include titleTipography;
-    color: var(--menu-foreground-color);
-    padding: $s-8 0;
-  }
-
   button {
     visibility: hidden;
     min-width: $s-28;
@@ -83,51 +58,84 @@
   }
 }
 
+.color-name-wrapper {
+  @include titleTipography;
+  @include flexColumn;
+  padding: $s-8 $s-4 $s-8 $s-8;
+  height: $s-32;
+  max-width: $s-80;
+  &.gradient-color {
+    max-width: $s-124;
+  }
+  .color-name-library {
+    @include titleTipography;
+    @include textEllipsis;
+    text-align: left;
+    height: $s-16;
+    color: var(--menu-foreground-color-rest);
+  }
+  .color-value-wrapper {
+    @include titleTipography;
+    height: $s-16;
+    color: var(--menu-foreground-color);
+  }
+}
+
+.opacity-info {
+  @include titleTipography;
+  color: var(--menu-foreground-color);
+  padding: $s-8 0;
+}
+
 .color-info,
 .color-row-copy-btn {
   @include copyWrapper;
-  .first-row {
-    display: grid;
-    grid-template-columns: 1fr $s-20;
-    grid-template-areas: "name button";
-    height: fit-content;
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    .name-opacity {
-      grid-area: name;
-      height: fit-content;
-      max-width: $s-124;
-      line-height: $s-16;
-      .color-value-wrapper {
-        @include inspectValue;
-        text-transform: uppercase;
-        max-width: $s-124;
-        padding-right: $s-8;
-        &.gradient-name {
-          text-transform: none;
-        }
-      }
-      .opacity-info {
-        @include inspectValue;
-        text-transform: uppercase;
-      }
-    }
-  }
+}
 
-  .second-row {
-    min-height: $s-16;
-    padding-right: $s-8;
-    width: 100%;
-    text-align: left;
-    margin: 0;
-    padding: 0;
-    .color-name-library {
-      @include inspectValue;
-      color: var(--menu-foreground-color-rest);
-    }
+.first-row {
+  display: grid;
+  grid-template-columns: 1fr $s-20;
+  grid-template-areas: "name button";
+  height: fit-content;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.name-opacity {
+  grid-area: name;
+  height: fit-content;
+  max-width: $s-124;
+  line-height: $s-16;
+}
+
+.color-value-wrapper {
+  @include inspectValue;
+  text-transform: uppercase;
+  max-width: $s-124;
+  padding-right: $s-8;
+  &.gradient-name {
+    text-transform: none;
   }
 }
+.opacity-info {
+  @include inspectValue;
+  text-transform: uppercase;
+}
+
+.second-row {
+  min-height: $s-16;
+  padding-right: $s-8;
+  width: 100%;
+  text-align: left;
+  margin: 0;
+  padding: 0;
+}
+
+.color-name-library {
+  @include inspectValue;
+  color: var(--menu-foreground-color-rest);
+}
 
 .download-button {
   @extend .button-secondary;
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs
index 13667f38a..77df200a0 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs
@@ -8,7 +8,6 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.main.ui.components.title-bar :refer [title-bar]]
-   [app.main.ui.context :as ctx]
    [app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
    [app.util.code-gen.style-css :as css]
    [app.util.i18n :refer [tr]]
@@ -34,8 +33,7 @@
 (mf/defc fill-block
   {::mf/wrap-props false}
   [{:keys [objects shape]}]
-  (let [new-css-system  (mf/use-ctx ctx/new-css-system)
-        format*   (mf/use-state :hex)
+  (let [format*   (mf/use-state :hex)
         format    (deref format*)
 
         color     (shape->color shape)
@@ -43,54 +41,28 @@
         (mf/use-fn
          (fn [format]
            (reset! format* format)))]
-    (if new-css-system
-      [:div {:class (stl/css :attributes-fill-block)}
-       [:& color-row
-        {:color color
-         :format format
-         :on-change-format on-change
-         :copy-data (css/get-shape-properties-css objects {:fills [shape]} properties)}]]
-
-
-      [:div.attributes-fill-block
-       [:& color-row
-        {:color color
-         :format format
-         :on-change-format on-change
-         :copy-data (css/get-shape-properties-css objects {:fills [shape]} properties)}]])))
+    [:div {:class (stl/css :attributes-fill-block)}
+     [:& color-row
+      {:color color
+       :format format
+       :on-change-format on-change
+       :copy-data (css/get-shape-properties-css objects {:fills [shape]} properties)}]]))
 
 (mf/defc fill-panel
   {::mf/wrap-props false}
   [{:keys [shapes]}]
-  (let [new-css-system  (mf/use-ctx ctx/new-css-system)
-        shapes (filter has-fill? shapes)]
-    (if new-css-system
-      (when (seq shapes)
-        [:div {:class (stl/css :attributes-block)}
-          [:& title-bar {:collapsable? false
-                        :title        (tr "inspect.attributes.fill")
-                        :class        (stl/css :title-spacing-fill)}]
+  (let [shapes (filter has-fill? shapes)]
+    (when (seq shapes)
+      [:div {:class (stl/css :attributes-block)}
+       [:& title-bar {:collapsable? false
+                      :title        (tr "inspect.attributes.fill")
+                      :class        (stl/css :title-spacing-fill)}]
 
-         [:div {:class (stl/css :attributes-content)}
-          (for [shape shapes]
-            (if (seq (:fills shape))
-              (for [value (:fills shape [])]
-                [:& fill-block {:key (str "fill-block-" (:id shape) value)
-                                :shape value}])
-              [:& fill-block {:key (str "fill-block-only" (:id shape))
-                              :shape shape}]))]])
-
-
-     (when (seq shapes)
-       [:div.attributes-block
-        [:div.attributes-block-title
-         [:div.attributes-block-title-text (tr "inspect.attributes.fill")]]
-
-        [:div.attributes-fill-blocks
-         (for [shape shapes]
-           (if (seq (:fills shape))
-             (for [value (:fills shape [])]
-               [:& fill-block {:key (str "fill-block-" (:id shape) value)
-                               :shape value}])
-             [:& fill-block {:key (str "fill-block-only" (:id shape))
-                             :shape shape}]))]]))))
+       [:div {:class (stl/css :attributes-content)}
+        (for [shape shapes]
+          (if (seq (:fills shape))
+            (for [value (:fills shape [])]
+              [:& fill-block {:key (str "fill-block-" (:id shape) value)
+                              :shape value}])
+            [:& fill-block {:key (str "fill-block-only" (:id shape))
+                            :shape shape}]))]])))
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss
index 6a0f53d67..3f3e3a9bd 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/fill.scss
@@ -8,7 +8,8 @@
 
 .attributes-block {
   @include flexColumn;
-  .title-spacing-fill {
-    @extend .attr-title;
-  }
+}
+
+.title-spacing-fill {
+  @extend .attr-title;
 }
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs
index 98790d234..b22c15726 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs
@@ -10,7 +10,6 @@
    [app.common.data :as d]
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.title-bar :refer [title-bar]]
-   [app.main.ui.context :as ctx]
    [app.util.code-gen.style-css :as css]
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -19,51 +18,27 @@
 
 (mf/defc geometry-block
   [{:keys [objects shape]}]
-  (let [new-css-system  (mf/use-ctx ctx/new-css-system)]
-    (if new-css-system
-      [:*
-       (for [property properties]
-         (when-let [value (css/get-css-value objects shape property)]
-           [:div {:class (stl/css :geometry-row)}
-            [:div {:class (stl/css :global/attr-label)} (d/name property)]
-            [:div {:class (stl/css :global/attr-value)}
-             [:& copy-button {:data (css/get-css-property objects shape property)}
-              [:div {:class (stl/css :button-children)} value]]]]))]
-
-      [:*
-       (for [property properties]
-         (when-let [value (css/get-css-value objects shape property)]
-           [:div.attributes-unit-row
-            [:div.attributes-label (d/name property)]
-            [:div.attributes-value value]
-            [:& copy-button {:data (css/get-css-property objects shape property)}]]))])))
+  [:*
+   (for [property properties]
+     (when-let [value (css/get-css-value objects shape property)]
+       [:div {:class (stl/css :geometry-row)}
+        [:div {:class (stl/css :global/attr-label)} (d/name property)]
+        [:div {:class (stl/css :global/attr-value)}
+         [:& copy-button {:data (css/get-css-property objects shape property)}
+          [:div {:class (stl/css :button-children)} value]]]]))])
 
 
 (mf/defc geometry-panel
   [{:keys [objects shapes]}]
-  (let [new-css-system  (mf/use-ctx ctx/new-css-system)]
-    (if new-css-system
-      [:div {:class (stl/css :attributes-block)}
-       [:& title-bar {:collapsable? false
-                      :title        (tr "inspect.attributes.size")
-                      :class        (stl/css :title-spacing-geometry)}
+  [:div {:class (stl/css :attributes-block)}
+   [:& title-bar {:collapsable? false
+                  :title        (tr "inspect.attributes.size")
+                  :class        (stl/css :title-spacing-geometry)}
 
-        (when (= (count shapes) 1)
-          [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
+    (when (= (count shapes) 1)
+      [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
 
-       (for [shape shapes]
-         [:& geometry-block {:shape shape
-                             :objects objects
-                             :key (:id shape)}])]
-
-
-      [:div.attributes-block
-       [:div.attributes-block-title
-        [:div.attributes-block-title-text (tr "inspect.attributes.size")]
-        (when (= (count shapes) 1)
-          [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
-
-       (for [shape shapes]
-         [:& geometry-block {:shape shape
-                             :objects objects
-                             :key (:id shape)}])])))
+   (for [shape shapes]
+     [:& geometry-block {:shape shape
+                         :objects objects
+                         :key (:id shape)}])])
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss
index 6f21ef2c7..2b1f431fb 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/geometry.scss
@@ -8,14 +8,16 @@
 
 .attributes-block {
   @include flexColumn;
-  .title-spacing-geometry {
-    @extend .attr-title;
-  }
+}
+
+.title-spacing-geometry {
+  @extend .attr-title;
 }
 
 .geometry-row {
   @extend .attr-row;
-  .button-children {
-    @extend .copy-button-children;
-  }
+}
+
+.button-children {
+  @extend .copy-button-children;
 }
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs
index 95cbcfa07..4f22213db 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/image.cljs
@@ -11,7 +11,6 @@
    [app.common.media :as cm]
    [app.config :as cf]
    [app.main.ui.components.copy-button :refer [copy-button]]
-   [app.main.ui.context :as ctx]
    [app.util.code-gen.style-css :as css]
    [app.util.i18n :refer [tr]]
    [cuerdas.core :as str]
@@ -22,58 +21,31 @@
 
 (mf/defc image-panel
   [{:keys [objects shapes]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)]
-    (if new-css-system
-      (for [shape (filter cfh/image-shape? shapes)]
-        [:div {:class (stl/css :attributes-block)
-               :key (str "image-" (:id shape))}
-        [:div {:class (stl/css :image-wrapper)}
-         [:img {:src (cf/resolve-file-media (-> shape :metadata))}]]
+  (for [shape (filter cfh/image-shape? shapes)]
+    [:div {:class (stl/css :attributes-block)
+           :key (str "image-" (:id shape))}
+     [:div {:class (stl/css :image-wrapper)}
+      [:img {:src (cf/resolve-file-media (-> shape :metadata))}]]
 
-        [:div {:class (stl/css :image-row)}
-         [:div {:class (stl/css :global/attr-label)}
-          (tr "inspect.attributes.image.width")]
-         [:div {:class (stl/css :global/attr-value)}
-          [:& copy-button {:data (css/get-css-property objects (:metadata shape) :width)}
-           [:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :width)]]]]
+     [:div {:class (stl/css :image-row)}
+      [:div {:class (stl/css :global/attr-label)}
+       (tr "inspect.attributes.image.width")]
+      [:div {:class (stl/css :global/attr-value)}
+       [:& copy-button {:data (css/get-css-property objects (:metadata shape) :width)}
+        [:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :width)]]]]
 
-        [:div {:class (stl/css :image-row)}
-         [:div {:class (stl/css :global/attr-label)}
-          (tr "inspect.attributes.image.height")]
-         [:div {:class (stl/css :global/attr-value)}
-          [:& copy-button {:data (css/get-css-property objects (:metadata shape) :height)}
-           [:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :height)]]]]
+     [:div {:class (stl/css :image-row)}
+      [:div {:class (stl/css :global/attr-label)}
+       (tr "inspect.attributes.image.height")]
+      [:div {:class (stl/css :global/attr-value)}
+       [:& copy-button {:data (css/get-css-property objects (:metadata shape) :height)}
+        [:div {:class (stl/css :button-children)} (css/get-css-value objects (:metadata shape) :height)]]]]
 
-        (let [mtype     (-> shape :metadata :mtype)
-              name      (:name shape)
-              extension (cm/mtype->extension mtype)]
-          [:a   {:class (stl/css :download-button)
-                 :target "_blank"
-                               :download (cond-> name extension (str/concat extension))
-                               :href (cf/resolve-file-media (-> shape :metadata))}
-           (tr "inspect.attributes.image.download")])])
-
-
-      (for [shape (filter cfh/image-shape? shapes)]
-        [:div.attributes-block {:key (str "image-" (:id shape))}
-         [:div.attributes-image-row
-          [:div.attributes-image
-           [:img {:src (cf/resolve-file-media (-> shape :metadata))}]]]
-
-         [:div.attributes-unit-row
-          [:div.attributes-label (tr "inspect.attributes.image.width")]
-          [:div.attributes-value (css/get-css-value objects (:metadata shape) :width)]
-          [:& copy-button {:data (css/get-css-property objects (:metadata shape) :width)}]]
-
-         [:div.attributes-unit-row
-          [:div.attributes-label (tr "inspect.attributes.image.height")]
-          [:div.attributes-value (css/get-css-value objects (:metadata shape) :height)]
-          [:& copy-button {:data (css/get-css-property objects (:metadata shape) :height)}]]
-
-         (let [mtype     (-> shape :metadata :mtype)
-               name      (:name shape)
-               extension (cm/mtype->extension mtype)]
-           [:a.download-button {:target "_blank"
-                                :download (cond-> name extension (str/concat extension))
-                                :href (cf/resolve-file-media (-> shape :metadata))}
-            (tr "inspect.attributes.image.download")])]))))
+     (let [mtype     (-> shape :metadata :mtype)
+           name      (:name shape)
+           extension (cm/mtype->extension mtype)]
+       [:a   {:class (stl/css :download-button)
+              :target "_blank"
+              :download (cond-> name extension (str/concat extension))
+              :href (cf/resolve-file-media (-> shape :metadata))}
+        (tr "inspect.attributes.image.download")])]))
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss
index c9fb40d7e..80f753a2c 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss
@@ -9,33 +9,37 @@
 .attributes-block {
   @include flexColumn;
   margin-bottom: $s-16;
-  .image-wrapper {
-    background-color: var(--menu-background-color);
-    position: relative;
-    @include flexCenter;
-    width: $s-248;
-    height: $s-160;
-    max-height: $s-160;
-    max-width: $s-248;
-    margin: $s-8 0;
-    border-radius: $br-8;
+}
 
-    img {
-      height: 100%;
-      width: 100%;
-      object-fit: contain;
-    }
-  }
-  .image-row {
-    @extend .attr-row;
-    .button-children {
-      @extend .copy-button-children;
-    }
-  }
-  .download-button {
-    @extend .button-secondary;
-    @include tabTitleTipography;
-    height: $s-32;
-    margin-top: $s-4;
+.image-wrapper {
+  background-color: var(--menu-background-color);
+  position: relative;
+  @include flexCenter;
+  width: $s-248;
+  height: $s-160;
+  max-height: $s-160;
+  max-width: $s-248;
+  margin: $s-8 0;
+  border-radius: $br-8;
+
+  img {
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
   }
 }
+
+.image-row {
+  @extend .attr-row;
+}
+
+.button-children {
+  @extend .copy-button-children;
+}
+
+.download-button {
+  @extend .button-secondary;
+  @include tabTitleTipography;
+  height: $s-32;
+  margin-top: $s-4;
+}
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs
index c85cd0fa4..0e644210b 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs
@@ -11,7 +11,6 @@
    [app.common.types.shape.layout :as ctl]
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.title-bar :refer [title-bar]]
-   [app.main.ui.context :as ctx]
    [app.util.code-gen.style-css :as css]
    [rumext.v2 :as mf]))
 
@@ -30,57 +29,30 @@
 
 (mf/defc layout-block
   [{:keys [objects shape]}]
-  (let [new-css-system  (mf/use-ctx ctx/new-css-system)]
+  (for [property properties]
+    (when-let [value (css/get-css-value objects shape property)]
+      [:div {:class (stl/css :layout-row)}
+       [:div {:title (d/name property)
+              :class (stl/css :global/attr-label)} (d/name property)]
+       [:div {:class (stl/css :global/attr-value)}
 
-    (if new-css-system
-      [:*
-       (for [property properties]
-         (when-let [value (css/get-css-value objects shape property)]
-           [:div {:class (stl/css :layout-row)}
-            [:div {:title (d/name property)
-                   :class (stl/css :global/attr-label)} (d/name property)]
-            [:div {:class (stl/css :global/attr-value)}
-
-             [:& copy-button {:data (css/get-css-property objects shape property)}
-              [:div {:class (stl/css :button-children)} value]]]]))]
-
-      [:*
-       (for [property properties]
-         (when-let [value (css/get-css-value objects shape property)]
-           [:div.attributes-unit-row
-            [:div.attributes-label {:title (d/name property)} (d/name property)]
-            [:div.attributes-value value]
-            [:& copy-button {:data (css/get-css-property objects shape property)}]]))])))
+        [:& copy-button {:data (css/get-css-property objects shape property)}
+         [:div {:class (stl/css :button-children)} value]]]])))
 
 (mf/defc layout-panel
   [{:keys [objects shapes]}]
-  (let [shapes (->> shapes (filter ctl/any-layout?))
-        new-css-system  (mf/use-ctx ctx/new-css-system)]
+  (let [shapes (->> shapes (filter ctl/any-layout?))]
 
-    (if new-css-system
-      (when (seq shapes)
-        [:div {:class (stl/css :attributes-block)}
-         [:& title-bar {:collapsable? false
-                        :title        "Layout"
-                        :class        (stl/css :title-spacing-layout)}
+    (when (seq shapes)
+      [:div {:class (stl/css :attributes-block)}
+       [:& title-bar {:collapsable? false
+                      :title        "Layout"
+                      :class        (stl/css :title-spacing-layout)}
 
-          (when (= (count shapes) 1)
-            [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
+        (when (= (count shapes) 1)
+          [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
 
-         (for [shape shapes]
-           [:& layout-block {:shape shape
-                             :objects objects
-                             :key (:id shape)}])])
-
-
-      (when (seq shapes)
-        [:div.attributes-block
-         [:div.attributes-block-title
-          [:div.attributes-block-title-text "Layout"]
-          (when (= (count shapes) 1)
-            [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
-
-         (for [shape shapes]
-           [:& layout-block {:shape shape
-                             :objects objects
-                             :key (:id shape)}])]))))
+       (for [shape shapes]
+         [:& layout-block {:shape shape
+                           :objects objects
+                           :key (:id shape)}])])))
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss
index 3c7497ce9..e2a409c0f 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout.scss
@@ -8,14 +8,16 @@
 
 .attributes-block {
   @include flexColumn;
-  .title-spacing-layout {
-    @extend .attr-title;
-  }
+}
+
+.title-spacing-layout {
+  @extend .attr-title;
 }
 
 .layout-row {
   @extend .attr-row;
-  .button-children {
-    @extend .copy-button-children;
-  }
+}
+
+.button-children {
+  @extend .copy-button-children;
 }
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs
index f629428f8..c0efb66c3 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.cljs
@@ -11,7 +11,6 @@
    [app.common.types.shape.layout :as ctl]
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.title-bar :refer [title-bar]]
-   [app.main.ui.context :as ctx]
    [app.util.code-gen.style-css :as css]
    [rumext.v2 :as mf]))
 
@@ -23,7 +22,6 @@
    :min-width
    :align-self
    :justify-self
-
    :flex-shrink
    :flex
 
@@ -33,30 +31,18 @@
 
 (mf/defc layout-element-block
   [{:keys [objects shape]}]
-  (let [new-css-system  (mf/use-ctx ctx/new-css-system)]
-    (if new-css-system
-      [:*
-       (for [property properties]
-         (when-let [value (css/get-css-value objects shape property)]
-           [:div {:class (stl/css :layout-element-row)}
-            [:div {:class (stl/css :global/attr-label)} (d/name property)]
-            [:div {:class (stl/css :global/attr-value)}
+  (for [property properties]
+    (when-let [value (css/get-css-value objects shape property)]
+      [:div {:class (stl/css :layout-element-row)}
+       [:div {:class (stl/css :global/attr-label)} (d/name property)]
+       [:div {:class (stl/css :global/attr-value)}
 
-             [:& copy-button {:data (css/get-css-property objects shape property)}
-              [:div {:class (stl/css :button-children)} value]]]]))]
-
-      [:*
-       (for [property properties]
-         (when-let [value (css/get-css-value objects shape property)]
-           [:div.attributes-unit-row
-            [:div.attributes-label (d/name property)]
-            [:div.attributes-value value]
-            [:& copy-button {:data (css/get-css-property objects shape property)}]]))])))
+        [:& copy-button {:data (css/get-css-property objects shape property)}
+         [:div {:class (stl/css :button-children)} value]]]])))
 
 (mf/defc layout-element-panel
   [{:keys [objects shapes]}]
-  (let [new-css-system  (mf/use-ctx ctx/new-css-system)
-        shapes (->> shapes (filter #(ctl/any-layout-immediate-child? objects %)))
+  (let [shapes (->> shapes (filter #(ctl/any-layout-immediate-child? objects %)))
         only-flex? (every? #(ctl/flex-layout-immediate-child? objects %) shapes)
         only-grid? (every? #(ctl/grid-layout-immediate-child? objects %) shapes)
 
@@ -75,28 +61,15 @@
           :else
           "Layout element")]
 
-    (if new-css-system
-      (when some-layout-prop?
-        [:div {:class (stl/css :attributes-block)}
-         [:& title-bar {:collapsable? false
-                        :title        menu-title
-                        :class        (stl/css :title-spacing-layout-element)}
-          (when (= (count shapes) 1)
-            [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
+    (when some-layout-prop?
+      [:div {:class (stl/css :attributes-block)}
+       [:& title-bar {:collapsable? false
+                      :title        menu-title
+                      :class        (stl/css :title-spacing-layout-element)}
+        (when (= (count shapes) 1)
+          [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
 
-         (for [shape shapes]
-           [:& layout-element-block {:shape shape
-                                     :objects objects
-                                     :key (:id shape)}])])
-
-      (when some-layout-prop?
-        [:div.attributes-block
-         [:div.attributes-block-title
-          [:div.attributes-block-title-text menu-title]
-          (when (= (count shapes) 1)
-            [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)}])]
-
-         (for [shape shapes]
-           [:& layout-element-block {:shape shape
-                                     :objects objects
-                                     :key (:id shape)}])]))))
+       (for [shape shapes]
+         [:& layout-element-block {:shape shape
+                                   :objects objects
+                                   :key (:id shape)}])])))
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss
index 4d9788544..6ef7e6cea 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/layout_element.scss
@@ -8,14 +8,16 @@
 
 .attributes-block {
   @include flexColumn;
-  .title-spacing-layout-element {
-    @extend .attr-title;
-  }
+}
+
+.title-spacing-layout-element {
+  @extend .attr-title;
 }
 
 .layout-element-row {
   @extend .attr-row;
-  .button-children {
-    @extend .copy-button-children;
-  }
+}
+
+.button-children {
+  @extend .copy-button-children;
 }
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs
index 54f3875e0..6ff7d452e 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs
@@ -11,7 +11,6 @@
    [app.common.data.macros :as dm]
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.title-bar :refer [title-bar]]
-   [app.main.ui.context :as ctx]
    [app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
    [app.util.code-gen.style-css :as css]
    [app.util.i18n :refer [tr]]
@@ -50,29 +49,16 @@
                     :on-change-format #(reset! color-format %)}]]))
 
 (mf/defc shadow-panel [{:keys [shapes]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        shapes (->> shapes (filter has-shadow?))]
+  (let [shapes (->> shapes (filter has-shadow?))]
 
-    (if new-css-system
-      (when (and (seq shapes) (> (count shapes) 0))
-        [:div {:class (stl/css :attributes-block)}
-         [:& title-bar {:collapsable? false
-                        :title        (tr "inspect.attributes.shadow")
-                        :class        (stl/css :title-spacing-shadow)}]
+    (when (and (seq shapes) (> (count shapes) 0))
+      [:div {:class (stl/css :attributes-block)}
+       [:& title-bar {:collapsable? false
+                      :title        (tr "inspect.attributes.shadow")
+                      :class        (stl/css :title-spacing-shadow)}]
 
-         [:div {:class (stl/css :attributes-content)}
-          (for [shape shapes]
-            (for [shadow (:shadow shape)]
-              [:& shadow-block {:shape shape
-                                :shadow shadow}]))]])
-
-      (when (and (seq shapes) (> (count shapes) 0))
-        [:div.attributes-block
-         [:div.attributes-block-title
-          [:div.attributes-block-title-text (tr "inspect.attributes.shadow")]]
-
-         [:div.attributes-shadow-blocks
-          (for [shape shapes]
-            (for [shadow (:shadow shape)]
-              [:& shadow-block {:shape shape
-                                :shadow shadow}]))]]))))
+       [:div {:class (stl/css :attributes-content)}
+        (for [shape shapes]
+          (for [shadow (:shadow shape)]
+            [:& shadow-block {:shape shape
+                              :shadow shadow}]))]])))
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.scss
index f96bd71cf..1d741ab26 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/shadow.scss
@@ -8,15 +8,16 @@
 
 .attributes-block {
   @include flexColumn;
-  .title-spacing-shadow {
-    @extend .attr-title;
-  }
 }
-.attributes-shadow-block {
-  .shadow-row {
-    @extend .attr-row;
-    .button-children {
-      @extend .copy-button-children;
-    }
-  }
+
+.title-spacing-shadow {
+  @extend .attr-title;
+}
+
+.shadow-row {
+  @extend .attr-row;
+}
+
+.button-children {
+  @extend .copy-button-children;
 }
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
index 707c4d054..64ff49104 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs
@@ -11,7 +11,6 @@
    [app.common.data.macros :as dm]
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.title-bar :refer [title-bar]]
-   [app.main.ui.context :as ctx]
    [app.main.ui.formats :as fmt]
    [app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
    [app.util.code-gen.style-css-formats :as cssf]
@@ -33,82 +32,41 @@
 
 (mf/defc stroke-block
   [{:keys [stroke]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        color-format   (mf/use-state :hex)
+  (let [color-format   (mf/use-state :hex)
         color          (stroke->color stroke)]
-    (if new-css-system
-      [:div {:class (stl/css :attributes-stroke-block)}
-       (let [{:keys [stroke-style stroke-alignment]} stroke
-             stroke-style (if (= stroke-style :svg) :solid stroke-style)
-             stroke-alignment (or stroke-alignment :center)
-             stroke-def (dm/str (fmt/format-pixels (:stroke-width stroke)) " "
-                                (tr (dm/str "inspect.attributes.stroke.style." (or (d/name stroke-style) "none"))) " "
-                                (tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment))))]
+    [:div {:class (stl/css :attributes-stroke-block)}
+     (let [{:keys [stroke-style stroke-alignment]} stroke
+           stroke-style (if (= stroke-style :svg) :solid stroke-style)
+           stroke-alignment (or stroke-alignment :center)
+           stroke-def (dm/str (fmt/format-pixels (:stroke-width stroke)) " "
+                              (tr (dm/str "inspect.attributes.stroke.style." (or (d/name stroke-style) "none"))) " "
+                              (tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment))))]
 
-         [:*
-          [:& color-row {:color color
-                         :format @color-format
-                         :copy-data (uc/color->background color)
-                         :on-change-format #(reset! color-format %)}]
+       [:*
+        [:& color-row {:color color
+                       :format @color-format
+                       :copy-data (uc/color->background color)
+                       :on-change-format #(reset! color-format %)}]
 
-          [:div {:class (stl/css :stroke-row)}
-           [:div {:class (stl/css :global/attr-label)}
-            "Border"]
-           [:div {:class (stl/css :global/attr-value)}
+        [:div {:class (stl/css :stroke-row)}
+         [:div {:class (stl/css :global/attr-label)}
+          "Border"]
+         [:div {:class (stl/css :global/attr-value)}
 
-            [:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))}
-             [:div {:class (stl/css :button-children)} stroke-def]]]]])]
-
-
-      [:div.attributes-stroke-block
-       (let [{:keys [stroke-style stroke-alignment]} stroke
-             stroke-style (if (= stroke-style :svg) :solid stroke-style)
-             stroke-alignment (or stroke-alignment :center)]
-         [:div.attributes-stroke-row
-          [:div.attributes-label (tr "inspect.attributes.stroke.width")]
-          [:div.attributes-value (fmt/format-pixels (:stroke-width stroke))]
-                            ;; Execution time translation strings:
-                            ;;   inspect.attributes.stroke.style.dotted
-                            ;;   inspect.attributes.stroke.style.mixed
-                            ;;   inspect.attributes.stroke.style.none
-                            ;;   inspect.attributes.stroke.style.solid
-          [:div.attributes-value (tr (dm/str "inspect.attributes.stroke.style." (d/name stroke-style)))]
-                            ;; Execution time translation strings:
-                            ;;   inspect.attributes.stroke.alignment.center
-                            ;;   inspect.attributes.stroke.alignment.inner
-                            ;;   inspect.attributes.stroke.alignment.outer
-          [:div.attributes-label (tr (dm/str "inspect.attributes.stroke.alignment." (d/name stroke-alignment)))]
-          [:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))}]])
-       [:& color-row {:color color
-                      :format @color-format
-                      :copy-data (uc/color->background color)
-                      :on-change-format #(reset! color-format %)}]])))
+          [:& copy-button {:data (cssf/format-value :border (cssv/get-stroke-data stroke))}
+           [:div {:class (stl/css :button-children)} stroke-def]]]]])]))
 
 (mf/defc stroke-panel
   [{:keys [shapes]}]
-  (let [new-css-system     (mf/use-ctx ctx/new-css-system)
-        shapes (->> shapes (filter has-stroke?))]
-    (if new-css-system
-      (when (seq shapes)
-        [:div {:class (stl/css :attributes-block)}
-         [:& title-bar {:collapsable? false
-                        :title        (tr "inspect.attributes.stroke")
-                        :class        (stl/css :title-spacing-stroke)}]
+  (let [shapes (->> shapes (filter has-stroke?))]
+    (when (seq shapes)
+      [:div {:class (stl/css :attributes-block)}
+       [:& title-bar {:collapsable? false
+                      :title        (tr "inspect.attributes.stroke")
+                      :class        (stl/css :title-spacing-stroke)}]
 
-         [:div {:class (stl/css :attributes-content)}
-          (for [shape shapes]
-            (for [value (:strokes shape)]
-              [:& stroke-block {:key (str "stroke-color-" (:id shape) value)
-                                :stroke value}]))]])
-
-
-      (when (seq shapes)
-        [:div.attributes-block
-         [:div.attributes-block-title
-          [:div.attributes-block-title-text (tr "inspect.attributes.stroke")]]
-
-         [:div.attributes-stroke-blocks
-          (for [shape shapes]
-            (for [value (:strokes shape)]
-              [:& stroke-block {:key (str "stroke-color-" (:id shape) value)
-                                :stroke value}]))]]))))
+       [:div {:class (stl/css :attributes-content)}
+        (for [shape shapes]
+          (for [value (:strokes shape)]
+            [:& stroke-block {:key (str "stroke-color-" (:id shape) value)
+                              :stroke value}]))]])))
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss
index b0d915775..86cb67104 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/stroke.scss
@@ -8,16 +8,20 @@
 
 .attributes-block {
   @include flexColumn;
-  .title-spacing-stroke {
-    @extend .attr-title;
-  }
 }
+
+.title-spacing-stroke {
+  @extend .attr-title;
+}
+
 .attributes-stroke-block {
   @include flexColumn;
-  .stroke-row {
-    @extend .attr-row;
-    .button-children {
-      @extend .copy-button-children;
-    }
-  }
+}
+
+.stroke-row {
+  @extend .attr-row;
+}
+
+.button-children {
+  @extend .copy-button-children;
 }
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs
index c6dc88e92..5f23fd798 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs
@@ -21,38 +21,20 @@
        (str/join "; ")))
 
 (mf/defc svg-attr [{:keys [attr value]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)]
-    (if new-css-system
+  (if (map? value)
+    [:*
+     [:div {:class (stl/css :attributes-subtitle)}
+      [:span (d/name attr)]
+      [:& copy-button {:data (map->css value)}]]
 
-      (if (map? value)
-        [:*
-         [:div {:class (stl/css :attributes-subtitle)}
-          [:span (d/name attr)]
-          [:& copy-button {:data (map->css value)}]]
+     (for [[attr-key attr-value] value]
+       [:& svg-attr {:attr  attr-key :value attr-value}])]
 
-         (for [[attr-key attr-value] value]
-           [:& svg-attr {:attr  attr-key :value attr-value}])]
-
-        [:div {:class (stl/css :svg-row)}
-         [:div {:class (stl/css :global/attr-label)} (d/name attr)]
-         [:div {:class (stl/css :global/attr-value)}
-          [:& copy-button {:data (d/name value)}
-           [:div {:class (stl/css :button-children)} (str value)]]]])
-
-
-      (if (map? value)
-        [:*
-         [:div.attributes-block-title
-          [:div.attributes-block-title-text (d/name attr)]
-          [:& copy-button {:data (map->css value)}]]
-
-         (for [[attr-key attr-value] value]
-           [:& svg-attr {:attr  attr-key :value attr-value}])]
-
-        [:div.attributes-unit-row
-         [:div.attributes-label (d/name attr)]
-         [:div.attributes-value (str value)]
-         [:& copy-button {:data (d/name value)}]]))))
+    [:div {:class (stl/css :svg-row)}
+     [:div {:class (stl/css :global/attr-label)} (d/name attr)]
+     [:div {:class (stl/css :global/attr-value)}
+      [:& copy-button {:data (d/name value)}
+       [:div {:class (stl/css :button-children)} (str value)]]]]))
 
 (mf/defc svg-block
   [{:keys [shape]}]
@@ -63,20 +45,10 @@
 
 (mf/defc svg-panel
   [{:keys [shapes]}]
-
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        shape (first shapes)]
-    (if new-css-system
-      (when (seq (:svg-attrs shape))
-        [:div {:class (stl/css :attributes-block)}
-         [:& title-bar {:collapsable? false
-                        :title        (tr "workspace.sidebar.options.svg-attrs.title")
-                        :class        (stl/css :title-spacing-svg)}]
-         [:& svg-block {:shape shape}]])
-
-
-      (when (seq (:svg-attrs shape))
-        [:div.attributes-block
-         [:div.attributes-block-title
-          [:div.attributes-block-title-text (tr "workspace.sidebar.options.svg-attrs.title")]]
-         [:& svg-block {:shape shape}]]))))
+  (let [shape (first shapes)]
+    (when (seq (:svg-attrs shape))
+      [:div {:class (stl/css :attributes-block)}
+       [:& title-bar {:collapsable? false
+                      :title        (tr "workspace.sidebar.options.svg-attrs.title")
+                      :class        (stl/css :title-spacing-svg)}]
+       [:& svg-block {:shape shape}]])))
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss
index 12fdc3a1c..38248e1fc 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss
@@ -8,16 +8,20 @@
 
 .attributes-block {
   @include flexColumn;
-  .title-spacing-svg {
-    @extend .attr-title;
-  }
 }
+
+.title-spacing-svg {
+  @extend .attr-title;
+}
+
 .svg-row {
   @extend .attr-row;
-  .button-children {
-    @extend .copy-button-children;
-  }
 }
+
+.button-children {
+  @extend .copy-button-children;
+}
+
 .attributes-subtitle {
   @include tabTitleTipography;
   display: flex;
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs b/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs
index 2cdc2a134..56068bcbe 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs
@@ -15,7 +15,6 @@
    [app.main.store :as st]
    [app.main.ui.components.copy-button :refer [copy-button]]
    [app.main.ui.components.title-bar :refer [title-bar]]
-   [app.main.ui.context :as ctx]
    [app.main.ui.formats :as fmt]
    [app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
    [app.util.i18n :refer [tr]]
@@ -51,8 +50,7 @@
 
 (mf/defc typography-block
   [{:keys [text style]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        typography-library-ref
+  (let [typography-library-ref
         (mf/use-memo
          (mf/deps (:typography-ref-file style))
          (make-typographies-library-ref (:typography-ref-file style)))
@@ -68,202 +66,111 @@
 
         typography (or (get (or typography-library file-typographies-viewer file-typographies-workspace) (:typography-ref-id style)) typography-external-lib)]
 
-    (if new-css-system
-      [:div {:class (stl/css :attributes-content)}
-       (when (:fills style)
-         (for [[idx fill] (map-indexed vector (:fills style))]
-           [:& color-row {:key idx
-                          :format @color-format
-                          :color (fill->color fill)
-                          :copy-data (copy-style-data fill :fill-color :fill-color-gradient)
-                          :on-change-format #(reset! color-format %)}]))
+    [:div {:class (stl/css :attributes-content)}
+     (when (:fills style)
+       (for [[idx fill] (map-indexed vector (:fills style))]
+         [:& color-row {:key idx
+                        :format @color-format
+                        :color (fill->color fill)
+                        :copy-data (copy-style-data fill :fill-color :fill-color-gradient)
+                        :on-change-format #(reset! color-format %)}]))
 
-       (when (:typography-ref-id style)
-         [:div {:class (stl/css :text-row)}
-          [:div {:class (stl/css :global/attr-label)}
-           (tr "inspect.attributes.typography")]
-          [:div {:class (stl/css :global/attr-value)}
-           [:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)}
-            [:div {:class (stl/css :button-children)} (:name typography)]]]])
+     (when (:typography-ref-id style)
+       [:div {:class (stl/css :text-row)}
+        [:div {:class (stl/css :global/attr-label)}
+         (tr "inspect.attributes.typography")]
+        [:div {:class (stl/css :global/attr-value)}
+         [:& copy-button {:data (copy-style-data typography :font-family :font-weight :font-style)}
+          [:div {:class (stl/css :button-children)} (:name typography)]]]])
 
-       (when (:font-id style)
-         [:div {:class (stl/css :text-row)}
-          [:div {:class (stl/css :global/attr-label)} (tr "inspect.attributes.typography.font-family")]
-          [:div {:class (stl/css :global/attr-value)}
-           [:& copy-button {:data (copy-style-data style :font-family)}
-            [:div {:class (stl/css :button-children)}
-             (-> style :font-id fonts/get-font-data :name)]]]])
+     (when (:font-id style)
+       [:div {:class (stl/css :text-row)}
+        [:div {:class (stl/css :global/attr-label)} (tr "inspect.attributes.typography.font-family")]
+        [:div {:class (stl/css :global/attr-value)}
+         [:& copy-button {:data (copy-style-data style :font-family)}
+          [:div {:class (stl/css :button-children)}
+           (-> style :font-id fonts/get-font-data :name)]]]])
 
-       (when (:font-style style)
-         [:div {:class (stl/css :text-row)}
-          [:div {:class (stl/css :global/attr-label)}
-           (tr "inspect.attributes.typography.font-style")]
-          [:div {:class (stl/css :global/attr-value)}
-           [:& copy-button {:data (copy-style-data style :font-style)}
-            [:div {:class (stl/css :button-children)}
-             (str (:font-style style))]]]])
+     (when (:font-style style)
+       [:div {:class (stl/css :text-row)}
+        [:div {:class (stl/css :global/attr-label)}
+         (tr "inspect.attributes.typography.font-style")]
+        [:div {:class (stl/css :global/attr-value)}
+         [:& copy-button {:data (copy-style-data style :font-style)}
+          [:div {:class (stl/css :button-children)}
+           (str (:font-style style))]]]])
 
-       (when (:font-size style)
-         [:div {:class (stl/css :text-row)}
-          [:div {:class (stl/css :global/attr-label)}
-           (tr "inspect.attributes.typography.font-size")]
-          [:div  {:class (stl/css :global/attr-value)}
-           [:& copy-button {:data (copy-style-data style :font-size)}
-            [:div {:class (stl/css :button-children)}
-             (fmt/format-pixels (:font-size style))]]]])
+     (when (:font-size style)
+       [:div {:class (stl/css :text-row)}
+        [:div {:class (stl/css :global/attr-label)}
+         (tr "inspect.attributes.typography.font-size")]
+        [:div  {:class (stl/css :global/attr-value)}
+         [:& copy-button {:data (copy-style-data style :font-size)}
+          [:div {:class (stl/css :button-children)}
+           (fmt/format-pixels (:font-size style))]]]])
 
-       (when (:font-weight style)
-         [:div {:class (stl/css :text-row)}
-          [:div {:class (stl/css :global/attr-label)}
-           (tr "inspect.attributes.typography.font-weight")]
-          [:div {:class (stl/css :global/attr-value)}
-           [:& copy-button {:data (copy-style-data style :font-weight)}
-            [:div {:class (stl/css :button-children)}
-             (str (:font-weight style))]]]])
+     (when (:font-weight style)
+       [:div {:class (stl/css :text-row)}
+        [:div {:class (stl/css :global/attr-label)}
+         (tr "inspect.attributes.typography.font-weight")]
+        [:div {:class (stl/css :global/attr-value)}
+         [:& copy-button {:data (copy-style-data style :font-weight)}
+          [:div {:class (stl/css :button-children)}
+           (str (:font-weight style))]]]])
 
-       (when (:line-height style)
-         [:div {:class (stl/css :text-row)}
-          [:div {:class (stl/css :global/attr-label)}
-           (tr "inspect.attributes.typography.line-height")]
-          [:div {:class (stl/css :global/attr-value)}
-           [:& copy-button {:data (copy-style-data style :line-height)}
-            [:div {:class (stl/css :button-children)}
-             (fmt/format-number (:line-height style))]]]])
+     (when (:line-height style)
+       [:div {:class (stl/css :text-row)}
+        [:div {:class (stl/css :global/attr-label)}
+         (tr "inspect.attributes.typography.line-height")]
+        [:div {:class (stl/css :global/attr-value)}
+         [:& copy-button {:data (copy-style-data style :line-height)}
+          [:div {:class (stl/css :button-children)}
+           (fmt/format-number (:line-height style))]]]])
 
-       (when (:letter-spacing style)
-         [:div {:class (stl/css :text-row)}
-          [:div {:class (stl/css :global/attr-label)}
-           (tr "inspect.attributes.typography.letter-spacing")]
-          [:div {:class (stl/css :global/attr-value)}
-           [:& copy-button {:data (copy-style-data style :letter-spacing)}
-            [:div {:class (stl/css :button-children)}
-             (fmt/format-pixels (:letter-spacing style))]]]])
+     (when (:letter-spacing style)
+       [:div {:class (stl/css :text-row)}
+        [:div {:class (stl/css :global/attr-label)}
+         (tr "inspect.attributes.typography.letter-spacing")]
+        [:div {:class (stl/css :global/attr-value)}
+         [:& copy-button {:data (copy-style-data style :letter-spacing)}
+          [:div {:class (stl/css :button-children)}
+           (fmt/format-pixels (:letter-spacing style))]]]])
 
-       (when (:text-decoration style)
-         [:div {:class (stl/css :text-row)}
-          [:div {:class (stl/css :global/attr-label)}
-           (tr "inspect.attributes.typography.text-decoration")]
-          ;; Execution time translation strings:
-          ;;   inspect.attributes.typography.text-decoration.none
-          ;;   inspect.attributes.typography.text-decoration.strikethrough
-          ;;   inspect.attributes.typography.text-decoration.underline
-          [:div {:class (stl/css :global/attr-value)}
-           [:& copy-button {:data (copy-style-data style :text-decoration)}
-            [:div {:class (stl/css :button-children)}
-             (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))]]]])
+     (when (:text-decoration style)
+       [:div {:class (stl/css :text-row)}
+        [:div {:class (stl/css :global/attr-label)}
+         (tr "inspect.attributes.typography.text-decoration")]
+              ;; Execution time translation strings:
+              ;;   inspect.attributes.typography.text-decoration.none
+              ;;   inspect.attributes.typography.text-decoration.strikethrough
+              ;;   inspect.attributes.typography.text-decoration.underline
+        [:div {:class (stl/css :global/attr-value)}
+         [:& copy-button {:data (copy-style-data style :text-decoration)}
+          [:div {:class (stl/css :button-children)}
+           (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))]]]])
 
-       (when (:text-transform style)
-         [:div {:class (stl/css :text-row)}
-          [:div {:class (stl/css :global/attr-label)}
-           (tr "inspect.attributes.typography.text-transform")]
-          ;; Execution time translation strings:
-          ;;   inspect.attributes.typography.text-transform.lowercase
-          ;;   inspect.attributes.typography.text-transform.none
-          ;;   inspect.attributes.typography.text-transform.titlecase
-          ;;   inspect.attributes.typography.text-transform.uppercase
-          ;;   inspect.attributes.typography.text-transform.unset
-          [:div {:class (stl/css :global/attr-value)}
-           [:& copy-button {:data (copy-style-data style :text-transform)}
-            [:div {:class (stl/css :button-children)}
-             (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))]]]])
+     (when (:text-transform style)
+       [:div {:class (stl/css :text-row)}
+        [:div {:class (stl/css :global/attr-label)}
+         (tr "inspect.attributes.typography.text-transform")]
+              ;; Execution time translation strings:
+              ;;   inspect.attributes.typography.text-transform.lowercase
+              ;;   inspect.attributes.typography.text-transform.none
+              ;;   inspect.attributes.typography.text-transform.titlecase
+              ;;   inspect.attributes.typography.text-transform.uppercase
+              ;;   inspect.attributes.typography.text-transform.unset
+        [:div {:class (stl/css :global/attr-value)}
+         [:& copy-button {:data (copy-style-data style :text-transform)}
+          [:div {:class (stl/css :button-children)}
+           (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))]]]])
 
-       [:& copy-button {:data (str/trim text)
-                        :class (stl/css :attributes-content-row)}
-        [:span {:class (stl/css :content)
-                :style {:font-family (:font-family style)
-                        :font-weight (:font-weight style)
-                        :font-style (:font-style style)}}
-         (str/trim text)]]]
-
-
-      [:div.attributes-text-block
-       (if (:typography-ref-id style)
-         [:div.attributes-typography-name-row
-          [:div.typography-entry
-           [:div.typography-sample
-            {:style {:font-family (:font-family typography)
-                     :font-weight (:font-weight typography)
-                     :font-style (:font-style typography)}}
-            (tr "workspace.assets.typography.text-styles")]]
-          [:div.typography-entry-name (:name typography)]
-          [:& copy-button {:data (copy-style-data style :font-family :font-weight :font-style)}]]
-
-         [:div.attributes-typography-row
-          [:div.typography-sample
-           {:style {:font-family (:font-family style)
-                    :font-weight (:font-weight style)
-                    :font-style (:font-style style)}}
-           (tr "workspace.assets.typography.text-styles")]
-          [:& copy-button {:data (copy-style-data style :font-family :font-weight :font-style)}]])
-
-       (when (:fills style)
-         (for [[idx fill] (map-indexed vector (:fills style))]
-           [:& color-row {:key idx
-                          :format @color-format
-                          :color (fill->color fill)
-                          :copy-data (copy-style-data fill :fill-color :fill-color-gradient)
-                          :on-change-format #(reset! color-format %)}]))
-
-       (when (:font-id style)
-         [:div.attributes-unit-row
-          [:div.attributes-label (tr "inspect.attributes.typography.font-family")]
-          [:div.attributes-value (-> style :font-id fonts/get-font-data :name)]
-          [:& copy-button {:data (copy-style-data style :font-family)}]])
-
-       (when (:font-style style)
-         [:div.attributes-unit-row
-          [:div.attributes-label (tr "inspect.attributes.typography.font-style")]
-          [:div.attributes-value (str (:font-style style))]
-          [:& copy-button {:data (copy-style-data style :font-style)}]])
-
-       (when (:font-size style)
-         [:div.attributes-unit-row
-          [:div.attributes-label (tr "inspect.attributes.typography.font-size")]
-          [:div.attributes-value (fmt/format-pixels (:font-size style))]
-          [:& copy-button {:data (copy-style-data style :font-size)}]])
-
-       (when (:font-weight style)
-         [:div.attributes-unit-row
-          [:div.attributes-label (tr "inspect.attributes.typography.font-weight")]
-          [:div.attributes-value (str (:font-weight style))]
-          [:& copy-button {:data (copy-style-data style :font-weight)}]])
-
-       (when (:line-height style)
-         [:div.attributes-unit-row
-          [:div.attributes-label (tr "inspect.attributes.typography.line-height")]
-          [:div.attributes-value (fmt/format-number (:line-height style))]
-          [:& copy-button {:data (copy-style-data style :line-height)}]])
-
-       (when (:letter-spacing style)
-         [:div.attributes-unit-row
-          [:div.attributes-label (tr "inspect.attributes.typography.letter-spacing")]
-          [:div.attributes-value (fmt/format-pixels (:letter-spacing style))]
-          [:& copy-button {:data (copy-style-data style :letter-spacing)}]])
-
-       (when (:text-decoration style)
-         [:div.attributes-unit-row
-          [:div.attributes-label (tr "inspect.attributes.typography.text-decoration")]
-          ;; Execution time translation strings:
-          ;;   inspect.attributes.typography.text-decoration.none
-          ;;   inspect.attributes.typography.text-decoration.strikethrough
-          ;;   inspect.attributes.typography.text-decoration.underline
-          [:div.attributes-value (tr (dm/str "inspect.attributes.typography.text-decoration." (:text-decoration style)))]
-          [:& copy-button {:data (copy-style-data style :text-decoration)}]])
-
-       (when (:text-transform style)
-         [:div.attributes-unit-row
-          [:div.attributes-label (tr "inspect.attributes.typography.text-transform")]
-          ;; Execution time translation strings:
-          ;;   inspect.attributes.typography.text-transform.lowercase
-          ;;   inspect.attributes.typography.text-transform.none
-          ;;   inspect.attributes.typography.text-transform.titlecase
-          ;;   inspect.attributes.typography.text-transform.uppercase
-          [:div.attributes-value (tr (dm/str "inspect.attributes.typography.text-transform." (:text-transform style)))]
-          [:& copy-button {:data (copy-style-data style :text-transform)}]])
-
-       [:div.attributes-content-row
-        [:pre.attributes-content (str/trim text)]
-        [:& copy-button {:data (str/trim text)}]]])))
+     [:& copy-button {:data (str/trim text)
+                      :class (stl/css :attributes-content-row)}
+      [:span {:class (stl/css :content)
+              :style {:font-family (:font-family style)
+                      :font-weight (:font-weight style)
+                      :font-style (:font-style style)}}
+       (str/trim text)]]]))
 
 
 (mf/defc text-block [{:keys [shape]}]
@@ -281,21 +188,11 @@
 (mf/defc text-panel
   [{:keys [shapes]}]
   (when-let [shapes (seq (filter has-text? shapes))]
-    (let [new-css-system (mf/use-ctx ctx/new-css-system)]
-      (if new-css-system
-        [:div {:class (stl/css :attributes-block)}
-         [:& title-bar {:collapsable? false
-                        :title        (tr "inspect.attributes.typography")
-                        :class        (stl/css :title-spacing-text)}]
+    [:div {:class (stl/css :attributes-block)}
+     [:& title-bar {:collapsable? false
+                    :title        (tr "inspect.attributes.typography")
+                    :class        (stl/css :title-spacing-text)}]
 
-         (for [shape shapes]
-           [:& text-block {:shape shape
-                           :key (str "text-block" (:id shape))}])]
-
-        [:div.attributes-block
-         [:div.attributes-block-title
-          [:div.attributes-block-title-text (tr "inspect.attributes.typography")]]
-
-         (for [shape shapes]
-           [:& text-block {:shape shape
-                           :key (str "text-block" (:id shape))}])]))))
+     (for [shape shapes]
+       [:& text-block {:shape shape
+                       :key (str "text-block" (:id shape))}])]))
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
index 935b0b4a6..9f111adad 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
@@ -8,41 +8,46 @@
 
 .attributes-block {
   @include flexColumn;
-  .title-spacing-text {
-    @extend .attr-title;
-  }
 }
+
+.title-spacing-text {
+  @extend .attr-title;
+}
+
 .attributes-content {
   @include flexColumn;
-  .text-row {
-    @extend .attr-row;
-    :global(.attr-value) {
-      align-items: center;
-    }
-    .button-children {
-      @extend .copy-button-children;
-    }
-  }
-  .attributes-content-row {
-    width: $s-252;
-    max-width: $s-252;
-    min-height: calc($s-2 + $s-32);
-    border-radius: $br-8;
-    border: $s-1 solid var(--menu-border-color-disabled);
-    margin-top: $s-4;
-    .content {
-      @include titleTipography;
-      width: 100%;
-      padding: 0;
-      color: var(--color-foreground-secondary);
-    }
+}
 
-    &:hover {
-      border: $s-1 solid var(--color-background-tertiary);
-      background-color: var(--menu-background-color);
-      .content {
-        color: var(--menu-foreground-color-hover);
-      }
+.text-row {
+  @extend .attr-row;
+  :global(.attr-value) {
+    align-items: center;
+  }
+}
+
+.button-children {
+  @extend .copy-button-children;
+}
+
+.attributes-content-row {
+  width: $s-252;
+  max-width: $s-252;
+  min-height: calc($s-2 + $s-32);
+  border-radius: $br-8;
+  border: $s-1 solid var(--menu-border-color-disabled);
+  margin-top: $s-4;
+  .content {
+    @include titleTipography;
+    width: 100%;
+    padding: 0;
+    color: var(--color-foreground-secondary);
+  }
+
+  &:hover {
+    border: $s-1 solid var(--color-background-tertiary);
+    background-color: var(--menu-background-color);
+    .content {
+      color: var(--menu-foreground-color-hover);
     }
   }
 }
diff --git a/frontend/src/app/main/ui/viewer/inspect/exports.cljs b/frontend/src/app/main/ui/viewer/inspect/exports.cljs
index af81e838e..da23a0ad7 100644
--- a/frontend/src/app/main/ui/viewer/inspect/exports.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/exports.cljs
@@ -13,7 +13,6 @@
    [app.main.store :as st]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.title-bar :refer [title-bar]]
-   [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr c]]
@@ -23,8 +22,7 @@
 (mf/defc exports
   {::mf/wrap [#(mf/memo % =)]}
   [{:keys [shapes page-id file-id share-id type] :as props}]
-  (let [new-css-system     (mf/use-ctx ctx/new-css-system)
-        exports     (mf/use-state [])
+  (let [exports     (mf/use-state [])
         xstate      (mf/deref refs/export)
         vstate      (mf/deref refs/viewer-data)
         page        (get-in vstate [:pages page-id])
@@ -136,111 +134,64 @@
                            flatten
                            distinct
                            vec))))
-    (if new-css-system
-      [:div {:class (stl/css :element-set)}
-       [:div {:class (stl/css :element-title)}
-        [:& title-bar {:collapsable? false
-                       :title        (tr "workspace.options.export")
-                       :class        (stl/css :title-spacing-export-viewer)}
-         [:button {:class (stl/css :add-export)
-                   :on-click add-export} i/add-refactor]]]
+    [:div {:class (stl/css :element-set)}
+     [:div {:class (stl/css :element-title)}
+      [:& title-bar {:collapsable? false
+                     :title        (tr "workspace.options.export")
+                     :class        (stl/css :title-spacing-export-viewer)}
+       [:button {:class (stl/css :add-export)
+                 :on-click add-export} i/add-refactor]]]
 
-       (cond
-         (= :multiple exports)
-         [:div {:class (stl/css :multiple-exports)}
-          [:div {:class (stl/css :label)} (tr "settings.multiple")]
-          [:div {:class (stl/css :actions)}
-           [:button {:class (stl/css :action-btn)
-                     :on-click ()}
-            i/remove-refactor]]]
+     (cond
+       (= :multiple exports)
+       [:div {:class (stl/css :multiple-exports)}
+        [:div {:class (stl/css :label)} (tr "settings.multiple")]
+        [:div {:class (stl/css :actions)}
+         [:button {:class (stl/css :action-btn)
+                   :on-click ()}
+          i/remove-refactor]]]
 
-         (seq @exports)
-         [:div {:class (stl/css :element-set-content)}
-          (for [[index export] (d/enumerate @exports)]
-            [:div {:class (stl/css :element-group)
-                   :key index}
-             [:div {:class (stl/css :input-wrapper)}
-              [:div  {:class (stl/css :format-select)}
+       (seq @exports)
+       [:div {:class (stl/css :element-set-content)}
+        (for [[index export] (d/enumerate @exports)]
+          [:div {:class (stl/css :element-group)
+                 :key index}
+           [:div {:class (stl/css :input-wrapper)}
+            [:div  {:class (stl/css :format-select)}
+             [:& select
+              {:default-value (d/name (:type export))
+               :options format-options
+               :dropdown-class (stl/css :dropdown-upwards)
+               :on-change (partial on-type-change index)}]]
+            (when (scale-enabled? export)
+              [:div {:class (stl/css :size-select)}
                [:& select
-                {:default-value (d/name (:type export))
-                 :options format-options
+                {:default-value (str (:scale export))
+                 :options size-options
                  :dropdown-class (stl/css :dropdown-upwards)
-                 :on-change (partial on-type-change index)}]]
-              (when (scale-enabled? export)
-                [:div {:class (stl/css :size-select)}
-                 [:& select
-                  {:default-value (str (:scale export))
-                   :options size-options
-                   :dropdown-class (stl/css :dropdown-upwards)
-                   :on-change (partial on-scale-change index)}]])
-              [:label {:class (stl/css :suffix-input)
-                       :for "suffix-export-input"}
-               [:input {:class (stl/css :type-input)
-                        :id "suffix-export-input"
-                        :type "text"
-                        :value (:suffix export)
-                        :placeholder (tr "workspace.options.export.suffix")
-                        :data-value index
-                        :on-change on-suffix-change
-                        :on-key-down manage-key-down}]]]
+                 :on-change (partial on-scale-change index)}]])
+            [:label {:class (stl/css :suffix-input)
+                     :for "suffix-export-input"}
+             [:input {:class (stl/css :type-input)
+                      :id "suffix-export-input"
+                      :type "text"
+                      :value (:suffix export)
+                      :placeholder (tr "workspace.options.export.suffix")
+                      :data-value index
+                      :on-change on-suffix-change
+                      :on-key-down manage-key-down}]]]
 
-             [:button {:class (stl/css :action-btn)
-                       :on-click (partial delete-export index)}
-              i/remove-refactor]])
-          ])
-          (when (or (= :multiple exports) (seq @exports))
-            [:button
-             {:on-click (when-not in-progress? on-download)
-              :class (stl/css-case
-                      :export-btn true
-                      :btn-disabled in-progress?)
-              :disabled in-progress?}
-             (if in-progress?
-               (tr "workspace.options.exporting-object")
-               (tr "workspace.options.export-object" (c (count shapes))))])
-          ]
-
-
-
-      [:div.element-set.exports-options
-       [:div.element-set-title
-        [:span (tr "workspace.options.export")]
-        [:div.add-page {:on-click add-export} i/close]]
-
-       (when (seq @exports)
-         [:div.element-set-content
-          (for [[index export] (d/enumerate @exports)]
-            [:div.element-set-options-group
-             {:key index}
-             (when (scale-enabled? export)
-               [:select.input-select {:on-change (partial on-scale-change index)
-                                      :value (:scale export)}
-                [:option {:value "0.5"}  "0.5x"]
-                [:option {:value "0.75"} "0.75x"]
-                [:option {:value "1"} "1x"]
-                [:option {:value "1.5"} "1.5x"]
-                [:option {:value "2"} "2x"]
-                [:option {:value "4"} "4x"]
-                [:option {:value "6"} "6x"]])
-
-             [:input.input-text {:value (:suffix export)
-                                 :placeholder (tr "workspace.options.export.suffix")
-                                 :on-change (partial on-suffix-change index)
-                                 :on-key-down manage-key-down}]
-             [:select.input-select {:value (d/name (:type export))
-                                    :on-change (partial on-type-change index)}
-              [:option {:value "png"} "PNG"]
-              [:option {:value "jpeg"} "JPEG"]
-              [:option {:value "svg"} "SVG"]
-              [:option {:value "pdf"} "PDF"]]
-             [:div.delete-icon {:on-click (partial delete-export index)}
-              i/minus]])
-
-          [:div.btn-icon-dark.download-button
-           {:on-click (when-not in-progress? on-download)
-            :class (dom/classnames :btn-disabled in-progress?)
-            :disabled in-progress?}
-           (if in-progress?
-             (tr "workspace.options.exporting-object")
-             (tr "workspace.options.export-object" (c (count shapes))))]])])))
+           [:button {:class (stl/css :action-btn)
+                     :on-click (partial delete-export index)}
+            i/remove-refactor]])])
+     (when (or (= :multiple exports) (seq @exports))
+       [:button
+        {:on-click (when-not in-progress? on-download)
+         :class (stl/css-case
+                 :export-btn true
+                 :btn-disabled in-progress?)
+         :disabled in-progress?}
+        (if in-progress?
+          (tr "workspace.options.exporting-object")
+          (tr "workspace.options.export-object" (c (count shapes))))])]))
 
diff --git a/frontend/src/app/main/ui/viewer/inspect/exports.scss b/frontend/src/app/main/ui/viewer/inspect/exports.scss
index 7feb5785c..9d96c8339 100644
--- a/frontend/src/app/main/ui/viewer/inspect/exports.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/exports.scss
@@ -9,83 +9,85 @@
 .element-set {
   padding-bottom: $s-16;
   margin: 0;
-  .element-title {
-    margin: 0;
-    .title-spacing-export-viewer {
-      @extend .attr-title;
-      margin: 0;
-    }
-    .add-export {
-      @extend .button-tertiary;
-      height: $s-32;
-      width: $s-28;
-      svg {
-        @extend .button-icon;
-      }
-    }
-  }
-  .element-set-content {
-    @include flexColumn;
-    margin-bottom: $s-4;
-    .multiple-exports {
-      @include flexRow;
-      .label {
-        @extend .mixed-bar;
-      }
-      .actions {
-        @include flexRow;
-        .action-btn {
-          @extend .button-tertiary;
-          height: $s-32;
-          width: $s-28;
-          svg {
-            @extend .button-icon;
-          }
-        }
-      }
-    }
-    .element-group {
-      @include flexRow;
-      .input-wrapper {
-        @include flexRow;
-        .format-select {
-          width: $s-60;
-          padding: 0;
-          .dropdown-upwards {
-            bottom: $s-36;
-            width: $s-80;
-            top: unset;
-          }
-        }
-        .size-select {
-          width: $s-60;
-          padding: 0;
-          .dropdown-upwards {
-            bottom: $s-36;
-            top: unset;
-            width: $s-80;
-          }
-        }
-        .suffix-input {
-          @extend .input-element;
-          min-width: $s-92;
-          flex-grow: 1;
-        }
-      }
-      .action-btn {
-        @extend .button-tertiary;
-        height: $s-32;
-        width: $s-28;
-        svg {
-          @extend .button-icon;
-        }
-      }
-    }
-  }
-  .export-btn {
-    @extend .button-secondary;
-    @include tabTitleTipography;
-    height: $s-32;
-    width: $s-252;
+}
+
+.element-title {
+  margin: 0;
+}
+
+.title-spacing-export-viewer {
+  @extend .attr-title;
+  margin: 0;
+}
+
+.add-export {
+  @extend .button-tertiary;
+  height: $s-32;
+  width: $s-28;
+  svg {
+    @extend .button-icon;
   }
 }
+
+.element-set-content {
+  @include flexColumn;
+  margin-bottom: $s-4;
+}
+
+.multiple-exports {
+  @include flexRow;
+}
+
+.label {
+  @extend .mixed-bar;
+}
+
+.actions {
+  @include flexRow;
+}
+
+.action-btn {
+  @extend .button-tertiary;
+  height: $s-32;
+  width: $s-28;
+  svg {
+    @extend .button-icon;
+  }
+}
+
+.element-group {
+  @include flexRow;
+}
+
+.input-wrapper {
+  @include flexRow;
+}
+
+.format-select {
+  width: $s-60;
+  padding: 0;
+}
+
+.dropdown-upwards {
+  bottom: $s-36;
+  width: $s-80;
+  top: unset;
+}
+
+.size-select {
+  width: $s-60;
+  padding: 0;
+}
+
+.suffix-input {
+  @extend .input-element;
+  min-width: $s-92;
+  flex-grow: 1;
+}
+
+.export-btn {
+  @extend .button-secondary;
+  @include tabTitleTipography;
+  height: $s-32;
+  width: $s-252;
+}
diff --git a/frontend/src/app/main/ui/viewer/interactions.cljs b/frontend/src/app/main/ui/viewer/interactions.cljs
index c570f091a..406e9652f 100644
--- a/frontend/src/app/main/ui/viewer/interactions.cljs
+++ b/frontend/src/app/main/ui/viewer/interactions.cljs
@@ -19,7 +19,6 @@
    [app.main.data.viewer :as dv]
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
-   [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
    [app.main.ui.viewer.shapes :as shapes]
@@ -193,8 +192,7 @@
 (mf/defc flows-menu
   {::mf/wrap [mf/memo]}
   [{:keys [page index]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        flows        (dm/get-in page [:options :flows])
+  (let [flows        (dm/get-in page [:options :flows])
         frames       (:frames page)
         frame        (get frames index)
         current-flow* (mf/use-state
@@ -217,47 +215,28 @@
              (st/emit! (dv/go-to-frame (:starting-frame flow))))))]
 
     (when (seq flows)
-      (if new-css-system
-        [:div {:on-click toggle-dropdown
-               :class (stl/css :view-options)}
-         [:span {:class (stl/css :icon)} i/play-refactor]
-         [:span {:class (stl/css :dropdown-title)} (:name current-flow)]
-         [:span {:class (stl/css :icon-dropdown)}  i/arrow-refactor]
-         [:& dropdown {:show show-dropdown?
-                       :on-close hide-dropdown}
-          [:ul {:class (stl/css :dropdown)}
-           (for [[index flow] (d/enumerate flows)]
-             [:li {:key (dm/str "flow-" (:id flow) "-" index)
-                   :class (stl/css-case :dropdown-element true
-                                        :selected (= (:id flow) (:id current-flow)))
-                   ;; This is not a best practise, is not very performant Do not reproduce
-                   :data-value (pr-str flow)
-                   :on-click select-flow}
-              [:span {:class (stl/css :label)} (:name flow)]
-              (when (= (:id flow) (:id current-flow))
-                [:span {:class (stl/css :icon)} i/tick-refactor])])]]]
-
-        ;; OLD
-        [:div.view-options {:on-click toggle-dropdown}
-         [:span.icon i/play]
-         [:span.label (:name current-flow)]
-         [:span.icon i/arrow-down]
-         [:& dropdown {:show show-dropdown?
-                       :on-close hide-dropdown}
-          [:ul.dropdown.with-check
-           (for [[index flow] (d/enumerate flows)]
-             [:li {:key (dm/str "flow-" (:id flow) "-" index)
-                   :class (dom/classnames :selected (= (:id flow) (:id current-flow)))
-                   ;; This is not a best practise, is not very performant Do not reproduce
-                   :data-value (pr-str flow)
-                   :on-click select-flow}
-              [:span.icon i/tick]
-              [:span.label (:name flow)]])]]]))))
+      [:div {:on-click toggle-dropdown
+             :class (stl/css :view-options)}
+       [:span {:class (stl/css :icon)} i/play-refactor]
+       [:span {:class (stl/css :dropdown-title)} (:name current-flow)]
+       [:span {:class (stl/css :icon-dropdown)}  i/arrow-refactor]
+       [:& dropdown {:show show-dropdown?
+                     :on-close hide-dropdown}
+        [:ul {:class (stl/css :dropdown)}
+         (for [[index flow] (d/enumerate flows)]
+           [:li {:key (dm/str "flow-" (:id flow) "-" index)
+                 :class (stl/css-case :dropdown-element true
+                                      :selected (= (:id flow) (:id current-flow)))
+                         ;; This is not a best practise, is not very performant Do not reproduce
+                 :data-value (pr-str flow)
+                 :on-click select-flow}
+            [:span {:class (stl/css :label)} (:name flow)]
+            (when (= (:id flow) (:id current-flow))
+              [:span {:class (stl/css :icon)} i/tick-refactor])])]]])))
 
 (mf/defc interactions-menu
   [{:keys [interactions-mode]}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        show-dropdown?  (mf/use-state false)
+  (let [show-dropdown?  (mf/use-state false)
         toggle-dropdown (mf/use-fn #(swap! show-dropdown? not))
         hide-dropdown   (mf/use-fn #(reset! show-dropdown? false))
 
@@ -269,67 +248,40 @@
                               (keyword))]
              (dom/stop-propagation event)
              (st/emit! (dv/set-interactions-mode mode)))))]
-    (if new-css-system
-      [:div {:on-click toggle-dropdown
-             :class (stl/css :view-options)}
-       [:span {:class (stl/css :dropdown-title)} (tr "viewer.header.interactions")]
-       [:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
-       [:& dropdown {:show @show-dropdown?
-                     :on-close hide-dropdown}
-        [:ul {:class (stl/css :dropdown)}
-         [:li {:class (stl/css-case :dropdown-element true
-                                    :selected (= interactions-mode :hide))
-               :on-click select-mode
-               :data-mode :hide}
+    [:div {:on-click toggle-dropdown
+           :class (stl/css :view-options)}
+     [:span {:class (stl/css :dropdown-title)} (tr "viewer.header.interactions")]
+     [:span {:class (stl/css :icon-dropdown)} i/arrow-refactor]
+     [:& dropdown {:show @show-dropdown?
+                   :on-close hide-dropdown}
+      [:ul {:class (stl/css :dropdown)}
+       [:li {:class (stl/css-case :dropdown-element true
+                                  :selected (= interactions-mode :hide))
+             :on-click select-mode
+             :data-mode :hide}
 
-          [:span {:class (stl/css :label)} (tr "viewer.header.dont-show-interactions")]
-          (when (= interactions-mode :hide)
-            [:span {:class (stl/css :icon)}  i/tick-refactor])]
+        [:span {:class (stl/css :label)} (tr "viewer.header.dont-show-interactions")]
+        (when (= interactions-mode :hide)
+          [:span {:class (stl/css :icon)}  i/tick-refactor])]
 
-         [:li {:class (stl/css-case :dropdown-element true
-                                    :selected (= interactions-mode :show))
-               :on-click select-mode
-               :data-mode :show}
-          [:span {:class (stl/css :label)} (tr "viewer.header.show-interactions")]
-          (when (= interactions-mode :show)
-            [:span {:class (stl/css :icon)}  i/tick-refactor])]
+       [:li {:class (stl/css-case :dropdown-element true
+                                  :selected (= interactions-mode :show))
+             :on-click select-mode
+             :data-mode :show}
+        [:span {:class (stl/css :label)} (tr "viewer.header.show-interactions")]
+        (when (= interactions-mode :show)
+          [:span {:class (stl/css :icon)}  i/tick-refactor])]
 
 
 
-         [:li {:class (stl/css-case :dropdown-element true
-                                    :selected (= interactions-mode :show-on-click))
-               :on-click select-mode
-               :data-mode :show-on-click}
+       [:li {:class (stl/css-case :dropdown-element true
+                                  :selected (= interactions-mode :show-on-click))
+             :on-click select-mode
+             :data-mode :show-on-click}
 
-          [:span {:class (stl/css :label)} (tr "viewer.header.show-interactions-on-click")]
-          (when (= interactions-mode :show-on-click)
-            [:span {:class (stl/css :icon)}  i/tick-refactor])]]]]
-
-
-
-      [:div.view-options {:on-click toggle-dropdown}
-       [:span.label (tr "viewer.header.interactions")]
-       [:span.icon i/arrow-down]
-       [:& dropdown {:show @show-dropdown?
-                     :on-close hide-dropdown}
-        [:ul.dropdown.with-check
-         [:li {:class (dom/classnames :selected (= interactions-mode :hide))
-               :on-click select-mode
-               :data-mode :hide}
-          [:span.icon i/tick]
-          [:span.label (tr "viewer.header.dont-show-interactions")]]
-
-         [:li {:class (dom/classnames :selected (= interactions-mode :show))
-               :on-click select-mode
-               :data-mode :show}
-          [:span.icon i/tick]
-          [:span.label (tr "viewer.header.show-interactions")]]
-
-         [:li {:class (dom/classnames :selected (= interactions-mode :show-on-click))
-               :on-click select-mode
-               :data-mode :show-on-click}
-          [:span.icon i/tick]
-          [:span.label (tr "viewer.header.show-interactions-on-click")]]]]])))
+        [:span {:class (stl/css :label)} (tr "viewer.header.show-interactions-on-click")]
+        (when (= interactions-mode :show-on-click)
+          [:span {:class (stl/css :icon)}  i/tick-refactor])]]]]))
 
 (defn animate-go-to-frame
   [animation current-viewport orig-viewport current-size orig-size wrapper-size]
diff --git a/frontend/src/app/main/ui/viewer/share_link.scss b/frontend/src/app/main/ui/viewer/share_link.scss
index da9ce16d7..29a807c2d 100644
--- a/frontend/src/app/main/ui/viewer/share_link.scss
+++ b/frontend/src/app/main/ui/viewer/share_link.scss
@@ -46,10 +46,12 @@
 .hint-wrapper {
   @include flexRow;
 }
+
 .hint {
   flex-grow: 1;
   color: var(--modal-text-foreground-color);
 }
+
 .custon-input-wrapper {
   @include flexRow;
   border-radius: $br-8;
diff --git a/frontend/src/app/main/ui/viewer/thumbnails.cljs b/frontend/src/app/main/ui/viewer/thumbnails.cljs
index 8e95c5727..22cead07f 100644
--- a/frontend/src/app/main/ui/viewer/thumbnails.cljs
+++ b/frontend/src/app/main/ui/viewer/thumbnails.cljs
@@ -14,9 +14,7 @@
    [app.main.data.viewer :as dv]
    [app.main.render :as render]
    [app.main.store :as st]
-   [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
-   [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.object :as obj]
    [app.util.timers :as ts]
@@ -24,8 +22,7 @@
 
 (mf/defc thumbnails-content
   [{:keys [children expanded? total] :as props}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        container (mf/use-ref)
+  (let [container (mf/use-ref)
         width     (mf/use-var (.. js/document -documentElement -clientWidth))
         element-width (mf/use-var 152)
 
@@ -59,96 +56,58 @@
             (reset! width (obj/get dom "clientWidth"))))]
 
     (mf/use-effect on-mount)
-    (if new-css-system
-      (if expanded?
-        [:div {:class (stl/css :thumbnails-content)}
-         [:div {:class (stl/css :thumbnails-list-expanded)} children]]
+    (if expanded?
+      [:div {:class (stl/css :thumbnails-content)}
+       [:div {:class (stl/css :thumbnails-list-expanded)} children]]
 
-        [:div {:class (stl/css :thumbnails-content)}
-         [:button {:class (stl/css :left-scroll-handler)
-                   :on-click on-left-arrow-click} i/arrow-refactor]
-         [:button {:class (stl/css :right-scroll-handler)
-                   :on-click on-right-arrow-click} i/arrow-refactor]
+      [:div {:class (stl/css :thumbnails-content)}
+       [:button {:class (stl/css :left-scroll-handler)
+                 :on-click on-left-arrow-click} i/arrow-refactor]
+       [:button {:class (stl/css :right-scroll-handler)
+                 :on-click on-right-arrow-click} i/arrow-refactor]
 
-         [:div {:class (stl/css :thumbnails-list)
-                :ref container
-                :on-wheel on-scroll}
-          [:div {:class (stl/css :thumbnails-list-inside)
-                 :style {:right (str (* @offset 152) "px")}}
-           children]]])
-
-
-
-      (if expanded?
-        [:div.thumbnails-content
-         [:div.thumbnails-list-expanded children]]
-
-        [:div.thumbnails-content
-         [:div.left-scroll-handler {:on-click on-left-arrow-click} i/arrow-slide]
-         [:div.right-scroll-handler {:on-click on-right-arrow-click} i/arrow-slide]
-         [:div.thumbnails-list {:ref container :on-wheel on-scroll}
-          [:div.thumbnails-list-inside {:style {:right (str (* @offset 152) "px")}}
-           children]]]))))
+       [:div {:class (stl/css :thumbnails-list)
+              :ref container
+              :on-wheel on-scroll}
+        [:div {:class (stl/css :thumbnails-list-inside)
+               :style {:right (str (* @offset 152) "px")}}
+         children]]])))
 
 (mf/defc thumbnails-summary
   [{:keys [on-toggle-expand on-close total] :as props}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)]
-    (if new-css-system
-      [:div {:class (stl/css :thumbnails-summary)}
-       [:span {:class (stl/css :counter)}
-        (tr "labels.num-of-frames" (i18n/c total))]
-       [:span {:class (stl/css :actions)}
-        [:button {:class (stl/css :expand-btn)
-                  :on-click on-toggle-expand} i/arrow-refactor]
-        [:button {:class (stl/css :close-btn)
-                  :on-click on-close} i/close-refactor]]]
-
-
-      [:div.thumbnails-summary
-       [:span.counter (tr "labels.num-of-frames" (i18n/c total))]
-       [:span.buttons
-        [:span.btn-expand {:on-click on-toggle-expand} i/arrow-down]
-        [:span.btn-close {:on-click on-close} i/close]]])))
+  [:div {:class (stl/css :thumbnails-summary)}
+   [:span {:class (stl/css :counter)}
+    (tr "labels.num-of-frames" (i18n/c total))]
+   [:span {:class (stl/css :actions)}
+    [:button {:class (stl/css :expand-btn)
+              :on-click on-toggle-expand} i/arrow-refactor]
+    [:button {:class (stl/css :close-btn)
+              :on-click on-close} i/close-refactor]]])
 
 (mf/defc thumbnail-item
   {::mf/wrap [mf/memo
               #(mf/deferred % ts/idle-then-raf)]}
   [{:keys [selected? frame on-click index objects page-id thumbnail-data]}]
 
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        children-ids (cfh/get-children-ids objects (:id frame))
+  (let [children-ids (cfh/get-children-ids objects (:id frame))
         children-bounds (gsh/shapes->rect (concat [frame] (->> children-ids (keep (d/getf objects)))))]
 
-    (if new-css-system
-      [:button {:class (stl/css :thumbnail-item)
-             :on-click #(on-click % index)}
-       [:div {:class (stl/css-case :thumbnail-preview true
-                                   :selected selected?)}
-        [:& render/frame-svg {:frame (-> frame
-                                         (assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame))))
-                                         (assoc :children-bounds children-bounds))
-                              :objects objects
-                              :use-thumbnails true}]]
-       [:div {:class (stl/css :thumbnail-info)
-              :title (:name frame)}
-        (:name frame)]]
-
-
-      [:div.thumbnail-item {:on-click #(on-click % index)}
-       [:div.thumbnail-preview
-        {:class (dom/classnames :selected selected?)}
-        [:& render/frame-svg {:frame (-> frame
-                                         (assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame))))
-                                         (assoc :children-bounds children-bounds))
-                              :objects objects
-                              :use-thumbnails true}]]
-       [:div.thumbnail-info
-        [:span.name {:title (:name frame)} (:name frame)]]])))
+    [:button {:class (stl/css :thumbnail-item)
+              :on-click #(on-click % index)}
+     [:div {:class (stl/css-case :thumbnail-preview true
+                                 :selected selected?)}
+      [:& render/frame-svg {:frame (-> frame
+                                       (assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame))))
+                                       (assoc :children-bounds children-bounds))
+                            :objects objects
+                            :use-thumbnails true}]]
+     [:div {:class (stl/css :thumbnail-info)
+            :title (:name frame)}
+      (:name frame)]]))
 
 (mf/defc thumbnails-panel
   [{:keys [frames page index show? thumbnail-data] :as props}]
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)
-        expanded? (mf/use-state false)
+  (let [expanded? (mf/use-state false)
         container (mf/use-ref)
 
         objects   (:objects page)
@@ -163,48 +122,23 @@
            (st/emit! (dv/go-to-frame-by-index index))
            (when @expanded?
              (on-close))))]
-    (if new-css-system
-      [:section
-       {:class (stl/css-case :viewer-thumbnails true
-                             :expanded @expanded?)
-        ;; This is better as an inline-style so it won't make a reflow of every frame inside
-        :style {:display (when (not show?) "none")}
-        :ref container}
+    [:section {:class (stl/css-case :viewer-thumbnails true
+                                    :expanded @expanded?)
+            ;; This is better as an inline-style so it won't make a reflow of every frame inside
+               :style {:display (when (not show?) "none")}
+               :ref container}
 
-       [:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not)
-                               :on-close on-close
-                               :total (count frames)}]
-       [:& thumbnails-content {:expanded? @expanded?
-                               :total (count frames)}
-        (for [[i frame] (d/enumerate frames)]
-          [:& thumbnail-item {:index i
-                              :key (dm/str (:id frame) "-" i)
-                              :frame frame
-                              :page-id (:id page)
-                              :objects objects
-                              :on-click on-item-click
-                              :selected? (= i index)
-                              :thumbnail-data thumbnail-data}])]]
-
-
-
-      [:section.viewer-thumbnails
-       {;; This is better as an inline-style so it won't make a reflow of every frame inside
-        :style {:display (when (not show?) "none")}
-        :class (dom/classnames :expanded @expanded?)
-        :ref container}
-
-       [:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not)
-                               :on-close on-close
-                               :total (count frames)}]
-       [:& thumbnails-content {:expanded? @expanded?
-                               :total (count frames)}
-        (for [[i frame] (d/enumerate frames)]
-          [:& thumbnail-item {:index i
-                              :key (dm/str (:id frame) "-" i)
-                              :frame frame
-                              :page-id (:id page)
-                              :objects objects
-                              :on-click on-item-click
-                              :selected? (= i index)
-                              :thumbnail-data thumbnail-data}])]])))
+     [:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not)
+                             :on-close on-close
+                             :total (count frames)}]
+     [:& thumbnails-content {:expanded? @expanded?
+                             :total (count frames)}
+      (for [[i frame] (d/enumerate frames)]
+        [:& thumbnail-item {:index i
+                            :key (dm/str (:id frame) "-" i)
+                            :frame frame
+                            :page-id (:id page)
+                            :objects objects
+                            :on-click on-item-click
+                            :selected? (= i index)
+                            :thumbnail-data thumbnail-data}])]]))