diff --git a/web/src/pages/auth/LoginPage.tsx b/web/src/pages/auth/LoginPage.tsx
index f30817d..7ed131a 100644
--- a/web/src/pages/auth/LoginPage.tsx
+++ b/web/src/pages/auth/LoginPage.tsx
@@ -68,11 +68,11 @@ export default function LoginPage() {
         alignItems: 'center',
         justifyContent: 'flex-start',
         pt: '7%',
-        bgcolor: '#1F2933',
+        background: 'linear-gradient(135deg, #073B4C 0%, #172554 100%)',
       }}
     >
-      <Box sx={{ width: '100%', maxWidth: 400, mx: 2 }}>
-        <Card sx={{ borderRadius: '8px', boxShadow: '0 0 10px rgba(0,0,0,0.3)', border: 'none' }}>
+      <Box sx={{ width: '100%', maxWidth: 420, mx: 2 }}>
+        <Card sx={{ borderRadius: '10px', boxShadow: '0 12px 32px rgba(15,23,42,0.24)', border: 'none' }}>
           <Box
             sx={{
               height: 100,
@@ -80,7 +80,7 @@ export default function LoginPage() {
               alignItems: 'center',
               justifyContent: 'center',
               bgcolor: '#fff',
-              borderBottom: '1px solid #b8b5b5',
+              borderBottom: '1px solid #D6E0EA',
               px: 3,
             }}
           >
@@ -95,7 +95,7 @@ export default function LoginPage() {
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              borderBottom: '1px solid #b8b5b5',
+              borderBottom: '1px solid #D6E0EA',
             }}
           >
             <Typography sx={{ fontSize: '14px', fontWeight: 700, color: '#fff' }}>
@@ -121,7 +121,7 @@ export default function LoginPage() {
                     startIcon={<AdminPanelSettingsIcon />}
                     onClick={() => handleDevLogin('SysAdmin')}
                     disabled={loading}
-                    sx={{ py: 1.5, bgcolor: '#0B4F6C', '&:hover': { bgcolor: '#07384D' } }}
+                    sx={{ py: 1.5, height: 64, borderRadius: '8px', bgcolor: '#0B5A73', '&:hover': { bgcolor: '#084A5F' } }}
                   >
                     <Box sx={{ textAlign: 'left', flex: 1 }}>
                       <Box>SysAdmin</Box>
@@ -135,11 +135,11 @@ export default function LoginPage() {
                     startIcon={<EngineeringIcon />}
                     onClick={() => handleDevLogin('Admin')}
                     disabled={loading}
-                    sx={{ py: 1.5, bgcolor: '#003A5D', '&:hover': { bgcolor: '#00527d' } }}
+                    sx={{ py: 1.5, height: 64, borderRadius: '8px', bgcolor: '#0B5A73', '&:hover': { bgcolor: '#084A5F' } }}
                   >
                     <Box sx={{ textAlign: 'left', flex: 1 }}>
                       <Box>Admin</Box>
-                      <Box sx={{ fontSize: '11px', fontWeight: 400, opacity: 0.8 }}>Review and approve proposals</Box>
+                      <Box sx={{ fontSize: '11px', fontWeight: 400, opacity: 0.8 }}>Review, price, and approve proposals</Box>
                     </Box>
                   </Button>
                   <Button
@@ -149,7 +149,7 @@ export default function LoginPage() {
                     startIcon={<PersonIcon />}
                     onClick={() => handleDevLogin('Dispatcher')}
                     disabled={loading}
-                    sx={{ py: 1.5, bgcolor: '#003A5D', '&:hover': { bgcolor: '#00527d' } }}
+                    sx={{ py: 1.5, height: 64, borderRadius: '8px', bgcolor: '#0B5A73', '&:hover': { bgcolor: '#084A5F' } }}
                   >
                     <Box sx={{ textAlign: 'left', flex: 1 }}>
                       <Box>Dispatcher</Box>
@@ -173,7 +173,7 @@ export default function LoginPage() {
                   fullWidth
                   startIcon={<GoogleIcon />}
                   href={buildLoginUrl()}
-                  sx={{ py: 1.5, bgcolor: '#0B4F6C', '&:hover': { bgcolor: '#07384D' } }}
+                  sx={{ py: 1.5, height: 64, borderRadius: '8px', bgcolor: '#0B5A73', '&:hover': { bgcolor: '#084A5F' } }}
                 >
                   Sign in with Google
                 </Button>