diff --git a/frontend/src/components/VersionSelector.tsx b/frontend/src/components/VersionSelector.tsx
index f9fb981d..0291f540 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-[0_0_20px_rgb(37,99,235)] overflow-hidden"
+          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"
         >
           <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-[0_0_20px_rgb(37,99,235)] overflow-hidden"
+          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"
         >
           <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-[0_0_20px_rgb(37,99,235)] overflow-hidden"
+          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"
         >
           <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-[0_0_20px_rgb(37,99,235)] overflow-hidden"
+          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"
         >
           <div className="p-6">
             <div className="flex flex-col items-center text-center">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 948aa130..4345057c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -12,12 +12,14 @@
 @layer base {
   html {
     font-family: 'Gentium Book Basic', 'Georgia', serif;
+    font-size: 18px;
   }
 
   body {
     @apply bg-gray-50 text-gray-900 dark:bg-gray-50 dark:text-gray-100;
     font-family: 'Gentium Book Basic', 'Georgia', serif;
     line-height: 1.6;
+    font-size: 1rem;
   }
 }