diff --git a/src/components/LoginPage.tsx b/src/components/LoginPage.tsx
index 36c351c..e482abd 100644
--- a/src/components/LoginPage.tsx
+++ b/src/components/LoginPage.tsx
@@ -57,10 +57,11 @@ export const LoginPage = ({ onLogin }: LoginPageProps) => {
   return (
     <div className="min-h-screen flex">
       {/* Left side with purple gradient */}
-      <div className="flex-1 bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 flex items-center justify-center text-white p-12">
-        <div className="max-w-md">
-          <h1 className="text-4xl font-bold mb-4">Cash Management Dashboard</h1>
-          <p className="text-lg text-purple-100">Real-time Cash Reconciliation – Ensuring Accuracy & Transparency</p>
+      <div class="bg-gradient-to-br flex flex-1 items-center justify-center p-12 text-white"
+           style="--tw-gradient-from: #4C4895; --tw-gradient-to: #37337b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);">
+        <div class="max-w-md">
+          <h1 class="text-4xl font-bold mb-4">Cash Management Dashboard</h1>
+          <p class="text-lg text-purple-100">Real-time Cash Reconciliation – Ensuring Accuracy &amp; Transparency</p>
         </div>
       </div>