diff --git a/packages/login/public/index.html b/packages/login/public/index.html
index 4b535848..a29b14b9 100644
--- a/packages/login/public/index.html
+++ b/packages/login/public/index.html
@@ -4,17 +4,17 @@
 
 <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="WiseMappping" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" />
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.png" /> -->
 
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>WiseMappping - Login</title>
+    <title>WiseMappping - Loading ...</title>
 </head>
 
 <body>
diff --git a/packages/login/src/components/Header.tsx b/packages/login/src/components/Header.tsx
index dbc5f539..60ecd276 100644
--- a/packages/login/src/components/Header.tsx
+++ b/packages/login/src/components/Header.tsx
@@ -11,9 +11,8 @@ interface HeaderProps {
 class Header extends React.Component<HeaderProps, HeaderProps> {
   constructor(props: HeaderProps) {
     super(props);
-    this.state = props;
+    this.state = { type: props.type };
   }
-
   render() {
     let signUpButton;
     let signInButton;
@@ -34,7 +33,7 @@ class Header extends React.Component<HeaderProps, HeaderProps> {
     return (
       <nav>
         <div className="header">
-          <span className="header-logo"><Link to="/"><img src={String(logo)} alt="logo" /></Link></span>
+          <span className="header-logo"><Link to="/"><img src={String(logo)} alt="logo" /></a></span>
           {text}
           {signUpButton}
           {signInButton}
@@ -51,7 +50,7 @@ interface ButtonProps {
 const SignInButton = (props: ButtonProps) => {
   return (
     <span className={`button-style1 ${props.className}`}>
-      <a href="/c/login"><FormattedMessage id="login.signin" defaultMessage="Sign In" /></a>
+      <Link to="/c/login"><FormattedMessage id="login.signin" defaultMessage="Sign In" /></Link>
     </span>);
 }
 
diff --git a/packages/login/src/components/RegistrationPage.tsx b/packages/login/src/components/RegistrationPage.tsx
index a1b98518..88fefc6f 100644
--- a/packages/login/src/components/RegistrationPage.tsx
+++ b/packages/login/src/components/RegistrationPage.tsx
@@ -39,11 +39,26 @@ const RegistrationForm = () => {
   const [lastName, setLastname] = useState("")
   const [firstname, setFirstname] = useState("");
   const [password, setPassword] = useState("");
+  const [recaptchaToken, setRecaptchaToken] = useState(undefined);
   const [recaptcha, setRecaptcha] = useState(undefined);
   const [errorMsg, setErrorMsg] = useState(undefined);
+  
+  
   const history = useHistory();
   const intl = useIntl();
 
+
+  const verifyCallback = (recaptchaToken:string) => {
+    // Here you will get the final recaptchaToken!!!  
+    console.log(recaptchaToken, "<= your recaptcha token");
+    setRecaptchaToken(recaptchaToken);
+  }
+
+  const updateToken = () => {
+    // you will get a new token in verifyCallback
+    recaptcha.execute();
+  }
+  
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
 
@@ -54,7 +69,7 @@ const RegistrationForm = () => {
         firstName: firstname,
         lastName: lastName,
         password: password,
-        recaptcha: recaptcha
+        recaptcha: recaptchaToken
       }
     );
 
@@ -75,8 +90,6 @@ const RegistrationForm = () => {
     });
   }
 
-
-
   return (
     <div className="wrapper">
       <div className="content">
@@ -93,9 +106,10 @@ const RegistrationForm = () => {
 
           <div>
             <ReCaptcha
+              ref={setRecaptcha}
               sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
               verifyCallback={setRecaptcha}
-            />
+              na/>
           </div>
           <p>
             <FormattedMessage id="registration.termandconditions" defaultMessage="Terms of Service: Please check the WiseMapping Account information you've entered above, and review the Terms of Service here. By clicking on 'Register' below you are agreeing to the Terms of Service above and the Privacy Policy" />
diff --git a/packages/login/webpack.config.js b/packages/login/webpack.config.js
index b6b4ec72..1849ee9e 100644
--- a/packages/login/webpack.config.js
+++ b/packages/login/webpack.config.js
@@ -55,6 +55,6 @@ module.exports = {
         contentBase: path.join(__dirname, 'dist'),
         compress: true,
         port: 3000,
-        hot: true,
+        hot: true
     }
 }
\ No newline at end of file
