diff --git a/src/app/globals.css b/src/app/globals.css
index 4d042b1..e37b231 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -22,6 +22,10 @@
 
   --button-text-size: 18px;
 
+  --neutral-50: rgb(204, 204, 204, 0.5);
+  --neutral-75: rgb(204, 204, 204, 0.75);
+  --neutral-100: rgb(204, 204, 204, 1);
+
   --textbox-50: rgb(204, 204, 204, 0.5);
   --textbox-75: rgb(204, 204, 204, 0.75);
   --textbox-100: rgb(204, 204, 204, 1);
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 27fc99c..68b1584 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,14 +1,13 @@
 // /home/max/Git/MeetUp/src/app/login/page.tsx
 import { auth } from '@/auth';
 import LabeledInput from '@/components/labeled-input';
-import Login from '@/components/user/sso-login-button';
+import SSOLogin from '@/components/user/sso-login-button';
+import Login from '@/components/user/login-button';
 import { redirect } from 'next/navigation';
 
 import style from './login.module.css';
 
 import '@/app/globals.css';
-import SSOLogin from '@/components/user/sso-login-button';
-import Login from '@/components/user/login-button';
 
 export default async function LoginPage() {
   const session = await auth();
@@ -34,7 +33,7 @@ export default async function LoginPage() {
         />
       </form>
 
-      <Login provider={''} providerDisplayName={''}></Login>
+      <Login></Login>
 
       <hr style={{ width: 230 }} />
 
diff --git a/src/components/button.module.css b/src/components/button.module.css
index 0a9df2d..05fb359 100644
--- a/src/components/button.module.css
+++ b/src/components/button.module.css
@@ -52,3 +52,9 @@
   --color-75: var(--danger-75);
   --color-100: var(--danger-100);
 }
+
+.style_neutral {
+  --color-50: var(--neutral-50);
+  --color-75: var(--neutral-75);
+  --color-100: var(--neutral-100);
+}
diff --git a/src/components/button.tsx b/src/components/button.tsx
index 50d1947..87094ad 100644
--- a/src/components/button.tsx
+++ b/src/components/button.tsx
@@ -12,7 +12,7 @@ export default function Button({
 }: {
   type?: 'button' | 'submit' | 'reset';
   children?: React.ReactNode;
-  mode?: 'primary' | 'warning' | 'success' | 'danger';
+  mode?: 'primary' | 'warning' | 'success' | 'danger' | 'neutral';
   icon?: IconProp;
   width?: number;
 }) {
diff --git a/src/components/user/login-button.tsx b/src/components/user/login-button.tsx
index f503cec..2a33cd9 100644
--- a/src/components/user/login-button.tsx
+++ b/src/components/user/login-button.tsx
@@ -1,9 +1,9 @@
 import Button from '../button';
 
-export default function Login() {
+export default function Login({}: {}) {
   return (
     <form>
-      <Button type='submit' mode='primary' width={250}>
+      <Button type='submit' mode='neutral' width={250}>
         Login
       </Button>
     </form>