diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index fcada18a2..179b2d51e 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -49,9 +49,9 @@ $app_folder_size: 720px;
   background-color: $system_fg_color;
 
   @if $contrast == 'high' {
-    margin-bottom: 4px;
+    offset-y: 4px;
   } @else {
-    margin-bottom: 2px;
+    offset-y: 6px;
   }
 }
 
diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 02323fcc6..d73f9cada 100644
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -71,7 +71,7 @@ $dash_spacing: $base_margin * 0.5;
     // running app dot
     .app-grid-running-dot {
       // manually position the dot within the dash item
-      margin-bottom: $dash_padding + $dash_edge_offset - 3px; // 3px = size of dot (5px) subtracted from its translationY from appDisplay.js
+      offset-y: -$dash_padding;
     }
   }
 
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index f107c44e9..117a3864d 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -3014,7 +3014,7 @@ export const AppIcon = GObject.registerClass({
             x_align: Clutter.ActorAlign.CENTER,
             y_align: Clutter.ActorAlign.END,
         });
-        this._dot.translationY = 8;
+        this._dot.connect('style-changed', () => this._updateDotStyle());
         this._iconContainer.add_child(this._dot);
 
         this.label_actor = this.icon.label;
@@ -3059,6 +3059,11 @@ export const AppIcon = GObject.registerClass({
         }
     }
 
+    _updateDotStyle() {
+        const themeNode = this._dot.get_theme_node();
+        this._dot.translationY = themeNode.get_length('offset-y');
+    }
+
     _updateRunningStyle() {
         if (this.app.state !== Shell.AppState.STOPPED)
             this._dot.show();