diff --git a/frontend/src/pages/TripChecklist.tsx b/frontend/src/pages/TripChecklist.tsx
index 8257dc0..6580823 100644
--- a/frontend/src/pages/TripChecklist.tsx
+++ b/frontend/src/pages/TripChecklist.tsx
@@ -241,15 +241,20 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
   const progress = totalItems > 0 ? Math.round((checkedItems / totalItems) * 100) : 0;
 
   // Progress gradient for header background (always full width)
-  const progressGradient = `linear-gradient(140deg, #f59e42 0%, #facc15 50%, #22c55e 100%)`;
+  const progressGradient = `
+  linear-gradient(90deg,#facc15 0%, #22c55e 100%),
+  linear-gradient(to top, rgba(255,255,255,0) 6%, rgba(255, 255, 255, 1) 8%)
+`;
 
   return (
     <div className="py-4 max-w-5xl mx-auto">
       <div
-        className="mb-6 px-4 py-3 rounded-xl shadow flex flex-wrap items-center gap-4 relative"
+        className="mb-6 px-4 py-3 pb-6 rounded-xl border hadow shadow-md flex flex-wrap items-center gap-4 relative"
         style={{
           background: progressGradient,
+          backgroundBlendMode: "lighten",
           transition: "background 0.3s",
+          overflow: "visible",
         }}
       >
         {/* Overlay: shrinking box from the right */}