diff --git a/packages/web/app/components/queue-control/queue-control-bar.module.css b/packages/web/app/components/queue-control/queue-control-bar.module.css
index 54f8598c..84cd656b 100644
--- a/packages/web/app/components/queue-control/queue-control-bar.module.css
+++ b/packages/web/app/components/queue-control/queue-control-bar.module.css
@@ -1,7 +1,7 @@
 .queueBar {
   flex-shrink: 0;
   width: 100%;
-  background-color: var(--semantic-surface);
+  background-color: transparent;
 }
 
 .card {
@@ -22,6 +22,7 @@
     border-radius: 16px;
     border: 1px solid var(--neutral-200);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
   }
 }
 
@@ -106,6 +107,8 @@
 .swipeContainer {
   touch-action: manipulation;
   transition: background-color 300ms ease;
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
 }
 
 /* Clip container for text swipe — hides overflow during slide */
diff --git a/packages/web/app/components/queue-control/queue-control-bar.tsx b/packages/web/app/components/queue-control/queue-control-bar.tsx
index aeb4263f..627975c9 100644
--- a/packages/web/app/components/queue-control/queue-control-bar.tsx
+++ b/packages/web/app/components/queue-control/queue-control-bar.tsx
@@ -271,7 +271,7 @@ const QueueControlBar: React.FC<QueueControlBarProps> = ({ boardDetails, angle }
   return (
     <div id="onboarding-queue-bar" className={`queue-bar-shadow ${styles.queueBar}`} data-testid="queue-control-bar">
       {/* Main Control Bar */}
-      <MuiCard variant="outlined" className={styles.card} sx={{ border: 'none' }}>
+      <MuiCard variant="outlined" className={styles.card} sx={{ border: 'none', background: 'transparent' }}>
         <CardContent sx={{ p: 0, '&:last-child': { pb: 0 } }}>
         {/* Swipe container - captures swipe gestures, does NOT translate */}
         <div className={styles.swipeWrapper}>
@@ -280,7 +280,9 @@ const QueueControlBar: React.FC<QueueControlBarProps> = ({ boardDetails, angle }
             className={styles.swipeContainer}
             style={{
               padding: `6px ${themeTokens.spacing[3]}px 6px ${themeTokens.spacing[3]}px`,
-              backgroundColor: gradeTintColor ?? themeTokens.semantic.surface,
+              backgroundColor: gradeTintColor
+                ? gradeTintColor.replace('hsl(', 'hsla(').replace(')', ', 0.85)')
+                : 'rgba(255, 255, 255, 0.6)',
             }}
           >
             <Box sx={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center' }} className={styles.row}>