diff --git a/app/Http/Livewire/PdfSlot.php b/app/Http/Livewire/PdfSlot.php
index ce951f497223..9be66121824a 100644
--- a/app/Http/Livewire/PdfSlot.php
+++ b/app/Http/Livewire/PdfSlot.php
@@ -78,6 +78,7 @@ class PdfSlot extends Component
             'company_address' => $this->getCompanyAddress(),
             'entity_details' => $this->getEntityDetails(),
             'user_details' => $this->getUserDetails(),
+            'user_name' => $this->getUserName(),
 
         ]);
     }
@@ -120,43 +121,54 @@ class PdfSlot extends Component
 
     private function getEntityDetails()
     {
-        $entity_details = "<dl class='border-1'>";
+        $entity_details = "";
 
         if($this->entity_type == 'invoice' || $this->entity_type == 'recurring_invoice') {
             foreach($this->settings->pdf_variables->invoice_details as $variable) 
-                $entity_details .= "<div class='px-1 sm:grid sm:grid-cols-3'><dt class=''>{$variable}_label</dt><dd class='flex ml-5'>{$variable}</dd></div>";
+                $entity_details .= "<div class='flex px-4 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
     
         }
         elseif($this->entity_type == 'quote'){
             foreach($this->settings->pdf_variables->quote_details as $variable)
-                $entity_details .= "<div class='px-1 sm:grid sm:grid-cols-3'><dt class=''>{$variable}_label</dt><dd class='flex ml-5'>{$variable}</dd></div>";
+                $entity_details .= "<div class='flex px-4 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
         }
         elseif($this->entity_type == 'credit') {
             foreach($this->settings->pdf_variables->credit_details as $variable)
-                $entity_details .= "<div class='px-1 sm:grid sm:grid-cols-3'><dt class=''>{$variable}_label</dt><dd class='flex ml-5'>{$variable}</dd></div>";
+                $entity_details .= "<div class='flex px-4 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
         }
         elseif($this->entity_type == 'purchase_order'){
             foreach($this->settings->pdf_variables->purchase_order_details as $variable)
-                $entity_details .= "<div class='px-1 sm:grid sm:grid-cols-3'><dt class=''>{$variable}_label</dt><dd class='flex ml-5'>{$variable}</dd></div>";
+                $entity_details .= "<div class='flex px-4 block'><p class= w-36 block'>{$variable}_label</p><p class='pl-1 w-36 block'>{$variable}</p></div>";
         }
             
-        $entity_details .= "</dl>";
-
         return $this->convertVariables($entity_details);
 
     }
 
+    private function getUserName()
+    {
+        if($this->entity_type == 'purchase_order') {
+            $name = $this->settings->pdf_variables->vendor_details[0];
+
+        } else {
+            $name = $this->settings->pdf_variables->client_details[0];
+        }
+                
+        return $this->convertVariables($name);
+
+    }
+
     private function getUserDetails()
     {
         $user_details = "";
 
         if($this->entity_type == 'purchase_order') {
-            foreach($this->settings->pdf_variables->vendor_details as $variable) {
+            foreach(array_slice($this->settings->pdf_variables->vendor_details,1) as $variable) {
                 $user_details .= "<p>{$variable}</p>";
             }
         }
         else{
-            foreach($this->settings->pdf_variables->client_details as $variable) {
+            foreach(array_slice($this->settings->pdf_variables->client_details,1) as $variable) {
                 $user_details .= "<p>{$variable}</p>";
             }
         }
diff --git a/resources/views/portal/ninja2020/components/html-viewer.blade.php b/resources/views/portal/ninja2020/components/html-viewer.blade.php
index 1be4224c2ba9..58fbdc575226 100644
--- a/resources/views/portal/ninja2020/components/html-viewer.blade.php
+++ b/resources/views/portal/ninja2020/components/html-viewer.blade.php
@@ -2,7 +2,7 @@
 <style>
 
 table, th, td {
-  border: 1px solid black;
+  /* border: 1px solid black; */
   border-collapse: collapse;
 }
 
@@ -26,38 +26,57 @@ span {
 }
 
 </style>
-<div class="w-full bg-white">
-    <div class="flex flex-row content-center border-fuchsia-600 border-b-2 pb-3">
+<div class="w-full bg-white py-3 border-2 shadow sm:rounded-lg">
+
+    <div class="px-3 border-fuchsia-600 border-b-2 pb-3">
+    
         <div id="company-details" class="mx-auto">
             {!! $company_details !!}
         </div>
 
-        <div id="company-address"  class="mx-auto">
+        <!-- <div id="company-address"  class="mx-auto">
             {!! $company_address !!}
+        </div> -->
+
+    </div>
+
+    <div class="border-fuchsia-600 border-b-2 pb-3 mt-3">
+
+        <div class=""> {!! $entity_details !!} </div>
+
+    </div>
+
+
+    <div id="user-details" class="mt-3 px-3 border-b-2 border-fuschia-600"> 
+
+        <div x-data="{ show_user: false }" class="mb-3">
+
+            <button @click="show_user = !show_user" :aria-expanded="show_user ? 'true' : 'false'" :class="{ 'active': show_user }" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
+                <span class="overflow-ellipsis  overflow-hidden">{{ $user_name }}</span>
+                <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
+            </button>
+
+            <div id="terms" class="py-3"  x-show="show_user">
+                {!! $user_details !!}
+            </div>
+
+
         </div>
-    </div>
-
-    <div class="flex flex-row content-center border-fuchsia-600 border-b-2 pb-3 mt-3">
-
-    <div class="mx-auto"> {!! $entity_details !!}</div>
-
-    <div id="user-details" class="mx-auto">
-        {!! $user_details !!}
-    </div>
+         
     </div>
 
     @if($products->count() > 0)
-    <div id="product-details" class="py-6 mr-10 ml-10">
+    <div id="product-details" class="py-6 mr-5 ml-5">
         <table width="100%">
             <thead>
-                <tr>
+                <tr class="border-b-2">
                     <th style="text-align:left; width:70%; padding-left:2px;">Item</th>
                     <th style="text-align:right; width:30%; padding-right:2px;">Amount</th>
                 </tr>
             </thead>
             <tbody>
                 @foreach($products as $product)
-                <tr style="display: table-row;">
+                <tr style="display: table-row;" class="border-b-2">
                     <td>
                         <div class="product-information">
                             <div class="item-details">
@@ -74,7 +93,7 @@ span {
     </div>
     @endif 
     @if($services->count() > 0)
-    <div id="task-details" class="py-6 mr-10 ml-10">
+    <div id="task-details" class="py-6 mr-5 ml-5">
         <table width="100%">
             <thead>
                 <tr class="border-bottom>
@@ -100,7 +119,7 @@ span {
         </table>
     </div>
     @endif
-    <div id="totals" class="mb-10 mr-10 ml-10">
+    <div id="totals" class="mb-10 mr-5 ml-5">
         <table width="100%">
             <thead>
             </thead>
@@ -109,21 +128,21 @@ span {
                     <td>
                         <div class="">
                             <div class="">
-                                <p class="px-2">{{ ctrans('texts.total') }}</p> 
+                                <p class="px-2 text-lg">{{ ctrans('texts.total') }}</p> 
                             </div>
                         </div>
                     </td>
-                    <td style="text-align:right; padding-right:2px;">{{ $amount }}</td>
+                    <td style="text-align:right; padding-right:2px;" class="text-lg">{{ $amount }}</td>
                 </tr>
                  <tr style="display: table-row;">
                     <td>
                         <div class="">
                             <div class="">
-                                <p class="px-2">{{ ctrans('texts.balance') }}</p> 
+                                <p class="px-2 text-lg">{{ ctrans('texts.balance') }}</p> 
                             </div>
                         </div>
                     </td>
-                    <td style="text-align:right; padding-right:2px;">{{ $balance }}</td>
+                    <td style="text-align:right; padding-right:2px;" class="text-lg">{{ $balance }}</td>
                 </tr>
             </tbody>
         </table>
@@ -131,9 +150,9 @@ span {
     </div>
 
     @if(strlen($entity->public_notes) > 3)
-    <div x-data="{ show_notes: false }" class="mb-10 mr-10 ml-10 flex flex-col items-center">
+    <div x-data="{ show_notes: false }" class="mb-10 mr-5 ml-5 flex flex-col items-end">
         
-        <button @click="show_notes = !show_notes" :aria-expanded="show_notes ? 'true' : 'false'" :class="{ 'active': show_notes }" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center mx-auto">
+        <button @click="show_notes = !show_notes" :aria-expanded="show_notes ? 'true' : 'false'" :class="{ 'active': show_notes }" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
             <span>{{ ctrans('texts.notes') }}</span>
             <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
         </button>
@@ -146,7 +165,7 @@ span {
     @endif
 
     @if(strlen($entity->terms) > 3)
-    <div x-data="{ show_terms: false }" class="mb-10 mr-10 ml-10 flex flex-col items-center">
+    <div x-data="{ show_terms: false }" class="mb-10 mr-5 ml-5 flex flex-col items-end">
 
         <button @click="show_terms = !show_terms" :aria-expanded="show_terms ? 'true' : 'false'" :class="{ 'active': show_terms }" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
             <span>{{ ctrans('texts.terms') }}</span>
@@ -161,7 +180,7 @@ span {
     @endif
 
     @if(strlen($entity->footer) > 3)
-    <div x-data="{ show_footer: false }" class="mb-10 mr-10 ml-10 flex flex-col items-center">
+    <div x-data="{ show_footer: false }" class="mb-10 mr-5 ml-5 flex flex-col items-end">
 
         <button @click="show_footer = !show_footer" :aria-expanded="show_footer ? 'true' : 'false'" :class="{ 'active': show_footer }" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center">
             <span>{{ ctrans('texts.footer') }}</span>
@@ -174,5 +193,4 @@ span {
 
 
     </div>
-    @endif
-
+    @endif
\ No newline at end of file