diff --git a/packages/mobile/src/components/buttons/default-button.tsx b/packages/mobile/src/components/buttons/default-button.tsx
index 6b51b26924..95c4d077e7 100644
--- a/packages/mobile/src/components/buttons/default-button.tsx
+++ b/packages/mobile/src/components/buttons/default-button.tsx
@@ -6,12 +6,24 @@ import {
   GestureResponderEvent,
 } from "react-native";
 import { Button } from "react-native-elements";
-import { bw1, flex1, br1, px4, sf, buttonFont1, py3 } from "../../styles";
+import {
+  bw1,
+  flex1,
+  br1,
+  px4,
+  sf,
+  buttonFont1,
+  py3,
+  fcWhite,
+  bgcPrimary200,
+} from "../../styles";
 
 type DefalutButtonProps = {
   containerStyle?: StyleProp<ViewStyle>[];
   buttonStyle?: StyleProp<ViewStyle>[];
   titleStyle?: StyleProp<TextStyle>[];
+  disabledStyle?: StyleProp<ViewStyle>[];
+  disabledTitleStyle?: StyleProp<TextStyle>[];
   disabled?: boolean;
   loading?: boolean;
   title: string;
@@ -20,8 +32,10 @@ type DefalutButtonProps = {
 
 export const DefaultButton: FunctionComponent<DefalutButtonProps> = ({
   containerStyle = [],
-  buttonStyle = [],
   titleStyle = [],
+  buttonStyle = [],
+  disabledStyle = [],
+  disabledTitleStyle = [],
   title,
   disabled,
   loading,
@@ -33,9 +47,11 @@ export const DefaultButton: FunctionComponent<DefalutButtonProps> = ({
       buttonStyle={sf([bw1, br1, px4, py3, ...buttonStyle])}
       titleStyle={sf([buttonFont1, ...titleStyle])}
       title={title}
+      disabled={disabled}
+      disabledStyle={sf([bgcPrimary200, ...disabledStyle])}
+      disabledTitleStyle={sf([fcWhite, ...disabledTitleStyle])}
       onPress={onPress}
       loading={loading}
-      disabled={disabled}
     />
   );
 };
diff --git a/packages/mobile/src/components/buttons/white-button.tsx b/packages/mobile/src/components/buttons/white-button.tsx
index 4fb4302639..6d02f1604e 100644
--- a/packages/mobile/src/components/buttons/white-button.tsx
+++ b/packages/mobile/src/components/buttons/white-button.tsx
@@ -23,12 +23,18 @@ import {
   bgcWhite,
   buttonFont1,
   py3,
+  bcPrimary200,
+  fcPrimary200,
+  bcSecondary200,
+  fcSecondary200,
 } from "../../styles";
 
 type WhiteButtonProps = {
   containerStyle?: StyleProp<ViewStyle>[];
   buttonStyle?: StyleProp<ViewStyle>[];
   titleStyle?: StyleProp<TextStyle>[];
+  disabledStyle?: StyleProp<ViewStyle>[];
+  disabledTitleStyle?: StyleProp<TextStyle>[];
   disabled?: boolean;
   loading?: boolean;
   color?: "primary" | "secondary" | "error" | "warning";
@@ -40,6 +46,8 @@ export const WhiteButton: FunctionComponent<WhiteButtonProps> = ({
   containerStyle = [],
   buttonStyle = [],
   titleStyle = [],
+  disabledStyle = [],
+  disabledTitleStyle = [],
   title,
   color,
   disabled,
@@ -61,6 +69,21 @@ export const WhiteButton: FunctionComponent<WhiteButtonProps> = ({
     }
   })();
 
+  const [disabledBorderColor, disabledFontColor] = (() => {
+    switch (color) {
+      case "primary":
+        return [bcPrimary200, fcPrimary200];
+      case "secondary":
+        return [bcSecondary200, fcSecondary200];
+      case "warning":
+        return [bcWarining, fcWarining];
+      case "error":
+        return [bcError, fcError];
+      default:
+        return [bcPrimary, fcPrimary];
+    }
+  })();
+
   return (
     <Button
       containerStyle={sf([flex1, ...containerStyle])}
@@ -75,9 +98,11 @@ export const WhiteButton: FunctionComponent<WhiteButtonProps> = ({
       ])}
       titleStyle={sf([fontColor, buttonFont1, ...titleStyle])}
       title={title}
+      disabled={disabled}
+      disabledStyle={sf([disabledBorderColor, bgcWhite, ...disabledStyle])}
+      disabledTitleStyle={sf([disabledFontColor, ...disabledTitleStyle])}
       onPress={onPress}
       loading={loading}
-      disabled={disabled}
     />
   );
 };
diff --git a/packages/mobile/src/components/form/fee-buttons.tsx b/packages/mobile/src/components/form/fee-buttons.tsx
index 7fa7eaf908..60766a0116 100644
--- a/packages/mobile/src/components/form/fee-buttons.tsx
+++ b/packages/mobile/src/components/form/fee-buttons.tsx
@@ -6,7 +6,7 @@ import {
   NotLoadedFeeError,
 } from "@keplr-wallet/hooks";
 import { CoinGeckoPriceStore } from "@keplr-wallet/stores";
-import { ButtonGroup, Text, useTheme } from "react-native-elements";
+import { ButtonGroup, Text } from "react-native-elements";
 import { View } from "react-native";
 import {
   alignItemsCenter,
@@ -16,7 +16,7 @@ import {
   fcWhite,
   fcGrey2,
   flex1,
-  fs16,
+  subtitle2,
   justifyContentCenter,
   sf,
   mx0,
@@ -112,6 +112,7 @@ export const FeeButtons: FunctionComponent<FeeButtonsProps> = observer(
 
     return (
       <React.Fragment>
+        <Text style={subtitle2}>Fee</Text>
         <ButtonGroup
           containerStyle={sf([{ height: 90 }, mx0, mb0, shadow])}
           selectedIndex={selectedIndex}
diff --git a/packages/mobile/src/components/form/index.tsx b/packages/mobile/src/components/form/index.tsx
index a4d13b9d37..07f2e6aef3 100644
--- a/packages/mobile/src/components/form/index.tsx
+++ b/packages/mobile/src/components/form/index.tsx
@@ -1,2 +1,4 @@
 export * from "./address-input";
 export * from "./coin-input";
+export * from "./fee-buttons";
+export * from "./memo-input";
diff --git a/packages/mobile/src/hooks/index.tsx b/packages/mobile/src/hooks/index.tsx
new file mode 100644
index 0000000000..72cfbebe6b
--- /dev/null
+++ b/packages/mobile/src/hooks/index.tsx
@@ -0,0 +1 @@
+export * from "./use-intersection-info";
diff --git a/packages/mobile/src/hooks/use-intersection-info.tsx b/packages/mobile/src/hooks/use-intersection-info.tsx
new file mode 100644
index 0000000000..2044deace6
--- /dev/null
+++ b/packages/mobile/src/hooks/use-intersection-info.tsx
@@ -0,0 +1,21 @@
+import { useEffect, useRef } from "react";
+
+export const useInteractionInfo = (cleanUp?: () => void) => {
+  const cleanUpRef = useRef<(() => void) | undefined>(cleanUp);
+  cleanUpRef.current = cleanUp;
+
+  const result = {
+    interaction: "true",
+    interactionInternal: "true",
+  };
+
+  useEffect(() => {
+    return () => {
+      if (cleanUpRef.current) {
+        cleanUpRef.current();
+      }
+    };
+  }, []);
+
+  return result;
+};
diff --git a/packages/mobile/src/modals/index.tsx b/packages/mobile/src/modals/index.tsx
index 89bc563e54..2947bda201 100644
--- a/packages/mobile/src/modals/index.tsx
+++ b/packages/mobile/src/modals/index.tsx
@@ -10,7 +10,7 @@ import {
   useSignDocAmountConfig,
   useSignDocHelper,
 } from "@keplr-wallet/hooks";
-import { Button, Input, Text } from "react-native-elements";
+import { Input, Text } from "react-native-elements";
 import {
   flexDirectionRow,
   justifyContentEnd,
@@ -23,6 +23,7 @@ import {
 import { DefaultButton, WhiteButton } from "../components/buttons";
 import { TransactionDetails } from "./transaction-details";
 import { Page } from "../components/page";
+import { useInteractionInfo } from "../hooks";
 
 export const ModalsRenderer: FunctionComponent = observer(() => {
   const {
@@ -33,6 +34,9 @@ export const ModalsRenderer: FunctionComponent = observer(() => {
     keyRingStore,
     signInteractionStore,
   } = useStore();
+  const interactionInfo = useInteractionInfo(() => {
+    signInteractionStore.rejectAll();
+  });
 
   const [password, setPassword] = useState("");
 
@@ -56,9 +60,24 @@ export const ModalsRenderer: FunctionComponent = observer(() => {
   );
   const memoConfig = useMemoConfig(chainStore, current.chainId);
 
+  const signDocWapper = signInteractionStore.waitingData?.data.signDocWrapper;
   const signDocHelper = useSignDocHelper(feeConfig, memoConfig);
   amountConfig.setSignDocHelper(signDocHelper);
 
+  const isSignDocInternalSend = (() => {
+    if (signDocWapper && signDocWapper.mode === "amino") {
+      const signDoc = signDocWapper.aminoSignDoc;
+      return (
+        interactionInfo.interaction &&
+        interactionInfo.interactionInternal &&
+        signDoc.msgs.length === 1 &&
+        (signDoc.msgs[0].type === "cosmos-sdk/MsgSend" ||
+          signDoc.msgs[0].type === "cosmos-sdk/MsgTransfer")
+      );
+    }
+    return false;
+  })();
+
   useEffect(() => {
     if (signInteractionStore.waitingData) {
       const data = signInteractionStore.waitingData;
@@ -69,8 +88,12 @@ export const ModalsRenderer: FunctionComponent = observer(() => {
     }
   }, [gasConfig, memoConfig, signDocHelper, signInteractionStore.waitingData]);
 
-  feeConfig.setFeeType("average");
+  const [
+    isLoadingSignDocInternalSend,
+    setIsLoadingSignDocInternalSend,
+  ] = useState(false);
 
+  const disableInputs = isSignDocInternalSend || isLoadingSignDocInternalSend;
   return (
     <React.Fragment>
       <Modal
@@ -89,7 +112,7 @@ export const ModalsRenderer: FunctionComponent = observer(() => {
                   value={password}
                   onChangeText={setPassword}
                 />
-                <Button
+                <DefaultButton
                   title="Unlock"
                   onPress={async () => {
                     await keyRingStore.unlock(password);
@@ -113,6 +136,7 @@ export const ModalsRenderer: FunctionComponent = observer(() => {
                   memoConfig={memoConfig}
                   feeConfig={feeConfig}
                   gasConfig={gasConfig}
+                  disableInputs={disableInputs}
                 />
                 <View style={flexDirectionRow}>
                   <WhiteButton
diff --git a/packages/mobile/src/modals/transaction-details.tsx b/packages/mobile/src/modals/transaction-details.tsx
index f61fdb68d5..03278a060c 100644
--- a/packages/mobile/src/modals/transaction-details.tsx
+++ b/packages/mobile/src/modals/transaction-details.tsx
@@ -32,6 +32,7 @@ import {
   px2,
 } from "../styles";
 import Icon from "react-native-vector-icons/Feather";
+import { MemoInput, FeeButtons } from "../components/form";
 
 export const TransactionDetails: FunctionComponent<{
   signDocHelper: SignDocHelper;
@@ -97,18 +98,26 @@ export const TransactionDetails: FunctionComponent<{
         <ScrollView style={sf([cardStyle, px2, mb2])}>
           {renderedMsgs}
         </ScrollView>
-        <View style={mb3}>
-          <Text style={sf([subtitle2, mb2])}>Memo</Text>
-          <Text style={subtitle1}>
-            {memoConfig.memo ? memoConfig.memo : "(No memo)"}
-          </Text>
-        </View>
-        <View style={mb3}>
-          <Text style={sf([subtitle2, mb2])}>Fee</Text>
-          <Text style={subtitle1}>
-            {feeConfig.fee.maxDecimals(6).trim(true).toString()}
-          </Text>
-        </View>
+        {!disableInputs ? (
+          <MemoInput memoConfig={memoConfig} />
+        ) : (
+          <View style={mb3}>
+            <Text style={sf([subtitle2, mb2])}>Memo</Text>
+            <Text style={subtitle1}>
+              {memoConfig.memo ? memoConfig.memo : "(No memo)"}
+            </Text>
+          </View>
+        )}
+        {!disableInputs ? (
+          <FeeButtons feeConfig={feeConfig} priceStore={priceStore} />
+        ) : (
+          <View style={mb3}>
+            <Text style={sf([subtitle2, mb2])}>Fee</Text>
+            <Text style={subtitle1}>
+              {feeConfig.fee.maxDecimals(6).trim(true).toString()}
+            </Text>
+          </View>
+        )}
       </React.Fragment>
     );
   }
diff --git a/packages/mobile/src/screens/governance/voting-button.tsx b/packages/mobile/src/screens/governance/voting-button.tsx
index fe1fe9dfba..48c7dede28 100644
--- a/packages/mobile/src/screens/governance/voting-button.tsx
+++ b/packages/mobile/src/screens/governance/voting-button.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent, useEffect, useState } from "react";
-import { Button, Text } from "react-native-elements";
+import { Text } from "react-native-elements";
 
 import { observer } from "mobx-react-lite";
 import { StyleProp, View, ViewProps } from "react-native";
@@ -92,7 +92,7 @@ export const VotingButton: FunctionComponent<{
       }}
     >
       {isOpenVoteModal === false ? (
-        <Button
+        <DefaultButton
           title={statusText}
           onPress={() => {
             setOpenVoteModal(true);
@@ -117,7 +117,7 @@ export const VotingButton: FunctionComponent<{
             />
             <DefaultButton
               title="Confirm"
-              onPress={async (e) => {
+              onPress={async () => {
                 await sendGovVoteMsg();
               }}
               loading={accountInfo.isSendingMsg === "govVote"}
diff --git a/packages/mobile/src/screens/register/index.tsx b/packages/mobile/src/screens/register/index.tsx
index 9927ce1cef..e90e20499c 100644
--- a/packages/mobile/src/screens/register/index.tsx
+++ b/packages/mobile/src/screens/register/index.tsx
@@ -1,11 +1,12 @@
 import React, { FunctionComponent, useState } from "react";
-import { Button, Input } from "react-native-elements";
+import { Input } from "react-native-elements";
 import { observer } from "mobx-react-lite";
 import { useStore } from "../../stores";
 import { useRegisterConfig } from "@keplr-wallet/hooks";
 import { getRandomBytesAsync } from "../../common";
 import { useNavigation, StackActions } from "@react-navigation/native";
 import { Page } from "../../components/page";
+import { DefaultButton } from "../../components/buttons";
 
 export const RegisterScreen: FunctionComponent = observer(() => {
   const navigation = useNavigation();
@@ -41,7 +42,7 @@ export const RegisterScreen: FunctionComponent = observer(() => {
         multiline={true}
         numberOfLines={5}
       />
-      <Button
+      <DefaultButton
         title="Create"
         onPress={async () => {
           await registerConfig.createMnemonic(name, mnemonic, password, {
@@ -50,9 +51,6 @@ export const RegisterScreen: FunctionComponent = observer(() => {
             addressIndex: 0,
           });
 
-          // TODO: Remove this!!
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
           accountStore.getAccount(chainId).init();
 
           navigation.dispatch(StackActions.replace("Home"));
diff --git a/packages/mobile/src/screens/send/index.tsx b/packages/mobile/src/screens/send/index.tsx
index 4ee9206c9a..8dc720cbe6 100644
--- a/packages/mobile/src/screens/send/index.tsx
+++ b/packages/mobile/src/screens/send/index.tsx
@@ -1,17 +1,18 @@
 /* eslint-disable react/display-name */
 import React, { FunctionComponent } from "react";
 import { observer } from "mobx-react-lite";
-import { Text } from "react-native-elements";
 import { useStore } from "../../stores";
 import { useSendTxConfig } from "@keplr-wallet/hooks";
 import { DefaultButton } from "../../components/buttons";
 import { Page } from "../../components/page";
 import { createStackNavigator } from "@react-navigation/stack";
-import { AddressInput, CoinInput } from "../../components/form";
-import { FeeButtons } from "../../components/form/fee-buttons";
+import {
+  AddressInput,
+  CoinInput,
+  MemoInput,
+  FeeButtons,
+} from "../../components/form";
 import { GradientBackground } from "../../components/svg";
-import { MemoInput } from "../../components/form/memo-input";
-import { subtitle2 } from "../../styles";
 
 const SendStack = createStackNavigator();
 
@@ -59,7 +60,6 @@ const SendScreen: FunctionComponent = observer(() => {
         feeConfig={sendConfigs.feeConfig}
       />
       <MemoInput memoConfig={sendConfigs.memoConfig} />
-      <Text style={subtitle2}>Fee</Text>
       <FeeButtons feeConfig={sendConfigs.feeConfig} priceStore={priceStore} />
       <DefaultButton
         title="Submit"
diff --git a/packages/mobile/src/screens/stake/total-staked-card.tsx b/packages/mobile/src/screens/stake/total-staked-card.tsx
index 8e5f1fa58b..6d9c8c79e3 100644
--- a/packages/mobile/src/screens/stake/total-staked-card.tsx
+++ b/packages/mobile/src/screens/stake/total-staked-card.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from "react";
 
 import { observer } from "mobx-react-lite";
 import { useStore } from "../../stores";
-import { Text, Button, Image, Card } from "react-native-elements";
+import { Text, Image, Card } from "react-native-elements";
 import { View } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { DefaultButton } from "../../components/buttons";
@@ -67,7 +67,7 @@ export const TotalStakedCard: FunctionComponent = observer(() => {
         <React.Fragment>
           <View style={sf([flexDirectionRow, justifyContentBetween])}>
             <Card.Title>Staking</Card.Title>
-            <Button
+            <DefaultButton
               title={">"}
               onPress={() => {
                 navigate.navigate("Staking Details");
diff --git a/packages/mobile/src/styles/border.tsx b/packages/mobile/src/styles/border.tsx
index 19ca8a66f6..ea100d9d04 100644
--- a/packages/mobile/src/styles/border.tsx
+++ b/packages/mobile/src/styles/border.tsx
@@ -37,12 +37,94 @@ export const bcBlack: StyleProp<ViewStyle> = { borderColor: colors.black };
 
 export const bcWhite: StyleProp<ViewStyle> = { borderColor: colors.white };
 
-export const bcPrimary: StyleProp<ViewStyle> = { borderColor: colors.primary };
+export const bcPrimary: StyleProp<ViewStyle> = {
+  borderColor: colors.primary,
+};
+
+export const bcPrimary50: StyleProp<ViewStyle> = {
+  borderColor: colors.primary50,
+};
+
+export const bcPrimary100: StyleProp<ViewStyle> = {
+  borderColor: colors.primary100,
+};
+
+export const bcPrimary200: StyleProp<ViewStyle> = {
+  borderColor: colors.primary200,
+};
+
+export const bcPrimary300: StyleProp<ViewStyle> = {
+  borderColor: colors.primary300,
+};
+
+export const bcPrimary400: StyleProp<ViewStyle> = {
+  borderColor: colors.primary400,
+};
+
+export const bcPrimary500: StyleProp<ViewStyle> = {
+  borderColor: colors.primary500,
+};
+
+export const bcPrimary600: StyleProp<ViewStyle> = {
+  borderColor: colors.primary600,
+};
+
+export const bcPrimary700: StyleProp<ViewStyle> = {
+  borderColor: colors.primary700,
+};
+
+export const bcPrimary800: StyleProp<ViewStyle> = {
+  borderColor: colors.primary800,
+};
+
+export const bcPrimary900: StyleProp<ViewStyle> = {
+  borderColor: colors.primary900,
+};
 
 export const bcSecondary: StyleProp<ViewStyle> = {
   borderColor: colors.secondary,
 };
 
+export const bcSecondary50: StyleProp<ViewStyle> = {
+  borderColor: colors.secondary50,
+};
+
+export const bcSecondary100: StyleProp<ViewStyle> = {
+  borderColor: colors.secondary100,
+};
+
+export const bcSecondary200: StyleProp<ViewStyle> = {
+  borderColor: colors.secondary200,
+};
+
+export const bcSecondary300: StyleProp<ViewStyle> = {
+  borderColor: colors.secondary300,
+};
+
+export const bcSecondary400: StyleProp<ViewStyle> = {
+  borderColor: colors.secondary400,
+};
+
+export const bcSecondary500: StyleProp<ViewStyle> = {
+  borderColor: colors.secondary500,
+};
+
+export const bcSecondary600: StyleProp<ViewStyle> = {
+  borderColor: colors.secondary600,
+};
+
+export const bcSecondary700: StyleProp<ViewStyle> = {
+  borderColor: colors.secondary700,
+};
+
+export const bcSecondary800: StyleProp<ViewStyle> = {
+  borderColor: colors.secondary800,
+};
+
+export const bcSecondary900: StyleProp<ViewStyle> = {
+  borderColor: colors.secondary900,
+};
+
 export const bcWarining: StyleProp<ViewStyle> = { borderColor: colors.warning };
 
 export const bcError: StyleProp<ViewStyle> = { borderColor: colors.error };
diff --git a/packages/mobile/src/styles/colors.tsx b/packages/mobile/src/styles/colors.tsx
index e4a3557f14..e5dea29fd4 100644
--- a/packages/mobile/src/styles/colors.tsx
+++ b/packages/mobile/src/styles/colors.tsx
@@ -1,7 +1,31 @@
 export const colors = {
-  primary: "#5e72e4",
-  secondary: "#11cdef",
-  default: "#1C3051",
+  primary: "#4762E7",
+  primary50: "#E3E7F7",
+  primary100: "#A9B6F5",
+  primary200: "#8E9FF2",
+  primary300: "#7388F0",
+  primary400: "#4762E7",
+  primary500: "#2644DB",
+  primary600: "#102FCB",
+  primary700: "#0320B4",
+  primary800: "#001A9A",
+  primary900: "#00157D",
+  secondary: "#FF63B4",
+  secondary50: "#EDD3E8",
+  secondary100: "#F3B1E1",
+  secondary200: "#FA9DD9",
+  secondary300: "#FF86CE",
+  secondary400: "#FF63B4",
+  secondary500: "#E753A8",
+  secondary600: "#C84699",
+  secondary700: "#A23A83",
+  secondary800: "#762C64",
+  secondary900: "#471D40",
+  default: "#2C4163",
+  high: "#132340",
+  medium: "#2C4163",
+  low: "#83838F",
+  verylow: "#899BB6",
   white: "#fff",
   black: "#000",
   grey5: "#dee2e6",
@@ -12,7 +36,7 @@ export const colors = {
   grey0: "#32325d",
   greyOutline: "#e9ecef",
   success: "#2dce89",
-  error: "#f5365c",
+  error: "#F5365C",
   warning: "#fb6340",
   divider: "#e9ecef",
 };
diff --git a/packages/mobile/src/styles/font.tsx b/packages/mobile/src/styles/font.tsx
index ea06003878..babcc71499 100644
--- a/packages/mobile/src/styles/font.tsx
+++ b/packages/mobile/src/styles/font.tsx
@@ -65,7 +65,89 @@ export const fcGrey5: StyleProp<TextStyle> = { color: colors.grey5 };
 
 export const fcPrimary: StyleProp<TextStyle> = { color: colors.primary };
 
-export const fcSecondary: StyleProp<TextStyle> = { color: colors.secondary };
+export const fcPrimary50: StyleProp<TextStyle> = {
+  color: colors.primary50,
+};
+
+export const fcPrimary100: StyleProp<TextStyle> = {
+  color: colors.primary100,
+};
+
+export const fcPrimary200: StyleProp<TextStyle> = {
+  color: colors.primary200,
+};
+
+export const fcPrimary300: StyleProp<TextStyle> = {
+  color: colors.primary300,
+};
+
+export const fcPrimary400: StyleProp<TextStyle> = {
+  color: colors.primary400,
+};
+
+export const fcPrimary500: StyleProp<TextStyle> = {
+  color: colors.primary500,
+};
+
+export const fcPrimary600: StyleProp<TextStyle> = {
+  color: colors.primary600,
+};
+
+export const fcPrimary700: StyleProp<TextStyle> = {
+  color: colors.primary700,
+};
+
+export const fcPrimary800: StyleProp<TextStyle> = {
+  color: colors.primary800,
+};
+
+export const fcPrimary900: StyleProp<TextStyle> = {
+  color: colors.primary900,
+};
+
+export const fcSecondary: StyleProp<TextStyle> = {
+  color: colors.secondary,
+};
+
+export const fcSecondary50: StyleProp<TextStyle> = {
+  color: colors.secondary50,
+};
+
+export const fcSecondary100: StyleProp<TextStyle> = {
+  color: colors.secondary100,
+};
+
+export const fcSecondary200: StyleProp<TextStyle> = {
+  color: colors.secondary200,
+};
+
+export const fcSecondary300: StyleProp<TextStyle> = {
+  color: colors.secondary300,
+};
+
+export const fcSecondary400: StyleProp<TextStyle> = {
+  color: colors.secondary400,
+};
+
+export const fcSecondary500: StyleProp<TextStyle> = {
+  color: colors.secondary500,
+};
+
+export const fcSecondary600: StyleProp<TextStyle> = {
+  color: colors.secondary600,
+};
+
+export const fcSecondary700: StyleProp<TextStyle> = {
+  color: colors.secondary700,
+};
+
+export const fcSecondary800: StyleProp<TextStyle> = {
+  color: colors.secondary800,
+};
+
+export const fcSecondary900: StyleProp<TextStyle> = {
+  color: colors.secondary900,
+};
 
 export const fcWarining: StyleProp<TextStyle> = { color: colors.warning };
 
@@ -73,6 +155,14 @@ export const fcError: StyleProp<TextStyle> = { color: colors.error };
 
 export const fcSuccess: StyleProp<TextStyle> = { color: colors.success };
 
+export const fcHigh: StyleProp<TextStyle> = { color: colors.high };
+
+export const fcMedium: StyleProp<TextStyle> = { color: colors.medium };
+
+export const fcLow: StyleProp<TextStyle> = { color: colors.low };
+
+export const fcVerylow: StyleProp<TextStyle> = { color: colors.verylow };
+
 export const fAlignLeft: StyleProp<TextStyle> = { textAlign: "left" };
 
 export const fAlignRight: StyleProp<TextStyle> = { textAlign: "right" };
diff --git a/packages/mobile/src/styles/layout.tsx b/packages/mobile/src/styles/layout.tsx
index c131dd9a5e..c0406c7079 100644
--- a/packages/mobile/src/styles/layout.tsx
+++ b/packages/mobile/src/styles/layout.tsx
@@ -163,10 +163,90 @@ export const bgcPrimary: StyleProp<ViewStyle> = {
   backgroundColor: colors.primary,
 };
 
+export const bgcPrimary50: StyleProp<ViewStyle> = {
+  backgroundColor: colors.primary50,
+};
+
+export const bgcPrimary100: StyleProp<ViewStyle> = {
+  backgroundColor: colors.primary100,
+};
+
+export const bgcPrimary200: StyleProp<ViewStyle> = {
+  backgroundColor: colors.primary200,
+};
+
+export const bgcPrimary300: StyleProp<ViewStyle> = {
+  backgroundColor: colors.primary300,
+};
+
+export const bgcPrimary400: StyleProp<ViewStyle> = {
+  backgroundColor: colors.primary400,
+};
+
+export const bgcPrimary500: StyleProp<ViewStyle> = {
+  backgroundColor: colors.primary500,
+};
+
+export const bgcPrimary600: StyleProp<ViewStyle> = {
+  backgroundColor: colors.primary600,
+};
+
+export const bgcPrimary700: StyleProp<ViewStyle> = {
+  backgroundColor: colors.primary700,
+};
+
+export const bgcPrimary800: StyleProp<ViewStyle> = {
+  backgroundColor: colors.primary800,
+};
+
+export const bgcPrimary900: StyleProp<ViewStyle> = {
+  backgroundColor: colors.primary900,
+};
+
 export const bgcSecondary: StyleProp<ViewStyle> = {
   backgroundColor: colors.secondary,
 };
 
+export const bgcSecondary50: StyleProp<ViewStyle> = {
+  backgroundColor: colors.secondary50,
+};
+
+export const bgcSecondary100: StyleProp<ViewStyle> = {
+  backgroundColor: colors.secondary100,
+};
+
+export const bgcSecondary200: StyleProp<ViewStyle> = {
+  backgroundColor: colors.secondary200,
+};
+
+export const bgcSecondary300: StyleProp<ViewStyle> = {
+  backgroundColor: colors.secondary300,
+};
+
+export const bgcSecondary400: StyleProp<ViewStyle> = {
+  backgroundColor: colors.secondary400,
+};
+
+export const bgcSecondary500: StyleProp<ViewStyle> = {
+  backgroundColor: colors.secondary500,
+};
+
+export const bgcSecondary600: StyleProp<ViewStyle> = {
+  backgroundColor: colors.secondary600,
+};
+
+export const bgcSecondary700: StyleProp<ViewStyle> = {
+  backgroundColor: colors.secondary700,
+};
+
+export const bgcSecondary800: StyleProp<ViewStyle> = {
+  backgroundColor: colors.secondary800,
+};
+
+export const bgcSecondary900: StyleProp<ViewStyle> = {
+  backgroundColor: colors.secondary900,
+};
+
 export const bgcWarining: StyleProp<ViewStyle> = {
   backgroundColor: colors.warning,
 };