diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap.scss b/frontend/resources/styles/main/partials/sidebar-sitemap.scss
index ea43812628..8f92f34d42 100644
--- a/frontend/resources/styles/main/partials/sidebar-sitemap.scss
+++ b/frontend/resources/styles/main/partials/sidebar-sitemap.scss
@@ -4,136 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-#sitemap,
-.sitemap {
-  height: var(--height, 200px);
-
-  .element-list,
-  .pages-list {
-    li {
-      align-items: center;
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-
-      .page-icon {
-        svg {
-          fill: $color-gray-30;
-          height: 13px;
-          margin-right: $size-1;
-          width: 13px;
-        }
-      }
-
-      span {
-        color: $color-gray-20;
-        font-size: $fs12;
-        max-width: 75%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .page-actions {
-        align-items: center;
-        display: none;
-        margin-left: auto;
-
-        button {
-          border: none;
-          background-color: transparent;
-          svg {
-            fill: $color-gray-60;
-            height: 15px;
-            margin-left: $size-1;
-            width: 15px;
-          }
-        }
-      }
-
-      &:hover {
-        background-color: $color-primary;
-
-        .page-icon {
-          svg {
-            fill: $color-gray-60;
-          }
-
-          span {
-            color: $color-gray-60;
-          }
-        }
-
-        .page-actions {
-          display: flex;
-        }
-      }
-
-      &.selected {
-        .page-icon {
-          svg {
-            fill: $color-primary;
-          }
-        }
-
-        span {
-          color: $color-primary;
-        }
-      }
-
-      &:hover {
-        .page-icon {
-          svg {
-            fill: $color-gray-60;
-          }
-        }
-
-        span {
-          color: $color-gray-60;
-        }
-      }
-    }
-
-    .element-list-body {
-      align-items: center;
-      display: flex;
-      padding: $size-1 $size-2;
-      transition: none;
-      width: 100%;
-
-      svg {
-        fill: $color-gray-60;
-        height: 13px;
-        margin-right: 8px;
-        width: 13px;
-      }
-
-      .element-actions {
-        align-items: center;
-        display: flex;
-        flex-shrink: 0;
-        width: 62px;
-      }
-
-      &.dragging {
-        // TODO: revisit this
-        background-color: $color-gray-10;
-      }
-    }
-  }
-
-  & .resize-area {
-    position: absolute;
-    width: 100%;
-    height: 16px;
-    bottom: -8px;
-    left: 0;
-    cursor: ns-resize;
-  }
-}
-
-.add-page,
-.collapse-pages {
+.add-page {
   align-items: center;
   background-color: transparent;
   border-radius: $br3;
@@ -216,11 +87,3 @@
     margin: 0;
   }
 }
-
-.collapse-pages {
-  margin-left: $size-2;
-
-  svg {
-    transform: rotate(90deg);
-  }
-}
diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index 956b20b62b..7b8a449ec4 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -24,8 +24,7 @@
     grid-template-rows: 100%;
     height: calc(100% - 2px);
 
-    .tool-window,
-    .sitemap {
+    .tool-window {
       position: relative;
       border-bottom: 1px solid $color-gray-60;
       display: flex;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
index 136c967afd..0c0d6a94b4 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
@@ -5,7 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.sidebar.sitemap
-  (:require-macros [app.main.style :as stl :refer [css]])
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
@@ -31,7 +31,6 @@
   [{:keys [page index deletable? selected? editing? hovering?]}]
   (let [input-ref            (mf/use-ref)
         id                   (:id page)
-        new-css-system       (mf/use-ctx ctx/new-css-system)
         delete-fn            (mf/use-fn (mf/deps id) #(st/emit! (dw/delete-page id)))
         navigate-fn          (mf/use-fn (mf/deps id) #(st/emit! :interrupt (dw/go-to-page id)))
         workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
@@ -116,63 +115,40 @@
            (dom/select-text! edit-input))
          nil)))
 
-    [:*
-     [:li {:class (if new-css-system
-                    (dom/classnames
-                     (css :page-element) true
-                     (css :selected) selected?
-                     (css :dnd-over-top) (= (:over dprops) :top)
-                     (css :dnd-over-bot) (= (:over dprops) :bot))
-                    (dom/classnames
-                     :selected selected?
-                     :dnd-over-top (= (:over dprops) :top)
-                     :dnd-over-bot (= (:over dprops) :bot)))
-           :ref dref}
-      [:div
-       {:class (if new-css-system
-                 (dom/classnames
-                  (css :element-list-body) true
-                  (css :selected) selected?)
-                 (dom/classnames
-                  :element-list-body true
-                  :hover hovering?
-                  :selected selected?))
-        :data-test (dm/str "page-" id)
-        :tab-index "0"
-        :on-click navigate-fn
-        :on-double-click on-double-click
-        :on-context-menu on-context-menu}
-       [:div {:class (if new-css-system
-                       (dom/classnames (css :page-icon) true)
-                       (dom/classnames :page-icon true))}
-        (if new-css-system
-          i/document-refactor
-          i/file-html)]
-       (if editing?
-         [:*
-          [:input {:class  (if new-css-system
-                             (dom/classnames (css :element-name) true)
-                             (dom/classnames :element-name true))
-                   :type "text"
-                   :ref input-ref
-                   :on-blur on-blur
-                   :on-key-down on-key-down
-                   :auto-focus true
-                   :default-value (:name page "")}]]
-         [:*
-          [:span {:class (if new-css-system
-                           (dom/classnames (css :page-name) true)
-                           (dom/classnames :page-name true))}
-           (:name page)]
-          [:div
-           {:class (if new-css-system
-                     (dom/classnames (css :page-actions) true)
-                     (dom/classnames :page-actions true))}
-           (when (and deletable? (not workspace-read-only?))
-             [:button {:on-click on-delete}
-              (if new-css-system
-                i/delete-refactor
-                i/trash)])]])]]]))
+    [:li {:class (stl/css-case
+                  :page-element true
+                  :selected selected?
+                  :dnd-over-top (= (:over dprops) :top)
+                  :dnd-over-bot (= (:over dprops) :bot))
+          :ref dref}
+     [:div {:class (stl/css-case
+                    :element-list-body true
+                    :hover hovering?
+                    :selected selected?)
+            :data-test (dm/str "page-" id)
+            :tab-index "0"
+            :on-click navigate-fn
+            :on-double-click on-double-click
+            :on-context-menu on-context-menu}
+      [:div {:class (stl/css :page-icon)}
+       i/document-refactor]
+
+      (if editing?
+        [:*
+         [:input {:class  (stl/css :element-name)
+                  :type "text"
+                  :ref input-ref
+                  :on-blur on-blur
+                  :on-key-down on-key-down
+                  :auto-focus true
+                  :default-value (:name page "")}]]
+        [:*
+         [:span {:class (stl/css :page-name)}
+          (:name page)]
+         [:div {:class  (stl/css :page-actions)}
+          (when (and deletable? (not workspace-read-only?))
+            [:button {:on-click on-delete}
+             i/delete-refactor])]])]]))
 
 ;; --- Page Item Wrapper
 
@@ -202,12 +178,8 @@
   (let [pages           (:pages file)
         deletable?      (> (count pages) 1)
         editing-page-id (mf/deref refs/editing-page-item)
-        current-page-id (mf/use-ctx ctx/current-page-id)
-        new-css-system  (mf/use-ctx ctx/new-css-system)]
-    [:ul
-     {:class (if new-css-system
-               (dom/classnames (css :pages-list) true)
-               (dom/classnames :pages-list true))}
+        current-page-id (mf/use-ctx ctx/current-page-id)]
+    [:ul {:class (stl/css :page-list)}
      [:& hooks/sortable-container {}
       (for [[index page-id] (d/enumerate pages)]
         [:& page-item-wrapper
@@ -232,42 +204,25 @@
                         (fn [event]
                           (st/emit! (dw/create-page {:file-id file-id :project-id project-id}))
                           (-> event dom/get-current-target dom/blur!)))
-
         size           (if show-pages? size 32)
+        read-only?     (mf/use-ctx ctx/workspace-read-only?)]
 
-        read-only?     (mf/use-ctx ctx/workspace-read-only?)
-        new-css-system (mf/use-ctx ctx/new-css-system)]
+    [:div {:class (stl/css :sitemap)
+           :style #js {"--height" (str size "px")}}
 
-    (if ^boolean new-css-system
-      [:div {:class (dom/classnames (css :sitemap) true)
-             :style #js {"--height" (str size "px")}}
+     [:& title-bar {:collapsable?   true
+                    :collapsed?     (not show-pages?)
+                    :on-collapsed   toggle-pages
+                    :clickable-all? true
+                    :title          (tr "workspace.sidebar.sitemap")
+                    :class          (stl/css :title-spacing-sitemap)}
 
-       [:& title-bar {:collapsable?   true
-                      :collapsed?     (not show-pages?)
-                      :on-collapsed   toggle-pages
-                      :clickable-all? true
-                      :title          (tr "workspace.sidebar.sitemap")
-                      :class          (css :title-spacing-sitemap)}
+      (if ^boolean read-only?
+        [:di {:class  (stl/css :view-only-mode)}
+         (tr "labels.view-only")]
+        [:button {:class (stl/css :add-page)
+                  :on-click on-create}
+         i/add-refactor])]
 
-        (if ^boolean read-only?
-          [:div
-           {:class  (dom/classnames (css :view-only-mode) true)}
-           (tr "labels.view-only")]
-          [:button {:class (stl/css :add-page)
-                    :on-click on-create}
-           i/add-refactor])]
-
-       [:div {:class (dom/classnames (css :tool-window-content) true)}
-        [:& pages-list {:file file :key (:id file)}]]]
-
-      [:div#sitemap.tool-window {:style #js {"--height" (str size "px")}}
-       [:div.tool-window-bar
-        [:span.pages-title (tr "workspace.sidebar.sitemap")]
-        (if ^boolean read-only?
-          [:div.view-only-mode (tr "labels.view-only")]
-          [:div.add-page {:on-click on-create} i/close])
-        [:div.collapse-pages {:on-click toggle-pages
-                              :style {:transform (when (not show-pages?) "rotate(-90deg)")}} i/arrow-slide]]
-
-       [:div.tool-window-content
-        [:& pages-list {:file file :key (:id file)}]]])))
+     [:div {:class (stl/css :tool-window-content)}
+      [:& pages-list {:file file :key (:id file)}]]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
index a974a5a5cc..209ed6a3b2 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
@@ -13,226 +13,228 @@
   flex: 1;
   width: 100%;
   height: var(--height, $s-200);
-  .title-bar {
-    .title {
-      margin-left: $s-2;
-      color: var(--title-foreground-color-hover);
-    }
-  }
+}
 
-  .add-page {
-    @extend .button-tertiary;
-    height: $s-32;
-    width: $s-28;
-    margin-right: $s-12;
-    padding: 0;
-    border-radius: $br-8;
-    svg {
-      @extend .button-icon;
-      stroke: var(--icon-foreground);
-      transform: rotate(90deg);
-    }
+.title {
+  margin-left: $s-2;
+  color: var(--title-foreground-color-hover);
+}
+
+.add-page {
+  @extend .button-tertiary;
+  height: $s-32;
+  width: $s-28;
+  padding: 0;
+  margin-right: $s-12;
+  svg {
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+    transform: rotate(90deg);
   }
-  .view-only-mode {
-    @include flexCenter;
-    @include titleTipography;
-    height: $s-20;
-    padding: $s-4 $s-6;
-    border: $s-1 solid var(--tag-background-color);
-    border-radius: $br-6;
-    color: var(--tag-background-color);
+}
+
+.view-only-mode {
+  @include flexCenter;
+  @include titleTipography;
+  height: $s-20;
+  padding: $s-4 $s-6;
+  border: $s-1 solid var(--tag-background-color);
+  border-radius: $br-6;
+  color: var(--tag-background-color);
+}
+
+.resize-area {
+  position: absolute;
+  bottom: calc(-1 * $s-8);
+  left: 0;
+  width: 100%;
+  height: $s-12;
+  border-top: $s-2 solid var(--resize-area-border-color);
+  background-color: var(--resize-area-background-color);
+  cursor: ns-resize;
+  &:hover {
+    border-color: var(--resize-area-border-color);
   }
-  .resize-area {
-    position: absolute;
-    bottom: calc(-1 * $s-8);
-    left: 0;
-    width: 100%;
-    height: $s-12;
-    border-top: $s-2 solid var(--resize-area-border-color);
-    background-color: var(--resize-area-background-color);
-    cursor: ns-resize;
-    &:hover {
-      border-color: var(--resize-area-border-color);
-    }
+}
+
+.tool-window-content {
+  display: flex;
+  flex-direction: column;
+  height: calc(-38px + var(--height, $s-200));
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: overlay;
+  scrollbar-gutter: stable;
+}
+
+.pages-list {
+  width: 100%;
+  max-height: $s-152;
+  margin-bottom: $s-12;
+}
+
+.page-element {
+  @include titleTipography;
+  min-height: $s-32;
+  width: 100%;
+  cursor: pointer;
+  &.dnd-over-top {
+    border-top: $s-1 solid var(--layer-row-foreground-color-drag);
   }
-  .tool-window-content {
+  &.dnd-over-bot {
+    border-bottom: $s-1 solid var(--layer-row-foreground-color-drag);
+  }
+  .dnd-over > .element-list-body {
+    border: $s-1 solid var(--layer-row-foreground-color-drag);
+  }
+  .element-list-body {
     display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    overflow-x: hidden;
-    scrollbar-gutter: stable;
-    overflow-y: overlay;
-    height: calc(-38px + var(--height, $s-200));
+    align-items: center;
+    height: $s-32;
     width: 100%;
-
-    .pages-list {
-      width: 100%;
-      max-height: $s-152;
-      margin-bottom: $s-12;
-      .page-element {
-        @include titleTipography;
-        min-height: $s-32;
-        width: 100%;
-        cursor: pointer;
-        &.dnd-over-top {
-          border-top: $s-1 solid var(--layer-row-foreground-color-drag);
-        }
-        &.dnd-over-bot {
-          border-bottom: $s-1 solid var(--layer-row-foreground-color-drag);
-        }
-        .dnd-over > .element-list-body {
-          border: $s-1 solid var(--layer-row-foreground-color-drag);
-        }
-        .element-list-body {
-          display: flex;
-          align-items: center;
-          height: $s-32;
-          width: 100%;
-          padding: 0 $s-12 0 0;
-          transition: none;
-          color: var(--layer-row-foreground-color);
-          .page-name {
-            @include textEllipsis;
-            flex-grow: 1;
-            padding-left: $s-2;
-          }
-          .page-icon {
-            @include flexCenter;
-            height: $s-32;
-            width: $s-24;
-            padding: 0 $s-4 0 $s-8;
-            svg {
-              @extend .button-icon-small;
-              height: $s-12;
-              width: $s-12;
-              color: transparent;
-              fill: none;
-              stroke: var(--icon-foreground);
-            }
-          }
-          .page-actions {
-            height: $s-32;
-            button {
-              @include buttonStyle;
-              @include flexCenter;
-              width: $s-24;
-              height: 100%;
-              opacity: $op-0;
-              svg {
-                @extend .button-icon-small;
-                height: $s-12;
-                width: $s-12;
-                color: transparent;
-                fill: none;
-                stroke: var(--icon-foreground);
-              }
-            }
-          }
-          .element-name {
-            @include textEllipsis;
-            color: var(--color-foreground-primary);
-          }
-          input.element-name {
-            @include textEllipsis;
-            @include titleTipography;
-            @include removeInputStyle;
-            flex-grow: 1;
-            height: $s-28;
-            max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
-            margin: 0;
-            padding-left: $s-6;
-            border-radius: $br-8;
-            border: 1px solid var(--input-border-color-focus);
-            color: var(--layer-row-foreground-color);
-          }
-        }
-        &:active,
-        &.on-drag {
-          .element-list-body {
-            color: var(--layer-row-foreground-color-drag);
-            background-color: var(--layer-row-background-color-drag);
-            .page-actions button {
-              svg {
-                stroke: var(--layer-row-foreground-color-drag);
-              }
-            }
-            .page-icon svg {
-              stroke: var(--layer-row-foreground-color-drag);
-            }
-          }
-        }
-        &.selected,
-        &.selected:hover {
-          .element-list-body {
-            color: var(--layer-row-foreground-color-selected);
-            background-color: var(--layer-row-background-color-selected);
-            box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-selected);
-            .page-actions button {
-              svg {
-                stroke: var(--layer-row-foreground-color-selected);
-              }
-            }
-            .page-icon svg {
-              stroke: var(--layer-row-foreground-color-selected);
-            }
-          }
-        }
-        &:hover,
-        &.hover {
-          .element-list-body {
-            color: var(--layer-row-foreground-color-hover);
-            background-color: var(--layer-row-background-color-hover);
-            box-shadow: $s-16 0px 0px 0px var(--layer-row-background-color-hover);
-            .page-actions button {
-              opacity: $op-10;
-              svg {
-                stroke: var(--layer-row-foreground-color-hover);
-              }
-            }
-            .page-icon svg {
-              stroke: var(--layer-row-foreground-color-hover);
-            }
-          }
-        }
-        &:focus {
-          .element-list-body {
-            color: var(--layer-row-foreground-color-focus);
-            border: 1px solid var(--layer-row-border-color-focus);
-            outline: none;
-            .page-actions button {
-              opacity: $op-10;
-            }
-          }
-        }
-        &:focus-within {
-          .element-list-body {
-            outline: none;
-            .page-actions button {
-              opacity: $op-10;
-            }
-          }
-        }
-
-        &.hidden {
-          .element-list-body {
-            color: var(--layer-row-foreground-color-hidden);
-            background-color: var(--layer-row-background-color-hidden);
-            opacity: $op-7;
-            .page-actions button {
-              svg {
-                stroke: var(--layer-row-foreground-color-hidden);
-              }
-            }
-            .page-icon svg {
-              stroke: var(--layer-row-foreground-color-hidden);
-            }
-          }
+    padding: 0 $s-12 0 0;
+    transition: none;
+    color: var(--layer-row-foreground-color);
+    .page-name {
+      @include textEllipsis;
+      flex-grow: 1;
+      padding-left: $s-2;
+    }
+    .page-icon {
+      @include flexCenter;
+      height: $s-32;
+      width: $s-24;
+      padding: 0 $s-4 0 $s-8;
+      svg {
+        @extend .button-icon-small;
+        height: $s-12;
+        width: $s-12;
+        color: transparent;
+        fill: none;
+        stroke: var(--icon-foreground);
+      }
+    }
+    .page-actions {
+      height: $s-32;
+      button {
+        @include buttonStyle;
+        @include flexCenter;
+        width: $s-24;
+        height: 100%;
+        opacity: $op-0;
+        svg {
+          @extend .button-icon-small;
+          height: $s-12;
+          width: $s-12;
+          color: transparent;
+          fill: none;
+          stroke: var(--icon-foreground);
         }
       }
     }
+    .element-name {
+      @include textEllipsis;
+      color: var(--layer-row-foreground-color-focus);
+    }
+    input.element-name {
+      @include textEllipsis;
+      @include titleTipography;
+      @include removeInputStyle;
+      flex-grow: 1;
+      height: $s-28;
+      max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
+      padding-left: $s-6;
+      margin: 0;
+      border-radius: $br-8;
+      border: $s-1 solid var(--input-border-color-focus);
+      color: var(--layer-row-foreground-color);
+    }
   }
-  .title-spacing-sitemap {
-    padding-left: $s-8;
-    margin-top: $s-8;
+  &:active,
+  &.on-drag {
+    .element-list-body {
+      color: var(--layer-row-foreground-color-drag);
+      background-color: var(--layer-row-background-color-drag);
+      .page-actions button {
+        svg {
+          stroke: var(--layer-row-foreground-color-drag);
+        }
+      }
+      .page-icon svg {
+        stroke: var(--layer-row-foreground-color-drag);
+      }
+    }
+  }
+  &.selected,
+  &.selected:hover {
+    .element-list-body {
+      color: var(--layer-row-foreground-color-selected);
+      background-color: var(--layer-row-background-color-selected);
+      box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-selected);
+      .page-actions button {
+        svg {
+          stroke: var(--layer-row-foreground-color-selected);
+        }
+      }
+      .page-icon svg {
+        stroke: var(--layer-row-foreground-color-selected);
+      }
+    }
+  }
+  &:hover,
+  &.hover {
+    .element-list-body {
+      color: var(--layer-row-foreground-color-hover);
+      background-color: var(--layer-row-background-color-hover);
+      box-shadow: $s-16 $s-0 $s-0 $s-0 var(--layer-row-background-color-hover);
+      .page-actions button {
+        opacity: $op-10;
+        svg {
+          stroke: var(--layer-row-foreground-color-hover);
+        }
+      }
+      .page-icon svg {
+        stroke: var(--layer-row-foreground-color-hover);
+      }
+    }
+  }
+  &:focus {
+    .element-list-body {
+      color: var(--layer-row-foreground-color-focus);
+      border: $s-1 solid var(--layer-row-border-color-focus);
+      outline: none;
+      .page-actions button {
+        opacity: $op-10;
+      }
+    }
+  }
+  &:focus-within {
+    .element-list-body {
+      outline: none;
+      .page-actions button {
+        opacity: $op-10;
+      }
+    }
+  }
+
+  &.hidden {
+    .element-list-body {
+      color: var(--layer-row-foreground-color-hidden);
+      background-color: var(--layer-row-background-color-hidden);
+      opacity: $op-7;
+      .page-actions button {
+        svg {
+          stroke: var(--layer-row-foreground-color-hidden);
+        }
+      }
+      .page-icon svg {
+        stroke: var(--layer-row-foreground-color-hidden);
+      }
+    }
   }
 }
+
+.title-spacing-sitemap {
+  padding-left: $s-8;
+  margin-top: $s-8;
+}