diff --git a/src/common/components/onboard-friend/index.scss b/src/common/components/onboard-friend/index.scss
index 0b5c59372b4..e563dca793f 100644
--- a/src/common/components/onboard-friend/index.scss
+++ b/src/common/components/onboard-friend/index.scss
@@ -3,7 +3,7 @@
       flex-direction: column;
       align-items: center;
       gap: 10px;
-      width: max-content;
+      // width: max-content;
       background-color: #161d26;
       // background-color: $dark-three;
       padding: 2rem;
@@ -19,6 +19,7 @@
     
     .friend-details{
         display: flex;
+        align-items: center;
         flex-direction: column;
         gap: 15px;
     }
@@ -27,6 +28,7 @@
       display: flex;
       margin-top: 5px;
       gap: 10px;
+      width: 100%;
     }
 
     .delegate-rc{      
@@ -67,4 +69,42 @@
       @media (max-width: 470px) {
         flex-wrap: wrap;
       }
-    }
\ No newline at end of file
+    }
+    
+    .pay-wrapper{
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      gap: 5px;
+      @media (max-width: 470px) {
+        width: 300px;      
+      }
+    }
+
+    .animation-container {
+      text-align: center;
+    }
+    
+    .animation-text {
+      animation: spin 2s ease-in-out infinite;
+    }
+    
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      25% {
+        transform: rotate(8deg);
+      }
+      50% {
+        transform: rotate(0deg);
+      }
+      75% {
+        transform: rotate(-8deg);
+      }
+      100% {
+        transform: rotate(0deg);
+      }
+    }
+    
+        
\ No newline at end of file
diff --git a/src/common/components/onboard-friend/index.tsx b/src/common/components/onboard-friend/index.tsx
index 10d7aaf08da..575d5947185 100644
--- a/src/common/components/onboard-friend/index.tsx
+++ b/src/common/components/onboard-friend/index.tsx
@@ -52,9 +52,10 @@ const OnboardFriend = (props: Props | any) => {
   const [voteAmount, setVoteAmount] = useState(0);
   const [transferAmount, setTransferAmount] = useState(0);
   const [customJsonAmount, setCustomJsonAmount] = useState(0);
-  const [rcError, setRcError] = useState("")
+  const [rcError, setRcError] = useState("");
 
   useEffect(() => {
+    console.log(global)
     let decodedObj;
     try {
       if (props.match.params.hash) {
@@ -87,6 +88,7 @@ const OnboardFriend = (props: Props | any) => {
   }
 
   const accountWithCredit = async () => {
+    setStep("creating")
     try {
       const response: any = await createAccountWithCredit({
         username: urlInfo?.username,
@@ -98,7 +100,7 @@ const OnboardFriend = (props: Props | any) => {
         if(isChecked){
           await delegateRC(activeUser?.username, urlInfo!.username, rcAmount * 1e9)
         }
-        await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email)
+        // await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email)
         setStep("success");
         setMsg("Account created successfully")
       } else {
@@ -111,6 +113,7 @@ const OnboardFriend = (props: Props | any) => {
   }
 
   const createAccountNoUserKcCredit = async () => {
+    setStep("creating")
     try {
       const response: any = await createAccountWithCredit({
         username: urlInfo?.username,
@@ -122,7 +125,7 @@ const OnboardFriend = (props: Props | any) => {
         if(isChecked){
           await delegateRcKc(urlInfo!.referral, urlInfo!.username, rcAmount * 1e9)
         }
-        await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email)
+        // await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email)
         setStep("success");
         setMsg("Account created successfully")
       } else {
@@ -135,6 +138,7 @@ const OnboardFriend = (props: Props | any) => {
   }  
 
   const createAccount = async ()=> {
+    setStep("creating")
     try {
       const response: any = await createHiveAccount({
         username: urlInfo?.username,
@@ -146,7 +150,7 @@ const OnboardFriend = (props: Props | any) => {
         if(isChecked){
           await delegateRC(urlInfo!.referral, urlInfo!.username, rcAmount * 1e9)
         }
-        await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email)
+        // await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email)
         setStep("success");
         setMsg("Account created successfully")
       } else {
@@ -159,6 +163,7 @@ const OnboardFriend = (props: Props | any) => {
   };
 
   const createAccountNoUser = async ()=> {
+    setStep("creating")
     try {
       const response: any = await createHiveAccount({
         username: urlInfo?.username,
@@ -171,7 +176,7 @@ const OnboardFriend = (props: Props | any) => {
         if(isChecked){
           await delegateRcKc(urlInfo!.referral, urlInfo!.username, rcAmount * 1e9)
         }
-        await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email)
+        // await createBreakawayUser(urlInfo!.username, props.global.hive_id, urlInfo!.referral, urlInfo!.email)
         setStep("success");
         setMsg("Account created successfully")
       } else {
@@ -232,20 +237,21 @@ const OnboardFriend = (props: Props | any) => {
       <div className={`${containerClasses} d-flex align-items-center justify-content-center mt-5`}>
         { !activeUser ? <div className="d-flex justify-content-center">
           <div className="onboard w-100">
+          {step === "creating" &&
+            <div className="animation-container">
+              <h4>Creating Account</h4>
+              <h5 className="text-success animation-text">Please wait...</h5>
+            </div>
+          } 
           {step=== "confirm" && <>
             <h5 className="text-center">{_t("onboard.creating-for-a-friend")}</h5>
             <div className="friend-details">
             {urlInfo && (
               <div className="friend-details">
                 <span>{_t("onboard.username")} {urlInfo.username}</span>
-                <span>{_t("onboard.public-posting")} {urlInfo.keys.postingPubKey}</span>
-                <span>{_t("onboard.public-owner")} {urlInfo.keys.ownerPubKey}</span>
-                <span>{_t("onboard.public-active")} {urlInfo.keys.activePubKey}</span>
-                <span>{_t("onboard.public-memo")} {urlInfo.keys.memoPubKey}</span>
               </div>
             )}
             </div>
-
             <div className="delegate-rc">
               <div className="col-span-12 sm:col-span-10">
                 <div className="check mb-2">
@@ -280,21 +286,35 @@ const OnboardFriend = (props: Props | any) => {
                 }
               </div>
             </div>
-            <div className="create-buttons w-100">
-                <Button
-                disabled={rcError !== ""} 
-                onClick={()=> createAccountNoUser()} 
-                className="w-100"
-                >
-                  Pay with (3Hive)
-                </Button>   
-                <Button  
-                disabled={token <= 0 || rcError !== ""}
-                onClick={()=> createAccountNoUserKcCredit()} 
-                className="w-100"
-                >
-                  Pay with account token
-                </Button>   
+            <div className="pay-wrapper">
+              <span>Pay with:</span>
+              <div className="create-buttons w-100">
+                  <Button
+                  disabled={rcError !== ""} 
+                  onClick={()=> createAccountNoUser()} 
+                  className="w-100"
+                  >
+                    3Hive
+                  </Button>   
+                  <Button  
+                  disabled={token <= 0 || rcError !== ""}
+                  onClick={()=> createAccountNoUserKcCredit()} 
+                  className="w-100"
+                  >
+                  Account token
+                  </Button>   
+              </div>
+            </div>
+            <div className="friend-details">
+            {urlInfo && (
+              <div className="friend-details">
+                <span>Account public keys</span>
+                <span>{_t("onboard.public-posting")} {urlInfo.keys.postingPubKey}</span>
+                <span>{_t("onboard.public-owner")} {urlInfo.keys.ownerPubKey}</span>
+                <span>{_t("onboard.public-active")} {urlInfo.keys.activePubKey}</span>
+                <span>{_t("onboard.public-memo")} {urlInfo.keys.memoPubKey}</span>
+              </div>
+            )}
             </div>
           </>} 
           {step === "success" &&
@@ -310,16 +330,18 @@ const OnboardFriend = (props: Props | any) => {
         </div>
         </div> :
         <div className="onboard">
+          {step === "creating" &&
+            <div className="animation-container">
+              <h4>Creating Account</h4>
+              <span className="text-success animation-text">Please wait...</span>
+            </div>
+          } 
           {step=== "confirm" && <>
             <h5>{_t("onboard.creating-for-a-friend")}</h5>
             <div className="friend-details">
             {urlInfo && (
               <div className="friend-details">
                 <span>{_t("onboard.username")} {urlInfo.username}</span>
-                <span>{_t("onboard.public-posting")} {urlInfo.keys.postingPubKey}</span>
-                <span>{_t("onboard.public-owner")} {urlInfo.keys.ownerPubKey}</span>
-                <span>{_t("onboard.public-active")} {urlInfo.keys.activePubKey}</span>
-                <span>{_t("onboard.public-memo")} {urlInfo.keys.memoPubKey}</span>
               </div>
             )}
             </div>
@@ -358,24 +380,39 @@ const OnboardFriend = (props: Props | any) => {
                 }
               </div>
             </div>
-
-            <div className="create-buttons w-100">
-                <Button 
-                disabled={rcError !== ""}
-                  onClick={()=> createAccount()} 
-                  className="w-100"
-                >
-                  Pay with (3Hive)
-                </Button>   
-                <Button  
-                  disabled={token <= 0 || rcError !== ""}
-                  onClick={()=> accountWithCredit()} 
-                  className="w-100"
-                >
-                  Pay with account token
-                </Button>   
+            
+            <div className="pay-wrapper">
+              <span>Pay With:</span>
+              <div className="create-buttons">
+                  <Button 
+                  disabled={rcError !== ""}
+                    onClick={()=> createAccount()} 
+                    className="w-100"
+                  >
+                    3Hive
+                  </Button>   
+                  <Button  
+                    disabled={token <= 0 || rcError !== ""}
+                    onClick={()=> accountWithCredit()} 
+                    className="w-100"
+                  >
+                    account token
+                  </Button>   
+              </div>
             </div>
-          </>} 
+            <div className="friend-details mt-3">
+            {urlInfo && (
+              <div className="friend-details">
+                <span>Account public keys</span>
+                <span>{_t("onboard.public-posting")} {urlInfo.keys.postingPubKey}</span>
+                <span>{_t("onboard.public-owner")} {urlInfo.keys.ownerPubKey}</span>
+                <span>{_t("onboard.public-active")} {urlInfo.keys.activePubKey}</span>
+                <span>{_t("onboard.public-memo")} {urlInfo.keys.memoPubKey}</span>
+              </div>
+            )}
+            </div>
+          </>}
+          
           {step === "success" &&
           <>
             <h4 className="text-success">{msg}</h4>
diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json
index 69ea9363309..cee215514d1 100644
--- a/src/common/i18n/locales/en-US.json
+++ b/src/common/i18n/locales/en-US.json
@@ -181,9 +181,9 @@
     "username": "Username:",
     "email": "Email:",
     "referral": "Referral:",
-    "copy-key": "Make sure you copy your password as you would be needing it to setup keychain.",
+    "copy-key": "Make sure you copy your master password as you would be needing it to setup keychain.",
     "key-copied": "Password copied successfully",
-    "download-keys": "Download the rest of your keys by clicking here, and save them somewhere you won’t lose them",
+    "download-keys": "Download keys",
     "create-account-hive": "Pay with HIVE",
     "create-account-credit": "Pay with Account Credits ({{n}})",
     "confirm-details": "Confirm Details",
@@ -222,7 +222,7 @@
     "copy-tooltip": "Copy password",
     "regenerate-password": "Regenerate password",
     "copy-password": "Password copied successfully",
-    "copy-info-message": "Click QR code to copy account link and send to your onboarder/referrer (an existing Hive user you know)",
+    "copy-info-message": "Scan QR code or click to copy link and send to your onboarder / referrer",
     "creating-for-a-friend": "You are creating an account for a friend.",
     "success-message": "You successfully created the account ",
     "sign-title": "Sign transaction with ",
diff --git a/src/common/pages/sign-up.tsx b/src/common/pages/sign-up.tsx
index 6597982d890..5fbf51f2262 100644
--- a/src/common/pages/sign-up.tsx
+++ b/src/common/pages/sign-up.tsx
@@ -232,101 +232,82 @@ const SignUpPage = (props: Props | any) => {
                   Solana
                 </span>
               </div> */}
-            </div>
-          )}
-          <div className="account-sign-up">
-            {accountType === "Hive" && (
-              <>
-                {step == 1 && (
-                  <div className="sign-up">
-                    <div className="the-form">
-                      <div className="form-title">Create a Hive acoount</div>
-                      <div className="form-sub-title">
-                        {_t("sign-up.description")}
-                      </div>
 
-                      {(() => {
-                        return (
-                          <div className="form-content">
-                            <Form
-                              ref={form}
-                              onSubmit={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                if (error) {
-                                  return;
-                                }
-                                setStep(2);
-                              }}
+            </div>)}
+            <div className="account-sign-up">
+              {accountType === "Hive" && 
+              <>
+                {step == 1 && (<div className="sign-up">
+                  <div className="the-form">
+                    <div className="form-title">Create a Hive acoount</div>
+                    <div className="form-sub-title">{_t("sign-up.description")}</div>
+  
+                    {(() => {
+                      return (
+                        <div className="form-content">
+                          <Form
+                            ref={form}
+                            onSubmit={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              if(error){
+                                return;
+                              }
+                              setStep(2);
+                            }}
                             >
-                              <Form.Group className="d-flex flex-column">
-                                {error && (
-                                  <span className="text-danger align-self-center mb-3">
-                                    {error}
-                                  </span>
-                                )}
-                                <Form.Control
-                                  type="text"
-                                  placeholder={_t("sign-up.username")}
-                                  value={username}
-                                  onChange={usernameChanged}
-                                  autoFocus={true}
-                                  required={true}
-                                  onInvalid={(e: any) =>
-                                    handleInvalid(
-                                      e,
-                                      "sign-up.",
-                                      "validation-username"
-                                    )
-                                  }
-                                  onInput={handleOnInput}
-                                />
-                              </Form.Group>
-                              <Form.Group>
-                                <Form.Control
-                                  type="email"
-                                  placeholder={_t("sign-up.email")}
-                                  value={email}
-                                  onChange={emailChanged}
-                                  required={true}
-                                  onInvalid={(e: any) =>
-                                    handleInvalid(
-                                      e,
-                                      "sign-up.",
-                                      "validation-email"
-                                    )
-                                  }
-                                  onInput={handleOnInput}
-                                />
-                              </Form.Group>
-                              <Form.Group>
-                                <Form.Control
-                                  type="text"
-                                  placeholder={_t("sign-up.referral")}
-                                  value={referral}
-                                  onChange={referralChanged}
-                                  required={activeUser ? false : true}
-                                  onInvalid={(e: any) =>
-                                    handleInvalid(
-                                      e,
-                                      "sign-up.",
-                                      "validation-referral"
-                                    )
-                                  }
-                                  onInput={handleOnInput}
-                                />
-                              </Form.Group>
-                              <div className="d-flex justify-content-center">
-                                <Button
-                                  variant="primary"
-                                  block={true}
-                                  type="submit"
-                                  disabled={inProgress}
-                                >
-                                  {inProgress && spinner} {_t("sign-up.submit")}
-                                </Button>
-                              </div>
-                            </Form>
+                            <Form.Group className="d-flex flex-column">
+                              {error && <span className="text-danger align-self-center mb-3">{error}</span>}
+                              <Form.Control
+                                type="text"
+                                placeholder={_t("sign-up.username")}
+                                value={username}
+                                onChange={usernameChanged}
+                                // autoFocus={true}
+                                required={true}
+                                onInvalid={(e: any) =>
+                                  handleInvalid(e, "sign-up.", "validation-username")
+                                }
+                                onInput={handleOnInput}
+                              />
+                            </Form.Group>
+                            <Form.Group>
+                              <Form.Control
+                                type="email"
+                                placeholder={_t("sign-up.email")}
+                                value={email}
+                                onChange={emailChanged}
+                                required={true}
+                                onInvalid={(e: any) =>
+                                  handleInvalid(e, "sign-up.", "validation-email")
+                                }
+                                onInput={handleOnInput}
+                              />
+                            </Form.Group>
+                            <Form.Group>
+                              <Form.Control
+                                type="text"
+                                placeholder={_t("sign-up.referral")}
+                                value={referral}
+                                onChange={referralChanged}
+                                required={activeUser ? false : true}
+                                onInvalid={(e: any) =>
+                                  handleInvalid(e, "sign-up.", "validation-referral")
+                                }
+                                onInput={handleOnInput}
+                              />
+                            </Form.Group>
+                            <div className="d-flex justify-content-center">
+                              <Button
+                                variant="primary"
+                                block={true}
+                                type="submit"
+                                disabled={inProgress}
+                              >
+                                {inProgress && spinner} {_t("sign-up.submit")}
+                              </Button>
+                            </div>
+                          </Form>
 
                             <div className="text-center">
                               {_t("sign-up.login-text-1")}
@@ -348,8 +329,7 @@ const SignUpPage = (props: Props | any) => {
                     </div>
                   </div>
                 )}
-                {/* TEST */}
-                {newUserKeys && step == 2 && (
+                {newUserKeys && step === 2 && (
                   <div className="success-wrapper">
                     <div className="success-info">
                       <h3>Account creation steps</h3>
@@ -363,122 +343,68 @@ const SignUpPage = (props: Props | any) => {
                           {_t("onboard.username")} <strong>{username}</strong>
                         </span>
                       </div>
-                      {/* <div className="account-link">
-                      <h3>Step 1</h3>
-                      <span>Download your keys to continue</span>
-                      <Button className="mt-3" onClick={()=> downloadKeys()}>{_t("onboard.download-keys")} {downloadSvg}</Button>
-                    </div> */}
-                      {/* {isDownloaded &&  */}
                       <div className="account-link">
                         <h3>Step 1</h3>
-                        {!activeUser && (
-                          <h5 className="text-danger">
-                            {_t("onboard.copy-info-message")}
-                          </h5>
-                        )}
-                        {activeUser && (
-                          <h5 className="text-danger">
-                            Click link below or scan QR code
-                          </h5>
-                        )}
+                        <span>Download your keys to continue</span>
+                        <Button className="mt-3" onClick={()=> downloadKeys()}>{_t("onboard.download-keys")} {downloadSvg}</Button>
+                      </div>
+                      {isDownloaded && 
+                      <div className="account-link">
+                            <h3>Step 2</h3>
+                              {!activeUser && <h5 className="text-danger">{_t("onboard.copy-info-message")}</h5>}
+                              {activeUser && <h5 className="text-danger">Click link below or scan QR code</h5>}
                         <div className="link-wrap">
                           <div>
-                            {!activeUser ? (
-                              <>
-                                <div className="link">
-                                  {/* <Link to={`/onboard-friend/${urlHash}`}>{splitUrl(`${window.origin}/onboard-friend/${urlHash}`)}</Link>
-                              <span className="icon" onClick={() => {
-                                clipboard(`${window.origin}/onboard-friend/${urlHash}`);
-                                success(_t("onboard.copy-link"))
-                              }}>{copyContent}</span> */}
-                                </div>
-                              </>
-                            ) : (
-                              <a
-                                href={`${window.origin}/onboard-friend/${urlHash}`}
-                              >
-                                {_t("onboard.click-link")}
-                              </a>
-                            )}
+                            {!activeUser ? <>
+                            </> : <a href={`${window.origin}/onboard-friend/${urlHash}`}>{_t("onboard.click-link")}</a>}
                           </div>
-                          <div
+                          <div 
                             onClick={() => {
-                              clipboard(
-                                `${window.origin}/onboard-friend/${urlHash}`
-                              );
-                              success(_t("onboard.copy-link"));
+                              clipboard(`${window.origin}/onboard-friend/${urlHash}`);
+                              success(_t("onboard.copy-link"))
                             }}
-                            style={{
-                              background: "white",
-                              padding: "16px",
-                              cursor: "pointer",
+                            style={{ 
+                              background: 'white', 
+                              padding: '16px',
+                              cursor: "pointer"
                             }}
                           >
                             <QRCode
                               size={256}
-                              style={{
-                                height: "auto",
-                                maxWidth: "100%",
-                                width: "100%",
-                              }}
+                              style={{ height: "auto", maxWidth: "100%", width: "100%" }}
                               value={`${window.origin}/onboard-friend/${urlHash}`}
                               viewBox={`0 0 256 256`}
                             />
                           </div>
                         </div>
                         <div className="account-password">
-                          <h3>Step 2</h3>
-                          <span>
-                            Confirm if your friend has created your account,
-                            then check your email for instructions on setting up
-                            your account and
-                            <a
-                              className="ml-1"
-                              href="https://hive-keychain.com/"
-                              target="_blank"
-                              rel="noopener noreferrer"
-                            >
-                              download keychain extension here
-                            </a>
-                          </span>
-                          <div className="d-flex" />
-                          <div className="d-flex flex-column align-items-center">
-                            <h3>Step 3</h3>
-                            <h4 className="text-danger">
-                              Copy your account password below and paste to
-                              keychain to set up your account
-                            </h4>
-                            <div className="password">
-                              <strong>{accountPassword}</strong>
-                              <span
-                                className="icon"
-                                onClick={() => {
-                                  clipboard(accountPassword);
-                                  success(_t("onboard.key-copied"));
-                                }}
-                              >
-                                {copyContent}
-                              </span>
-                            </div>
-                          </div>
-                          <div className="account-link">
-                            <h3>Step 4</h3>
-                            {/* <span>Download your keys to continue</span> */}
-                            <Button
-                              className="mt-3"
-                              onClick={() => downloadKeys()}
-                            >
-                              {_t("onboard.download-keys")} {downloadSvg}
-                            </Button>
+                        <h3>Step 3</h3>
+                        <span>Confirm if your friend has created your account, then check your email for instructions on setting up your account and
+                          <a className="ml-1" href="https://hive-keychain.com/" target="_blank" rel="noopener noreferrer">
+                            download keychain extension here
+                          </a>
+                        </span>
+                        <div className="d-flex"> 
+                        </div>
+                        <div className="d-flex flex-column align-items-center">
+                          <h3>Step 4</h3>
+                          <h4 className="text-danger">Copy your master password below and paste to keychain to set up your account</h4>
+                          <div className="password">
+                            <strong>{accountPassword}</strong>
+                            <span className="icon" onClick={()=> {
+                              clipboard(accountPassword)
+                              success(_t("onboard.key-copied"))
+                              }}>{copyContent}</span>
                           </div>
                         </div>
+                        </div>
                       </div>
-                      {/* // } */}
+                      }
                     </div>
                   </div>
-                )}
+                )}          
               </>
-            )}
+            }
             {accountType === "Solana" && (
               <>
                 <OffchainUser