diff --git a/resources/views/pdf-designs/playful.html b/resources/views/pdf-designs/playful.html
index 31bbbfe608a9..76ae0da483d5 100644
--- a/resources/views/pdf-designs/playful.html
+++ b/resources/views/pdf-designs/playful.html
@@ -2,6 +2,7 @@
     :root {
         --primary-color: $primary_color;
         --secondary-color: $secondary_color;
+        --line-height: 1.6;
     }
 
     body {
@@ -24,8 +25,9 @@
 
     .header-wrapper {
         margin-top: 2rem;
-        display: grid;
-        grid-template-columns: 1fr 0.5fr 2fr;
+        display: flex;
+        justify-content: space-between;
+        gap: 20px;
         padding: 2rem 3rem;
     }
 
@@ -35,6 +37,8 @@
         border-radius: 10px;
     }
 
+    #entity-details p { margin-right: 20px; }
+
     .header-wrapper #entity-details {
         width: 100%;
         color: white;
@@ -249,6 +253,19 @@
         margin-bottom: 0;
     }
 
+    #footer-colors {
+        position: fixed;
+        bottom: 0;
+        min-width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+        margin-left: -10px;    
+   }
+
+   #footer-colors > * {
+        padding: 10px;
+    }
+
     /** Useful snippets, uncomment to enable. **/
     
     /** Hide company logo **/
@@ -292,13 +309,9 @@
 
 <div id="body">
     <div class="header-wrapper">
-        <img
-            class="company-logo"
-            src="$company.logo"
-            alt="$company.name logo"
-        />
-
-        <div></div>
+        <div>
+            <img class="company-logo" src="$company.logo" alt="$company.name logo">
+        </div>
 
         <div class="entity-details-wrapper">
             <table id="entity-details" cellspacing="0" dir="$dir"></table>
@@ -332,6 +345,17 @@
 <div id="footer">
     <p data-ref="total_table-footer">$entity_footer</p>
 
+    <div id="footer-colors">
+        <div style="background-color: #00968B"><!-- 1 --></div>
+        <div style="background-color: #1D756E"><!-- 2 --></div>
+        <div style="background-color: #FCB600"><!-- 3 --></div>
+        <div style="background-color: #BA932F"><!-- 4 --></div>
+        <div style="background-color: #A72A4E"><!-- 5 --></div>
+        <div style="background-color: #E20041"><!-- 6 --></div>
+        <div style="background-color: #F8B300"><!-- 7 --></div>
+        <div style="background-color: #009B8F"><!-- 8 --></div>
+    </div>
+
     <script>
         // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
         document.addEventListener('DOMContentLoaded', () => {