diff --git a/modules/web/src/main/ui/LearnUi.scala b/modules/web/src/main/ui/LearnUi.scala
index 60cdcbf5aa6dc..3a2fd8c144e62 100644
--- a/modules/web/src/main/ui/LearnUi.scala
+++ b/modules/web/src/main/ui/LearnUi.scala
@@ -20,7 +20,8 @@ final class LearnUi(helpers: Helpers):
             "data" -> data,
             "pref" -> Json.obj(
               "coords"      -> ctx.pref.coords,
-              "destination" -> ctx.pref.destination
+              "destination" -> ctx.pref.destination,
+              "is3d"        -> ctx.pref.is3d
             )
           )
         )
diff --git a/ui/learn/src/chessground.ts b/ui/learn/src/chessground.ts
index ae5353731c81c..2ca69da6ef886 100644
--- a/ui/learn/src/chessground.ts
+++ b/ui/learn/src/chessground.ts
@@ -36,4 +36,5 @@ const makeConfig = (ctrl: RunCtrl): CgConfig => ({
   drawable: { enabled: false },
   draggable: { enabled: true },
   selectable: { enabled: true },
+  addPieceZIndex: ctrl.pref.is3d,
 });
diff --git a/ui/learn/src/learn.ts b/ui/learn/src/learn.ts
index f6d71b8c60f73..4356002bc924b 100644
--- a/ui/learn/src/learn.ts
+++ b/ui/learn/src/learn.ts
@@ -35,6 +35,7 @@ export interface LearnOpts {
 export interface LearnPrefs {
   coords: Coords;
   destination: boolean;
+  is3d: boolean;
 }
 
 interface LearnServerOpts {
diff --git a/ui/learn/src/run/runCtrl.ts b/ui/learn/src/run/runCtrl.ts
index c3fab3ece7999..8df7c21e8e127 100644
--- a/ui/learn/src/run/runCtrl.ts
+++ b/ui/learn/src/run/runCtrl.ts
@@ -69,8 +69,6 @@ export class RunCtrl {
 
   setChessground = (chessground: CgApi) => {
     this.chessground = chessground;
-    this.chessground.state.addPieceZIndex =
-      document.querySelector('#main-wrap')?.classList.contains('is3d') ?? false;
     this.withGround(this.levelCtrl.initializeWithGround);
   };