diff --git a/components/editor/EditControls.tsx b/components/editor/EditControls.tsx
index 0807342..e690c6f 100644
--- a/components/editor/EditControls.tsx
+++ b/components/editor/EditControls.tsx
@@ -37,17 +37,17 @@ export function EditControls({
     <div className={cn('space-y-4', className)}>
       {/* Selection Info */}
       {hasSelection && (
-        <div className="rounded-lg border border-info bg-info/10 p-3">
+        <div className="rounded-lg border-2 border-info bg-info/90 p-3">
           <div className="flex items-start gap-2">
-            <Info className="h-4 w-4 text-info-foreground mt-0.5 flex-shrink-0" />
-            <div className="flex-1 min-w-0 text-sm">
-              <p className="font-medium text-info-foreground">Selection Active</p>
-              <p className="text-info-foreground/90 mt-1">
+            <Info className="h-4 w-4 text-white dark:text-white mt-0.5 flex-shrink-0" />
+            <div className="flex-1 min-w-0 text-sm text-white dark:text-white">
+              <p className="font-medium">Selection Active</p>
+              <p className="opacity-95 mt-1">
                 Duration: {formatDuration(selectionDuration)} |
                 Start: {formatDuration(selection.start)} |
                 End: {formatDuration(selection.end)}
               </p>
-              <p className="text-xs text-info-foreground/75 mt-1">
+              <p className="text-xs opacity-90 mt-1">
                 Tip: Hold Shift and drag on the waveform to select a region
               </p>
             </div>
diff --git a/components/editor/HistoryControls.tsx b/components/editor/HistoryControls.tsx
index 5251756..bbda2f9 100644
--- a/components/editor/HistoryControls.tsx
+++ b/components/editor/HistoryControls.tsx
@@ -25,21 +25,21 @@ export function HistoryControls({
     <div className={cn('space-y-4', className)}>
       {/* History Info */}
       {historyState.historySize > 0 && (
-        <div className="rounded-lg border border-info bg-info/10 p-3">
+        <div className="rounded-lg border-2 border-info bg-info/90 p-3">
           <div className="flex items-start gap-2">
-            <Info className="h-4 w-4 text-info-foreground mt-0.5 flex-shrink-0" />
-            <div className="flex-1 min-w-0 text-sm">
-              <p className="font-medium text-info-foreground">History Available</p>
-              <p className="text-info-foreground/90 mt-1">
+            <Info className="h-4 w-4 text-white dark:text-white mt-0.5 flex-shrink-0" />
+            <div className="flex-1 min-w-0 text-sm text-white dark:text-white">
+              <p className="font-medium">History Available</p>
+              <p className="opacity-95 mt-1">
                 {historyState.historySize} action{historyState.historySize !== 1 ? 's' : ''} in history
               </p>
               {historyState.undoDescription && (
-                <p className="text-xs text-info-foreground/75 mt-1">
+                <p className="text-xs opacity-90 mt-1">
                   Next undo: {historyState.undoDescription}
                 </p>
               )}
               {historyState.redoDescription && (
-                <p className="text-xs text-info-foreground/75 mt-1">
+                <p className="text-xs opacity-90 mt-1">
                   Next redo: {historyState.redoDescription}
                 </p>
               )}