diff --git a/e2e/test/scenarios/admin/datamodel/editor.cy.spec.js b/e2e/test/scenarios/admin/datamodel/editor.cy.spec.js
index f0418cd3e493f..14ee16f6d9129 100644
--- a/e2e/test/scenarios/admin/datamodel/editor.cy.spec.js
+++ b/e2e/test/scenarios/admin/datamodel/editor.cy.spec.js
@@ -659,7 +659,7 @@ const getFieldSection = fieldName => {
 };
 
 const moveField = (fieldIndex, deltaY) => {
-  cy.get(".Grabber")
+  cy.findByTestId("grabber")
     .eq(fieldIndex)
     .trigger("pointerdown", 0, 0, { force: true, button: 0, isPrimary: true })
     .wait(200)
diff --git a/frontend/src/metabase/components/Grabber/Grabber.jsx b/frontend/src/metabase/components/Grabber/Grabber.jsx
index 7889d500b0cd7..3f031e897b48b 100644
--- a/frontend/src/metabase/components/Grabber/Grabber.jsx
+++ b/frontend/src/metabase/components/Grabber/Grabber.jsx
@@ -1,10 +1,13 @@
 /* eslint-disable react/prop-types */
 import cx from "classnames";
 
+import GrabberS from "metabase/css/components/grabber.module.css";
+import CS from "metabase/css/core/index.css";
+
 export default function Grabber({ className = "", style, ...props }) {
   return (
     <div
-      className={cx("Grabber cursor-grab", className)}
+      className={cx(GrabberS.Grabber, CS.cursorGrab, className)}
       style={style}
       {...props}
     />
diff --git a/frontend/src/metabase/core/components/Sortable/SortableList.tsx b/frontend/src/metabase/core/components/Sortable/SortableList.tsx
index da63e07465f28..4e6b8d44982e6 100644
--- a/frontend/src/metabase/core/components/Sortable/SortableList.tsx
+++ b/frontend/src/metabase/core/components/Sortable/SortableList.tsx
@@ -9,6 +9,7 @@ import { SortableContext, arrayMove } from "@dnd-kit/sortable";
 import { useState, useMemo, useEffect } from "react";
 import _ from "underscore";
 
+import GrabberS from "metabase/css/components/grabber.module.css";
 import { isNotNull } from "metabase/lib/types";
 
 type ItemId = number | string;
@@ -77,7 +78,7 @@ export const SortableList = <T,>({
   };
 
   const handleDragStart = (event: DragStartEvent) => {
-    document.body.classList.add("grabbing");
+    document.body.classList.add(GrabberS.grabbing);
 
     onSortStart?.(event);
 
@@ -88,7 +89,7 @@ export const SortableList = <T,>({
   };
 
   const handleDragEnd = () => {
-    document.body.classList.remove("grabbing");
+    document.body.classList.remove(GrabberS.grabbing);
     if (activeItem && onSortEnd) {
       onSortEnd({
         id: getId(activeItem),
diff --git a/frontend/src/metabase/css/admin.module.css b/frontend/src/metabase/css/admin.module.css
index cf69bce311058..7c9f47111e9c9 100644
--- a/frontend/src/metabase/css/admin.module.css
+++ b/frontend/src/metabase/css/admin.module.css
@@ -191,7 +191,3 @@
 :global(.AdminTable tbody tr:first-child td) {
   padding-top: var(--margin-1);
 }
-
-:global(.ColumnSortHelper) {
-  box-shadow: 0 7px 20px var(--color-shadow);
-}
diff --git a/frontend/src/metabase/css/components/grabber.module.css b/frontend/src/metabase/css/components/grabber.module.css
index 13a322d2ab43a..c73bdd5b47242 100644
--- a/frontend/src/metabase/css/components/grabber.module.css
+++ b/frontend/src/metabase/css/components/grabber.module.css
@@ -1,4 +1,4 @@
-:global(.Grabber) {
+.Grabber {
   /* This image is a svg circle as a data url.
      We tile it for the whole div. */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='%23E3E7E9' r='1.5' cx='2.5' cy='2.5' /%3E%3C/svg%3E");
@@ -6,18 +6,22 @@
   background-size: 5px 5px;
 }
 
+.ColumnSortHelper {
+  box-shadow: 0 7px 20px var(--color-shadow);
+}
+
 /* .sort-helper isn't used in <Grabber>. You'll need to set that on a parent being sorted. */
-:global(.ColumnSortHelper .Grabber),
-:global(.Grabber:hover) {
+.ColumnSortHelper .Grabber,
+.Grabber:hover {
   /* This image is the same but with a different fill color. */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='%23C7CFD4' r='1.5' cx='2.5' cy='2.5' /%3E%3C/svg%3E");
 }
 
 /* This should be applied on document.body during dragging. */
-:global(.grabbing) {
+.grabbing {
   cursor: grabbing;
 }
 
-:global(.grabbing *) {
+.grabbing * {
   cursor: grabbing;
 }
diff --git a/frontend/src/metabase/css/core/colors.module.css b/frontend/src/metabase/css/core/colors.module.css
index 911c536d769a4..e2e3db1203d97 100644
--- a/frontend/src/metabase/css/core/colors.module.css
+++ b/frontend/src/metabase/css/core/colors.module.css
@@ -100,6 +100,7 @@
 
 /* white  - move to bottom for specificity since its often used on hovers, etc */
 :global(.text-white),
+.text-white,
 .textWhite,
 :global(.text-white-hover:hover) {
   color: var(--color-text-white);
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/BookmarkList.tsx b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/BookmarkList.tsx
index 33aee43251884..c509b3ce5bb3d 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/BookmarkList.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/BookmarkList.tsx
@@ -14,6 +14,7 @@ import { t } from "ttag";
 import CollapseSection from "metabase/components/CollapseSection";
 import { Sortable } from "metabase/core/components/Sortable";
 import Tooltip from "metabase/core/components/Tooltip";
+import GrabberS from "metabase/css/components/grabber.module.css";
 import Bookmarks from "metabase/entities/bookmarks";
 import * as Urls from "metabase/lib/urls";
 import { PLUGIN_COLLECTIONS } from "metabase/plugins";
@@ -130,13 +131,13 @@ const BookmarkList = ({
   }, []);
 
   const handleSortStart = useCallback(() => {
-    document.body.classList.add("grabbing");
+    document.body.classList.add(GrabberS.grabbing);
     setIsSorting(true);
   }, []);
 
   const handleSortEnd = useCallback(
     input => {
-      document.body.classList.remove("grabbing");
+      document.body.classList.remove(GrabberS.grabbing);
       setIsSorting(false);
       const newIndex = bookmarks.findIndex(b => b.id === input.over.id);
       const oldIndex = bookmarks.findIndex(b => b.id === input.active.id);