Landing imporvement

frontend/src/components/dashboard/ActionQueueCard.tsx

@@ -177,12 +177,36 @@ function ActionItemCard({
       {/* Action Buttons */}
       <div className="flex flex-wrap gap-2">
         {(action.actions || []).map((button, index) => {
-          const buttonStyles = {
-            primary: 'bg-blue-600 hover:bg-blue-700 text-white',
-            secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800',
-            tertiary: 'bg-white hover:bg-gray-50 text-gray-700 border border-gray-300',
+          const buttonStyles: Record<string, React.CSSProperties> = {
+            primary: {
+              backgroundColor: 'var(--color-info-600)',
+              color: 'var(--text-inverse, #ffffff)',
+            },
+            secondary: {
+              backgroundColor: 'var(--bg-tertiary)',
+              color: 'var(--text-primary)',
+            },
+            tertiary: {
+              backgroundColor: 'var(--bg-primary)',
+              color: 'var(--text-primary)',
+              border: '1px solid var(--border-primary)',
+            },
           };
 
+          const hoverStyles: Record<string, React.CSSProperties> = {
+            primary: {
+              backgroundColor: 'var(--color-info-700)',
+            },
+            secondary: {
+              backgroundColor: 'var(--bg-quaternary)',
+            },
+            tertiary: {
+              backgroundColor: 'var(--bg-secondary)',
+            },
+          };
+
+          const [isHovered, setIsHovered] = useState(false);
+
           const handleClick = () => {
             if (button.action === 'approve' && onApprove) {
               onApprove(action.id);
@@ -193,11 +217,19 @@ function ActionItemCard({
             }
           };
 
+          const currentStyle = {
+            ...buttonStyles[button.type],
+            ...(isHovered ? hoverStyles[button.type] : {}),
+          };
+
           return (
             <button
               key={index}
               onClick={handleClick}
-              className={`${buttonStyles[button.type]} px-4 py-2 rounded-lg font-semibold text-sm transition-colors duration-200 flex items-center gap-2 min-h-[44px]`}
+              onMouseEnter={() => setIsHovered(true)}
+              onMouseLeave={() => setIsHovered(false)}
+              className="px-4 py-2 rounded-lg font-semibold text-sm transition-colors duration-200 flex items-center gap-2 min-h-[44px]"
+              style={currentStyle}
             >
               {button.action === 'approve' && <CheckCircle2 className="w-4 h-4" />}
               {button.action === 'view_details' && <Eye className="w-4 h-4" />}

frontend/src/components/dashboard/ProductionTimelineCard.tsx

@@ -67,7 +67,7 @@ function TimelineItemCard({
 
   return (
     <div
-      className="flex gap-4 p-4 rounded-lg border hover:shadow-md transition-shadow duration-200"
+      className="flex gap-4 p-4 md:p-5 rounded-lg border-2 hover:shadow-md transition-all duration-200"
       style={{
         backgroundColor: 'var(--bg-primary)',
         borderColor: 'var(--border-primary)',