diff --git a/app/Services/PdfMaker/Design.php b/app/Services/PdfMaker/Design.php
index eeafbbd2d9..76595fc02a 100644
--- a/app/Services/PdfMaker/Design.php
+++ b/app/Services/PdfMaker/Design.php
@@ -450,7 +450,7 @@ class Design extends BaseDesign
                     ['element' => 'img', 'properties' => ['src' => '$invoiceninja.whitelabel', 'style' => 'height: 2.5rem;', 'hidden' => $this->entity->user->account->isPaid() ? 'true' : 'false', 'id' => 'invoiceninja-whitelabel-logo']],
                 ]],
             ]],
-            ['element' => 'div', 'properties' => ['class' => 'totals-table-right-side'], 'elements' => []],
+            ['element' => 'div', 'properties' => ['class' => 'totals-table-right-side', 'dir' => '$dir'], 'elements' => []],
         ];
 
         if ($this->type == 'delivery_note') {
diff --git a/app/Utils/HtmlEngine.php b/app/Utils/HtmlEngine.php
index 70dda9a6ed..4b562decc1 100644
--- a/app/Utils/HtmlEngine.php
+++ b/app/Utils/HtmlEngine.php
@@ -433,6 +433,9 @@ class HtmlEngine
         $data['$paymentLink'] = ['value' => '<a class="button" href="'.$this->invitation->getLink().'">'.ctrans('texts.view_payment').'</a>', 'label' => ctrans('texts.view_payment')];
         $data['$portalButton'] = &$data['$paymentLink'];
 
+        $data['$dir'] = ['value' => optional($this->client->language())->locale === 'ar' ? 'rtl' : 'ltr', 'label' => ''];
+        $data['$dir_text_align'] = ['value' => optional($this->client->language())->locale === 'ar' ? 'right' : 'left', 'label' => ''];
+
         $arrKeysLength = array_map('strlen', array_keys($data));
         array_multisort($arrKeysLength, SORT_DESC, $data);
 
diff --git a/database/migrations/2021_08_10_115919_update_designs.php b/database/migrations/2021_08_16_115919_update_designs.php
similarity index 100%
rename from database/migrations/2021_08_10_115919_update_designs.php
rename to database/migrations/2021_08_16_115919_update_designs.php
diff --git a/resources/views/pdf-designs/bold.html b/resources/views/pdf-designs/bold.html
index 7a97341591..a491a93230 100644
--- a/resources/views/pdf-designs/bold.html
+++ b/resources/views/pdf-designs/bold.html
@@ -156,7 +156,7 @@
     }
 
     #table-totals>.totals-table-right-side>*> :nth-child(1) {
-        text-align: left;
+        text-align: "$dir_text_align";
         margin-top: .75rem;
     }
 
@@ -305,7 +305,7 @@
 
                 <div class="entity-details-wrapper-right-side">
                     <div class="entity-details-wrapper">
-                        <table id="entity-details"></table>
+                        <table id="entity-details" dir="$dir"></table>
                     </div>
                 </div>
             </div>
diff --git a/resources/views/pdf-designs/business.html b/resources/views/pdf-designs/business.html
index 152b464b13..fe23173e83 100644
--- a/resources/views/pdf-designs/business.html
+++ b/resources/views/pdf-designs/business.html
@@ -193,7 +193,7 @@
     }
 
     #table-totals>.totals-table-right-side>*> :nth-child(1) {
-        text-align: left;
+        text-align: "$dir_text_align";
         margin-top: .75rem;
     }
 
@@ -293,7 +293,7 @@
         <div id="client-details"></div>
 
         <div class="entity-details-wrapper">
-            <table id="entity-details" cellspacing="0"></table>
+            <table id="entity-details" cellspacing="0" dir="$dir"></table>
         </div>
     </div>
 
diff --git a/resources/views/pdf-designs/clean.html b/resources/views/pdf-designs/clean.html
index f92129cd83..1859255dad 100644
--- a/resources/views/pdf-designs/clean.html
+++ b/resources/views/pdf-designs/clean.html
@@ -156,7 +156,7 @@
     }
 
     #table-totals>.totals-table-right-side>*> :nth-child(1) {
-        text-align: left;
+        text-align: "$dir_text_align";
         margin-top: .75rem;
     }
 
@@ -248,7 +248,7 @@
 
     <p class="entity-label">$entity_label</p>
     <div class="client-and-entity-wrapper">
-        <table id="entity-details" cellspacing="0"></table>
+        <table id="entity-details" cellspacing="0" dir="$dir"></table>
 
         <div id="client-details"></div>
     </div>
diff --git a/resources/views/pdf-designs/creative.html b/resources/views/pdf-designs/creative.html
index c41cd1c20e..9acdf7cc9e 100644
--- a/resources/views/pdf-designs/creative.html
+++ b/resources/views/pdf-designs/creative.html
@@ -158,7 +158,7 @@
     }
 
     #table-totals>.totals-table-right-side>*> :nth-child(1) {
-        text-align: left;
+        text-align: "$dir_text_align";
         margin-top: .75rem;
     }
 
@@ -258,7 +258,7 @@
             <span>#$entity_number</span>
         </h1>
 
-        <table id="entity-details" cellspacing="0"></table>
+        <table id="entity-details" cellspacing="0" dir="$dir"></table>
     </div>
 
     <table id="product-table" cellspacing="0"></table>
diff --git a/resources/views/pdf-designs/elegant.html b/resources/views/pdf-designs/elegant.html
index eaa2db9dbf..6b1c0b4633 100644
--- a/resources/views/pdf-designs/elegant.html
+++ b/resources/views/pdf-designs/elegant.html
@@ -152,7 +152,7 @@
     }
 
     #table-totals>.totals-table-right-side>*> :nth-child(1) {
-        text-align: left;
+        text-align: "$dir_text_align";
         margin-top: .75rem;
     }
 
@@ -261,7 +261,7 @@
 
         <div class="wrapper-right-side">
             <h2 class="wrapper-info-text">$details_label</h2>
-            <table id="entity-details" cellspacing="0"></table>
+            <table id="entity-details" cellspacing="0" dir="$dir"></table>
         </div>
     </div>
 
diff --git a/resources/views/pdf-designs/hipster.html b/resources/views/pdf-designs/hipster.html
index cd1d498cef..84f6c951ec 100644
--- a/resources/views/pdf-designs/hipster.html
+++ b/resources/views/pdf-designs/hipster.html
@@ -167,7 +167,7 @@
     }
 
     #table-totals>.totals-table-right-side>*> :nth-child(1) {
-        text-align: left;
+        text-align: "$dir_text_align";
         margin-top: .75rem;
     }
 
@@ -213,6 +213,16 @@
         margin-bottom: 0;
     }
 
+    .entity-details-wrapper > * {
+        direction: $dir;
+    }
+
+    .entity-details-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        direction: $dir;
+    }
+
     /** Useful snippets, uncomment to enable. **/
     
     /** Hide company logo **/
@@ -271,30 +281,31 @@
 
     <h1 class="entity-label">$entity_label</h1>
     <div class="entity-details-wrapper">
-            <span>
-                <span
-                    class="entity-property-label"
-                    data-element="entity-details-wrapper-invoice-number-label"
-                >$entity_number_label:</span
-                >
+            <div>
+                <span class="entity-property-label" data-element="entity-details-wrapper-invoice-number-label">
+                    $entity_number_label:
+                </span>
                 <span class="entity-property-value">$entity_number</span>
-            </span>
-        <span>
+            </div>
+            
+            <div>
                 <span class="entity-property-label">$date_label:</span>
                 <span class="entity-property-value">$date</span>
-            </span>
-        <span>
+            </div>
+    
+            <div>
                 <span class="entity-property-label">$payment_due_label:</span>
                 <span class="entity-property-value">$payment_due</span>
-            </span>
-        <span>
+            </div>
+    
+            <div>
                 <span class="entity-property-label">$amount_due_label:</span>
                 <span
                     class="entity-property-value"
                     data-element="entity-details-wrapper-amount-due"
                 >$amount_due</span
                 >
-            </span>
+            </div>
     </div>
 
     <table id="product-table" cellspacing="0"></table>
diff --git a/resources/views/pdf-designs/modern.html b/resources/views/pdf-designs/modern.html
index ace80dd8ed..c8f00b4f2f 100644
--- a/resources/views/pdf-designs/modern.html
+++ b/resources/views/pdf-designs/modern.html
@@ -189,7 +189,7 @@
     }
 
     #table-totals>.totals-table-right-side>*> :nth-child(1) {
-        text-align: left;
+        text-align: "$dir_text_align";
         margin-top: .75rem;
     }
 
@@ -232,7 +232,7 @@
 
     [data-ref="total_table-footer"] {
         margin-top: 2rem;
-        margin-bottom: 2rem
+        margin-bottom: 2rem;
     }
 
     /** Repeating header & footer styling. */
@@ -307,7 +307,7 @@
         <td>
             <div class="header-container" id="header">
                 <h1 class="company-name">$company.name</h1>
-                <table id="entity-details" cellspacing="0"></table>
+                <table id="entity-details" cellspacing="0" dir="$dir"></table>
             </div>
         </td>
     </tr>
diff --git a/resources/views/pdf-designs/plain.html b/resources/views/pdf-designs/plain.html
index 1acac373e8..f6ff091b7d 100644
--- a/resources/views/pdf-designs/plain.html
+++ b/resources/views/pdf-designs/plain.html
@@ -132,7 +132,7 @@
     }
 
     #table-totals>.totals-table-right-side>*> :nth-child(1) {
-        text-align: left;
+        text-align: "$dir_text_align";
         margin-top: .75rem;
     }
 
@@ -223,7 +223,7 @@
                 alt="$company.name logo"
             />
 
-            <table id="entity-details" cellspacing="0"></table>
+            <table id="entity-details" cellspacing="0" dir="$dir"></table>
         </div>
     </div>
 
diff --git a/resources/views/pdf-designs/playful.html b/resources/views/pdf-designs/playful.html
index 29e919c90f..31bbbfe608 100644
--- a/resources/views/pdf-designs/playful.html
+++ b/resources/views/pdf-designs/playful.html
@@ -184,7 +184,7 @@
     }
 
     #table-totals>.totals-table-right-side>*> :nth-child(1) {
-        text-align: left;
+        text-align: "$dir_text_align";
         margin-top: .75rem;
     }
 
@@ -301,7 +301,7 @@
         <div></div>
 
         <div class="entity-details-wrapper">
-            <table id="entity-details" cellspacing="0"></table>
+            <table id="entity-details" cellspacing="0" dir="$dir"></table>
         </div>
     </div>
 
diff --git a/resources/views/pdf-designs/tech.html b/resources/views/pdf-designs/tech.html
index 0286427fe9..f0dd99bc48 100644
--- a/resources/views/pdf-designs/tech.html
+++ b/resources/views/pdf-designs/tech.html
@@ -190,7 +190,7 @@
     }
 
     #table-totals>.totals-table-right-side>*> :nth-child(1) {
-        text-align: left;
+        text-align: "$dir_text_align";
         padding: 7px;
     }
 
@@ -278,15 +278,15 @@
             <img class="company-logo" src="$company.logo"
                  alt="$company.name logo">
             <div class="top-right-side-section">
-                <section>
+                <div dir="$dir">
                     <span class="header-payment-due-label">$payment_due_label:</span>
                     <span>$payment_due</span>
-                </section>
+                </div>
 
-                <section>
+                <div dir="$dir">
                     <span class="header-amount-due-label">$amount_due_label:</span>
                     <span class="header-amount-due-value">$amount_due</span>
-                </section>
+                </div>
             </div>
         </div>
     </div>