diff --git a/components/BulkSelectionToolbar.js b/components/BulkSelectionToolbar.js
index 21438a7..f8b9fc2 100644
--- a/components/BulkSelectionToolbar.js
+++ b/components/BulkSelectionToolbar.js
@@ -44,20 +44,32 @@ export default function BulkSelectionToolbar({
 
   return (
     <div className="fixed bottom-4 left-4 right-4 sm:bottom-6 sm:left-1/2 sm:right-auto sm:transform sm:-translate-x-1/2 z-50">
-      <div className="bg-white rounded-xl shadow-2xl border border-gray-200 px-3 sm:px-6 py-3 sm:py-4 flex items-center justify-between sm:justify-start sm:space-x-4 sm:min-w-96">
+      <div
+        className="glass-panel-strong rounded-2xl px-3 sm:px-6 py-3 sm:py-4 flex items-center justify-between sm:justify-start sm:space-x-4 sm:min-w-96"
+        style={{
+          boxShadow:
+            'var(--rim-light-inner), var(--elevation-pronounced)',
+        }}
+      >
         {/* Selection Count */}
         <div className="flex items-center space-x-2">
           <div className="w-8 h-8 rounded-full flex items-center justify-center" style={{ backgroundColor: 'var(--accent-ember)' }}>
             <span className="text-white text-sm font-bold">{selectedCount}</span>
           </div>
-          <span className="text-gray-700 font-medium text-sm sm:text-base">
+          <span
+            className="font-medium text-sm sm:text-base"
+            style={{ color: 'var(--text-primary)' }}
+          >
             <span className="hidden sm:inline">{selectedCount} card{selectedCount !== 1 ? 's' : ''} selected</span>
             <span className="sm:hidden">{selectedCount}</span>
           </span>
         </div>
 
         {/* Divider - Hidden on mobile */}
-        <div className="hidden sm:block h-6 w-px bg-gray-300"></div>
+        <div
+          className="hidden sm:block h-6 w-px"
+          style={{ backgroundColor: 'var(--border)' }}
+        ></div>
 
         {/* Quick Actions */}
         <div className="flex items-center space-x-1 sm:space-x-2">
@@ -105,7 +117,8 @@ export default function BulkSelectionToolbar({
         <div className="relative">
           <button
             onClick={() => setShowActions(!showActions)}
-            className="p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg transition-colors"
+            className="nav-item-hover p-2 rounded-xl transition-colors"
+            style={{ color: 'var(--text-secondary)' }}
           >
             <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
@@ -114,13 +127,14 @@ export default function BulkSelectionToolbar({
 
           {/* Dropdown Actions */}
           {showActions && (
-            <div className="absolute bottom-full right-0 mb-2 bg-white rounded-lg shadow-xl border border-gray-200 py-2 min-w-48">
+            <div className="glass-panel-strong absolute bottom-full right-0 mb-2 rounded-xl py-2 min-w-48">
               <button
                 onClick={() => {
                   handleBulkFavorite();
                   setShowActions(false);
                 }}
-                className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center space-x-2"
+                className="nav-item-hover w-full px-4 py-2 text-left text-sm flex items-center space-x-2"
+                style={{ color: 'var(--text-primary)' }}
               >
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
@@ -133,7 +147,8 @@ export default function BulkSelectionToolbar({
                   handleRemoveFromOwned();
                   setShowActions(false);
                 }}
-                className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 flex items-center space-x-2"
+                className="nav-item-hover w-full px-4 py-2 text-left text-sm flex items-center space-x-2"
+                style={{ color: 'var(--text-primary)' }}
               >
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -141,14 +156,18 @@ export default function BulkSelectionToolbar({
                 <span>{VOCAB.REMOVE_FROM_MY_COLLECTION}</span>
               </button>
 
-              <div className="border-t border-gray-200 my-1"></div>
+              <div
+                className="my-1 border-t"
+                style={{ borderColor: 'var(--border)' }}
+              ></div>
 
               <button
                 onClick={() => {
                   handleBulkDelete();
                   setShowActions(false);
                 }}
-                className="w-full px-4 py-2 text-left text-sm text-red-600 hover:bg-red-50 flex items-center space-x-2"
+                className="nav-item-hover w-full px-4 py-2 text-left text-sm flex items-center space-x-2"
+                style={{ color: 'rgb(239, 68, 68)' }}
               >
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
@@ -162,7 +181,8 @@ export default function BulkSelectionToolbar({
         {/* Clear Selection */}
         <button
           onClick={onClearSelection}
-          className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+          className="nav-item-hover p-2 rounded-xl transition-colors"
+          style={{ color: 'var(--text-secondary)' }}
           title="Clear selection"
         >
           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">