diff --git a/src/common/components/atoms/about.tsx b/src/common/components/atoms/about.tsx
index 64e18c5..bfe2f69 100644
--- a/src/common/components/atoms/about.tsx
+++ b/src/common/components/atoms/about.tsx
@@ -35,7 +35,7 @@ export const About = () => {
                             className="link"
                             href="https://www.linkedin.com/in/sytabaresa"
                         >
-                            @sytabares
+                            @syta
                         </a>
                         <br />
                         A product of <a href="https://einv.tech" className="" ><EinvLogo className="ml-1 inline fill-current w-6 h-6" /></a>
diff --git a/src/common/components/atoms/icons/index.tsx b/src/common/components/atoms/icons/index.tsx
index 492fe6c..bfcb93c 100644
--- a/src/common/components/atoms/icons/index.tsx
+++ b/src/common/components/atoms/icons/index.tsx
@@ -14,19 +14,23 @@ const IconGen = (meta: Record<string, any>) => (props: IconProps) => {
 export const TestIcon = IconGen({ alt: "arc-icon", src: "" })
 
 export function GoogleIcon(props) {
-    return <svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 210 210" {...props}>
-        <path d="M0,105C0,47.103,47.103,0,105,0c23.383,0,45.515,7.523,64.004,21.756l-24.4,31.696C133.172,44.652,119.477,40,105,40
-c-35.841,0-65,29.159-65,65s29.159,65,65,65c28.867,0,53.398-18.913,61.852-45H105V85h105v20c0,57.897-47.103,105-105,105
-S0,162.897,0,105z"/>
+    return <svg viewBox="0 0 24 24"  {...props}>
+        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" className={cn("fill-[#4285F4]", props.className)} />
+        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" className={cn("fill-[#34A853]", props.className)} />
+        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" className={cn("fill-[#FBBC05]", props.className)} />
+        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" className={cn("fill-[#EA4335]", props.className)} />
+        <path d="M1 1h22v22H1z" fill="none" />
     </svg>
 }
 
+
+
 export function MicrosoftIcon(props) {
     return <svg viewBox="0 0 21 21"  {...props}>
-        <path d="M0 0h10v10H0z" />
-        <path d="M11 0h10v10H11z" />
-        <path d="M0 11h10v10H0z" />
-        <path d="M11 11h10v10H11z" />
+        <path d="M0 0h10v10H0z" className={cn("fill-[#f35325]", props.className)} />
+        <path d="M11 0h10v10H11z" className={cn("fill-[#81bc06]", props.className)} />
+        <path d="M0 11h10v10H0z" className={cn("fill-[#05a6f0]", props.className)} />
+        <path d="M11 11h10v10H11z" className={cn("fill-[#ffba08]", props.className)} />
     </svg>
 }
 
diff --git a/src/common/components/atoms/langMenu.tsx b/src/common/components/atoms/langMenu.tsx
index fc0ce52..b9def14 100644
--- a/src/common/components/atoms/langMenu.tsx
+++ b/src/common/components/atoms/langMenu.tsx
@@ -11,9 +11,9 @@ export const LangMenu = (props: HTMLAttributes<HTMLDivElement>) => {
 
     // console.log("lang", locales, lang)
 
-    return <div className={cn('dropdown dropdown-end uppercase', className)} {...rest}>
+    return <div className={cn('dropdown dropdown-end uppercase text-sm', className)} {...rest}>
         {t.common.lang()}:
-        <label tabIndex={0} aria-label={t.common.lang()} className="btn btn-ghost btn-primary m-1" role="button">{lang || '--'}</label>
+        <label tabIndex={0} aria-label={t.common.lang()} className="btn btn-ghost btn-square mx-1" role="button">{lang || '--'}</label>
         <div className="dropdown-content text-base-content p-2 shadow bg-base-100 rounded-box">
             <ul tabIndex={0} className=" menu" role="menu">
                 {locales.map((item, i) =>
diff --git a/src/common/components/atoms/smithButton.tsx b/src/common/components/atoms/smithButton.tsx
index 098f053..2201178 100644
--- a/src/common/components/atoms/smithButton.tsx
+++ b/src/common/components/atoms/smithButton.tsx
@@ -8,7 +8,7 @@ const SmithButton = () => {
     const { t } = useTranslation();
 
     return <label className="label py-1 cursor-pointer">
-        <span className={cn('label-text uppercase text-right w-12 mr-2 font-bold',
+        <span className={cn('label-text uppercase text-right w-12 mr-2 font-bold leading-tight',
             current.context.smithMode ? '' : 'opacity-50')}>{t.canvas.smith_mode()}</span>
         <input
             type="checkbox"
diff --git a/src/common/components/atoms/themeSwitcher.tsx b/src/common/components/atoms/themeSwitcher.tsx
index c141ca1..9952d62 100644
--- a/src/common/components/atoms/themeSwitcher.tsx
+++ b/src/common/components/atoms/themeSwitcher.tsx
@@ -16,7 +16,7 @@ export function ThemeSwitcher(props: LabelHTMLAttributes<HTMLLabelElement>) {
         // console.log('set', e.target.checked)
         setTheme(e.target.checked ? "dark" : "light")
     }
-    return <label className='swap swap-rotate' {...rest}>
+    return <label className='btn btn-ghost btn-square swap swap-rotate' {...rest}>
         <input
             // aria-label={t.common.theme()}
             type="checkbox"
diff --git a/src/common/components/organisms/login/emailLogin.tsx b/src/common/components/organisms/login/emailLogin.tsx
new file mode 100644
index 0000000..0d514f7
--- /dev/null
+++ b/src/common/components/organisms/login/emailLogin.tsx
@@ -0,0 +1,39 @@
+import SingUpForm from "@components/organisms/login/signupForm";
+import LoginForm from "@components/organisms/login/loginForm";
+import { cn } from "@utils/styles";
+import { useTranslation } from "@modules/i18n";
+import { HTMLAttributes, useState } from "react";
+
+export interface EmailLoginProps extends HTMLAttributes<HTMLDivElement> {
+
+}
+
+export function EmailLogin({ className }: EmailLoginProps) {
+    const [isLogin, setIsLogin] = useState(true);
+    const { t } = useTranslation();
+
+
+    return <div className={cn(className)}>
+        <div className="tabs flex justify-center">
+            <a
+                className={cn('tab tab-lg tab-bordered uppercase font-bold', isLogin ? "tab-active" : "")}
+                onClick={() => setIsLogin(true)}
+            >
+                {t.login.login()}
+            </a>
+            <a
+                className={cn('tab tab-lg tab-bordered uppercase font-bold', !isLogin ? "tab-active" : "")}
+                onClick={() => setIsLogin(false)}
+            >
+                {t.login.sign_up()}
+            </a>
+        </div>
+        <div className="w-full z-10 my-4">
+            {isLogin ? (
+                <LoginForm />
+            ) : (
+                <SingUpForm />
+            )}
+        </div>
+    </div>
+}
\ No newline at end of file
diff --git a/src/common/components/organisms/login/loginForm.tsx b/src/common/components/organisms/login/loginForm.tsx
index 8d6fddf..cfb81b3 100644
--- a/src/common/components/organisms/login/loginForm.tsx
+++ b/src/common/components/organisms/login/loginForm.tsx
@@ -20,7 +20,6 @@ const LoginForm = ({ }: LoginFormProps) => {
   const { login } = useAuthProvider()
 
   const onSubmitLogin = async (data) => {
-    const { email, password } = data;
 
     try {
       const user = await login(data)
@@ -31,29 +30,8 @@ const LoginForm = ({ }: LoginFormProps) => {
     }
   };
 
-  const onGoogleLogin = async (data) => {
-    try {
-      const user = await login({ provider: 'google' })
-    } catch (err) {
-      setError("root.login", { message: err })
-    }
-  }
-
-  const onMicrosoftLogin = async (data) => {
-    try {
-      const user = await login({ provider: 'microsoft' })
-    } catch (err) {
-      setError("root.login", { message: err })
-    }
-  }
-
   return (
     <form onSubmit={handleSubmit(onSubmitLogin)} className="form-control" method="post">
-      <div className={cn('alert alert-warning my-2 transition-opacity', errors?.root?.login ? 'opacity-100' : 'opacity-0')}>
-        <span className="">
-          {errors?.root?.login?.message}
-        </span>
-      </div>
       <label htmlFor="user" className="label">
         <span className="label-text uppercase font-bold">
           {t.login.username()}
@@ -95,26 +73,17 @@ const LoginForm = ({ }: LoginFormProps) => {
         </label>
       )}
       <button
-        className="btn btn-primary mt-10 w-full lg:btn-wide self-center"
+        className="btn btn-primary mt-6 w-full lg:btn-wide self-center"
         type="submit"
       >
         {isSubmitting ? t.login.logging_in() + "..." : isSubmitSuccessful ? t.login.done() : t.login.login()}
       </button>
-      <button className="group btn btn-outline bg-base-100 text-secondary
-       hover:bg-secondary hover:border-secondary w-full lg:btn-wide mt-2 self-center" onClick={onGoogleLogin}>
-        <div className="w-6 h-6 fill-secondary group-hover:fill-base-100 mr-4">
-          <GoogleIcon />
-        </div>
-        {t.login.google_login()}
-      </button>
-      <button className="group btn btn-outline bg-base-100 text-warning
-       hover:bg-warning hover:border-warning w-full lg:btn-wide mt-2 self-center" onClick={onMicrosoftLogin}>
-        <div className="w-6 h-6 fill-warning group-hover:fill-base-100 mr-4">
-          <MicrosoftIcon />
-        </div>
-        {t.login.microsoft_login()}
-      </button>
-    </form >
+      <div className={cn('alert alert-warning my-2 transition-opacity', errors?.root?.login ? 'opacity-100' : 'opacity-0')}>
+        <span className="">
+          {errors?.root?.login?.message}
+        </span>
+      </div>
+    </form>
   )
 }
 
diff --git a/src/common/components/organisms/login/signupForm.tsx b/src/common/components/organisms/login/signupForm.tsx
index e3f5004..4cd941c 100644
--- a/src/common/components/organisms/login/signupForm.tsx
+++ b/src/common/components/organisms/login/signupForm.tsx
@@ -38,11 +38,6 @@ const SingUpForm = ({ }: SignUpFormProps) => {
 
   return (
     <form onSubmit={handleSubmit(onSubmitSignUp)} className="form-control">
-      <div className={cn('alert alert-warning my-2 transition-opacity', errors?.root?.login ? 'opacity-100' : 'opacity-0')}>
-        <span className="">
-          {errors?.root?.login?.message}
-        </span>
-      </div>
       <label htmlFor="user" className="label">
         <span className="label-text uppercase font-bold">{t.login.username()}</span>
       </label>
@@ -93,9 +88,14 @@ const SingUpForm = ({ }: SignUpFormProps) => {
           <span className="label-text-alt uppercase" role="alert">{t.login.password_match()}</span>
         </label>
       )}
-      <button className="btn btn-primary mt-10 w-full lg:btn-wide self-center" type="submit">
+      <button className="btn btn-primary mt-6 w-full lg:btn-wide self-center" type="submit">
         {t.login.sign_up()}
       </button>
+      <div className={cn('alert alert-warning my-2 transition-opacity', errors?.root?.login ? 'opacity-100' : 'opacity-0')}>
+        <span className="">
+          {errors?.root?.login?.message}
+        </span>
+      </div>
     </form>
   );
 };
diff --git a/src/common/components/organisms/primitivesMenu.tsx b/src/common/components/organisms/primitivesMenu.tsx
index 6710eaa..f53b11b 100644
--- a/src/common/components/organisms/primitivesMenu.tsx
+++ b/src/common/components/organisms/primitivesMenu.tsx
@@ -91,7 +91,7 @@ const PrimitivesMenu = (props: PrimitivesMenuProps) => {
           <button
             aria-label={t.canvas.delete()}
             tabIndex={0}
-            className={cn('btn btn-outline btn-secondary btn-outline-accent bg-base-100 btn-square',
+            className={cn('btn btn-outline btn-secondary bg-base-100 btn-square',
               current.name == "delete" ? 'btn-active' : '')}
             onClick={_delete}>
             <TrashIcon className="w-6" />
@@ -112,7 +112,7 @@ const PrimitivesMenu = (props: PrimitivesMenuProps) => {
           <button
             aria-label={t.canvas.move()}
             tabIndex={0}
-            className={cn('btn btn-outline btn-primary btn-outline-accent btn-square',
+            className={cn('btn btn-outline btn-primary btn-square',
               current.name == "idle" ? ' btn-active' : '')}
             onClick={() => send('EXIT')}>
             <HandIcon className="w-6" />
diff --git a/src/modules/i18n/en/index.ts b/src/modules/i18n/en/index.ts
index 447b87e..5965d56 100644
--- a/src/modules/i18n/en/index.ts
+++ b/src/modules/i18n/en/index.ts
@@ -63,8 +63,10 @@ const en: Translation = {
 		password_required: "Password Required",
 		google_login: "with Google",
 		microsoft_login: "with Microsoft",
+		email_login: "with Email",
 		repeat_password: "Repeat Password",
-		login: "Login",
+		login: "Log in",
+		login_title: "Log in",
 		sign_up: "Sign Up",
 		logging_in: "Logging In",
 		done: "Done",
diff --git a/src/modules/i18n/es/index.ts b/src/modules/i18n/es/index.ts
index e7db7ce..8a50b4c 100644
--- a/src/modules/i18n/es/index.ts
+++ b/src/modules/i18n/es/index.ts
@@ -62,10 +62,12 @@ const es: BaseTranslation = {
 		password_required: "Contraseña Requerida",
 		google_login: "con Google",
 		microsoft_login: "con Microsoft",
+		email_login: "con email",
 		repeat_password: "Repita Contraseña",
 		sign_up: "Registrarse",
-		login: "Login",
-		logging_in: "Loguéandose",
+		login: "Iniciar",
+		login_title: "Inicia sesión",
+		logging_in: "Iniciando",
 		done: "Hecho",
 		password_match: "Contraseñas no concuerdan"
 	},
diff --git a/src/modules/i18n/i18n-types.ts b/src/modules/i18n/i18n-types.ts
index cd7d06a..cfad930 100644
--- a/src/modules/i18n/i18n-types.ts
+++ b/src/modules/i18n/i18n-types.ts
@@ -209,14 +209,22 @@ type RootTranslation = {
 		 * w​i​t​h​ ​M​i​c​r​o​s​o​f​t
 		 */
 		microsoft_login: string
+		/**
+		 * w​i​t​h​ ​E​m​a​i​l
+		 */
+		email_login: string
 		/**
 		 * R​e​p​e​a​t​ ​P​a​s​s​w​o​r​d
 		 */
 		repeat_password: string
 		/**
-		 * L​o​g​i​n
+		 * L​o​g​ ​i​n
 		 */
 		login: string
+		/**
+		 * L​o​g​ ​i​n
+		 */
+		login_title: string
 		/**
 		 * S​i​g​n​ ​U​p
 		 */
@@ -770,14 +778,22 @@ export type TranslationFunctions = {
 		 * with Microsoft
 		 */
 		microsoft_login: () => LocalizedString
+		/**
+		 * with Email
+		 */
+		email_login: () => LocalizedString
 		/**
 		 * Repeat Password
 		 */
 		repeat_password: () => LocalizedString
 		/**
-		 * Login
+		 * Log in
 		 */
 		login: () => LocalizedString
+		/**
+		 * Log in
+		 */
+		login_title: () => LocalizedString
 		/**
 		 * Sign Up
 		 */
diff --git a/src/pages/login.page.tsx b/src/pages/login.page.tsx
index e486a1e..5d5a7f5 100644
--- a/src/pages/login.page.tsx
+++ b/src/pages/login.page.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
 import Layout from "@components/templates/default";
-import { useUser } from "@hooks/useAuthProvider";
-import SingUpForm from "@components/organisms/login/signupForm";
-import LoginForm from "@components/organisms/login/loginForm";
+import { useAuthProvider, useUser } from "@hooks/useAuthProvider";
 import { useLanguageQuery, useTranslation } from "@modules/i18n";
 import { useRouter } from "@modules/router";
+import { GoogleIcon, MicrosoftIcon } from "@components/atoms/icons";
+import { AtSymbolIcon } from "@heroicons/react/outline";
+import { EmailLogin } from "@components/organisms/login/emailLogin";
 import { cn } from "@utils/styles";
 
 export { Login as Page }
@@ -16,7 +17,6 @@ interface LoginProps {
 const Login = ({ homePage = "/saved" }: LoginProps) => {
   const { t } = useTranslation();
   const [query] = useLanguageQuery()
-  const [isLogin, setIsLogin] = useState(true);
 
   const { useHistory, useParams } = useRouter()
   const { push } = useHistory();
@@ -24,6 +24,9 @@ const Login = ({ homePage = "/saved" }: LoginProps) => {
 
   const { isAuthenticated } = useUser();
   // console.log(isAuthenticated)
+  const { login } = useAuthProvider()
+
+  const [emailOpen, setEmailOpen] = useState(false)
 
   useEffect(() => {
     // console.log(params.redirect)
@@ -36,6 +39,22 @@ const Login = ({ homePage = "/saved" }: LoginProps) => {
     }
   }, [isAuthenticated])
 
+  const onGoogleLogin = async (data) => {
+    try {
+      const user = await login({ provider: 'google' })
+    } catch (err) {
+      // setError("root.login", { message: err })
+    }
+  }
+
+  const onMicrosoftLogin = async (data) => {
+    try {
+      const user = await login({ provider: 'microsoft' })
+    } catch (err) {
+      // setError("root.login", { message: err })
+    }
+  }
+
   return <Layout
     showComplement
     title="Saved | Sr Smith App"
@@ -47,31 +66,36 @@ const Login = ({ homePage = "/saved" }: LoginProps) => {
   >
 
     <div className="flex-grow flex flex-col items-center justify-start mt-2 lg:mt-20">
-      <div className="flex flex-col items-center mb-6 hover:scale-110 transition ease-in-out delay-150">
-        <img className="w-40" src="/images/logo.png" alt="sr smith logo" />
-        <h1 className="uppercase font-bold text-3xl md:text-5xl my-4 md:my-8">SR Smith</h1>
-      </div>
-      <div className="tabs">
-        <a
-          className={cn('tab tab-lg tab-bordered uppercase font-bold', isLogin ? "tab-active" : "")}
-          onClick={() => setIsLogin(true)}
-        >
-          {t.login.login()}
-        </a>
-        <a
-          className={cn('tab tab-lg tab-bordered uppercase font-bold', !isLogin ? "tab-active" : "")}
-          onClick={() => setIsLogin(false)}
-        >
-          {t.login.sign_up()}
-        </a>
+      <div className="flex flex-col items-center">
+        <img className="w-40 hover:scale-110 transition ease-in-out delay-150 mb-2" src="/images/logo.png" alt="sr smith logo" />
+        <h1 className="uppercase font-bold text-3xl md:text-5xl mt-2 md:mt-4">SR Smith</h1>
       </div>
-      <div className="w-full px-4 sm:w-2/3 md:w-1/2 lg:w-1/3 z-10 mb-10">
-        {isLogin ? (
-          <LoginForm />
-        ) : (
-          <SingUpForm />
-        )}
+      <div className="px-8 w-full lg:w-1/3 max-w-md flex flex-col items-center mt-8">
+        <h2 className="self-start uppercase font-bold text-xl mb-2 mt-4">{t.login.login()}:</h2>
+        <button className="group btn border-2 btn-outline bg-base-100
+       hover:bg-[#EA4335] hover:border-[#EA4335] hover:text-base-100 w-full mt-2 justify-start pl-[15%] sm:pl-[30%]" onClick={onGoogleLogin}>
+          <GoogleIcon className="w-6 h-6 group-hover:fill-base-100 mr-4" />
+          {t.login.google_login()}
+        </button>
+        <button className="group btn border-2 btn-outline bg-base-100
+       hover:bg-[#81bc06] hover:border-[#81bc06] hover:text-base-100 w-full mt-2 justify-start pl-[15%] sm:pl-[30%]" onClick={onMicrosoftLogin}>
+          <MicrosoftIcon className="w-6 h-6 group-hover:fill-base-100 mr-4" />
+          {t.login.microsoft_login()}
+        </button>
+        <button className={cn("group btn border-2 btn-outline bg-base-100",
+          "hover:bg-primary hover:border-primary hover:text-base-100 w-full mt-2 justify-start pl-[15%] sm:pl-[30%]", emailOpen ? "bg-primary border-primary text-base-100" : "")}
+          onClick={() => setEmailOpen(e => !e)}>
+          <AtSymbolIcon className={cn("w-6 h-6 stroke-primary group-hover:stroke-base-100 mr-4", emailOpen ? "stroke-base-100" : "")} />
+          {t.login.email_login()}
+        </button>
+        <div className={cn("collapse", emailOpen ? 'collapse-open' : 'collapse-close')} >
+          {/* <div className="collapse-title p-0">
+          </div> */}
+          <div className="collapse-content px-0">
+            <EmailLogin className="mt-4" />
+          </div>
+        </div>
       </div>
     </div>
-  </Layout>
+  </Layout >
 };
\ No newline at end of file