diff --git a/resources/assets/js/components/Mobile/Back.vue b/resources/assets/js/components/Mobile/Back.vue
index ac747614d..35e11589f 100644
--- a/resources/assets/js/components/Mobile/Back.vue
+++ b/resources/assets/js/components/Mobile/Back.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="mobile-back">
-        <div v-if="isVisible" class="back-semicircle" :style="style"></div>
+        <div v-if="isVisible && x > 20" class="back-semicircle" :style="style"></div>
     </div>
 </template>
 
@@ -54,7 +54,6 @@ export default {
                 maxTop = this.windowHeight - offset;
             return {
                 top: Math.min(top, maxTop) + 'px',
-                left: this.x > 20 ? 0 : '-50px',
             }
         },
 
diff --git a/resources/assets/sass/components/mobile.scss b/resources/assets/sass/components/mobile.scss
index 6e6ee4ef3..02414fe53 100644
--- a/resources/assets/sass/components/mobile.scss
+++ b/resources/assets/sass/components/mobile.scss
@@ -98,11 +98,16 @@
         z-index: 9999;
         border-radius: 50%;
         transform: translate(-460px, -50%);
-        transition: left 0.2s;
+        animation: mobile-back-animation 200ms forwards;
+    }
+}
 
-        &.show-back {
-            left: 0;
-        }
+@keyframes mobile-back-animation {
+    from {
+        left: -50px;
+    }
+    to {
+        left: 0;
     }
 }