diff --git a/frontend/src/components/VersionSelector.tsx b/frontend/src/components/VersionSelector.tsx
index 0291f540..50e9f90d 100644
--- a/frontend/src/components/VersionSelector.tsx
+++ b/frontend/src/components/VersionSelector.tsx
@@ -37,7 +37,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
         {/* ESV Card */}
         <div
           onClick={() => onVersionSelect('esv')}
-          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer hover:shadow-blue-500/50 overflow-hidden"
+          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-200 cursor-pointer overflow-hidden"
         >
           <div className="p-6">
             <div className="flex flex-col items-center text-center">
@@ -60,7 +60,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
         {/* NKJV Card */}
         <div
           onClick={() => onVersionSelect('nkjv')}
-          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer hover:shadow-blue-500/50 overflow-hidden"
+          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-200 cursor-pointer overflow-hidden"
         >
           <div className="p-6">
             <div className="flex flex-col items-center text-center">
@@ -83,7 +83,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
         {/* NLT Card */}
         <div
           onClick={() => onVersionSelect('nlt')}
-          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer hover:shadow-blue-500/50 overflow-hidden"
+          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-200 cursor-pointer overflow-hidden"
         >
           <div className="p-6">
             <div className="flex flex-col items-center text-center">
@@ -106,7 +106,7 @@ const VersionSelector: React.FC<VersionSelectorProps> = ({ onVersionSelect, onSe
         {/* CSB Card */}
         <div
           onClick={() => onVersionSelect('csb')}
-          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 cursor-pointer hover:shadow-blue-500/50 overflow-hidden"
+          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md hover:shadow-lg hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-200 cursor-pointer overflow-hidden"
         >
           <div className="p-6">
             <div className="flex flex-col items-center text-center">