diff --git a/src/Routers.jsx b/src/Routers.jsx
index 061a28d..ca6ebcc 100644
--- a/src/Routers.jsx
+++ b/src/Routers.jsx
@@ -50,7 +50,7 @@ export default function Routers() {
           element={<UpdatePasswordPages />}
         />
         <Route path="/vemail" element={<VerifyLinkPages />} />
-        <Route exact path="/verify-you" element={<VerifyYouPages />} />
+        <Route exact path="/outmessage" element={<VerifyYouPages />} />
 
         {/* private route */}
         <Route element={<AuthRoute />}>
diff --git a/src/components/AuthPages/ForgotPassword/index.jsx b/src/components/AuthPages/ForgotPassword/index.jsx
index 589d446..65bdbe7 100644
--- a/src/components/AuthPages/ForgotPassword/index.jsx
+++ b/src/components/AuthPages/ForgotPassword/index.jsx
@@ -11,6 +11,7 @@ export default function ForgotPassword() {
   // email
   const [email, setMail] = useState("");
   const [msgError, setMsgError] = useState('');
+  const [msgSuccess, setMsgSuccess] = useState(false)
 
   const navigate = useNavigate();
   const userApi = new usersService();
@@ -20,8 +21,8 @@ export default function ForgotPassword() {
   };
 
   const humanChecker = () => {
-    setValue(!checked);
-  };
+    setValue(!checked)
+  }
 
   const resetHandler = async () => {
     if (email == '') {
@@ -30,24 +31,16 @@ export default function ForgotPassword() {
       setMsgError('Check if you are human')
     }
 
-    if (email != '' && checked) {
+    if (email !== '' && checked) {
       const reqData = { email }
       setResetLoading(true)
       try {
         const res = await userApi.StartResetPassword(reqData)
         if (res.status === 200) {
-          const { data } = res
-          if (data.status == -1) {
-            setMsgError('This is an incorrect or duplicate email')
-            setResetLoading(false)
-          } else if (data.status > 0) {
-            setResetLoading(false)
-            navigate("/verify-you", { replace: true })
-          } else{
-            setMsgError("reset was not successful")
-            setResetLoading(false)
-          }
+          setMsgSuccess(true)
           setMail("")
+          setValue(false)
+          setResetLoading(false)
         }
       } catch (error) {
         setResetLoading(false)
@@ -79,12 +72,10 @@ export default function ForgotPassword() {
           <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="flex flex-col justify-center w-full h-full px-5">
               <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" style={{
-                  fontSize: 'calc(1rem + .6vw)'
-                }}>
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Forget Password
                 </h1>
-                <span className="text-gray-400 font-medium text-xl">Enter your email to reset your password.</span>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">Enter your email to reset your password.</span>
               </div>
               <div className="input-area">
                 <div className="input-item mb-10">
@@ -98,7 +89,6 @@ export default function ForgotPassword() {
                     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]">{msgError}</div>}
                 {/* hCaptha clone for the time being */}
                 <div className="mb-10">
                   <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
@@ -108,7 +98,7 @@ export default function ForgotPassword() {
                         <div className="relative table top-0 h-full">
                           <div className="table-cell align-middle">
                             <div className="relative w-[30px] h-[30px] mx-[15px]">
-                              <input type="checkbox" name="human-checkbox" id="human-checkbox" className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white" onClick={humanChecker} />
+                              <input type="checkbox" name="human-checkbox" id="human-checkbox" className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white" checked={checked} onChange={humanChecker} />
                             </div>
                           </div>
                         </div>
@@ -126,12 +116,15 @@ export default function ForgotPassword() {
                     </div>
                   </div>
                 </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>}
+                {msgSuccess && <div className="relative p-4 text-[#44228c] bg-[#e3d7fb] border-[#d5c4f9] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">If we find your email, you will receive a link to reset your password. Please use or <Link to='/contact' className="text-[#4687ba] hover:text-[#009ef7]">contact form</Link> if you did not get our message after few minutes.</div>}
+
                 <div className="signin-area mb-3.5">
                   <div className="flex justify-center items-center gap-2">
                     <button
                       type="button"
                       onClick={resetHandler}
-                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                      className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
                     >
                       {resetLoading ? (
                         <div className="signup btn-loader"></div>
@@ -142,7 +135,7 @@ export default function ForgotPassword() {
                     <button
                       type="button"
                       onClick={() => navigate("/login")}
-                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
+                      className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
                     >
                       Cancel
                     </button>
diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx
index 9e2cafc..7d18634 100644
--- a/src/components/AuthPages/Login/index.jsx
+++ b/src/components/AuthPages/Login/index.jsx
@@ -99,12 +99,10 @@ 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" style={{
-                  fontSize: 'calc(1rem + .6vw)'
-                }}>
+                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                   Sign In to WrenchBoard
                 </h1>
-                <span className="text-gray-400 font-medium text-xl">New Here? <Link to='/signup' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Create an Account</Link></span>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">New Here? <Link to='/signup' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Create an Account</Link></span>
               </div>
               <div className="input-area">
                 <div className="input-item mb-5">
@@ -164,15 +162,14 @@ export default function Login() {
                   Forgot Password
                 </a>
               </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]">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]">{msgError}</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 ${loginLoading ? "active" : ""
-                        }`}
+                      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>
@@ -193,7 +190,7 @@ export default function Login() {
                   </a>
                 </p>
               </div> */}
-                <div className="pt-5 text-[#181c32] text-center font-semibold text-base">This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.</div>
+                <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>
@@ -215,8 +212,8 @@ const BrandBtn = ({
         className="w-full border border-light-purple dark:border-[#5356fb29]  rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F]  items-center font-medium cursor-pointer"
       >
         <img className="mr-3 h-6" src={imgSrc} alt="logo-icon(s)" />
-        <span className="text-lg text-thin-light-gray font-normal">
-          Sign In with {brand}
+        <span className="text-lg text-thin-light-gray font-normal text-[15px]">
+          Continue with {brand}
         </span>
       </a>
     </div>
diff --git a/src/components/AuthPages/SignUp/index.jsx b/src/components/AuthPages/SignUp/index.jsx
index 549a501..2b2069e 100644
--- a/src/components/AuthPages/SignUp/index.jsx
+++ b/src/components/AuthPages/SignUp/index.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import facebookLogo from "../../../assets/images/facebook-4.svg";
 import WrenchBoard from "../../../assets/images/wrenchboard.png";
@@ -39,20 +39,22 @@ export default function SignUp() {
   const userApi = new usersService();
 
   // Get Country Api
-  const getCountryList = async () => {
-    const res = await userApi.getSignupCountryData()
-
-    try {
-      if (res.status === 200) {
-        const { signup_country } = await res.data
-        setCountries(signup_country)
-      } else if (res.data.result !== 100) {
-        setCountries('Nothing see here!')
+  const getCountryList = useCallback(
+    async () => {
+      const res = await userApi.getSignupCountryData()
+  
+      try {
+        if (res.status === 200) {
+          const { signup_country } = await res.data
+          setCountries(signup_country)
+        } else if (res.data.result !== 100) {
+          setCountries('Nothing see here!')
+        }
+      } catch (error) {
+        throw new Error(error)
       }
-    } catch (error) {
-      throw new Error(error)
-    }
-  }
+    }, []
+  )
 
   const handleSignUp = async () => {
     let { country, first_name, last_name, email, password } = formData
@@ -85,13 +87,14 @@ export default function SignUp() {
           }
           if (data && data.status === '1') {
             setTimeout(() => {
-              navigate("/verify-you", { replace: true });
               setSignUpLoading(false)
+              navigate("/outmessage", { replace: true });
             }, 2000)
-          } else {
-            setSignUpLoading(false)
-            setMsgError('This account does not exist')
-          }
+          } 
+          // else {
+          //   setSignUpLoading(false)
+          //   setMsgError('This account does not exist')
+          // }
         } else {
           setSignUpLoading(false)
           setMsgError('An error occurred')
@@ -132,16 +135,14 @@ export default function SignUp() {
                 <div className="content-wrapper login shadow-md w-full lg:max-w-[600px] 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 mb-7">
                   <div>
                     <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" style={{
-                        fontSize: 'calc(1rem + .6vw)'
-                      }}>
+                      <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                         Create Account
                       </h1>
-                      <span className="text-gray-400 font-medium text-xl">Already have an account? <Link to='/login' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Sign in here</Link></span>
+                      <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">Already have an account? <Link to='/login' className='font-semibold text-[#4687ba] hover:text-[#009ef7] transition'>Sign in here</Link></span>
                     </div>
                     <button
                       type="button"
-                      className={`rounded-[0.475rem] w-full mb-6 text-[1.15rem] h-[42px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem]`}
+                      className={`rounded-[0.475rem] w-full mb-6 text-[15px] h-[42px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem]`}
                     >
                       <img className="mr-3 h-6" src={facebookLogo} alt="logo-icon(s)" />
                       Sign in with Facebook
@@ -228,15 +229,15 @@ export default function SignUp() {
                           </button>
                           <span
                             onClick={rememberMe}
-                            className="text-base cursor-default text-dark-gray dark:text-white"
+                            className="cursor-default text-dark-gray dark:text-white text-[15px]"
                           >
                             I agree with all
-                            <a
+                            <Link
                               href="#"
                               className="text-base text-[#4687ba] hover:text-[#009ef7] mx-1 inline-block"
                             >
                               terms and condition
-                            </a>
+                            </Link>
                           </span>
                         </div>
                       </div>
@@ -245,8 +246,7 @@ export default function SignUp() {
                           <button
                             type="button"
                             onClick={handleSignUp}
-                            className={`rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] ${signUpLoading ? "active" : ""
-                              }`}
+                            className={`rounded-[0.475rem] mb-6 text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px]`}
                           >
                             {signUpLoading ? (
                               <div className="signup btn-loader"></div>
@@ -279,7 +279,7 @@ const SelectOption = ({
     <div className="input-com mb-7">
       <div className="flex items-center justify-between">
         <label
-          className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
+          className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold block mb-2.5"
           htmlFor={name}
         >
           {label}
diff --git a/src/components/AuthPages/VerifyLink/index.jsx b/src/components/AuthPages/VerifyLink/index.jsx
index 3ae549f..02b7ebd 100644
--- a/src/components/AuthPages/VerifyLink/index.jsx
+++ b/src/components/AuthPages/VerifyLink/index.jsx
@@ -6,6 +6,9 @@ import usersService from "../../../services/UsersService";
 import WrenchBoard from "../../../assets/images/wrenchboard.png"
 
 export default function VerifyLink() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [msgError, setMsgError] = useState('');
   const [pageLoader, setPageLoader] = useState(true)
   const [linkSuccess, setLinkSuccess] = useState(false)
   const [linkError, setLinkError] = useState(false)
@@ -13,24 +16,32 @@ export default function VerifyLink() {
   const location = useLocation();
   const queryParams = new URLSearchParams(location?.search)
   const token = queryParams.get('vlnk')
+  const userApi = new usersService()
 
+  // email
+  const handleEmail = (e) => {
+    setEmail(e.target.value);
+  };
+  // password
+  const handlePassword = (e) => {
+    setPassword(e.target.value);
+  };
+
+  // for verifying the incoming verification link and render the correct component 
   const verifyEmail = useCallback(
     async (code) => {
-      const userApi = new usersService()
-  
       try {
         const verifyRes = await userApi.verifyEmail(code)
         if (verifyRes.status === 200) {
           let { data } = verifyRes
-  
-          if (data && data.internal_return === 0 && data.status_text === 'Link Verfied') {
+
+          if (data && data.internal_return >= 0 && data.status_text === 'Link Verfied') {
             setPageLoader(false)
             setLinkSuccess(true)
           } else {
             setPageLoader(false)
             setLinkError(true)
           }
-          console.log(data)
         }
       } catch (error) {
         setPageLoader(false)
@@ -40,11 +51,56 @@ export default function VerifyLink() {
     }, []
   )
 
+  // if verification is okay. set a complete signup form 
+  const completeSignup = async () => {
+    if (email === '' && password === '') {
+      setMsgError('Please fill in fields')
+    }
+
+    try {
+      if (email !== "" && password !== "") {
+        var postData = {
+          username: email,
+          password: password,
+          sessionid: 'STARTER-NOTREAL',
+          verify_link: token,
+          action: 11012
+        }
+        const res = await userApi.CompleteSignUp(postData)
+        console.log(res)
+
+        if (res.status === 200) {
+          const { data } = res
+          // Invalid Link & Password Combination
+          if (data.internal_return == -1 && data.acc == 'Invalid Link & Password Combination') {
+            setMsgError('Invalid Link & Password Combination')
+            // setSignUpLoading(false)
+          }
+          if (data && data.status === '1') {
+            setTimeout(() => {
+              // setSignUpLoading(false)
+              navigate("/", { replace: true });
+            }, 2000)
+          } 
+        } else {
+          // setSignUpLoading(false)
+          setMsgError('An error occurred')
+        }
+      }
+    } catch (error) {
+      throw new Error(error)
+    } finally {
+      setTimeout(() => {
+        setMsgError(null)
+      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
+    }
+  }
+
   useLayoutEffect(() => {
     verifyEmail(token)
   })
 
-  console.log(token)
+  // console.log(token)
 
   return (
     <>
@@ -63,15 +119,24 @@ export default function VerifyLink() {
             <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center 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" style={{
-                    fontSize: 'calc(1rem + .6vw)'
-                  }}>
+                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                     {linkError && 'Invalid verification link'}
                     {linkSuccess && 'Sign In to WrenchBoard'}
                   </h1>
                 </div>
                 {/* If the verification was a success */}
-                {linkSuccess && <SuccessfulComponent />}
+                {
+                  linkSuccess
+                  &&
+                  <SuccessfulComponent
+                    email={email}
+                    password={password}
+                    handleEmail={handleEmail}
+                    handlePassword={handlePassword}
+                    onSubmit={completeSignup}
+                    msgErr={msgError}
+                  />
+                }
 
                 {/* If the verification was unsuccessful */}
                 {linkError && <ErrorComponent onClick={() => navigate('/login')} />}
@@ -84,13 +149,14 @@ export default function VerifyLink() {
   )
 }
 
-const SuccessfulComponent = ({ onClick }) => (
+
+const SuccessfulComponent = ({ onSubmit, password, handlePassword, email, handleEmail, msgErr }) => (
   <div className="input-area">
     {/* INPUT */}
     <div className="mb-5">
       <InputCom
-        // value={password}
-        // inputHandler={handlePassword}
+        value={email}
+        inputHandler={handleEmail}
         placeholder="support@mermsemr.com"
         label="Email"
         name="email"
@@ -100,8 +166,8 @@ const SuccessfulComponent = ({ onClick }) => (
     </div>
     <div className="mb-5">
       <InputCom
-        // value={password}
-        // inputHandler={handlePassword}
+        value={password}
+        inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Password"
         name="password"
@@ -109,11 +175,12 @@ const SuccessfulComponent = ({ onClick }) => (
         iconName="password"
       />
     </div>
+    {msgErr && <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]">{msgErr}</div>}
     <div className="signin-area mb-3.5">
       <button
-        onClick={onClick}
+        onClick={onSubmit}
         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 $`}
+        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]`}
       >
         <span>Continue</span>
       </button>
diff --git a/src/components/AuthPages/VerifyYou/index.jsx b/src/components/AuthPages/VerifyYou/index.jsx
index 5cf2fee..c8d8831 100644
--- a/src/components/AuthPages/VerifyYou/index.jsx
+++ b/src/components/AuthPages/VerifyYou/index.jsx
@@ -1,31 +1,49 @@
+import { useNavigate, Link } from "react-router-dom";
 import AuthLayout from "../AuthLayout";
+import WrenchBoard from "../../../assets/images/wrenchboard.png"
 
 export default function VerifyYou() {
+  const navigate = useNavigate()
   return (
     <>
       <AuthLayout
         slogan="Welcome to WrenchBoard"
       >
-        <div className="content-wrapper login dark:bg-dark-white w-full lg:max-w-[500px] 2xl:w-[828px] rounded-xl flex flex-col justify-center 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" style={{
-                fontSize: 'calc(1rem + .6vw)'
-              }}>
-                Verification Sent
-              </h1>
+        <div className="w-full">
+          <div className='mb-12'>
+            <Link to='#'>
+              <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
+            </Link>
+          </div>
+          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center 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]">
+                  Let's verify your email now
+                </h1>
+                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">Check your email.</span>
+              </div>
+              <div className="input-area">
+                <div className="mb-5">
+                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                    <b>Verify Email.</b> Help us secure your WrenchBoard account by verifying your email registration address. Verification will let you access all of WrenchBoard's features.
+                  </p>
+                </div>
+                <div className="mb-5">
+                  <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
+                    If you do not receive the confirmation message within a few minutes of signing up, please check your Junk E-mail folder just in case the confirmation email got delivered there instead of your inbox. If so, select the confirmation message and click Not Junk, which will allow future messages to get through.
+                  </p>
+                </div>
+              </div>
+            <div className="signin-area flex justify-center mb-3.5">
+              <button
+                onClick={() => navigate("/")}
+                type="button"
+                className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+              >
+                <span>Return Home</span>
+              </button>
             </div>
-            <div className="input-area">
-              <div className="mb-5">
-                <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                  To complete the verification process, you should check your email inbox and look for the verification email. It may take a few minutes for the email to arrive, so be patient. Once you receive the email, open it and click on the verification link provided.
-                </p>
-              </div>
-              <div className="mb-5">
-                <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-                  If you haven't received the verification email after a reasonable amount of time, make sure to check your spam or junk mail folder. It's also possible that the email was sent to the wrong email address, so double-check that you entered your email address correctly.
-                </p>
-              </div>
             </div>
           </div>
         </div>
diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx
index 707d0cc..5382c53 100644
--- a/src/components/Helpers/Inputs/InputCom/index.jsx
+++ b/src/components/Helpers/Inputs/InputCom/index.jsx
@@ -68,20 +68,20 @@ export default function InputCom({
       <div className="flex items-center justify-between">
       {label && (
         <label
-          className="input-label text-[#181c32] dark:text-white text-base font-semibold block mb-2.5"
+          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block mb-2.5"
           htmlFor={name}
         >
           {label}
         </label>
       )}
-      {forgotPassword && <Link to="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
+      {forgotPassword && <Link to="/forgot-password" className="text-[13.975px] leading-[20.9625px] text-[#019ef7] hover:text-[#009ef7]">Forgot Password?</Link>}
       </div>
       <div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
         <input
           placeholder={placeholder}
           value={value}
           onChange={inputHandler}
-          className="input-field placeholder:text-base text-bese px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
+          className="input-field placeholder:text-base px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
           type={type}
           id={name}
           name={name}
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index b9acb87..d307d91 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -11,6 +11,11 @@ class usersService {
         return this.postAuxEnd("/createuser", reqData);
     }
 
+    CompleteSignUp(reqData){
+        localStorage.setItem("session_token", ``);
+        return this.postAuxEnd("/completesignuplink", reqData);
+    }
+
     getHomeDate(){
         var postData = {
             uuid: localStorage.getItem("uuid"),