diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx
index f2f8b51..85826fd 100644
--- a/src/components/AuthPages/Login/index.jsx
+++ b/src/components/AuthPages/Login/index.jsx
@@ -16,6 +16,8 @@ import { updateUserDetails } from "../../../store/UserDetails";
 export default function Login() {
   const dispatch = useDispatch();
 
+  let [loginCom, setLoginCom] = useState({user: true, family: false})
+
   const [checked, setValue] = useState(false);
   const [loginLoading, setLoginLoading] = useState(false);
 
@@ -28,6 +30,15 @@ export default function Login() {
     setValue(!checked);
   };
 
+  //FUNCTION TO DETERMINE/CHANGE LOGIN COMPONENT
+  const handleLoginCom = ({target:{name}}) => {
+    if(name == 'user'){
+      setLoginCom({[name]: true, family: false})
+    }else{
+      setLoginCom({[name]: false, family: true})
+    }
+  }
+
   // email
   const [email, setMail] = useState("");
   const handleEmail = (e) => {
@@ -102,9 +113,9 @@ export default function Login() {
           <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
             <div className="w-full">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
+                {/* <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Sign In to WrenchBoard
-                </h1>
+                </h1> */}
                 <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
                   New Here?{" "}
                   <Link
@@ -115,80 +126,165 @@ export default function Login() {
                   </Link>
                 </span>
               </div>
-              <div className="input-area">
-                <div className="input-item mb-5">
-                  <InputCom
-                    fieldClass="px-6"
-                    value={email}
-                    inputHandler={handleEmail}
-                    placeholder="support@mermsemr.com"
-                    label="Email"
-                    name="email"
-                    type="email"
-                    iconName="message"
-                  />
-                </div>
 
-                <div className="input-item mb-5">
-                  <InputCom
-                    fieldClass="px-6"
-                    value={password}
-                    inputHandler={handlePassword}
-                    placeholder="● ● ● ● ● ●"
-                    label="Password"
-                    name="password"
-                    type="password"
-                    iconName="password"
-                    forgotPassword
-                  />
+              {/* switch login component */}
+              <div className="flex justify-start items-end">
+                <button 
+                  name='user'
+                  className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-r-0 border-[#4687ba] ${loginCom.user && 'border-r-2 h-[45px]'}`}
+                  onClick={handleLoginCom}
+                >Sign in
+                </button>
+                <button 
+                  name='family'
+                  className={`px-2 py-1 w-[100px] text-left h-[40px] text-lg font-bold text-[#4687ba] hover:text-[#009ef7] tracking-wide transition outline-none border-2 border-b-0 border-l-0 border-[#4687ba] ${loginCom.family && 'border-l-2 h-[45px]'}`}
+                  onClick={handleLoginCom}
+                >Family
+                </button>
+              </div>
+
+              {/* END  of switch login component */}
+
+              {/* for login component */}
+              {loginCom.user ?
+                //user login compoenent
+                <div className="p-2 input-area border-2 border-[#4687ba]">
+                  <div className="input-item mb-5">
+                    <InputCom
+                      labelClass='tracking-wider'
+                      fieldClass="px-6"
+                      value={email}
+                      inputHandler={handleEmail}
+                      placeholder="support@mermsemr.com"
+                      label="Email"
+                      name="email"
+                      type="email"
+                      iconName="message"
+                    />
+                  </div>
+
+                  <div className="input-item mb-5">
+                    <InputCom
+                      labelClass='tracking-wider'
+                      fieldClass="px-6"
+                      value={password}
+                      inputHandler={handlePassword}
+                      placeholder="● ● ● ● ● ●"
+                      label="Password"
+                      name="password"
+                      type="password"
+                      iconName="password"
+                      forgotPassword
+                    />
+                  </div>
+                  {loginError && (
+                    <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
+                      Invalid username or password- Please{" "}
+                      <Link to="/#" className="text-[#009ef7]">
+                        reset your password
+                      </Link>{" "}
+                      or{" "}
+                      <Link to="/signup" className="text-[#009ef7]">
+                        create a new account
+                      </Link>
+                    </div>
+                  )}
+                  {msgError && (
+                    <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+                      {msgError}
+                    </div>
+                  )}
+                  <div className="signin-area mb-3.5">
+                    <div className="flex justify-center">
+                      <button
+                        onClick={doLogin}
+                        type="button"
+                        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                      >
+                        {loginLoading ? (
+                          <div className="signup btn-loader"></div>
+                        ) : (
+                          <span>Continue</span>
+                        )}
+                      </button>
+                    </div>
+                    <BrandBtn link="#" imgSrc={googleLogo} brand="Google" />
+                    <BrandBtn link="#" imgSrc={facebookLogo} brand="Facebook" />
+                    <BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
+                  </div>
                 </div>
-                {loginError && (
-                  <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
-                    Invalid username or password- Please{" "}
-                    <Link to="/#" className="text-[#009ef7]">
-                      reset your password
-                    </Link>{" "}
-                    or{" "}
-                    <Link to="/signup" className="text-[#009ef7]">
-                      create a new account
-                    </Link>
+                // END of user login compoenent
+                :
+                // family login compoenent
+                <div className="p-2 input-area border-2 border-[#4687ba]">
+                  <div className="input-item mb-5">
+                    <InputCom
+                      labelClass='tracking-wider'
+                      fieldClass="px-6"
+                      value={email}
+                      inputHandler={handleEmail}
+                      placeholder="support@mermsemr.com"
+                      label="Username"
+                      name="email"
+                      type="email"
+                      iconName="message"
+                    />
                   </div>
-                )}
-                {msgError && (
-                  <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-                    {msgError}
+
+                  <div className="input-item mb-5">
+                    <InputCom
+                      labelClass='tracking-wider'
+                      fieldClass="px-6"
+                      value={password}
+                      inputHandler={handlePassword}
+                      placeholder="● ● ● ● ● ●"
+                      label="Pin"
+                      name="password"
+                      type="password"
+                      iconName="password"
+                      // forgotPassword
+                    />
                   </div>
-                )}
-                <div className="signin-area mb-3.5">
-                  <div className="flex justify-center">
-                    <button
-                      onClick={doLogin}
-                      type="button"
-                      className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
-                    >
-                      {loginLoading ? (
-                        <div className="signup btn-loader"></div>
-                      ) : (
-                        <span>Continue</span>
-                      )}
-                    </button>
+                  {loginError && (
+                    <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px] text-[13px]">
+                      Invalid username or password{" "}
+                      {/* <Link to="/#" className="text-[#009ef7]">
+                        reset your password
+                      </Link>{" "}
+                      or{" "}
+                      <Link to="/signup" className="text-[#009ef7]">
+                        create a new account
+                      </Link> */}
+                    </div>
+                  )}
+                  {msgError && (
+                    <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+                      {msgError}
+                    </div>
+                  )}
+                  <div className="signin-area mb-1.5">
+                    <div className="flex justify-center">
+                      <button
+                        onClick={()=>{console.log('working')}}
+                        type="button"
+                        className={`btn-login  rounded-[0.475rem] text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+                      >
+                        {loginLoading ? (
+                          <div className="signup btn-loader"></div>
+                        ) : (
+                          <span>Continue</span>
+                        )}
+                      </button>
+                    </div>
                   </div>
-                  <BrandBtn link="#"  imgSrc={googleLogo} brand="Google" />
-                  <BrandBtn link="#"   imgSrc={facebookLogo} brand="Facebook" />
-                  <BrandBtn link="#"    imgSrc={appleLogo} brand="Apple" />
                 </div>
-                {/* <div className="signup-area flex justify-center">
-                <p className="sm:text-lg text-sm text-thin-light-gray font-normal">
-                  Don't have an account ?
-                  <a href="/signup" className="ml-2   text-dark-gray dark:text-white">
-                    Sign up free
-                  </a>
-                </p>
-              </div> */}
-                <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
+                // END of family login compoenent
+              }
+              {/* END of login component */}
+
+              <div className="pt-5 text-[#181c32] text-center font-semibold text-[13.975px] leading-[20.9625px]">
                   This site is protected by hCaptcha and the our Privacy Policy
                   and Terms of Service apply.
-                </div>
               </div>
             </div>
           </div>