diff --git a/packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx b/packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx
index 50674b82aae..2a8f1015998 100644
--- a/packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx
+++ b/packages/next/src/views/Version/VersionPillLabel/VersionPillLabel.tsx
@@ -6,7 +6,7 @@ import { Pill, useConfig, useLocale, useTranslation } from '@payloadcms/ui'
 import { formatDate } from '@payloadcms/ui/shared'
 import React from 'react'
 
-import './index.scss'
+import './index.css'
 import { getVersionLabel } from './getVersionLabel.js'
 
 const baseClass = 'version-pill-label'
diff --git a/packages/next/src/views/Version/VersionPillLabel/index.css b/packages/next/src/views/Version/VersionPillLabel/index.css
new file mode 100644
index 00000000000..05bc5a38060
--- /dev/null
+++ b/packages/next/src/views/Version/VersionPillLabel/index.css
@@ -0,0 +1,23 @@
+@layer payload-default {
+  .version-pill-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
+  .version-pill-label-text {
+    font-weight: var(--text-body-large-strong-font-weight);
+  }
+
+  .version-pill-label-date {
+    color: var(--color-text-secondary);
+  }
+
+  @media (max-width: 768px) {
+    .version-pill-label {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0;
+    }
+  }
+}
diff --git a/packages/next/src/views/Version/VersionPillLabel/index.scss b/packages/next/src/views/Version/VersionPillLabel/index.scss
deleted file mode 100644
index fb6a15c6b39..00000000000
--- a/packages/next/src/views/Version/VersionPillLabel/index.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import '~@payloadcms/ui/scss';
-
-@layer payload-default {
-  .version-pill-label {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--base) / 2);
-
-    &-text {
-      font-weight: 500;
-    }
-
-    &-date {
-      color: var(--theme-elevation-500);
-    }
-  }
-
-  @include small-break {
-    .version-pill-label {
-      // Column
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0;
-    }
-  }
-}
diff --git a/packages/next/src/views/Versions/buildColumns.tsx b/packages/next/src/views/Versions/buildColumns.tsx
index 28eccead80a..f1ad407d4ce 100644
--- a/packages/next/src/views/Versions/buildColumns.tsx
+++ b/packages/next/src/views/Versions/buildColumns.tsx
@@ -65,18 +65,6 @@ export const buildVersionColumns = ({
         )
       }),
     },
-    {
-      accessor: 'id',
-      active: true,
-      field: {
-        name: '',
-        type: 'text',
-      },
-      Heading: <SortColumn disable Label={t('version:versionID')} name="id" />,
-      renderedCells: docs.map((doc, i) => {
-        return <IDCell id={doc.id} key={i} />
-      }),
-    },
   ]
 
   if (hasDraftsEnabled(entityConfig)) {
@@ -87,7 +75,7 @@ export const buildVersionColumns = ({
         name: '',
         type: 'checkbox',
       },
-      Heading: <SortColumn disable Label={t('version:status')} name="status" />,
+      Heading: <SortColumn Label={t('version:status')} name="status" />,
       renderedCells: docs.map((doc, i) => {
         return (
           <AutosaveCell
@@ -101,5 +89,18 @@ export const buildVersionColumns = ({
     })
   }
 
+  columns.push({
+    accessor: 'id',
+    active: true,
+    field: {
+      name: '',
+      type: 'text',
+    },
+    Heading: <SortColumn Label={t('version:versionID')} name="id" />,
+    renderedCells: docs.map((doc, i) => {
+      return <IDCell id={doc.id} key={i} />
+    }),
+  })
+
   return columns
 }
diff --git a/packages/next/src/views/Versions/cells/AutosaveCell/index.css b/packages/next/src/views/Versions/cells/AutosaveCell/index.css
new file mode 100644
index 00000000000..e89b62d636c
--- /dev/null
+++ b/packages/next/src/views/Versions/cells/AutosaveCell/index.css
@@ -0,0 +1,7 @@
+@layer payload-default {
+  .autosave-cell__items {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+}
diff --git a/packages/next/src/views/Versions/cells/AutosaveCell/index.scss b/packages/next/src/views/Versions/cells/AutosaveCell/index.scss
deleted file mode 100644
index b4d1d7099c5..00000000000
--- a/packages/next/src/views/Versions/cells/AutosaveCell/index.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@layer payload-default {
-  .autosave-cell {
-    &__items {
-      display: flex;
-      align-items: center;
-      gap: calc(var(--base) * 0.5);
-    }
-  }
-}
diff --git a/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx b/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx
index e9486595b20..217b5f82491 100644
--- a/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx
+++ b/packages/next/src/views/Versions/cells/AutosaveCell/index.tsx
@@ -5,7 +5,7 @@ import { Pill, useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
 import { VersionPillLabel } from '../../../Version/VersionPillLabel/VersionPillLabel.js'
-import './index.scss'
+import './index.css'
 
 const baseClass = 'autosave-cell'
 
diff --git a/packages/next/src/views/Versions/index.css b/packages/next/src/views/Versions/index.css
new file mode 100644
index 00000000000..072d0b22c2a
--- /dev/null
+++ b/packages/next/src/views/Versions/index.css
@@ -0,0 +1,116 @@
+@layer payload-default {
+  .versions {
+    width: 100%;
+    margin-bottom: var(--spacer-6);
+  }
+
+  .versions__wrap {
+    padding: 0 var(--spacer-3);
+  }
+
+  .versions__header {
+    margin-bottom: var(--spacer-3);
+  }
+
+  .versions__no-versions {
+    margin-top: var(--spacer-4);
+  }
+
+  .versions__parent-doc {
+    .banner__content {
+      display: flex;
+    }
+  }
+
+  .versions__parent-doc-pills {
+    [dir='ltr'] & {
+      margin-left: auto;
+    }
+
+    [dir='rtl'] & {
+      margin-right: auto;
+    }
+  }
+
+  .versions .table {
+    margin: 0;
+
+    table {
+      width: 100%;
+      overflow: auto;
+    }
+
+    th,
+    td {
+      padding: var(--spacer-3) var(--spacer-2-5);
+
+      &:first-child {
+        padding-inline-start: var(--spacer-2-5);
+      }
+    }
+
+    tbody tr {
+      border-top: var(--stroke-width-small) solid var(--color-border);
+
+      &:nth-child(odd) {
+        background: none;
+        border-radius: 0;
+      }
+    }
+  }
+
+  .versions__page-controls {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border-top: var(--stroke-width-small) solid var(--color-border);
+    padding: var(--spacer-2-5);
+    gap: var(--spacer-3);
+  }
+
+  .versions .paginator {
+    margin-bottom: 0;
+  }
+
+  .versions__page-info {
+    flex: 1 0 0;
+    text-align: end;
+    color: var(--color-text-primary);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    white-space: nowrap;
+  }
+
+  @media (max-width: 1024px) {
+    .versions__wrap {
+      padding-top: 0;
+      margin-top: 0;
+    }
+
+    .versions .table {
+      display: flex;
+      width: calc(100% + calc(var(--gutter-h) * 2));
+      max-width: unset;
+      left: calc(var(--gutter-h) * -1);
+      position: relative;
+      padding-left: var(--gutter-h);
+
+      &::after {
+        content: '';
+        height: 1px;
+        padding-right: var(--gutter-h);
+      }
+    }
+
+    .versions__page-controls {
+      flex-wrap: wrap;
+    }
+
+    .versions .paginator {
+      width: 100%;
+      margin-bottom: var(--spacer-3);
+    }
+  }
+}
diff --git a/packages/next/src/views/Versions/index.scss b/packages/next/src/views/Versions/index.scss
deleted file mode 100644
index 28ef41464e5..00000000000
--- a/packages/next/src/views/Versions/index.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-@import '~@payloadcms/ui/scss';
-
-@layer payload-default {
-  .versions {
-    width: 100%;
-    margin-bottom: calc(var(--base) * 2);
-
-    &__wrap {
-      padding-top: 0;
-      padding-bottom: var(--spacing-view-bottom);
-      margin-top: calc(var(--base) * 0.75);
-    }
-
-    &__header {
-      margin-bottom: var(--base);
-    }
-
-    &__no-versions {
-      margin-top: calc(var(--base) * 1.5);
-    }
-
-    &__parent-doc {
-      .banner__content {
-        display: flex;
-      }
-    }
-
-    &__parent-doc-pills {
-      [dir='ltr'] & {
-        margin-left: auto;
-      }
-
-      [dir='rtl'] & {
-        margin-right: auto;
-      }
-    }
-
-    .table {
-      table {
-        width: 100%;
-        overflow: auto;
-      }
-    }
-
-    &__page-controls {
-      width: 100%;
-      display: flex;
-      align-items: center;
-    }
-
-    .paginator {
-      margin-bottom: 0;
-    }
-
-    &__page-info {
-      [dir='ltr'] & {
-        margin-right: var(--base);
-        margin-left: auto;
-      }
-
-      [dir='rtl'] & {
-        margin-left: var(--base);
-        margin-right: auto;
-      }
-    }
-
-    @include mid-break {
-      &__wrap {
-        padding-top: 0;
-        margin-top: 0;
-      }
-
-      // on mobile, extend the table all the way to the viewport edges
-      // this is to visually indicate overflowing content
-      .table {
-        display: flex;
-        width: calc(100% + calc(var(--gutter-h) * 2));
-        max-width: unset;
-        left: calc(var(--gutter-h) * -1);
-        position: relative;
-        padding-left: var(--gutter-h);
-
-        &::after {
-          content: '';
-          height: 1px;
-          padding-right: var(--gutter-h);
-        }
-      }
-
-      &__page-controls {
-        flex-wrap: wrap;
-      }
-
-      &__page-info {
-        [dir='ltr'] & {
-          margin-left: 0;
-        }
-
-        [dir='rtl'] & {
-          margin-right: 0;
-        }
-      }
-
-      .paginator {
-        width: 100%;
-        margin-bottom: var(--base);
-      }
-    }
-  }
-}
diff --git a/packages/next/src/views/Versions/index.tsx b/packages/next/src/views/Versions/index.tsx
index 6457373129b..d43258da834 100644
--- a/packages/next/src/views/Versions/index.tsx
+++ b/packages/next/src/views/Versions/index.tsx
@@ -8,7 +8,7 @@ import { fetchLatestVersion, fetchVersions } from '../Version/fetchVersions.js'
 import { VersionDrawerCreatedAtCell } from '../Version/SelectComparison/VersionDrawer/CreatedAtCell.js'
 import { buildVersionColumns } from './buildColumns.js'
 import { VersionsViewClient } from './index.client.js'
-import './index.scss'
+import './index.css'
 
 const baseClass = 'versions'
 
@@ -176,7 +176,7 @@ export async function VersionsView(props: DocumentViewServerProps) {
         view={i18n.t('version:versions')}
       />
       <main className={baseClass}>
-        <GutterComponent className={`${baseClass}__wrap`}>
+        <div className={`${baseClass}__wrap`}>
           <ListQueryProvider
             data={versionsData}
             modifySearchParams
@@ -193,7 +193,7 @@ export async function VersionsView(props: DocumentViewServerProps) {
               paginationLimits={collectionConfig?.admin?.pagination?.limits}
             />
           </ListQueryProvider>
-        </GutterComponent>
+        </div>
       </main>
     </React.Fragment>
   )
diff --git a/packages/ui/src/elements/Loading/index.css b/packages/ui/src/elements/Loading/index.css
new file mode 100644
index 00000000000..aef02fb34c7
--- /dev/null
+++ b/packages/ui/src/elements/Loading/index.css
@@ -0,0 +1,136 @@
+@layer payload-default {
+  .loading-overlay {
+    isolation: isolate;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    pointer-events: none;
+    z-index: calc(var(--z-status) + 1);
+    transition-property: left, width;
+    transition: 250ms ease;
+  }
+
+  .loading-overlay--entering {
+    opacity: 1;
+    animation: fade-in ease;
+    pointer-events: all;
+  }
+
+  .loading-overlay--exiting {
+    opacity: 0;
+    animation: fade-out ease;
+  }
+
+  .loading-overlay::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-bg);
+    opacity: 0.85;
+    z-index: -1;
+  }
+
+  .loading-overlay__bars {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    gap: 7px;
+    align-items: center;
+  }
+
+  .loading-overlay__bar {
+    width: 2px;
+    background-color: currentColor;
+    height: 15px;
+
+    &:nth-child(1) {
+      transform: translateY(0);
+      animation: animate-bar--odd 1.25s infinite;
+    }
+
+    &:nth-child(2) {
+      transform: translateY(-2px);
+      animation: animate-bar--even 1.25s infinite;
+    }
+
+    &:nth-child(3) {
+      transform: translateY(0);
+      animation: animate-bar--odd 1.25s infinite;
+    }
+
+    &:nth-child(4) {
+      transform: translateY(-2px);
+      animation: animate-bar--even 1.25s infinite;
+    }
+
+    &:nth-child(5) {
+      transform: translateY(0);
+      animation: animate-bar--odd 1.25s infinite;
+    }
+  }
+
+  .loading-overlay__text {
+    margin-top: var(--spacer-3);
+    text-transform: uppercase;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    letter-spacing: 3px;
+  }
+
+  @keyframes animate-bar--even {
+    0% {
+      transform: translateY(2px);
+    }
+
+    50% {
+      transform: translateY(-2px);
+    }
+
+    100% {
+      transform: translateY(2px);
+    }
+  }
+
+  @keyframes animate-bar--odd {
+    0% {
+      transform: translateY(-2px);
+    }
+
+    50% {
+      transform: translateY(2px);
+    }
+
+    100% {
+      transform: translateY(-2px);
+    }
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+}
diff --git a/packages/ui/src/elements/Loading/index.scss b/packages/ui/src/elements/Loading/index.scss
deleted file mode 100644
index be90a3bdce0..00000000000
--- a/packages/ui/src/elements/Loading/index.scss
+++ /dev/null
@@ -1,138 +0,0 @@
-@import '../../scss/styles';
-
-@layer payload-default {
-  .loading-overlay {
-    isolation: isolate;
-    height: 100%;
-    width: 100%;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    position: fixed;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    pointer-events: none;
-    z-index: calc(var(--z-status) + 1);
-    transition-property: left, width;
-    transition: 250ms ease;
-
-    &.loading-overlay--entering {
-      opacity: 1;
-      animation: fade-in ease;
-      pointer-events: all;
-    }
-
-    &.loading-overlay--exiting {
-      opacity: 0;
-      animation: fade-out ease;
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: var(--theme-elevation-0);
-      opacity: 0.85;
-      z-index: -1;
-    }
-
-    &__bars {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-      gap: 7px;
-      align-items: center;
-    }
-
-    &__bar {
-      width: 2px;
-      background-color: currentColor;
-      height: 15px;
-
-      &:nth-child(1) {
-        transform: translateY(0);
-        animation: animate-bar--odd 1.25s infinite;
-      }
-
-      &:nth-child(2) {
-        transform: translateY(-2px);
-        animation: animate-bar--even 1.25s infinite;
-      }
-
-      &:nth-child(3) {
-        transform: translateY(0);
-        animation: animate-bar--odd 1.25s infinite;
-      }
-
-      &:nth-child(4) {
-        transform: translateY(-2px);
-        animation: animate-bar--even 1.25s infinite;
-      }
-
-      &:nth-child(5) {
-        transform: translateY(0);
-        animation: animate-bar--odd 1.25s infinite;
-      }
-    }
-
-    &__text {
-      margin-top: base(0.75);
-      text-transform: uppercase;
-      font-family: var(--font-body);
-      font-size: base(0.65);
-      letter-spacing: 3px;
-    }
-  }
-
-  @keyframes animate-bar--even {
-    0% {
-      transform: translateY(2px);
-    }
-
-    50% {
-      transform: translateY(-2px);
-    }
-
-    100% {
-      transform: translateY(2px);
-    }
-  }
-
-  @keyframes animate-bar--odd {
-    0% {
-      transform: translateY(-2px);
-    }
-
-    50% {
-      transform: translateY(2px);
-    }
-
-    100% {
-      transform: translateY(-2px);
-    }
-  }
-
-  @keyframes fade-in {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fade-out {
-    0% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 0;
-    }
-  }
-}
diff --git a/packages/ui/src/elements/Loading/index.tsx b/packages/ui/src/elements/Loading/index.tsx
index 5d2dcaeb5ca..464c81c50dd 100644
--- a/packages/ui/src/elements/Loading/index.tsx
+++ b/packages/ui/src/elements/Loading/index.tsx
@@ -7,7 +7,7 @@ import type { LoadingOverlayTypes } from '../../elements/LoadingOverlay/types.js
 import { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js'
 import { useFormProcessing } from '../../forms/Form/context.js'
 import { useTranslation } from '../../providers/Translation/index.js'
-import './index.scss'
+import './index.css'
 
 const baseClass = 'loading-overlay'
 
diff --git a/packages/ui/src/elements/Pill/index.css b/packages/ui/src/elements/Pill/index.css
index b308c9ec780..45d58ff24f7 100644
--- a/packages/ui/src/elements/Pill/index.css
+++ b/packages/ui/src/elements/Pill/index.css
@@ -1,8 +1,8 @@
 @layer payload-default {
   .pill {
-    --pill-padding-block: 0px;
-    --pill-padding-inline-start: 0px;
-    --pill-padding-inline-end: 0px;
+    --pill-padding-block: 0;
+    --pill-padding-inline-start: 0;
+    --pill-padding-inline-end: 0;
     --pill-icon-size: var(--spacer-4);
     padding: var(--pill-padding-block) var(--pill-padding-inline-end) var(--pill-padding-block)
       var(--pill-padding-inline-start);
@@ -14,7 +14,7 @@
     letter-spacing: var(--text-body-medium-letter-spacing);
     display: inline-flex;
     background: var(--color-black-200);
-    color: var(--text-default);
+    color: var(--color-text);
     border-radius: var(--radius-medium);
     cursor: inherit;
     border: 0;
@@ -56,7 +56,7 @@
   .pill--has-icon {
     gap: 0;
     --pill-padding-inline-start: var(--spacer-2);
-    --pill-padding-inline-end: calc(var(--base) * 0.1);
+    --pill-padding-inline-end: var(--spacer-1);
   }
 
   .pill--has-icon svg {
@@ -65,33 +65,38 @@
 
   .pill--align-icon-left {
     flex-direction: row-reverse;
-    --pill-padding-inline-start: calc(var(--base) * 0.1);
+    --pill-padding-inline-start: var(--spacer-1);
     --pill-padding-inline-end: var(--spacer-2);
   }
 
   .pill--style-always-white {
-    background: var(--bg-inverse-default);
-    color: var(--text-inverse-oninverse);
+    background: var(--color-bg-inverse);
+    color: var(--color-text-oninverse);
   }
 
   .pill--style-light-gray {
-    background: var(--bg-default-secondary);
-    color: var(--text-default);
+    background: var(--color-bg-secondary);
+    color: var(--color-text);
+  }
+
+  .pill--style-light {
+    background: var(--color-bg-secondary);
+    color: var(--color-text);
   }
 
   .pill--style-warning {
-    background: var(--bg-warning-tertiary);
-    color: var(--text-warning-default);
+    background: var(--color-bg-warning-tertiary);
+    color: var(--color-text-warning);
   }
 
   .pill--style-success {
-    background: var(--bg-success-tertiary);
-    color: var(--text-success-default);
+    background: var(--color-bg-selected);
+    color: var(--color-text-brand);
   }
 
   .pill--style-error {
-    background: var(--bg-danger-tertiary);
-    color: var(--text-danger-default);
+    background: var(--color-bg-danger-tertiary);
+    color: var(--color-text-danger);
   }
 
   .pill--style-dark {
@@ -115,15 +120,15 @@
   }
 
   .pill--size-small {
-    --pill-icon-size: calc(var(--base) * 0.9);
+    --pill-icon-size: var(--spacer-3);
     --pill-padding-block: 0;
     --pill-padding-inline-start: var(--spacer-1);
     --pill-padding-inline-end: var(--spacer-1);
   }
 
   html[data-theme='light'] .pill--style-always-white {
-    background: var(--bg-default);
-    color: var(--text-default);
-    border: 1px solid var(--border-default);
+    background: var(--color-bg);
+    color: var(--color-text);
+    border: var(--stroke-width-small) solid var(--color-border);
   }
 }
diff --git a/packages/ui/src/elements/SortColumn/index.css b/packages/ui/src/elements/SortColumn/index.css
index 877d8a6d27b..64e926c8e91 100644
--- a/packages/ui/src/elements/SortColumn/index.css
+++ b/packages/ui/src/elements/SortColumn/index.css
@@ -10,6 +10,12 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     cursor: default;
+    color: var(--color-text-secondary);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
   }
 
   .sort-column__label,
@@ -18,6 +24,11 @@
     display: inline-block;
   }
 
+  /* Hover: label turns primary color */
+  .sort-column:hover .sort-column__label {
+    color: var(--color-text);
+  }
+
   /* Sorted column label styling */
   .sort-column--sorted .sort-column__label {
     color: var(--color-text);
@@ -40,10 +51,10 @@
     cursor: pointer;
     border-radius: var(--radius-medium);
     color: var(--color-icon-tertiary);
+    padding: var(--spacer-1);
 
     &.sort-column--active {
       color: var(--color-icon);
-      visibility: visible;
     }
 
     &:hover {
@@ -51,12 +62,21 @@
     }
 
     &:focus-visible {
-      outline: var(--accessibility-outline);
+      outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
       outline-offset: var(--accessibility-outline-offset);
+      border-radius: var(--radius-medium);
       color: var(--color-icon);
     }
   }
 
+  .sort-column:hover .sort-column__button {
+    color: var(--color-icon-secondary);
+  }
+
+  .sort-column:hover .sort-column__button.sort-column--active {
+    color: var(--color-icon);
+  }
+
   .sort-column:hover .btn {
     visibility: visible;
   }