diff --git a/app/Http/Livewire/PdfSlot.php b/app/Http/Livewire/PdfSlot.php
index 40a2ae4268b9..ce951f497223 100644
--- a/app/Http/Livewire/PdfSlot.php
+++ b/app/Http/Livewire/PdfSlot.php
@@ -120,24 +120,24 @@ class PdfSlot extends Component
 
     private function getEntityDetails()
     {
-        $entity_details = "<dl class=''>";
+        $entity_details = "<dl class='border-1'>";
 
         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 py-1 sm:grid sm:grid-cols-4 sm:gap-0 sm:px-2 border-b-3 border-fuschia-500'><dt class=''>{$variable}_label</dt><dd class='flex text-sm font-mediumtext-gray-900 space-x-4'>{$variable}</dd></div>";
+                $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>";
     
         }
         elseif($this->entity_type == 'quote'){
             foreach($this->settings->pdf_variables->quote_details as $variable)
-                $entity_details .= "<div class='px-1 py-1 sm:grid sm:grid-cols-4 sm:gap-0 sm:px-2 border-b-3 border-fuschia-500'><dt class=''>{$variable}_label</dt><dd class='flex text-sm font-mediumtext-gray-900 space-x-4'>{$variable}</dd></div>";
+                $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>";
         }
         elseif($this->entity_type == 'credit') {
             foreach($this->settings->pdf_variables->credit_details as $variable)
-                $entity_details .= "<div class='px-1 py-1 sm:grid sm:grid-cols-4 sm:gap-0 sm:px-2 border-b-3 border-fuschia-500'><dt class=''>{$variable}_label</dt><dd class='flex text-sm font-mediumtext-gray-900 space-x-4'>{$variable}</dd></div>";
+                $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>";
         }
         elseif($this->entity_type == 'purchase_order'){
             foreach($this->settings->pdf_variables->purchase_order_details as $variable)
-                $entity_details .= "<div class='px-1 py-1 sm:grid sm:grid-cols-4 sm:gap-0 sm:px-2 border-b-3 border-fuschia-500'><dt class=''>{$variable}_label</dt><dd class='flex text-sm font-mediumtext-gray-900 space-x-4'>{$variable}</dd></div>";
+                $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 .= "</dl>";
diff --git a/resources/views/portal/ninja2020/components/html-viewer.blade.php b/resources/views/portal/ninja2020/components/html-viewer.blade.php
index b91e6c7c0ffb..1be4224c2ba9 100644
--- a/resources/views/portal/ninja2020/components/html-viewer.blade.php
+++ b/resources/views/portal/ninja2020/components/html-viewer.blade.php
@@ -1,7 +1,6 @@
 
 <style>
 
-
 table, th, td {
   border: 1px solid black;
   border-collapse: collapse;
@@ -27,7 +26,7 @@ span {
 }
 
 </style>
-<div class="w-full">
+<div class="w-full bg-white">
     <div class="flex flex-row content-center border-fuchsia-600 border-b-2 pb-3">
         <div id="company-details" class="mx-auto">
             {!! $company_details !!}
@@ -38,14 +37,17 @@ span {
         </div>
     </div>
 
-    <div class="mt-3"> {!! $entity_details !!}</div>
+    <div class="flex flex-row content-center border-fuchsia-600 border-b-2 pb-3 mt-3">
 
-    <div id="user-details" class="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">
+    <div id="product-details" class="py-6 mr-10 ml-10">
         <table width="100%">
             <thead>
                 <tr>
@@ -72,7 +74,7 @@ span {
     </div>
     @endif 
     @if($services->count() > 0)
-    <div id="task-details" class="py-6">
+    <div id="task-details" class="py-6 mr-10 ml-10">
         <table width="100%">
             <thead>
                 <tr class="border-bottom>
@@ -98,7 +100,7 @@ span {
         </table>
     </div>
     @endif
-    <div id="totals" class="mb-20">
+    <div id="totals" class="mb-10 mr-10 ml-10">
         <table width="100%">
             <thead>
             </thead>
@@ -129,45 +131,45 @@ span {
     </div>
 
     @if(strlen($entity->public_notes) > 3)
-    <div x-data="{ show_notes: false }" class="mb-10">
+    <div x-data="{ show_notes: false }" class="mb-10 mr-10 ml-10 flex flex-col items-center">
         
-        <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">
-           <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><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>
-          <span>{{ ctrans('texts.notes') }}</span>
+        <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">
+            <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>
         
         <div id="notes" class="py-10 border-b-2 border-fuschia-600"  x-show="show_notes">     
-            {{ $entity->public_notes }}
+            {{ strip_tags($entity->public_notes) }}
         </div>
 
     </div>
     @endif
 
     @if(strlen($entity->terms) > 3)
-    <div x-data="{ show_terms: false }" class="mb-10">
+    <div x-data="{ show_terms: false }" class="mb-10 mr-10 ml-10 flex flex-col items-center">
 
         <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">
-        <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><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>
-        <span>{{ ctrans('texts.terms') }}</span>
+            <span>{{ ctrans('texts.terms') }}</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-10 border-b-2 border-fuschia-600"  x-show="show_terms">
-            {{ $entity->terms }}
+            {{ strip_tags($entity->terms) }}
         </div>
 
     </div>
     @endif
 
     @if(strlen($entity->footer) > 3)
-    <div x-data="{ show_footer: false }" class="mb-10">
+    <div x-data="{ show_footer: false }" class="mb-10 mr-10 ml-10 flex flex-col items-center">
 
         <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">
-            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><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>
             <span>{{ ctrans('texts.footer') }}</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-10 border-b-2 border-fuschia-600"  x-show="show_footer">
-            {{ $entity->footer }}
+            {{ strip_tags($entity->footer) }}
         </div>