diff --git a/src/components/TableCellHeader/TableCellHeader.tsx b/src/components/TableCellHeader/TableCellHeader.tsx
index e557c9196..4da908fae 100644
--- a/src/components/TableCellHeader/TableCellHeader.tsx
+++ b/src/components/TableCellHeader/TableCellHeader.tsx
@@ -21,9 +21,15 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: "inline-block"
   },
   labelContainer: {
+    "&:hover": {
+      color: theme.palette.text.primary
+    },
     display: "flex",
     height: 24
   },
+  labelContainerActive: {
+    color: theme.palette.text.primary
+  },
   labelContainerCenter: {
     justifyContent: "center"
   },
@@ -58,6 +64,7 @@ const TableCellHeader: React.FC<TableCellHeaderProps> = props => {
     <TableCell {...rest} className={classNames(classes.root, className)}>
       <div
         className={classNames(classes.labelContainer, {
+          [classes.labelContainerActive]: !!direction && !!arrowPosition,
           [classes.labelContainerCenter]: textAlign === "center",
           [classes.labelContainerRight]: textAlign === "right"
         })}
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index af29f356b..ae9a6224d 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -4613,7 +4613,7 @@ exports[`Storyshots Generics / Table header ascending 1`] = `
             scope="col"
           >
             <div
-              class="Hook-labelContainer-id"
+              class="Hook-labelContainer-id Hook-labelContainerActive-id"
             >
               <div
                 class="Hook-label-id"
@@ -4646,7 +4646,7 @@ exports[`Storyshots Generics / Table header ascending 1`] = `
             scope="col"
           >
             <div
-              class="Hook-labelContainer-id"
+              class="Hook-labelContainer-id Hook-labelContainerActive-id"
             >
               <div
                 class="Hook-label-id"
@@ -4702,7 +4702,7 @@ exports[`Storyshots Generics / Table header descending 1`] = `
             scope="col"
           >
             <div
-              class="Hook-labelContainer-id"
+              class="Hook-labelContainer-id Hook-labelContainerActive-id"
             >
               <div
                 class="Hook-label-id"
@@ -93854,7 +93854,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 scope="col"
               >
                 <div
-                  class="Hook-labelContainer-id"
+                  class="Hook-labelContainer-id Hook-labelContainerActive-id"
                 >
                   <div
                     class="Hook-label-id"
@@ -93891,7 +93891,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 scope="col"
               >
                 <div
-                  class="Hook-labelContainer-id"
+                  class="Hook-labelContainer-id Hook-labelContainerActive-id"
                 >
                   <div
                     class="Hook-label-id"
@@ -93905,7 +93905,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 scope="col"
               >
                 <div
-                  class="Hook-labelContainer-id"
+                  class="Hook-labelContainer-id Hook-labelContainerActive-id"
                 >
                   <div
                     class="Hook-label-id"
@@ -95479,7 +95479,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                 scope="col"
               >
                 <div
-                  class="Hook-labelContainer-id"
+                  class="Hook-labelContainer-id Hook-labelContainerActive-id"
                 >
                   <div
                     class="Hook-label-id"