diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 7850651b..c32834f0 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -32,25 +32,25 @@ export function Header() {
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start" className="w-48 bg-background border border-border shadow-lg">
-                <DropdownMenuItem onClick={() => navigate('/parks')} className="hover:bg-blue-100 hover:text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
+                <DropdownMenuItem onClick={() => navigate('/parks')} className="hover:!bg-blue-100 hover:!text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
                   <MapPin className="w-4 h-4 mr-2" />
                   Parks
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => navigate('/rides')} className="hover:bg-blue-100 hover:text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
+                <DropdownMenuItem onClick={() => navigate('/rides')} className="hover:!bg-blue-100 hover:!text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
                   🎢 <span className="ml-2">Rides</span>
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => navigate('/manufacturers')} className="hover:bg-blue-100 hover:text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
+                <DropdownMenuItem onClick={() => navigate('/manufacturers')} className="hover:!bg-blue-100 hover:!text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
                   🏭 <span className="ml-2">Manufacturers</span>
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => navigate('/operators')} className="hover:bg-blue-100 hover:text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
+                <DropdownMenuItem onClick={() => navigate('/operators')} className="hover:!bg-blue-100 hover:!text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
                   <Building className="w-4 h-4 mr-2" />
                   Operators
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => navigate('/owners')} className="hover:bg-blue-100 hover:text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
+                <DropdownMenuItem onClick={() => navigate('/owners')} className="hover:!bg-blue-100 hover:!text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
                   <Crown className="w-4 h-4 mr-2" />
                   Owners
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => navigate('/designers')} className="hover:bg-blue-100 hover:text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
+                <DropdownMenuItem onClick={() => navigate('/designers')} className="hover:!bg-blue-100 hover:!text-blue-900 dark:hover:bg-blue-900/20 dark:hover:text-blue-100">
                   <Palette className="w-4 h-4 mr-2" />
                   Designers
                 </DropdownMenuItem>