diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a6c1ad38..3f881ac8d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Selected library updates/downgrades to align with Angular 14.3 and Node.JS 16.x
 - GraphQL code generator tuned to produce string type by default for scalars
 - Fixed bug with disabled state for "Run" button after error.
+- Refactor redundant selectors and cast class names to lowercase
 - Fixed bug with updating the list of datasets after deletion
 
 ## [0.8.0] - 2023-08-04
diff --git a/src/app/auth/account/account.component.html b/src/app/auth/account/account.component.html
index be7b075ef..d76478ff8 100644
--- a/src/app/auth/account/account.component.html
+++ b/src/app/auth/account/account.component.html
@@ -61,10 +61,11 @@ <h2 class="text-start pt-3 px-3 h6 organization">Organizations</h2>
             </div>
         </div>
         <div class="container-content px-4">
-            <div class="datasetViewTypeToggleGroup border-bottom">
+            <div class="border-bottom">
                 <mat-button-toggle-group
                     name="accountViewType"
                     aria-label="Account View Type"
+                    class="toggle-group"
                     [value]="accountViewType"
                 >
                     <mat-button-toggle
diff --git a/src/app/auth/account/account.component.sass b/src/app/auth/account/account.component.sass
index 2bbf70284..ffcd02438 100644
--- a/src/app/auth/account/account.component.sass
+++ b/src/app/auth/account/account.component.sass
@@ -4,32 +4,10 @@
 @import 'node_modules/prismjs/plugins/line-numbers/prism-line-numbers'
 @import 'node_modules/prismjs/plugins/line-highlight/prism-line-highlight'
 
-mat-button-toggle-group
-  width: fit-content
-  & .mat-button-toggle-standalone.mat-button-toggle-appearance-standard, .mat-button-toggle-group-appearance-standard
-    border-radius: 0 !important
-
-mat-button-toggle-group
+.toggle-group
   box-shadow: none
   border-radius: 0 !important
-
-mat-button-toggle
-  //border: 1px rgba(0,0,0,0) solid !important
-  margin-top: 5px !important
-  padding: 0 5px !important
-  z-index: 3 !important
-  outline: none !important
-
-mat-button-toggle:hover
-  box-shadow: none !important
-  border-bottom: 1px solid !important
-  border-radius: 0 !important
-  &.mat-button-toggle-checked
-    border-bottom: 2px #000 solid !important
-
-mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay
-  background-color: transparent !important
-  opacity: 0 !important
+  width: fit-content
 
 .mat-button-toggle-checked
   border-left: none
@@ -42,29 +20,27 @@ mat-button-toggle ::ng-deep .mat-button-toggle-focus-overlay
 .mat-button-toggle-input
   background-color: none !important
   padding-left: 32px !important
-    
+
     ///////////////
-.custom-container 
-    display: grid
-    grid-template-columns: 300px 1fr
+.custom-container
+  display: grid
+  grid-template-columns: 300px 1fr
 
 .vcard-username
-    font-size: 20px
-    font-style: normal
-    font-weight: 300
-    line-height: 24px
-    color: $app-color-fg-muted
+  font-size: 20px
+  font-style: normal
+  font-weight: 300
+  line-height: 24px
+  color: $app-color-fg-muted
 
 .organization
-    font-weight: 500
+  font-weight: 500
 
 .btn-custom
-    background-color:#f6f8fa
-    border-color:#dee2e6 !important
+  background-color: #f6f8fa
+  border-color: #dee2e6 !important
+  color: $app-dark
+  font-weight: 500
+  &:hover,&:active,&:focus
+    background-color: #ebedf0
     color: $app-dark
-    font-weight: 500 
-    &:hover,&:active,&:focus
-         background-color:#ebedf0
-         color: $app-dark
-
-
diff --git a/src/app/auth/settings/settings.component.html b/src/app/auth/settings/settings.component.html
index 6bde41bb3..84f08562b 100644
--- a/src/app/auth/settings/settings.component.html
+++ b/src/app/auth/settings/settings.component.html
@@ -24,237 +24,231 @@
         </div>
     </div>
     <div
-        class="d-flex Layout Layout--flowRow-until-md Layout--sidebarPosition-start Layout--sidebarPosition-flowRow-start"
+        class="d-flex layout layout--flowRow-until-md layout--sidebar-position-start layout--sidebarPosition-flowRow-start"
     >
-        <div class="Layout-sidebar">
+        <div class="layout-sidebar">
             <div class="pr-md-4 pr-0">
                 <div data-catalyst="">
-                    <nav aria-label="User settings" data-view-component="true" class="NavigationList">
-                        <ul
-                            role="list"
-                            aria-label="User settings"
-                            nav_classes="org-sub-menu"
-                            data-view-component="true"
-                            class="ActionList"
-                        >
+                    <nav>
+                        <ul role="list" nav_classes="org-sub-menu" data-view-component="true" class="action-list">
                             <li
                                 data-item-id="settings_user_profile"
                                 data-view-component="true"
                                 [ngClass]="{
-                                    'ActionList-item--navActive': activeTab === settingsTabs.PROFILE
+                                    'action-list-item--nav__active': activeTab === settingsTabs.PROFILE
                                 }"
-                                class="ActionList-item org-menu-item"
+                                class="action-list-item"
                             >
                                 <a
                                     routerLinkActive="active"
                                     [routerLink]="getRouteLink(settingsTabs.PROFILE)"
                                     aria-current="page"
                                     data-view-component="true"
-                                    class="ActionList-content ActionList-content--visual16"
+                                    class="action-list-content"
                                 >
                                     <span
-                                        class="ActionList-item-visual ActionList-item-visual--leading text-muted mr-2"
+                                        class="action-list-item-visual action-list-item-visual--leading text-muted mr-2"
                                     >
                                         <svg-icon name="public-profile"></svg-icon>
                                     </span>
-                                    <span class="ActionList-item-label"> Public profile </span>
+                                    <span class="action-list-item-label"> Public profile </span>
                                 </a>
                             </li>
                             <li
                                 data-item-id=""
                                 data-view-component="true"
                                 [ngClass]="{
-                                    'ActionList-item--navActive': activeTab === settingsTabs.ACCOUNT
+                                    'action-list-item--nav__active': activeTab === settingsTabs.ACCOUNT
                                 }"
-                                class="ActionList-item org-menu-item"
+                                class="action-list-item"
                             >
                                 <a
                                     routerLinkActive="active"
                                     [routerLink]="getRouteLink(settingsTabs.ACCOUNT)"
                                     data-view-component="true"
-                                    class="ActionList-content ActionList-content--visual16"
+                                    class="action-list-content"
                                 >
                                     <span
-                                        class="ActionList-item-visual ActionList-item-visual--leading text-muted mr-2"
+                                        class="action-list-item-visual action-list-item-visual--leading text-muted mr-2"
                                     >
                                         <svg-icon name="account"></svg-icon>
                                     </span>
-                                    <span class="ActionList-item-label"> Account </span>
+                                    <span class="action-list-item-label"> Account </span>
                                 </a>
                             </li>
                             <li
                                 data-item-id=""
                                 data-view-component="true"
                                 [ngClass]="{
-                                    'ActionList-item--navActive': activeTab === settingsTabs.APPEARANCE
+                                    'action-list-item--nav__active': activeTab === settingsTabs.APPEARANCE
                                 }"
-                                class="ActionList-item org-menu-item"
+                                class="action-list-item"
                             >
                                 <a
                                     routerLinkActive="active"
                                     [routerLink]="getRouteLink(settingsTabs.APPEARANCE)"
                                     data-view-component="true"
-                                    class="ActionList-content ActionList-content--visual16"
+                                    class="action-list-content"
                                 >
                                     <span
-                                        class="ActionList-item-visual ActionList-item-visual--leading text-muted mr-2"
+                                        class="action-list-item-visual action-list-item-visual--leading text-muted mr-2"
                                     >
                                         <svg-icon name="appearance"></svg-icon>
                                     </span>
-                                    <span class="ActionList-item-label"> Appearance </span>
+                                    <span class="action-list-item-label"> Appearance </span>
                                 </a>
                             </li>
                             <li
                                 data-item-id=""
                                 data-view-component="true"
                                 [ngClass]="{
-                                    'ActionList-item--navActive': activeTab === settingsTabs.ACCESSIBILITY
+                                    'action-list-item--nav__active': activeTab === settingsTabs.ACCESSIBILITY
                                 }"
-                                class="ActionList-item org-menu-item"
+                                class="action-list-item"
                             >
                                 <a
                                     routerLinkActive="active"
                                     [routerLink]="getRouteLink(settingsTabs.ACCESSIBILITY)"
                                     data-view-component="true"
-                                    class="ActionList-content ActionList-content--visual16"
+                                    class="action-list-content"
                                 >
                                     <span
-                                        class="ActionList-item-visual ActionList-item-visual--leading text-muted mr-2"
+                                        class="action-list-item-visual action-list-item-visual--leading text-muted mr-2"
                                     >
                                         <svg-icon name="accessibility"></svg-icon>
                                     </span>
-                                    <span class="ActionList-item-label"> Accessibility </span>
+                                    <span class="action-list-item-label"> Accessibility </span>
                                 </a>
                             </li>
                             <li
                                 data-item-id=""
                                 data-view-component="true"
                                 [ngClass]="{
-                                    'ActionList-item--navActive': activeTab === settingsTabs.NOTIFICATIONS
+                                    'action-list-item--nav__active': activeTab === settingsTabs.NOTIFICATIONS
                                 }"
-                                class="ActionList-item org-menu-item"
+                                class="action-list-item"
                             >
                                 <a
                                     routerLinkActive="active"
                                     [routerLink]="getRouteLink(settingsTabs.NOTIFICATIONS)"
                                     data-view-component="true"
-                                    class="ActionList-content ActionList-content--visual16"
+                                    class="action-list-content"
                                 >
                                     <span
-                                        class="ActionList-item-visual ActionList-item-visual--leading text-muted mr-2"
+                                        class="action-list-item-visual action-list-item-visual--leading text-muted mr-2"
                                     >
                                         <svg-icon name="notifications"></svg-icon>
                                     </span>
-                                    <span class="ActionList-item-label"> Notifications </span>
+                                    <span class="action-list-item-label"> Notifications </span>
                                 </a>
                             </li>
                             <li
                                 role="separator"
                                 aria-hidden="true"
                                 data-view-component="true"
-                                class="ActionList-sectionDivider"
+                                class="action-list-section-divider"
                             ></li>
-                            <li data-view-component="true" class="ActionList-sectionDivider">
+                            <li data-view-component="true" class="action-list-section-divider">
                                 <p
                                     id="nav-list-section-2534b94a-735f-4cd6-bfff-c0f48caf7cab"
                                     data-view-component="true"
-                                    class="ActionList-sectionDivider-title"
+                                    class="action-list-section-divider-title"
                                 >
                                     Access
                                 </p>
                             </li>
-                            <li data-view-component="true" class="ActionList-item ActionList-item--hasSubItem">
+                            <li data-view-component="true" class="action-list-item action-list-item--hasSubItem">
                                 <ul
                                     aria-labelledby="nav-list-section-2534b94a-735f-4cd6-bfff-c0f48caf7cab"
                                     data-view-component="true"
-                                    class="ActionList ActionList--subGroup"
+                                    class="action-list action-list--subGroup"
                                 >
                                     <li
                                         data-item-id=""
                                         data-view-component="true"
-                                        class="ActionList-item org-menu-item"
+                                        class="action-list-item"
                                         [ngClass]="{
-                                            'ActionList-item--navActive': activeTab === settingsTabs.BILLING
+                                            'action-list-item--nav__active': activeTab === settingsTabs.BILLING
                                         }"
                                     >
                                         <a
                                             routerLinkActive="active"
                                             [routerLink]="getRouteLink(settingsTabs.BILLING)"
                                             data-view-component="true"
-                                            class="ActionList-content ActionList-content--visual16"
+                                            class="action-list-content"
                                         >
                                             <span
-                                                class="ActionList-item-visual ActionList-item-visual--leading text-muted mr-2"
+                                                class="action-list-item-visual action-list-item-visual--leading text-muted mr-2"
                                             >
                                                 <svg-icon name="billing"></svg-icon>
                                             </span>
-                                            <span class="ActionList-item-label"> Billing and plans </span>
+                                            <span class="action-list-item-label"> Billing and plans </span>
                                         </a>
                                     </li>
                                     <li
                                         data-item-id=""
                                         data-view-component="true"
-                                        class="ActionList-item org-menu-item"
+                                        class="action-list-item"
                                         [ngClass]="{
-                                            'ActionList-item--navActive': activeTab === settingsTabs.EMAILS
+                                            'action-list-item--nav__active': activeTab === settingsTabs.EMAILS
                                         }"
                                     >
                                         <a
                                             routerLinkActive="active"
                                             [routerLink]="getRouteLink(settingsTabs.EMAILS)"
                                             data-view-component="true"
-                                            class="ActionList-content ActionList-content--visual16"
+                                            class="action-list-content"
                                         >
                                             <span
-                                                class="ActionList-item-visual ActionList-item-visual--leading text-muted mr-2"
+                                                class="action-list-item-visual action-list-item-visual--leading text-muted mr-2"
                                             >
                                                 <svg-icon name="emails"></svg-icon>
                                             </span>
-                                            <span class="ActionList-item-label"> Emails </span>
+                                            <span class="action-list-item-label"> Emails </span>
                                         </a>
                                     </li>
                                     <li
                                         data-item-id=""
                                         data-view-component="true"
-                                        class="ActionList-item org-menu-item"
+                                        class="action-list-item"
                                         [ngClass]="{
-                                            'ActionList-item--navActive': activeTab === settingsTabs.SECURITY
+                                            'action-list-item--nav__active': activeTab === settingsTabs.SECURITY
                                         }"
                                     >
                                         <a
                                             routerLinkActive="active"
                                             [routerLink]="getRouteLink(settingsTabs.SECURITY)"
                                             data-view-component="true"
-                                            class="ActionList-content ActionList-content--visual16"
+                                            class="action-list-content"
                                         >
                                             <span
-                                                class="ActionList-item-visual ActionList-item-visual--leading text-muted mr-2"
+                                                class="action-list-item-visual action-list-item-visual--leading text-muted mr-2"
                                             >
                                                 <svg-icon name="security"></svg-icon>
                                             </span>
-                                            <span class="ActionList-item-label"> Password and authentication </span>
+                                            <span class="action-list-item-label"> Password and authentication </span>
                                         </a>
                                     </li>
                                     <li
                                         data-item-id=""
                                         data-view-component="true"
-                                        class="ActionList-item org-menu-item"
+                                        class="action-list-item"
                                         [ngClass]="{
-                                            'ActionList-item--navActive': activeTab === settingsTabs.ORGANIZATIONS
+                                            'action-list-item--nav__active': activeTab === settingsTabs.ORGANIZATIONS
                                         }"
                                     >
                                         <a
                                             routerLinkActive="active"
                                             [routerLink]="getRouteLink(settingsTabs.ORGANIZATIONS)"
                                             data-view-component="true"
-                                            class="ActionList-content ActionList-content--visual16"
+                                            class="action-list-content"
                                         >
                                             <span
-                                                class="ActionList-item-visual ActionList-item-visual--leading text-muted mr-2"
+                                                class="action-list-item-visual action-list-item-visual--leading text-muted mr-2"
                                             >
                                                 <svg-icon name="organizations"></svg-icon>
                                             </span>
-                                            <span class="ActionList-item-label"> Organizations </span>
+                                            <span class="action-list-item-label"> Organizations </span>
                                         </a>
                                     </li>
                                 </ul>
diff --git a/src/app/auth/settings/settings.component.sass b/src/app/auth/settings/settings.component.sass
index f0079d53e..e346246e0 100644
--- a/src/app/auth/settings/settings.component.sass
+++ b/src/app/auth/settings/settings.component.sass
@@ -1,26 +1,38 @@
 @import src/assets/styles/var
 
 .p-responsive
-    padding-left: 16px
-    a
-        text-decoration: none
+  padding-left: 16px
+  a
+    text-decoration: none
+
 .fw-bold-custom
-    font-weight: 600
-.ActionList
-    padding: 0
+  font-weight: 600
 
-.ActionList-item
+.action-list
+  padding: 0
+  &-item
     position: relative
     list-style: none
     border-radius: 6px
     text-decoration: none
-
-.ActionList-item a
-    &:hover
+    a
+      &:hover
         cursor: pointer
         text-decoration: none
-
-.ActionList-content
+    &--nav__active
+      background: $app-color-action-list-item-default-selected-bg
+      a
+        font-weight: 600
+      &::after
+        position: absolute
+        top: calc(50% - 12px)
+        left: -8px
+        width: 4px
+        height: 24px
+        content: ""
+        background: $app-color-accent-fg
+        border-radius: 6px
+  &-content
     position: relative
     display: grid
     width: 100%
@@ -40,36 +52,21 @@
     grid-template-columns: min-content max-content
     align-items: start
     &:hover
-        background: $app-color-action-list-item-default-selected-bg
-
-.ActionList-item--navActive
-    background: $app-color-action-list-item-default-selected-bg
-    &::after
-        position: absolute
-        top: calc(50% - 12px)
-        left: -8px
-        width: 4px
-        height: 24px
-        content: ""
-        background: $app-color-accent-fg
-        border-radius: 6px
-
-.ActionList-item--navActive a
-    font-weight: 600
-
-.ActionList-sectionDivider:empty
-    display: block
-    height: 1px
-    padding: 0
-    margin: 7px -8px 8px
-    list-style: none
-    background: $app-color-action-list-item-inline-divider
-    border: 0
-
-.ActionList-sectionDivider:not(:empty)
-    display: flex
-    padding: 6px 8px
-    font-size: 12px
-    font-weight: 500
-    color: $app-color-fg-muted
-    flex-direction: column
+      background: $app-color-action-list-item-default-selected-bg
+  &-section-divider
+    &:not(:empty)
+      display: flex
+      padding: 6px 8px
+      font-size: 12px
+      font-weight: 500
+      color: $app-color-fg-muted
+      flex-direction: column
+  &-section-divider
+    &:empty
+      display: block
+      height: 1px
+      padding: 0
+      margin: 7px -8px 8px
+      list-style: none
+      background: $app-color-action-list-item-inline-divider
+      border: 0
diff --git a/src/app/components/app-header/app-header.component.html b/src/app/components/app-header/app-header.component.html
index b881f6527..aeab25a08 100644
--- a/src/app/components/app-header/app-header.component.html
+++ b/src/app/components/app-header/app-header.component.html
@@ -1,16 +1,16 @@
 <nav
     *ngIf="isVisible"
-    class="navbar navbar-expand-lg navbar-dark bg-dark Header Details px-3 px-md-4 px-lg-5 flex-wrap flex-md-nowrap"
+    class="navbar navbar-expand-lg navbar-dark bg-dark Header details px-3 px-md-4 px-lg-5 flex-wrap flex-md-nowrap"
     id="app-header"
 >
-    <div class="Header-item mt-n1 mb-n1 d-none d-md-flex">
+    <div class="header-item mt-n1 mb-n1 d-none d-md-flex">
         <div [classList]="'app-brand'" id="appHeaderLogo">
             <button (click)="onClickAppLogo()" data-test-id="appLogo">
                 <img [src]="appLogo" alt="Application logo" />
             </button>
         </div>
     </div>
-    <div class="Header-item d-md-none">
+    <div class="header-item d-md-none">
         <button
             #appHeaderMenuButton
             id="appHeaderMenuButton"
@@ -28,7 +28,7 @@
         </button>
     </div>
     <div
-        class="Header-item Header-item--full flex-column flex-md-row width-full flex-order-2 flex-md-order-none mr-0 mr-md-3 mt-3 mt-md-0 Details-content--hidden-not-important d-md-flex"
+        class="header-item header-item--full flex-column flex-md-row width-full flex-order-2 flex-md-order-none mr-0 mr-md-3 mt-3 mt-md-0 details-content--hidden-not-important d-md-flex"
     >
         <div
             class="header-search flex-auto position-relative flex-self-stretch flex-md-self-auto mb-3 mb-md-0 mr-0 mr-md-3"
@@ -38,7 +38,7 @@
                     <ul class="navbar-nav">
                         <li
                             [classList]="
-                                'nav-item searchInputContainer ' + (isSearchActive ? 'active-search-input' : '')
+                                'nav-item search-input-container ' + (isSearchActive ? 'active-search-input' : '')
                             "
                         >
                             <div
@@ -91,7 +91,7 @@
         >
             <div class="d-flex flex-column flex-md-row flex-self-stretch flex-md-self-auto">
                 <a
-                    class="Header-link py-2 py-md-3 mr-0 mr-md-3 border-sm-top border-md-top-0 border-white-fade"
+                    class="header-link py-2 py-md-3 mr-0 mr-md-3 border-sm-top border-md-top-0 border-white-fade"
                     data-ga-click="Header, click, Nav menu - item:explore"
                     data-selected-links="/explore /trending /trending/developers /integrations /integrations/feature/code /integrations/feature/collaborate /integrations/feature/ship showcases showcases_search showcases_landing /explore"
                     href="#"
@@ -100,7 +100,7 @@
                 </a>
 
                 <a
-                    class="Header-link py-2 py-md-3 mr-0 mr-md-3 border-sm-top border-md-top-0 border-white-fade"
+                    class="header-link py-2 py-md-3 mr-0 mr-md-3 border-sm-top border-md-top-0 border-white-fade"
                     data-ga-click="Header, click, Nav menu - item:dashboard:user"
                     aria-label="Dashboard"
                     (click)="onUserDatasets()"
@@ -109,7 +109,7 @@
                 </a>
 
                 <a
-                    class="Header-link d-block d-md-none py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                    class="header-link d-block d-md-none py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                     (click)="onAddNew()"
                     data-test-id="addNewDataset"
                 >
@@ -118,19 +118,19 @@
 
                 <ng-template [ngIf]="!isUserLoggedIn()">
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openBillingPlanHeader"
                         (click)="onBilling()"
                         >Account & Billing</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openHelpHeader"
                         (click)="onHelp()"
                         >Help</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openUserProfileHeader"
                         (click)="onLogin()"
                         >Login</a
@@ -139,37 +139,37 @@
 
                 <ng-template [ngIf]="isUserLoggedIn()">
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openUserProfileHeader"
                         (click)="onUserProfile()"
                         >Your profile</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openBillingPlanHeader"
                         (click)="onBilling()"
                         >Account & Billing</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openAnalyticsHeader"
                         (click)="onAnalytics()"
                         >Analytics</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openSettingsHeader"
                         (click)="onSettings()"
                         >Settings</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="openHelpHeader"
                         (click)="onHelp()"
                         >Help</a
                     >
                     <a
-                        class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
+                        class="header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-top border-md-top-0 border-white-fade"
                         data-test-id="userNameHeader"
                         href="/kulykivska"
                     >
@@ -184,7 +184,7 @@
                         {{ isUserLoggedIn() ? userInfo.name : defaultUsername }}
                     </a>
                     <button
-                        class="Header-link Header-signout-btn d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-md-top-0 border-white-fade"
+                        class="header-link header-signout-btn d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-sm-top border-md-top-0 border-white-fade"
                         data-test-id="openSignOutHeader"
                         (click)="onLogOut()"
                     >
diff --git a/src/app/components/app-header/app-header.component.spec.ts b/src/app/components/app-header/app-header.component.spec.ts
index da16230bb..588b42804 100644
--- a/src/app/components/app-header/app-header.component.spec.ts
+++ b/src/app/components/app-header/app-header.component.spec.ts
@@ -111,8 +111,8 @@ describe("AppHeaderComponent", () => {
             const headerMenu = findNativeElement(fixture, "#app-header");
             emitClickOnElement(fixture, "#appHeaderMenuButton");
             isExpectation
-                ? expect(headerMenu.classList.contains("Details--on")).toBeFalse()
-                : expect(headerMenu.classList.contains("Details--on")).toBeTrue();
+                ? expect(headerMenu.classList.contains("details--on")).toBeFalse()
+                : expect(headerMenu.classList.contains("details--on")).toBeTrue();
         });
     });
 
diff --git a/src/app/components/app-header/app-header.component.ts b/src/app/components/app-header/app-header.component.ts
index e87e921ad..311e21405 100644
--- a/src/app/components/app-header/app-header.component.ts
+++ b/src/app/components/app-header/app-header.component.ts
@@ -131,9 +131,9 @@ export class AppHeaderComponent extends BaseComponent implements OnInit {
         this.isCollapsedAppHeaderMenu = !this.isCollapsedAppHeaderMenu;
         if (appHeaderButton) {
             if (this.isCollapsedAppHeaderMenu) {
-                appHeaderButton.classList.add("Details--on");
+                appHeaderButton.classList.add("details--on");
             } else {
-                appHeaderButton.classList.remove("Details--on");
+                appHeaderButton.classList.remove("details--on");
             }
         }
     }
diff --git a/src/app/components/custom-pagination-component/custom-pagination.component.sass b/src/app/components/custom-pagination-component/custom-pagination.component.sass
index 291273b7f..15780618d 100644
--- a/src/app/components/custom-pagination-component/custom-pagination.component.sass
+++ b/src/app/components/custom-pagination-component/custom-pagination.component.sass
@@ -1,4 +1,5 @@
 @import src/assets/styles/var
+
 .paginate-container
   margin-top: 16px
   margin-bottom: 16px
@@ -6,16 +7,20 @@
   display: grid
   justify-content: center
 
-ngb-pagination ::ng-deep .page-item .page-link
-  border: none !important
-  display: flex
-  justify-content: center
-  align-items: center
-  border-radius: 6px
-  & span
-    display: none
-ngb-pagination ::ng-deep *
-  font-size: 14px
+ngb-pagination
+  ::ng-deep
+    .page-item
+      .page-link
+        border: none !important
+        display: flex
+        justify-content: center
+        align-items: center
+        border-radius: 6px
+        & span
+          display: none
+    *
+      font-size: 14px
+
 .page_button
   display: inline-block
   width: 16px
diff --git a/src/app/components/dataset-list-component/dataset-list.sass b/src/app/components/dataset-list-component/dataset-list.sass
index 71906a9e9..1bc73f5c3 100644
--- a/src/app/components/dataset-list-component/dataset-list.sass
+++ b/src/app/components/dataset-list-component/dataset-list.sass
@@ -1,4 +1,5 @@
 @import src/assets/styles/var
+
 .dataset-list-total-count
   margin: 0
 
@@ -6,12 +7,13 @@
   background: transparent
   > *
     background: transparent
-  & p
+  p
     z-index: 0
   &:hover
     background: $app-background-btn
-  &.form-group *
-    font-size: 16px
+  &.form-group
+    *
+      font-size: 16px
 
 #sortOptions
   color: $app-dark
diff --git a/src/app/components/dataset-list-item/dataset-list-item.component.sass b/src/app/components/dataset-list-item/dataset-list-item.component.sass
index e364429ed..d10087393 100644
--- a/src/app/components/dataset-list-item/dataset-list-item.component.sass
+++ b/src/app/components/dataset-list-item/dataset-list-item.component.sass
@@ -5,30 +5,26 @@
   display: grid
   grid-template-columns: 1fr
   grid-template-rows: 1fr
-
-.dataset-list-container__title-row
-  display: flex
-  justify-content: space-between
-  &__dataset-name
+  &__title-row
+    display: flex
+    justify-content: space-between
+    &__dataset-name
+      display: flex
+      justify-content: left
+      i
+        margin-right: 8px
+  &__title
     display: flex
-    justify-content: left
-  & i
-    margin-right: 8px
-
-.dataset-list-container__title
-  display: flex
-  background: none
-  border: none
-  color: $app-navyBlue
-  font-size: 16px
-  &:hover, &:active
-    cursor: pointer
-    text-decoration: underline
     background: none
-
-.dataset-list-container__additional-block
-  display: flex
-  gap: 5px
-  
-.dataset-list-container__description
-  font-size: 14px
\ No newline at end of file
+    border: none
+    color: $app-navyBlue
+    font-size: 16px
+    &:hover, &:active
+      cursor: pointer
+      text-decoration: underline
+      background: none
+  &__additional-block
+    display: flex
+    gap: 5px
+  &__description
+    font-size: 14px
diff --git a/src/app/components/dynamic-table/dynamic-table.sass b/src/app/components/dynamic-table/dynamic-table.sass
index 081b38116..aae069ca3 100644
--- a/src/app/components/dynamic-table/dynamic-table.sass
+++ b/src/app/components/dynamic-table/dynamic-table.sass
@@ -1,13 +1,14 @@
 @import src/assets/styles/var
-.clickable-row .mat-cell
-  color: $app-navyBlue
-  &:hover
-    cursor: pointer
-    text-decoration: underline
+.clickable-row
+  .mat-cell
+    color: $app-navyBlue
+    &:hover
+      cursor: pointer
+      text-decoration: underline
 
 table
   width: 100%
-  & .mat-cell
+  .mat-cell
     border: 1px solid
     color: $app-color-fg-default
     border-color: $app-color-border-default
diff --git a/src/app/components/notification-indicator/notification-indicator.html b/src/app/components/notification-indicator/notification-indicator.html
index acf3bd243..57a55f6d5 100644
--- a/src/app/components/notification-indicator/notification-indicator.html
+++ b/src/app/components/notification-indicator/notification-indicator.html
@@ -1,11 +1,4 @@
-<a
-    href="/notifications"
-    class="Header-link notification-indicator position-relative tooltipped tooltipped-sw"
-    aria-label="You have no unread notifications"
-    data-hotkey="g n"
-    data-ga-click="Header, go to notifications, icon:read"
-    data-target="notification-indicator.link"
->
+<a href="/notifications" class="header-link notification-indicator position-relative tooltipped tooltipped-sw">
     <span class="mail-status" data-target="notification-indicator.modifier"></span>
     <svg-icon name="notifications-large"></svg-icon>
 </a>
diff --git a/src/app/components/notification-indicator/notification-indicator.sass b/src/app/components/notification-indicator/notification-indicator.sass
index acd2f9c60..31b9cb6e1 100644
--- a/src/app/components/notification-indicator/notification-indicator.sass
+++ b/src/app/components/notification-indicator/notification-indicator.sass
@@ -1,13 +1,14 @@
-.notification-indicator .mail-status
-  position: absolute
-  top: -13px
-  left: 13px
-  z-index: 2
-  display: none
-  width: 14px
-  height: 14px
-  color: #fff
-  background-image: linear-gradient(#54a3ff, #006eed)
-  background-clip: padding-box
-  border: 2px solid var(--color-header-bg)
-  border-radius: 50%
\ No newline at end of file
+.notification-indicator
+  .mail-status
+    position: absolute
+    top: -13px
+    left: 13px
+    z-index: 2
+    display: none
+    width: 14px
+    height: 14px
+    color: #fff
+    background-image: linear-gradient(#54a3ff, #006eed)
+    background-clip: padding-box
+    border: 2px solid var(--color-header-bg)
+    border-radius: 50%
diff --git a/src/app/components/overview-history-summary-header/overview-history-summary-header.component.html b/src/app/components/overview-history-summary-header/overview-history-summary-header.component.html
index 4c3fe7c86..5fb0b7458 100644
--- a/src/app/components/overview-history-summary-header/overview-history-summary-header.component.html
+++ b/src/app/components/overview-history-summary-header/overview-history-summary-header.component.html
@@ -2,8 +2,8 @@
     <div class="box-header position-relative" *ngIf="metadataBlockFragment">
         <div class="d-flex rounded-top-1 border-bottom-0 align-items-center flex-wrap">
             <div class="flex-shrink-0 ml-n1 mr-n1 mt-n1 mb-n1 hx_avatar_stack_commit">
-                <div class="avatarStack align-self-start">
-                    <div class="avatarStack__body" aria-label="sergiimk">
+                <div class="avatar-stack align-self-start">
+                    <div class="avatar-stack__body" aria-label="sergiimk">
                         <a
                             class="avatar avatar-user"
                             style="width: 24px; height: 24px"
diff --git a/src/app/components/pagination-component/pagination-component.sass b/src/app/components/pagination-component/pagination-component.sass
index 291273b7f..ef408222f 100644
--- a/src/app/components/pagination-component/pagination-component.sass
+++ b/src/app/components/pagination-component/pagination-component.sass
@@ -6,16 +6,23 @@
   display: grid
   justify-content: center
 
-ngb-pagination ::ng-deep .page-item .page-link
-  border: none !important
-  display: flex
-  justify-content: center
-  align-items: center
-  border-radius: 6px
-  & span
-    display: none
-ngb-pagination ::ng-deep *
-  font-size: 14px
+  ngb-pagination
+    ::ng-deep
+      .page-item
+        .page-link
+          border: none !important
+          display: flex
+          justify-content: center
+          align-items: center
+          border-radius: 6px
+          & span
+            display: none
+
+ngb-pagination
+  ::ng-deep
+    *
+      font-size: 14px
+
 .page_button
   display: inline-block
   width: 16px
diff --git a/src/app/components/search-additional-buttons/search-additional-buttons-nav.component.html b/src/app/components/search-additional-buttons/search-additional-buttons-nav.component.html
index bad26760f..91f422731 100644
--- a/src/app/components/search-additional-buttons/search-additional-buttons-nav.component.html
+++ b/src/app/components/search-additional-buttons/search-additional-buttons-nav.component.html
@@ -1,13 +1,13 @@
-<ul class="nav searchAdditionalButtons__nav">
+<ul class="nav search-additional-buttons__nav">
     <ng-template ngFor let-searchAdditionalData [ngForOf]="searchAdditionalButtonsData">
         <li class="nav-item mr-2 pt-2">
-            <div class="btnGroup-parent nav">
+            <div class="btn-group-parent nav">
                 <button
                     (click)="onClickButton(searchAdditionalData.textButton)"
                     [classList]="
                         searchAdditionalData.additionalOptions && searchAdditionalData.additionalOptions.options
-                            ? 'starred rounded-left-2 border-right-0 additionalOptions-btn btn-sm btn btnGroup-item d-flex justify-content-between align-items-center'
-                            : 'starred rounded-2 btn-sm btn btnGroup-item d-flex justify-content-between align-items-center'
+                            ? 'starred rounded-left-2 border-right-0 additional-options-btn btn-sm btn btn-group-item d-flex justify-content-between align-items-center'
+                            : 'starred rounded-2 btn-sm btn btn-group-item d-flex justify-content-between align-items-center'
                     "
                 >
                     <svg
@@ -40,19 +40,19 @@
                 <ng-template [ngIf]="searchAdditionalData.additionalOptions">
                     <button
                         style="height: inherit"
-                        class="additionalOptions-btn mat-menu-trigger starred rounded-right-2 border-1 border btn-sm btn btnGroup-item d-flex justify-content-center align-items-center mat-button mat-icon-button mat-button-base"
+                        class="additional-options-btn mat-menu-trigger starred rounded-right-2 border-1 border btn-sm btn btn-group-item d-flex justify-content-center align-items-center mat-button mat-icon-button mat-button-base"
                         [matMenuTriggerFor]="menu2"
                     >
-                        <mat-icon class="arrowDropDown">arrow_drop_down</mat-icon>
+                        <mat-icon class="arrow-dropdown">arrow_drop_down</mat-icon>
                     </button>
                     <mat-menu #menu2="matMenu">
-                        <div class="SelectMenu-modal notifications-component-menu-modal">
-                            <header class="SelectMenu-header">
-                                <h3 class="SelectMenu-title">
+                        <div class="select-menu-modal notifications-component-menu-modal">
+                            <header class="select-menu-header">
+                                <h3 class="select-menu-title">
                                     {{ searchAdditionalData.additionalOptions.title }}
                                 </h3>
                                 <button
-                                    class="SelectMenu-closeButton"
+                                    class="select-menu-close-btn"
                                     type="button"
                                     aria-label="Close menu"
                                     data-action="click:notifications-list-subscription-form#closeMenu"
@@ -61,7 +61,7 @@ <h3 class="SelectMenu-title">
                                 </button>
                             </header>
 
-                            <div class="SelectMenu-list">
+                            <div class="select-menu-list">
                                 <form
                                     data-target="notifications-list-subscription-form.form"
                                     data-action="submit:notifications-list-subscription-form#submitForm"
@@ -78,7 +78,7 @@ <h3 class="SelectMenu-title">
                                             type="submit"
                                             name="do"
                                             value="included"
-                                            class="SelectMenu-item flex-items-start"
+                                            class="select-menu-item flex-items-start"
                                             role="menuitemradio"
                                             [attr.aria-checked]="option.isSelected"
                                             data-targets="notifications-list-subscription-form.subscriptionButtons"
diff --git a/src/app/components/search-additional-buttons/search-additional-buttons.component.html b/src/app/components/search-additional-buttons/search-additional-buttons.component.html
index 2efe2d084..7e2823538 100644
--- a/src/app/components/search-additional-buttons/search-additional-buttons.component.html
+++ b/src/app/components/search-additional-buttons/search-additional-buttons.component.html
@@ -1,5 +1,5 @@
 <ng-template [ngIf]="shouldMinimizeSearchAdditionalButtons">
-    <div class="searchAdditionalButtonsBlock">
+    <div class="search-additional-buttons-block">
         <button
             mat-icon-button
             [matMenuTriggerFor]="menu"
@@ -9,7 +9,7 @@
             <mat-icon>more_horiz</mat-icon>
         </button>
     </div>
-    <mat-menu #menu="matMenu" class="searchAdditionalButtonsMinimizeBlock">
+    <mat-menu #menu="matMenu" class="search-additional-buttons-minimize-block">
         <app-search-additional-buttons-nav
             [searchAdditionalButtonsData]="searchAdditionalButtonsData"
         ></app-search-additional-buttons-nav>
diff --git a/src/app/components/search-additional-buttons/search-additional-buttons.component.sass b/src/app/components/search-additional-buttons/search-additional-buttons.component.sass
index 4a051a1a7..944b475fe 100644
--- a/src/app/components/search-additional-buttons/search-additional-buttons.component.sass
+++ b/src/app/components/search-additional-buttons/search-additional-buttons.component.sass
@@ -2,6 +2,7 @@
 
 *
     color: $app-emperor
+
 [data-test-id="searchAdditionalButtons"]
     background: $app-white
     border: 1px solid $app-veryLightGray
@@ -9,18 +10,23 @@
     box-shadow: 0 5px 4px $app-versatileBusinessDark
     border-radius: 8px
     color: $app-emperor
-.searchAdditionalButton
+
+.search-additional-button
     height: 40px
     background: $app-white
-.searchAdditionalButtons__nav
+
+.search-additional-buttons__nav
     justify-content: end
     align-items: end
-.searchAdditionalButtonsBlock
+
+.search-additional-buttons-block
     justify-content: flex-end
     display: flex
-.arrowDropDown
+
+.arrow-dropdown
     align-items: center
     justify-content: center
     display: flex
-.additionalOptions-btn
-    width: min-content !important
\ No newline at end of file
+
+.additional-options-btn
+    width: min-content !important
diff --git a/src/app/components/timeline-component/timeline.component.html b/src/app/components/timeline-component/timeline.component.html
index 619d64bea..b922a8de4 100644
--- a/src/app/components/timeline-component/timeline.component.html
+++ b/src/app/components/timeline-component/timeline.component.html
@@ -10,7 +10,7 @@
                         class="box__row box__row--focus-gray mt-0 d-flex"
                         data-url="/kamu-data/kamu-web-ui/commits/75e711dfb8e35335b622f0c56ff59fc3fc7cea7d/commits_list_item"
                     >
-                        <div class="flex-auto min-width-0 Details">
+                        <div class="flex-auto min-width-0 details">
                             <div class="d-flex align-items-center mt-1" style="gap: 5px">
                                 <mat-icon *ngIf="block.event.__typename === 'Seed'">add_circle_outline</mat-icon>
                                 <mat-icon *ngIf="block.event.__typename === 'AddData'">input</mat-icon>
@@ -93,7 +93,7 @@
                                 </button>
                             </div>
 
-                            <div data-view-component="true" class="BtnGroup m-4">
+                            <div data-view-component="true" class="btns-group-item m-4">
                                 <app-display-hash
                                     [value]="block.blockHash"
                                     [navigationTargetDataset]="{
@@ -104,12 +104,12 @@
                                     [class]="'text-decoration-none text-dark mr-4 hashBlock'"
                                 ></app-display-hash>
                             </div>
-                            <div data-view-component="true" class="BtnGroup">
+                            <div data-view-component="true" class="btns-group-item">
                                 <a
                                     href="/kamu-data/kamu-web-ui/tree/75e711dfb8e35335b622f0c56ff59fc3fc7cea7d"
                                     aria-label="Browse the repository at this point in the history"
                                     data-view-component="true"
-                                    class="tooltipped tooltipped-sw btn-outline btn BtnGroup-item"
+                                    class="tooltipped tooltipped-sw btn-outline btn btns-group-item"
                                 >
                                     <svg-icon name="code"></svg-icon>
                                 </a>
diff --git a/src/app/components/timeline-component/timeline.component.sass b/src/app/components/timeline-component/timeline.component.sass
index b4f17545b..c52551b09 100644
--- a/src/app/components/timeline-component/timeline.component.sass
+++ b/src/app/components/timeline-component/timeline.component.sass
@@ -18,7 +18,7 @@
     &--condensed
       padding-top: 4px
       padding-bottom: 0
-      & .timeline-block__item-badge
+      .timeline-block__item-badge
         height: 16px
         margin-top: 8px
         margin-bottom: 8px
@@ -49,7 +49,7 @@
     &__header
       font-size: 14px !important
       font-weight: normal
-  & mat-icon
+  mat-icon
     justify-content: center
     align-items: center
-    display: flex
\ No newline at end of file
+    display: flex
diff --git a/src/app/dataset-block/metadata-block/components/block-header/block-header.component.html b/src/app/dataset-block/metadata-block/components/block-header/block-header.component.html
index 8b9fe1fe3..94d39cd20 100644
--- a/src/app/dataset-block/metadata-block/components/block-header/block-header.component.html
+++ b/src/app/dataset-block/metadata-block/components/block-header/block-header.component.html
@@ -4,7 +4,7 @@
             <span class="d-inline mr-2">Block Actions</span>
         </button>
         <button
-            class="starred rounded-right-2 border rounded-end btnGroup-item d-flex justify-content-center align-items-center"
+            class="starred rounded-right-2 border rounded-end btn-group-item d-flex justify-content-center align-items-center"
             mat-icon-button
             mat-button
             #menuTrigger="matMenuTrigger"
diff --git a/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.sass b/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.sass
index b0b1f12ea..c6c1c766d 100644
--- a/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.sass
+++ b/src/app/dataset-block/metadata-block/components/event-details/components/set-attachments-event/set-attachments-event.component.sass
@@ -1,3 +1,4 @@
-::ng-deep.mat-typography
-    h1
-        line-height: 1.2 !important
+::ng-deep
+    &.mat-typography
+        h1
+            line-height: 1.2 !important
diff --git a/src/app/dataset-create/dataset-create.component.sass b/src/app/dataset-create/dataset-create.component.sass
index 1c2507753..5b7d4eed5 100644
--- a/src/app/dataset-create/dataset-create.component.sass
+++ b/src/app/dataset-create/dataset-create.component.sass
@@ -1,8 +1,10 @@
 @import src/assets/styles/var
 *
   font-size: 18px
+
 #dataset-create
   display: grid
+
 .dataset-create-content
   display: grid
   padding: 0 16px
@@ -14,6 +16,7 @@
     display: grid
     justify-items: center
     overflow: initial
+
 .dataset-create-container
   height: min-content
   display: grid
@@ -23,6 +26,7 @@
   align-self: center
   align-content: center
   width: 100%
+
 .dataset-create-tipText
   font-style: normal
   font-weight: normal
@@ -67,10 +71,8 @@ hr
     font-size: 20px !important
     font-weight: 400 !important
     margin: 0 !important
-
   .container-monaco
     min-width: 100%
-
   .btn-create
     background: #2c974b
     border-color: rgba(27,31 ,36 ,0.15 )
@@ -87,7 +89,6 @@ hr
       background: #34b358
     &:disabled
       background: #69e18b
-
   label
     span
       font-size: 16px
diff --git a/src/app/dataset-view/additional-components/data-component/data-component.html b/src/app/dataset-view/additional-components/data-component/data-component.html
index 27345ae22..5b57d604a 100644
--- a/src/app/dataset-view/additional-components/data-component/data-component.html
+++ b/src/app/dataset-view/additional-components/data-component/data-component.html
@@ -65,13 +65,13 @@ <h2 class="box-title align-items-center pb-3 pt-3 m-0">Saved Queries</h2>
                         {{item.title}} <br />
                         <code style="display: block; white-space: pre-wrap">{{item.query}}</code>
                         <div class="d-inline">
-                            <div class="btnGroup-parent float-none">
+                            <div class="btn-group-parent float-none">
                                 <button
                                     mat-icon-button
                                     data-test-id="runSqlQueryRequestCode"
                                     name="run sql button"
                                     (click)="onRunSQLRequest(item.query)"
-                                    class="sql-run-button rounded-2 btnGroup-item btn d-flex justify-content-center align-items-center"
+                                    class="sql-run-button rounded-2 btn-group-item btn d-flex justify-content-center align-items-center"
                                 >
                                     <span>Run</span><mat-icon>play_arrow</mat-icon>
                                 </button>
@@ -85,19 +85,19 @@ <h2 class="box-title align-items-center pb-3 pt-3 m-0">Saved Queries</h2>
     <div class="search-result-container__content">
         <div class="sql-query-editor-header flex-column justify-content-around">
             <h2 class="box-title align-items-center pb-3 m-0">Query:</h2>
-            <div class="btnGroup-parent">
+            <div class="btn-group-parent">
                 <button
                     mat-icon-button
                     data-test-id="runSqlQueryButton"
                     name="run sql button"
                     (click)="onRunSQLRequest()"
                     [disabled]="!currentData.length && !sqlErrorMarker"
-                    class="sql-run-button rounded-left-2 border-right-0 btnGroup-item btn d-flex justify-content-center align-items-center"
+                    class="sql-run-button rounded-left-2 border-right-0 btn-group-item btn d-flex justify-content-center align-items-center"
                 >
                     <span>Run</span><mat-icon>play_arrow</mat-icon>
                 </button>
                 <button
-                    class="starred rounded-right-2 border-1 border btn-sm btn btnGroup-item d-flex justify-content-center align-items-center"
+                    class="starred rounded-right-2 border-1 border btn-sm btn btn-group-item d-flex justify-content-center align-items-center"
                     mat-icon-button
                     mat-button
                     #menuTrigger="matMenuTrigger"
@@ -108,13 +108,13 @@ <h2 class="box-title align-items-center pb-3 m-0">Query:</h2>
                     <mat-icon>arrow_drop_down</mat-icon>
                 </button>
                 <mat-menu #menu2="matMenu">
-                    <div class="SelectMenu-modal notifications-component-menu-modal">
-                        <div class="SelectMenu-list">
+                    <div class="select-menu-modal notifications-component-menu-modal">
+                        <div class="select-menu-list">
                             <button
                                 type="submit"
                                 name="do"
                                 value="subscribed"
-                                class="SelectMenu-item flex-items-start"
+                                class="select-menu-item flex-items-start"
                                 role="menuitemradio"
                                 aria-checked="true"
                                 data-targets="notifications-list-subscription-form.subscriptionButtons"
diff --git a/src/app/dataset-view/additional-components/overview-component/components/readme-section/readme-section.component.html b/src/app/dataset-view/additional-components/overview-component/components/readme-section/readme-section.component.html
index feffa5d37..eb98639dd 100644
--- a/src/app/dataset-view/additional-components/overview-component/components/readme-section/readme-section.component.html
+++ b/src/app/dataset-view/additional-components/overview-component/components/readme-section/readme-section.component.html
@@ -9,7 +9,7 @@ <h2 class="box-title align-items-center m-0">
             </h2>
         </div>
         <button
-            class="starred rounded-2 btn-sm btn btnGroup-item custom-edit d-flex justify-content-center align-items-center"
+            class="starred rounded-2 btn-sm btn btn-roup-item custom-edit d-flex justify-content-center align-items-center"
             aria-label="Edit this file"
             data-test-id="show-edit-tabs"
             (click)="showEditTabs()"
diff --git a/src/app/dataset-view/additional-components/settings-component/settings.component.html b/src/app/dataset-view/additional-components/settings-component/settings.component.html
index f4dc2cb06..bc0eaf1f5 100644
--- a/src/app/dataset-view/additional-components/settings-component/settings.component.html
+++ b/src/app/dataset-view/additional-components/settings-component/settings.component.html
@@ -1,18 +1,10 @@
 <div class="custom-container px-4 p-responsive">
-    <div class="Layout-sidebar">
+    <div class="layout-sidebar">
         <div class="pr-md-4 pr-0">
             <div>
-                <nav aria-label="User settings" data-view-component="true" class="NavigationList">
-                    <ul
-                        role="list"
-                        aria-label="User settings"
-                        nav_classes="org-sub-menu"
-                        data-view-component="true"
-                        class="action-list"
-                    >
+                <nav>
+                    <ul role="list" class="action-list">
                         <li
-                            data-item-id=""
-                            data-view-component="true"
                             [ngClass]="{
                                 'action-list-item--nav-active': true
                             }"
diff --git a/src/app/dataset-view/additional-components/settings-component/settings.component.sass b/src/app/dataset-view/additional-components/settings-component/settings.component.sass
index 8b4ef5a04..966107f7e 100644
--- a/src/app/dataset-view/additional-components/settings-component/settings.component.sass
+++ b/src/app/dataset-view/additional-components/settings-component/settings.component.sass
@@ -1,140 +1,141 @@
 @import src/assets/styles/var
 p
-	margin: 0
+  margin: 0
+
 .custom-container
-	display: grid
-	grid-template-columns: 300px 1fr
+  display: grid
+  grid-template-columns: 300px 1fr
 
 .content-container
-	padding: 15px 30px 0px
-	h2
-		font-weight: 400
-		margin: 0
-	dl
-		margin: 0
+  padding: 15px 30px 0px
+  h2
+    font-weight: 400
+    margin: 0
+    dl
+      margin: 0
 
 .p-responsive
-	padding-left: 16px
-	a
-		text-decoration: none
-	.rename-btn
-		padding: 3px 12px
-		font-size: 14px
-		height: 32px
-		border: 1px solid rgba(27,31,36,0.25 )
-		border-radius: 6px
-		&:hover
-			background: rgba(27,31,36,0.16 )
+  padding-left: 16px
+  a
+    text-decoration: none
+  .rename-btn
+    padding: 3px 12px
+    font-size: 14px
+    height: 32px
+    border: 1px solid rgba(27,31,36,0.25 )
+    border-radius: 6px
+    &:hover
+      background: rgba(27,31,36,0.16 )
+
 .fw-bold-custom
-	font-weight: 600
+  font-weight: 600
+
 .action-list
-	padding: 0
+  padding: 0
 
 .action-list-item
-	position: relative
-	list-style: none
-	border-radius: 6px
-	text-decoration: none
-
-.action-list-item a
-	&:hover
-		cursor: pointer
-		text-decoration: none
+  position: relative
+  list-style: none
+  border-radius: 6px
+  text-decoration: none
+  a
+    &:hover
+      cursor: pointer
+      text-decoration: none
 
 .action-list-content
-	position: relative
-	display: grid
-	width: 100%
-	padding: 6px 8px
-	font-size: 14px
-	font-weight: 400
-	color: $app-color-fg-default
-	text-align: left
-	user-select: none
-	background-color: transparent
-	border: none
-	border-radius: 6px
-	transition: background 33.333ms linear
-	touch-action: manipulation
-	grid-template-rows: min-content
-	grid-template-areas: "leadingAction leadingVisual label trailingVisual trailingAction"
-	grid-template-columns: min-content max-content
-	align-items: start
-	&:hover
-		background: $app-color-action-list-item-default-selected-bg
+  position: relative
+  display: grid
+  width: 100%
+  padding: 6px 8px
+  font-size: 14px
+  font-weight: 400
+  color: $app-color-fg-default
+  text-align: left
+  user-select: none
+  background-color: transparent
+  border: none
+  border-radius: 6px
+  transition: background 33.333ms linear
+  touch-action: manipulation
+  grid-template-rows: min-content
+  grid-template-areas: "leadingAction leadingVisual label trailingVisual trailingAction"
+  grid-template-columns: min-content max-content
+  align-items: start
+  &:hover
+    background: $app-color-action-list-item-default-selected-bg
 
 .action-list-item--nav-active
-	background: $app-color-action-list-item-default-selected-bg
-	&::after
-		position: absolute
-		top: calc(50% - 12px)
-		left: -8px
-		width: 4px
-		height: 24px
-		content: ""
-		background: $app-color-accent-fg
-		border-radius: 6px
-
-.action-list-item--navActive a
-	font-weight: 600
-
-.action-list-sectionDivider:empty
-	display: block
-	height: 1px
-	padding: 0
-	margin: 7px -8px 8px
-	list-style: none
-	background: $app-color-action-list-item-inline-divider
-	border: 0
+  background: $app-color-action-list-item-default-selected-bg
+  &::after
+    position: absolute
+    top: calc(50% - 12px)
+    left: -8px
+    width: 4px
+    height: 24px
+    content: ""
+    background: $app-color-accent-fg
+    border-radius: 6px
+  a
+    font-weight: 600
 
-.action-list-sectionDivider:not(:empty)
-	display: flex
-	padding: 6px 8px
-	font-size: 12px
-	font-weight: 500
-	color: $app-color-fg-muted
-	flex-direction: column
+.action-list-sectionDivider
+  &:empty
+    display: block
+    height: 1px
+    padding: 0
+    margin: 7px -8px 8px
+    list-style: none
+    background: $app-color-action-list-item-inline-divider
+    border: 0
+  &:not(:empty)
+    display: flex
+    padding: 6px 8px
+    font-size: 12px
+    font-weight: 500
+    color: $app-color-fg-muted
+    flex-direction: column
 
 .danger-zone__content
-	padding: 15px
-	border: 1px solid rgba(27,31,36,0.25 )
-	border-radius: 6px
-	.description
-		font-weight: 600
-	button
-		color: #CF222E
-		padding: 3px 12px
-		font-size: 14px
-		height: 32px
-		border: 1px solid rgba(27,31,36,0.25 )
-		border-radius: 6px
-		white-space: nowrap
-		&:hover
-			background: rgba(27,31,36,0.16 )
+  padding: 15px
+  border: 1px solid rgba(27,31,36,0.25 )
+  border-radius: 6px
+  .description
+    font-weight: 600
+  button
+    color: #CF222E
+    padding: 3px 12px
+    font-size: 14px
+    height: 32px
+    border: 1px solid rgba(27,31,36,0.25 )
+    border-radius: 6px
+    white-space: nowrap
+    &:hover
+      background: rgba(27,31,36,0.16 )
 
 .error-block
-	z-index: 10
-	display: inline-block
-	padding: 4px 8px
-	font-size: 12px
-	border-style: solid
-	border-width: 1px
-	border-radius: 6px
-	background: #ffebe9
-	border-color: rgba(255, 129, 130, 0.4)
-	position: relative
-	&::before
-		content: "\A"
-		border-style: solid
-		border-width: 5px 7px 5px 5px
-		border-color: transparent rgba(255, 129, 130, 0.4) transparent transparent
-		position: absolute
-		left: 15px
-		top: -10px
-		transform: rotate(90deg)
+  z-index: 10
+  display: inline-block
+  padding: 4px 8px
+  font-size: 12px
+  border-style: solid
+  border-width: 1px
+  border-radius: 6px
+  background: #ffebe9
+  border-color: rgba(255, 129, 130, 0.4)
+  position: relative
+  &::before
+    content: "\A"
+    border-style: solid
+    border-width: 5px 7px 5px 5px
+    border-color: transparent rgba(255, 129, 130, 0.4) transparent transparent
+    position: absolute
+    left: 15px
+    top: -10px
+    transform: rotate(90deg)
 
 .error-color
-	color: #CF222E
+  color: #CF222E
 
 .error-border-color
-	border-color: #dc3545
+  border-color: #dc3545
diff --git a/src/app/dataset-view/dataset-view-menu/dataset-view-menu.html b/src/app/dataset-view/dataset-view-menu/dataset-view-menu.html
index 9c69a6758..d0849c303 100644
--- a/src/app/dataset-view/dataset-view-menu/dataset-view-menu.html
+++ b/src/app/dataset-view/dataset-view-menu/dataset-view-menu.html
@@ -6,7 +6,7 @@
                         : ''
                 "
 >
-    <div class="datasetViewTypeToggleGroup">
+    <div class="dataset-view-type-toggle-group">
         <mat-button-toggle-group
             name="datasetViewType"
             class="mat-button-toggle-group"
@@ -78,16 +78,16 @@
         </mat-button-toggle-group>
     </div>
 
-    <ul class="nav searchAdditionalButtons__nav">
+    <ul class="nav search-additional-buttons__nav">
         <li class="nav-item mr-2">
-            <div class="btnGroup-parent">
+            <div class="btn-group-parent">
                 <button
-                    class="dataset-download-button starred rounded-left-2 border-1 border-right-0 btn-sm btn btnGroup-item d-flex justify-content-center align-items-center"
+                    class="dataset-download-button starred rounded-left-2 border-1 border-right-0 btn-sm btn btn-group-item d-flex justify-content-center align-items-center"
                 >
                     <span class="d-inline mr-2">Download</span>
                 </button>
                 <button
-                    class="starred rounded-right-2 border-1 border btn-sm btn btnGroup-item d-flex justify-content-center align-items-center"
+                    class="starred rounded-right-2 border-1 border btn-sm btn btn-roup-item d-flex justify-content-center align-items-center"
                     mat-icon-button
                     mat-button
                     #menuTrigger="matMenuTrigger"
@@ -99,14 +99,14 @@
                 </button>
 
                 <mat-menu #menu2="matMenu" [hasBackdrop]="false" data-test-id="menu">
-                    <div class="SelectMenu-modal notifications-component-menu-modal">
-                        <header class="SelectMenu-header">
-                            <div class="SelectMenu-title text-bold">
+                    <div class="select-menu-modal notifications-component-menu-modal">
+                        <header class="select-menu-header">
+                            <div class="select-menu-title text-bold">
                                 <svg-icon name="terminal"></svg-icon>
                                 Download / Cite
                             </div>
                             <button
-                                class="SelectMenu-closeButton"
+                                class="select-menu-close-btn"
                                 type="button"
                                 aria-label="Close menu"
                                 data-action="click:notifications-list-subscription-form#closeMenu"
@@ -115,15 +115,15 @@
                             </button>
                         </header>
                         <div
-                            class="SelectMenu-list"
+                            class="select-menu-list"
                             (click)="$event.stopPropagation()"
                             (keydown)="$event.stopPropagation()"
                         >
                             <mat-tab-group>
                                 <mat-tab label="Download">
-                                    <div class="SelectMenu-item flex-column">
+                                    <div class="select-menu-item flex-column">
                                         <div
-                                            class="SelectMenu-item align-items-start p-0 border-0"
+                                            class="select-menu-item align-items-start p-0 border-0"
                                             (click)="
                                                             $event.stopPropagation()
                                                         "
@@ -134,7 +134,7 @@
                                             <p>Using kamu-cli:</p>
                                         </div>
                                         <div
-                                            class="SelectMenu-item align-items-start p-0 border-0"
+                                            class="select-menu-item align-items-start p-0 border-0"
                                             (click)="
                                                             $event.stopPropagation()
                                                         "
@@ -181,9 +181,9 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="SelectMenu-item flex-column">
+                                    <div class="select-menu-item flex-column">
                                         <div
-                                            class="SelectMenu-item align-items-start p-0 border-0"
+                                            class="select-menu-item align-items-start p-0 border-0"
                                             (click)="
                                                             $event.stopPropagation()
                                                         "
@@ -194,7 +194,7 @@
                                             <p>Using Kafka:</p>
                                         </div>
                                         <div
-                                            class="SelectMenu-item align-items-start p-0 border-0"
+                                            class="select-menu-item align-items-start p-0 border-0"
                                             (click)="
                                                             $event.stopPropagation()
                                                         "
@@ -240,12 +240,12 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <button class="SelectMenu-item">As Parquet</button>
-                                    <button class="SelectMenu-item">As CSV</button>
+                                    <button class="select-menu-item">As Parquet</button>
+                                    <button class="select-menu-item">As CSV</button>
                                 </mat-tab>
                                 <mat-tab label="Cite">
-                                    <button class="SelectMenu-item">DOI</button>
-                                    <button class="SelectMenu-item">Bibtech</button>
+                                    <button class="select-menu-item">DOI</button>
+                                    <button class="select-menu-item">Bibtech</button>
                                 </mat-tab>
                             </mat-tab-group>
                         </div>
diff --git a/src/app/dataset-view/dataset-view.component.sass b/src/app/dataset-view/dataset-view.component.sass
index bfaa4700e..e4898c714 100644
--- a/src/app/dataset-view/dataset-view.component.sass
+++ b/src/app/dataset-view/dataset-view.component.sass
@@ -6,10 +6,12 @@
 
 .mat-button-toggle-group
   width: fit-content
-  & .mat-button-toggle-standalone.mat-button-toggle-appearance-standard, .mat-button-toggle-group-appearance-standard
+  .mat-button-toggle-standalone.mat-button-toggle-appearance-standard, .mat-button-toggle-group-appearance-standard
     border-radius: 0 !important
+
 #dataset-view-history
   overflow: visible
+
 .datatab-expanding-row
   background: #fff
   border-top: 1px solid rgba(0,0,0,.12)
@@ -27,34 +29,35 @@
     &-content
       flex-grow: 1
       max-width: calc(100% - 24px)
-    & .datatab-activity-row-summary
+    .datatab-activity-row-summary
       display: flex
-    & .datatab-activity-timestamp
+    .datatab-activity-timestamp
       color: rgba(0,0,0,.66)
       flex-shrink: 0
       text-align: right
       width: 62px
       margin-right: 10px
-    & .datatab-activity-icon
+    .datatab-activity-icon
       &-size
         font-size: 15px
         height: 15px
         width: 15px
-    & .datatab-activity-info-container
+    .datatab-activity-info-container
       display: flex
       flex-grow: 1
       flex-wrap: wrap
       padding-left: 10px
       max-width: calc(100% - 86px)
-    & .datatab-activity-title
+    .datatab-activity-title
       flex: 1 0 30%
+
 .sql-query-editor-header
-  & h2
+  h2
     width: max-content
     display: inline-block
-  & .btnGroup-parent
+  .btn-group-parent
     float: right
-    & .btnGroup-item span
+    .btn-group-item span
       font-size: 17px
       font-weight: 600
 
@@ -62,6 +65,7 @@
   color: $app-success
   width: min-content
   padding: 5px
+
 mat-button-toggle-group
   box-shadow: none
   border-bottom: 1px solid
@@ -73,16 +77,16 @@ mat-button-toggle
   padding: 0 5px !important
   z-index: 3 !important
   outline: none !important
-
   &:hover
     box-shadow: none !important
     border-bottom: 1px solid !important
     border-radius: 0 !important
     &.mat-button-toggle-checked
       border-bottom: 2px #000 solid !important
-      &:ng-deep mat-button-toggle .mat-button-toggle-focus-overlay
-        background-color: transparent !important
-        opacity: 0 !important
+      &:ng-deep mat-button-toggle
+        .mat-button-toggle-focus-overlay
+          background-color: transparent !important
+          opacity: 0 !important
 
 .mat-button-toggle-checked
   border-left: none
@@ -101,3 +105,7 @@ mat-button-toggle
   left: -14px
   top: 9px
   font-size: 18px
+
+[data-test-id="searchAdditionalButtons"]
+  height: inherit
+  border-radius: inherit
diff --git a/src/app/search/search.component.sass b/src/app/search/search.component.sass
index 01db5c5cf..d87880582 100644
--- a/src/app/search/search.component.sass
+++ b/src/app/search/search.component.sass
@@ -1,13 +1,20 @@
 @import src/assets/styles/var
-::ng-deep .mat-checkbox-checked
-  & .mat-checkbox-background
-    background-color: $app-navyBlue
-::ng-deep.mat-checkbox-disabled
-  color: $app-disabled
-nav.navbar.navbar-expand
-  & *
-    font-size: 16px
-    line-height: 27px
-  & .search-result-container__navbar__title
-    line-height: 32px
-    font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif
\ No newline at end of file
+
+::ng-deep
+  .mat-checkbox-checked
+    .mat-checkbox-background
+      background-color: $app-navyBlue
+
+::ng-deep
+  &.mat-checkbox-disabled
+    color: $app-disabled
+
+nav
+  &.navbar
+    &.navbar-expand
+      *
+        font-size: 16px
+        line-height: 27px
+      .search-result-container__navbar__title
+        line-height: 32px
+        font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif
diff --git a/src/assets/styles/var.sass b/src/assets/styles/var.sass
index bb5d37fe9..34c0edb6a 100644
--- a/src/assets/styles/var.sass
+++ b/src/assets/styles/var.sass
@@ -49,90 +49,121 @@ $app-color-action-list-item-inline-divider: #d0d7de7a
 
 .input-group-button
   vertical-align: middle
+
 .color-border-muted
   border-color: $app-color-border-muted !important
+
 .color-bg-default
   background-color: $app-color-canvas-overlay !important
+
 .color-bg-subtle
   background-color: $app-color-canvas-subtle !important
+
 .color-fg-success
   color: $app-harmonies
+
 .color-fg-default
   color: $app-color-fg-default
+
 .color-fg-muted
   color: $app-color-fg-muted
+
 .link--primary
   color: $app-color-fg-default !important
   &:hover
     color: $app-navyBlue !important
+
 .link--secondary
   color: $secondary !important
   &:hover
     color: $app-navyBlue !important
-.box-title
-  font-size: 20px
-  line-height: 20px
-  font-weight: 600
-  margin: 0
-.box-header
-  width: 100%
-  padding: 16px
-  margin: 0px
-  background-color: $app-aliceBlue
-  border-color: $app-color-border-default
-  border-style: solid
-  border-width: 1px
-  border-top-left-radius: 6px
-  border-top-right-radius: 6px
+
+.box
+  &-title
+    font-size: 20px
+    line-height: 20px
+    font-weight: 600
+    margin: 0
+  &-header
+    width: 100%
+    padding: 16px
+    margin: 0px
+    background-color: $app-aliceBlue
+    border-color: $app-color-border-default
+    border-style: solid
+    border-width: 1px
+    border-top-left-radius: 6px
+    border-top-right-radius: 6px
+
 .min-width-0
   min-width: 0 !important
+
 .d-none
   display: none
+
 .position-relative
   position: relative !important
+
 .width-full
   width: 100% !important
+
 .flex-auto
   flex: auto !important
+
 .flex-order-2
   order: 2 !important
+
 .flex-self-stretch
   align-self: stretch !important
+
 .f6
   font-size: 12px !important
+
 .color-text-tertiary
   color: $app-cloudy
+
 .color-bg-tertiary
   background-color: $app-aliceBlue
+
 .rounded-1
   border-radius: 4px !important
+
 .border-white-fade
   border-color: $app-versatileBusinessDark
+
 .rounded-2
   border-radius: 6px !important
+
 .rounded-top-1
   border-top-left-radius: 6px !important
   border-top-right-radius: 6px !important
+
 .rounded-left-2
   border-bottom-left-radius: 6px !important
   border-top-left-radius: 6px !important
+
 .border-right-0
   border-right: 0 !important
+
 .border-right-1
   border-right: 1px !important
+
 .border-left-0
   border-left: 0 !important
+
 .border-left-1
   border-left: 1px !important
+
 .rounded-right-2
   border-bottom-right-radius: 6px !important
   border-top-right-radius: 6px !important
-.btnGroup-parent
+
+.btn-group-parent
   float: left
   height: 28px
   width: max-content
   background: none
-  & .btnGroup-item
+  .btn-group-item
     border-right-width: 1px
     border-radius: 1px
     position: relative
@@ -140,6 +171,9 @@ $app-color-action-list-item-inline-divider: #d0d7de7a
     border-color: $app-color-border-default
     height: inherit
     background: $app-aliceBlue
+    &:first-child
+      &:active
+        border-color: $app-color-border-default
     &:last-child
       border-right-width: 1px
       border-top-right-radius: 6px
@@ -148,73 +182,100 @@ $app-color-action-list-item-inline-divider: #d0d7de7a
       font-size: 12px
     &:hover
       border-color: $app-color-border-default
-.BtnGroup-item:first-child
-  border-top-left-radius: 6px
-  border-bottom-left-radius: 6px
-.btn.btn-gray
-  background-color: $app-background-btn
-  border-color: $app-color-btn-border !important
-  &:hover
-    background-color: $app-color-btn-hover-border
+
+.btns-group-item
+  &:first-child
+    border-top-left-radius: 6px
+    border-bottom-left-radius: 6px
+  &:last-child
+    border-top-left-radius: 0
+    border-top-left-radius: 0
+
+.btn
+  &.btn-gray
+    background-color: $app-background-btn
+    border-color: $app-color-btn-border !important
+    &:hover
+      background-color: $app-color-btn-hover-border
+
 .clipboard-btn
   height: 100%
   &.clipboard-btn--success
     border-color: $app-harmonies !important
+
 .mr-0
   margin-right: 0 !important
+
 .mr-1
   margin-right: 6px !important
+
 .mr-2
   margin-right: 8px !important
+
 .mr-3
   margin-right: 10px !important
+
 .mr-4
   margin-right: 20px !important
+
 .ml-3
   margin-left: 16px !important
+
 .mb-n1
   margin-bottom: -4px !important
+
 .ml-n1
   margin-left: -4px !important
+
 .mr-n1
   margin-right: -4px !important
+
 .mt-n1
   margin-top: -4px !important
-.css-truncate.css-truncate-overflow, .css-truncate .css-truncate-overflow, .css-truncate.css-truncate-target, .css-truncate .css-truncate-target
-  overflow: hidden
-  text-overflow: ellipsis
-  white-space: nowrap
-.hx_avatar_stack_commit .avatarStack
-  height: 24px
-  min-width: 24px
-.avatarStack__body
-  display: flex
-  & .avatar
-    position: relative
-    z-index: 2
+
+.css-truncate
+  &.css-truncate-overflow,&.css-truncate-target
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+  .css-truncate-overflow,.css-truncate-target
+    overflow: hidden
+    text-overflow: ellipsis
+    white-space: nowrap
+
+.hx_avatar_stack_commit
+  .avatar-stack
+    height: 24px
+    min-width: 24px
+
+.avatar-stack
+  position: relative
+  min-width: 26px
+  height: 20px
+  &__body
+    position: absolute
     display: flex
-    width: 20px
-    height: 20px
-    box-sizing: content-box
-    margin-right: -11px
-    background-color: $app-color-canvas-overlay
-    border-right: 1px solid $app-color-canvas-overlay
-    border-radius: 4px
-    box-shadow: none
-    transition: margin .1s ease-in-out
-    & img
+    .avatar
+      position: relative
+      z-index: 2
+      display: flex
+      width: 20px
+      height: 20px
+      box-sizing: content-box
+      margin-right: -11px
+      background-color: $app-color-canvas-overlay
+      border-right: 1px solid $app-color-canvas-overlay
+      border-radius: 4px
+      box-shadow: none
+      transition: margin .1s ease-in-out
+    img
       border-radius: 4px
     &:first-child
       z-index: 3
     &:last-child
       z-index: 1
       border-right: 0
-.avatarStack
-  position: relative
-  min-width: 26px
-  height: 20px
-  & .avatarStack__body
-    position: absolute
+
 .avatar
   display: inline-block
   overflow: hidden
@@ -224,8 +285,9 @@ $app-color-action-list-item-inline-divider: #d0d7de7a
   border-radius: 6px
   flex-shrink: 0
   box-shadow: 0 0 0 1px $app-color-btn-hover-border
-.avatar-user
-  border-radius: 50% !important
+  &-user
+    border-radius: 50% !important
+
 .counter
   display: inline-block
   min-width: 20px
@@ -239,34 +301,35 @@ $app-color-action-list-item-inline-divider: #d0d7de7a
   border: 1px solid $app-color-counter-border
   border-radius: 2em
 
-.btn .Counter
-  margin-left: 2px
-  color: inherit
-  text-shadow: none
-  vertical-align: top
-  background-color: $app-color-btn-counter-bg
-.btn:hover, .btn.hover, [open]>.btn
+.btn
+  .counter
+    margin-left: 2px
+    color: inherit
+    text-shadow: none
+    vertical-align: top
+    background-color: $app-color-btn-counter-bg
+
+.hover-effect
   background-color: $app-color-btn-hover-bg
   border-color: $app-color-btn-hover-border
   transition-duration: .1s
-.SelectMenu-modal
-  position: relative
-  z-index: 99
-  display: flex
-  max-height: 66%
-  margin: auto 0
-  overflow: hidden
-  pointer-events: auto
-  flex-direction: column
-  background-color: $app-color-canvas-overlay
-  border: 1px solid $app-color-select-menu-backdrop-border
-  border-radius: 12px
-  animation: SelectMenu-modal-animation .12s cubic-bezier(0, 0.1, 0.1, 1) backwards
+
+.btn
+  &:hover,&.hover
+    @extend .hover-effect
+
+[open]
+  & > .btn
+    @extend .hover-effect
+
 .cdk-overlay-pane
   box-shadow: $app-color-shadow-large
-.mat-menu-content:not(:empty)
-  padding-top: 0px !important
-  padding-bottom: 0px !important
+
+.mat-menu-content
+  &:not(:empty)
+    padding-top: 0px !important
+    padding-bottom: 0px !important
+
 .label
   display: inline-block
   padding: 0 7px
@@ -276,28 +339,46 @@ $app-color-action-list-item-inline-divider: #d0d7de7a
   border: 1px solid transparent
   border-radius: 2em
   border-color: $app-color-border-default
-.label--secondary
-  color: $app-color-fg-muted
-  border-color: $app-color-border-default
-.SelectMenu-header
+  &--secondary
+    color: $app-color-fg-muted
+    border-color: $app-color-border-default
+
+.select-menu-modal
+  position: relative
+  z-index: 99
+  display: flex
+  max-height: 66%
+  margin: auto 0
+  overflow: hidden
+  pointer-events: auto
+  flex-direction: column
+  background-color: $app-color-canvas-overlay
+  border: 1px solid $app-color-select-menu-backdrop-border
+  border-radius: 12px
+  animation: select-menu-modal-animation .12s cubic-bezier(0, 0.1, 0.1, 1) backwards
+
+.select-menu-header
   display: flex
   padding: 16px
   flex: none
   align-items: center
   border-bottom: 1px solid $app-color-border-muted
-.SelectMenu-title
+
+.select-menu-title
   flex: 1
   font-size: 14px
   font-weight: 600
   margin: 0
-.SelectMenu-closeButton
+
+.select-menu-close-btn
   padding: 16px
   margin: -16px
   line-height: 1
   color: $app-color-fg-muted
   background-color: transparent
   border: 0
-.SelectMenu-list
+
+.select-menu-list
   position: relative
   padding: 0
   margin: 0
@@ -307,7 +388,8 @@ $app-color-action-list-item-inline-divider: #d0d7de7a
   overflow-y: auto
   background-color: $app-color-canvas-overlay
   -webkit-overflow-scrolling: touch
-.SelectMenu-item
+
+.select-menu-item
   display: flex
   align-items: center
   width: 100%
@@ -319,7 +401,8 @@ $app-color-action-list-item-inline-divider: #d0d7de7a
   background-color: $app-color-canvas-overlay
   border: 0
   border-bottom: 1px solid $app-color-border-muted
-.SelectMenu-icon
+
+.select-menu-icon
   width: 16px
   margin-right: 8px
   flex-shrink: 0
@@ -328,25 +411,21 @@ $app-color-action-list-item-inline-divider: #d0d7de7a
     transition: transform .12s cubic-bezier(0.5, 0.1, 1, 0.5),visibility 0s .12s linear
     transform: scale(0)
 
-.SelectMenu-item[aria-checked="true"] .SelectMenu-icon--check
-  visibility: visible
-  transition: transform .12s cubic-bezier(0, 0, 0.2, 1),visibility 0s linear
-  transform: scale(1)
-
-::ng-deep .mat-tab-header
-  padding-top: 0 !important
-  padding-bottom: 0 !important
-  padding-right: 16px
-  padding-left: 16px
-  border-bottom: 1px solid $app-color-border-muted
+.select-menu-item[aria-checked="true"]
+  .select-menu-icon--check
+    visibility: visible
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1),visibility 0s linear
+    transform: scale(1)
 
-@keyframes SelectMenu-modal-animation
+@keyframes select-menu-modal-animation
   0%
     opacity: 0
     transform: translateY(-16px)
+
 @media (max-width: 480px)
   *
     font-size: 15px
+
 @media (max-width: 768px)
   .border-sm-top
     border-top: 1px solid #dee2e6 !important
@@ -381,33 +460,34 @@ $app-color-action-list-item-inline-divider: #d0d7de7a
   margin-bottom: 16px
   border: 1px solid $app-color-border-default
   border-radius: 6px
-  & .file-header
+  .file-header
     padding: 5px 10px
     background-color: $app-aliceBlue
     border-bottom: 1px solid $app-color-border-default
     border-top-left-radius: 6px
     border-top-right-radius: 6px
-  & .file-info
+  .file-info
     font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace
     font-size: 12px
     line-height: 32px
-  & .file-content
+  .file-content
     padding: 40px 25px
-  & .variable-textarea
+  .variable-textarea
     width: 100%
     min-height: 300px
     height: max-content
     border: none
     outline: none
+
 markdown
-  & *
+  *
     font: revert !important
-  & h1 a
+  h1 a
     text-decoration: none
-  & h1 a:hover
+  h1 a:hover
     opacity: 0.87
     text-decoration: underline
-  & blockquote
+  blockquote
     border-left: 3px solid rgba(0,0,0,0.21)
     padding-left: 12px
     color: rgba(0,0,0,0.54)
@@ -416,11 +496,12 @@ markdown
 .app-mat-chip
   & ::ng-deep .mat-standard-chip
     cursor: pointer
-::ng-deep .mat-standard-chip
-  cursor: pointer
+
 .mat-standard-chip
   min-height: 25px
+  border-radius: 16px
   padding: 10px
+
 .mat-chip
   color: $app-navyBlue
   background: $app-aliceBlue
@@ -443,7 +524,7 @@ markdown
     background-color: $app-aliceBlue
   &--condensed
     line-height: 1.25
-    & .box__row
+    .box__row
       padding: 8px 16px
   &__row
     padding: 16px
@@ -467,7 +548,7 @@ markdown
   &__body
     display: flex
     background: $app-color-canvas-overlay
-    & .avatar
+    .avatar
       position: relative
       z-index: 2
       display: flex
@@ -487,34 +568,38 @@ markdown
         z-index: 3
       &:not(:hover)
         background-color: transparent
-  & .avatar-stack__body
+  .avatar-stack__body
     position: absolute
 ///////
 
 .signer-block-info
   z-index: 999
   grid-template-columns: 0.15fr 1fr
+
 .signed-commit-header
   line-height: 1.3
   white-space: normal
   grid-template-columns: 0.15fr 1fr
   border-top-left-radius: 6px
   border-top-right-radius: 6px
-  & *
+  *
     font-size: 15px
+
 .signed-commit-signer-name
   font-size: 14px
   text-align: left
-  & .signer
+  .signer
     display: block
     font-weight: 600
     font-size: 14px
+
 .signed-commit-footer
   &__id
     color: $app-nero
-  & span, a
+  span, a
     font-size: 12px
     line-height: 1.5
+
 .signed-commit-badge
   user-select: none
   background: none
@@ -525,14 +610,17 @@ markdown
   &:hover
     border-color: $app-harmonies
     text-decoration: none
+
 .verified-commit
   display: inline-block
   overflow: visible !important
   vertical-align: text-bottom
   fill: currentColor
+
 .signed-commit-verified-label
   color: $app-success
   white-space: nowrap
+
 .signed-commit-badge-small
   display: inline-block
   padding: 0 7px
@@ -541,16 +629,17 @@ markdown
   line-height: 18px
   border: 1px solid $verylightgrey
   border-radius: 2em
-.signed-commit__popup-header .mat-typography h3
-  margin: 0 !important
-::ng-deep ngb-popover-window.bs-popover-left>.arrow
-  display: none
 
-::ng-deep ngb-popover-window .popover-header
-  margin: 0
+.signed-commit__popup-header
+  .mat-typography
+    h3
+      margin: 0 !important
 
-.mat-standard-chip
-  border-radius: 16px
+  ::ng-deep ngb-popover-window.bs-popover-left>.arrow
+    display: none
+
+  ::ng-deep ngb-popover-window .popover-header
+    margin: 0
 
 .overflow-visible
   overflow: visible !important
diff --git a/src/assets/svg/notifications-checked.svg b/src/assets/svg/notifications-checked.svg
index 90cc363b0..8f3173835 100644
--- a/src/assets/svg/notifications-checked.svg
+++ b/src/assets/svg/notifications-checked.svg
@@ -4,7 +4,7 @@
   version="1.1"
   width="16"
   data-view-component="true"
-  class="octicon octicon-check SelectMenu-icon SelectMenu-icon--check"
+  class="octicon octicon-check select-menu-icon select-menu-icon--check"
 >
                                                     <path
     fill-rule="evenodd"
diff --git a/src/styles.sass b/src/styles.sass
index 4863e0e18..e6e6addd4 100644
--- a/src/styles.sass
+++ b/src/styles.sass
@@ -19,12 +19,16 @@ app-add-polling-source
 body
   font-size: 14px
   overflow-x: hidden
+
 *
   font-size: 14px
+
 .h3-custom
   font-size: 20px !important
+
 .lh-condensed
   line-height: 1.25 !important
+
 a
   text-decoration: none
   &:hover
@@ -32,14 +36,19 @@ a
     cursor: pointer
   &:active, &:hover
     outline-width: 0
+
 .sr-only
   display: none
+
 .color-text-secondary
   color: $secondary
+
 .text-small
   font-size: 12px
+
 .mat-divider
   color: $app-lightGrayishBlue
+
 .card--title
   position: relative
   padding-top: 11px
@@ -48,12 +57,15 @@ a
   border-radius: 4px 4px 0px 0px
   border-bottom: 1px solid $app-veryLightGray
   align-items: center
+
 .card--row
   padding: 11px
+
 .table-header-background
   background-color: $app--color-table-header-bg
+
 #dataset-viewer
-  & .dataset-info
+  .dataset-info
     display: grid
     &--subtitle
       box-sizing: border-box
@@ -100,10 +112,13 @@ a
       width: 40%
       padding-top: 8px
       line-height: 1
-.datasetViewTypeToggleGroup
-  & .mat-button-toggle-disabled .mat-button-toggle-button
-    cursor: not-allowed
-    color: rgb(0 0 0 / 51%)
+
+.dataset-view-type-toggle-group
+  .mat-button-toggle-disabled
+    .mat-button-toggle-button
+      cursor: not-allowed
+      color: rgb(0 0 0 / 51%)
+
 .app-active-button
   background: $app-darkSeaGreen
   border-radius: 4px
@@ -117,39 +132,49 @@ a
   &:hover, &:focus, &:active
     text-decoration: none
     color: $app-emperor
+
 .app-header
   height: 90px
-  & a
+  a
     margin: 0 20px
-  & p
+  p
     color: $app-white
     font-style: normal
     font-weight: normal
     font-size: 18px
-  & .navbar
+  .navbar
     padding: 0
+
 [data-test-id="appLogo"]
-  background: none
-  border: none
-.mat-progress-spinner circle
-  stroke: $app-darkSeaGreen !important
+    background: none
+    border: none
 
-.mat-menu-panel.app-header__user-menu
-  background-color: white
-  border: 1px solid $app-lightGrayishBlue
-  & .mat-menu-item
+.mat-progress-spinner
+  circle
+    stroke: $app-darkSeaGreen !important
+
+.mat-menu-panel
+  &.app-header__user-menu
     background-color: white
-#appHeaderLogo img
-  height: 32px
-  width: 32px
-.Header-item
+    border: 1px solid $app-lightGrayishBlue
+    .mat-menu-item
+      background-color: white
+
+#appHeaderLogo
+  img
+    height: 32px
+    width: 32px
+
+.header-item
   display: flex
   margin-right: 16px
   align-self: stretch
   align-items: center
   flex-wrap: nowrap
-.Header-link
+
+.header-link
   text-decoration: none
+
 #app-header
   z-index: 32
   display: flex
@@ -158,15 +183,14 @@ a
   line-height: 1.5
   align-items: center
   justify-content: space-between
-  & .Details:not(.Details--on) .Details-content--hidden-not-important
-    display: none
-  & .Header-item--full
+  .details:not(.details--on)
+    .details-content--hidden-not-important
+      display: none
+  .header-item--full
     flex: auto
-  & a, button
+  a, button
     flex: none
-  //& .form-control
-  //  width: 300px
-  & .input-control
+  .input-control
     position: relative
     flex: 1 1 auto
     width: 1%
@@ -179,108 +203,124 @@ a
     font-weight: 400
     line-height: 1.5
     border: 1px solid #ced4da
-    //transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
+
 .jump-to-badge-jump
   display: none
-.active-search-input input
-  color: $app-white
+
+.active-search-input
+  input
+    color: $app-white
+
 .octicon
   display: inline-block
   overflow: visible !important
   vertical-align: text-bottom
   fill: currentColor
-.Header-signout-btn
+
+.header-signout-btn
   background: none
   border: none
   text-align: left
   padding: initial
-#navbarNavDropdown .navbar-nav
-  width: 100%
-  & .nav-item
-    width: 100%
-    transition: all .5s linear
-    line-height: 150px
-  & .active-search-input
-    width: 100%
-  & ngb-typeahead-window
+
+#navbarNavDropdown
+  .navbar-nav
     width: 100%
-    line-height: 1
-    & ngb-highlight
-      color: $app-nero
-    & .dropdown-item
-      display: flex
-      justify-content: space-between
-      height: 30px
-      padding-left: 10px
-      padding-right: 10px
-      margin: 5px 0
-      & *
-        color: $app-nero
-      & button
-        color: $app-nero
-      &.active
-        & *
-          color: $app-white
-        & .jump-to-badge-jump
-          justify-content: center
-          align-items: center
-          display: flex
+    .nav-item
+      width: 100%
+      transition: all .5s linear
+      line-height: 150px
+      .active-search-input
+        width: 100%
+      ngb-typeahead-window
+        width: 100%
+        line-height: 1
+        ngb-highlight
           color: $app-nero
-          & *
+        .dropdown-item
+          display: flex
+          justify-content: space-between
+          height: 30px
+          padding-left: 10px
+          padding-right: 10px
+          margin: 5px 0
+          *
             color: $app-nero
+          button
+            color: $app-nero
+          &.active
+            *
+              color: $app-white
+            .jump-to-badge-jump
+              justify-content: center
+              align-items: center
+              display: flex
+              color: $app-nero
+              *
+                color: $app-nero
+
 .app-brand
   grid-area: appBrandArea
   > img
     width: 77px
     height: 55px
+
 a:visited
   color: inherit
+
 .mat-app-background, .mat-drawer-container
   background-color: $app-aliceBlue
+
 #app-header
   background-color: $app-dark
-  & *
+  *
     color: $app-primary
-  & .navbar-nav
+  .navbar-nav
     margin: auto
 
-.Details:not(.Details--on) .Details-content--hidden-not-important
-  display: none
+.details:not(.details--on)
+  .details-content--hidden-not-important
+    display: none
+
 .header-search
   max-width: 100%
   transition: all .5s linear
-.header-search:focus-within
-  max-width: 100%
-  width: 100%
+
+.header-search
+  &:focus-within
+    max-width: 100%
+    width: 100%
+
 .notification-indicator-container
   width: 1.5em
+
 .app-main-container
   height: 100%
   width: 100%
-
-  & .navbar
+  .navbar
     padding: 20px
 
 .mat-drawer-inner-container
-  & .navbar-nav
+  .navbar-nav
     width: 100%
     padding: 16px
-    & .nav-item
+    .nav-item
       width: 100%
       margin-bottom: 8px
       border-radius: 4px
       padding: 12px 16px
       box-sizing: border-box
       color: $app-emperor
-    & .nav-link:hover, .nav-link:focus
-      background: $app-darkSeaGreen
-      color: $app-white
-
-  & .mat-drawer.mat-drawer-side
+    .nav-link
+      &:hover, &:focus
+        background: $app-darkSeaGreen
+        color: $app-white
+  .mat-drawer.mat-drawer-side
     width: 208px
-  & .mat-drawer-container
+  .mat-drawer-container
     background: inherit
     overflow: auto
+
 .app-content
   display: grid
   margin: 33px auto
@@ -292,17 +332,22 @@ a:visited
   &--header
     grid-template-columns: 1fr 1fr
     display: grid
+
 #dataset-view
-  a:visited
-    color: inherit
+  a
+    &:visited
+      color: inherit
+
 router-outlet
-    display: none
+  display: none
+
 .app-content__card-columns
   column-count: 1
   grid-column-gap: 1.25rem
   column-gap: 1.25rem
   orphans: 1
   widows: 1
+
 .app-header__right-column
   grid-area: appHeaderArea
   display: flex
@@ -311,24 +356,30 @@ router-outlet
   color: white
   > span
     margin-right: 5px
+
 .app-header__right-column__addnew-block
   margin-right: 5%
   display: flex
   justify-content: space-around
   background: none
   border: none
-  > span:first-child
-    margin-right: 10px
+  > span
+    &:first-child
+      margin-right: 10px
+
 .app-header__right-column__label
   display: block
-#appHeaderAdditionalBlock .button-round
-  width: 50px
-  height: 50px
-  min-width: 50px
-  border-radius: 35px
-  overflow: hidden
-  display: block
-  padding: 0
+
+#appHeaderAdditionalBlock
+  .button-round
+    width: 50px
+    height: 50px
+    min-width: 50px
+    border-radius: 35px
+    overflow: hidden
+    display: block
+    padding: 0
+
 #matmenu-signed-in-name
   white-space: nowrap
   overflow: hidden
@@ -344,10 +395,11 @@ router-outlet
   font-family: Roboto, "Helvetica Neue", sans-serif
   font-size: 14px
   font-weight: 400
-  & *
+  *
     font-family: Roboto, "Helvetica Neue", sans-serif
     font-size: 14px
     font-weight: 600
+
 .img-container-round
   width: 50px
   height: 50px
@@ -364,7 +416,7 @@ router-outlet
     top: 0
     left: 0
 
-.searchInputContainer
+.search-input-container
   height: 42.5px
 
 #searchInput
@@ -378,65 +430,72 @@ router-outlet
   font-weight: 400
   vertical-align: middle
   box-shadow: none
-  @extend .searchInputContainer
+  @extend .search-input-container
 
 #mobileMenuButton
   &.mobileSearch
     grid-area: appMobileMenu
     position: relative
-    & i
+    i
       color: $app-primary
       font-size: 30px
+
 .search-header-container-block
   margin-bottom: 20px
-#search .dataset-full-result-container
-  grid-template-columns: 1fr
-#search .dataset-result-container
-  grid-template-columns: 0.25fr 1fr
-#search .search-result-container
-  grid-template-columns: 0.25fr 1fr
-#search .search-result-container, #search .dataset-result-container
-  & ul
-    list-style-type: none
-  & .mat-checkbox-layout .mat-checkbox-label
-    font-size: 16px
+
+#search
+  .dataset-full-result-container
+    grid-template-columns: 1fr
+  .dataset-result-container, .search-result-container
+    grid-template-columns: 0.25fr 1fr
+    ul
+      list-style-type: none
+    .mat-checkbox-layout
+      .mat-checkbox-label
+        font-size: 16px
+
 #dataset-viewer
-  & .search-result-container
+  .search-result-container
     grid-template-columns: 0.25fr 1fr
-  & .dataset-result-container
+  .dataset-result-container
     grid-template-columns: 1fr 0.35fr
-  & .dataset-view-data-result-container
+  .dataset-view-data-result-container
     grid-template-columns: 0.4fr 1fr
-#schema-block-table *, #set-polling-source-schema *, #set-polling-source-env-variables *
-  padding: 0px 8px
-  font-size: 12px
-  height: 34px
+
+#schema-block-table , #set-polling-source-schema , #set-polling-source-env-variables
+  *
+    padding: 0px 8px
+    font-size: 12px
+    height: 34px
+
 #search, #dataset-viewer
-  & .nav-link
+  .nav-link
     cursor: pointer
-  & .nav-tabs
+  .nav-tabs
     margin-bottom: 14px
     border-bottom: none
-  & .search-result-container, .dataset-result-container, .dataset-view-data-result-container
+  .search-result-container, .dataset-result-container, .dataset-view-data-result-container
     display: grid
     align-items: start
     grid-gap: 25px
-  & table
+  table
     width: 100%
-  & .search-header-container-block
+  .search-header-container-block
     width: 100%
     display: grid
     align-items: center
     justify-content: space-between
     grid-template-columns: 1fr 0.25fr
     grid-gap: 25px
-    > ul:first-child
-      align-items: center
-      margin-bottom: 9px
-    > ul:last-child
-      justify-content: flex-end
-    & .nav-tabs
-      & .nav-link
+    > ul
+      &:first-child
+        align-items: center
+        margin-bottom: 9px
+    > ul
+      &:last-child
+        justify-content: flex-end
+    .nav-tabs
+      .nav-link
         border: none
         background-color: transparent
         padding: 0.5rem 0.3rem 0 0.3rem
@@ -444,11 +503,12 @@ router-outlet
           text-decoration: underline
         &.active
           font-weight: bold
-    & .nav-link
+    .nav-link
       padding: 0.5rem 0.3rem
       color: $app-emperor
       &:hover, &:focus, &:active
         text-decoration: underline
+
 .search-result-container__content, .container-content
   overflow: auto
   padding: 20px 28px
@@ -459,31 +519,39 @@ router-outlet
   border-radius: 8px
   & [data-test-id="searchInput"]
     height: 50px
-.datasetViewTypeToggleGroup
+
+.dataset-view-type-toggle-group
   width: 100%
   overflow: auto
   margin-bottom: 20px
+
 #dataset-viewer, #search
   overflow: hidden
-.starred .starred-button-icon
-  color: $app-naples-yellow !important
-.searchAdditionalButtonsMinimizeBlock .searchAdditionalButtons__nav
-  flex-direction: column
-  background: $app-white
-  & .btnGroup-item
-    width: 100%
-  & .btnGroup-parent
-    width: 100%
-  & .nav-item
-    width: 100%
-    margin: 0 !important
-    padding: 0 !important
+
+.starred
+  .starred-button-icon
+    color: $app-naples-yellow !important
+
+.search-additional-buttons-minimize-block
+  .search-additional-buttons__nav
+    flex-direction: column
+    background: $app-white
+    .btn-group-item
+      width: 100%
+    .btn-group-parent
+      width: 100%
+    .nav-item
+      width: 100%
+      margin: 0 !important
+      padding: 0 !important
+
 #metadata-block
   & .page-item:last-child .page-link, .page-item:first-child .page-link
     padding: 1px
   & #pagination-block
     display: flex
     justify-content: flex-end
+
 /*********** Search Page ******/
 .input-icon
   background: none
@@ -498,63 +566,71 @@ router-outlet
   height: 100%
   > i
     font-size: 18px
-[data-test-id="searchInput"]
-  padding-left: 35px
+
+#typeahead-http
   &::placeholder
     color: $app-white
 
-#searchInput.searchSidenav .input-group > [data-test-id="searchInput"].form-control
-  background: $app-white
-  color: $app-emperor
-  box-shadow: 0px 5px 4px $app-versatileBusinessDark
-  &::placeholder
+#searchInput
+  &.searchSidenav
+    .input-group
+      & > [data-test-id="searchInput"].form-control
+        background: $app-white
+        color: $app-emperor
+        box-shadow: 0px 5px 4px $app-versatileBusinessDark
+
+.input-group
+  & > [data-test-id="searchInput"].form-control
+    border-radius: 0.25rem
+    border-color: transparent
+    background: $app-emperor
     color: $app-white
-.input-group > [data-test-id="searchInput"].form-control
-  border-radius: 0.25rem
-  border-color: transparent
-  background: $app-emperor
-  color: $app-white
-  padding: 5px 12px
-.form-control:focus
-  box-shadow: 0 0 0 0.2rem #85bb906e
+    padding: 5px 12px
+
+.form-control
+  &:focus
+    box-shadow: 0 0 0 0.2rem #85bb906e
+
 .mat-header-cell
   font-size: 20px
 
 [data-test-id="searchInput"], [data-test-id="addNewBlock"],
 [data-test-id="openUserInfo"], [data-test-id="appLogo"]
   cursor: pointer
+
 .input-datasets-list
   justify-content: left
   display: flex
   align-items: baseline
   & > *:last-child
     margin-left: 16px
+
 .gist
   font-size: 16px
   color: #333
   text-align: left
   direction: ltr
   text-rendering: auto
-  & .gist-file
+  .gist-file
     margin-bottom: 1em
     font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace
     border: 1px solid #ddd
     border-bottom: 1px solid #ccc
     border-radius: 6px
-    & article
+    article
       padding: 6px
-  & .gist-data
+  .gist-data
     overflow: auto
     word-wrap: normal
     background-color: $app-color-canvas-overlay
     border-bottom: 1px solid #ddd
     border-radius: 6px 6px 0 0
-  & .markdown-body
+  .markdown-body
     font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"
     font-size: 16px
     line-height: 1.5
     word-wrap: break-word
-    & pre
+    pre
       padding: 16px
       overflow: auto
       font-size: 85%
@@ -562,25 +638,26 @@ router-outlet
       background-color: $app-color-canvas-subtle
       border-radius: 6px
 
-.searchAdditionalButtons__nav
+.search-additional-buttons__nav
   justify-content: end
   align-items: end
-.searchAdditionalButtonsMinimizeBlock
-  & ul
+
+.search-additional-buttons-minimize-block
+  ul
     background: $app-white
     border: 1px solid $app-veryLightGray
     box-sizing: border-box
     box-shadow: 0 5px 4px $app-versatileBusinessDark
     border-radius: 5px
-  & li
+  li
     border-radius: 0 !important
     border: none
     border-bottom: 1px solid #d0d7de !important
     &:last-child
       border-bottom: none !important
-    & .btnGroup-item
+    .btn-group-item
       border: none
-    & .additionalOptions-btn
+    .additional-options-btn
       border-top: none !important
       border-right: none !important
       border-bottom: none !important
@@ -588,11 +665,15 @@ router-outlet
 @media (max-width: 480px)
   .app-header__right-column__label
     display: none
+
   .app-header__right-column__addnew-block
     width: 18%
-  .app-brand > img
-    width: 60px
-    height: 50px
+
+  .app-brand
+    > img
+      width: 60px
+      height: 50px
+
   .app-active-button__container
     margin-top: 7px
 
@@ -602,38 +683,49 @@ router-outlet
     &--header
       grid-template-columns: 1fr 0.1fr
       display: grid
+
   #search, #dataset-viewer
-    & .search-result-container, .dataset-view-data-result-container
+    .search-result-container, .dataset-view-data-result-container
       grid-template-columns: 1fr
-    & .search-header-container-block
-      grid-template-columns: 1fr
-      > ul:last-child
+
+  .search-header-container-block
+    grid-template-columns: 1fr
+    > ul
+      &:last-child
         justify-content: flex-start
-  .searchAdditionalButtonsBlock
+
+  .search-additional-buttons-block
     display: flex
     justify-content: flex-end
     align-items: flex-end
+
 @media (max-width: 991px)
   #app-header
-    & #appHeaderMenuButton, #appHeaderLogo, #appHeaderAdditionalBlock
+    #appHeaderMenuButton, #appHeaderLogo, #appHeaderAdditionalBlock
       order: 0
-    & #navbarNavDropdown
+    #navbarNavDropdown
       order: 1
-    & .navbar-nav
+    .navbar-nav
       margin: 20px auto
+
   #dataset-viewer
-    & .dataset-result-container
+    .dataset-result-container
       grid-template-columns: 1fr
 
 @media (min-width: 768px)
   .header-search
     max-width: 272px
     width: 100%
-  .header-search:focus-within
-    max-width: 544px
-  #navbarNavDropdown .navbar-nav
-    & .active-search-input
-      width: 150%
+
+  .header-search
+    &:focus-within
+      max-width: 544px
+
+  #navbarNavDropdown
+    .navbar-nav
+      .active-search-input
+        width: 150%
+
 .avatar
   display: inline-block
   overflow: hidden
@@ -643,9 +735,11 @@ router-outlet
   border-radius: 6px
   flex-shrink: 0
   box-shadow: 0 0 0 1px #1b1f2426
+
 .avatar-2
   width: 20px
   height: 20px
+
 .avatar-user
   border-radius: 50% !important
 
@@ -655,7 +749,6 @@ router-outlet
   margin: 0 auto
   background: white
   box-sizing: border-box
-    //width: 70%
   max-width: 300px
   min-height: 80px
   border: 1px solid $app-nero
@@ -664,14 +757,18 @@ router-outlet
   opacity: 0
   transition: transform 1s linear
   animation: ani 1.5s forwards
+
 .modal__dialog__header-block
   width: 100%
   padding: 1.5em
+
 .modal__dialog__footer-block
   width: 100%
+
 .modal__content .modal__bigtest-dialog
   width: 90vw
   max-width: none
+
 @keyframes ani
   0%
     opacity: 0
@@ -679,51 +776,49 @@ router-outlet
   100%
     opacity: 1
     transform: translateY(0%)
+
 .modal__bigtext-block
   display: block
   width: 100%
   height: 60vh
   overflow-y: scroll
   margin-bottom: 26px
-.modal__bigtext-block__container
-  text-align: left
-  font-size: 14pt
-  font-family: "Helvetica Neue"
-  a
-    color: #0087ff
-    text-decoration: underline
-    vertical-align: baseline
-    text-decoration-skip-ink: none
-    font-style: normal
+  &__container
+    text-align: left
+    font-size: 14pt
+    font-family: "Helvetica Neue"
+    a
+      color: #0087ff
+      text-decoration: underline
+      vertical-align: baseline
+      text-decoration-skip-ink: none
+      font-style: normal
 
 .modal__header
   font-size: 1.25em
   margin-bottom: 1em
+  &-black
+    @extend .modal__header
+    color: black
+    font-size: 1.4em
+  &-error
+    @extend .modal__header
+    color: red
+  &-warning
+    @extend .modal__header
+    color: $warning
+  &-ok
+    @extend .modal__header
+    color: darkgreen
+  &-info
+    @extend .modal__header
+    color: #4494ff
 
-.modal__header-black
-  @extend .modal__header
-  color: black
-  font-size: 1.4em
-
-.modal__header-error
-  @extend .modal__header
-  color: red
-
-.modal__header-warning
-  @extend .modal__header
-  color: $warning
-
-.modal__header-ok
-  @extend .modal__header
-  color: darkgreen
-
-.modal__header-info
-  @extend .modal__header
-  color: #4494ff
 .link-green
   color: $green-100
   &__inline
     border-bottom: 1px $green-100 solid
+
 .cache-modal
   &__content
     flex-direction: column
@@ -763,6 +858,7 @@ router-outlet
       color: $app-nero
       font-size: 24px
       width: 100%
+
 .base_modal__content
   background: #0000007a
   flex-direction: column
@@ -778,10 +874,10 @@ router-outlet
   @extend .base_modal__content
   bottom: 0
   z-index: 2000
-.modal__content__unsupported-account
-  @extend .base_modal__content
-  bottom: 0
-  z-index: 1001
+  &__unsupported-account
+    @extend .base_modal__content
+    bottom: 0
+    z-index: 1001
 
 .modal__body
   @extend .text-center
@@ -801,23 +897,20 @@ router-outlet
   min-height: 13%
   position: relative
   background: url(./assets/icons/loadinfo.net.gif) no-repeat center
-  & img
+  img
     max-height: calc(100vh - 180px)
     max-width: 100%
     margin: 0 auto
-    //& .modal__btn
-    //    position: absolute
-    //    bottom: 0
-    //    left: calc(50%)
-    //    transform: translateX(-40px)
+
 .modal__dialog__unsupported-account
   @extend .modal__dialog
-  & a
+  a
     color: $blue
 
 .modal__msg
   margin: 1em 0
   word-break: break-word
+
 .button__default
   background-color: white
   @extend .button
@@ -828,17 +921,16 @@ router-outlet
   border-radius: 0px 0px 4px 4px
   min-width: 100%
   font-weight: bold
-
-.modal__btn-first
-  width: 100%
-  margin: 0
-
-.modal__btn-last
-  @extend .modal__btn-first
-  margin-top: 1em
+  &-first
+    width: 100%
+    margin: 0
+  &-last
+    @extend .modal__btn-first
+    margin-top: 1em
 
 .upload
   background-color: black
+
 #more-button
   background: $app-white
   border: 1px solid $app-veryLightGray
@@ -846,6 +938,7 @@ router-outlet
   box-shadow: 0 5px 4px $app-versatileBusinessDark
   border-radius: 8px
   color: $app-emperor
+
 .button
   height: 40px
   cursor: pointer
@@ -854,9 +947,9 @@ router-outlet
     outline: none
     &[disabled]
       opacity: 0.7
-    & img
+    img
       height: 100%
-    & .fa
+    .fa
       color: inherit
     &:active
       background: linear-gradient(to bottom, rgba(204,204,204,0.8) 100%, #eee 0%)
@@ -864,33 +957,44 @@ router-outlet
 .account-container
   grid-template-columns: 0.5fr 0.5fr
   display: grid !important
+
 app-account .dropdown-menu
   right: 0
+
 .account-additional-main-info__list
-  & .mail-outline .mat-icon
-    font-size: 20px
-    height: 20px
-    width: 20px
-.Layout.Layout--sidebarPosition-start .Layout-main
-  grid-column: 2/span 2
-.UnderlineNav
+  .mail-outline
+    .mat-icon
+      font-size: 20px
+      height: 20px
+      width: 20px
+
+.layout
+  &.layout--sidebar-position-start
+    .layout-main
+      grid-column: 2/span 2
+
+.underline-nav
   display: flex
   overflow-x: auto
   overflow-y: hidden
   justify-content: space-between
-  & .mat-icon
+  .mat-icon
     height: 20px
     width: 20px
     font-size: 20px
-[role="menu"] .UnderlineNav-item
-  display: flex
-  justify-content: flex-start
-  align-items: center
+
+[role="menu"]
+  .underline-nav-item
+    display: flex
+    justify-content: flex-start
+    align-items: center
+
 details summary::-webkit-details-marker,
 details summary::marker
-  display: none
-  content: ""
-.UnderlineNav-item
+    display: none
+    content: ""
+
+.underline-nav-item
   padding: 8px 16px
   font-size: 14px
   line-height: 30px
@@ -919,13 +1023,17 @@ details summary::marker
 /******** MIXINZ ********/
 %border-none
   border: 0px
+
 %border-gray
   border: 1px solid $verylightgrey
+
 %border-green
   border-radius: 5px
   border: 1px solid #CEE794
+
 %border-darkgreentea
   border: 1px solid $darkgreentea
+
 %button-gradient
   background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(237,237,237,1) 100%)
 
@@ -959,9 +1067,10 @@ details summary::marker
 .fs-12
   font-size: 12px
 
-.multiselect-dropdown .dropdown-btn
-  color: #6c757d !important
-  padding-left: 36px !important
+.multiselect-dropdown
+  .dropdown-btn
+    color: #6c757d !important
+    padding-left: 36px !important
 
 pre
   display: flex
@@ -973,7 +1082,7 @@ pre
     line: height 1.5em
       min-height: 100%
       padding: 1em 1.2em
-  & .hljs
+  .hljs
     font-size: 15px !important
     font-weight: 500 !important
     background-color: honeydew !important
@@ -1075,5 +1184,7 @@ pre
     &:enabled
       color: blue
 
-input.ng-invalid.ng-touched, input.ng-invalid.ng-dirty
-  border-color: #dc3545
+input
+  &.ng-invalid
+    &.ng-touched, &.ng-dirty
+      border-color: #dc3545