diff --git a/public/css/custom.css b/public/css/custom.css
index ceb2956ec..db7127a76 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -1500,47 +1500,68 @@ table .align-items-center td span.badge {
     margin-top: -50px !important;
 }
 
-.document-50 {
-    width: 50%;
+.document-item-40-px {
+    width: 40px;
 }
 
-.document-30 {
-    width: 30%;
+.document-item-10 {
+    width: 10%;
 }
 
-.document-25 {
+.document-item-20 {
+    width: 20%;
+}
+
+.document-item-25 {
     width: 25%;
 }
 
-.document-40-px {
+.document-item-30 {
+    width: 30%;
+}
+
+.document-total-50 {
+    width: 50%;
+}
+
+.document-total-30 {
+    width: 30%;
+}
+
+.document-total-25 {
+    width: 25%;
+}
+
+.document-total-40-px {
     width: 40px;
 }
 
 @media (max-width: 575.98px) {
-    .document-50 {
+    table#items {
+        min-width: 700px !important ;
+    }
+
+    .document-total-50 {
         width: 20%;
     }
 
-    .document-30 {
+    .document-total-30 {
         width: 40%;
     }
     
-    .document-25 {
+    .document-total-25 {
         width: 35%;
     }
     
-    .document-40-px {
+    .document-total-40-px {
         max-width: 1px;
         width: 1px;
         padding: 0;
         margin: 0;
     }
 
-    #invoice-total-rows td.border-bottom-0.pb-0,
-    #invoice-total-rows .border-top-0.pt-0.pb-0 {
-        max-width: 1px !important;
-        width: 1px !important;
-        padding: 0 !important;
-        margin: 0 !important;
+    .item-add-new button.btn.btn-link.w-100 {
+        text-align: left;
+        padding-left: 15%;
     }
 }
\ No newline at end of file
diff --git a/resources/views/components/documents/form/items.blade.php b/resources/views/components/documents/form/items.blade.php
index b6abe7a3d..486b2db8f 100644
--- a/resources/views/components/documents/form/items.blade.php
+++ b/resources/views/components/documents/form/items.blade.php
@@ -7,19 +7,19 @@
         <div class="table-responsive overflow-x-scroll overflow-y-hidden">
             <table class="table" id="items" style="table-layout: fixed">
                 <colgroup>
-                    <col style="width: 40px;">
-                    <col style="width: 25%;">
-                    <col style="width: 30%;">
-                    <col style="width: 10%;">
-                    <col style="width: 10%;">
-                    <col style="width: 20%;">
-                    <col style="width: 40px;">
+                    <col class="document-item-40-px">
+                    <col class="document-item-25">
+                    <col class="document-item-30 description">
+                    <col class="document-item-10">
+                    <col class="document-item-10">
+                    <col class="document-item-20">
+                    <col class="document-item-40-px">
                 </colgroup>
                 <thead class="thead-light">
                     <tr>
                         @stack('move_th_start')
                             <th class="border-top-0 border-right-0 border-bottom-0" style="max-width: 40px">
-                                <div ></div>
+                                <div></div>
                             </th>
                         @stack('move_th_end')
 
@@ -61,7 +61,7 @@
 
                         @stack('remove_th_start')
                             <th class="border-top-0 border-right-0 border-bottom-0" style="max-width: 40px">
-                                <div ></div>
+                                <div></div>
                             </th>
                         @stack('remove_th_end')
                     </tr>
diff --git a/resources/views/components/documents/form/line-item.blade.php b/resources/views/components/documents/form/line-item.blade.php
index 8cf6758ee..d7f52d5fe 100644
--- a/resources/views/components/documents/form/line-item.blade.php
+++ b/resources/views/components/documents/form/line-item.blade.php
@@ -6,18 +6,18 @@
             colspan="7">
             <table class="w-100">
                 <colgroup>
-                    <col style="width: 40px;">
-                    <col style="width: 25%;">
-                    <col style="width: 30%;">
-                    <col style="width: 10%">
-                    <col style="width: 10%">
-                    <col style="width: 20%">
-                    <col style="width: 40px;">
+                    <col class="document-item-40-px">
+                    <col class="document-item-25">
+                    <col class="document-item-30 description">
+                    <col class="document-item-10">
+                    <col class="document-item-10">
+                    <col class="document-item-20">
+                    <col class="document-item-40-px">
                 </colgroup>
                 <tbody>
                     <tr>
                         @stack('move_td_start')
-                            <td class="pl-3 pb-3 align-middle border-bottom-0" style="max-width: 40px;" style="color: #8898aa;">
+                            <td class="pl-3 pb-3 align-middle border-bottom-0 move" style="max-width: 40px;" style="color: #8898aa;">
                                 <div>
                                     <i class="fas fa-grip-vertical"></i>
                                 </div>
@@ -27,7 +27,7 @@
                         @stack('items_td_start')
                             @if (!$hideItems || (!$hideName && !$hideDescription))
                                 @stack('name_td_start')
-                                    <td class="pb-3 align-middle border-bottom-0">
+                                    <td class="pb-3 align-middle border-bottom-0 name">
                                         @if (!$hideName)
                                             <span class="aka-text aka-text--body" tabindex="0" v-html="row.name" v-if="row.item_id"></span>
                                             <div v-else>
@@ -53,7 +53,7 @@
                                 @stack('name_td_end')
 
                                 @stack('description_td_start')
-                                    <td class="pb-3 border-bottom-0">
+                                    <td class="pb-3 border-bottom-0 description">
                                         @if (!$hideDescription)
                                             <textarea
                                                 class="form-control"
@@ -72,7 +72,7 @@
                         @stack('items_td_end')
 
                         @stack('quantity_td_start')
-                            <td class="pb-3 pl-0 pr-2 border-bottom-0">
+                            <td class="pb-3 pl-0 pr-2 border-bottom-0 quantity">
                                 @if (!$hideQuantity)
                                     <div>
                                         @stack('quantity_input_start')
@@ -97,7 +97,7 @@
                         @stack('quantity_td_end')
 
                         @stack('price_td_start')
-                            <td class="pb-3 pl-0 pr-0 border-bottom-0" style="padding-right: 5px; padding-left: 5px;">
+                            <td class="pb-3 pl-0 pr-0 border-bottom-0 price" style="padding-right: 5px; padding-left: 5px;">
                                 @if (!$hidePrice)
                                     <div>
                                         @stack('price_input_start')
@@ -109,7 +109,7 @@
                         @stack('price_td_end')
 
                         @stack('total_td_start')
-                            <td class="text-right long-texts pb-3 border-bottom-0">
+                            <td class="text-right long-texts pb-3 border-bottom-0 total">
                                 @if (!$hideAmount)
                                     <div>
                                         {{ Form::moneyGroup('total', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'row.total', 'data-item' => 'total', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }}
@@ -119,7 +119,7 @@
                         @stack('total_td_end')
 
                         @stack('delete_td_start')
-                            <td class="pb-3 pl-2 align-middle border-bottom-0" style="max-width: 40px;" >
+                            <td class="pb-3 pl-2 align-middle border-bottom-0 delete" style="max-width: 40px;" >
                                 <div>
                                     <button type="button" @click="onDeleteItem(index)" class="btn btn-link btn-delete p-0">
                                         <i class="far fa-trash-alt"></i>
diff --git a/resources/views/components/documents/form/totals.blade.php b/resources/views/components/documents/form/totals.blade.php
index 0c0d4ae9c..d9434f995 100644
--- a/resources/views/components/documents/form/totals.blade.php
+++ b/resources/views/components/documents/form/totals.blade.php
@@ -3,10 +3,10 @@
         <div class="table-responsive overflow-x-scroll overflow-y-hidden">
             <table class="table" id="totals">
                 <colgroup>
-                    <col class="document-50">
-                    <col class="document-30">
-                    <col class="document-25">
-                    <col class="document-40-px">
+                    <col class="document-total-50">
+                    <col class="document-total-30">
+                    <col class="document-total-25">
+                    <col class="document-total-40-px">
                 </colgroup>
                 <tbody id="invoice-total-rows" class="table-padding-05">
                     @stack('sub_total_td_start')