diff --git a/app/views/challenge/mine.scala b/app/views/challenge/mine.scala
index 98f8e524ad15..3eafa362458e 100644
--- a/app/views/challenge/mine.scala
+++ b/app/views/challenge/mine.scala
@@ -84,11 +84,10 @@ object mine:
                         error.map { p(cls := "error")(_) }
                       )
                     ),
-                    div(
+                    div(cls := "qr-code-invite")(
                       h2(cls := "ninja-title", trans.orLetYourOpponentScanQrCode(), ": "),
-                      // display the challenge link as a QR code
                       br,
-                      p(cls := "challenge-id-form")(
+                      p(cls := "qr-code")(
                         img(
                           src := s"https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=$challengeLink",
                           alt := "QR Code"
diff --git a/ui/challenge/css/_page.scss b/ui/challenge/css/_page.scss
index 8578b5a7963d..4aa52a42f97d 100644
--- a/ui/challenge/css/_page.scss
+++ b/ui/challenge/css/_page.scss
@@ -7,6 +7,22 @@
     }
   }
 
+  .qr-code-invite {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    margin: 1em 0;
+
+    .qr-code {
+      @extend %box-radius;
+      @include padding-direction(2em, 2em, 1em, 2em);
+      background: $c-bg-zebra;
+      margin: 1em;
+      flex: 1 1 auto;
+    }
+  }
+
   .invite {
     display: flex;
     flex-flow: row wrap;