diff --git a/packages/fetch-extension/src/index.tsx b/packages/fetch-extension/src/index.tsx
index 186bf25c6a..a60d3d5354 100644
--- a/packages/fetch-extension/src/index.tsx
+++ b/packages/fetch-extension/src/index.tsx
@@ -376,7 +376,10 @@ ReactDOM.render(
                         path="/setting/chat/readRecipt"
                         element={<ReadRecipt />}
                       />
-                      <Route path="/validators" element={<ValidatorList />} />
+                      <Route
+                        path="/validators/:operation"
+                        element={<ValidatorList />}
+                      />
                       <Route
                         path="/validators/:validator_address/:operation"
                         element={<Validator />}
diff --git a/packages/fetch-extension/src/pages/main/stake.tsx b/packages/fetch-extension/src/pages/main/stake.tsx
index 339467e500..9fbdf769b3 100644
--- a/packages/fetch-extension/src/pages/main/stake.tsx
+++ b/packages/fetch-extension/src/pages/main/stake.tsx
@@ -211,7 +211,7 @@ export const StakeView: FunctionComponent = observer(() => {
               chainId: chainStore.current.chainId,
               chainName: chainStore.current.chainName,
             });
-            navigate("/validators");
+            navigate("/validators/validator");
           }}
         >
           <FormattedMessage id="main.stake.button.stake" />
diff --git a/packages/fetch-extension/src/pages/main/tx-button.tsx b/packages/fetch-extension/src/pages/main/tx-button.tsx
index 284a3f2c7f..1063d7726e 100644
--- a/packages/fetch-extension/src/pages/main/tx-button.tsx
+++ b/packages/fetch-extension/src/pages/main/tx-button.tsx
@@ -199,7 +199,7 @@ export const TxButtonView: FunctionComponent = observer(() => {
         <Link
           to={
             isStakableInApp
-              ? "/validators"
+              ? "/validators/validator"
               : chainStore.current.walletUrlForStaking || ""
           }
           target={!isStakableInApp ? "_blank" : ""}
@@ -232,6 +232,9 @@ export const TxButtonView: FunctionComponent = observer(() => {
             onMouseLeave={() => {
               setIsActiveStake(false);
             }}
+            data-loading={["undelegate", "redelegate", "delegate"].includes(
+              accountInfo.txTypeInProgress
+            )}
           >
             <img
               src={isActiveStake ? activeStake : stake}
diff --git a/packages/fetch-extension/src/pages/sign/index.tsx b/packages/fetch-extension/src/pages/sign/index.tsx
index 5ea1afd995..ae40b2a208 100644
--- a/packages/fetch-extension/src/pages/sign/index.tsx
+++ b/packages/fetch-extension/src/pages/sign/index.tsx
@@ -226,8 +226,6 @@ export const SignPage: FunctionComponent = observer(() => {
     return memoConfig.error != null || feeConfig.error != null;
   })();
 
-  console.log("@@@@#!3", signDocHelper.signDocWrapper?.isADR36SignDoc);
-
   return (
     <HeaderLayout
       showChainName={alternativeTitle == null}
diff --git a/packages/fetch-extension/src/pages/validator-list/index.tsx b/packages/fetch-extension/src/pages/validator-list/index.tsx
index 10c7312768..c3e6f109f5 100644
--- a/packages/fetch-extension/src/pages/validator-list/index.tsx
+++ b/packages/fetch-extension/src/pages/validator-list/index.tsx
@@ -1,20 +1,26 @@
 import searchIcon from "@assets/icon/search.png";
 import { Staking } from "@keplr-wallet/stores";
+import { CoinPretty } from "@keplr-wallet/unit";
 import { HeaderLayout } from "@layouts/header-layout";
-import classnames from "classnames";
 import { observer } from "mobx-react-lite";
 import React, { FunctionComponent, useEffect, useState } from "react";
-import { useNavigate } from "react-router";
+import { useLocation, useNavigate } from "react-router";
 import { useStore } from "../../stores";
+import { MyValidatorsList } from "./my-validators";
 import style from "./style.module.scss";
-import { ValidatorCard } from "./validator-card";
-import { CoinPretty } from "@keplr-wallet/unit";
+import { ValidatorsList } from "./validators";
 
 type ValidatorData = Staking.Validator & { amount: CoinPretty };
 
+enum ValidatorOperation {
+  VALIDATOR = "validator",
+  MY_STAKE = "myStake",
+}
+
 export const ValidatorList: FunctionComponent = observer(() => {
   const navigate = useNavigate();
-
+  const location = useLocation();
+  const operation = location.pathname.split("/")[2];
   const [validators, setValidators] = useState<{
     [key in string]: ValidatorData;
   }>({});
@@ -62,10 +68,6 @@ export const ValidatorList: FunctionComponent = observer(() => {
     fetchValidators();
   }, [queries.cosmos.queryValidators, queryDelegations]);
 
-  const sortValidators = (a: ValidatorData, b: ValidatorData) => {
-    return parseFloat(b.delegator_shares) - parseFloat(a.delegator_shares);
-  };
-
   const handleFilterValidators = (searchValue: string) => {
     const filteredValidators = Object.values(validators).filter((validator) =>
       searchValue?.trim().length
@@ -88,9 +90,39 @@ export const ValidatorList: FunctionComponent = observer(() => {
       alternativeTitle="Stake"
       onBackButton={() => navigate("/")}
     >
-      <p className={classnames("h2", "my-0", "font-weight-normal")}>
-        Validators
-      </p>
+      <div className={style["tabList"]}>
+        <div
+          className={style["tab"]}
+          style={{
+            borderBottom:
+              operation == ValidatorOperation.VALIDATOR
+                ? "2px solid #D43BF6"
+                : "",
+            color:
+              operation == ValidatorOperation.VALIDATOR ? "#D43BF6" : "#000000",
+          }}
+          onClick={() =>
+            navigate(`/validators/${ValidatorOperation.VALIDATOR}`)
+          }
+        >
+          Validators
+        </div>
+
+        <div
+          className={style["tab"]}
+          style={{
+            borderBottom:
+              operation == ValidatorOperation.MY_STAKE
+                ? "2px solid #3B82F6"
+                : "",
+            color:
+              operation == ValidatorOperation.MY_STAKE ? "#3B82F6" : "#000000",
+          }}
+          onClick={() => navigate(`/validators/${ValidatorOperation.MY_STAKE}`)}
+        >
+          My Stake
+        </div>
+      </div>
       <div className={style["searchContainer"]}>
         <div className={style["searchBox"]}>
           <img draggable={false} src={searchIcon} alt="search" />
@@ -102,8 +134,7 @@ export const ValidatorList: FunctionComponent = observer(() => {
           />
         </div>
       </div>
-
-      {loading ? (
+      {loading && (
         <div
           style={{
             textAlign: "center",
@@ -118,18 +149,13 @@ export const ValidatorList: FunctionComponent = observer(() => {
           <br />
           Loading Validators
         </div>
-      ) : filteredValidators.length ? (
-        filteredValidators
-          .sort((a, b) => sortValidators(a, b))
-          .map((validator: ValidatorData) => (
-            <ValidatorCard
-              validator={validator}
-              chainID={chainStore.current.chainId}
-              key={validator.operator_address}
-            />
-          ))
-      ) : (
-        <div style={{ textAlign: "center" }}>No Validators Found</div>
+      )}
+
+      {!loading && operation === ValidatorOperation.VALIDATOR && (
+        <ValidatorsList filteredValidators={filteredValidators} />
+      )}
+      {!loading && operation === ValidatorOperation.MY_STAKE && (
+        <MyValidatorsList filteredValidators={filteredValidators} />
       )}
     </HeaderLayout>
   );
diff --git a/packages/fetch-extension/src/pages/validator-list/my-validator-card/index.tsx b/packages/fetch-extension/src/pages/validator-list/my-validator-card/index.tsx
new file mode 100644
index 0000000000..79c86ef9ff
--- /dev/null
+++ b/packages/fetch-extension/src/pages/validator-list/my-validator-card/index.tsx
@@ -0,0 +1,83 @@
+import { ToolTip } from "@components/tooltip";
+import { Staking } from "@keplr-wallet/stores";
+import { CoinPretty } from "@keplr-wallet/unit";
+import { formatAddress, shortenMintingNumber } from "@utils/format";
+import React from "react";
+import { useNavigate } from "react-router";
+import { CHAIN_ID_DORADO, CHAIN_ID_FETCHHUB } from "../../../config.ui.var";
+import styleValidators from "./validators.module.scss";
+
+export const URL: { [key in string]: string } = {
+  [CHAIN_ID_DORADO]: "https://fetchstation.azoyalabs.com/dorado/validators",
+  [CHAIN_ID_FETCHHUB]: "https://fetchstation.azoyalabs.com/mainnet/validators",
+};
+
+export const MyValidatorCard = ({
+  validator,
+  chainID,
+}: {
+  validator: Staking.Validator & { amount: CoinPretty };
+  chainID: string;
+}) => {
+  const navigate = useNavigate();
+
+  const status = validator.status.split("_")[2].toLowerCase();
+  const commisionRate = (
+    parseFloat(validator.commission.commission_rates.rate) * 100
+  ).toFixed(2);
+  return (
+    <div
+      className={styleValidators["item"]}
+      onClick={() =>
+        navigate(`/validators/${validator.operator_address}/stake`)
+      }
+    >
+      <div
+        className={styleValidators["row"]}
+        style={{ borderBottom: "1px solid lightgray" }}
+      >
+        <div className={styleValidators["label"]}>
+          {validator.description.moniker}
+        </div>
+        <ToolTip
+          trigger="hover"
+          options={{ placement: "bottom" }}
+          tooltip={
+            <div className={styleValidators["tooltip"]}>
+              {validator.operator_address}
+            </div>
+          }
+        >
+          <span className={styleValidators["address"]}>
+            {formatAddress(validator.operator_address)}
+          </span>
+        </ToolTip>
+      </div>
+      <div className={styleValidators["row"]}>
+        <div className={styleValidators["col"]}>
+          <span className={styleValidators["label"]}>Staked</span>
+          <span style={{ textTransform: "none" }}>
+            {shortenMintingNumber(validator.amount.toDec().toString(), 0)}
+            {validator.amount.currency.coinDenom}
+          </span>
+        </div>
+        <div className={styleValidators["col"]}>
+          <span className={styleValidators["label"]}>Commission</span>
+          <span>{commisionRate}%</span>
+        </div>
+        <div className={styleValidators["col"]}>
+          <span className={styleValidators["label"]}>Status</span>
+          <span>{status}</span>
+        </div>
+      </div>
+      <a
+        href={`${URL[chainID]}/${validator.operator_address}`}
+        target="_blank"
+        rel="noreferrer"
+        style={{ fontSize: "12px" }}
+      >
+        View in Explorer
+      </a>
+    </div>
+  );
+};
diff --git a/packages/fetch-extension/src/pages/validator-list/my-validator-card/validators.module.scss b/packages/fetch-extension/src/pages/validator-list/my-validator-card/validators.module.scss
new file mode 100644
index 0000000000..d848d5ee07
--- /dev/null
+++ b/packages/fetch-extension/src/pages/validator-list/my-validator-card/validators.module.scss
@@ -0,0 +1,57 @@
+.col {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  text-transform: capitalize;
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.label {
+  font-weight: bold;
+  text-transform: capitalize;
+}
+
+.address {
+  font-style: italic;
+  font-size: 12px;
+}
+
+.avatar {
+  width: 80px;
+  height: 80px;
+  line-height: initial;
+  text-align: center;
+  color: rgb(255, 255, 255);
+  border-radius: 100%;
+  background: rgb(214, 26, 127);
+}
+.item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  padding: 10px;
+  background: #ffffff;
+  border-radius: 6px;
+  cursor: pointer;
+  margin: 10px 0px;
+}
+
+.item:hover {
+  box-shadow: 0 0 100px 30px #e0e0e0 inset;
+}
+
+.tooltip {
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 10px;
+
+  padding: 2px 4px;
+}
diff --git a/packages/fetch-extension/src/pages/validator-list/my-validators/index.tsx b/packages/fetch-extension/src/pages/validator-list/my-validators/index.tsx
new file mode 100644
index 0000000000..362f33ba8d
--- /dev/null
+++ b/packages/fetch-extension/src/pages/validator-list/my-validators/index.tsx
@@ -0,0 +1,47 @@
+import { Staking } from "@keplr-wallet/stores";
+import { CoinPretty } from "@keplr-wallet/unit";
+import React from "react";
+import { useStore } from "../../../stores";
+import { MyValidatorCard } from "../my-validator-card";
+
+type ValidatorData = Staking.Validator & { amount: CoinPretty };
+
+export const MyValidatorsList = ({
+  filteredValidators,
+}: {
+  filteredValidators: ValidatorData[];
+}) => {
+  const { chainStore } = useStore();
+
+  const filterValidators = (validator: ValidatorData) => {
+    return validator.amount
+      .toDec()
+      .gt(new CoinPretty(validator.amount.currency, "0").toDec());
+  };
+
+  const sortValidators = (a: ValidatorData, b: ValidatorData) => {
+    return (
+      parseFloat(b.amount.toDec().toString()) -
+      parseFloat(a.amount.toDec().toString())
+    );
+  };
+
+  return (
+    <React.Fragment>
+      {filteredValidators.length ? (
+        filteredValidators
+          .filter(filterValidators)
+          .sort(sortValidators)
+          .map((validator: ValidatorData) => (
+            <MyValidatorCard
+              validator={validator}
+              chainID={chainStore.current.chainId}
+              key={validator.operator_address}
+            />
+          ))
+      ) : (
+        <div style={{ textAlign: "center" }}>No Validators Found</div>
+      )}
+    </React.Fragment>
+  );
+};
diff --git a/packages/fetch-extension/src/pages/validator-list/style.module.scss b/packages/fetch-extension/src/pages/validator-list/style.module.scss
index 570013b901..a6a464b2bf 100644
--- a/packages/fetch-extension/src/pages/validator-list/style.module.scss
+++ b/packages/fetch-extension/src/pages/validator-list/style.module.scss
@@ -81,6 +81,17 @@
   animation: pathRect 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
 }
 
+.tabList {
+  display: flex;
+  flex-direction: row;
+}
+
+.tab {
+  width: 50%;
+  text-align: center;
+  cursor: pointer;
+}
+
 @keyframes pathRect {
   25% {
     stroke-dashoffset: 64;
diff --git a/packages/fetch-extension/src/pages/validator-list/validators/index.tsx b/packages/fetch-extension/src/pages/validator-list/validators/index.tsx
new file mode 100644
index 0000000000..1b2832ea58
--- /dev/null
+++ b/packages/fetch-extension/src/pages/validator-list/validators/index.tsx
@@ -0,0 +1,37 @@
+import { Staking } from "@keplr-wallet/stores";
+import { CoinPretty } from "@keplr-wallet/unit";
+import React from "react";
+import { useStore } from "../../../stores";
+import { ValidatorCard } from "../validator-card";
+
+type ValidatorData = Staking.Validator & { amount: CoinPretty };
+
+export const ValidatorsList = ({
+  filteredValidators,
+}: {
+  filteredValidators: ValidatorData[];
+}) => {
+  const { chainStore } = useStore();
+
+  const sortValidators = (a: ValidatorData, b: ValidatorData) => {
+    return parseFloat(b.delegator_shares) - parseFloat(a.delegator_shares);
+  };
+
+  return (
+    <React.Fragment>
+      {filteredValidators.length ? (
+        filteredValidators
+          .sort((a, b) => sortValidators(a, b))
+          .map((validator: ValidatorData) => (
+            <ValidatorCard
+              validator={validator}
+              chainID={chainStore.current.chainId}
+              key={validator.operator_address}
+            />
+          ))
+      ) : (
+        <div style={{ textAlign: "center" }}>No Validators Found</div>
+      )}
+    </React.Fragment>
+  );
+};
diff --git a/packages/fetch-extension/src/pages/validator/index.tsx b/packages/fetch-extension/src/pages/validator/index.tsx
index 5ef06cec70..b450caaf55 100644
--- a/packages/fetch-extension/src/pages/validator/index.tsx
+++ b/packages/fetch-extension/src/pages/validator/index.tsx
@@ -1,13 +1,20 @@
+import { Staking } from "@keplr-wallet/stores";
 import { HeaderLayout } from "@layouts/header-layout";
+import { observer } from "mobx-react-lite";
 import React, { FunctionComponent, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router";
-import style from "./style.module.scss";
-import { Staking } from "@keplr-wallet/stores";
 import { useStore } from "../../stores";
-import { ValidatorDetails } from "./validator-details";
-import { observer } from "mobx-react-lite";
 import { Stake } from "./stake";
+import style from "./style.module.scss";
+import { Transfer } from "./transfer";
 import { Unstake } from "./unstake";
+import { ValidatorDetails } from "./validator-details";
+
+enum ValidatorOperation {
+  STAKE = "stake",
+  UNSTAKE = "unstake",
+  TRANSFER = "transfer",
+}
 
 export const Validator: FunctionComponent = observer(() => {
   const navigate = useNavigate();
@@ -60,8 +67,8 @@ export const Validator: FunctionComponent = observer(() => {
     <HeaderLayout
       showChainName={false}
       canChangeChainInfo={false}
-      alternativeTitle={operation == "stake" ? "Stake" : "Unstake"}
-      onBackButton={() => navigate("/validators")}
+      alternativeTitle={operation.toLocaleUpperCase()}
+      onBackButton={() => navigate(-1)}
     >
       <div className={style["stakeContainer"]}>
         {validator && (
@@ -86,8 +93,12 @@ export const Validator: FunctionComponent = observer(() => {
             <div
               className={style["tab"]}
               style={{
-                borderBottom: operation == "stake" ? "2px solid #D43BF6" : "",
-                color: operation == "stake" ? "#D43BF6" : "#000000",
+                borderBottom:
+                  operation == ValidatorOperation.STAKE
+                    ? "2px solid #D43BF6"
+                    : "",
+                color:
+                  operation == ValidatorOperation.STAKE ? "#D43BF6" : "#000000",
               }}
               onClick={() => navigate(`/validators/${validatorAddress}/stake`)}
             >
@@ -97,8 +108,14 @@ export const Validator: FunctionComponent = observer(() => {
             <div
               className={style["tab"]}
               style={{
-                borderBottom: operation == "unstake" ? "2px solid #3B82F6" : "",
-                color: operation == "unstake" ? "#3B82F6" : "#000000",
+                borderBottom:
+                  operation == ValidatorOperation.UNSTAKE
+                    ? "2px solid #3B82F6"
+                    : "",
+                color:
+                  operation == ValidatorOperation.UNSTAKE
+                    ? "#3B82F6"
+                    : "#000000",
               }}
               onClick={() =>
                 navigate(`/validators/${validatorAddress}/unstake`)
@@ -106,12 +123,44 @@ export const Validator: FunctionComponent = observer(() => {
             >
               Unstake
             </div>
+            <div
+              className={style["tab"]}
+              style={{
+                borderBottom:
+                  operation == ValidatorOperation.TRANSFER
+                    ? "2px solid #D43BF6"
+                    : "",
+                color:
+                  operation == ValidatorOperation.TRANSFER
+                    ? "#D43BF6"
+                    : "#000000",
+              }}
+              onClick={() =>
+                navigate(`/validators/${validatorAddress}/transfer`)
+              }
+            >
+              Transfer
+            </div>
           </div>
-          {operation == "stake" ? (
+          {operation == ValidatorOperation.STAKE && (
             <Stake validatorAddress={validatorAddress} />
-          ) : (
+          )}
+          {operation == ValidatorOperation.UNSTAKE && (
             <Unstake validatorAddress={validatorAddress} />
           )}
+          {operation == ValidatorOperation.TRANSFER && (
+            <Transfer
+              validatorAddress={validatorAddress}
+              balance={amount}
+              validatorsList={[
+                ...bondedValidators.validators,
+                ...unbondedValidators.validators,
+                ...unbondingValidators.validators,
+              ].filter(
+                (validator) => validator.operator_address != validatorAddress
+              )}
+            />
+          )}
         </div>
       </div>
     </HeaderLayout>
diff --git a/packages/fetch-extension/src/pages/validator/stake-complete.tsx b/packages/fetch-extension/src/pages/validator/stake-complete.tsx
index 9818e28e6b..d45a4262da 100644
--- a/packages/fetch-extension/src/pages/validator/stake-complete.tsx
+++ b/packages/fetch-extension/src/pages/validator/stake-complete.tsx
@@ -73,7 +73,7 @@ export const StakeComplete: FunctionComponent = observer(() => {
       <Button
         color="primary"
         block
-        onClick={() => navigate("/validators")}
+        onClick={() => navigate(`/validators/validator`)}
         style={{ marginLeft: "0px" }}
       >
         <img
diff --git a/packages/fetch-extension/src/pages/validator/stake.tsx b/packages/fetch-extension/src/pages/validator/stake.tsx
index 9ff802d4e8..7ffe2f7f72 100644
--- a/packages/fetch-extension/src/pages/validator/stake.tsx
+++ b/packages/fetch-extension/src/pages/validator/stake.tsx
@@ -77,42 +77,41 @@ export const Stake: FunctionComponent<{ validatorAddress: string }> = observer(
     }, [intl, error]);
 
     const notification = useNotification();
+
+    const txnResult = {
+      onBroadcasted: () => {
+        notification.push({
+          type: "primary",
+          placement: "top-center",
+          duration: 2,
+          content: `Transaction broadcasted`,
+          canDelete: true,
+          transition: {
+            duration: 0.25,
+          },
+        });
+      },
+      onFulfill: (tx: any) => {
+        const istxnSuccess = tx.code ? false : true;
+        notification.push({
+          type: istxnSuccess ? "success" : "danger",
+          placement: "top-center",
+          duration: 5,
+          content: istxnSuccess
+            ? `Transaction Completed`
+            : `Transaction Failed: ${tx.log}`,
+          canDelete: true,
+          transition: {
+            duration: 0.25,
+          },
+        });
+      },
+    };
     const stakeClicked = async () => {
       try {
-        await account.cosmos.sendDelegateMsg(
-          amountConfig.amount,
-          validatorAddress,
-          memoConfig.memo,
-          feeConfig.toStdFee(),
-          undefined,
-          {
-            onBroadcasted: () => {
-              notification.push({
-                type: "primary",
-                placement: "top-center",
-                duration: 2,
-                content: `Transaction broadcasted`,
-                canDelete: true,
-                transition: {
-                  duration: 0.25,
-                },
-              });
-            },
-            onFulfill: () => {
-              notification.push({
-                type: "success",
-                placement: "top-center",
-                duration: 5,
-                content: `Transaction Completed`,
-                canDelete: true,
-                transition: {
-                  duration: 0.25,
-                },
-              });
-              navigate("/stake-complete/" + validatorAddress);
-            },
-          }
-        );
+        await account.cosmos
+          .makeDelegateTx(amountConfig.amount, validatorAddress)
+          .send(feeConfig.toStdFee(), memoConfig.memo, undefined, txnResult);
       } catch (e) {
         notification.push({
           type: "danger",
@@ -124,6 +123,7 @@ export const Stake: FunctionComponent<{ validatorAddress: string }> = observer(
             duration: 0.25,
           },
         });
+      } finally {
         navigate("/", { replace: true });
       }
     };
diff --git a/packages/fetch-extension/src/pages/validator/style.module.scss b/packages/fetch-extension/src/pages/validator/style.module.scss
index 32e0ca5506..19bfb491f4 100644
--- a/packages/fetch-extension/src/pages/validator/style.module.scss
+++ b/packages/fetch-extension/src/pages/validator/style.module.scss
@@ -112,6 +112,10 @@
   animation: pathRect 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
 }
 
+.dropdown:hover {
+  background: aliceblue !important;
+}
+
 @keyframes pathRect {
   25% {
     stroke-dashoffset: 64;
diff --git a/packages/fetch-extension/src/pages/validator/transfer.tsx b/packages/fetch-extension/src/pages/validator/transfer.tsx
new file mode 100644
index 0000000000..5c03ad4f77
--- /dev/null
+++ b/packages/fetch-extension/src/pages/validator/transfer.tsx
@@ -0,0 +1,236 @@
+import activeStake from "@assets/icon/activeStake.png";
+import { useNotification } from "@components/notification";
+import {
+  EmptyAmountError,
+  InsufficientAmountError,
+  InvalidNumberAmountError,
+  NegativeAmountError,
+  ZeroAmountError,
+  useRedelegateTxConfig,
+} from "@keplr-wallet/hooks";
+import { observer } from "mobx-react-lite";
+import React, { FunctionComponent, useMemo, useState } from "react";
+import { useIntl } from "react-intl";
+import { useNavigate } from "react-router";
+import {
+  Button,
+  ButtonDropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownToggle,
+  FormGroup,
+  Input,
+  Label,
+} from "reactstrap";
+import { useStore } from "../../stores";
+import style from "./style.module.scss";
+import { Staking } from "@keplr-wallet/stores";
+import { CoinPretty } from "@keplr-wallet/unit";
+
+export const Transfer: FunctionComponent<{
+  validatorAddress: string;
+  validatorsList: Staking.Validator[];
+  balance: CoinPretty;
+}> = observer(({ validatorAddress, validatorsList, balance }) => {
+  const navigate = useNavigate();
+  const { chainStore, accountStore, queriesStore } = useStore();
+  const account = accountStore.getAccount(chainStore.current.chainId);
+  const [selectedValidator, setSelectedValidator] = useState<Staking.Validator>(
+    validatorsList[0]
+  );
+  const [showDropdown, setShowDropdown] = useState(false);
+  const sendConfigs = useRedelegateTxConfig(
+    chainStore,
+    queriesStore,
+    accountStore,
+    chainStore.current.chainId,
+    account.bech32Address,
+    validatorAddress
+  );
+  const { amountConfig, memoConfig, feeConfig } = sendConfigs;
+
+  const intl = useIntl();
+  const error = amountConfig.error;
+
+  const errorText: string | undefined = useMemo(() => {
+    if (error) {
+      switch (error.constructor) {
+        case EmptyAmountError:
+          // No need to show the error to user.
+          return;
+        case InvalidNumberAmountError:
+          return intl.formatMessage({
+            id: "input.amount.error.invalid-number",
+          });
+        case ZeroAmountError:
+          return intl.formatMessage({
+            id: "input.amount.error.is-zero",
+          });
+        case NegativeAmountError:
+          return intl.formatMessage({
+            id: "input.amount.error.is-negative",
+          });
+        case InsufficientAmountError:
+          return intl.formatMessage({
+            id: "input.amount.error.insufficient",
+          });
+        default:
+          return intl.formatMessage({ id: "input.amount.error.unknown" });
+      }
+    }
+  }, [intl, error]);
+
+  const notification = useNotification();
+
+  const txnResult = {
+    onBroadcasted: () => {
+      notification.push({
+        type: "primary",
+        placement: "top-center",
+        duration: 2,
+        content: `Transaction broadcasted`,
+        canDelete: true,
+        transition: {
+          duration: 0.25,
+        },
+      });
+    },
+    onFulfill: (tx: any) => {
+      const istxnSuccess = tx.code ? false : true;
+      notification.push({
+        type: istxnSuccess ? "success" : "danger",
+        placement: "top-center",
+        duration: 5,
+        content: istxnSuccess
+          ? `Transaction Completed`
+          : `Transaction Failed: ${tx.log}`,
+        canDelete: true,
+        transition: {
+          duration: 0.25,
+        },
+      });
+    },
+  };
+  const stakeClicked = async () => {
+    try {
+      await account.cosmos
+        .makeBeginRedelegateTx(
+          amountConfig.amount,
+          validatorAddress,
+          selectedValidator.operator_address
+        )
+        .send(feeConfig.toStdFee(), memoConfig.memo, undefined, txnResult);
+    } catch (e) {
+      notification.push({
+        type: "danger",
+        placement: "top-center",
+        duration: 5,
+        content: `Transaction Failed`,
+        canDelete: true,
+        transition: {
+          duration: 0.25,
+        },
+      });
+    } finally {
+      navigate("/", { replace: true });
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <FormGroup style={{ borderRadius: "0%", marginBottom: "2px" }}>
+        <Label className="form-control-label" style={{ marginTop: "10px" }}>
+          Select Validator
+        </Label>
+        <ButtonDropdown
+          isOpen={showDropdown}
+          toggle={() => setShowDropdown((value) => !value)}
+          style={{ float: "right" }}
+        >
+          <DropdownToggle
+            className={style["dropdown"]}
+            caret
+            style={{ boxShadow: "none", paddingRight: "0px" }}
+          >
+            <span
+              style={{
+                width: "175px",
+                wordBreak: "break-all",
+                overflow: "hidden",
+                display: "inline-flex",
+                justifyContent: "space-around",
+              }}
+            >
+              {selectedValidator.description.moniker}
+            </span>
+          </DropdownToggle>
+
+          <DropdownMenu>
+            <div style={{ height: "400px", overflowY: "scroll" }}>
+              {validatorsList.map((validator) => {
+                return (
+                  <DropdownItem
+                    key={validator.operator_address}
+                    onClick={() => {
+                      setSelectedValidator(validator);
+                    }}
+                  >
+                    {validator.description.moniker}
+                  </DropdownItem>
+                );
+              })}
+            </div>
+          </DropdownMenu>
+        </ButtonDropdown>
+        <Label
+          className="form-control-label"
+          style={{ width: "100%", marginTop: "10px" }}
+        >
+          <div
+            className={style["balance"]}
+            onClick={(e) => {
+              e.preventDefault();
+
+              amountConfig.toggleIsMax();
+            }}
+          >{`Staked: ${balance.trim(true).maxDecimals(6).toString()}`}</div>
+        </Label>
+        <Input
+          className="form-control-alternative"
+          type="number"
+          value={amountConfig.amount}
+          placeholder="0 FET"
+          onChange={(e) => {
+            e.preventDefault();
+            amountConfig.setAmount(e.target.value);
+          }}
+          style={{ borderRadius: "0%" }}
+          min={0}
+          autoComplete="off"
+        />
+        {errorText != null ? (
+          <div className={style["errorText"]}>{errorText}</div>
+        ) : null}
+
+        <Button
+          type="submit"
+          color="primary"
+          block
+          disabled={errorText != null || !amountConfig.amount}
+          style={{ alignItems: "end", marginTop: "10px" }}
+          onClick={stakeClicked}
+        >
+          <img
+            src={activeStake}
+            alt=""
+            style={{
+              marginRight: "5px",
+              height: "15px",
+            }}
+          />
+          Transfer
+        </Button>
+      </FormGroup>
+    </React.Fragment>
+  );
+});
diff --git a/packages/fetch-extension/src/pages/validator/unstake.tsx b/packages/fetch-extension/src/pages/validator/unstake.tsx
index 0c878a03ef..a3dda5272b 100644
--- a/packages/fetch-extension/src/pages/validator/unstake.tsx
+++ b/packages/fetch-extension/src/pages/validator/unstake.tsx
@@ -70,42 +70,42 @@ export const Unstake: FunctionComponent<{
   }, [intl, error]);
 
   const notification = useNotification();
+
+  const txnResult = {
+    onBroadcasted: () => {
+      notification.push({
+        type: "primary",
+        placement: "top-center",
+        duration: 2,
+        content: `Transaction broadcasted`,
+        canDelete: true,
+        transition: {
+          duration: 0.25,
+        },
+      });
+    },
+    onFulfill: (tx: any) => {
+      const istxnSuccess = tx.code ? false : true;
+      notification.push({
+        type: istxnSuccess ? "success" : "danger",
+        placement: "top-center",
+        duration: 5,
+        content: istxnSuccess
+          ? `Transaction Completed`
+          : `Transaction Failed: ${tx.log}`,
+        canDelete: true,
+        transition: {
+          duration: 0.25,
+        },
+      });
+    },
+  };
+
   const stakeClicked = async () => {
     try {
-      await account.cosmos.sendUndelegateMsg(
-        amountConfig.amount,
-        validatorAddress,
-        memoConfig.memo,
-        feeConfig.toStdFee(),
-        undefined,
-        {
-          onBroadcasted: () => {
-            notification.push({
-              type: "primary",
-              placement: "top-center",
-              duration: 2,
-              content: `Transaction broadcasted`,
-              canDelete: true,
-              transition: {
-                duration: 0.25,
-              },
-            });
-          },
-          onFulfill: () => {
-            notification.push({
-              type: "success",
-              placement: "top-center",
-              duration: 5,
-              content: `Transaction Completed`,
-              canDelete: true,
-              transition: {
-                duration: 0.25,
-              },
-            });
-            navigate("/stake-complete/" + validatorAddress);
-          },
-        }
-      );
+      await account.cosmos
+        .makeUndelegateTx(amountConfig.amount, validatorAddress)
+        .send(feeConfig.toStdFee(), memoConfig.memo, undefined, txnResult);
     } catch (e) {
       notification.push({
         type: "danger",
@@ -117,6 +117,7 @@ export const Unstake: FunctionComponent<{
           duration: 0.25,
         },
       });
+    } finally {
       navigate("/", { replace: true });
     }
   };
@@ -132,7 +133,7 @@ export const Unstake: FunctionComponent<{
 
               amountConfig.toggleIsMax();
             }}
-          >{`Balance: ${balance.trim(true).maxDecimals(18).toString()}`}</div>
+          >{`Staked: ${balance.trim(true).maxDecimals(6).toString()}`}</div>
         </Label>
         <Input
           className="form-control-alternative"