diff --git a/src/App.jsx b/src/App.jsx
index d918bad..863d491 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -175,34 +175,14 @@ function App() {
 
   return (
     <div className="container">
-      {/* Header - Visible on screen and print */}
-      <div className="header">
+      {/* Header - Visible on screen */}
+      <div className="header no-print">
         <img src="/Logo.jpg" alt="Company Logo" style={{ height: '80px', marginBottom: '1rem' }} />
         <h1>Little Beaver Earth Augers</h1>
         <p>{isWorkOrderMode ? 'Work Order' : 'Official Quote Generator'}</p>
 
       </div>
 
-      {/* Print-only details */}
-      <div style={{ display: 'none' }} className="print-only-block">
-        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2rem' }}>
-          <div>
-            <h3>Quote For:</h3>
-            <p>{customer.name || 'N/A'}</p>
-            {customer.contactName && <p><strong>Attn:</strong> {customer.contactName}</p>}
-            <p>{customer.address || 'N/A'}</p>
-            <p>{customer.city ? `${customer.city}, ` : ''}{customer.province} {customer.postalCode}</p>
-            <p>{customer.phone || 'N/A'}</p>
-            <p>{customer.email || 'N/A'}</p>
-          </div>
-          <div style={{ textAlign: 'right' }}>
-            <h3>{isWorkOrderMode ? 'Work Order Details:' : 'Quote Details:'}</h3>
-            <p><strong>Date:</strong> {quoteDate}</p>
-            <p><strong>{isWorkOrderMode ? 'Work Order #:' : 'Quote #:'}</strong> {quoteId}</p>
-          </div>
-        </div>
-      </div>
-
 
 
       <div className="no-print" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
@@ -225,6 +205,8 @@ function App() {
       <QuoteSummary
         items={quoteItems}
         customer={customer}
+        quoteId={quoteId}
+        quoteDate={quoteDate}
         shippingCost={shippingCost}
         onShippingChange={setShippingCost}
         onRemoveItem={handleRemoveItem}
diff --git a/src/components/QuoteSummary.jsx b/src/components/QuoteSummary.jsx
index ebd25c1..d8b1975 100644
--- a/src/components/QuoteSummary.jsx
+++ b/src/components/QuoteSummary.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Trash2 } from 'lucide-react';
 
-export default function QuoteSummary({ items, customer, shippingCost, onShippingChange, onRemoveItem, onEditItem, isWorkOrderMode }) {
+export default function QuoteSummary({ items, customer, quoteId, quoteDate, shippingCost, onShippingChange, onRemoveItem, onEditItem, isWorkOrderMode }) {
     const provinceTaxRates = {
         'ON': 0.13,  // Ontario (HST)
         'QC': 0.05, // Quebec (GST)
@@ -57,6 +57,31 @@ export default function QuoteSummary({ items, customer, shippingCost, onShipping
             <div className="table-container">
                 <table>
                     <thead>
+                        <tr className="print-only-block" style={{ display: 'none' }}>
+                            <th colSpan={isWorkOrderMode ? 6 : 7} style={{ background: 'white', border: 'none', padding: '0 0 1.5rem 0' }}>
+                                <div style={{ textAlign: 'center', marginBottom: '1.5rem' }}>
+                                    <img src="/Logo.jpg" alt="Company Logo" style={{ height: '80px', marginBottom: '1rem' }} />
+                                    <h1 style={{ fontSize: '1.8rem', color: 'black', margin: '0 0 0.5rem 0', WebkitTextFillColor: 'black', background: 'none' }}>Little Beaver Earth Augers</h1>
+                                    <p style={{ fontSize: '1rem', color: 'black', margin: 0 }}>{isWorkOrderMode ? 'Work Order' : 'Official Quote'}</p>
+                                </div>
+                                <div style={{ display: 'flex', justifyContent: 'space-between', textAlign: 'left', fontWeight: 'normal' }}>
+                                    <div>
+                                        <h3 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', color: 'black' }}>Quote For:</h3>
+                                        <p style={{ margin: 0, color: 'black' }}>{customer.name || 'N/A'}</p>
+                                        {customer.contactName && <p style={{ margin: 0, color: 'black' }}><strong>Attn:</strong> {customer.contactName}</p>}
+                                        <p style={{ margin: 0, color: 'black' }}>{customer.address || 'N/A'}</p>
+                                        <p style={{ margin: 0, color: 'black' }}>{customer.city ? `${customer.city}, ` : ''}{customer.province} {customer.postalCode}</p>
+                                        <p style={{ margin: 0, color: 'black' }}>{customer.phone || 'N/A'}</p>
+                                        <p style={{ margin: 0, color: 'black' }}>{customer.email || 'N/A'}</p>
+                                    </div>
+                                    <div style={{ textAlign: 'right' }}>
+                                        <h3 style={{ margin: '0 0 0.5rem 0', fontSize: '1.1rem', color: 'black' }}>{isWorkOrderMode ? 'Work Order Details:' : 'Quote Details:'}</h3>
+                                        <p style={{ margin: 0, color: 'black' }}><strong>Date:</strong> {quoteDate}</p>
+                                        <p style={{ margin: 0, color: 'black' }}><strong>{isWorkOrderMode ? 'Work Order #:' : 'Quote #:'}</strong> {quoteId}</p>
+                                    </div>
+                                </div>
+                            </th>
+                        </tr>
                         <tr>
                             <th>Item ID</th>
                             <th>Description</th>