diff --git a/src/AgentAssigned.jsx b/src/AgentAssigned.jsx
index f01a8a612155454e3cea2c628ecbbb94aac43c22..7845d2e5c47c46ff65243818c5bc05355f9dd9ac 100644
--- a/src/AgentAssigned.jsx
+++ b/src/AgentAssigned.jsx
@@ -5,7 +5,7 @@ const AgentAssigned = () => {
   const navigate = useNavigate();
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-blue-100">
+    <div className="flex items-center justify-center min-h-screen" style={{ background: '#E9FAFF' }}>
       <div className="absolute top-[66px] left-[139px]">
         <h1 className="font-montserrat font-bold text-[48.31px] leading-[100%]">
           OMPOI - Seller
diff --git a/src/AgentPayment.jsx b/src/AgentPayment.jsx
index da41a88eb65d4025c3ba7b54238cfea8b7660254..3483e88792a3aaed15741b9b0184e6f660f85e4c 100644
--- a/src/AgentPayment.jsx
+++ b/src/AgentPayment.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 const AgentPayment = () => {
   return (
-    <div className="flex items-center justify-center min-h-screen bg-blue-100">
+    <div className="flex items-center justify-center min-h-screen" style={{ background: '#E9FAFF' }}>
       <div className="absolute top-[66px] left-[139px]">
         <h1 className="font-montserrat font-bold text-[48.31px] leading-[100%]">
           OMPOI - Seller
diff --git a/src/AgentStatus.jsx b/src/AgentStatus.jsx
index 541ddc1fed524e3caec1d6a9decd4cda80a6b707..514edd711b9680e69d7f3e336bfbd5a979131af9 100644
--- a/src/AgentStatus.jsx
+++ b/src/AgentStatus.jsx
@@ -5,7 +5,7 @@ const AgentStatus = () => {
   const navigate = useNavigate(); // Hook to navigate pages
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-blue-100">
+    <div className="flex items-center justify-center min-h-screen" style={{ background: '#E9FAFF' }}>
       <div className="absolute top-[66px] left-[139px]">
         <h1 className="font-montserrat font-bold text-[48.31px] leading-[100%]">
           OMPOI - Seller
diff --git a/src/AgentVerified.jsx b/src/AgentVerified.jsx
index 86d41e157bbbcaf87d41f7c4689ff5d6b4b3549c..0b9b8ba42df943c150433674d9db097a817282d6 100644
--- a/src/AgentVerified.jsx
+++ b/src/AgentVerified.jsx
@@ -5,7 +5,7 @@ const AgentVerified = () => {
   const navigate = useNavigate();
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-blue-100">
+    <div className="flex items-center justify-center min-h-screen" style={{ background: '#E9FAFF' }}>
       <div className="absolute top-[66px] left-[139px]">
         <h1 className="font-montserrat font-bold text-[48.31px] leading-[100%]">
           OMPOI - Seller
diff --git a/src/LoginPage.jsx b/src/LoginPage.jsx
index 513775be9ccbfe2687cc7f33c6e6bb83319bbeca..689b4371e70871352ecf12ff04132b9910f55b38 100644
--- a/src/LoginPage.jsx
+++ b/src/LoginPage.jsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import MailIcon from "d:/360ExtremeBrowserDownload/Mail.svg";
 import PasswordEyeIcon from "d:/360ExtremeBrowserDownload/Password eye.svg";
+import Line2 from "d:/360ExtremeBrowserDownload/Line 2.svg";
 import './styles.css'; // Import the CSS file
 
 const LoginPage = () => {
@@ -37,13 +38,13 @@ const LoginPage = () => {
   };
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-blue-100">
+    <div className="flex items-center justify-center min-h-screen" style={{ background: '#E9FAFF' }}>
       <div className="absolute top-[66px] left-[139px]">
         <h1 className="font-montserrat font-bold text-[48.31px] leading-[100%]">
           OMPOI - Seller
         </h1>
       </div>
-      <div className="absolute top-[194px] left-[134px] bg-white p-8 rounded-[32.6px] shadow-lg w-[1460.608px] h-[729px] flex">
+      <div className="absolute bg-white p-8 flex" style={{ width: '1460.608px', height: '729px', top: '194px', left: '134px', borderRadius: '32.6px', boxShadow: '0px 3.91px 11.74px 0px #2E268414' }}>
         {/* Left Side - Illustration */}
         <div className="w-1/2 flex items-center justify-center p-5">
           <img
@@ -53,9 +54,20 @@ const LoginPage = () => {
           />
         </div>
 
+        {/* Divider */}
+        <div className="absolute" style={{ width: '624.6708374023443px', top: '52.16px', left: '730.3px', transform: 'rotate(-90deg)', borderWidth: '1.3px', border: '1.3px solid #E2E7EE' }}>
+          <img
+            src={Line2}
+            alt="Line Divider"
+            className="w-full h-auto"
+          />
+        </div>
+
         {/* Right Side - Login Form */}
         <div className="w-1/2 p-10 flex flex-col justify-center">
-          <h2 className="text-2xl font-semibold mb-6">Check Status</h2>
+          <div style={{ width: '231px', height: '41px', top: '105px', left: '996px', position: 'absolute', fontFamily: 'Montserrat', fontWeight: '600', fontSize: '33.91px', lineHeight: '100%', letterSpacing: '0px', color: '#101418' }}>
+            Check Status
+          </div>
           
           <div className="mb-4">
             <label className="block text-gray-600 mb-1">Email ID</label>
@@ -98,13 +110,15 @@ const LoginPage = () => {
             <a href="#" className="text-orange-500 font-medium">Create an Account</a>
           </div>
 
-          {/* Updated button to navigate to Status Page with animation */}
-          <button
-            onClick={handleCheckStatusClick}
-            className="w-full bg-transparent border-2 border-orange-500 text-orange-500 py-2 rounded-full hover:bg-orange-500 hover:text-white transition animated-button"
-          >
-            Check Status
-          </button>
+          <div style={{ width: '222.44px', height: '61.8px', top: '524.08px', left: '984.24px', position: 'absolute', borderRadius: '34.76px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+            <button
+              onClick={handleCheckStatusClick}
+              className="w-full bg-transparent text-orange-500 py-2 rounded-full hover:bg-orange-500 hover:text-white transition animated-button"
+              style={{ fontSize: '22.24px', fontFamily: 'Montserrat', fontWeight: '500', lineHeight: '33.37px', letterSpacing: '0.14px', wordWrap: 'break-word', border: '2.13px solid #FFBD69' }}
+            >
+              Check Status
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/StatusPage.jsx b/src/StatusPage.jsx
index 023e0cbb38efa860e52a7c70d0b77dd93c3a58db..3d6c4d00a72b0aafe80418b162723a92c53f27ab 100644
--- a/src/StatusPage.jsx
+++ b/src/StatusPage.jsx
@@ -5,7 +5,7 @@ const StatusPage = () => {
   const navigate = useNavigate();
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-blue-100">
+    <div className="flex items-center justify-center min-h-screen" style={{ background: '#E9FAFF' }}>
       <div className="absolute top-[66px] left-[139px]">
         <h1 className="font-montserrat font-bold text-[48.31px] leading-[100%]">
           OMPOI - Seller