diff --git a/config/ninja.php b/config/ninja.php
index 085a22d5b291..8f8d544ce5f4 100644
--- a/config/ninja.php
+++ b/config/ninja.php
@@ -130,6 +130,6 @@ return [
         'npm_path' => env('NPM_PATH', false)
     ],
     'designs' => [
-        'base_path' => resource_path('views/pdf-designs/new/'),
+        'base_path' => resource_path('views/pdf-designs/'),
     ],
 ];
diff --git a/resources/views/pdf-designs/bold.html b/resources/views/pdf-designs/bold.html
index 20ad3a369a34..1cf41f0eb7ca 100644
--- a/resources/views/pdf-designs/bold.html
+++ b/resources/views/pdf-designs/bold.html
@@ -1,77 +1,140 @@
 <!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" />
-
-        <link rel="stylesheet" href="$app_url/css/tailwindcss@1.4.6.css" />
+<html lang="en">
+    <head id="head">
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     </head>
 
-    <style>
-        tbody > tr:nth-child(even) {
-            background-color: #edf2f7;
+    <style id="style">
+        * {
+            margin: 0;
+            padding: 0;
+            font-size: 14px;
         }
 
-        /** Required for proper margins on print **/
-        @page {
-            margin-bottom: 8.5mm;
+        body {
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            font-family: Arial, Helvetica, sans-serif;
         }
 
-        /** Custom CSS goes here.. */
+        @media print {
+            body {
+                margin-top: 0;
+                margin-right: 0;
+            }
+        }
+        .header-wrapper {
+            display: grid;
+            grid-template-columns: 1.5fr 1fr 1fr;
+            background-color: #2d2c2a;
+            padding: 3rem;
+            color: white;
+        }
+
+        .company-logo {
+            height: 6rem;
+            padding: 2rem;
+            background-color: white;
+            margin: 2rem;
+            margin-top: -4rem;
+        }
+
+        #company-details,
+        #company-address {
+            display: flex;
+            flex-direction: column;
+        }
+
+        #client-details {
+            margin: 2rem;
+            display: flex;
+            flex-direction: column;
+        }
+        #client-details > :first-child {
+            font-weight: bold;
+        }
+
+        .client-entity-wrapper {
+            display: grid;
+            grid-template-columns: 1.5fr 1fr;
+        }
+
+        .entity-details-wrapper {
+            background-color: #35a39a;
+            padding: 1rem;
+        }
+
+        #entity-details {
+            width: 100%;
+            text-align: left;
+            color: white !important;
+        }
+        #entity-details > tr,
+        #entity-details th {
+            font-weight: normal;
+            padding-bottom: 0.5rem;
+        }
+
+        #product-table {
+            min-width: 100%;
+            table-layout: fixed;
+            overflow-wrap: break-word;
+            margin-top: 3rem;
+        }
+        #product-table > thead {
+            text-align: left;
+        }
+        #product-table > thead > tr > th {
+            padding: 2rem;
+            font-size: 1.5rem;
+        }
+        #product-table > tbody > tr > td {
+            padding: 1.5rem;
+        }
+        #product-table > tbody > tr > td:first-child {
+            font-weight: bold;
+        }
+        #product-table > tbody > tr:nth-child(odd) {
+            background-color: #ebebeb;
+        }
+        #product-table > tfoot > tr > td {
+            padding: 1.5rem;
+        }
+        #product-table > tfoot [data-element='balance-due-label'],
+        #product-table > tfoot [data-element='balance-due'] {
+            font-weight: bold;
+            font-size: 1.4rem;
+        }
+        #product-table > tfoot [data-element='balance-due'] {
+            color: #35a39a;
+        }
     </style>
 
-    <body class="antialiased break-words bg-white">
-        <!-- Company logo, company details -->
-        <div class="$global-padding static bg-gray-800" id="header">
-            <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"
-                        class="w-24 col-span-4 sm:w-32"
-                    />
-                </div>
-                <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>
+    <body id="body">
+        <div class="header-wrapper" id="header">
+            <div> <!-- Empty space placeholder--> </div>
+
+            <div id="company-details"></div>
+            <div id="company-address"></div>
+        </div>
+
+        <img
+            class="company-logo"
+            src="$company.logo"
+            alt="$company.name logo"
+        />
+
+        <div class="client-entity-wrapper">
+            <div id="client-details" cellspacing="0"></div>
+
+            <div class="entity-details-wrapper">
+                <table id="entity-details"></table>
             </div>
         </div>
 
-        <!-- Client details, entity details -->
-        <div class="grid grid-cols-12 gap-4 my-12 ml-12">
-            <div class="col-span-6">
-                <h2
-                    class="text-2xl font-semibold tracking-tight text-teal-600 uppercase"
-                >
-                    $your_entity_label
-                </h2>
-                <div id="client-details" class="mt-4"></div>
-            </div>
-            <div class="col-span-6">
-                <div class="h-auto px-4 py-4 bg-teal-600">
-                    <table
-                        class="flex justify-between text-white"
-                        id="entity-details"
-                    ></table>
-                </div>
-            </div>
-        </div>
+        <table id="product-table" cellspacing="0"></table>
 
-        <!-- Product table -->
-        <div class="$global-margin">
-            <table
-                id="product-table"
-                class="w-full table-auto mt-8 $table-padding"
-            ></table>
-        </div>
+        <footer id="footer"></footer>
     </body>
-
-    <footer id="footer"></footer>
 </html>
diff --git a/resources/views/pdf-designs/business.html b/resources/views/pdf-designs/business.html
index cacb98c049db..654f611a9e3a 100644
--- a/resources/views/pdf-designs/business.html
+++ b/resources/views/pdf-designs/business.html
@@ -1,84 +1,165 @@
 <!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" />
+<html lang="en">
+    <head id="head">
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <link rel="stylesheet" href="$app_url/css/tailwindcss@1.4.6.css" />
+        <style>
+            body {
+                margin: 2rem;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                font-family: Arial, Helvetica, sans-serif;
+            }
+
+            .header-container {
+                display: grid;
+                grid-template-columns: 1.8fr 1fr 1fr;
+                grid-gap: 20px;
+            }
+            .header-container > span {
+                display: block;
+            }
+
+            .company-logo {
+                height: 4rem;
+            }
+
+            #company-details {
+                display: flex;
+                flex-direction: column;
+                color: #b1b1b1;
+            }
+            #company-details > * {
+                margin-bottom: 0.8rem;
+            }
+
+            #company-address {
+                display: flex;
+                flex-direction: column;
+                color: #b1b1b1;
+            }
+            #company-address > * {
+                margin-bottom: 0.8rem;
+            }
+
+            .entity-issued-to {
+                margin-top: 3rem;
+                font-weight: bold;
+            }
+
+            .client-and-entity-wrapper {
+                display: grid;
+                grid-template-columns: 2fr 1.5fr;
+                gap: 20px;
+            }
+
+            #client-details {
+                display: flex;
+                flex-direction: column;
+                color: #ec782f;
+            }
+            #client-details > * {
+                margin-bottom: 0.5rem;
+            }
+            #client-details > span:nth-child(1) {
+                font-weight: bold;
+            }
+
+            #entity-details {
+                background-color: #ec782f;
+                padding: 0.8rem;
+                border-radius: 1rem;
+                width: 100%;
+                color: white;
+                text-align: left;
+            }
+            #entity-details th {
+                font-weight: normal;
+            }
+
+            #product-table {
+                margin-top: 3.5rem;
+                min-width: 100%;
+                table-layout: fixed;
+                overflow-wrap: break-word;
+            }
+            #product-table > thead {
+                text-align: left;
+                background: #394e6b;
+            }
+            #product-table > thead > tr > th {
+                padding: 1rem;
+                color: white;
+                font-weight: semibold;
+            }
+            #product-table > thead > tr > th:first-child {
+                border-top-left-radius: 1rem;
+            }
+            #product-table > thead > tr > th:last-child {
+                border-top-right-radius: 1rem;
+            }
+            #product-table > tbody > tr > td {
+                padding: 1rem;
+            }
+            #product-table > tbody > tr:nth-child(odd) > td {
+                background: #e8e8e8;
+            }
+            #product-table > tbody > tr:nth-child(even) > td {
+                background: #f7f7f7;
+            }
+            #product-table > tfoot > tr > td {
+                padding: 1rem;
+                background: #e8e8e8;
+            }
+            #product-table > tfoot > tr:nth-last-child(1) > td:first-child {
+                border-bottom-left-radius: 1rem;
+            }
+            #product-table > tfoot > tr:nth-last-child(1) > td:last-child {
+                border-bottom-right-radius: 1rem;
+            }
+            #product-table > tfoot > td {
+                border: none !important;
+            }
+
+            [data-element='product-table-balance-due-label'],
+            [data-element='product-table-balance-due'] {
+                color: #394e6b !important;
+                font-weight: bold !important;
+            }
+
+            @media print {
+                body {
+                    margin-top: 0;
+                    margin-right: 0;
+                }
+            }
+        </style>
     </head>
 
-    <style>
-        thead th:first-child {
-            border-top-left-radius: 0.5rem;
-            border-bottom-left-radius: 0.3rem;
-        }
-
-        thead th:last-child {
-            border-top-right-radius: 0.5rem;
-            border-bottom-right-radius: 0.3rem;
-        }
-
-        tbody > tr > td:first-child {
-            color: #d03801;
-        }
-
-        /** Required for proper margins on print **/
-        @page {
-            margin-top: 8.5mm;
-            margin-bottom: 8.5mm;
-        }
-
-        /** Custom CSS goes here.. */
-    </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" id="header">
+    <body id="body">
+        <div class="header-container" id="header">
             <img
                 src="$company.logo"
-                alt="$company.name"
-                class="grid w-24 col-span-4 sm:w-32"
+                class="company-logo"
+                alt="$company.name logo"
             />
-            <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 id="company-details"></div>
+            <div id="company-address"></div>
+        </div>
+
+        <p class="entity-issued-to">$entity_issued_to_label:</p>
+        <div class="client-and-entity-wrapper">
+            <div id="client-details"></div>
+
+            <div class="entity-details-wrapper">
+                <table id="entity-details" cellspacing="0"></table>
             </div>
         </div>
 
-        <!-- Client details, entity details -->
-        <div class="grid grid-cols-12 gap-4 my-12">
-            <div class="col-span-6">
-                <p>$entity_issued_to_label</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>
+        <table id="product-table" cellspacing="0"></table>
 
-        <!-- Product table -->
-        <table
-            id="product-table"
-            class="w-full mt-20 rounded table-auto $table-padding"
-        ></table>
+        <footer id="footer"></footer>
     </body>
-
-    <footer id="footer"></footer>
 </html>
diff --git a/resources/views/pdf-designs/clean.html b/resources/views/pdf-designs/clean.html
index c896817308a3..83aa11bd745c 100644
--- a/resources/views/pdf-designs/clean.html
+++ b/resources/views/pdf-designs/clean.html
@@ -1,61 +1,138 @@
+<!-- Template: Clean -->
 <!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" />
+<html lang="en">
+    <head id="head">
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <link rel="stylesheet" href="$app_url/css/tailwindcss@1.4.6.css" />
+        <style id="style">
+            body {
+                margin: 2rem;
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                font-family: Arial, Helvetica, sans-serif;
+            }
+
+            @media print {
+                body {
+                    margin-top: 0;
+                    margin-right: 0;
+                }
+            }
+            .header-container {
+                display: grid;
+                grid-template-columns: 1fr 1fr 1fr;
+                gap: 20px;
+            }
+            .header-container .company-logo {
+                height: 4rem;
+            }
+
+            #company-details {
+                display: flex;
+                flex-direction: column;
+                color: #9f9f9f;
+            }
+            #company-details > span:first-child {
+                color: #67b1cc;
+            }
+
+            #company-address {
+                display: flex;
+                flex-direction: column;
+                color: #9f9f9f;
+            }
+
+            .entity-label {
+                text-transform: uppercase;
+                margin-top: 3.5rem;
+                font-weight: semibold;
+                color: #67b1cc;
+            }
+
+            .client-and-entity-wrapper {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                padding-left: 1rem;
+                padding-right: 1rem;
+                padding-top: 1rem;
+                padding-bottom: 1rem;
+                border-top: 1px solid #9f9f9f;
+                border-bottom: 1px solid #9f9f9f;
+            }
+
+            #entity-details {
+                text-align: left;
+            }
+            #entity-details > tr,
+            #entity-details th {
+                font-weight: normal;
+            }
+
+            #client-details {
+                display: flex;
+                flex-direction: column;
+            }
+            #client-details > :first-child {
+                font-weight: bold;
+            }
+
+            #product-table {
+                margin-top: 3rem;
+                min-width: 100%;
+                table-layout: fixed;
+                overflow-wrap: break-word;
+            }
+            #product-table > thead {
+                text-align: left;
+            }
+            #product-table > thead > tr > th {
+                font-size: 1.1rem;
+                padding-bottom: 1.5rem;
+                padding-left: 1rem;
+            }
+            #product-table > tbody > tr > td {
+                border-bottom: 1px solid #9f9f9f;
+                padding: 1rem;
+            }
+            #product-table > tbody > tr > td:first-child {
+                color: #67b1cc;
+            }
+            #product-table > tbody > tr:nth-child(odd) {
+                background-color: #f5f5f5;
+            }
+            #product-table > tfoot > tr > td {
+                padding: 1rem;
+            }
+            #product-table > tfoot [data-element='balance-due'] {
+                color: #67b1cc;
+                font-weight: bold;
+            }
+        </style>
     </head>
 
-    <style>
-        #product-table tbody > tr:nth-child(even) {
-            background-color: #f7fafc;
-        }
-
-        /** Required for proper margins on print **/
-        @page {
-            margin-top: 8.5mm;
-            margin-bottom: 8.5mm;
-        }
-
-        /** Custom CSS goes here.. */
-    </style>
-
-    <body class="$global-margin bg-white break-words antialiased">
-        <!-- Company logo, company details -->
-        <div class="grid grid-cols-12 px-2" id="header">
+    <body id="body">
+        <div class="header-container" id="header">
             <img
-                src="$company_logo"
-                alt="$company_name logo"
-                class="grid w-24 col-span-4 sm:w-32"
+                class="company-logo"
+                src="$company.logo"
+                alt="$company.name logo"
             />
-            <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 id="company-details"></div>
+            <div id="company-address"></div>
         </div>
 
-        <!-- Entity labels, client details -->
-        <p class="px-2 mt-10 text-xl text-blue-500 uppercase">$entity_label</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>
+        <p class="entity-label">$entity_label</p>
+        <div class="client-and-entity-wrapper">
+            <table id="entity-details" cellspacing="0"></table>
+
+            <div id="client-details"></div>
         </div>
 
-        <!-- Product table -->
-        <table
-            id="product-table"
-            class="table-auto w-full mt-12 $table-padding"
-        ></table>
+        <!-- product_table -->
+        <table id="product-table" cellspacing="0"></table>
+
+        <footer id="footer"></footer>
     </body>
-
-    <footer id="footer"></footer>
 </html>
diff --git a/resources/views/pdf-designs/creative.html b/resources/views/pdf-designs/creative.html
index 8791b762df2d..e5898090f2f1 100644
--- a/resources/views/pdf-designs/creative.html
+++ b/resources/views/pdf-designs/creative.html
@@ -1,77 +1,136 @@
 <!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" />
+<html lang="en">
+    <head id="head">
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <link rel="stylesheet" href="$app_url/css/tailwindcss@1.4.6.css" />
+        <style id="style">
+            * {
+                margin: 0;
+                padding: 0;
+                font-size: 14px;
+            }
+
+            body {
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                font-family: Arial, Helvetica, sans-serif;
+            }
+
+            @media print {
+                body {
+                    margin: 0;
+                    padding: 0;
+                }
+            }
+            body {
+                margin: 2rem;
+            }
+
+            .header-wrapper {
+                display: grid;
+                grid-template-columns: 1fr 1fr 1fr;
+                gap: 20px;
+            }
+            .header-wrapper .company-logo {
+                height: 5rem;
+            }
+            .header-wrapper #client-details,
+            .header-wrapper #company-details,
+            .header-wrapper #company-address {
+                display: flex;
+                flex-direction: column;
+            }
+            .header-wrapper #client-details > *:first-child {
+                font-weight: bold;
+            }
+            .header-wrapper .company-info-wrapper > * {
+                margin-bottom: 1rem;
+            }
+
+            .entity-label-wrapper {
+                display: grid;
+                grid-template-columns: 2fr 1fr;
+                margin-top: 3rem;
+            }
+            .entity-label-wrapper .entity-label > * {
+                font-size: 3rem;
+            }
+            .entity-label-wrapper .entity-label > *:first-child {
+                text-transform: uppercase;
+            }
+            .entity-label-wrapper .entity-label > *:last-child {
+                color: #b21c53;
+                font-style: italic;
+            }
+            .entity-label-wrapper #entity-details {
+                text-align: left;
+            }
+            .entity-label-wrapper #entity-details > tr,
+            .entity-label-wrapper #entity-details th {
+                font-weight: normal;
+            }
+
+            #product-table {
+                margin-top: 3rem;
+                min-width: 100%;
+                table-layout: fixed;
+                overflow-wrap: break-word;
+                border-top: 5px solid #b21c53;
+            }
+            #product-table > thead {
+                text-align: left;
+            }
+            #product-table > thead > tr > th {
+                font-size: 1.1rem;
+                padding: 1rem;
+            }
+            #product-table > tbody > tr > td {
+                padding: 1rem;
+            }
+            #product-table > tbody > tr:nth-child(odd) {
+                background-color: #e8e8e8;
+            }
+            #product-table > tfoot > tr > td {
+                padding: 1rem;
+            }
+            #product-table > tfoot > tr:last-child > td {
+                border-top: 5px solid #b21c53;
+            }
+            #product-table > tfoot [data-element='product-table-balance-due'] {
+                color: #b21c53;
+                font-weight: bold;
+            }
+        </style>
     </head>
 
-    <style>
-        #product-table tbody > tr:nth-child(even) {
-            background-color: #edf2f7;
-        }
+    <body id="body">
+        <div class="header-wrapper" id="header">
+            <div id="client-details"></div>
 
-        #product-table tbody > tr:nth-child(odd) {
-            background-color: #f7fafc;
-        }
-
-        /** Required for proper margins on print **/
-        @page {
-            margin-top: 8.5mm;
-            margin-bottom: 8.5mm;
-        }
-
-        /** Custom CSS goes here.. */
-    </style>
-
-    <body class="$global-margin antialiased bg-white break-words">
-        <!-- Client details, company details, company logo -->
-        <div class="grid grid-cols-12 gap-4" id="header">
-            <!-- Client details -->
-            <div class="col-span-4">
-                <div id="client-details"></div>
-            </div>
-
-            <!-- Company details -->
-            <div class="flex flex-col col-span-4 space-y-4">
+            <div class="company-info-wrapper">
                 <div id="company-details"></div>
                 <div id="company-address"></div>
             </div>
 
-            <!-- Logo -->
-            <div class="flex flex-col items-end col-span-4">
-                <img
-                    src="$company.logo"
-                    alt="$company.name logo"
-                    class="w-24 col-span-4 sm:w-32"
-                />
-            </div>
+            <img
+                class="company-logo"
+                src="$company.logo"
+                alt="$company.name logo"
+            />
         </div>
 
-        <!-- Entity label, entity details -->
-        <div class="grid grid-cols-12 mt-10">
-            <!-- Entity number -->
-            <div class="col-span-4 text-3xl font-semibold uppercase">
-                <span>$entity_label</span>
-                <i class="text-pink-700">#$entity_number</i>
-            </div>
+        <div class="entity-label-wrapper">
+            <h1 class="entity-label">
+                <span>$entity_label</span>&nbsp;
+                <span>#$entity_number</span>
+            </h1>
 
-            <!-- Entity labels -->
-            <div class="flex flex-col items-end col-span-8">
-                <table id="entity-details"></table>
-            </div>
+            <table id="entity-details" cellspacing="0"></table>
         </div>
 
-        <table
-            id="product-table"
-            class="w-full mt-10 border-t-4 border-pink-700 table-auto $table-padding"
-        ></table>
+        <table id="product-table" cellspacing="0"></table>
+
+        <footer id="footer"></footer>
     </body>
-
-    <footer id="footer"></footer>
 </html>
diff --git a/resources/views/pdf-designs/elegant.html b/resources/views/pdf-designs/elegant.html
index 29ac17026549..64a50ad9ef8f 100644
--- a/resources/views/pdf-designs/elegant.html
+++ b/resources/views/pdf-designs/elegant.html
@@ -1,75 +1,162 @@
 <!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" />
+<html lang="en">
+    <head id="head">
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <link rel="stylesheet" href="$app_url/css/tailwindcss@1.4.6.css" />
+        <style id="style">
+            * {
+                margin: 0;
+                padding: 0;
+                font-size: 14px;
+            }
+
+            body {
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                font-family: Arial, Helvetica, sans-serif;
+            }
+
+            @media print {
+                body {
+                    margin: 0;
+                    padding: 0;
+                }
+            }
+            body {
+                margin: 2rem;
+            }
+
+            .company-logo-wrapper {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                padding-bottom: 2.5rem;
+                border-bottom: 4px solid;
+            }
+            .company-logo-wrapper .company-logo {
+                height: 5rem;
+            }
+
+            .double-border {
+                margin-top: 3px;
+                border-color: black;
+            }
+
+            .client-entity-wrapper {
+                display: grid;
+                grid-template-columns: 1.8fr 1.2fr;
+                margin-top: 3rem;
+                gap: 10px;
+            }
+            .client-entity-wrapper .wrapper-info-text {
+                display: block;
+                font-size: 1.5rem;
+                font-weight: normal;
+            }
+            .client-entity-wrapper .wrapper-left-side {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+            }
+            .client-entity-wrapper .wrapper-left-side #client-details,
+            .client-entity-wrapper .wrapper-left-side #company-details,
+            .client-entity-wrapper .wrapper-left-side #company-address {
+                display: flex;
+                flex-direction: column;
+                margin-top: 0.5rem;
+            }
+            .client-entity-wrapper .wrapper-left-side .company-info {
+                border-left: 1px solid;
+                padding-left: 1rem;
+            }
+            .client-entity-wrapper #entity-details {
+                text-align: left;
+                margin-top: 0.5rem;
+                min-width: 100%;
+            }
+            .client-entity-wrapper #entity-details > tr,
+            .client-entity-wrapper #entity-details th {
+                font-weight: normal;
+            }
+
+            #product-table {
+                margin-top: 3rem;
+                min-width: 100%;
+                table-layout: fixed;
+                overflow-wrap: break-word;
+            }
+            #product-table > thead {
+                text-align: left;
+            }
+            #product-table > thead > tr > th {
+                font-size: 1.1rem;
+                padding-bottom: 1.5rem;
+                padding-left: 1rem;
+                color: #396d49;
+                font-weight: medium;
+            }
+            #product-table > tbody > tr > td {
+                border-bottom: 1px solid;
+                padding: 1rem;
+            }
+            #product-table > tfoot > tr > td {
+                padding: 1rem;
+            }
+            #product-table
+                > tfoot
+                [data-element='product-table-balance-due-label'],
+            #product-table > tfoot [data-element='product-table-balance-due'] {
+                border-top: 1px solid;
+                border-bottom: 1px solid;
+            }
+
+            .thanks-label {
+                text-align: center;
+                margin-top: 6rem;
+                font-size: 1.5rem;
+                font-weight: bold;
+                padding-bottom: 1rem;
+                border-bottom: 4px solid;
+            }
+        </style>
     </head>
 
-    <style>
-        /** Required for proper margins on print **/
-        @page {
-            margin-top: 8.5mm;
-            margin-bottom: 8.5mm;
-        }
+    <body id="body">
+        <div class="company-logo-wrapper" id="header">
+            <img
+                class="company-logo"
+                src="$company.logo"
+                alt="$company.name logo"
+            />
+        </div>
 
-        /** Custom CSS goes here.. */
-    </style>
+        <hr class="double-border" />
 
-    <body class="$global-margin antialiased bg-white break-words">
-        <!-- Company logo, entity details -->
-        <div class="grid grid-cols-12 gap-4 pb-6 border-b-4 border-black" id="header">
-            <div class="col-span-6">
-                <img
-                    src="$company.logo"
-                    alt="$company.name logo"
-                    class="w-24 col-span-4 sm:w-32"
-                />
+        <div class="client-entity-wrapper">
+            <div class="wrapper-left-side">
+                <div class="text-with-client">
+                    <h2 class="wrapper-info-text">$balance_due_label</h2>
+
+                    <div id="client-details"></div>
+                </div>
+
+                <div class="company-info">
+                    <div id="company-details"></div>
+                    <div id="company-address"></div>
+                </div>
             </div>
-            <div class="flex flex-col items-end col-span-6">
-                <table id="entity-details"></table>
+
+            <div class="wrapper-right-side">
+                <h2 class="wrapper-info-text">$details_label</h2>
+                <table id="entity-details" cellspacing="0"></table>
             </div>
         </div>
 
-        <div class="grid grid-cols-12">
-            <div class="col-span-6 py-6">
-                <p class="text-xl font-semibold uppercase">
-                    $your_entity_label
-                </p>
-            </div>
-        </div>
+        <table id="product-table" cellspacing="0"></table>
 
-        <!-- Client details, company details -->
-        <div class="grid grid-cols-12 gap-4 pt-6 mt-1 border-t border-black">
-            <div
-                class="col-span-5 border-r border-black border-dashed"
-                id="client-details"
-            ></div>
-            <div class="flex col-span-7 space-x-8">
-                <div id="company-details"></div>
-                <div id="company-address"></div>
-            </div>
-        </div>
-
-        <!-- Product table -->
-        <table
-            id="product-table"
-            class="w-full mt-10 table-auto $table-padding"
-        ></table>
-
-        <!-- Thanks label -->
-        <div id="footer">
-            <p
-                class="w-full pb-4 mt-10 text-2xl font-semibold text-center border-b-4 border-black"
-            >
-                $thanks_label
-            </p>
-            <div class="w-full border-black order-b wpy-1"></div>
-        </div>
+        <footer id="footer">
+            <p class="thanks-label">$thanks_label!</p>
+            <hr class="double-border" />
+        </footer>
     </body>
 </html>
diff --git a/resources/views/pdf-designs/hipster.html b/resources/views/pdf-designs/hipster.html
index 1c5fc60cff0f..f9512033b395 100644
--- a/resources/views/pdf-designs/hipster.html
+++ b/resources/views/pdf-designs/hipster.html
@@ -1,69 +1,186 @@
 <!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" />
+<html lang="en">
+    <head id="head">
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <link rel="stylesheet" href="$app_url/css/tailwindcss@1.4.6.css" />
+        <style id="style">
+            * {
+                margin: 0;
+                padding: 0;
+                font-size: 14px;
+            }
+
+            body {
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                font-family: Arial, Helvetica, sans-serif;
+            }
+
+            @media print {
+                body {
+                    margin: 0;
+                    padding: 0;
+                }
+            }
+            body {
+                margin: 2rem;
+            }
+
+            .header-wrapper {
+                display: grid;
+                grid-template-columns: 1.2fr 1.8fr;
+                gap: 20px;
+            }
+            .header-wrapper .header-text-label {
+                font-size: 1.1rem;
+                color: #bba238;
+                text-transform: uppercase;
+                font-weight: bold;
+            }
+            .header-wrapper .header-left-side-wrapper {
+                grid-template-columns: 1fr 1fr;
+                gap: 10px;
+                border-left: 1px solid #303030;
+                padding-left: 1rem;
+            }
+            .header-wrapper .header-left-side-wrapper > * {
+                margin-bottom: 0.8rem;
+            }
+            .header-wrapper .header-left-side-wrapper #company-details,
+            .header-wrapper .header-left-side-wrapper #company-address {
+                display: flex;
+                flex-direction: column;
+            }
+            .header-wrapper .header-right-side-wrapper {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 10px;
+                border-left: 1px solid #303030;
+                padding-left: 1rem;
+            }
+            .header-wrapper .header-right-side-wrapper #client-details {
+                display: flex;
+                flex-direction: column;
+                margin-top: 0.8rem;
+            }
+            .header-wrapper .company-logo {
+                height: 5rem;
+            }
+
+            .entity-label {
+                font-size: 3rem;
+                text-transform: uppercase;
+                margin: 2rem 1rem;
+            }
+
+            .entity-details-wrapper {
+                margin: 1rem;
+            }
+            .entity-details-wrapper > * {
+                margin-right: 1.5rem;
+            }
+            .entity-details-wrapper .entity-property-label {
+                text-transform: uppercase;
+            }
+            .entity-details-wrapper
+                [data-element='entity-details-wrapper-invoice-number-label'],
+            .entity-details-wrapper
+                [data-element='entity-details-wrapper-amount-due'] {
+                color: #bba238;
+                font-weight: bold;
+            }
+
+            #product-table {
+                margin-top: 3rem;
+                min-width: 100%;
+                table-layout: fixed;
+                overflow-wrap: break-word;
+            }
+            #product-table > thead {
+                text-align: left;
+                text-transform: uppercase;
+                font-weight: bold;
+            }
+            #product-table > thead > tr > th {
+                font-size: 1.1rem;
+                padding-bottom: 1.5rem;
+                padding-left: 1rem;
+                border-left: 1px solid;
+            }
+            #product-table > tbody > tr > td {
+                padding: 1rem;
+                border-left: 1px solid;
+            }
+            #product-table > tfoot > tr > td {
+                padding: 1rem;
+            }
+            #product-table > tfoot > tr > td:nth-last-child(1),
+            #product-table > tfoot > tr td:nth-last-child(2) {
+                border-left: 1px solid;
+            }
+            #product-table
+                > tfoot
+                [data-element='product-table-balance-due-label'],
+            #product-table > tfoot [data-element='product-table-balance-due'] {
+                font-weight: bold;
+            }
+        </style>
     </head>
 
-    <style>
-        /** Required for proper margins on print **/
-        @page {
-            margin-top: 8.5mm;
-            margin-bottom: 8.5mm;
-        }
+    <body id="body">
+        <div class="header-wrapper" id="header">
+            <div class="header-left-side-wrapper">
+                <p class="header-text-label">$from_label:</p>
 
-        /** Custom CSS goes here.. */
-    </style>
+                <div id="company-details"></div>
+                <div id="company-address"></div>
+            </div>
 
-    <body class="$global-margin antialiased break-words bg-white">
-        <!-- Company details, address, client details, company logo -->
-        <div class="grid grid-cols-12 gap-4" id="header">
-            <div class="col-span-4 pl-4 border-l border-black">
-                <div id="company-details">
-                    <p class="font-semibold text-yellow-600 uppercase">
-                        $from_label:
-                    </p>
+            <div class="header-right-side-wrapper">
+                <div>
+                    <p class="header-text-label">$to_label:</p>
+                    <div id="client-details"></div>
                 </div>
-                <div id="company-address" class="mt-4"></div>
-            </div>
-            <div
-                class="col-span-5 pl-4 border-l border-black"
-                id="client-details"
-            >
-                <p class="font-semibold text-yellow-600 uppercase">
-                    $to_label:
-                </p>
-            </div>
-            <div class="col-span-3">
+
                 <img
+                    class="company-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-5xl">
-            $entity_label
-        </h1>
-        <div
-            id="entity-details"
-            class="flex flex-wrap items-center space-x-4"
-        ></div>
+        <h1 class="entity-label">$entity_label</h1>
+        <div class="entity-details-wrapper">
+            <span>
+                <span
+                    class="entity-property-label"
+                    data-element="entity-details-wrapper-invoice-number-label"
+                    >$entity_number_label:</span
+                >
+                <span class="entity-property-value">$entity_number</span>
+            </span>
+            <span>
+                <span class="entity-property-label">$entity_date_label:</span>
+                <span class="entity-property-value">$entity_date</span>
+            </span>
+            <span>
+                <span class="entity-property-label">$payment_due_label:</span>
+                <span class="entity-property-value">$payment_due</span>
+            </span>
+            <span>
+                <span class="entity-property-label">$amount_due_label:</span>
+                <span
+                    class="entity-property-value"
+                    data-element="entity-details-wrapper-amount-due"
+                    >$amount_due</span
+                >
+            </span>
+        </div>
 
-        <!-- Product table -->
-        <table
-            id="product-table"
-            class="w-full mt-10 table-auto $table-padding"
-        ></table>
+        <table id="product-table" cellspacing="0"></table>
+
+        <footer id="footer"></footer>
     </body>
-
-    <footer id="footer"></footer>
 </html>
diff --git a/resources/views/pdf-designs/modern.html b/resources/views/pdf-designs/modern.html
index 9ad3c01ad0aa..719dfeb6005c 100644
--- a/resources/views/pdf-designs/modern.html
+++ b/resources/views/pdf-designs/modern.html
@@ -1,68 +1,159 @@
 <!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" />
+<html lang="en">
+    <head id="head">
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <link rel="stylesheet" href="$app_url/css/tailwindcss@1.4.6.css" />
+        <style id="style">
+            * {
+                margin: 0;
+                padding: 0;
+                font-size: 14px;
+            }
+
+            body {
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                font-family: Arial, Helvetica, sans-serif;
+            }
+
+            @media print {
+                body {
+                    margin: 0;
+                    padding: 0;
+                }
+            }
+            .header-container {
+                background-color: #f46521;
+                color: white;
+                display: grid;
+                grid-template-columns: 1.5fr 1fr;
+                padding: 1.5rem;
+            }
+            .header-container .company-name {
+                font-size: 2.5rem;
+            }
+
+            #entity-details {
+                text-align: left;
+                color: #fff4e9 !important;
+            }
+            #entity-details > tr,
+            #entity-details th {
+                font-weight: normal;
+                padding-bottom: 0.5rem;
+            }
+
+            .company-logo {
+                height: 5rem;
+            }
+
+            .logo-client-wrapper {
+                margin: 3rem 1.5rem;
+                display: grid;
+                grid-template-columns: 1.5fr 1fr;
+            }
+
+            #client-details {
+                display: flex;
+                flex-direction: column;
+            }
+            #client-details > * {
+                margin-bottom: 0.5rem;
+            }
+
+            .table-wrapper {
+                margin: 3rem 1.5rem;
+            }
+
+            #product-table {
+                min-width: 100%;
+                table-layout: fixed;
+                overflow-wrap: break-word;
+            }
+            #product-table > thead {
+                text-align: left;
+            }
+            #product-table > thead > tr > th {
+                padding: 0.8rem;
+                background-color: #3f3e3c;
+                color: white;
+            }
+            #product-table > tbody > tr > td {
+                border-bottom: 1px solid #3f3e3c;
+                padding: 1rem;
+            }
+            #product-table > tbody > tr > td:first-child {
+                font-weight: bold;
+            }
+            #product-table > tfoot > tr > td {
+                padding: 1rem;
+            }
+            #product-table > tfoot [data-element='balance-due-row'] > td {
+                background-color: #3f3e3c;
+                color: white;
+            }
+            #product-table > tfoot [data-element='balance-due-label'] {
+                font-weight: bold;
+                font-size: 1.2rem;
+            }
+            #product-table > tfoot [data-element='balance-due'] {
+                font-size: 1.2rem;
+            }
+
+            .footer-wrapper {
+                display: grid;
+                position: fixed;
+                bottom: 0;
+                width: 100%;
+                padding: 1.5rem;
+                grid-template-columns: 2fr 1fr 1fr;
+                background-color: #f46521;
+                color: #fff4e9;
+            }
+
+            #company-address,
+            #company-details {
+                display: flex;
+                flex-direction: column;
+            }
+            #company-address > *,
+            #company-details > * {
+                margin-bottom: 0.5rem;
+            }
+        </style>
     </head>
 
-    <body class="antialiased break-words bg-white">
-        <!-- Company name, entity details -->
-        <div class="bg-orange-600" id="header">
-            <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>
+    <body id="body">
+        <div class="header-container" id="header">
+            <h1 class="company-name">$company.name</h1>
+
+            <table id="entity-details" cellspacing="0"></table>
         </div>
 
-        <div class="$global-margin">
-            <!-- Company logo, client details -->
-            <div class="col-span-12 mt-6 mb-10">
-                <p class="text-xl font-semibold text-orange-600 uppercase">
-                    $your_entity_label
-                </p>
-            </div>
-            <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>
+        <div class="logo-client-wrapper">
+            <img
+                class="company-logo"
+                src="$company.logo"
+                alt="$company.name logo"
+            />
 
-            <!-- Product table -->
-            <table
-                id="product-table"
-                class="w-full mt-8 mb-10 table-auto $table-padding"
-            ></table>
+            <div id="client-details"></div>
         </div>
 
-        <!-- Company details -->
-        <footer id="footer" class="fixed bottom-0 w-full 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 class="table-wrapper">
+            <table id="product-table" cellspacing="0"></table>
+        </div>
+        
+        <div class="footer-wrapper">
+            <div>
+                <!-- Placeholder for offset -->
             </div>
-        </footer>
+            
+            <div id="company-details"></div>
+            <div id="company-address"></div>
+        </div>
+        
+        <footer id="footer"></footer>
     </body>
 </html>
diff --git a/resources/views/pdf-designs/new/bold.html b/resources/views/pdf-designs/new/bold.html
deleted file mode 100644
index 1cf41f0eb7ca..000000000000
--- a/resources/views/pdf-designs/new/bold.html
+++ /dev/null
@@ -1,140 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    </head>
-
-    <style id="style">
-        * {
-            margin: 0;
-            padding: 0;
-            font-size: 14px;
-        }
-
-        body {
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            font-family: Arial, Helvetica, sans-serif;
-        }
-
-        @media print {
-            body {
-                margin-top: 0;
-                margin-right: 0;
-            }
-        }
-        .header-wrapper {
-            display: grid;
-            grid-template-columns: 1.5fr 1fr 1fr;
-            background-color: #2d2c2a;
-            padding: 3rem;
-            color: white;
-        }
-
-        .company-logo {
-            height: 6rem;
-            padding: 2rem;
-            background-color: white;
-            margin: 2rem;
-            margin-top: -4rem;
-        }
-
-        #company-details,
-        #company-address {
-            display: flex;
-            flex-direction: column;
-        }
-
-        #client-details {
-            margin: 2rem;
-            display: flex;
-            flex-direction: column;
-        }
-        #client-details > :first-child {
-            font-weight: bold;
-        }
-
-        .client-entity-wrapper {
-            display: grid;
-            grid-template-columns: 1.5fr 1fr;
-        }
-
-        .entity-details-wrapper {
-            background-color: #35a39a;
-            padding: 1rem;
-        }
-
-        #entity-details {
-            width: 100%;
-            text-align: left;
-            color: white !important;
-        }
-        #entity-details > tr,
-        #entity-details th {
-            font-weight: normal;
-            padding-bottom: 0.5rem;
-        }
-
-        #product-table {
-            min-width: 100%;
-            table-layout: fixed;
-            overflow-wrap: break-word;
-            margin-top: 3rem;
-        }
-        #product-table > thead {
-            text-align: left;
-        }
-        #product-table > thead > tr > th {
-            padding: 2rem;
-            font-size: 1.5rem;
-        }
-        #product-table > tbody > tr > td {
-            padding: 1.5rem;
-        }
-        #product-table > tbody > tr > td:first-child {
-            font-weight: bold;
-        }
-        #product-table > tbody > tr:nth-child(odd) {
-            background-color: #ebebeb;
-        }
-        #product-table > tfoot > tr > td {
-            padding: 1.5rem;
-        }
-        #product-table > tfoot [data-element='balance-due-label'],
-        #product-table > tfoot [data-element='balance-due'] {
-            font-weight: bold;
-            font-size: 1.4rem;
-        }
-        #product-table > tfoot [data-element='balance-due'] {
-            color: #35a39a;
-        }
-    </style>
-
-    <body id="body">
-        <div class="header-wrapper" id="header">
-            <div> <!-- Empty space placeholder--> </div>
-
-            <div id="company-details"></div>
-            <div id="company-address"></div>
-        </div>
-
-        <img
-            class="company-logo"
-            src="$company.logo"
-            alt="$company.name logo"
-        />
-
-        <div class="client-entity-wrapper">
-            <div id="client-details" cellspacing="0"></div>
-
-            <div class="entity-details-wrapper">
-                <table id="entity-details"></table>
-            </div>
-        </div>
-
-        <table id="product-table" cellspacing="0"></table>
-
-        <footer id="footer"></footer>
-    </body>
-</html>
diff --git a/resources/views/pdf-designs/new/business.html b/resources/views/pdf-designs/new/business.html
deleted file mode 100644
index 654f611a9e3a..000000000000
--- a/resources/views/pdf-designs/new/business.html
+++ /dev/null
@@ -1,165 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-        <style>
-            body {
-                margin: 2rem;
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-            }
-
-            .header-container {
-                display: grid;
-                grid-template-columns: 1.8fr 1fr 1fr;
-                grid-gap: 20px;
-            }
-            .header-container > span {
-                display: block;
-            }
-
-            .company-logo {
-                height: 4rem;
-            }
-
-            #company-details {
-                display: flex;
-                flex-direction: column;
-                color: #b1b1b1;
-            }
-            #company-details > * {
-                margin-bottom: 0.8rem;
-            }
-
-            #company-address {
-                display: flex;
-                flex-direction: column;
-                color: #b1b1b1;
-            }
-            #company-address > * {
-                margin-bottom: 0.8rem;
-            }
-
-            .entity-issued-to {
-                margin-top: 3rem;
-                font-weight: bold;
-            }
-
-            .client-and-entity-wrapper {
-                display: grid;
-                grid-template-columns: 2fr 1.5fr;
-                gap: 20px;
-            }
-
-            #client-details {
-                display: flex;
-                flex-direction: column;
-                color: #ec782f;
-            }
-            #client-details > * {
-                margin-bottom: 0.5rem;
-            }
-            #client-details > span:nth-child(1) {
-                font-weight: bold;
-            }
-
-            #entity-details {
-                background-color: #ec782f;
-                padding: 0.8rem;
-                border-radius: 1rem;
-                width: 100%;
-                color: white;
-                text-align: left;
-            }
-            #entity-details th {
-                font-weight: normal;
-            }
-
-            #product-table {
-                margin-top: 3.5rem;
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-            }
-            #product-table > thead {
-                text-align: left;
-                background: #394e6b;
-            }
-            #product-table > thead > tr > th {
-                padding: 1rem;
-                color: white;
-                font-weight: semibold;
-            }
-            #product-table > thead > tr > th:first-child {
-                border-top-left-radius: 1rem;
-            }
-            #product-table > thead > tr > th:last-child {
-                border-top-right-radius: 1rem;
-            }
-            #product-table > tbody > tr > td {
-                padding: 1rem;
-            }
-            #product-table > tbody > tr:nth-child(odd) > td {
-                background: #e8e8e8;
-            }
-            #product-table > tbody > tr:nth-child(even) > td {
-                background: #f7f7f7;
-            }
-            #product-table > tfoot > tr > td {
-                padding: 1rem;
-                background: #e8e8e8;
-            }
-            #product-table > tfoot > tr:nth-last-child(1) > td:first-child {
-                border-bottom-left-radius: 1rem;
-            }
-            #product-table > tfoot > tr:nth-last-child(1) > td:last-child {
-                border-bottom-right-radius: 1rem;
-            }
-            #product-table > tfoot > td {
-                border: none !important;
-            }
-
-            [data-element='product-table-balance-due-label'],
-            [data-element='product-table-balance-due'] {
-                color: #394e6b !important;
-                font-weight: bold !important;
-            }
-
-            @media print {
-                body {
-                    margin-top: 0;
-                    margin-right: 0;
-                }
-            }
-        </style>
-    </head>
-
-    <body id="body">
-        <div class="header-container" id="header">
-            <img
-                src="$company.logo"
-                class="company-logo"
-                alt="$company.name logo"
-            />
-
-            <div id="company-details"></div>
-            <div id="company-address"></div>
-        </div>
-
-        <p class="entity-issued-to">$entity_issued_to_label:</p>
-        <div class="client-and-entity-wrapper">
-            <div id="client-details"></div>
-
-            <div class="entity-details-wrapper">
-                <table id="entity-details" cellspacing="0"></table>
-            </div>
-        </div>
-
-        <table id="product-table" cellspacing="0"></table>
-
-        <footer id="footer"></footer>
-    </body>
-</html>
diff --git a/resources/views/pdf-designs/new/clean.html b/resources/views/pdf-designs/new/clean.html
deleted file mode 100644
index 83aa11bd745c..000000000000
--- a/resources/views/pdf-designs/new/clean.html
+++ /dev/null
@@ -1,138 +0,0 @@
-<!-- Template: Clean -->
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-        <style id="style">
-            body {
-                margin: 2rem;
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-            }
-
-            @media print {
-                body {
-                    margin-top: 0;
-                    margin-right: 0;
-                }
-            }
-            .header-container {
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr;
-                gap: 20px;
-            }
-            .header-container .company-logo {
-                height: 4rem;
-            }
-
-            #company-details {
-                display: flex;
-                flex-direction: column;
-                color: #9f9f9f;
-            }
-            #company-details > span:first-child {
-                color: #67b1cc;
-            }
-
-            #company-address {
-                display: flex;
-                flex-direction: column;
-                color: #9f9f9f;
-            }
-
-            .entity-label {
-                text-transform: uppercase;
-                margin-top: 3.5rem;
-                font-weight: semibold;
-                color: #67b1cc;
-            }
-
-            .client-and-entity-wrapper {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                padding-left: 1rem;
-                padding-right: 1rem;
-                padding-top: 1rem;
-                padding-bottom: 1rem;
-                border-top: 1px solid #9f9f9f;
-                border-bottom: 1px solid #9f9f9f;
-            }
-
-            #entity-details {
-                text-align: left;
-            }
-            #entity-details > tr,
-            #entity-details th {
-                font-weight: normal;
-            }
-
-            #client-details {
-                display: flex;
-                flex-direction: column;
-            }
-            #client-details > :first-child {
-                font-weight: bold;
-            }
-
-            #product-table {
-                margin-top: 3rem;
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-            }
-            #product-table > thead {
-                text-align: left;
-            }
-            #product-table > thead > tr > th {
-                font-size: 1.1rem;
-                padding-bottom: 1.5rem;
-                padding-left: 1rem;
-            }
-            #product-table > tbody > tr > td {
-                border-bottom: 1px solid #9f9f9f;
-                padding: 1rem;
-            }
-            #product-table > tbody > tr > td:first-child {
-                color: #67b1cc;
-            }
-            #product-table > tbody > tr:nth-child(odd) {
-                background-color: #f5f5f5;
-            }
-            #product-table > tfoot > tr > td {
-                padding: 1rem;
-            }
-            #product-table > tfoot [data-element='balance-due'] {
-                color: #67b1cc;
-                font-weight: bold;
-            }
-        </style>
-    </head>
-
-    <body id="body">
-        <div class="header-container" id="header">
-            <img
-                class="company-logo"
-                src="$company.logo"
-                alt="$company.name logo"
-            />
-
-            <div id="company-details"></div>
-            <div id="company-address"></div>
-        </div>
-
-        <p class="entity-label">$entity_label</p>
-        <div class="client-and-entity-wrapper">
-            <table id="entity-details" cellspacing="0"></table>
-
-            <div id="client-details"></div>
-        </div>
-
-        <!-- product_table -->
-        <table id="product-table" cellspacing="0"></table>
-
-        <footer id="footer"></footer>
-    </body>
-</html>
diff --git a/resources/views/pdf-designs/new/creative.html b/resources/views/pdf-designs/new/creative.html
deleted file mode 100644
index e5898090f2f1..000000000000
--- a/resources/views/pdf-designs/new/creative.html
+++ /dev/null
@@ -1,136 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-        <style id="style">
-            * {
-                margin: 0;
-                padding: 0;
-                font-size: 14px;
-            }
-
-            body {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-            }
-
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-            body {
-                margin: 2rem;
-            }
-
-            .header-wrapper {
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr;
-                gap: 20px;
-            }
-            .header-wrapper .company-logo {
-                height: 5rem;
-            }
-            .header-wrapper #client-details,
-            .header-wrapper #company-details,
-            .header-wrapper #company-address {
-                display: flex;
-                flex-direction: column;
-            }
-            .header-wrapper #client-details > *:first-child {
-                font-weight: bold;
-            }
-            .header-wrapper .company-info-wrapper > * {
-                margin-bottom: 1rem;
-            }
-
-            .entity-label-wrapper {
-                display: grid;
-                grid-template-columns: 2fr 1fr;
-                margin-top: 3rem;
-            }
-            .entity-label-wrapper .entity-label > * {
-                font-size: 3rem;
-            }
-            .entity-label-wrapper .entity-label > *:first-child {
-                text-transform: uppercase;
-            }
-            .entity-label-wrapper .entity-label > *:last-child {
-                color: #b21c53;
-                font-style: italic;
-            }
-            .entity-label-wrapper #entity-details {
-                text-align: left;
-            }
-            .entity-label-wrapper #entity-details > tr,
-            .entity-label-wrapper #entity-details th {
-                font-weight: normal;
-            }
-
-            #product-table {
-                margin-top: 3rem;
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-                border-top: 5px solid #b21c53;
-            }
-            #product-table > thead {
-                text-align: left;
-            }
-            #product-table > thead > tr > th {
-                font-size: 1.1rem;
-                padding: 1rem;
-            }
-            #product-table > tbody > tr > td {
-                padding: 1rem;
-            }
-            #product-table > tbody > tr:nth-child(odd) {
-                background-color: #e8e8e8;
-            }
-            #product-table > tfoot > tr > td {
-                padding: 1rem;
-            }
-            #product-table > tfoot > tr:last-child > td {
-                border-top: 5px solid #b21c53;
-            }
-            #product-table > tfoot [data-element='product-table-balance-due'] {
-                color: #b21c53;
-                font-weight: bold;
-            }
-        </style>
-    </head>
-
-    <body id="body">
-        <div class="header-wrapper" id="header">
-            <div id="client-details"></div>
-
-            <div class="company-info-wrapper">
-                <div id="company-details"></div>
-                <div id="company-address"></div>
-            </div>
-
-            <img
-                class="company-logo"
-                src="$company.logo"
-                alt="$company.name logo"
-            />
-        </div>
-
-        <div class="entity-label-wrapper">
-            <h1 class="entity-label">
-                <span>$entity_label</span>&nbsp;
-                <span>#$entity_number</span>
-            </h1>
-
-            <table id="entity-details" cellspacing="0"></table>
-        </div>
-
-        <table id="product-table" cellspacing="0"></table>
-
-        <footer id="footer"></footer>
-    </body>
-</html>
diff --git a/resources/views/pdf-designs/new/elegant.html b/resources/views/pdf-designs/new/elegant.html
deleted file mode 100644
index 64a50ad9ef8f..000000000000
--- a/resources/views/pdf-designs/new/elegant.html
+++ /dev/null
@@ -1,162 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-        <style id="style">
-            * {
-                margin: 0;
-                padding: 0;
-                font-size: 14px;
-            }
-
-            body {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-            }
-
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-            body {
-                margin: 2rem;
-            }
-
-            .company-logo-wrapper {
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-                padding-bottom: 2.5rem;
-                border-bottom: 4px solid;
-            }
-            .company-logo-wrapper .company-logo {
-                height: 5rem;
-            }
-
-            .double-border {
-                margin-top: 3px;
-                border-color: black;
-            }
-
-            .client-entity-wrapper {
-                display: grid;
-                grid-template-columns: 1.8fr 1.2fr;
-                margin-top: 3rem;
-                gap: 10px;
-            }
-            .client-entity-wrapper .wrapper-info-text {
-                display: block;
-                font-size: 1.5rem;
-                font-weight: normal;
-            }
-            .client-entity-wrapper .wrapper-left-side {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-            }
-            .client-entity-wrapper .wrapper-left-side #client-details,
-            .client-entity-wrapper .wrapper-left-side #company-details,
-            .client-entity-wrapper .wrapper-left-side #company-address {
-                display: flex;
-                flex-direction: column;
-                margin-top: 0.5rem;
-            }
-            .client-entity-wrapper .wrapper-left-side .company-info {
-                border-left: 1px solid;
-                padding-left: 1rem;
-            }
-            .client-entity-wrapper #entity-details {
-                text-align: left;
-                margin-top: 0.5rem;
-                min-width: 100%;
-            }
-            .client-entity-wrapper #entity-details > tr,
-            .client-entity-wrapper #entity-details th {
-                font-weight: normal;
-            }
-
-            #product-table {
-                margin-top: 3rem;
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-            }
-            #product-table > thead {
-                text-align: left;
-            }
-            #product-table > thead > tr > th {
-                font-size: 1.1rem;
-                padding-bottom: 1.5rem;
-                padding-left: 1rem;
-                color: #396d49;
-                font-weight: medium;
-            }
-            #product-table > tbody > tr > td {
-                border-bottom: 1px solid;
-                padding: 1rem;
-            }
-            #product-table > tfoot > tr > td {
-                padding: 1rem;
-            }
-            #product-table
-                > tfoot
-                [data-element='product-table-balance-due-label'],
-            #product-table > tfoot [data-element='product-table-balance-due'] {
-                border-top: 1px solid;
-                border-bottom: 1px solid;
-            }
-
-            .thanks-label {
-                text-align: center;
-                margin-top: 6rem;
-                font-size: 1.5rem;
-                font-weight: bold;
-                padding-bottom: 1rem;
-                border-bottom: 4px solid;
-            }
-        </style>
-    </head>
-
-    <body id="body">
-        <div class="company-logo-wrapper" id="header">
-            <img
-                class="company-logo"
-                src="$company.logo"
-                alt="$company.name logo"
-            />
-        </div>
-
-        <hr class="double-border" />
-
-        <div class="client-entity-wrapper">
-            <div class="wrapper-left-side">
-                <div class="text-with-client">
-                    <h2 class="wrapper-info-text">$balance_due_label</h2>
-
-                    <div id="client-details"></div>
-                </div>
-
-                <div class="company-info">
-                    <div id="company-details"></div>
-                    <div id="company-address"></div>
-                </div>
-            </div>
-
-            <div class="wrapper-right-side">
-                <h2 class="wrapper-info-text">$details_label</h2>
-                <table id="entity-details" cellspacing="0"></table>
-            </div>
-        </div>
-
-        <table id="product-table" cellspacing="0"></table>
-
-        <footer id="footer">
-            <p class="thanks-label">$thanks_label!</p>
-            <hr class="double-border" />
-        </footer>
-    </body>
-</html>
diff --git a/resources/views/pdf-designs/new/hipster.html b/resources/views/pdf-designs/new/hipster.html
deleted file mode 100644
index f9512033b395..000000000000
--- a/resources/views/pdf-designs/new/hipster.html
+++ /dev/null
@@ -1,186 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-        <style id="style">
-            * {
-                margin: 0;
-                padding: 0;
-                font-size: 14px;
-            }
-
-            body {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-            }
-
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-            body {
-                margin: 2rem;
-            }
-
-            .header-wrapper {
-                display: grid;
-                grid-template-columns: 1.2fr 1.8fr;
-                gap: 20px;
-            }
-            .header-wrapper .header-text-label {
-                font-size: 1.1rem;
-                color: #bba238;
-                text-transform: uppercase;
-                font-weight: bold;
-            }
-            .header-wrapper .header-left-side-wrapper {
-                grid-template-columns: 1fr 1fr;
-                gap: 10px;
-                border-left: 1px solid #303030;
-                padding-left: 1rem;
-            }
-            .header-wrapper .header-left-side-wrapper > * {
-                margin-bottom: 0.8rem;
-            }
-            .header-wrapper .header-left-side-wrapper #company-details,
-            .header-wrapper .header-left-side-wrapper #company-address {
-                display: flex;
-                flex-direction: column;
-            }
-            .header-wrapper .header-right-side-wrapper {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                gap: 10px;
-                border-left: 1px solid #303030;
-                padding-left: 1rem;
-            }
-            .header-wrapper .header-right-side-wrapper #client-details {
-                display: flex;
-                flex-direction: column;
-                margin-top: 0.8rem;
-            }
-            .header-wrapper .company-logo {
-                height: 5rem;
-            }
-
-            .entity-label {
-                font-size: 3rem;
-                text-transform: uppercase;
-                margin: 2rem 1rem;
-            }
-
-            .entity-details-wrapper {
-                margin: 1rem;
-            }
-            .entity-details-wrapper > * {
-                margin-right: 1.5rem;
-            }
-            .entity-details-wrapper .entity-property-label {
-                text-transform: uppercase;
-            }
-            .entity-details-wrapper
-                [data-element='entity-details-wrapper-invoice-number-label'],
-            .entity-details-wrapper
-                [data-element='entity-details-wrapper-amount-due'] {
-                color: #bba238;
-                font-weight: bold;
-            }
-
-            #product-table {
-                margin-top: 3rem;
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-            }
-            #product-table > thead {
-                text-align: left;
-                text-transform: uppercase;
-                font-weight: bold;
-            }
-            #product-table > thead > tr > th {
-                font-size: 1.1rem;
-                padding-bottom: 1.5rem;
-                padding-left: 1rem;
-                border-left: 1px solid;
-            }
-            #product-table > tbody > tr > td {
-                padding: 1rem;
-                border-left: 1px solid;
-            }
-            #product-table > tfoot > tr > td {
-                padding: 1rem;
-            }
-            #product-table > tfoot > tr > td:nth-last-child(1),
-            #product-table > tfoot > tr td:nth-last-child(2) {
-                border-left: 1px solid;
-            }
-            #product-table
-                > tfoot
-                [data-element='product-table-balance-due-label'],
-            #product-table > tfoot [data-element='product-table-balance-due'] {
-                font-weight: bold;
-            }
-        </style>
-    </head>
-
-    <body id="body">
-        <div class="header-wrapper" id="header">
-            <div class="header-left-side-wrapper">
-                <p class="header-text-label">$from_label:</p>
-
-                <div id="company-details"></div>
-                <div id="company-address"></div>
-            </div>
-
-            <div class="header-right-side-wrapper">
-                <div>
-                    <p class="header-text-label">$to_label:</p>
-                    <div id="client-details"></div>
-                </div>
-
-                <img
-                    class="company-logo"
-                    src="$company.logo"
-                    alt="$company.name logo"
-                />
-            </div>
-        </div>
-
-        <h1 class="entity-label">$entity_label</h1>
-        <div class="entity-details-wrapper">
-            <span>
-                <span
-                    class="entity-property-label"
-                    data-element="entity-details-wrapper-invoice-number-label"
-                    >$entity_number_label:</span
-                >
-                <span class="entity-property-value">$entity_number</span>
-            </span>
-            <span>
-                <span class="entity-property-label">$entity_date_label:</span>
-                <span class="entity-property-value">$entity_date</span>
-            </span>
-            <span>
-                <span class="entity-property-label">$payment_due_label:</span>
-                <span class="entity-property-value">$payment_due</span>
-            </span>
-            <span>
-                <span class="entity-property-label">$amount_due_label:</span>
-                <span
-                    class="entity-property-value"
-                    data-element="entity-details-wrapper-amount-due"
-                    >$amount_due</span
-                >
-            </span>
-        </div>
-
-        <table id="product-table" cellspacing="0"></table>
-
-        <footer id="footer"></footer>
-    </body>
-</html>
diff --git a/resources/views/pdf-designs/new/modern.html b/resources/views/pdf-designs/new/modern.html
deleted file mode 100644
index 719dfeb6005c..000000000000
--- a/resources/views/pdf-designs/new/modern.html
+++ /dev/null
@@ -1,159 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-        <style id="style">
-            * {
-                margin: 0;
-                padding: 0;
-                font-size: 14px;
-            }
-
-            body {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-            }
-
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-            .header-container {
-                background-color: #f46521;
-                color: white;
-                display: grid;
-                grid-template-columns: 1.5fr 1fr;
-                padding: 1.5rem;
-            }
-            .header-container .company-name {
-                font-size: 2.5rem;
-            }
-
-            #entity-details {
-                text-align: left;
-                color: #fff4e9 !important;
-            }
-            #entity-details > tr,
-            #entity-details th {
-                font-weight: normal;
-                padding-bottom: 0.5rem;
-            }
-
-            .company-logo {
-                height: 5rem;
-            }
-
-            .logo-client-wrapper {
-                margin: 3rem 1.5rem;
-                display: grid;
-                grid-template-columns: 1.5fr 1fr;
-            }
-
-            #client-details {
-                display: flex;
-                flex-direction: column;
-            }
-            #client-details > * {
-                margin-bottom: 0.5rem;
-            }
-
-            .table-wrapper {
-                margin: 3rem 1.5rem;
-            }
-
-            #product-table {
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-            }
-            #product-table > thead {
-                text-align: left;
-            }
-            #product-table > thead > tr > th {
-                padding: 0.8rem;
-                background-color: #3f3e3c;
-                color: white;
-            }
-            #product-table > tbody > tr > td {
-                border-bottom: 1px solid #3f3e3c;
-                padding: 1rem;
-            }
-            #product-table > tbody > tr > td:first-child {
-                font-weight: bold;
-            }
-            #product-table > tfoot > tr > td {
-                padding: 1rem;
-            }
-            #product-table > tfoot [data-element='balance-due-row'] > td {
-                background-color: #3f3e3c;
-                color: white;
-            }
-            #product-table > tfoot [data-element='balance-due-label'] {
-                font-weight: bold;
-                font-size: 1.2rem;
-            }
-            #product-table > tfoot [data-element='balance-due'] {
-                font-size: 1.2rem;
-            }
-
-            .footer-wrapper {
-                display: grid;
-                position: fixed;
-                bottom: 0;
-                width: 100%;
-                padding: 1.5rem;
-                grid-template-columns: 2fr 1fr 1fr;
-                background-color: #f46521;
-                color: #fff4e9;
-            }
-
-            #company-address,
-            #company-details {
-                display: flex;
-                flex-direction: column;
-            }
-            #company-address > *,
-            #company-details > * {
-                margin-bottom: 0.5rem;
-            }
-        </style>
-    </head>
-
-    <body id="body">
-        <div class="header-container" id="header">
-            <h1 class="company-name">$company.name</h1>
-
-            <table id="entity-details" cellspacing="0"></table>
-        </div>
-
-        <div class="logo-client-wrapper">
-            <img
-                class="company-logo"
-                src="$company.logo"
-                alt="$company.name logo"
-            />
-
-            <div id="client-details"></div>
-        </div>
-
-        <div class="table-wrapper">
-            <table id="product-table" cellspacing="0"></table>
-        </div>
-        
-        <div class="footer-wrapper">
-            <div>
-                <!-- Placeholder for offset -->
-            </div>
-            
-            <div id="company-details"></div>
-            <div id="company-address"></div>
-        </div>
-        
-        <footer id="footer"></footer>
-    </body>
-</html>
diff --git a/resources/views/pdf-designs/new/plain.html b/resources/views/pdf-designs/new/plain.html
deleted file mode 100644
index 0002988bd6b7..000000000000
--- a/resources/views/pdf-designs/new/plain.html
+++ /dev/null
@@ -1,119 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-        <style id="style">
-            * {
-                margin: 0;
-                padding: 0;
-                font-size: 14px;
-            }
-
-            body {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-            }
-
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-            body {
-                margin: 2rem;
-            }
-
-            .header-wrapper {
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr;
-            }
-            .header-wrapper .company-logo {
-                height: 5rem;
-            }
-            .header-wrapper #company-address {
-                display: flex;
-                flex-direction: column;
-            }
-            .header-wrapper #entity-details {
-                margin-top: 1.5rem;
-                text-align: left;
-                width: 100%;
-            }
-            .header-wrapper #entity-details > tr,
-            .header-wrapper #entity-details th {
-                font-weight: normal;
-                padding-left: 0.9rem;
-                padding-top: 0.3rem;
-                padding-bottom: 0.3rem;
-            }
-            .header-wrapper
-                #entity-details
-                [data-element='entity-balance-due-label'],
-            .header-wrapper
-                #entity-details
-                [data-element='entity-balance-due'] {
-                background-color: #e6e6e6;
-            }
-
-            #client-details {
-                display: flex;
-                flex-direction: column;
-            }
-
-            #product-table {
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-                margin-top: 3rem;
-            }
-            #product-table > thead {
-                text-align: left;
-            }
-            #product-table > thead > tr > th {
-                padding: 1rem;
-                background-color: #e6e6e6;
-            }
-            #product-table > tbody > tr > td {
-                border-bottom: 1px solid #e6e6e6;
-                padding: 1rem;
-            }
-            #product-table > tfoot > tr > td {
-                padding: 1rem;
-            }
-            #product-table
-                > tfoot
-                [data-element='product-table-balance-due-label'],
-            #product-table > tfoot [data-element='product-table-balance-due'] {
-                background-color: #e6e6e6;
-            }
-        </style>
-    </head>
-
-    <body id="body">
-        <div class="header-wrapper" id="header">
-            <p>$company.name</p>
-
-            <div id="company-address"></div>
-
-            <div>
-                <img
-                    class="company-logo"
-                    src="$company.logo"
-                    alt="$company.name logo"
-                />
-
-                <table id="entity-details" cellspacing="0"></table>
-            </div>
-        </div>
-
-        <div id="client-details"></div>
-        
-        <table id="product-table" cellspacing="0"></table>
-
-        <footer id="footer"></footer>
-    </body>
-</html>
diff --git a/resources/views/pdf-designs/new/playful.html b/resources/views/pdf-designs/new/playful.html
deleted file mode 100644
index 1972607cc31b..000000000000
--- a/resources/views/pdf-designs/new/playful.html
+++ /dev/null
@@ -1,173 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head id="head">
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-        <style id="style">
-            * {
-                margin: 0;
-                padding: 0;
-                font-size: 14px;
-            }
-
-            body {
-                -webkit-font-smoothing: antialiased;
-                -moz-osx-font-smoothing: grayscale;
-                font-family: Arial, Helvetica, sans-serif;
-            }
-
-            @media print {
-                body {
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-            body {
-                margin: 2rem;
-            }
-
-            .header-wrapper {
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr;
-            }
-            .header-wrapper .company-logo {
-                height: 5rem;
-            }
-            .header-wrapper .entity-details-wrapper {
-                background-color: #009e90;
-                padding: 1rem;
-                border-radius: 10px;
-            }
-            .header-wrapper #entity-details {
-                width: 100%;
-                color: white;
-                text-align: left;
-            }
-            .header-wrapper #entity-details > tr,
-            .header-wrapper #entity-details th {
-                font-weight: normal;
-            }
-
-            .contacts-wrapper {
-                margin-top: 3rem;
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                gap: 40px;
-            }
-            .contacts-wrapper .contact-label {
-                font-weight: bold;
-                color: #009e90;
-                margin-left: 1rem;
-            }
-            .contacts-wrapper #company-address,
-            .contacts-wrapper #company-details,
-            .contacts-wrapper #client-details {
-                display: flex;
-                flex-direction: column;
-                margin-bottom: 1rem;
-            }
-            .contacts-wrapper .company-info {
-                margin-top: 1rem;
-                padding: 1rem;
-                border-top: 1px solid #009e90;
-                border-bottom: 1px solid #009e90;
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                gap: 10px;
-            }
-            .contacts-wrapper #client-details {
-                margin-top: 1rem;
-                padding: 1rem;
-                border-top: 1px solid #009e90;
-                border-bottom: 1px solid #009e90;
-            }
-
-            #product-table {
-                margin-top: 3rem;
-                min-width: 100%;
-                table-layout: fixed;
-                overflow-wrap: break-word;
-            }
-            #product-table > thead {
-                text-align: left;
-            }
-            #product-table > thead > tr > th {
-                font-size: 1.2rem;
-                padding: 1rem;
-                background: #009e90;
-                color: white;
-            }
-            #product-table > thead tr > th:first-child {
-                border-top-left-radius: 10px;
-                border-bottom-left-radius: 10px;
-            }
-            #product-table > thead tr > th:last-child {
-                border-top-right-radius: 10px;
-                border-bottom-right-radius: 10px;
-            }
-            #product-table > tbody > tr > td {
-                border-bottom: 1px solid #009e90;
-                padding: 1rem;
-            }
-            #product-table > tbody > tr > td:first-child {
-                color: #bb3a24;
-            }
-            #product-table > tfoot > tr > td {
-                padding: 1rem;
-            }
-            #product-table
-                > tfoot
-                [data-element='product-table-balance-due-label'] {
-                background-color: #009e90;
-                color: white;
-                border-top-left-radius: 10px;
-                border-bottom-left-radius: 10px;
-            }
-            #product-table > tfoot [data-element='product-table-balance-due'] {
-                background-color: #009e90;
-                color: white;
-                border-top-right-radius: 10px;
-                border-bottom-right-radius: 10px;
-            }
-        </style>
-    </head>
-
-    <body id="body">
-        <div class="header-wrapper" id="header">
-            <img
-                class="company-logo"
-                src="$company.logo"
-                alt="$company.name logo"
-            />
-
-            <div>
-                <!-- Placeholder for empty space -->
-            </div>
-
-            <div class="entity-details-wrapper">
-                <table id="entity-details" cellspacing="0"></table>
-            </div>
-        </div>
-
-        <div class="contacts-wrapper">
-            <div>
-                <p class="contact-label">$to_label:</p>
-                <div class="company-info">
-                    <div id="company-details"></div>
-                    <div id="company-address"></div>
-                </div>
-            </div>
-
-            <div>
-                <p class="contact-label">$from_label:</p>
-
-                <div id="client-details"></div>
-            </div>
-        </div>
-
-        <table id="product-table" cellspacing="0"></table>
-
-        <footer id="footer"></footer>
-    </body>
-</html>
diff --git a/resources/views/pdf-designs/plain.html b/resources/views/pdf-designs/plain.html
index 1c63aa173e85..0002988bd6b7 100644
--- a/resources/views/pdf-designs/plain.html
+++ b/resources/views/pdf-designs/plain.html
@@ -1,63 +1,119 @@
 <!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" />
+<html lang="en">
+    <head id="head">
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <link rel="stylesheet" href="$app_url/css/tailwindcss@1.4.6.css" />
+        <style id="style">
+            * {
+                margin: 0;
+                padding: 0;
+                font-size: 14px;
+            }
+
+            body {
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                font-family: Arial, Helvetica, sans-serif;
+            }
+
+            @media print {
+                body {
+                    margin: 0;
+                    padding: 0;
+                }
+            }
+            body {
+                margin: 2rem;
+            }
+
+            .header-wrapper {
+                display: grid;
+                grid-template-columns: 1fr 1fr 1fr;
+            }
+            .header-wrapper .company-logo {
+                height: 5rem;
+            }
+            .header-wrapper #company-address {
+                display: flex;
+                flex-direction: column;
+            }
+            .header-wrapper #entity-details {
+                margin-top: 1.5rem;
+                text-align: left;
+                width: 100%;
+            }
+            .header-wrapper #entity-details > tr,
+            .header-wrapper #entity-details th {
+                font-weight: normal;
+                padding-left: 0.9rem;
+                padding-top: 0.3rem;
+                padding-bottom: 0.3rem;
+            }
+            .header-wrapper
+                #entity-details
+                [data-element='entity-balance-due-label'],
+            .header-wrapper
+                #entity-details
+                [data-element='entity-balance-due'] {
+                background-color: #e6e6e6;
+            }
+
+            #client-details {
+                display: flex;
+                flex-direction: column;
+            }
+
+            #product-table {
+                min-width: 100%;
+                table-layout: fixed;
+                overflow-wrap: break-word;
+                margin-top: 3rem;
+            }
+            #product-table > thead {
+                text-align: left;
+            }
+            #product-table > thead > tr > th {
+                padding: 1rem;
+                background-color: #e6e6e6;
+            }
+            #product-table > tbody > tr > td {
+                border-bottom: 1px solid #e6e6e6;
+                padding: 1rem;
+            }
+            #product-table > tfoot > tr > td {
+                padding: 1rem;
+            }
+            #product-table
+                > tfoot
+                [data-element='product-table-balance-due-label'],
+            #product-table > tfoot [data-element='product-table-balance-due'] {
+                background-color: #e6e6e6;
+            }
+        </style>
     </head>
 
-    <style>
-        /** Required for proper margins on print **/
-        @page {
-            margin-top: 8.5mm;
-            margin-bottom: 8.5mm;
-        }
+    <body id="body">
+        <div class="header-wrapper" id="header">
+            <p>$company.name</p>
 
-        /** Custom CSS goes here.. */
-    </style>
+            <div id="company-address"></div>
 
-    <body class="$global-margin antialiased break-words bg-white">
-        <!-- Company name, company address, company logo -->
-        <div class="grid grid-cols-12 gap-4" id="header">
-            <div class="col-span-4">$company.name</div>
-            <div class="col-span-4" id="company-address"></div>
-            <div class="col-span-4">
+            <div>
                 <img
+                    class="company-logo"
                     src="$company.logo"
                     alt="$company.name logo"
-                    class="block w-24 col-span-4 sm:w-32"
                 />
+
+                <table id="entity-details" cellspacing="0"></table>
             </div>
         </div>
 
-        <!-- Entity details -->
-        <div class="grid grid-cols-12">
-            <div class="col-span-6 col-start-6 mt-12">
-                <table class="flex justify-between" id="entity-details"></table>
-            </div>
-        </div>
+        <div id="client-details"></div>
+        
+        <table id="product-table" cellspacing="0"></table>
 
-        <!-- Client details -->
-        <div class="grid grid-cols-12 mt-12">
-            <div class="col-span-12 mb-10">
-                <p class="text-xl font-semibold text-black uppercase">
-                    $your_entity_label
-                </p>
-            </div>
-            <div class="col-span-6" id="client-details"></div>
-        </div>
-
-        <!-- Product table -->
-        <table
-            id="product-table"
-            class="w-full mt-8 table-auto $table-padding"
-        ></table>
+        <footer id="footer"></footer>
     </body>
-
-    <footer id="footer"></footer>
 </html>
diff --git a/resources/views/pdf-designs/playful.html b/resources/views/pdf-designs/playful.html
index 3fdcf64b0af2..1972607cc31b 100644
--- a/resources/views/pdf-designs/playful.html
+++ b/resources/views/pdf-designs/playful.html
@@ -1,82 +1,173 @@
 <!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" />
+<html lang="en">
+    <head id="head">
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <link rel="stylesheet" href="$app_url/css/tailwindcss@1.4.6.css" />
+        <style id="style">
+            * {
+                margin: 0;
+                padding: 0;
+                font-size: 14px;
+            }
+
+            body {
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                font-family: Arial, Helvetica, sans-serif;
+            }
+
+            @media print {
+                body {
+                    margin: 0;
+                    padding: 0;
+                }
+            }
+            body {
+                margin: 2rem;
+            }
+
+            .header-wrapper {
+                display: grid;
+                grid-template-columns: 1fr 1fr 1fr;
+            }
+            .header-wrapper .company-logo {
+                height: 5rem;
+            }
+            .header-wrapper .entity-details-wrapper {
+                background-color: #009e90;
+                padding: 1rem;
+                border-radius: 10px;
+            }
+            .header-wrapper #entity-details {
+                width: 100%;
+                color: white;
+                text-align: left;
+            }
+            .header-wrapper #entity-details > tr,
+            .header-wrapper #entity-details th {
+                font-weight: normal;
+            }
+
+            .contacts-wrapper {
+                margin-top: 3rem;
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 40px;
+            }
+            .contacts-wrapper .contact-label {
+                font-weight: bold;
+                color: #009e90;
+                margin-left: 1rem;
+            }
+            .contacts-wrapper #company-address,
+            .contacts-wrapper #company-details,
+            .contacts-wrapper #client-details {
+                display: flex;
+                flex-direction: column;
+                margin-bottom: 1rem;
+            }
+            .contacts-wrapper .company-info {
+                margin-top: 1rem;
+                padding: 1rem;
+                border-top: 1px solid #009e90;
+                border-bottom: 1px solid #009e90;
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 10px;
+            }
+            .contacts-wrapper #client-details {
+                margin-top: 1rem;
+                padding: 1rem;
+                border-top: 1px solid #009e90;
+                border-bottom: 1px solid #009e90;
+            }
+
+            #product-table {
+                margin-top: 3rem;
+                min-width: 100%;
+                table-layout: fixed;
+                overflow-wrap: break-word;
+            }
+            #product-table > thead {
+                text-align: left;
+            }
+            #product-table > thead > tr > th {
+                font-size: 1.2rem;
+                padding: 1rem;
+                background: #009e90;
+                color: white;
+            }
+            #product-table > thead tr > th:first-child {
+                border-top-left-radius: 10px;
+                border-bottom-left-radius: 10px;
+            }
+            #product-table > thead tr > th:last-child {
+                border-top-right-radius: 10px;
+                border-bottom-right-radius: 10px;
+            }
+            #product-table > tbody > tr > td {
+                border-bottom: 1px solid #009e90;
+                padding: 1rem;
+            }
+            #product-table > tbody > tr > td:first-child {
+                color: #bb3a24;
+            }
+            #product-table > tfoot > tr > td {
+                padding: 1rem;
+            }
+            #product-table
+                > tfoot
+                [data-element='product-table-balance-due-label'] {
+                background-color: #009e90;
+                color: white;
+                border-top-left-radius: 10px;
+                border-bottom-left-radius: 10px;
+            }
+            #product-table > tfoot [data-element='product-table-balance-due'] {
+                background-color: #009e90;
+                color: white;
+                border-top-right-radius: 10px;
+                border-bottom-right-radius: 10px;
+            }
+        </style>
     </head>
 
-    <style>
-        #product-table tbody > tr > td:first-child {
-            color: #9b2c2c;
-        }
+    <body id="body">
+        <div class="header-wrapper" id="header">
+            <img
+                class="company-logo"
+                src="$company.logo"
+                alt="$company.name logo"
+            />
 
-        #product-table tbody > tr > td:last-child {
-            color: #9b2c2c;
-            font-weight: bold;
-        }
-
-        /** Required for proper margins on print **/
-        @page {
-            margin-top: 8.5mm;
-            margin-bottom: 8.5mm;
-        }
-
-        /** Custom CSS goes here.. */
-    </style>
-
-    <body class="$global-margin antialiased bg-white break-words">
-        <!-- Company logo, entity details -->
-        <div class="grid grid-cols-12 gap-4" id="header">
-            <div class="col-span-4">
-                <img
-                    src="$company.logo"
-                    alt="$company.name logo"
-                    class="w-24 col-span-4 sm:w-32"
-                />
+            <div>
+                <!-- Placeholder for empty space -->
             </div>
-            <div class="col-span-6 col-start-7 p-5 bg-teal-600 rounded-lg">
-                <table id="entity-details" class="text-white"></table>
+
+            <div class="entity-details-wrapper">
+                <table id="entity-details" cellspacing="0"></table>
             </div>
         </div>
 
-        <!-- Company details, client details -->
-        <div class="grid grid-cols-12 gap-12 mt-12">
-            <div class="col-span-12">
-                <p class="text-xl font-semibold text-teal-600 uppercase">
-                    $your_entity_label
-                </p>
-            </div>
-            <div class="col-span-6">
-                <p class="px-4 font-semibold text-teal-600">$to_label:</p>
-                <div
-                    class="p-4 mt-4 border-t-4 border-b-4 border-teal-600 border-dashed"
-                >
-                    <div id="client-details"></div>
-                </div>
-            </div>
-            <div class="col-span-6">
-                <p class="px-4 font-semibold text-teal-600">$from_label:</p>
-                <div
-                    class="flex p-4 mt-4 space-x-4 border-t-4 border-b-4 border-teal-600 border-dashed"
-                >
+        <div class="contacts-wrapper">
+            <div>
+                <p class="contact-label">$to_label:</p>
+                <div class="company-info">
                     <div id="company-details"></div>
                     <div id="company-address"></div>
                 </div>
             </div>
+
+            <div>
+                <p class="contact-label">$from_label:</p>
+
+                <div id="client-details"></div>
+            </div>
         </div>
 
-        <!-- Product table -->
-        <table
-            id="product-table"
-            class="w-full mt-10 table-auto $table-padding"
-        ></table>
-    </body>
+        <table id="product-table" cellspacing="0"></table>
 
-    <footer id="footer"></footer>
+        <footer id="footer"></footer>
+    </body>
 </html>
