diff --git a/components/AuthText.js b/components/AuthText.js
index 0d610a5..1e9ffd6 100644
--- a/components/AuthText.js
+++ b/components/AuthText.js
@@ -4,15 +4,15 @@ import authImage from "public/auth.png";
 const AuthText = () => {
   return (
     <div className='lg:mt-0 max-w-lg flex flex-col text-xl'>
-      <div className='mt-10 mb-3'>
+      <div className='mt-10 mb-3 m-auto'>
         <Image
           src={authImage}
           width={authImage.width / 1.5}
           height={authImage.height / 1.5}
         />
       </div>
-      <h2 className='text-4xl font-title font-semibold'>
-        Join SupaNexTail for <span className='text-accent'>free</span>!
+      <h2 className='text-4xl font-title font-semibold text-center'>
+        Join SupaNexTail for <span className='text-primary'>free</span>!
       </h2>
       <p className='mb-5 mt-8 leading-9'>
         Create your website in a few minutes with our boilerplate. You can use
diff --git a/components/Avatar.js b/components/Avatar.js
index 8a73b51..95f55ee 100644
--- a/components/Avatar.js
+++ b/components/Avatar.js
@@ -80,7 +80,7 @@ const Avatar = ({ url, size, onUpload }) => {
       )}
       <div style={{ width: size }}>
         <label
-          className='mt-2 btn btn-primary text-center cursor-pointer text-xs'
+          className='mt-2 btn btn-primary text-center cursor-pointer text-xs btn-sm'
           htmlFor='single'>
           {uploading ? "Uploading ..." : "Update my avatar"}
         </label>
diff --git a/components/Dashboard.js b/components/Dashboard.js
index ce9e773..786138f 100644
--- a/components/Dashboard.js
+++ b/components/Dashboard.js
@@ -77,7 +77,7 @@ export default function Dashboard(props) {
             Email
           </label>
           <input
-            className='input input-primary input-bordered input-sm flex-1'
+            className='input input-primary input-bordered input-sm flex-1 text-base-100'
             id='email'
             type='text'
             value={props.session.user.email}
@@ -123,7 +123,7 @@ export default function Dashboard(props) {
         <Image src={Plan} />
         <div className='flex flex-col m-auto'>
           <h2>Your current plan</h2>
-          <p className='font-bold'>
+          <p className=''>
             {props.plan ? PriceIds[props.plan] : "Free tier"}
           </p>
         </div>
diff --git a/components/Layout.js b/components/Layout.js
index d209b05..e491ea6 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -31,7 +31,7 @@ const Layout = (props) => {
     dark: "bg-white-600 font-gray-300",
   };
   return (
-    <div className='min-h-screen w-full bg-base-100 text-base-content m-auto'>
+    <div className='min-h-screen w-full bg-base-100 text-base-content m-auto font-body'>
       <Head>
         <link
           rel='apple-touch-icon'
diff --git a/components/UI/Login.js b/components/UI/Login.js
index 1fe894c..1f8dc78 100644
--- a/components/UI/Login.js
+++ b/components/UI/Login.js
@@ -1,4 +1,6 @@
 import { IoLogoGoogle } from "react-icons/io";
+import router from "next/router";
+import { toast } from "react-toastify";
 import { useState } from "react";
 
 const Login = (props) => {
@@ -6,16 +8,43 @@ const Login = (props) => {
   const [password, setPassword] = useState("");
   const [forgot, setForgot] = useState(false);
 
+  const resetPassword = () => {
+    props.resetPassword(email).then((result) => {
+      if (result.error) {
+        toast.error(result.error.message);
+      } else toast.success("Check your email to reset your password!");
+    });
+  };
+
+  const login = (e) => {
+    e.preventDefault();
+
+    //Handle the login. Go to the homepage if success or display an error.
+    props
+      .signIn({
+        email: email,
+        password: password,
+      })
+      .then((result) => {
+        if (result.data) {
+          router.push("/");
+        }
+        if (result.error) {
+          toast.error(result.error.message);
+        }
+      });
+  };
+
   return (
-    <div className='p-10 bg-base-100 md:flex-1 rounded-md text-base-content shadow-md'>
+    <div className='p-10 bg-base-100 md:flex-1 rounded-md text-base-content shadow-md max-w-sm font-body'>
       {!forgot && (
         <>
-          <h3 className='my-4 text-2xl font-semibold'>Account Login</h3>
+          <h3 className='my-4 text-2xl font-semibold font-title'>
+            Account Login
+          </h3>
           <form action='#' className='flex flex-col space-y-5'>
             <div className='flex flex-col space-y-1'>
-              <label
-                htmlFor='email'
-                className='text-sm font-semibold text-gray-500'>
+              <label htmlFor='email' className='text-sm'>
                 Email address
               </label>
               <input
@@ -31,9 +60,7 @@ const Login = (props) => {
             </div>
             <div className='flex flex-col space-y-1'>
               <div className='flex items-center justify-between'>
-                <label
-                  htmlFor='password'
-                  className='text-sm font-semibold text-gray-500'>
+                <label htmlFor='password' className='text-sm'>
                   Password
                 </label>
                 <button
@@ -59,8 +86,7 @@ const Login = (props) => {
               <button
                 className='btn btn-primary w-full'
                 onClick={(event) => {
-                  event.preventDefault();
-                  props.signIn({ email: email, password: password });
+                  login(event);
                 }}>
                 Log in
               </button>
@@ -74,15 +100,15 @@ const Login = (props) => {
               <div className='flex flex-col space-y-4'>
                 <button
                   href='#'
-                  className='flex items-center justify-center px-4 py-2 space-x-2 transition-colors duration-300 border border-gray-800 rounded-md group hover:bg-gray-800 focus:outline-none '
+                  className='flex items-center justify-center px-4 py-2 space-x-2 transition-colors duration-300 border border-base-200 rounded-md group hover:bg-base-300 focus:outline-none '
                   onClick={(event) => {
                     event.preventDefault();
                     props.signIn({ provider: "google" });
                   }}>
-                  <div className='text-base-content group-hover:text-white'>
+                  <div className='text-base-content'>
                     <IoLogoGoogle />
                   </div>
-                  <span className='text-sm font-medium text-gray-800 group-hover:text-white'>
+                  <span className='text-sm font-medium text-base-content'>
                     Gmail
                   </span>
                 </button>
@@ -115,14 +141,22 @@ const Login = (props) => {
 
             <div>
               <button
-                className='btn btn-primary w-full'
+                className='btn btn-primary w-full btn-sm'
                 onClick={(event) => {
                   event.preventDefault();
-                  props.resetPassword(email);
+                  resetPassword();
                 }}>
                 Recover my password
               </button>
             </div>
+            <hr />
+            <button
+              onClick={() => {
+                setForgot(false);
+              }}
+              className='text-sm text-blue-600 hover:underline focus:text-blue-800'>
+              Go back to sign in
+            </button>
           </form>
         </>
       )}
diff --git a/pages/auth.js b/pages/auth.js
index 2f1d43c..c7ef7f0 100644
--- a/pages/auth.js
+++ b/pages/auth.js
@@ -18,11 +18,9 @@ const AuthPage = () => {
       />
 
       <Layout>
-        <div className='flex flex-wrap justify-evenly w-full'>
+        <div className='flex flex-wrap justify-evenly w-full mt-20'>
           <AuthText />
-          <div>
-            <AuthComponent />
-          </div>
+          <AuthComponent />
         </div>
       </Layout>
     </>
diff --git a/pages/global.css b/pages/global.css
index 1e06a84..4d7de49 100644
--- a/pages/global.css
+++ b/pages/global.css
@@ -45,3 +45,7 @@ You can setup basic rules for your headers/text here
 .nav-btn:hover::before {
   transform: scaleX(1);
 }
+
+.btn {
+  @apply font-normal
+}
\ No newline at end of file
diff --git a/utils/AuthContext.js b/utils/AuthContext.js
index aaccbeb..e50c055 100644
--- a/utils/AuthContext.js
+++ b/utils/AuthContext.js
@@ -44,6 +44,7 @@ export const AuthProvider = ({ children }) => {
     signUp: (data) => supabase.auth.signUp(data),
     signIn: (data) => supabase.auth.signIn(data),
     signOut: () => supabase.auth.signOut(),
+    resetPassword: (data) => supabase.auth.api.resetPasswordForEmail(data),
     user,
   };
 
