diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7411db9f8..1431bd8ce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#524](https://github.com/alleslabs/celatone-frontend/pull/524) Add initia abi form
 - [#530](https://github.com/alleslabs/celatone-frontend/pull/530) Publish module component state wireup and add leaflet
 - [#521](https://github.com/alleslabs/celatone-frontend/pull/521) Initia module interaction function panel and selected function info accordion
 - [#515](https://github.com/alleslabs/celatone-frontend/pull/515) Initia select module drawer wireup
diff --git a/package.json b/package.json
index 063a62df2..92712f8dc 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "@emotion/styled": "^11",
     "@graphql-codegen/cli": "^2.13.12",
     "@graphql-codegen/client-preset": "^1.1.4",
+    "@initia/initia.js": "^0.1.8",
     "@rjsf/chakra-ui": "v5.0.0-beta.10",
     "@rjsf/core": "v5.0.0-beta.10",
     "@rjsf/utils": "v5.0.0-beta.10",
diff --git a/src/lib/app-provider/hooks/useAddress.ts b/src/lib/app-provider/hooks/useAddress.ts
index b69e26a93..220475716 100644
--- a/src/lib/app-provider/hooks/useAddress.ts
+++ b/src/lib/app-provider/hooks/useAddress.ts
@@ -54,7 +54,7 @@ const validateAddress = (
   getAddressTypeByLength: GetAddressTypeByLengthFn
 ) => {
   if (!bech32Prefix)
-    return "Can not retrieve bech32 prefix of the current network.";
+    return "Cannot retrieve bech32 prefix of the current network.";
 
   const prefix = getPrefix(bech32Prefix, addressType);
 
diff --git a/src/lib/components/AddressInput.tsx b/src/lib/components/AddressInput.tsx
index 630be8527..21b2886f5 100644
--- a/src/lib/components/AddressInput.tsx
+++ b/src/lib/components/AddressInput.tsx
@@ -67,7 +67,7 @@ export const AddressInput = <T extends FieldValues>({
       label={label}
       placeholder={placeholder ?? exampleUserAddress}
       type="text"
-      variant="floating"
+      variant="fixed-floating"
       status={status}
       labelBgColor={labelBgColor}
       helperText={helperText}
diff --git a/src/lib/components/OffChainForm.tsx b/src/lib/components/OffChainForm.tsx
index 3e3e42607..a56a333d0 100644
--- a/src/lib/components/OffChainForm.tsx
+++ b/src/lib/components/OffChainForm.tsx
@@ -46,7 +46,7 @@ export const OffChainForm = <T extends OffchainDetail>({
         label="Name"
         placeholder={contractLabel}
         helperText="Set name for your contract"
-        variant="floating"
+        variant="fixed-floating"
         rules={{
           maxLength: constants.maxContractNameLength,
         }}
@@ -60,7 +60,7 @@ export const OffChainForm = <T extends OffchainDetail>({
         control={control}
         label="Description"
         placeholder="Help understanding what this contract do and how it works ..."
-        variant="floating"
+        variant="fixed-floating"
         rules={{
           maxLength: constants.maxContractDescriptionLength,
         }}
diff --git a/src/lib/components/abi/AbiForm.tsx b/src/lib/components/abi/AbiForm.tsx
new file mode 100644
index 000000000..cce57b23e
--- /dev/null
+++ b/src/lib/components/abi/AbiForm.tsx
@@ -0,0 +1,53 @@
+import { Flex } from "@chakra-ui/react";
+import { useForm } from "react-hook-form";
+
+import type { AbiFormData, ExposedFunction } from "lib/types";
+
+import { ArgsForm } from "./args-form";
+import { TypesForm } from "./types-form";
+
+interface AbiFormProps {
+  fn: ExposedFunction;
+  initialData: AbiFormData;
+  propsOnChange?: (data: AbiFormData) => void;
+  propsOnErrors?: (errors: [string, string][]) => void;
+}
+
+export const AbiForm = ({
+  fn,
+  initialData,
+  propsOnChange,
+  propsOnErrors,
+}: AbiFormProps) => {
+  const { setValue, watch, getValues } = useForm<AbiFormData>({
+    defaultValues: initialData,
+    mode: "all",
+  });
+  const { typeArgs, args } = watch();
+
+  return (
+    <Flex direction="column" gap={4}>
+      {Object.keys(typeArgs).length > 0 && (
+        <TypesForm
+          genericTypeParams={fn.generic_type_params}
+          initialData={typeArgs}
+          propsOnChange={(value) => {
+            setValue("typeArgs", value);
+            propsOnChange?.(getValues());
+          }}
+        />
+      )}
+      {Object.keys(args).length > 0 && (
+        <ArgsForm
+          params={fn.params}
+          initialData={args}
+          propsOnChange={(value) => {
+            setValue("args", value);
+            propsOnChange?.(getValues());
+          }}
+          propsOnErrors={propsOnErrors}
+        />
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
new file mode 100644
index 000000000..9182a5681
--- /dev/null
+++ b/src/lib/components/abi/args-form/field/ArgFieldWidget.tsx
@@ -0,0 +1,91 @@
+import { Input, Textarea } from "@chakra-ui/react";
+import { Select } from "chakra-react-select";
+import type { ControllerRenderProps } from "react-hook-form";
+
+import type { Option } from "lib/types";
+
+import { UintTypes } from "./utils";
+
+const getInputPlaceholder = (type: string, isNull: boolean) => {
+  if (type === "0x1::string::String" && !isNull)
+    return "Left blank to send as empty string";
+  if (type === "&signer") return "Signer is auto-filled when signing a tx";
+  return " ";
+};
+
+const boolOptions = [
+  { label: "True", value: "true" },
+  { label: "False", value: "false" },
+];
+
+interface ArgFieldWidgetProps {
+  type: string;
+  value: Option<string>;
+  onChange: ControllerRenderProps["onChange"];
+}
+
+export const ArgFieldWidget = ({
+  type,
+  value,
+  onChange,
+}: ArgFieldWidgetProps) => {
+  if (
+    UintTypes.includes(type) ||
+    type === "address" ||
+    type === "0x1::string::String" ||
+    type === "&signer"
+  )
+    return (
+      <Input
+        size="md"
+        placeholder={getInputPlaceholder(type, value === undefined)}
+        value={value ?? ""}
+        onChange={onChange}
+      />
+    );
+
+  if (type === "bool")
+    return (
+      <Select
+        classNamePrefix="chakra-react-select"
+        size="md"
+        options={boolOptions}
+        placeholder={" "}
+        value={boolOptions.find(
+          ({ value: optionValue }) => optionValue === value
+        )}
+        onChange={(e) => onChange(e?.value)}
+        menuPosition="fixed"
+        chakraStyles={{
+          control: (provided) => ({
+            ...provided,
+            _disabled: {
+              color: "text.main",
+            },
+          }),
+          dropdownIndicator: (provided, state) => ({
+            ...provided,
+            color: state.isDisabled ? "gray.700" : undefined,
+          }),
+          option: (provided, state) => ({
+            ...provided,
+            bg: state.isSelected ? "gray.800" : undefined,
+            color: "text.main",
+            _hover: {
+              bg: "gray.700",
+            },
+          }),
+        }}
+      />
+    );
+
+  return (
+    <Textarea
+      minH="112px"
+      h="fit-content"
+      placeholder={" "}
+      value={value ?? ""}
+      onChange={onChange}
+    />
+  );
+};
diff --git a/src/lib/components/abi/args-form/field/index.tsx b/src/lib/components/abi/args-form/field/index.tsx
new file mode 100644
index 000000000..0f2ef1ad2
--- /dev/null
+++ b/src/lib/components/abi/args-form/field/index.tsx
@@ -0,0 +1,100 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import {
+  Box,
+  Checkbox,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Text,
+} from "@chakra-ui/react";
+import { useCallback } from "react";
+import { type Control, useController } from "react-hook-form";
+
+import { useValidateAddress } from "lib/app-provider";
+import type { AbiFormData } from "lib/types";
+
+import { ArgFieldWidget } from "./ArgFieldWidget";
+import { getRules } from "./utils";
+
+interface ArgFieldTemplateProps {
+  index: number;
+  param: string;
+  control: Control<AbiFormData["args"]>;
+  error?: string;
+  isReadOnly?: boolean;
+}
+
+export const ArgFieldTemplate = ({
+  index,
+  param,
+  control,
+  error,
+  isReadOnly = false,
+}: ArgFieldTemplateProps) => {
+  const { validateUserAddress, validateContractAddress, validateHexAddress } =
+    useValidateAddress();
+
+  const isValidArgAddress = useCallback(
+    (input: string) =>
+      validateUserAddress(input) === null ||
+      validateContractAddress(input) === null ||
+      validateHexAddress(input),
+    [validateContractAddress, validateHexAddress, validateUserAddress]
+  );
+
+  const isOptional = param.startsWith("0x1::option::Option");
+  const type = isOptional ? param.split(/<(.*)>/)[1] : param;
+  const rules = getRules(type, isOptional, isReadOnly, isValidArgAddress);
+
+  const {
+    field: { value, onChange, ...fieldProps },
+    fieldState: { isTouched },
+  } = useController({
+    name: `${index}`,
+    control,
+    rules,
+  });
+  const isError = isTouched && !!error;
+
+  const size = "md";
+  const isSigner = type === "&signer";
+  const isNull = value === undefined;
+  return (
+    <Box>
+      <FormControl
+        className={`${size}-form`}
+        variant={
+          isSigner || (type === "0x1::string::String" && !isNull)
+            ? "fixed-floating"
+            : "floating"
+        }
+        size={size}
+        isInvalid={isError}
+        isReadOnly={isReadOnly}
+        isDisabled={(isSigner && !isReadOnly) || isNull}
+        {...fieldProps}
+      >
+        <ArgFieldWidget type={type} value={value} onChange={onChange} />
+        <FormLabel className={`${size}-label`} bgColor="background.main">
+          {param}
+        </FormLabel>
+
+        {isError && (
+          <FormErrorMessage className="error-text" mt={1}>
+            {error}
+          </FormErrorMessage>
+        )}
+      </FormControl>
+      {isOptional && (
+        <Checkbox
+          pt="2px"
+          pl={2}
+          isChecked={value === undefined}
+          onChange={(e) => onChange(e.target.checked ? undefined : "")}
+        >
+          <Text variant="body3">Send as null</Text>
+        </Checkbox>
+      )}
+    </Box>
+  );
+};
diff --git a/src/lib/components/abi/args-form/field/utils.ts b/src/lib/components/abi/args-form/field/utils.ts
new file mode 100644
index 000000000..388235ba2
--- /dev/null
+++ b/src/lib/components/abi/args-form/field/utils.ts
@@ -0,0 +1,106 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import { parseInt } from "lodash";
+import type { FieldValues, UseControllerProps } from "react-hook-form";
+
+import type { Option } from "lib/types";
+
+export const UintTypes = ["u8", "u16", "u32", "u64", "u128", "u256"];
+
+const validateNull = (v: Option<string>) =>
+  v !== undefined ? undefined : "cannot be null";
+
+const validateUint = (uintType: string) => (v: string) => {
+  const value = parseInt(v);
+  const maxValue = 2 ** parseInt(uintType.slice(1)) - 1;
+  return value >= 0 && value <= maxValue
+    ? undefined
+    : `Input must be ‘${uintType}’`;
+};
+const validateBool = (v: string) =>
+  v === "true" || v === "false" ? undefined : "Input must be ‘boolean’";
+
+const validateAddress =
+  (isValidArgAddress: (input: string) => boolean) => (v: string) =>
+    isValidArgAddress(v) ? undefined : "invalid address";
+
+const validateVector = (
+  v: string,
+  vectorType: string,
+  isValidArgAddress: (input: string) => boolean
+) => {
+  const value = v.trim();
+  if (!value.startsWith("[") || !value.endsWith("]"))
+    return "Input must be ‘vector’";
+
+  const [, elementType] = vectorType.split(/<(.*)>/);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  let validateElement = (_v: string): Option<string> => undefined;
+  if (UintTypes.includes(elementType))
+    validateElement = validateUint(elementType);
+  if (elementType === "bool") validateElement = validateBool;
+  if (elementType === "address")
+    validateElement = validateAddress(isValidArgAddress);
+  // TODO: handle Vector?
+
+  let error: Option<string>;
+  value.split(",").forEach((elementValue) => {
+    const res = validateElement(elementValue);
+    if (res !== undefined) error = `invalid element: ${res}`;
+  });
+
+  return error;
+};
+
+export const getRules = <T extends FieldValues>(
+  type: string,
+  isOptional: boolean,
+  isReadOnly: boolean,
+  isValidArgAddress: (input: string) => boolean
+): UseControllerProps<T>["rules"] => {
+  const rules: UseControllerProps<T>["rules"] = {};
+  if (isReadOnly) return rules;
+
+  if (!isOptional) {
+    rules.validate = {
+      null: validateNull,
+    };
+  }
+  if (UintTypes.includes(type))
+    rules.validate = {
+      ...rules.validate,
+      [type]: (v: Option<string>) => {
+        if (v === undefined) return undefined;
+        return validateUint(type)(v);
+      },
+    };
+  if (type === "bool") {
+    rules.validate = {
+      ...rules.validate,
+      bool: (v: Option<string>) => {
+        if (v === undefined) return undefined;
+        return validateBool(v);
+      },
+    };
+  }
+  if (type === "address") {
+    rules.validate = {
+      ...rules.validate,
+      address: (v: Option<string>) => {
+        if (v === undefined) return undefined;
+        return validateAddress(isValidArgAddress)(v);
+      },
+    };
+  }
+  if (type.startsWith("vector")) {
+    rules.validate = {
+      ...rules.validate,
+      [type]: (v: Option<string>) => {
+        if (v === undefined) return undefined;
+        return validateVector(v, type, isValidArgAddress);
+      },
+    };
+  }
+
+  return rules;
+};
diff --git a/src/lib/components/abi/args-form/index.tsx b/src/lib/components/abi/args-form/index.tsx
new file mode 100644
index 000000000..2efb226a3
--- /dev/null
+++ b/src/lib/components/abi/args-form/index.tsx
@@ -0,0 +1,77 @@
+import { Flex, Heading } from "@chakra-ui/react";
+import { useEffect } from "react";
+import type { FormState } from "react-hook-form";
+import { useForm } from "react-hook-form";
+
+import type { AbiFormData, Option } from "lib/types";
+
+import { ArgFieldTemplate } from "./field";
+
+interface ArgsFormProps {
+  title?: string;
+  params: string[];
+  initialData: AbiFormData["args"];
+  propsOnChange?: (data: AbiFormData["args"]) => void;
+  propsOnErrors?: (errors: [string, string][]) => void;
+  isReadOnly?: boolean;
+}
+
+const formatErrors = (
+  errors: FormState<Record<string, string>>["errors"]
+): [string, string][] =>
+  Object.entries(errors).map(([field, error]) => [
+    field,
+    error?.message ?? "invalid input",
+  ]);
+
+export const ArgsForm = ({
+  title = "args",
+  params,
+  initialData,
+  propsOnChange,
+  propsOnErrors,
+  isReadOnly = false,
+}: ArgsFormProps) => {
+  const {
+    trigger,
+    control,
+    getValues,
+    formState: { errors },
+  } = useForm<Record<string, Option<string>>>({
+    defaultValues: initialData,
+    mode: "all",
+  });
+
+  useEffect(() => {
+    trigger();
+  }, [trigger]);
+
+  useEffect(
+    () => propsOnErrors?.(formatErrors(errors)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(errors), propsOnErrors]
+  );
+
+  return (
+    <Flex direction="column" gap={4}>
+      <Heading variant="h6" as="h6" color="text.main">
+        {title}
+      </Heading>
+      {params.map((param, index) => {
+        control.register(`${index}`, {
+          onChange: () => propsOnChange?.(getValues()),
+        });
+        return (
+          <ArgFieldTemplate
+            key={param + index.toString()}
+            index={index}
+            param={param}
+            control={control}
+            error={errors[`${index}`]?.message}
+            isReadOnly={isReadOnly}
+          />
+        );
+      })}
+    </Flex>
+  );
+};
diff --git a/src/lib/components/abi/index.ts b/src/lib/components/abi/index.ts
new file mode 100644
index 000000000..c7045ffc6
--- /dev/null
+++ b/src/lib/components/abi/index.ts
@@ -0,0 +1,2 @@
+export * from "./AbiForm";
+export * from "./args-form";
diff --git a/src/lib/components/abi/types-form/TypeFieldInput.tsx b/src/lib/components/abi/types-form/TypeFieldInput.tsx
new file mode 100644
index 000000000..f9d8b21ca
--- /dev/null
+++ b/src/lib/components/abi/types-form/TypeFieldInput.tsx
@@ -0,0 +1,44 @@
+import { Flex, Input, Text } from "@chakra-ui/react";
+import { capitalize } from "lodash";
+
+interface TypeFieldInputProps {
+  index: number;
+  constraints: string[];
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const TypeFieldInput = ({
+  index,
+  value,
+  constraints,
+  onChange,
+}: TypeFieldInputProps) => {
+  const placeholder = constraints.length
+    ? `Ability : ${constraints
+        .map((constraint) => capitalize(constraint))
+        .join(" + ")}`
+    : "No ability";
+
+  return (
+    <Flex
+      bgColor="gray.900"
+      borderRadius="8px"
+      p="8px 16px"
+      gap={2}
+      alignItems="center"
+    >
+      <Text variant="body1" fontWeight={700} w={7}>
+        {`T${index}:`}
+      </Text>
+      <Input
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => {
+          const newValue = e.target.value;
+          onChange(newValue);
+        }}
+      />
+    </Flex>
+  );
+};
diff --git a/src/lib/components/abi/types-form/index.tsx b/src/lib/components/abi/types-form/index.tsx
new file mode 100644
index 000000000..558f401b6
--- /dev/null
+++ b/src/lib/components/abi/types-form/index.tsx
@@ -0,0 +1,47 @@
+import { Flex, Heading } from "@chakra-ui/react";
+import { useForm } from "react-hook-form";
+
+import type { AbiFormData, GenericTypeParam } from "lib/types";
+
+import { TypeFieldInput } from "./TypeFieldInput";
+
+interface TypesFormProps {
+  genericTypeParams: GenericTypeParam[];
+  initialData: AbiFormData["typeArgs"];
+  propsOnChange?: (data: AbiFormData["typeArgs"]) => void;
+}
+
+export const TypesForm = ({
+  genericTypeParams,
+  initialData,
+  propsOnChange,
+}: TypesFormProps) => {
+  const { setValue, getValues } = useForm<Record<string, string>>({
+    defaultValues: initialData,
+    mode: "all",
+  });
+
+  const handleOnChange = (index: number) => {
+    return (fieldInput: string) => {
+      setValue(`${index}`, fieldInput);
+      propsOnChange?.(getValues());
+    };
+  };
+
+  return (
+    <Flex direction="column" gap={4}>
+      <Heading variant="h6" as="h6" color="text.main">
+        type_args
+      </Heading>
+      {genericTypeParams.map(({ constraints }, index) => (
+        <TypeFieldInput
+          key={constraints.join() + index.toString()}
+          index={index}
+          constraints={constraints}
+          value={initialData[index]}
+          onChange={handleOnChange(index)}
+        />
+      ))}
+    </Flex>
+  );
+};
diff --git a/src/lib/components/forms/ControllerInput.tsx b/src/lib/components/forms/ControllerInput.tsx
index 8b30fccb6..c90480654 100644
--- a/src/lib/components/forms/ControllerInput.tsx
+++ b/src/lib/components/forms/ControllerInput.tsx
@@ -53,13 +53,16 @@ export const ControllerInput = <T extends FieldValues>({
     control,
   });
 
-  const { field } = useController({
+  const {
+    field,
+    fieldState: { isTouched },
+  } = useController({
     name,
     control,
     rules,
   });
 
-  const isError = !!error;
+  const isError = isTouched && !!error;
   const isRequired = "required" in rules;
 
   return (
diff --git a/src/lib/components/forms/ControllerTextarea.tsx b/src/lib/components/forms/ControllerTextarea.tsx
index 6155dfa87..f06aa714b 100644
--- a/src/lib/components/forms/ControllerTextarea.tsx
+++ b/src/lib/components/forms/ControllerTextarea.tsx
@@ -14,10 +14,10 @@ import type {
 } from "react-hook-form";
 import { useWatch, useController } from "react-hook-form";
 
-import type { TextAreaProps } from "./TextAreaInput";
+import type { TextareaProps } from "./TextareaInput";
 
 interface ControllerTextareaProps<T extends FieldValues>
-  extends Omit<TextAreaProps, "value" | "setInputState"> {
+  extends Omit<TextareaProps, "value" | "setInputState"> {
   name: FieldPath<T>;
   control: Control<T>;
   rules?: UseControllerProps["rules"];
diff --git a/src/lib/components/forms/TextAreaInput.tsx b/src/lib/components/forms/TextareaInput.tsx
similarity index 92%
rename from src/lib/components/forms/TextAreaInput.tsx
rename to src/lib/components/forms/TextareaInput.tsx
index 519e106b5..054e9e374 100644
--- a/src/lib/components/forms/TextAreaInput.tsx
+++ b/src/lib/components/forms/TextareaInput.tsx
@@ -13,7 +13,7 @@ import type { FormStatus } from "./FormStatus";
 import { getResponseMsg } from "./FormStatus";
 
 // TODO: remove
-export interface TextAreaProps extends FormControlProps {
+export interface TextareaProps extends FormControlProps {
   value: string;
   setInputState: Dispatch<SetStateAction<string>> | ((newVal: string) => void);
   label?: string;
@@ -23,7 +23,7 @@ export interface TextAreaProps extends FormControlProps {
   status?: FormStatus;
 }
 
-export const TextAreaInput = ({
+export const TextareaInput = ({
   value,
   setInputState,
   label,
@@ -33,7 +33,7 @@ export const TextAreaInput = ({
   error,
   status,
   ...componentProps
-}: TextAreaProps) => (
+}: TextareaProps) => (
   <FormControl
     isInvalid={!!error || status?.state === "error"}
     size="md"
diff --git a/src/lib/components/forms/index.ts b/src/lib/components/forms/index.ts
index d062c5b7e..333adbc77 100644
--- a/src/lib/components/forms/index.ts
+++ b/src/lib/components/forms/index.ts
@@ -5,5 +5,5 @@ export * from "./FilterByPermission";
 export * from "./FormStatus";
 export * from "./NumberInput";
 export * from "./SelectInput";
-export * from "./TextAreaInput";
+export * from "./TextareaInput";
 export * from "./TextInput";
diff --git a/src/lib/components/fund/selectFund.tsx b/src/lib/components/fund/selectFund.tsx
index 71297fb45..3b2976787 100644
--- a/src/lib/components/fund/selectFund.tsx
+++ b/src/lib/components/fund/selectFund.tsx
@@ -69,7 +69,7 @@ export const SelectFund = ({
               name={`${ASSETS_SELECT}.${idx}.amount`}
               control={control}
               label="Amount"
-              variant="floating"
+              variant="fixed-floating"
               type="number"
               rules={rules}
               labelBgColor={labelBgColor}
diff --git a/src/lib/components/modal/code/CodeDetailsTemplate.tsx b/src/lib/components/modal/code/CodeDetailsTemplate.tsx
index 85a41e362..1d1be6c53 100644
--- a/src/lib/components/modal/code/CodeDetailsTemplate.tsx
+++ b/src/lib/components/modal/code/CodeDetailsTemplate.tsx
@@ -117,7 +117,7 @@ export const CodeDetailsTemplateModal = ({
       }
     >
       <TextInput
-        variant="floating"
+        variant="fixed-floating"
         value={name}
         setInputState={setName}
         size="lg"
diff --git a/src/lib/components/modal/code/SaveNewCode.tsx b/src/lib/components/modal/code/SaveNewCode.tsx
index a37107a99..77d6e1450 100644
--- a/src/lib/components/modal/code/SaveNewCode.tsx
+++ b/src/lib/components/modal/code/SaveNewCode.tsx
@@ -191,7 +191,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
       <FormControl display="flex" flexDir="column" gap={9}>
         Save other stored codes to your &ldquo;Saved Codes&rdquo; list
         <NumberInput
-          variant="floating"
+          variant="fixed-floating"
           value={codeId}
           onInputChange={setCodeId}
           label="Code ID"
@@ -200,7 +200,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
           placeholder="ex. 1234"
         />
         <TextInput
-          variant="floating"
+          variant="fixed-floating"
           value={uploader}
           label="Uploader"
           labelBgColor="gray.900"
@@ -210,7 +210,7 @@ export function SaveNewCodeModal({ buttonProps }: SaveNewCodeModalProps) {
           isDisabled
         />
         <TextInput
-          variant="floating"
+          variant="fixed-floating"
           value={name}
           setInputState={setName}
           label="Code Name"
diff --git a/src/lib/components/modal/contract/SaveNewContract.tsx b/src/lib/components/modal/contract/SaveNewContract.tsx
index 88d2c5d6c..ab0601433 100644
--- a/src/lib/components/modal/contract/SaveNewContract.tsx
+++ b/src/lib/components/modal/contract/SaveNewContract.tsx
@@ -181,7 +181,7 @@ export function SaveNewContractModal({
           name="contractAddress"
           control={control}
           label="Contract Address"
-          variant="floating"
+          variant="fixed-floating"
           placeholder={`ex. ${exampleContractAddress}`}
           status={status}
           labelBgColor="gray.900"
@@ -190,7 +190,7 @@ export function SaveNewContractModal({
           name="instantiator"
           control={control}
           label="Instantiated by"
-          variant="floating"
+          variant="fixed-floating"
           isDisabled
           labelBgColor="gray.900"
         />
diff --git a/src/lib/components/modal/list/CreateNewList.tsx b/src/lib/components/modal/list/CreateNewList.tsx
index b554d1a56..95a7c1fe1 100644
--- a/src/lib/components/modal/list/CreateNewList.tsx
+++ b/src/lib/components/modal/list/CreateNewList.tsx
@@ -109,7 +109,7 @@ export function CreateNewListModal({
     >
       <Box py={4}>
         <TextInput
-          variant="floating"
+          variant="fixed-floating"
           value={listName}
           setInputState={setListName}
           labelBgColor="gray.900"
diff --git a/src/lib/components/modal/list/EditListName.tsx b/src/lib/components/modal/list/EditListName.tsx
index a72caee42..e5f648d93 100644
--- a/src/lib/components/modal/list/EditListName.tsx
+++ b/src/lib/components/modal/list/EditListName.tsx
@@ -93,7 +93,7 @@ export function EditListNameModal({
       otherAction={() => setListName(list.label)}
     >
       <TextInput
-        variant="floating"
+        variant="fixed-floating"
         value={listName}
         setInputState={setListName}
         labelBgColor="gray.900"
diff --git a/src/lib/components/select-code/CodeSelectSection.tsx b/src/lib/components/select-code/CodeSelectSection.tsx
index 55167e8b0..7ad857e91 100644
--- a/src/lib/components/select-code/CodeSelectSection.tsx
+++ b/src/lib/components/select-code/CodeSelectSection.tsx
@@ -72,7 +72,7 @@ export const CodeSelectSection = <T extends FieldValues>({
             error={error}
             label="Code ID"
             helperText="Input existing Code ID manually"
-            variant="floating"
+            variant="fixed-floating"
             my={8}
             rules={{ required: "Code ID is required" }}
           />
diff --git a/src/lib/components/select-contract/AllContractLists.tsx b/src/lib/components/select-contract/AllContractLists.tsx
index 075e57d99..ad23a4d44 100644
--- a/src/lib/components/select-contract/AllContractLists.tsx
+++ b/src/lib/components/select-contract/AllContractLists.tsx
@@ -33,7 +33,7 @@ export const AllContractLists = ({
   return (
     <Box minH="xs" w="100%">
       <TextInput
-        variant="floating"
+        variant="fixed-floating"
         value={searchKeyword}
         setInputState={setSearchKeyword}
         placeholder="Search for your lists"
diff --git a/src/lib/components/select-contract/ContractListDetail.tsx b/src/lib/components/select-contract/ContractListDetail.tsx
index ba1c60910..72fb03ad8 100644
--- a/src/lib/components/select-contract/ContractListDetail.tsx
+++ b/src/lib/components/select-contract/ContractListDetail.tsx
@@ -119,7 +119,7 @@ export const ContractListDetail = ({
     <Box minH="xs">
       <Flex gap={3} w="full" my={isReadOnly ? "24px" : "48px"}>
         <TextInput
-          variant="floating"
+          variant="fixed-floating"
           value={searchKeyword}
           setInputState={setSearchKeyword}
           placeholder="Search with Contract Address, Name, or Description"
diff --git a/src/lib/components/table/transactions/RelationChip.tsx b/src/lib/components/table/transactions/RelationChip.tsx
index 27b44a6ae..9b278b3eb 100644
--- a/src/lib/components/table/transactions/RelationChip.tsx
+++ b/src/lib/components/table/transactions/RelationChip.tsx
@@ -11,7 +11,7 @@ interface RelationChipProps {
 export const RelationChip = ({ isSigner }: RelationChipProps) => {
   const message = isSigner
     ? "‘Signer’ or ‘The signing address’ is the account address that signs the transaction."
-    : "‘Related' or ‘The related address’ is related to the transaction, even if not signing it; e.g., as a recipient address.";
+    : "‘Related’ or ‘The related address’ is related to the transaction, even if not signing it; e.g., as a recipient address.";
   const tagBgColor: CSSProperties["backgroundColor"] = isSigner
     ? CURR_THEME.tag.signer.bg
     : CURR_THEME.tag.related.bg;
diff --git a/src/lib/components/upload/InstantiatePermissionRadio.tsx b/src/lib/components/upload/InstantiatePermissionRadio.tsx
index b9001f1b5..0e4f1b086 100644
--- a/src/lib/components/upload/InstantiatePermissionRadio.tsx
+++ b/src/lib/components/upload/InstantiatePermissionRadio.tsx
@@ -109,7 +109,7 @@ export const InstantiatePermissionRadio = ({
                       name={`addresses.${idx}.address`}
                       control={control}
                       label="Address"
-                      variant="floating"
+                      variant="fixed-floating"
                       error={
                         (addresses[idx]?.address &&
                           addresses.find(
diff --git a/src/lib/components/upload/UploadSection.tsx b/src/lib/components/upload/UploadSection.tsx
index 586837231..9a85f6db3 100644
--- a/src/lib/components/upload/UploadSection.tsx
+++ b/src/lib/components/upload/UploadSection.tsx
@@ -238,7 +238,7 @@ export const UploadSection = ({
         error={
           errors.codeName && getMaxLengthError(codeName.length, "code_name")
         }
-        variant="floating"
+        variant="fixed-floating"
       />
       <InstantiatePermissionRadio
         control={control}
diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
index 5c1fc5d7d..351181bc9 100644
--- a/src/lib/pages/account-details/components/modules/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
@@ -35,7 +35,7 @@ const ModuleTitle = ({
   return (
     <TableTitle
       title="Module Instances"
-      helperText="Modules are ‘smart contracts' deployed by this account"
+      helperText="Modules are ‘smart contracts’ deployed by this account"
       count={totalAsset}
     />
   );
diff --git a/src/lib/pages/admin/index.tsx b/src/lib/pages/admin/index.tsx
index c01e4bca5..689419c5e 100644
--- a/src/lib/pages/admin/index.tsx
+++ b/src/lib/pages/admin/index.tsx
@@ -183,7 +183,7 @@ const UpdateAdmin = () => {
         onContractSelect={(contract) => onContractPathChange(contract)}
       />
       <TextInput
-        variant="floating"
+        variant="fixed-floating"
         label="New Admin Address"
         helperText="This address will be an admin for the deployed smart contract."
         value={adminAddress}
diff --git a/src/lib/pages/faucet/index.tsx b/src/lib/pages/faucet/index.tsx
index 30868a04c..408eb208c 100644
--- a/src/lib/pages/faucet/index.tsx
+++ b/src/lib/pages/faucet/index.tsx
@@ -174,7 +174,7 @@ const Faucet = () => {
           "Requests are limited to once per hour for each receiving address and IP address."}
       </Text>
       <TextInput
-        variant="floating"
+        variant="fixed-floating"
         placeholder="Enter your address"
         value={address}
         setInputState={setAddress}
diff --git a/src/lib/pages/instantiate/instantiate.tsx b/src/lib/pages/instantiate/instantiate.tsx
index 170e128f2..c026acd04 100644
--- a/src/lib/pages/instantiate/instantiate.tsx
+++ b/src/lib/pages/instantiate/instantiate.tsx
@@ -411,7 +411,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             placeholder="ex. Token Factory"
             label="Label"
             helperText="The contract's label help briefly describe the contract and what it does."
-            variant="floating"
+            variant="fixed-floating"
             mb={12}
             rules={{ required: "Label is required" }}
           />
@@ -424,7 +424,7 @@ const Instantiate = ({ onComplete }: InstantiatePageProps) => {
             label="Admin Address (optional)"
             placeholder={`ex. ${exampleUserAddress}`}
             helperText="The contract's admin will be able to migrate and update future admins."
-            variant="floating"
+            variant="fixed-floating"
             error={validateAdmin(adminAddress)}
             helperAction={
               <AssignMe
diff --git a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
index b2394283a..263350c23 100644
--- a/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
+++ b/src/lib/pages/interaction/component/drawer/selector/SelectorInput.tsx
@@ -123,7 +123,7 @@ export const ModuleSelectorInput = ({
         size="md"
         helperText={`ex. “${user}”, “${user}::module_name”, or “${user}::module_name::function_name”`}
         label="Fill in address or module path"
-        variant="floating"
+        variant="fixed-floating"
         labelBgColor="gray.800"
         onKeyDown={handleKeydown}
         autoFocus
diff --git a/src/lib/pages/interaction/component/form/ExecuteArea.tsx b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
new file mode 100644
index 000000000..3b3613999
--- /dev/null
+++ b/src/lib/pages/interaction/component/form/ExecuteArea.tsx
@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+import { AbiForm } from "lib/components/abi";
+import type { AbiFormData, ExposedFunction } from "lib/types";
+import { getAbiInitialData } from "lib/utils";
+
+export const ExecuteArea = ({ fn }: { fn: ExposedFunction }) => {
+  const [data, setData] = useState<AbiFormData>({
+    typeArgs: getAbiInitialData(fn.generic_type_params.length),
+    args: getAbiInitialData(fn.params.length),
+  });
+  const [, setErrors] = useState<[string, string][]>([]);
+
+  return (
+    <AbiForm
+      fn={fn}
+      initialData={data}
+      propsOnChange={setData}
+      propsOnErrors={setErrors}
+    />
+  );
+};
diff --git a/src/lib/pages/interaction/component/form/ViewArea.tsx b/src/lib/pages/interaction/component/form/ViewArea.tsx
new file mode 100644
index 000000000..d3e36e1d0
--- /dev/null
+++ b/src/lib/pages/interaction/component/form/ViewArea.tsx
@@ -0,0 +1,39 @@
+import { Grid, GridItem } from "@chakra-ui/react";
+import { useState } from "react";
+
+import { AbiForm, ArgsForm } from "lib/components/abi";
+import type { AbiFormData, ExposedFunction, Option } from "lib/types";
+import { getAbiInitialData } from "lib/utils";
+
+export const ViewArea = ({ fn }: { fn: ExposedFunction }) => {
+  const [data, setData] = useState<AbiFormData>({
+    typeArgs: getAbiInitialData(fn.generic_type_params.length),
+    args: getAbiInitialData(fn.params.length),
+  });
+  const [, setErrors] = useState<[string, string][]>([]);
+  const [res, setRes] = useState<Record<string, Option<string>>>(
+    getAbiInitialData(fn.return.length)
+  );
+
+  return (
+    <Grid templateColumns="1fr 1fr" gap={6}>
+      <GridItem>
+        <AbiForm
+          fn={fn}
+          initialData={data}
+          propsOnChange={setData}
+          propsOnErrors={setErrors}
+        />
+      </GridItem>
+      <GridItem>
+        <ArgsForm
+          title="Return"
+          params={fn.return}
+          initialData={res}
+          propsOnChange={setRes}
+          isReadOnly
+        />
+      </GridItem>
+    </Grid>
+  );
+};
diff --git a/src/lib/pages/interaction/component/form/index.ts b/src/lib/pages/interaction/component/form/index.ts
new file mode 100644
index 000000000..414fbdf25
--- /dev/null
+++ b/src/lib/pages/interaction/component/form/index.ts
@@ -0,0 +1,2 @@
+export * from "./ExecuteArea";
+export * from "./ViewArea";
diff --git a/src/lib/pages/interaction/component/index.ts b/src/lib/pages/interaction/component/index.ts
index 6411ec9bc..5c6375a8d 100644
--- a/src/lib/pages/interaction/component/index.ts
+++ b/src/lib/pages/interaction/component/index.ts
@@ -1,3 +1,4 @@
 export * from "./common";
 export * from "./drawer";
+export * from "./form";
 export * from "./main";
diff --git a/src/lib/pages/interaction/component/main/body.tsx b/src/lib/pages/interaction/component/main/body.tsx
index e591a8772..67e7401d4 100644
--- a/src/lib/pages/interaction/component/main/body.tsx
+++ b/src/lib/pages/interaction/component/main/body.tsx
@@ -1,6 +1,7 @@
 import { Button, Flex } from "@chakra-ui/react";
 
 import { ModuleContainer } from "../common";
+import { ExecuteArea, ViewArea } from "../form";
 import { CustomIcon } from "lib/components/icon";
 import { EmptyState } from "lib/components/state";
 import type { IndexedModule } from "lib/services/moduleService";
@@ -18,10 +19,20 @@ export const FunctionSelectBody = ({
   module,
   selectedFn,
   openDrawer,
-}: FunctionSelectBodyProps) => {
-  return selectedFn ? (
-    <Flex direction="column" maxW="full">
+}: FunctionSelectBodyProps) =>
+  selectedFn ? (
+    <Flex
+      key={selectedFn.name + selectedFn.is_view}
+      direction="column"
+      maxW="full"
+      gap={8}
+    >
       <SelectedFunctionCard fn={selectedFn} />
+      {selectedFn.is_view ? (
+        <ViewArea fn={selectedFn} />
+      ) : (
+        <ExecuteArea fn={selectedFn} />
+      )}
     </Flex>
   ) : (
     <ModuleContainer flexDirection="column">
@@ -56,4 +67,3 @@ export const FunctionSelectBody = ({
       )}
     </ModuleContainer>
   );
-};
diff --git a/src/lib/pages/interaction/index.tsx b/src/lib/pages/interaction/index.tsx
index 48246a8e1..3499961e4 100644
--- a/src/lib/pages/interaction/index.tsx
+++ b/src/lib/pages/interaction/index.tsx
@@ -42,7 +42,6 @@ export const Interaction = () => {
     <PageContainer
       overflow="hidden"
       minH="unset"
-      maxH="calc(100vh - 129px)"
       display="grid"
       gridTemplateRows="auto auto 1fr"
     >
diff --git a/src/lib/pages/proposal/store-code/index.tsx b/src/lib/pages/proposal/store-code/index.tsx
index 2d5f95cd5..65562b394 100644
--- a/src/lib/pages/proposal/store-code/index.tsx
+++ b/src/lib/pages/proposal/store-code/index.tsx
@@ -367,7 +367,7 @@ const StoreCodeProposal = () => {
                   placeholder={PROPOSAL_STORE_CODE_TEXT.titlePlaceholder}
                   label={PROPOSAL_STORE_CODE_TEXT.titleLabel}
                   labelBgColor="background.main"
-                  variant="floating"
+                  variant="fixed-floating"
                   rules={{
                     required: PROPOSAL_STORE_CODE_TEXT.titleRequired,
                     maxLength: constants.maxProposalTitleLength,
@@ -386,7 +386,7 @@ const StoreCodeProposal = () => {
                   height="160px"
                   label={PROPOSAL_STORE_CODE_TEXT.descriptionLabel}
                   placeholder={PROPOSAL_STORE_CODE_TEXT.descriptionPlaceholder}
-                  variant="floating"
+                  variant="fixed-floating"
                   labelBgColor="background.main"
                   rules={{
                     required: PROPOSAL_STORE_CODE_TEXT.descriptionRequired,
@@ -401,7 +401,7 @@ const StoreCodeProposal = () => {
                   label={PROPOSAL_STORE_CODE_TEXT.runAsLabel}
                   labelBgColor="background.main"
                   placeholder={`ex. ${exampleUserAddress}`}
-                  variant="floating"
+                  variant="fixed-floating"
                   helperText={PROPOSAL_STORE_CODE_TEXT.runAsHelperText}
                   requiredText={PROPOSAL_STORE_CODE_TEXT.runAsRequired}
                   error={errors.runAs?.message}
@@ -472,7 +472,7 @@ const StoreCodeProposal = () => {
                   placeholder={PROPOSAL_STORE_CODE_TEXT.builderPlaceholder}
                   label={PROPOSAL_STORE_CODE_TEXT.builderLabel}
                   labelBgColor="background.main"
-                  variant="floating"
+                  variant="fixed-floating"
                   helperText={PROPOSAL_STORE_CODE_TEXT.builderHelperText}
                   // Builder is a docker image, can be tagged, digested, or both
                   rules={{
@@ -494,7 +494,7 @@ const StoreCodeProposal = () => {
                   placeholder={PROPOSAL_STORE_CODE_TEXT.sourcePlaceholder}
                   label={PROPOSAL_STORE_CODE_TEXT.sourceLabel}
                   labelBgColor="background.main"
-                  variant="floating"
+                  variant="fixed-floating"
                   helperText={PROPOSAL_STORE_CODE_TEXT.sourceHelperText}
                   rules={{
                     required: PROPOSAL_STORE_CODE_TEXT.sourceRequired,
@@ -531,7 +531,7 @@ const StoreCodeProposal = () => {
                     control={control}
                     label="Amount"
                     placeholder="0.00"
-                    variant="floating"
+                    variant="fixed-floating"
                     type="number"
                     helperAction={
                       <Text
diff --git a/src/lib/pages/proposal/whitelist/index.tsx b/src/lib/pages/proposal/whitelist/index.tsx
index d3a1c7476..e362dc614 100644
--- a/src/lib/pages/proposal/whitelist/index.tsx
+++ b/src/lib/pages/proposal/whitelist/index.tsx
@@ -289,7 +289,7 @@ const ProposalToWhitelist = () => {
                   placeholder="ex. Allow XYZ to store code without proposal"
                   label="Proposal Title"
                   labelBgColor="gray.900"
-                  variant="floating"
+                  variant="fixed-floating"
                   rules={{
                     required: "Proposal Title is required",
                     maxLength: constants.maxProposalTitleLength,
@@ -306,7 +306,7 @@ const ProposalToWhitelist = () => {
                   height="160px"
                   label="Proposal Description"
                   placeholder="Please describe your proposal for whitelist. Include all relevant details such as the project you work on or addresses you want to add to the allow list and the reason for the proposal. The description should be clear and concise to help everyone understand your request."
-                  variant="floating"
+                  variant="fixed-floating"
                   labelBgColor="gray.900"
                   rules={{
                     required: "Proposal Description is required",
@@ -327,7 +327,7 @@ const ProposalToWhitelist = () => {
                     name={`addresses.${idx}.address`}
                     control={control}
                     label="Address"
-                    variant="floating"
+                    variant="fixed-floating"
                     validation={{
                       duplicate: () =>
                         addresses.find(
@@ -390,7 +390,7 @@ const ProposalToWhitelist = () => {
                   control={control}
                   label="Amount"
                   placeholder="0.00"
-                  variant="floating"
+                  variant="fixed-floating"
                   type="number"
                   helperAction={
                     <Text
diff --git a/src/lib/pages/public-project/components/AllProject.tsx b/src/lib/pages/public-project/components/AllProject.tsx
index c4fb542f8..e38136391 100644
--- a/src/lib/pages/public-project/components/AllProject.tsx
+++ b/src/lib/pages/public-project/components/AllProject.tsx
@@ -69,7 +69,7 @@ export const AllProject = observer(() => {
   return (
     <Box minH="xs" w="100%">
       <TextInput
-        variant="floating"
+        variant="fixed-floating"
         value={searchKeyword}
         setInputState={setSearchKeyword}
         labelBgColor="background"
diff --git a/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx b/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
index 985a874cf..712afd779 100644
--- a/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
+++ b/src/lib/pages/public-project/components/table/account/PublicProjectAccountTable.tsx
@@ -73,7 +73,7 @@ export const PublicProjectAccountTable = ({
       <TableTitle title="Accounts" count={accounts.length} />
       {!onViewMore && (
         <TextInput
-          variant="floating"
+          variant="fixed-floating"
           value={searchKeyword}
           setInputState={setSearchKeyword}
           placeholder="Search with Account Address, Name, or Description"
diff --git a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx b/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
index 2554b4245..84df30ced 100644
--- a/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
+++ b/src/lib/pages/public-project/components/table/code/PublicProjectCodeTable.tsx
@@ -102,7 +102,7 @@ export const PublicProjectCodeTable = observer(
         <TableTitle title="Codes" count={codes.length} />
         {!onViewMore && (
           <TextInput
-            variant="floating"
+            variant="fixed-floating"
             value={searchKeyword}
             setInputState={setSearchKeyword}
             placeholder="Search with Code ID or Code Name"
diff --git a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx b/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
index 716062c2c..627cd55be 100644
--- a/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
+++ b/src/lib/pages/public-project/components/table/contract/PublicProjectContractTable.tsx
@@ -96,7 +96,7 @@ export const PublicProjectContractTable = observer(
         <TableTitle title="Contracts" count={contracts.length} />
         {!onViewMore && (
           <TextInput
-            variant="floating"
+            variant="fixed-floating"
             value={searchKeyword}
             setInputState={setSearchKeyword}
             placeholder="Search with Contract Address or Contract Name"
diff --git a/src/lib/styles/theme/components/form.ts b/src/lib/styles/theme/components/form.ts
index 145bf31ad..00a2d12ce 100644
--- a/src/lib/styles/theme/components/form.ts
+++ b/src/lib/styles/theme/components/form.ts
@@ -2,6 +2,57 @@ import type { ComponentStyleConfig } from "@chakra-ui/react";
 
 const errorMain = "error.main";
 
+const labelStyles = {
+  top: 0,
+  left: 0,
+  zIndex: 2,
+  position: "absolute",
+  pointerEvents: "none",
+  mx: 3,
+  px: 1,
+  transformOrigin: "left top",
+  color: "text.dark",
+  fontWeight: "400",
+  _disabled: {
+    color: "text.disabled",
+  },
+  _active: {
+    color: "secondary.main",
+  },
+};
+
+const labelTransform = {
+  md: "scale(0.75) translateY(-20px)",
+  lg: "scale(0.75) translateY(-28px)",
+};
+
+const getActiveLabelStyles = (size: "md" | "lg") => ({
+  _focusWithin: {
+    label: {
+      transform: labelTransform[size],
+      lineHeight: "1.2",
+    },
+  },
+  "input:not(:placeholder-shown) ~ label, .chakra-select__wrapper ~ label, textarea:not(:placeholder-shown) ~ label, .chakra-react-select--has-value ~ label":
+    {
+      transform: labelTransform[size],
+      lineHeight: "1.2",
+    },
+});
+
+const subtextStyles = {
+  ml: 3,
+  mt: 0,
+  fontSize: "12px",
+  color: "text.dark",
+  _disabled: {
+    color: "text.disabled",
+  },
+  "&.chakra-form__error-message": {
+    color: errorMain,
+  },
+};
+
 export const Form: ComponentStyleConfig = {
   baseStyle: {
     container: {
@@ -18,45 +69,27 @@ export const Form: ComponentStyleConfig = {
     },
   },
   variants: {
-    floating: {
+    "fixed-floating": {
       container: {
         label: {
-          top: 0,
-          left: 0,
-          zIndex: 2,
-          mx: 3,
-          px: 1,
-          position: "absolute",
-          fontWeight: "400",
+          ...labelStyles,
           lineHeight: "1.2",
-          pointerEvents: "none",
-          transformOrigin: "left top",
-          color: "text.dark",
-          _disabled: {
-            color: "text.disabled",
-          },
-          _active: {
-            color: "secondary.main",
-          },
           "&.md-label, &.textarea-label": {
-            transform: "scale(0.75) translateY(-20px)",
+            transform: labelTransform.md,
           },
           "&.lg-label": {
-            transform: "scale(0.75) translateY(-28px)",
-          },
-        },
-        "div.helper-text, .error-text": {
-          ml: 3,
-          mt: 0,
-          fontSize: "12px",
-          color: "text.dark",
-          _disabled: {
-            color: "text.disabled",
-          },
-          "&.chakra-form__error-message": {
-            color: errorMain,
+            transform: labelTransform.lg,
           },
         },
+        "div.helper-text, .error-text": { ...subtextStyles },
+      },
+    },
+    floating: {
+      container: {
+        "&.md-form, &.textarea-form": getActiveLabelStyles("md"),
+        "&.lg-form": getActiveLabelStyles("lg"),
+        label: { ...labelStyles },
+        "div.helper-text, .error-text": { ...subtextStyles },
       },
     },
   },
diff --git a/src/lib/types/abi.ts b/src/lib/types/abi.ts
index a2dc9ca22..5e47eb844 100644
--- a/src/lib/types/abi.ts
+++ b/src/lib/types/abi.ts
@@ -1,4 +1,5 @@
 import type { HexAddr } from "./addrs";
+import type { Option } from "./common";
 import type { SnakeToCamelCaseNested } from "./converter";
 
 export enum UpgradePolicy {
@@ -73,7 +74,7 @@ interface Struct {
   fields: Field[];
 }
 
-interface GenericTypeParam {
+export interface GenericTypeParam {
   constraints: string[];
 }
 
@@ -81,3 +82,8 @@ interface Field {
   name: string;
   type: string;
 }
+
+export interface AbiFormData {
+  typeArgs: Record<string, string>;
+  args: Record<string, Option<string>>;
+}
diff --git a/src/lib/utils/abi.ts b/src/lib/utils/abi.ts
index ffb62a4b8..ddaf1cb47 100644
--- a/src/lib/utils/abi.ts
+++ b/src/lib/utils/abi.ts
@@ -1,4 +1,11 @@
-import type { ExposedFunction, ResponseABI } from "lib/types";
+import { BCS } from "@initia/initia.js";
+
+import type {
+  AbiFormData,
+  ExposedFunction,
+  Option,
+  ResponseABI,
+} from "lib/types";
 
 export const checkAvailability = (fn: ExposedFunction) =>
   fn.visibility === "public" && (fn.is_view || fn.is_entry);
@@ -40,3 +47,59 @@ export const splitViewExecuteFunctions = (functions: ExposedFunction[]) => {
 
   return functionMap;
 };
+
+export const getAbiInitialData = (length: number) =>
+  Array(length)
+    .fill("")
+    .reduce<Record<string, string>>(
+      (prev, _, index) => ({ ...prev, [index.toString()]: "" }),
+      {}
+    );
+
+// ------------------------------------------//
+// -----------------MOVE ARGS----------------//
+// ------------------------------------------//
+const getArgType = (argType: string) =>
+  argType
+    .replaceAll("0x1::string::String", "string")
+    .replaceAll("0x1::option::Option", "option");
+
+const getArgValue = ({
+  type,
+  value,
+}: {
+  type: string;
+  value: Option<string>;
+}) => {
+  try {
+    if (value === undefined) return null;
+    if (type.startsWith("vector")) return JSON.parse(value) as string[];
+    return value.trim();
+  } catch (e) {
+    return "";
+  }
+};
+
+const serializeArg = (
+  arg: { type: string; value: Option<string> },
+  bcs: BCS
+) => {
+  try {
+    const argType = getArgType(arg.type);
+    const argValue = getArgValue(arg);
+    return bcs.serialize(argType, argValue);
+  } catch (e) {
+    return "";
+  }
+};
+
+export const serializeAbiData = (fn: ExposedFunction, abiData: AbiFormData) => {
+  const bcs = BCS.getInstance();
+  const serializedArgs = fn.params.map((type, index) =>
+    serializeArg({ type, value: abiData.args[index] }, bcs)
+  );
+  return {
+    typeArgs: fn.generic_type_params.map((_, index) => abiData.typeArgs[index]),
+    args: serializedArgs,
+  };
+};
diff --git a/yarn.lock b/yarn.lock
index 93d57569f..18f8c1882 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3468,6 +3468,45 @@
   dependencies:
     browser-headers "^0.4.1"
 
+"@improbable-eng/grpc-web@^0.15.0":
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/@improbable-eng/grpc-web/-/grpc-web-0.15.0.tgz#3e47e9fdd90381a74abd4b7d26e67422a2a04bef"
+  integrity sha512-ERft9/0/8CmYalqOVnJnpdDry28q+j+nAlFFARdjyxXDJ+Mhgv9+F600QC8BR9ygOfrXRlAk6CvST2j+JCpQPg==
+  dependencies:
+    browser-headers "^0.4.1"
+
+"@initia/initia.js@^0.1.8":
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/@initia/initia.js/-/initia.js-0.1.8.tgz#f1d1d12a37788054061b2e5f9db55c33dcc5f67c"
+  integrity sha512-Q7GhXHgIZ3th6k2vou+e+CO4C5JA/JeA6w3oP/kb2cxbqOAOM1+ybN/8oMtHNApxh/gpmCWUXi7axHV5v/91UA==
+  dependencies:
+    "@initia/initia.proto" "^0.1.11"
+    "@ledgerhq/hw-transport" "^6.27.12"
+    "@ledgerhq/hw-transport-webhid" "^6.27.12"
+    "@ledgerhq/hw-transport-webusb" "^6.27.12"
+    "@mysten/bcs" "^0.7.0"
+    axios "^0.27.2"
+    bech32 "^2.0.0"
+    bignumber.js "^9.1.0"
+    bip32 "^2.0.6"
+    bip39 "^3.0.4"
+    jscrypto "^1.0.3"
+    long "^5.2.0"
+    ripemd160 "^2.0.2"
+    secp256k1 "^4.0.3"
+    tmp "^0.2.1"
+    ws "^7.5.9"
+
+"@initia/initia.proto@^0.1.11":
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/@initia/initia.proto/-/initia.proto-0.1.11.tgz#39016bbb4d15f06aaec17e56d6f431ddadc600ce"
+  integrity sha512-G9HRTy5xfza6hTjYLuLgcmJWjSDsnLXnc2HvWceDcaSlHp212rMH07+gpazwY0L6aCm3uWyqLh4Yig60L3AaRA==
+  dependencies:
+    "@improbable-eng/grpc-web" "^0.15.0"
+    google-protobuf "^3.21.0"
+    long "^5.2.0"
+    protobufjs "^7.1.1"
+
 "@interchain-ui/react@1.4.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@interchain-ui/react/-/react-1.4.1.tgz#92e9eb3d657596a84f7c93c509a1c4a3f8771f10"
@@ -3940,6 +3979,55 @@
     big-integer "^1.6.48"
     utility-types "^3.10.0"
 
+"@ledgerhq/devices@^8.0.7":
+  version "8.0.7"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/devices/-/devices-8.0.7.tgz#206434dbd8a097529bbfc95f5eef94c2923c7578"
+  integrity sha512-BbPyET52lXnVs7CxJWrGYqmtGdbGzj+XnfCqLsDnA7QYr1CZREysxmie+Rr6BKpNDBRVesAovXjtaVaZOn+upw==
+  dependencies:
+    "@ledgerhq/errors" "^6.14.0"
+    "@ledgerhq/logs" "^6.10.1"
+    rxjs "6"
+    semver "^7.3.5"
+
+"@ledgerhq/errors@^6.14.0":
+  version "6.14.0"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/errors/-/errors-6.14.0.tgz#0bf253983773ef12eebce2091f463bc719223b37"
+  integrity sha512-ZWJw2Ti6Dq1Ott/+qYqJdDWeZm16qI3VNG5rFlb0TQ3UcAyLIQZbnnzzdcVVwVeZiEp66WIpINd/pBdqsHVyOA==
+
+"@ledgerhq/hw-transport-webhid@^6.27.12":
+  version "6.27.19"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-webhid/-/hw-transport-webhid-6.27.19.tgz#5a655b497258d94ec6494db7b56e17dd0c610638"
+  integrity sha512-RMnktayqqLE2uFQDw9TKoW+WSP8KnT0ElKcIISf3sXVrzHD2y0moPk/wXOzGfi+cgN4uiKy86UD/5mgz3wlm6Q==
+  dependencies:
+    "@ledgerhq/devices" "^8.0.7"
+    "@ledgerhq/errors" "^6.14.0"
+    "@ledgerhq/hw-transport" "^6.28.8"
+    "@ledgerhq/logs" "^6.10.1"
+
+"@ledgerhq/hw-transport-webusb@^6.27.12":
+  version "6.27.19"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-webusb/-/hw-transport-webusb-6.27.19.tgz#30a95c2122bcab6709665fda700276622087a930"
+  integrity sha512-M93sCyYREk8jCW/o7D/Ey+GQl38IALc0AY5WLKghzyjgqdPNo0x3j7CuTFJXiMWl5Mh8YDsO/MY8kkG9tuMvKQ==
+  dependencies:
+    "@ledgerhq/devices" "^8.0.7"
+    "@ledgerhq/errors" "^6.14.0"
+    "@ledgerhq/hw-transport" "^6.28.8"
+    "@ledgerhq/logs" "^6.10.1"
+
+"@ledgerhq/hw-transport@^6.27.12", "@ledgerhq/hw-transport@^6.28.8":
+  version "6.28.8"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport/-/hw-transport-6.28.8.tgz#f99a5c71c5c09591e9bfb1b970c42aafbe81351f"
+  integrity sha512-XxQVl4htd018u/M66r0iu5nlHi+J6QfdPsORzDF6N39jaz+tMqItb7tUlXM/isggcuS5lc7GJo7NOuJ8rvHZaQ==
+  dependencies:
+    "@ledgerhq/devices" "^8.0.7"
+    "@ledgerhq/errors" "^6.14.0"
+    events "^3.3.0"
+
+"@ledgerhq/logs@^6.10.1":
+  version "6.10.1"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/logs/-/logs-6.10.1.tgz#5bd16082261d7364eabb511c788f00937dac588d"
+  integrity sha512-z+ILK8Q3y+nfUl43ctCPuR4Y2bIxk/ooCQFwZxhtci1EhAtMDzMAx2W25qx8G1PPL9UUOdnUax19+F0OjXoj4w==
+
 "@motionone/animation@^10.15.1":
   version "10.15.1"
   resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.15.1.tgz#4a85596c31cbc5100ae8eb8b34c459fb0ccf6807"
@@ -4009,6 +4097,13 @@
     "@motionone/dom" "^10.16.2"
     tslib "^2.3.1"
 
+"@mysten/bcs@^0.7.0":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@mysten/bcs/-/bcs-0.7.4.tgz#1e32ec3d1fa68a0ed98323e604a741728927e421"
+  integrity sha512-6DKzM4L10Au3Og5EJRBqJZmXWZ7hS/clVjbVUH4sA0aFtS3AZo2xc+r5fUFfdJbaWZUxVaDiQ8BNiEZWkAnEOw==
+  dependencies:
+    bs58 "^5.0.0"
+
 "@next/env@13.0.0":
   version "13.0.0"
   resolved "https://registry.npmjs.org/@next/env/-/env-13.0.0.tgz"
@@ -5940,6 +6035,11 @@ base-x@^3.0.2:
   dependencies:
     safe-buffer "^5.0.1"
 
+base-x@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/base-x/-/base-x-4.0.0.tgz#d0e3b7753450c73f8ad2389b5c018a4af7b2224a"
+  integrity sha512-FuwxlW4H5kh37X/oW59pwTzzTKRzfrrQwhmyspRM7swOEZcHtDZSCt45U6oKgtuFE+WYPblePMVIPR4RZrh/hw==
+
 base64-js@^1.0.2, base64-js@^1.3.0, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
@@ -5965,6 +6065,11 @@ big.js@^6.2.1:
   resolved "https://registry.npmjs.org/big.js/-/big.js-6.2.1.tgz"
   integrity sha512-bCtHMwL9LeDIozFn+oNhhFoq+yQ3BNdnsLSASUxLciOb1vgvpHsIO1dsENiGMgbb4SkP5TrzWzRiLddn8ahVOQ==
 
+bignumber.js@^9.1.0:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.2.tgz#b7c4242259c008903b13707983b5f4bbd31eda0c"
+  integrity sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==
+
 bignumber.js@^9.1.1:
   version "9.1.1"
   resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.1.tgz#c4df7dc496bd849d4c9464344c1aa74228b4dac6"
@@ -5995,7 +6100,7 @@ bip32@^2.0.6:
     typeforce "^1.11.5"
     wif "^2.0.6"
 
-bip39@^3.0.2, bip39@^3.0.3:
+bip39@^3.0.2, bip39@^3.0.3, bip39@^3.0.4:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bip39/-/bip39-3.1.0.tgz#c55a418deaf48826a6ceb34ac55b3ee1577e18a3"
   integrity sha512-c9kiwdk45Do5GL0vJMe7tS95VjCii65mYAH7DfWl3uW8AVzXKQVUm64i3hzVybBDMp9r7j9iNxR85+ul8MdN/A==
@@ -6136,6 +6241,13 @@ bs58@^4.0.0:
   dependencies:
     base-x "^3.0.2"
 
+bs58@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/bs58/-/bs58-5.0.0.tgz#865575b4d13c09ea2a84622df6c8cbeb54ffc279"
+  integrity sha512-r+ihvQJvahgYT50JD05dyJNKlmmSlMoOGwn1lCcEzanPglg7TxYjioQUYehQ9mAR/+hOSd2jRc/Z2y5UxBymvQ==
+  dependencies:
+    base-x "^4.0.0"
+
 bs58check@<3.0.0, bs58check@^2.1.1, bs58check@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc"
@@ -8376,7 +8488,7 @@ globby@^11.0.3, globby@^11.0.4, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
-google-protobuf@^3.17.3:
+google-protobuf@^3.17.3, google-protobuf@^3.21.0:
   version "3.21.2"
   resolved "https://registry.yarnpkg.com/google-protobuf/-/google-protobuf-3.21.2.tgz#4580a2bea8bbb291ee579d1fefb14d6fa3070ea4"
   integrity sha512-3MSOYFO5U9mPGikIYCzK0SaThypfGgS6bHqrUGXG3DPHCrb+txNqeEcns1W0lkGfk0rCyNXm7xB9rMxnCiZOoA==
@@ -9529,7 +9641,7 @@ js-yaml@^4.0.0, js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
-jscrypto@^1.0.1:
+jscrypto@^1.0.1, jscrypto@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/jscrypto/-/jscrypto-1.0.3.tgz#598febca2a939d6f679c54f56e1fe364cef30cc9"
   integrity sha512-lryZl0flhodv4SZHOqyb1bx5sKcJxj0VBo0Kzb4QMAg3L021IC9uGpl0RCZa+9KJwlRGSK2C80ITcwbe19OKLQ==
@@ -9981,16 +10093,16 @@ long@^4.0.0:
   resolved "https://registry.npmjs.org/long/-/long-4.0.0.tgz"
   integrity sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==
 
+long@^5.0.0, long@^5.2.0, long@^5.2.3:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
+  integrity sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==
+
 long@^5.2.1:
   version "5.2.1"
   resolved "https://registry.npmjs.org/long/-/long-5.2.1.tgz"
   integrity sha512-GKSNGeNAtw8IryjjkhZxuKB3JzlcLTwjtiQCHKvqQet81I93kXslhDQruGI/QsddO83mcDToBVy7GqGS/zYf/A==
 
-long@^5.2.3:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/long/-/long-5.2.3.tgz#a3ba97f3877cf1d778eccbcb048525ebb77499e1"
-  integrity sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==
-
 longest@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/longest/-/longest-2.0.1.tgz"
@@ -11019,6 +11131,24 @@ protobufjs@6.11.3, protobufjs@^6.11.2, protobufjs@^6.8.8, protobufjs@~6.11.2, pr
     "@types/node" ">=13.7.0"
     long "^4.0.0"
 
+protobufjs@^7.1.1:
+  version "7.2.5"
+  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.2.5.tgz#45d5c57387a6d29a17aab6846dcc283f9b8e7f2d"
+  integrity sha512-gGXRSXvxQ7UiPgfw8gevrfRWcTlSbOFg+p/N+JVJEK5VhueL2miT6qTymqAmjr1Q5WbOCyJbyrk6JfWKwlFn6A==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.2"
+    "@protobufjs/base64" "^1.1.2"
+    "@protobufjs/codegen" "^2.0.4"
+    "@protobufjs/eventemitter" "^1.1.0"
+    "@protobufjs/fetch" "^1.1.0"
+    "@protobufjs/float" "^1.0.2"
+    "@protobufjs/inquire" "^1.1.0"
+    "@protobufjs/path" "^1.1.2"
+    "@protobufjs/pool" "^1.1.0"
+    "@protobufjs/utf8" "^1.1.0"
+    "@types/node" ">=13.7.0"
+    long "^5.0.0"
+
 proxy-compare@2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/proxy-compare/-/proxy-compare-2.5.1.tgz#17818e33d1653fbac8c2ec31406bce8a2966f600"
@@ -11578,6 +11708,13 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rxjs@6:
+  version "6.6.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
+  dependencies:
+    tslib "^1.9.0"
+
 rxjs@^7.0.0, rxjs@^7.5.7:
   version "7.5.7"
   resolved "https://registry.npmjs.org/rxjs/-/rxjs-7.5.7.tgz"
@@ -11634,7 +11771,7 @@ scuid@^1.1.0:
   resolved "https://registry.npmjs.org/scuid/-/scuid-1.1.0.tgz"
   integrity sha512-MuCAyrGZcTLfQoH2XoBlQ8C6bzwN88XT/0slOGz0pn8+gIP85BOAfYa44ZXQUTOwRwPU0QvgU+V+OSajl/59Xg==
 
-secp256k1@^4.0.2:
+secp256k1@^4.0.2, secp256k1@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/secp256k1/-/secp256k1-4.0.3.tgz#c4559ecd1b8d3c1827ed2d1b94190d69ce267303"
   integrity sha512-NLZVf+ROMxwtEj3Xa562qgv2BK5e2WNmXPiOdVIPLgs6lyTzMvBq0aWTYMI5XCP9jZMVKOcqZLw/Wc4vDkuxhA==
@@ -12321,7 +12458,7 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@1.14.1, tslib@^1.8.1, tslib@^1.9.3:
+tslib@1.14.1, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==