diff --git a/packages/playground/vite-project/src/App.vue b/packages/playground/vite-project/src/App.vue
index 082b8ac6..e91bfd6e 100644
--- a/packages/playground/vite-project/src/App.vue
+++ b/packages/playground/vite-project/src/App.vue
@@ -145,10 +145,24 @@
       </p>
 
       <div style="display: flex">
-        <Vue3Marquee :duration="7" direction="reverse">
-          نفس إحكام الإنذار، لم, فبعد وحل الأثنان. هو تصفح بالرّغم مك|هو
+        <Vue3Marquee
+          :direction="isRTL ? 'reverse' : 'normal'"
+          :delay="2"
+          :duration="5"
+          animate-on-overflow-only
+          pause-on-hover
+          pause-on-click
+        >
+          <span
+            v-for="(item, index) in arabicList"
+            :key="index"
+            :style="isRTL ? 'margin-left: 48px' : 'margin-right: 48px'"
+          >
+            {{ `${index + 1}. ${item}` }}
+          </span>
         </Vue3Marquee>
       </div>
+      <button @click="handleToggleDirection">Toggle text direction</button>
     </div>
 
     <div v-if="showAll">
@@ -230,9 +244,20 @@ export default defineComponent({
       playState: false,
       showAll: false,
       toggleShow: true,
+      isRTL: false,
+      arabicList: ['علوم الفضاء والتكنولوجيا', 'المهمات الفضائية', 'أكاديمية الفضاء الوطنية', 'تنظيم الفضاء', 'البرامج الفضائية'],
     }
   },
   methods: {
+    handleToggleDirection() {
+      const _documentElement = document.documentElement
+      const dir = _documentElement.getAttribute('dir')
+
+      const _isRTL = dir === 'rtl'
+
+      _isRTL ? _documentElement.removeAttribute('dir') : _documentElement.setAttribute('dir', 'rtl')
+      this.isRTL = !_isRTL
+    },
     generateRandomString() {
       const randomString = Math.random().toString(36).substring(2, 15)
       return `https://api.dicebear.com/7.x/adventurer/svg/seed=${randomString}`
diff --git a/packages/vue3-marquee/src/vue3-marquee.vue b/packages/vue3-marquee/src/vue3-marquee.vue
index 5c38f039..0e71ee42 100644
--- a/packages/vue3-marquee/src/vue3-marquee.vue
+++ b/packages/vue3-marquee/src/vue3-marquee.vue
@@ -9,6 +9,8 @@
     @mouseleave="hoverEnded"
     @mousedown="mouseDown"
     @mouseup="mouseUp"
+    @touchstart="mouseDown"
+    @touchend="mouseUp"
   >
     <div
       class="transparent-overlay"
@@ -158,6 +160,8 @@ export default defineComponent({
   ],
 
   setup(props, { emit }) {
+    const isMobile = 'ontouchstart' in document.documentElement
+
     const cloneAmount = ref(0)
 
     const minWidth = ref('100%')
@@ -301,7 +305,7 @@ export default defineComponent({
     )
 
     const hoverStarted = () => {
-      if (props.pauseOnHover) {
+      if (!isMobile && props.pauseOnHover) {
         emit('onPause')
 
         mouseOverMarquee.value = true
@@ -309,7 +313,7 @@ export default defineComponent({
     }
 
     const hoverEnded = () => {
-      if (props.pauseOnHover) {
+      if (!isMobile && props.pauseOnHover) {
         emit('onResume')
 
         mouseOverMarquee.value = false
@@ -513,6 +517,16 @@ export default defineComponent({
 </script>
 
 <style>
+:root {
+  --scroll-start: 0%;
+  --scroll-end: -100%;
+}
+
+html[dir='rtl'] {
+  --scroll-start: 100%;
+  --scroll-end: 0%;
+}
+
 .vue3-marquee {
   display: flex !important;
   position: relative;
@@ -565,10 +579,10 @@ export default defineComponent({
 
 @keyframes scrollX {
   0% {
-    transform: translateX(0%);
+    transform: translateX(var(--scroll-start));
   }
   100% {
-    transform: translateX(-100%);
+    transform: translateX(var(--scroll-end));
   }
 }