diff --git a/src/views/auth/Login.js b/src/views/auth/Login.js
index d8521559..8dcc0c4b 100644
--- a/src/views/auth/Login.js
+++ b/src/views/auth/Login.js
@@ -7,16 +7,16 @@ export default function Login() {
       <div className="container mx-auto px-4 h-full">
         <div className="flex content-center items-center justify-center h-full">
           <div className="w-full lg:w-4/12 px-4">
-            <div className="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-coolGray-200 border-0">
+            <div className="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-200 border-0">
               <div className="rounded-t mb-0 px-6 py-6">
                 <div className="text-center mb-3">
-                  <h6 className="text-coolGray-500 text-sm font-bold">
+                  <h6 className="text-blueGray-500 text-sm font-bold">
                     Sign in with
                   </h6>
                 </div>
                 <div className="btn-wrapper text-center">
                   <button
-                    className="bg-white active:bg-coolGray-50 text-coolGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+                    className="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
                     type="button"
                   >
                     <img
@@ -27,7 +27,7 @@ export default function Login() {
                     Github
                   </button>
                   <button
-                    className="bg-white active:bg-coolGray-50 text-coolGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
+                    className="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
                     type="button"
                   >
                     <img
@@ -38,37 +38,37 @@ export default function Login() {
                     Google
                   </button>
                 </div>
-                <hr className="mt-6 border-b-1 border-coolGray-300" />
+                <hr className="mt-6 border-b-1 border-blueGray-300" />
               </div>
               <div className="flex-auto px-4 lg:px-10 py-10 pt-0">
-                <div className="text-coolGray-400 text-center mb-3 font-bold">
+                <div className="text-blueGray-400 text-center mb-3 font-bold">
                   <small>Or sign in with credentials</small>
                 </div>
                 <form>
                   <div className="relative w-full mb-3">
                     <label
-                      className="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+                      className="block uppercase text-blueGray-600 text-xs font-bold mb-2"
                       htmlFor="grid-password"
                     >
                       Email
                     </label>
                     <input
                       type="email"
-                      className="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                      className="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                       placeholder="Email"
                     />
                   </div>
 
                   <div className="relative w-full mb-3">
                     <label
-                      className="block uppercase text-coolGray-600 text-xs font-bold mb-2"
+                      className="block uppercase text-blueGray-600 text-xs font-bold mb-2"
                       htmlFor="grid-password"
                     >
                       Password
                     </label>
                     <input
                       type="password"
-                      className="border-0 px-3 py-3 placeholder-coolGray-300 text-coolGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
+                      className="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                       placeholder="Password"
                     />
                   </div>
@@ -77,9 +77,9 @@ export default function Login() {
                       <input
                         id="customCheckLogin"
                         type="checkbox"
-                        className="form-checkbox border-0 rounded text-coolGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"
+                        className="form-checkbox border-0 rounded text-blueGray-700 ml-1 w-5 h-5 ease-linear transition-all duration-150"
                       />
-                      <span className="ml-2 text-sm font-semibold text-coolGray-600">
+                      <span className="ml-2 text-sm font-semibold text-blueGray-600">
                         Remember me
                       </span>
                     </label>
@@ -87,7 +87,7 @@ export default function Login() {
 
                   <div className="text-center mt-6">
                     <button
-                      className="bg-coolGray-800 text-white active:bg-coolGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
+                      className="bg-blueGray-800 text-white active:bg-blueGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
                       type="button"
                     >
                       Sign In
@@ -101,13 +101,13 @@ export default function Login() {
                 <a
                   href="#pablo"
                   onClick={(e) => e.preventDefault()}
-                  className="text-coolGray-200"
+                  className="text-blueGray-200"
                 >
                   <small>Forgot password?</small>
                 </a>
               </div>
               <div className="w-1/2 text-right">
-                <Link to="/auth/register" className="text-coolGray-200">
+                <Link to="/auth/register" className="text-blueGray-200">
                   <small>Create new account</small>
                 </Link>
               </div>