diff --git a/resources/views/includes/content.blade.php b/resources/views/includes/content.blade.php
index 2eb0ed9..26ad7a7 100644
--- a/resources/views/includes/content.blade.php
+++ b/resources/views/includes/content.blade.php
@@ -1,5 +1,5 @@
 <div
-    class="overflow-hidden z-50 p-5 bg-white rounded-md border-l-8 shadow cursor-pointer pointer-events-auto select-none hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800"
+    class="overflow-hidden z-50 p-5 bg-white rounded-md shadow cursor-pointer pointer-events-auto select-none ltr:border-l-8 rtl:border-r-8 hover:bg-gray-50 dark:bg-black"
     x-bind:class="{
                     'border-blue-700': toast.type === 'info',
                     'border-green-700': toast.type === 'success',
@@ -7,12 +7,12 @@ class="overflow-hidden z-50 p-5 bg-white rounded-md border-l-8 shadow cursor-poi
                     'border-red-700': toast.type === 'danger'
                   }"
 >
-    <div class="flex justify-between items-center space-x-5">
-        <div class="flex-1 mr-2">
+    <div class="flex justify-between items-center space-x-5 rtl:space-x-reverse">
+        <div class="flex-1 ltr:mr-2 rtl:ml-2">
             <div
                 class="mb-1 text-lg font-black tracking-widest text-gray-900 uppercase font-large dark:text-gray-100"
-                x-show="toast.title !== undefined"
                 x-html="toast.title"
+                x-show="toast.title !== undefined"
             ></div>
 
             <div
diff --git a/resources/views/livewire/toasts.blade.php b/resources/views/livewire/toasts.blade.php
index a620e16..158181f 100644
--- a/resources/views/livewire/toasts.blade.php
+++ b/resources/views/livewire/toasts.blade.php
@@ -1,19 +1,20 @@
 <div
-    class="fixed right-0 bottom-0 z-50 p-4 space-y-3 w-full max-w-sm pointer-events-none toasts-container sm:p-6"
+    class="fixed bottom-0 z-50 p-4 space-y-3 w-full max-w-sm pointer-events-none ltr:right-0 rtl:left-0 toasts-container sm:p-6"
     x-data='ToastComponent($wire)'
     @mouseleave="scheduleRemovalWithOlder()"
 >
     <template
-        x-for="toast in toasts.filter((a)=>a)" :key="toast.index"
+        x-for="toast in toasts.filter((a)=>a)"
+        :key="toast.index"
     >
         <div
             @mouseenter="cancelRemovalWithNewer(toast.index)"
             @mouseleave="scheduleRemovalWithOlder(toast.index)"
             @click="remove(toast.index)"
             x-show="toast.show===1"
-            x-transition:enter="transform ease-out duration-500 transition"
-            x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-10"
-            x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
+            x-transition:enter="ease-out duration-500 transition"
+            x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 ltr:sm:translate-x-10 rtl:sm:-translate-x-10"
+            x-transition:enter-end="translate-y-0 opacity-100 ltr:sm:translate-x-0"
             x-transition:leave="transition ease-in duration-500"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"