diff --git a/src/pages/sign-in.tsx b/src/pages/sign-in.tsx
index 500f220..8fd0db4 100644
--- a/src/pages/sign-in.tsx
+++ b/src/pages/sign-in.tsx
@@ -18,17 +18,17 @@ const SignIn = ({
         <meta name="description" content="Generated by create-t3-app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
-        <div className="border-y border-gray-700 bg-gray-800 px-4 py-8 shadow sm:rounded-lg sm:border-x sm:px-10">
+      <main className="flex min-h-screen flex-col items-center justify-center bg-[#f9fafb]">
+        <div className="bg-white px-4 py-8 shadow shadow sm:rounded-lg sm:px-10">
           <div className="animate-fade-in flex flex-col justify-center text-center">
-            <span className="text-sm font-medium text-gray-300">
+            <span className="text-sm font-medium text-gray-700">
               Sign in with
             </span>
             <div className="mt-6 grid grid-cols-2 gap-3">
               {Object.values(providers).map((provider) => (
                 <button
                   key={provider.id}
-                  className="hover:bg-gray-750 relative inline-flex items-center justify-center rounded-md border border-gray-700 bg-gray-800 px-6 py-3 text-lg font-medium text-white shadow-sm hover:text-gray-100"
+                  className="relative inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-6 py-3 text-lg text-sm font-medium text-gray-500 shadow-sm hover:bg-gray-50"
                   type="button"
                   onClick={() =>
                     void signIn(provider.id, {