diff --git a/app/Designs/Designer.php b/app/Designs/Designer.php
index ea62c407ac64..5dd5bdfaafda 100644
--- a/app/Designs/Designer.php
+++ b/app/Designs/Designer.php
@@ -51,7 +51,7 @@ class Designer
         'company4',
     ];
 
-    public function __construct($entity, $design, $input_variables, $entity_string)
+public function __construct($entity, $design, $input_variables, $entity_string)
     {
         $this->entity = $entity;
 
diff --git a/app/Services/PdfMaker/Designs/Bold.php b/app/Services/PdfMaker/Designs/Bold.php
index 64b2dec6076a..e35bc8281e2d 100644
--- a/app/Services/PdfMaker/Designs/Bold.php
+++ b/app/Services/PdfMaker/Designs/Bold.php
@@ -12,12 +12,178 @@
 
 namespace App\Services\PdfMaker\Designs;
 
-class Bold
+use App\Services\PdfMaker\Designs\Utilities\BaseDesign;
+use App\Services\PdfMaker\Designs\Utilities\BuildTableHeader;
+use App\Utils\Traits\MakesInvoiceValues;
+
+class Bold extends BaseDesign
 {
+    use MakesInvoiceValues, BuildTableHeader;
+
+    /** Global list of table elements, @var array */
+    public $elements;
+
+    /** @var App\Models\Client */
+    public $client;
+
+    /** @var App\Models\Invoice || @var App\Models\Quote */
+    public $entity;
+
+    /** Global state of the design, @var array */
+    public $context;
+
+    /** Type of entity => invoice||quote */
+    public $type;
+
     public function html()
     {
         return file_get_contents(
             base_path('resources/views/pdf-designs//bold.html')
         );
     }
+
+    public function elements(array $context, string $type = 'invoice'): array
+    {
+        $this->context = $context;
+        $this->type = $type;
+
+        $this->setup();
+
+        return [
+            'company-details' => [
+                'id' => 'company-details',
+                'elements' => $this->companyDetails(),
+            ],
+            'company-address' => [
+                'id' => 'company-address',
+                'elements' => $this->companyAddress(),
+            ],
+            'client-details' => [
+                'id' => 'client-details',
+                'elements' => $this->clientDetails(),
+            ],
+            'entity-details' => [
+                'id' => 'entity-details',
+                'elements' => $this->entityDetails(),
+            ],
+            'product-table' => [
+                'id' => 'product-table',
+                'elements' => $this->productTable(),
+            ],
+        ];
+    }
+
+    public function companyDetails()
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function companyAddress(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_address;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function clientDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->client_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function entityDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->invoice_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'tr', 'content' => '', 'elements' => [
+                ['element' => 'th', 'content' => $variable . '_label', 'properties' => ['class' => 'text-left pr-4 font-normal']],
+                ['element' => 'th', 'content' => $variable, 'properties' => ['class' => 'text-left pr-4 font-normal']],
+            ]];
+        }
+
+        return $elements;
+    }
+
+    public function productTable(): array
+    {
+        return  [
+            ['element' => 'thead', 'content' => '', 'properties' => ['class' => 'text-left rounded-t-lg'], 'elements' => $this->buildTableHeader()],
+            ['element' => 'tbody', 'content' => '', 'elements' => $this->buildTableBody()],
+            ['element' => 'tfoot', 'content' => '', 'elements' => [
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$entity.public_notes', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '4']],
+                    ['element' => 'td', 'content' => '$subtotal_label', 'properties' => ['class' => 'px-4 py-4 text-right', 'colspan' => '2']],
+                    ['element' => 'td', 'content' => '$subtotal', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$discount_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$discount', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'properties' => ['class' => 'mt-8 px-4 py-2'], 'elements' => [
+                    ['element' => 'td', 'content' => '$balance_due_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right text-xl text-teal-600 font-semibold', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$balance_due', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+            ]],
+        ];
+    }
+
+    public function buildTableHeader(): array
+    {
+        $this->processTaxColumns();
+
+        $elements = [];
+
+        foreach ($this->context['product-table-columns'] as $column) {
+            $elements[] = ['element' => 'th', 'content' => $column . '_label', 'properties' => ['class' => 'text-xl px-4 py-2']];
+        }
+
+        return $elements;
+    }
+
+    public function buildTableBody(): array
+    {
+        $elements = [];
+
+        $items = $this->transformLineItems($this->entity->line_items);
+
+        if (count($items) == 0) {
+            return [];
+        }
+
+        foreach ($items as $row) {
+            $element = ['element' => 'tr', 'content' => '', 'elements' => []];
+
+            foreach ($this->context['product-table-columns'] as $key => $cell) {
+                $element['elements'][] = ['element' => 'td', 'content' => $row[$cell], 'properties' => ['class' => 'px-4 py-4']];
+            }
+
+            $elements[] = $element;
+        }
+
+        return $elements;
+    }
 }
diff --git a/app/Services/PdfMaker/Designs/Business.php b/app/Services/PdfMaker/Designs/Business.php
index b6c368f5ac2d..65470bbdff7d 100644
--- a/app/Services/PdfMaker/Designs/Business.php
+++ b/app/Services/PdfMaker/Designs/Business.php
@@ -12,12 +12,178 @@
 
 namespace App\Services\PdfMaker\Designs;
 
-class Business
+use App\Services\PdfMaker\Designs\Utilities\BaseDesign;
+use App\Services\PdfMaker\Designs\Utilities\BuildTableHeader;
+use App\Utils\Traits\MakesInvoiceValues;
+
+class Business extends BaseDesign
 {
+    use MakesInvoiceValues, BuildTableHeader;
+
+    /** Global list of table elements, @var array */
+    public $elements;
+
+    /** @var App\Models\Client */
+    public $client;
+
+    /** @var App\Models\Invoice || @var App\Models\Quote */
+    public $entity;
+
+    /** Global state of the design, @var array */
+    public $context;
+
+    /** Type of entity => invoice||quote */
+    public $type;
+
     public function html()
     {
         return file_get_contents(
             base_path('resources/views/pdf-designs//business.html')
         );
     }
+
+    public function elements(array $context, string $type = 'invoice'): array
+    {
+        $this->context = $context;
+        $this->type = $type;
+
+        $this->setup();
+
+        return [
+            'company-details' => [
+                'id' => 'company-details',
+                'elements' => $this->companyDetails(),
+            ],
+            'company-address' => [
+                'id' => 'company-address',
+                'elements' => $this->companyAddress(),
+            ],
+            'client-details' => [
+                'id' => 'client-details',
+                'elements' => $this->clientDetails(),
+            ],
+            'entity-details' => [
+                'id' => 'entity-details',
+                'elements' => $this->entityDetails(),
+            ],
+            'product-table' => [
+                'id' => 'product-table',
+                'elements' => $this->productTable(),
+            ],
+        ];
+    }
+
+    public function companyDetails()
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function companyAddress(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_address;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function clientDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->client_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function entityDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->invoice_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'tr', 'content' => '', 'elements' => [
+                ['element' => 'th', 'content' => $variable . '_label', 'properties' => ['class' => 'text-left pr-4 font-normal']],
+                ['element' => 'th', 'content' => $variable, 'properties' => ['class' => 'text-left pr-4 font-normal']],
+            ]];
+        }
+
+        return $elements;
+    }
+
+    public function productTable(): array
+    {
+        return  [
+            ['element' => 'thead', 'content' => '', 'properties' => ['class' => 'text-left rounded-t-lg'], 'elements' => $this->buildTableHeader()],
+            ['element' => 'tbody', 'content' => '', 'elements' => $this->buildTableBody()],
+            ['element' => 'tfoot', 'content' => '', 'elements' => [
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$entity.public_notes', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '4']],
+                    ['element' => 'td', 'content' => '$subtotal_label', 'properties' => ['class' => 'px-4 py-4 text-right', 'colspan' => '2']],
+                    ['element' => 'td', 'content' => '$subtotal', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$discount_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$discount', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'properties' => ['class' => 'mt-8 px-4 py-2'], 'elements' => [
+                    ['element' => 'td', 'content' => '$balance_due_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right text-xl text-blue-900 font-semibold', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$balance_due', 'properties' => ['class' => 'px-4 py-2 text-right text-blue-900 font-semibold']],
+                ]],
+            ]],
+        ];
+    }
+
+    public function buildTableHeader(): array
+    {
+        $this->processTaxColumns();
+
+        $elements = [];
+
+        foreach ($this->context['product-table-columns'] as $column) {
+            $elements[] = ['element' => 'th', 'content' => $column . '_label', 'properties' => ['class' => 'font-semibold text-white px-4 bg-blue-900 py-5']];
+        }
+
+        return $elements;
+    }
+
+    public function buildTableBody(): array
+    {
+        $elements = [];
+
+        $items = $this->transformLineItems($this->entity->line_items);
+
+        if (count($items) == 0) {
+            return [];
+        }
+
+        foreach ($items as $row) {
+            $element = ['element' => 'tr', 'content' => '', 'elements' => []];
+
+            foreach ($this->context['product-table-columns'] as $key => $cell) {
+                $element['elements'][] = ['element' => 'td', 'content' => $row[$cell], 'properties' => ['class' => 'border-4 border-white px-4 py-4 bg-gray-200']];
+            }
+
+            $elements[] = $element;
+        }
+
+        return $elements;
+    }
 }
diff --git a/app/Services/PdfMaker/Designs/Clean.php b/app/Services/PdfMaker/Designs/Clean.php
index eb621e0ca7fd..64c1b61e1e5b 100644
--- a/app/Services/PdfMaker/Designs/Clean.php
+++ b/app/Services/PdfMaker/Designs/Clean.php
@@ -12,12 +12,178 @@
 
 namespace App\Services\PdfMaker\Designs;
 
-class Clean
+use App\Services\PdfMaker\Designs\Utilities\BaseDesign;
+use App\Services\PdfMaker\Designs\Utilities\BuildTableHeader;
+use App\Utils\Traits\MakesInvoiceValues;
+
+class Clean extends BaseDesign
 {
+    use MakesInvoiceValues, BuildTableHeader;
+
+    /** Global list of table elements, @var array */
+    public $elements;
+
+    /** @var App\Models\Client */
+    public $client;
+
+    /** @var App\Models\Invoice || @var App\Models\Quote */
+    public $entity;
+
+    /** Global state of the design, @var array */
+    public $context;
+
+    /** Type of entity => invoice||quote */
+    public $type;
+
     public function html()
     {
         return file_get_contents(
-            base_path('resources/views/pdf-designs//clean.html')
+            base_path('resources/views/pdf-designs/clean.html')
         );
     }
+
+    public function elements(array $context, string $type = 'invoice'): array
+    {
+        $this->context = $context;
+        $this->type = $type;
+
+        $this->setup();
+
+        return [
+            'company-details' => [
+                'id' => 'company-details',
+                'elements' => $this->companyDetails(),
+            ],
+            'company-address' => [
+                'id' => 'company-address',
+                'elements' => $this->companyAddress(),
+            ],
+            'entity-details' => [
+                'id' => 'entity-details',
+                'elements' => $this->entityDetails(),
+            ],
+            'client-details' => [
+                'id' => 'client-details',
+                'elements' => $this->clientDetails(),
+            ],
+            'product-table' => [
+                'id' => 'product-table',
+                'elements' => $this->productTable(),
+            ]
+        ];
+    }
+
+    public function companyDetails()
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function companyAddress(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_address;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function entityDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->invoice_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'tr', 'content' => '', 'elements' => [
+                ['element' => 'th', 'content' => $variable . '_label', 'properties' => ['class' => 'text-left pr-4 font-normal']],
+                ['element' => 'th', 'content' => $variable, 'properties' => ['class' => 'text-left pr-4 font-normal']],
+            ]];
+        }
+
+        return $elements;
+    }
+
+    public function clientDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->client_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function productTable(): array
+    {
+        return  [
+            ['element' => 'thead', 'content' => '', 'properties' => ['class' => 'text-left rounded-t-lg'], 'elements' => $this->buildTableHeader()],
+            ['element' => 'tbody', 'content' => '', 'elements' => $this->buildTableBody()],
+            ['element' => 'tfoot', 'content' => '', 'elements' => [
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$entity.public_notes', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '4']],
+                    ['element' => 'td', 'content' => '$subtotal_label', 'properties' => ['class' => 'px-4 py-4 text-right', 'colspan' => '2']],
+                    ['element' => 'td', 'content' => '$subtotal', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$discount_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$discount', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'properties' => ['class' => 'mt-8 px-4 py-2'], 'elements' => [
+                    ['element' => 'td', 'content' => '$balance_due_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right font-semibold', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$balance_due', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+            ]],
+        ];
+    }
+
+    public function buildTableHeader(): array
+    {
+        $this->processTaxColumns();
+
+        $elements = [];
+
+        foreach ($this->context['product-table-columns'] as $column) {
+            $elements[] = ['element' => 'th', 'content' => $column . '_label', 'properties' => ['class' => 'font-semibold px-4 py-5']];
+        }
+
+        return $elements;
+    }
+
+    public function buildTableBody(): array
+    {
+        $elements = [];
+
+        $items = $this->transformLineItems($this->entity->line_items);
+
+        if (count($items) == 0) {
+            return [];
+        }
+
+        foreach ($items as $row) {
+            $element = ['element' => 'tr', 'content' => '', 'elements' => []];
+
+            foreach ($this->context['product-table-columns'] as $key => $cell) {
+                $element['elements'][] = ['element' => 'td', 'content' => $row[$cell], 'properties' => ['class' => 'border-t border-b px-4 py-4']];
+            }
+
+            $elements[] = $element;
+        }
+
+        return $elements;
+    }
 }
diff --git a/app/Services/PdfMaker/Designs/Creative.php b/app/Services/PdfMaker/Designs/Creative.php
index 20275744b424..c62ff86d79d0 100644
--- a/app/Services/PdfMaker/Designs/Creative.php
+++ b/app/Services/PdfMaker/Designs/Creative.php
@@ -12,12 +12,178 @@
 
 namespace App\Services\PdfMaker\Designs;
 
-class Creative
+use App\Services\PdfMaker\Designs\Utilities\BaseDesign;
+use App\Services\PdfMaker\Designs\Utilities\BuildTableHeader;
+use App\Utils\Traits\MakesInvoiceValues;
+
+class Creative extends BaseDesign
 {
+    use MakesInvoiceValues, BuildTableHeader;
+
+    /** Global list of table elements, @var array */
+    public $elements;
+
+    /** @var App\Models\Client */
+    public $client;
+
+    /** @var App\Models\Invoice || @var App\Models\Quote */
+    public $entity;
+
+    /** Global state of the design, @var array */
+    public $context;
+
+    /** Type of entity => invoice||quote */
+    public $type;
+
     public function html()
     {
         return file_get_contents(
             base_path('resources/views/pdf-designs//creative.html')
         );
     }
+
+    public function elements(array $context, string $type = 'invoice'): array
+    {
+        $this->context = $context;
+        $this->type = $type;
+
+        $this->setup();
+
+        return [
+            'company-details' => [
+                'id' => 'company-details',
+                'elements' => $this->companyDetails(),
+            ],
+            'company-address' => [
+                'id' => 'company-address',
+                'elements' => $this->companyAddress(),
+            ],
+            'client-details' => [
+                'id' => 'client-details',
+                'elements' => $this->clientDetails(),
+            ],
+            'entity-details' => [
+                'id' => 'entity-details',
+                'elements' => $this->entityDetails(),
+            ],
+            'product-table' => [
+                'id' => 'product-table',
+                'elements' => $this->productTable(),
+            ],
+        ];
+    }
+
+    public function companyDetails()
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function companyAddress(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_address;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function clientDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->client_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function entityDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->invoice_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'tr', 'content' => '', 'elements' => [
+                ['element' => 'th', 'content' => $variable . '_label', 'properties' => ['class' => 'text-left pr-4 font-normal']],
+                ['element' => 'th', 'content' => $variable, 'properties' => ['class' => 'text-left pr-4 font-normal']],
+            ]];
+        }
+
+        return $elements;
+    }
+
+    public function productTable(): array
+    {
+        return  [
+            ['element' => 'thead', 'content' => '', 'properties' => ['class' => 'text-left'], 'elements' => $this->buildTableHeader()],
+            ['element' => 'tbody', 'content' => '', 'elements' => $this->buildTableBody()],
+            ['element' => 'tfoot', 'content' => '', 'elements' => [
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$entity.public_notes', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '4']],
+                    ['element' => 'td', 'content' => '$subtotal_label', 'properties' => ['class' => 'px-4 py-4 text-right', 'colspan' => '2']],
+                    ['element' => 'td', 'content' => '$subtotal', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$discount_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$discount', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'properties' => ['class' => 'mt-8 px-4 py-2 border-t-4 border-pink-700'], 'elements' => [
+                    ['element' => 'td', 'content' => '$balance_due_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$balance_due', 'properties' => ['class' => 'px-4 py-2 text-right font-semibold text-pink-700']],
+                ]],
+            ]],
+        ];
+    }
+
+    public function buildTableHeader(): array
+    {
+        $this->processTaxColumns();
+
+        $elements = [];
+
+        foreach ($this->context['product-table-columns'] as $column) {
+            $elements[] = ['element' => 'th', 'content' => $column . '_label', 'properties' => ['class' => 'font-medium uppercase text-pink-700 text-xl px-4 py-5']];
+        }
+
+        return $elements;
+    }
+
+    public function buildTableBody(): array
+    {
+        $elements = [];
+
+        $items = $this->transformLineItems($this->entity->line_items);
+
+        if (count($items) == 0) {
+            return [];
+        }
+
+        foreach ($items as $row) {
+            $element = ['element' => 'tr', 'content' => '', 'elements' => []];
+
+            foreach ($this->context['product-table-columns'] as $key => $cell) {
+                $element['elements'][] = ['element' => 'td', 'content' => $row[$cell], 'properties' => ['class' => 'px-4 py-4']];
+            }
+
+            $elements[] = $element;
+        }
+
+        return $elements;
+    }
 }
diff --git a/app/Services/PdfMaker/Designs/Elegant.php b/app/Services/PdfMaker/Designs/Elegant.php
index 947ffc9ba0b8..dcc8dbfe0be2 100644
--- a/app/Services/PdfMaker/Designs/Elegant.php
+++ b/app/Services/PdfMaker/Designs/Elegant.php
@@ -12,12 +12,179 @@
 
 namespace App\Services\PdfMaker\Designs;
 
-class Elegant
+use App\Services\PdfMaker\Designs\Utilities\BaseDesign;
+use App\Services\PdfMaker\Designs\Utilities\BuildTableHeader;
+use App\Utils\Traits\MakesInvoiceValues;
+
+class Elegant extends BaseDesign
 {
+    use MakesInvoiceValues, BuildTableHeader;
+
+    /** Global list of table elements, @var array */
+    public $elements;
+
+    /** @var App\Models\Client */
+    public $client;
+
+    /** @var App\Models\Invoice || @var App\Models\Quote */
+    public $entity;
+
+    /** Global state of the design, @var array */
+    public $context;
+
+    /** Type of entity => invoice||quote */
+    public $type;
+
     public function html()
     {
         return file_get_contents(
-            base_path('resources/views/pdf-designs//elegant.html')
+            base_path('resources/views/pdf-designs/elegant.html')
         );
     }
+
+    public function elements(array $context, string $type = 'invoice'): array
+    {
+        $this->context = $context;
+        $this->type = $type;
+
+        $this->setup();
+
+        return [
+            'entity-details' => [
+                'id' => 'entity-details',
+                'elements' => $this->entityDetails(),
+            ],
+            'company-details' => [
+                'id' => 'company-details',
+                'elements' => $this->companyDetails(),
+            ],
+            'company-address' => [
+                'id' => 'company-address',
+                'elements' => $this->companyAddress(),
+            ],
+            'client-details' => [
+                'id' => 'client-details',
+                'elements' => $this->clientDetails(),
+            ],
+            'product-table' => [
+                'id' => 'product-table',
+                'elements' => $this->productTable(),
+            ],
+        ];
+    }
+
+    public function entityDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->invoice_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'tr', 'content' => '', 'elements' => [
+                ['element' => 'th', 'content' => $variable . '_label', 'properties' => ['class' => 'text-left pr-4 font-normal']],
+                ['element' => 'th', 'content' => $variable, 'properties' => ['class' => 'text-left pr-4 font-normal']],
+            ]];
+        }
+
+        return $elements;
+    }
+
+
+    public function companyDetails()
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function companyAddress(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_address;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function clientDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->client_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function productTable(): array
+    {
+        return  [
+            ['element' => 'thead', 'content' => '', 'properties' => ['class' => 'text-left border-dashed border-b border-black'], 'elements' => $this->buildTableHeader()],
+            ['element' => 'tbody', 'content' => '', 'elements' => $this->buildTableBody()],
+            ['element' => 'tfoot', 'content' => '', 'elements' => [
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$entity.public_notes', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '4']],
+                    ['element' => 'td', 'content' => '$subtotal_label', 'properties' => ['class' => 'px-4 py-4 text-right', 'colspan' => '2']],
+                    ['element' => 'td', 'content' => '$subtotal', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$discount_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$discount', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'properties' => ['class' => 'mt-8 px-4 py-2'], 'elements' => [
+                    ['element' => 'td', 'content' => '$balance_due_label', 'properties' => ['class' => 'px-4 text-right text-xl text-green-600 font-semibold', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$balance_due', 'properties' => ['class' => 'px-4 py-2 text-right text-green-600']],
+                ]],
+            ]],
+        ];
+    }
+
+    public function buildTableHeader(): array
+    {
+        $this->processTaxColumns();
+
+        $elements = [];
+
+        foreach ($this->context['product-table-columns'] as $column) {
+            $elements[] = ['element' => 'th', 'content' => $column . '_label', 'properties' => ['class' => 'font-normal text-green-700 px-4 py-2']];
+        }
+
+        return $elements;
+    }
+
+    public function buildTableBody(): array
+    {
+        $elements = [];
+
+        $items = $this->transformLineItems($this->entity->line_items);
+
+        if (count($items) == 0) {
+            return [];
+        }
+
+        foreach ($items as $row) {
+            $element = ['element' => 'tr', 'properties' => ['class' => 'border-dashed border-b border-black'] ,'content' => '', 'elements' => []];
+
+            foreach ($this->context['product-table-columns'] as $key => $cell) {
+                $element['elements'][] = ['element' => 'td', 'content' => $row[$cell], 'properties' => ['class' => 'px-4 py-3']];
+            }
+
+            $elements[] = $element;
+        }
+
+        return $elements;
+    }
 }
diff --git a/app/Services/PdfMaker/Designs/Hipster.php b/app/Services/PdfMaker/Designs/Hipster.php
index d4ff9b42ecd0..d459a8b15c16 100644
--- a/app/Services/PdfMaker/Designs/Hipster.php
+++ b/app/Services/PdfMaker/Designs/Hipster.php
@@ -12,12 +12,178 @@
 
 namespace App\Services\PdfMaker\Designs;
 
-class Hipster
+use App\Services\PdfMaker\Designs\Utilities\BaseDesign;
+use App\Services\PdfMaker\Designs\Utilities\BuildTableHeader;
+use App\Utils\Traits\MakesInvoiceValues;
+
+class Hipster extends BaseDesign
 {
+    use MakesInvoiceValues, BuildTableHeader;
+
+    /** Global list of table elements, @var array */
+    public $elements;
+
+    /** @var App\Models\Client */
+    public $client;
+
+    /** @var App\Models\Invoice || @var App\Models\Quote */
+    public $entity;
+
+    /** Global state of the design, @var array */
+    public $context;
+
+    /** Type of entity => invoice||quote */
+    public $type;
+
     public function html()
     {
         return file_get_contents(
-            base_path('resources/views/pdf-designs//hipster.html')
+            base_path('resources/views/pdf-designs/hipster.html')
         );
     }
+
+    public function elements(array $context, string $type = 'invoice'): array
+    {
+        $this->context = $context;
+        $this->type = $type;
+
+        $this->setup();
+
+        return [
+            'company-details' => [
+                'id' => 'company-details',
+                'elements' => $this->companyDetails(),
+            ],
+            'company-address' => [
+                'id' => 'company-address',
+                'elements' => $this->companyAddress(),
+            ],
+            'client-details' => [
+                'id' => 'client-details',
+                'elements' => $this->clientDetails(),
+            ],
+            'entity-details' => [
+                'id' => 'entity-details',
+                'elements' => $this->entityDetails(),
+            ],
+            'product-table' => [
+                'id' => 'product-table',
+                'elements' => $this->productTable(),
+            ],
+        ];
+    }
+
+    public function companyDetails()
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function companyAddress(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_address;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function clientDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->client_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function entityDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->invoice_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'div', 'properties' => ['class' => 'space-x-4'], 'content' => '', 'elements' => [
+                ['element' => 'span', 'content' => $variable . '_label', 'properties' => ['class' => 'font-semibold uppercase text-yellow-600']],
+                ['element' => 'span', 'content' => $variable, 'properties' => ['class' => 'uppercase']],
+            ]];
+        }
+
+        return $elements;
+    }
+
+    public function productTable(): array
+    {
+        return  [
+            ['element' => 'thead', 'content' => '', 'properties' => ['class' => 'text-left'], 'elements' => $this->buildTableHeader()],
+            ['element' => 'tbody', 'content' => '', 'elements' => $this->buildTableBody()],
+            ['element' => 'tfoot', 'content' => '', 'elements' => [
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$entity.public_notes', 'properties' => ['class' => 'px-4 py-4 text-rightt', 'colspan' => '4']],
+                    ['element' => 'td', 'content' => '$subtotal_label', 'properties' => ['class' => 'px-4 py-4 text-right', 'colspan' => '2']],
+                    ['element' => 'td', 'content' => '$subtotal', 'properties' => ['class' => 'border-l-2 border-black px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$discount_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$discount', 'properties' => ['class' => 'border-l-2 border-black px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'properties' => ['class' => 'mt-8 px-4 py-2'], 'elements' => [
+                    ['element' => 'td', 'content' => '$balance_due_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$balance_due', 'properties' => ['class' => 'border-l-2 border-black px-4 py-2 text-right']],
+                ]],
+            ]],
+        ];
+    }
+
+    public function buildTableHeader(): array
+    {
+        $this->processTaxColumns();
+
+        $elements = [];
+
+        foreach ($this->context['product-table-columns'] as $column) {
+            $elements[] = ['element' => 'th', 'content' => $column . '_label', 'properties' => ['class' => 'border-l-2 border-black px-4 py-2 uppercase']];
+        }
+
+        return $elements;
+    }
+
+    public function buildTableBody(): array
+    {
+        $elements = [];
+
+        $items = $this->transformLineItems($this->entity->line_items);
+
+        if (count($items) == 0) {
+            return [];
+        }
+
+        foreach ($items as $row) {
+            $element = ['element' => 'tr', 'content' => '', 'elements' => []];
+
+            foreach ($this->context['product-table-columns'] as $key => $cell) {
+                $element['elements'][] = ['element' => 'td', 'content' => $row[$cell], 'properties' => ['class' => 'border-l-2 border-black px-4 py-4']];
+            }
+
+            $elements[] = $element;
+        }
+
+        return $elements;
+    }
 }
diff --git a/app/Services/PdfMaker/Designs/Modern.php b/app/Services/PdfMaker/Designs/Modern.php
index 8c4dfec47dc2..c08c284c7f2b 100644
--- a/app/Services/PdfMaker/Designs/Modern.php
+++ b/app/Services/PdfMaker/Designs/Modern.php
@@ -12,12 +12,178 @@
 
 namespace App\Services\PdfMaker\Designs;
 
-class Modern
+use App\Services\PdfMaker\Designs\Utilities\BaseDesign;
+use App\Services\PdfMaker\Designs\Utilities\BuildTableHeader;
+use App\Utils\Traits\MakesInvoiceValues;
+
+class Modern extends BaseDesign
 {
+    use MakesInvoiceValues, BuildTableHeader;
+
+    /** Global list of table elements, @var array */
+    public $elements;
+
+    /** @var App\Models\Client */
+    public $client;
+
+    /** @var App\Models\Invoice || @var App\Models\Quote */
+    public $entity;
+
+    /** Global state of the design, @var array */
+    public $context;
+
+    /** Type of entity => invoice||quote */
+    public $type;
+
     public function html()
     {
         return file_get_contents(
-            base_path('resources/views/pdf-designs//modern.html')
+            base_path('resources/views/pdf-designs/modern.html')
         );
     }
+
+    public function elements(array $context, string $type = 'invoice'): array
+    {
+        $this->context = $context;
+        $this->type = $type;
+
+        $this->setup();
+
+        return [
+            'entity-details' => [
+                'id' => 'entity-details',
+                'elements' => $this->entityDetails(),
+            ],
+            'client-details' => [
+                'id' => 'client-details',
+                'elements' => $this->clientDetails(),
+            ],
+            'product-table' => [
+                'id' => 'product-table',
+                'elements' => $this->productTable(),
+            ],
+            'company-details' => [
+                'id' => 'company-details',
+                'elements' => $this->companyDetails(),
+            ],
+            'company-address' => [
+                'id' => 'company-address',
+                'elements' => $this->companyAddress(),
+            ],
+        ];
+    }
+
+    public function entityDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->invoice_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'tr', 'content' => '', 'elements' => [
+                ['element' => 'th', 'content' => $variable . '_label', 'properties' => ['class' => 'text-left pr-16 lg:pr-24 font-normal']],
+                ['element' => 'th', 'content' => $variable, 'properties' => ['class' => 'text-left pr-16 lg:pr-24 font-normal']],
+            ]];
+        }
+
+        return $elements;
+    }
+
+    public function clientDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->client_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function productTable(): array
+    {
+        return  [
+            ['element' => 'thead', 'content' => '', 'properties' => ['class' => 'text-left text-white bg-gray-900'], 'elements' => $this->buildTableHeader()],
+            ['element' => 'tbody', 'content' => '', 'elements' => $this->buildTableBody()],
+            ['element' => 'tfoot', 'content' => '', 'elements' => [
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$entity.public_notes', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '4']],
+                    ['element' => 'td', 'content' => '$subtotal_label', 'properties' => ['class' => 'px-4 py-4 text-right', 'colspan' => '2']],
+                    ['element' => 'td', 'content' => '$subtotal', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$discount_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$discount', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'properties' => ['class' => 'mt-8 px-4 py-2 bg-gray-900 text-white text-xl'], 'elements' => [
+                    ['element' => 'td', 'content' => '$balance_due_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right font-semibold', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$balance_due', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+            ]],
+        ];
+    }
+
+    public function buildTableHeader(): array
+    {
+        $this->processTaxColumns();
+
+        $elements = [];
+
+        foreach ($this->context['product-table-columns'] as $column) {
+            $elements[] = ['element' => 'th', 'content' => $column . '_label', 'properties' => ['class' => 'px-4 py-2']];
+        }
+
+        return $elements;
+    }
+
+    public function buildTableBody(): array
+    {
+        $elements = [];
+
+        $items = $this->transformLineItems($this->entity->line_items);
+
+        if (count($items) == 0) {
+            return [];
+        }
+
+        foreach ($items as $row) {
+            $element = ['element' => 'tr', 'properties' => ['class' => 'border-t border-b border-gray-900'], 'content' => '', 'elements' => []];
+
+            foreach ($this->context['product-table-columns'] as $key => $cell) {
+                $element['elements'][] = ['element' => 'td', 'content' => $row[$cell], 'properties' => ['class' => 'px-4 py-4']];
+            }
+
+            $elements[] = $element;
+        }
+
+        return $elements;
+    }
+
+    public function companyDetails()
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function companyAddress(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_address;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
 }
diff --git a/app/Services/PdfMaker/Designs/Plain.php b/app/Services/PdfMaker/Designs/Plain.php
index 36b6ea628262..fc251b272fd2 100644
--- a/app/Services/PdfMaker/Designs/Plain.php
+++ b/app/Services/PdfMaker/Designs/Plain.php
@@ -12,12 +12,161 @@
 
 namespace App\Services\PdfMaker\Designs;
 
-class Plain
+use App\Services\PdfMaker\Designs\Utilities\BaseDesign;
+use App\Services\PdfMaker\Designs\Utilities\BuildTableHeader;
+use App\Utils\Traits\MakesInvoiceValues;
+
+class Plain extends BaseDesign
 {
-    public function html()
+    use MakesInvoiceValues, BuildTableHeader;
+
+    /** Global list of table elements, @var array */
+    public $elements;
+
+    /** @var App\Models\Client */
+    public $client;
+
+    /** @var App\Models\Invoice || @var App\Models\Quote */
+    public $entity;
+
+    /** Global state of the design, @var array */
+    public $context;
+
+    /** Type of entity => invoice||quote */
+    public $type;
+
+    public function html(): ?string
     {
         return file_get_contents(
-            base_path('resources/views/pdf-designs//plain.html')
+            base_path('resources/views/pdf-designs/plain.html')
         );
     }
+
+    public function elements(array $context, string $type = 'invoice'): array
+    {
+        $this->context = $context;
+        $this->type = $type;
+
+        $this->setup();
+
+        return [
+            'company-address' => [
+                'id' => 'company-address',
+                'elements' => $this->companyAddress(),
+            ],
+            'entity-details' => [
+                'id' => 'entity-details',
+                'elements' => $this->entityDetails(),
+            ],
+            'client-details' => [
+                'id' => 'client-details',
+                'elements' => $this->clientDetails(),
+            ],
+            'product-table' => [
+                'id' => 'product-table',
+                'elements' => $this->productTable(),
+            ],
+        ];
+    }
+
+    public function companyAddress(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_address;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function entityDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->invoice_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'tr', 'content' => '', 'elements' => [
+                ['element' => 'th', 'content' => $variable . '_label', 'properties' => ['class' => 'text-left pr-4 font-normal']],
+                ['element' => 'th', 'content' => $variable, 'properties' => ['class' => 'text-left pr-4 font-medium']],
+            ]];
+        }
+
+        return $elements;
+    }
+
+    public function clientDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->client_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function productTable(): array
+    {
+        return  [
+            ['element' => 'thead', 'content' => '', 'properties' => ['class' => 'text-left bg-gray-200'], 'elements' => $this->buildTableHeader()],
+            ['element' => 'tbody', 'content' => '', 'elements' => $this->buildTableBody()],
+            ['element' => 'tfoot', 'content' => '', 'elements' => [
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$entity.public_notes', 'properties' => ['class' => 'border-l-4 border-white px-4 py-4', 'colspan' => '4']],
+                    ['element' => 'td', 'content' => '$subtotal_label', 'properties' => ['class' => 'px-4 py-4 text-right', 'colspan' => '2']],
+                    ['element' => 'td', 'content' => '$subtotal', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$discount_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$discount', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'properties' => ['class' => 'mt-8 px-4 py-2 bg-gray-300'], 'elements' => [
+                    ['element' => 'td', 'content' => '$balance_due_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$balance_due', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+            ]],
+        ];
+    }
+
+    public function buildTableHeader(): array
+    {
+        $this->processTaxColumns();
+
+        $elements = [];
+
+        foreach ($this->context['product-table-columns'] as $column) {
+            $elements[] = ['element' => 'th', 'content' => $column . '_label', 'properties' => ['class' => 'px-4 py-2']];
+        }
+
+        return $elements;
+    }
+
+    public function buildTableBody(): array
+    {
+        $elements = [];
+
+        $items = $this->transformLineItems($this->entity->line_items);
+
+        if (count($items) == 0) {
+            return [];
+        }
+
+        foreach ($items as $row) {
+            $element = ['element' => 'tr', 'content' => '', 'elements' => []];
+
+            foreach ($this->context['product-table-columns'] as $key => $cell) {
+                $element['elements'][] = ['element' => 'td', 'content' => $row[$cell], 'properties' => ['class' => 'border-t-2 border-b border-gray-200 px-4 py-4']];
+            }
+
+            $elements[] = $element;
+        }
+
+        return $elements;
+    }
 }
diff --git a/app/Services/PdfMaker/Designs/Playful.php b/app/Services/PdfMaker/Designs/Playful.php
index 693d32516b5f..1e1db7661ff1 100644
--- a/app/Services/PdfMaker/Designs/Playful.php
+++ b/app/Services/PdfMaker/Designs/Playful.php
@@ -12,12 +12,178 @@
 
 namespace App\Services\PdfMaker\Designs;
 
-class Playful
+use App\Services\PdfMaker\Designs\Utilities\BaseDesign;
+use App\Services\PdfMaker\Designs\Utilities\BuildTableHeader;
+use App\Utils\Traits\MakesInvoiceValues;
+
+class Playful extends BaseDesign
 {
+    use MakesInvoiceValues, BuildTableHeader;
+
+    /** Global list of table elements, @var array */
+    public $elements;
+
+    /** @var App\Models\Client */
+    public $client;
+
+    /** @var App\Models\Invoice || @var App\Models\Quote */
+    public $entity;
+
+    /** Global state of the design, @var array */
+    public $context;
+
+    /** Type of entity => invoice||quote */
+    public $type;
+
     public function html()
     {
         return file_get_contents(
-            base_path('resources/views/pdf-designs//playful.html')
+            base_path('resources/views/pdf-designs/playful.html')
         );
     }
+
+    public function elements(array $context, string $type = 'invoice'): array
+    {
+        $this->context = $context;
+        $this->type = $type;
+
+        $this->setup();
+
+        return [
+            'entity-details' => [
+                'id' => 'entity-details',
+                'elements' => $this->entityDetails(),
+            ],
+            'company-details' => [
+                'id' => 'company-details',
+                'elements' => $this->companyDetails(),
+            ],
+            'company-address' => [
+                'id' => 'company-address',
+                'elements' => $this->companyAddress(),
+            ],
+            'client-details' => [
+                'id' => 'client-details',
+                'elements' => $this->clientDetails(),
+            ],
+            'product-table' => [
+                'id' => 'product-table',
+                'elements' => $this->productTable(),
+            ],
+        ];
+    }
+
+    public function entityDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->invoice_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'tr', 'content' => '', 'elements' => [
+                ['element' => 'th', 'content' => $variable . '_label', 'properties' => ['class' => 'text-left pr-4 font-normal']],
+                ['element' => 'th', 'content' => $variable, 'properties' => ['class' => 'text-left pr-4 font-medium']],
+            ]];
+        }
+
+        return $elements;
+    }
+
+    public function companyDetails()
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function companyAddress(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->company_address;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function clientDetails(): array
+    {
+        $variables = $this->entity->company->settings->pdf_variables->client_details;
+
+        $elements = [];
+
+        foreach ($variables as $variable) {
+            $elements[] = ['element' => 'p', 'content' => $variable];
+        }
+
+        return $elements;
+    }
+
+    public function productTable(): array
+    {
+        return  [
+            ['element' => 'thead', 'content' => '', 'properties' => ['class' => 'text-left bg-teal-600'], 'elements' => $this->buildTableHeader()],
+            ['element' => 'tbody', 'content' => '', 'elements' => $this->buildTableBody()],
+            ['element' => 'tfoot', 'content' => '', 'elements' => [
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$entity.public_notes', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '4']],
+                    ['element' => 'td', 'content' => '$subtotal_label', 'properties' => ['class' => 'px-4 py-4 text-right', 'colspan' => '2']],
+                    ['element' => 'td', 'content' => '$subtotal', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'elements' => [
+                    ['element' => 'td', 'content' => '$discount_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$discount', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+                ['element' => 'tr', 'content' => '', 'properties' => ['class' => 'mt-8 px-4 py-2'], 'elements' => [
+                    ['element' => 'td', 'content' => '$balance_due_label', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right font-semibold text-teal-600', 'colspan' => '6']],
+                    ['element' => 'td', 'content' => '$balance_due', 'properties' => ['class' => 'px-4 py-2 text-right']],
+                ]],
+            ]],
+        ];
+    }
+
+    public function buildTableHeader(): array
+    {
+        $this->processTaxColumns();
+
+        $elements = [];
+
+        foreach ($this->context['product-table-columns'] as $column) {
+            $elements[] = ['element' => 'th', 'content' => $column . '_label', 'properties' => ['class' => 'font-semibold text-white px-4 py-3']];
+        }
+
+        return $elements;
+    }
+
+    public function buildTableBody(): array
+    {
+        $elements = [];
+
+        $items = $this->transformLineItems($this->entity->line_items);
+
+        if (count($items) == 0) {
+            return [];
+        }
+
+        foreach ($items as $row) {
+            $element = ['element' => 'tr', 'properties' => ['class' => 'border-b-2 border-teal-600'], 'content' => '', 'elements' => []];
+
+            foreach ($this->context['product-table-columns'] as $key => $cell) {
+                $element['elements'][] = ['element' => 'td', 'content' => $row[$cell], 'properties' => ['class' => 'px-4 py-4']];
+            }
+
+            $elements[] = $element;
+        }
+
+        return $elements;
+    }
 }
diff --git a/app/Services/PdfMaker/Designs/Utilities/BaseDesign.php b/app/Services/PdfMaker/Designs/Utilities/BaseDesign.php
new file mode 100644
index 000000000000..9a01ee42da63
--- /dev/null
+++ b/app/Services/PdfMaker/Designs/Utilities/BaseDesign.php
@@ -0,0 +1,27 @@
+<?php
+
+/**
+ * Invoice Ninja (https://invoiceninja.com)
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2020. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://opensource.org/licenses/AAL
+ */
+
+namespace App\Services\PdfMaker\Designs\Utilities;
+
+class BaseDesign
+{
+    public function setup(): void
+    {
+        if (isset($this->context['client'])) {
+            $this->client = $this->context['client'];
+        }
+
+        if (isset($this->context['entity'])) {
+            $this->entity = $this->context['entity'];
+        }
+    }
+}
diff --git a/app/Services/PdfMaker/Designs/Utilities/BuildTableHeader.php b/app/Services/PdfMaker/Designs/Utilities/BuildTableHeader.php
new file mode 100644
index 000000000000..41529dc16b75
--- /dev/null
+++ b/app/Services/PdfMaker/Designs/Utilities/BuildTableHeader.php
@@ -0,0 +1,55 @@
+<?php
+
+/**
+ * Invoice Ninja (https://invoiceninja.com)
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2020. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://opensource.org/licenses/AAL
+ */
+
+ namespace App\Services\PdfMaker\Designs\Utilities;
+
+trait BuildTableHeader
+{
+    /**
+     * This method will help us decide either we show
+     * one "tax rate" column in the table or 3 custom tax rates.
+     * 
+     * Logic below will help us calculate that & inject the result in the
+     * global state of the $context (design state).
+     * 
+     * @return void
+     */
+    public function processTaxColumns(): void
+    {
+        if (in_array('$product.tax', $this->context['product-table-columns'])) {
+            $line_items = collect($this->entity->line_items);
+
+            $tax1 = $line_items->where('tax_name1', '<>', '')->where('type_id', 1)->count();
+            $tax2 = $line_items->where('tax_name2', '<>', '')->where('type_id', 1)->count();
+            $tax3 = $line_items->where('tax_name3', '<>', '')->where('type_id', 1)->count();
+            $taxes = [];
+
+            if ($tax1 > 0) {
+                array_push($taxes, '$product.tax_rate1');
+            }
+
+            if ($tax2 > 0) {
+                array_push($taxes, '$product.tax_rate2');
+            }
+
+            if ($tax3 > 0) {
+                array_push($taxes, '$product.tax_rate3');
+            }
+
+            $key = array_search('$product.tax', $this->context['product-table-columns'], true);
+
+            if ($key) {
+                array_splice($this->context['product-table-columns'], $key, 1, $taxes);
+            }
+        }
+    }
+}
diff --git a/app/Services/PdfMaker/PdfMaker.php b/app/Services/PdfMaker/PdfMaker.php
index 0aef04315cbc..7640b4d95c1b 100644
--- a/app/Services/PdfMaker/PdfMaker.php
+++ b/app/Services/PdfMaker/PdfMaker.php
@@ -55,7 +55,7 @@ class PdfMaker
         if (isset($this->data['variables'])) {
             $this->updateVariables($this->data['variables']);
         }
-        
+
         return $this;
     }
 
diff --git a/app/Services/PdfMaker/PdfMakerUtilities.php b/app/Services/PdfMaker/PdfMakerUtilities.php
index 174caec83fe9..a696f5012fb5 100644
--- a/app/Services/PdfMaker/PdfMakerUtilities.php
+++ b/app/Services/PdfMaker/PdfMakerUtilities.php
@@ -116,7 +116,9 @@ trait PdfMakerUtilities
 
     public function updateVariables(array $variables)
     {
-        $html = strtr($this->getCompiledHTML(), $variables);
+        $html = strtr($this->getCompiledHTML(), $variables['labels']);
+        
+        $html = strtr($html, $variables['values']);
 
         $this->document->loadHTML($html);
 
diff --git a/app/Utils/HtmlEngine.php b/app/Utils/HtmlEngine.php
index 3a5152d279f3..41acc4457cc5 100644
--- a/app/Utils/HtmlEngine.php
+++ b/app/Utils/HtmlEngine.php
@@ -29,18 +29,14 @@ class HtmlEngine
 
     public $company;
 
-    public $designer;
-
     public $settings;
 
     public $entity_calc;
 
     public $entity_string;
 
-    public function __construct(Designer $designer, $invitation, $entity_string)
+    public function __construct($invitation, $entity_string)
     {
-        $this->designer = $designer;
-
         $this->invitation = $invitation;
 
         $this->entity = $invitation->{$entity_string};
@@ -95,6 +91,7 @@ class HtmlEngine
         }
 
         $data = [];
+        $data['$global-margin']          = ['value' => 'm-12', 'label' => ''];
         $data['$tax']                    = ['value' => '', 'label' => ctrans('texts.tax')];
         $data['$app_url']                = ['value' => $this->generateAppUrl(), 'label' => ''];
         $data['$from']                   = ['value' => '', 'label' => ctrans('texts.from')];
@@ -262,7 +259,7 @@ class HtmlEngine
         
         $logo = $this->company->present()->logo($this->settings);
 
-        $data['$company.logo']                       = ['value' => "<img src='{$logo}' class='h-32' alt='logo'>" ?: '&nbsp;', 'label' => ctrans('texts.logo')];
+        $data['$company.logo']                       = ['value' => $logo ?: '&nbsp;', 'label' => ctrans('texts.logo')];
         $data['$company_logo']                       = &$data['$company.logo'];
         $data['$company1']                           = ['value' => $this->settings->custom_value1 ?: '&nbsp;', 'label' => $this->makeCustomField('company1')];
         $data['$company2']                           = ['value' => $this->settings->custom_value2 ?: '&nbsp;', 'label' => $this->makeCustomField('company2')];
@@ -338,7 +335,7 @@ class HtmlEngine
         return $data;
     }
 
-    private function generateLabelsAndValues() 
+    public function generateLabelsAndValues() 
     {
         $data = [];
 
diff --git a/app/Utils/Traits/MakesInvoiceValues.php b/app/Utils/Traits/MakesInvoiceValues.php
index e5d573c54491..dff878a3d597 100644
--- a/app/Utils/Traits/MakesInvoiceValues.php
+++ b/app/Utils/Traits/MakesInvoiceValues.php
@@ -573,7 +573,7 @@ trait MakesInvoiceValues
      * @param  array  $items The array of invoice items
      * @return array        The formatted array of invoice items
      */
-    private function transformLineItems($items, $table_type = '$product') :array
+    public function transformLineItems($items, $table_type = '$product') :array
     {
         $data = [];
         
diff --git a/database/seeds/RandomDataSeeder.php b/database/seeds/RandomDataSeeder.php
index 10f6b1faad2a..013fe1df92ea 100644
--- a/database/seeds/RandomDataSeeder.php
+++ b/database/seeds/RandomDataSeeder.php
@@ -157,7 +157,7 @@ class RandomDataSeeder extends Seeder
         ]);
 
 
-        factory(\App\Models\Client::class, 10)->create(['user_id' => $user->id, 'company_id' => $company->id])->each(function ($c) use ($user, $company) {
+        factory(\App\Models\Client::class, 1)->create(['user_id' => $user->id, 'company_id' => $company->id])->each(function ($c) use ($user, $company) {
             factory(\App\Models\ClientContact::class, 1)->create([
                 'user_id' => $user->id,
                 'client_id' => $c->id,
@@ -173,10 +173,10 @@ class RandomDataSeeder extends Seeder
         });
 
         /** Product Factory */
-        factory(\App\Models\Product::class, 20)->create(['user_id' => $user->id, 'company_id' => $company->id]);
+        factory(\App\Models\Product::class, 2)->create(['user_id' => $user->id, 'company_id' => $company->id]);
 
         /** Invoice Factory */
-        factory(\App\Models\Invoice::class, 20)->create(['user_id' => $user->id, 'company_id' => $company->id, 'client_id' => $client->id]);
+        factory(\App\Models\Invoice::class, 2)->create(['user_id' => $user->id, 'company_id' => $company->id, 'client_id' => $client->id]);
 
         $invoices = Invoice::all();
         $invoice_repo = new InvoiceRepository();
@@ -225,7 +225,7 @@ class RandomDataSeeder extends Seeder
         });
 
         /*Credits*/
-        factory(\App\Models\Credit::class, 20)->create(['user_id' => $user->id, 'company_id' => $company->id, 'client_id' => $client->id]);
+        factory(\App\Models\Credit::class, 2)->create(['user_id' => $user->id, 'company_id' => $company->id, 'client_id' => $client->id]);
 
         $credits = Credit::cursor();
         $credit_repo = new CreditRepository();
@@ -250,12 +250,12 @@ class RandomDataSeeder extends Seeder
         });
 
         /** Recurring Invoice Factory */
-        factory(\App\Models\RecurringInvoice::class, 10)->create(['user_id' => $user->id, 'company_id' => $company->id, 'client_id' => $client->id]);
+        factory(\App\Models\RecurringInvoice::class, 1)->create(['user_id' => $user->id, 'company_id' => $company->id, 'client_id' => $client->id]);
 
         // factory(\App\Models\Payment::class,20)->create(['user_id' => $user->id, 'company_id' => $company->id, 'client_id' => $client->id, 'settings' => ClientSettings::buildClientSettings($company->settings, $client->settings)]);
 
         /*Credits*/
-        factory(\App\Models\Quote::class, 20)->create(['user_id' => $user->id, 'company_id' => $company->id, 'client_id' => $client->id]);
+        factory(\App\Models\Quote::class, 1)->create(['user_id' => $user->id, 'company_id' => $company->id, 'client_id' => $client->id]);
 
         $quotes = Quote::cursor();
         $quote_repo = new QuoteRepository();
diff --git a/resources/views/pdf-designs/bold.html b/resources/views/pdf-designs/bold.html
index 4a2e7a494981..f8ae4539a63e 100644
--- a/resources/views/pdf-designs/bold.html
+++ b/resources/views/pdf-designs/bold.html
@@ -23,8 +23,8 @@
             <div class="grid grid-cols-12">
                 <div class="absolute col-span-4 p-6 pb-10 bg-white">
                     <img
-                        src="$company-logo"
-                        alt="$company->name logo"
+                        src="$company.logo"
+                        alt="$company.name logo"
                         class="w-24 col-span-4 sm:w-32"
                     />
                 </div>
@@ -36,6 +36,7 @@
                 </div>
             </div>
         </div>
+    </div>
 
         <!-- Client details, entity details -->
         <div class="grid grid-cols-12 gap-4 my-12 ml-12">
diff --git a/resources/views/pdf-designs/business.html b/resources/views/pdf-designs/business.html
index 9508212e1f38..956e98e2bad9 100644
--- a/resources/views/pdf-designs/business.html
+++ b/resources/views/pdf-designs/business.html
@@ -1,54 +1,78 @@
 <!DOCTYPE html>
 <html>
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+        <meta http-equiv="x-ua-compatible" content="ie=edge" />
 
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <link rel="stylesheet" href="$css" />
+    </head>
 
-    <link rel="stylesheet" href="$css">
-</head>
+    <style>
+        thead th:first-child {
+            border-top-left-radius: 0.5rem;
+            border-bottom-left-radius: 0.3rem;
+        }
 
-<style>
-    thead th:first-child {
-        border-top-left-radius: .5rem;
-        border-bottom-left-radius: .3rem;
-    }
+        thead th:last-child {
+            border-top-right-radius: 0.5rem;
+            border-bottom-right-radius: 0.3rem;
+        }
 
-    thead th:last-child {
-        border-top-right-radius: .5rem;
-        border-bottom-right-radius: .3rem;
-    }
-</style>
+        tbody > tr > td:first-child {
+            color: #d03801;
+        }
+    </style>
 
-<body class="$global-margin bg-white break-words antialiased">
-    <!-- Logo, company details & company address -->
-    <div class="flex grid items-start grid-cols-12 gap-4">
-        <img src="$company-logo" alt="$company-name" class="grid w-24 col-span-4 sm:w-32">
-        <div class="grid grid-cols-2 col-span-8 space-x-10 text-gray-700 lg:col-start-8">
-            <div id="company-details" class="col-span-1 text-gray-500"></div>
-            <div id="company-address" class="col-span-1 text-gray-500"></div>
-        </div>
-    </div>
-
-    <!-- Client details, entity details -->
-    <div class="grid grid-cols-12 gap-4 my-12">
-        <div class="col-span-6">
-            <p>$invoice-issued-to</p>
-            <div id="client-details" class="mt-4 text-orange-600"></div>
-        </div>
-        <div class="col-span-6">
-            <div class="h-auto px-4 py-4 bg-orange-600 rounded-lg">
-                <div class="flex justify-between text-white" id="entity-details"></div>
+    <body class="$global-margin bg-white break-words antialiased">
+        <!-- Logo, company details & company address -->
+        <div class="flex grid items-start grid-cols-12 gap-4">
+            <img
+                src="$company.logo"
+                alt="$company.name"
+                class="grid w-24 col-span-4 sm:w-32"
+            />
+            <div
+                class="grid grid-cols-2 col-span-8 space-x-10 text-gray-700 lg:col-start-8"
+            >
+                <div
+                    id="company-details"
+                    class="col-span-1 text-gray-500"
+                ></div>
+                <div
+                    id="company-address"
+                    class="col-span-1 text-gray-500"
+                ></div>
             </div>
         </div>
-    </div>
 
-    <!-- Product table -->
-    <table id="product-table" class="w-full mt-20 rounded table-auto"></table>
+        <!-- Client details, entity details -->
+        <div class="grid grid-cols-12 gap-4 my-12">
+            <div class="col-span-6">
+                <p>$invoice-issued-to</p>
+                <div id="client-details" class="mt-4 text-orange-600"></div>
+            </div>
+            <div class="col-span-6">
+                <div class="h-auto px-4 py-4 bg-orange-600 rounded-lg">
+                    <table
+                        class="flex justify-between text-white"
+                        id="entity-details"
+                    ></table>
+                </div>
+            </div>
+        </div>
 
-    <!-- Balance due card -->
-    <div class="grid grid-cols-12 my-12">
+        <!-- Product table -->
+        <table
+            id="product-table"
+            class="w-full mt-20 rounded table-auto"
+        ></table>
+
+        <!-- Balance due card -->
+        <!-- <div class="grid grid-cols-12 my-12">
         <div class="col-span-6">
             <p class="font-semibold">$terms-label</p>
             <p>$terms</p>
@@ -61,7 +85,6 @@
                 </div>
             </div>
         </div>
-    </div>
-</body>
-
-</html>
\ No newline at end of file
+    </div> -->
+    </body>
+</html>
diff --git a/resources/views/pdf-designs/clean.html b/resources/views/pdf-designs/clean.html
index a33a77bd8cda..84b636873b8d 100644
--- a/resources/views/pdf-designs/clean.html
+++ b/resources/views/pdf-designs/clean.html
@@ -1,37 +1,48 @@
 <!DOCTYPE html>
 <html>
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+        <meta http-equiv="x-ua-compatible" content="ie=edge" />
 
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <link rel="stylesheet" href="$css" />
+    </head>
 
-    <link rel="stylesheet" href="$css">
-</head>
+    <style>
+        #product-table tbody > tr:nth-child(even) {
+            background-color: #f7fafc;
+        }
+    </style>
 
-<style>
-    #product-table tr:nth-child(even) {
-        background-color: #f7fafc;
-    }
-</style>
-
-<body class="$global-margin bg-white break-words antialiased">
-    <!-- Company logo, company details -->
-    <div class="grid grid-cols-12 px-2">
-        <img src="$company-logo" alt="$company-name logo" class="grid w-24 col-span-4 sm:w-32">
-        <div class="grid grid-cols-2 col-span-8 text-gray-700 lg:col-span-6">
-            <div id="company-details" class="col-span-1"></div>
-            <div id="company-address" class="col-span-1"></div>
+    <body class="$global-margin bg-white break-words antialiased">
+        <!-- Company logo, company details -->
+        <div class="grid grid-cols-12 px-2">
+            <img
+                src="$company_logo"
+                alt="$company_name logo"
+                class="grid w-24 col-span-4 sm:w-32"
+            />
+            <div
+                class="grid grid-cols-2 col-span-8 text-gray-700 lg:col-span-6"
+            >
+                <div id="company-details" class="col-span-1"></div>
+                <div id="company-address" class="col-span-1"></div>
+            </div>
         </div>
-    </div>
 
-    <!-- Entity labels, client details -->
-    <p class="mt-10 text-xl text-blue-500 uppercase">$entity</p>
-    <div class="grid grid-cols-12 px-2 py-3 mt-4 border-t border-b">
-        <table class="col-span-6 lg:col-span-5" id="entity-details"></table>
-        <div id="client-details" class="col-span-6"></div>
-    </div>
+        <!-- Entity labels, client details -->
+        <p class="mt-10 text-xl text-blue-500 uppercase">$entity</p>
+        <div class="grid grid-cols-12 px-2 py-3 mt-4 border-t border-b">
+            <div class="col-span-6">
+                <table id="entity-details"></table>
+            </div>
+            <div id="client-details" class="col-span-6"></div>
+        </div>
 
-    <!-- Product table -->
-    <table id="product-table" class="table-auto"></table>
-</body>
\ No newline at end of file
+        <!-- Product table -->
+        <table id="product-table" class="table-auto mt-12 w-full"></table>
+    </body>
+</html>
diff --git a/resources/views/pdf-designs/creative.html b/resources/views/pdf-designs/creative.html
index 3f15dda7ec20..f9b247a992d1 100644
--- a/resources/views/pdf-designs/creative.html
+++ b/resources/views/pdf-designs/creative.html
@@ -38,8 +38,8 @@
             <!-- Logo -->
             <div class="flex flex-col items-end col-span-4">
                 <img
-                    src="$company-logo"
-                    alt="$company-name logo"
+                    src="$company.logo"
+                    alt="$company.name logo"
                     class="w-24 col-span-4 sm:w-32"
                 />
             </div>
diff --git a/resources/views/pdf-designs/elegant.html b/resources/views/pdf-designs/elegant.html
index c1177ca7b606..120e9891d5a4 100644
--- a/resources/views/pdf-designs/elegant.html
+++ b/resources/views/pdf-designs/elegant.html
@@ -9,10 +9,6 @@
         <meta http-equiv="x-ua-compatible" content="ie=edge" />
 
         <link rel="stylesheet" href="$css" />
-        <link
-            href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
-            rel="stylesheet"
-        />
     </head>
 
     <body class="$global-margin antialiased bg-white break-words">
@@ -20,8 +16,8 @@
         <div class="grid grid-cols-12 gap-4 pb-6 border-b-4 border-black">
             <div class="col-span-6">
                 <img
-                    src="$company-logo"
-                    alt="$company-name logo"
+                    src="$company.logo"
+                    alt="$company.name logo"
                     class="w-24 col-span-4 sm:w-32"
                 />
             </div>
diff --git a/resources/views/pdf-designs/hipster.html b/resources/views/pdf-designs/hipster.html
index a22732965dcf..f9e7b2b89f0f 100644
--- a/resources/views/pdf-designs/hipster.html
+++ b/resources/views/pdf-designs/hipster.html
@@ -30,16 +30,21 @@
             </div>
             <div class="col-span-3">
                 <img
-                    src="$company-logo"
-                    alt="$company-name logo"
+                    src="$company.logo"
+                    alt="$company.name logo"
                     class="w-24 col-span-4 sm:w-32"
                 />
             </div>
         </div>
 
         <!-- Entity details -->
-        <h1 class="mt-6 text-4xl font-semibold uppercase lg:text-6xl">$entity</h1>
-        <div id="entity-details" class="flex items-center space-x-6"></div>
+        <h1 class="mt-6 text-4xl font-semibold uppercase lg:text-5xl">
+            $entity
+        </h1>
+        <div
+            id="entity-details"
+            class="flex flex-wrap items-center space-x-4"
+        ></div>
 
         <!-- Product table -->
         <table id="product-table" class="w-full mt-10 table-auto"></table>
diff --git a/resources/views/pdf-designs/modern.html b/resources/views/pdf-designs/modern.html
index 63f540fcd9c5..4807d549b3ef 100644
--- a/resources/views/pdf-designs/modern.html
+++ b/resources/views/pdf-designs/modern.html
@@ -1,51 +1,60 @@
 <!DOCTYPE html>
 <html>
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+        <meta http-equiv="x-ua-compatible" content="ie=edge" />
 
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <link rel="stylesheet" href="$css" />
+    </head>
 
-    <link rel="stylesheet" href="$css">
-</head>
-
-<body class="antialiased break-words bg-white">
-    <!-- Company name, entity details -->
-    <div class="bg-orange-600">
-        <div class="$global-padding">
-            <div class="grid grid-cols-12">
-                <div class="col-span-4">
-                    <h1 class="text-3xl font-bold text-white lg:text-4xl">$company-name</h1>
-                </div>
-                <div class="col-span-7 col-start-6 lg:col-start-7">
-                    <table id="entity-details" class="text-white"></table>
+    <body class="antialiased break-words bg-white">
+        <!-- Company name, entity details -->
+        <div class="bg-orange-600">
+            <div class="$global-padding">
+                <div class="grid grid-cols-12">
+                    <div class="col-span-4">
+                        <h1 class="text-3xl font-bold text-white lg:text-4xl">
+                            $company.name
+                        </h1>
+                    </div>
+                    <div class="col-span-7 col-start-6 lg:col-start-7">
+                        <table id="entity-details" class="text-white"></table>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
 
-    <div class="$global-margin">
-        <!-- Company logo, client details -->
-        <div class="grid grid-cols-12">
-            <img src="$company-logo" alt="$company-name logo" class="grid w-24 col-span-4 sm:w-32">
-            <div id="client-details" class="col-span-8 col-start-6"></div>
+        <div class="$global-margin">
+            <!-- Company logo, client details -->
+            <div class="grid grid-cols-12">
+                <img
+                    src="$company.logo"
+                    alt="$company.name logo"
+                    class="grid w-24 col-span-4 sm:w-32"
+                />
+                <div id="client-details" class="col-span-8 col-start-6"></div>
+            </div>
+
+            <!-- Product table -->
+            <table id="product-table" class="w-full mt-8 table-auto"></table>
         </div>
 
-        <!-- Product table -->
-        <table id="product-table" class="w-full mt-8 table-auto"></table>
-    </div>
-
-    <!-- Company details -->
-    <div class="bg-orange-600">
-        <div class="$global-padding">
-            <div class="grid grid-cols-12">
-                <div class="flex justify-between col-span-8 col-start-6 lg:col-span-6 lg:col-start-8">
-                    <div id="company-details" class="text-white"></div>
-                    <div id="company-address" class="text-white"></div>
+        <!-- Company details -->
+        <div class="bg-orange-600">
+            <div class="$global-padding">
+                <div class="grid grid-cols-12">
+                    <div
+                        class="flex justify-between col-span-8 col-start-6 lg:col-span-6 lg:col-start-8"
+                    >
+                        <div id="company-details" class="text-white"></div>
+                        <div id="company-address" class="text-white"></div>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-</body>
-
-</html>
\ No newline at end of file
+    </body>
+</html>
diff --git a/resources/views/pdf-designs/plain.html b/resources/views/pdf-designs/plain.html
index 45950ea3b96d..55af58327409 100644
--- a/resources/views/pdf-designs/plain.html
+++ b/resources/views/pdf-designs/plain.html
@@ -14,12 +14,12 @@
     <body class="$global-margin antialiased break-words bg-white">
         <!-- Company name, company address, company logo -->
         <div class="grid grid-cols-12 gap-4">
-            <div class="col-span-4">$company-name</div>
+            <div class="col-span-4">$company.name</div>
             <div class="col-span-4" id="company-address"></div>
             <div class="col-span-4">
                 <img
-                    src="$company-logo"
-                    alt="$company->name logo"
+                    src="$company.logo"
+                    alt="$company.name logo"
                     class="block w-24 col-span-4 sm:w-32"
                 />
             </div>
@@ -27,13 +27,13 @@
 
         <!-- Entity details -->
         <div class="grid grid-cols-12">
-            <div class="col-span-6 col-start-8 mt-10">
+            <div class="col-span-6 col-start-6 mt-12">
                 <table class="flex justify-between" id="entity-details"></table>
             </div>
         </div>
 
         <!-- Client details -->
-        <div class="grid grid-cols-12">
+        <div class="grid grid-cols-12 mt-12">
             <div class="col-span-6" id="client-details"></div>
         </div>
 
diff --git a/resources/views/pdf-designs/playful.html b/resources/views/pdf-designs/playful.html
index 9dcf6241a1ec..1c0dd74ef079 100644
--- a/resources/views/pdf-designs/playful.html
+++ b/resources/views/pdf-designs/playful.html
@@ -9,10 +9,6 @@
         <meta http-equiv="x-ua-compatible" content="ie=edge" />
 
         <link rel="stylesheet" href="$css" />
-        <link
-            href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
-            rel="stylesheet"
-        />
     </head>
 
     <style>
@@ -21,6 +17,7 @@
         }
         
         #product-table tbody > tr > td:last-child {
+            color: #9b2c2c;
             font-weight: bold;
         }
     </style>
@@ -30,12 +27,12 @@
         <div class="grid grid-cols-12 gap-4">
             <div class="col-span-4">
                 <img
-                    src="$company-logo"
-                    alt="$company-name logo"
+                    src="$company.logo"
+                    alt="$company.name logo"
                     class="w-24 col-span-4 sm:w-32"
                 />
             </div>
-            <div class="col-span-5 col-start-8 p-5 bg-teal-600 rounded-lg">
+            <div class="col-span-6 col-start-7 p-5 bg-teal-600 rounded-lg">
                 <table id="entity-details" class="text-white"></table>
             </div>
         </div>
diff --git a/tests/Feature/PdfMaker/ExampleIntegrationTest.php b/tests/Feature/PdfMaker/ExampleIntegrationTest.php
new file mode 100644
index 000000000000..e6949528c3d8
--- /dev/null
+++ b/tests/Feature/PdfMaker/ExampleIntegrationTest.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace Tests\Feature\PdfMaker;
+
+use App\Models\Invoice;
+use App\Services\PdfMaker\Designs\Playful;
+use App\Services\PdfMaker\PdfMaker;
+use App\Utils\HtmlEngine;
+use App\Utils\Traits\MakesInvoiceValues;
+use Tests\TestCase;
+
+class ExampleIntegrationTest extends TestCase
+{
+    use MakesInvoiceValues;
+
+    public function testExample()
+    {
+        $invoice = Invoice::first();
+        $invitation = $invoice->invitations()->first();
+
+        $engine = new HtmlEngine($invitation, 'invoice');
+        $design = new Playful();
+
+        $product_table_columns = json_decode(
+            json_encode($invoice->company->settings->pdf_variables),
+            1
+        )['product_columns'];
+
+        $state = [
+            'template' => $design->elements([
+                'client' => $invoice->client,
+                'entity' => $invoice,
+                'product-table-columns' => $product_table_columns,
+            ]),
+            'variables' => $engine->generateLabelsAndValues(),
+        ];
+
+        $maker = new PdfMaker($state, 'invoice');
+
+        $maker
+            ->design(Playful::class)
+            ->build();
+
+        exec('echo "" > storage/logs/laravel.log');
+
+        info($maker->getCompiledHTML(true));
+
+        $this->assertTrue(true);
+    }
+}
diff --git a/tests/Feature/PdfMaker/PdfMakerDesignsTest.php b/tests/Feature/PdfMaker/PdfMakerDesignsTest.php
index da5c5da2ed9f..4858957741d4 100644
--- a/tests/Feature/PdfMaker/PdfMakerDesignsTest.php
+++ b/tests/Feature/PdfMaker/PdfMakerDesignsTest.php
@@ -707,7 +707,7 @@ class PdfMakerDesignsTest extends TestCase
         $this->assertTrue(true);
     }
 
-    public function testElegant()
+public function testElegant()
     {
         $state = [
             'template' => [
@@ -799,7 +799,7 @@ class PdfMakerDesignsTest extends TestCase
                                 ['element' => 'td', 'content' => '$2.00', 'properties' => ['class' => 'px-4 py-2 text-right']],
                             ]],
                             ['element' => 'tr', 'content' => '', 'properties' => ['class' => 'mt-8 px-4 py-2'], 'elements' => [
-                                ['element' => 'td', 'content' => 'Balance due', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '4']],
+                            ['element' => 'td', 'content' => 'Balance due', 'properties' => ['class' => 'border-l-4 border-white px-4 text-right', 'colspan' => '4']],
                                 ['element' => 'td', 'content' => '$2.00', 'properties' => ['class' => 'px-4 py-2 text-right']],
                             ]],
                         ]],
@@ -999,7 +999,7 @@ class PdfMakerDesignsTest extends TestCase
                             ['element' => 'th', 'content' => 'Line total', 'properties' => ['class' => 'font-semibold text-white px-4 py-3']],
                         ]],
                         ['element' => 'tbody', 'content' => '', 'elements' => [
-                            ['element' => 'tr', 'content' => '', 'properties' => ['class' => 'border-b-2 border-teal-600 '], 'elements' => [
+                            ['element' => 'tr', 'content' => '', 'properties' => ['class' => 'border-b-2 border-teal-600'], 'elements' => [
                                 ['element' => 'td', 'content' => 'Painting service', 'properties' => ['class' => 'px-4 py-4']],
                                 ['element' => 'td', 'content' => '25 hours of painting', 'properties' => ['class' => 'px-4 py-4']],
                                 ['element' => 'td', 'content' => '885.00', 'properties' => ['class' => 'px-4 py-4']],