diff --git a/web/src/themes/typography.js b/web/src/themes/typography.js
index f20d87a5..6a5fa02c 100644
--- a/web/src/themes/typography.js
+++ b/web/src/themes/typography.js
@@ -145,6 +145,11 @@ export default function themeTypography(theme) {
     },
     SubCard: {
       border: theme.mode === 'dark' ? '1px solid rgba(227, 232, 239, 0.2)' : '1px solid rgb(227, 232, 239)'
+    },
+    LoginButton: {
+      color: theme.darkTextPrimary,
+      backgroundColor: theme.mode === 'dark' ? theme.backgroundDefault : theme.colors?.grey50,
+      borderColor: theme.mode === 'dark' ? theme.colors?.grey700 : theme.colors?.grey100
     }
   };
 }
diff --git a/web/src/views/Authentication/AuthForms/AuthLogin.js b/web/src/views/Authentication/AuthForms/AuthLogin.js
index 81d9f6ff..d22dd6ff 100644
--- a/web/src/views/Authentication/AuthForms/AuthLogin.js
+++ b/web/src/views/Authentication/AuthForms/AuthLogin.js
@@ -85,9 +85,7 @@ const LoginForm = ({ ...others }) => {
                   size="large"
                   variant="outlined"
                   sx={{
-                    color: 'grey.700',
-                    backgroundColor: theme.palette.grey[50],
-                    borderColor: theme.palette.grey[100]
+                    ...theme.typography.LoginButton
                   }}
                 >
                   <Box sx={{ mr: { xs: 1, sm: 2, width: 20 }, display: 'flex', alignItems: 'center' }}>
@@ -108,9 +106,7 @@ const LoginForm = ({ ...others }) => {
                   size="large"
                   variant="outlined"
                   sx={{
-                    color: 'grey.700',
-                    backgroundColor: theme.palette.grey[50],
-                    borderColor: theme.palette.grey[100]
+                    ...theme.typography.LoginButton
                   }}
                 >
                   <Box sx={{ mr: { xs: 1, sm: 2, width: 20 }, display: 'flex', alignItems: 'center' }}>
@@ -132,9 +128,7 @@ const LoginForm = ({ ...others }) => {
                   size="large"
                   variant="outlined"
                   sx={{
-                    color: 'grey.700',
-                    backgroundColor: theme.palette.grey[50],
-                    borderColor: theme.palette.grey[100]
+                    ...theme.typography.LoginButton
                   }}
                 >
                   <Box sx={{ mr: { xs: 1, sm: 2, width: 20 }, display: 'flex', alignItems: 'center' }}>