diff --git a/database/migrations/2021_05_20_115919_update_designs.php b/database/migrations/2021_05_26_115919_update_designs.php
similarity index 100%
rename from database/migrations/2021_05_20_115919_update_designs.php
rename to database/migrations/2021_05_26_115919_update_designs.php
diff --git a/resources/views/pdf-designs/bold.html b/resources/views/pdf-designs/bold.html
index 2059b0e9b235..4bf129e5992e 100644
--- a/resources/views/pdf-designs/bold.html
+++ b/resources/views/pdf-designs/bold.html
@@ -191,19 +191,6 @@
         font-size: 1.5rem;
     }
 
-    table.page-container {
-        page-break-after: always;
-        min-width: 100%;
-    }
-
-    thead.page-header {
-        display: table-header-group;
-    }
-
-    tfoot.page-footer {
-        display: table-footer-group;
-    }
-
     .footer-wrapper {
         margin-top: 1rem;
         background-color: #2d2c2a;
@@ -221,49 +208,51 @@
     [data-ref="total_table-footer"] {
         padding-top: 0.5rem
     }
+
+    /** Repeating header & footer styling. */
+    table {
+        width: 100%;
+    }
+
+    table.print-content {}
+
+    table.print-content th,
+    table.print-content td {
+        padding: .2rem .4rem;
+        text-align: left;
+        vertical-align: top;
+        border-top: 1px solid #dee2e6;
+    }
+
+    @media print {
+        .print-footer {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+        }
+
+        .no-print {
+            display: none
+        }
+    }
 </style>
 
-<table class="page-container">
-    <thead class="page-header">
+<table>
+    <!-- Start Header -->
+    <thead>
     <tr>
-        <th class="page-header-cell">
+        <td>
             <div class="header-wrapper" id="header">
                 <img class="company-logo" src="$company.logo" alt="$company.name logo"/>
                 <div id="company-details"></div>
                 <div id="company-address"></div>
             </div>
-        </th>
-    </tr>
-    </thead>
-
-    <tfoot class="page-footer">
-    <tr>
-        <td class="page-footer-cell">
-            <div class="footer-wrapper" id="footer">
-                <div>
-                    <p data-ref="total_table-footer">$entity_footer</p>
-
-                    <script>
-                        // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
-                        document.addEventListener('DOMContentLoaded', () => {
-                            ['product-table', 'task-table', 'delivery-note-table'].forEach((tableIdentifier) => {
-                                document.getElementById(tableIdentifier).childElementCount === 0
-                                    ? document.getElementById(tableIdentifier).style.display = 'none'
-                                    : '';
-                            });
-                        });
-                    </script>
-                </div>
-                <div> <!-- #2 column --> </div>
-                <div> <!-- #3 column --> </div>
-            </div>
         </td>
     </tr>
-    </tfoot>
-
-    <tbody class="page-content">
+    </thead>
+    <!-- End Header -->
     <tr>
-        <td class="page-content-cell" id="body">
+        <td id="body">
             <div class="client-entity-wrapper">
                 <div class="client-wrapper-left-side">
                     <h4 class="entity-label">$entity_label</h4>
@@ -277,14 +266,48 @@
                 </div>
             </div>
 
-            <table id="product-table" cellspacing="0"></table>
+            <!-- Start Print Content -->
+            <table id="product-table" cellspacing="0" class="print-content"></table>
 
-            <table id="task-table" cellspacing="0"></table>
-
-            <table id="delivery-note-table" cellspacing="0"></table>
+            <table id="task-table" cellspacing="0" class="print-content"></table>
 
+            <table id="delivery-note-table" cellspacing="0" class="print-content"></table>
+            <!-- End Print Content -->
+        </td>
+    </tr>
+    <tr>
+        <td>
             <div id="table-totals" cellspacing="0"></div>
         </td>
     </tr>
-    </tbody>
-</table>
\ No newline at end of file
+    <!-- Start Space For Footer -->
+    <tfoot>
+    <tr>
+        <td style="height: 180px">
+            <!-- Leave this empty and don't remove it. This space is where footer placed on print. -->
+        </td>
+    </tr>
+    </tfoot>
+    <!-- End Space For Footer -->
+</table>
+
+<!-- Start Footer -->
+<div class="footer-wrapper print-footer" id="footer">
+    <div>
+        <p data-ref="total_table-footer">$entity_footer</p>
+
+        <script>
+            // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
+            document.addEventListener('DOMContentLoaded', () => {
+                ['product-table', 'task-table', 'delivery-note-table'].forEach((tableIdentifier) => {
+                    document.getElementById(tableIdentifier).childElementCount === 0
+                        ? document.getElementById(tableIdentifier).style.display = 'none'
+                        : '';
+                });
+            });
+        </script>
+    </div>
+    <div> <!-- #2 column --> </div>
+    <div> <!-- #3 column --> </div>
+</div>
+<!-- End Footer -->
diff --git a/resources/views/pdf-designs/modern.html b/resources/views/pdf-designs/modern.html
index c67320be38cd..03cc2100ca1a 100644
--- a/resources/views/pdf-designs/modern.html
+++ b/resources/views/pdf-designs/modern.html
@@ -227,51 +227,50 @@
         margin-top: 2rem;
         margin-bottom: 2rem
     }
+
+    /** Repeating header & footer styling. */
+    table {
+        width: 100%;
+    }
+
+    table.print-content {}
+
+    table.print-content th,
+    table.print-content td {
+        padding: .2rem .4rem;
+        text-align: left;
+        vertical-align: top;
+        border-top: 1px solid #dee2e6;
+    }
+
+    @media print {
+        .print-footer {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+        }
+
+        .no-print {
+            display: none
+        }
+    }
 </style>
 
-<table class="page-container">
-    <thead class="page-header">
+<table>
+    <!-- Start Header -->
+    <thead>
     <tr>
-        <th class="page-header-cell">
+        <td>
             <div class="header-container" id="header">
                 <h1 class="company-name">$company.name</h1>
                 <table id="entity-details" cellspacing="0"></table>
             </div>
-        </th>
-    </tr>
-    </thead>
-    <tfoot class="page-footer">
-    <tr>
-        <td class="page-footer-cell">
-            <div class="footer-info">
-                <div style="margin-top: 195px"></div>
-                <div class="footer-wrapper" id="footer">
-                    <div class="footer-content">
-                        <div>
-                            <p data-ref="total_table-footer">$entity_footer</p>
-
-                            <script>
-                                // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
-                                document.addEventListener('DOMContentLoaded', () => {
-                                    ['product-table', 'task-table', 'delivery-note-table'].forEach((tableIdentifier) => {
-                                        document.getElementById(tableIdentifier).childElementCount === 0
-                                            ? document.getElementById(tableIdentifier).style.display = 'none'
-                                            : '';
-                                    });
-                                });
-                            </script>
-                        </div>
-                        <div id="company-details"></div>
-                        <div id="company-address"></div>
-                    </div>
-                </div>
-            </div>
         </td>
     </tr>
-    </tfoot>
-    <tbody class="page-content">
+    </thead>
+    <!-- End Header -->
     <tr>
-        <td class="page-content-cell" id="body">
+        <td id="body">
             <div class="logo-client-wrapper">
                 <img
                     class="company-logo"
@@ -282,14 +281,50 @@
                 <div id="client-details"></div>
             </div>
 
+            <!-- Start Print Content -->
             <div class="table-wrapper">
-                <table id="product-table" cellspacing="0"></table>
-                <table id="task-table" cellspacing="0"></table>
-                <table id="delivery-note-table" cellspacing="0"></table>
+                <table id="product-table" cellspacing="0" class="print-content"></table>
+                <table id="task-table" cellspacing="0" class="print-content"></table>
+                <table id="delivery-note-table" cellspacing="0" class="print-content"></table>
             </div>
-
+            <!-- End Print Content -->
+        </td>
+    </tr>
+    <tr>
+        <td>
             <div id="table-totals" cellspacing="0"></div>
         </td>
     </tr>
-    </tbody>
+    <!-- Start Space For Footer -->
+    <tfoot>
+    <tr>
+        <td style="height: 230px">
+            <!-- Leave this empty and don't remove it. This space is where footer placed on print -->
+        </td>
+    </tr>
+    </tfoot>
+    <!-- End Space For Footer -->
 </table>
+
+<!-- Start Footer -->
+<div class="footer-wrapper print-footer" id="footer">
+    <div class="footer-content">
+        <div>
+            <p data-ref="total_table-footer">$entity_footer</p>
+
+            <script>
+                // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
+                document.addEventListener('DOMContentLoaded', () => {
+                    ['product-table', 'task-table', 'delivery-note-table'].forEach((tableIdentifier) => {
+                        document.getElementById(tableIdentifier).childElementCount === 0
+                            ? document.getElementById(tableIdentifier).style.display = 'none'
+                            : '';
+                    });
+                });
+            </script>
+        </div>
+        <div id="company-details"></div>
+        <div id="company-address"></div>
+    </div>
+</div>
+<!-- End Footer -->