diff --git a/src/lib/pages/interact-contract/components/execute-area/index.tsx b/src/lib/pages/interact-contract/components/execute-area/index.tsx
index 91d4b1779..986ecf863 100644
--- a/src/lib/pages/interact-contract/components/execute-area/index.tsx
+++ b/src/lib/pages/interact-contract/components/execute-area/index.tsx
@@ -1,5 +1,6 @@
 import { Flex, TabList, Tabs } from "@chakra-ui/react";
 import type { Coin } from "@cosmjs/stargate";
+import { observer } from "mobx-react-lite";
 import { useCallback, useEffect, useState } from "react";
 
 import { trackUseTab } from "lib/amplitude";
@@ -27,108 +28,110 @@ interface ExecuteAreaProps {
   codeHash: Option<string>;
 }
 
-export const ExecuteArea = ({
-  verifiedSchema,
-  localSchema,
-  contractAddress,
-  initialMsg,
-  initialFunds,
-  codeHash,
-  codeId,
-}: ExecuteAreaProps) => {
-  const [tab, setTab] = useState<MessageTabs>(MessageTabs.JSON_INPUT);
+export const ExecuteArea = observer(
+  ({
+    verifiedSchema,
+    localSchema,
+    contractAddress,
+    initialMsg,
+    initialFunds,
+    codeHash,
+    codeId,
+  }: ExecuteAreaProps) => {
+    const [tab, setTab] = useState<MessageTabs>(MessageTabs.JSON_INPUT);
 
-  const schema = verifiedSchema ?? localSchema;
-  const attached = Boolean(codeHash && schema);
+    const schema = verifiedSchema ?? localSchema;
+    const hasSchema = Boolean(schema);
 
-  const handleTabChange = useCallback(
-    (nextTab: MessageTabs) => {
-      if (nextTab === tab) return;
-      trackUseTab(nextTab);
-      setTab(nextTab);
-    },
-    [tab]
-  );
+    const handleTabChange = useCallback(
+      (nextTab: MessageTabs) => {
+        if (nextTab === tab) return;
+        trackUseTab(nextTab);
+        setTab(nextTab);
+      },
+      [tab]
+    );
 
-  useEffect(() => {
-    if (!schema) setTab(MessageTabs.JSON_INPUT);
-    else setTab(MessageTabs.YOUR_SCHEMA);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(schema)]);
+    useEffect(() => {
+      if (!schema) setTab(MessageTabs.JSON_INPUT);
+      else setTab(MessageTabs.YOUR_SCHEMA);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [JSON.stringify(schema)]);
 
-  return (
-    <>
-      <ConnectWalletAlert
-        subtitle="You need to connect your wallet to perform this action"
-        mb={4}
-      />
-      <Tabs
-        isLazy
-        lazyBehavior="keepMounted"
-        index={Object.values(MessageTabs).indexOf(tab)}
-      >
-        <TabList mb={8} borderBottom="1px" borderColor="gray.800">
-          <CustomTab onClick={() => handleTabChange(MessageTabs.JSON_INPUT)}>
-            JSON Input
-          </CustomTab>
-          <CustomTab
-            onClick={() => handleTabChange(MessageTabs.YOUR_SCHEMA)}
-            isDisabled={!contractAddress}
-          >
-            <Tooltip
-              label="Please select contract first"
-              hidden={Boolean(contractAddress)}
+    return (
+      <>
+        <ConnectWalletAlert
+          subtitle="You need to connect your wallet to perform this action"
+          mb={4}
+        />
+        <Tabs
+          isLazy
+          lazyBehavior="keepMounted"
+          index={Object.values(MessageTabs).indexOf(tab)}
+        >
+          <TabList mb={8} borderBottom="1px" borderColor="gray.800">
+            <CustomTab onClick={() => handleTabChange(MessageTabs.JSON_INPUT)}>
+              JSON Input
+            </CustomTab>
+            <CustomTab
+              onClick={() => handleTabChange(MessageTabs.YOUR_SCHEMA)}
+              isDisabled={!contractAddress}
             >
-              Your Schema
-            </Tooltip>
-          </CustomTab>
-        </TabList>
-      </Tabs>
-      <MessageInputContent
-        currentTab={tab}
-        jsonContent={
-          <JsonExecute
-            contractAddress={contractAddress}
-            initialFunds={initialFunds}
-            initialMsg={initialMsg}
-          />
-        }
-        schemaContent={
-          codeId &&
-          codeHash && (
-            <>
-              {attached ? (
-                <SchemaExecute
-                  verifiedSchema={verifiedSchema}
-                  localSchema={localSchema}
-                  contractAddress={contractAddress}
-                  initialMsg={initialMsg}
-                  initialFunds={initialFunds}
-                  codeId={codeId}
-                  codeHash={codeHash}
-                />
-              ) : (
-                <UploadSchemaSection
-                  codeId={codeId}
-                  codeHash={codeHash}
-                  title={
-                    <Flex flexDirection="column" alignItems="center">
-                      <Flex display="inline" textAlign="center">
-                        You haven&#39;t attached the JSON Schema for
-                        <CustomIcon name="code" mx={1} color="gray.400" />
-                        code {codeId}
+              <Tooltip
+                label="Please select contract first"
+                hidden={Boolean(contractAddress)}
+              >
+                Your Schema
+              </Tooltip>
+            </CustomTab>
+          </TabList>
+        </Tabs>
+        <MessageInputContent
+          currentTab={tab}
+          jsonContent={
+            <JsonExecute
+              contractAddress={contractAddress}
+              initialFunds={initialFunds}
+              initialMsg={initialMsg}
+            />
+          }
+          schemaContent={
+            codeId &&
+            codeHash && (
+              <>
+                {hasSchema ? (
+                  <SchemaExecute
+                    verifiedSchema={verifiedSchema}
+                    localSchema={localSchema}
+                    contractAddress={contractAddress}
+                    initialMsg={initialMsg}
+                    initialFunds={initialFunds}
+                    codeId={codeId}
+                    codeHash={codeHash}
+                  />
+                ) : (
+                  <UploadSchemaSection
+                    codeId={codeId}
+                    codeHash={codeHash}
+                    title={
+                      <Flex flexDirection="column" alignItems="center">
+                        <Flex display="inline" textAlign="center">
+                          You haven&#39;t attached the JSON Schema for
+                          <CustomIcon name="code" mx={1} color="gray.400" />
+                          code {codeId}
+                        </Flex>
+                        <Flex textAlign="center">
+                          from which this contract is instantiated yet.
+                        </Flex>
                       </Flex>
-                      <Flex textAlign="center">
-                        from which this contract is instantiated yet.
-                      </Flex>
-                    </Flex>
-                  }
-                />
-              )}
-            </>
-          )
-        }
-      />
-    </>
-  );
-};
+                    }
+                  />
+                )}
+              </>
+            )
+          }
+        />
+      </>
+    );
+  }
+);
diff --git a/src/lib/pages/interact-contract/components/execute-area/schema-execute/index.tsx b/src/lib/pages/interact-contract/components/execute-area/schema-execute/index.tsx
index 91daf49ed..0b9be7a41 100644
--- a/src/lib/pages/interact-contract/components/execute-area/schema-execute/index.tsx
+++ b/src/lib/pages/interact-contract/components/execute-area/schema-execute/index.tsx
@@ -121,7 +121,7 @@ export const SchemaExecute = ({
     <>
       <Flex gap={6} mb={6}>
         <InputWithIcon
-          placeholder="Search with Execute Message"
+          placeholder="Search by Execute Message"
           value={keyword}
           onChange={(e) => setKeyword(e.target.value)}
           size="md"
diff --git a/src/lib/pages/interact-contract/components/query-area/index.tsx b/src/lib/pages/interact-contract/components/query-area/index.tsx
index 49f3d8e1a..c81645561 100644
--- a/src/lib/pages/interact-contract/components/query-area/index.tsx
+++ b/src/lib/pages/interact-contract/components/query-area/index.tsx
@@ -1,4 +1,5 @@
 import { Flex, TabList, Tabs } from "@chakra-ui/react";
+import { observer } from "mobx-react-lite";
 import { useCallback, useEffect, useState } from "react";
 
 import { trackUseTab } from "lib/amplitude";
@@ -25,105 +26,108 @@ interface QueryAreaProps {
   codeHash: Option<string>;
 }
 
-export const QueryArea = ({
-  verifiedSchema,
-  localSchema,
-  contractAddress,
-  initialMsg,
-  codeId,
-  codeHash,
-}: QueryAreaProps) => {
-  const isMobile = useMobile();
+export const QueryArea = observer(
+  ({
+    verifiedSchema,
+    localSchema,
+    contractAddress,
+    initialMsg,
+    codeId,
+    codeHash,
+  }: QueryAreaProps) => {
+    const isMobile = useMobile();
+    const [tab, setTab] = useState<MessageTabs>(MessageTabs.JSON_INPUT);
 
-  const [tab, setTab] = useState<MessageTabs>(MessageTabs.JSON_INPUT);
+    const schema = verifiedSchema ?? localSchema;
+    const hasSchema = Boolean(schema);
 
-  const schema = verifiedSchema ?? localSchema;
-  const attached = Boolean(codeHash && schema);
+    const handleTabChange = useCallback(
+      (nextTab: MessageTabs) => {
+        if (nextTab === tab) return;
+        trackUseTab(nextTab);
+        setTab(nextTab);
+      },
+      [tab]
+    );
 
-  const handleTabChange = useCallback(
-    (nextTab: MessageTabs) => {
-      if (nextTab === tab) return;
-      trackUseTab(nextTab);
-      setTab(nextTab);
-    },
-    [tab]
-  );
+    useEffect(() => {
+      if (!schema || isMobile) setTab(MessageTabs.JSON_INPUT);
+      else setTab(MessageTabs.YOUR_SCHEMA);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isMobile, JSON.stringify(schema)]);
 
-  useEffect(() => {
-    if (!schema || isMobile) setTab(MessageTabs.JSON_INPUT);
-    else setTab(MessageTabs.YOUR_SCHEMA);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isMobile, JSON.stringify(schema)]);
-
-  return (
-    <>
-      {!isMobile && (
-        <Tabs
-          isLazy
-          lazyBehavior="keepMounted"
-          index={Object.values(MessageTabs).indexOf(tab)}
-        >
-          <TabList mb={8} borderBottom="1px" borderColor="gray.800">
-            <CustomTab onClick={() => handleTabChange(MessageTabs.JSON_INPUT)}>
-              JSON Input
-            </CustomTab>
-            <CustomTab
-              onClick={() => handleTabChange(MessageTabs.YOUR_SCHEMA)}
-              isDisabled={!contractAddress}
-            >
-              <Tooltip
-                label="Please select contract first"
-                hidden={Boolean(contractAddress)}
+    return (
+      <>
+        {!isMobile && (
+          <Tabs
+            isLazy
+            lazyBehavior="keepMounted"
+            index={Object.values(MessageTabs).indexOf(tab)}
+          >
+            <TabList mb={8} borderBottom="1px" borderColor="gray.800">
+              <CustomTab
+                onClick={() => handleTabChange(MessageTabs.JSON_INPUT)}
               >
-                Your Schema
-              </Tooltip>
-            </CustomTab>
-          </TabList>
-        </Tabs>
-      )}
-      <MessageInputContent
-        currentTab={tab}
-        jsonContent={
-          <JsonQuery
-            contractAddress={contractAddress}
-            initialMsg={initialMsg}
-          />
-        }
-        schemaContent={
-          codeId &&
-          codeHash && (
-            <>
-              {attached ? (
-                <SchemaQuery
-                  verifiedSchema={verifiedSchema}
-                  localSchema={localSchema}
-                  contractAddress={contractAddress}
-                  initialMsg={initialMsg}
-                  codeId={codeId}
-                  codeHash={codeHash}
-                />
-              ) : (
-                <UploadSchemaSection
-                  codeId={codeId}
-                  codeHash={codeHash}
-                  title={
-                    <Flex flexDirection="column" alignItems="center">
-                      <Flex display="inline" textAlign="center">
-                        You haven&#39;t attached the JSON Schema for
-                        <CustomIcon name="code" mx={1} color="gray.400" />
-                        code {codeId}
-                      </Flex>
-                      <Flex textAlign="center">
-                        from which this contract is instantiated yet.
+                JSON Input
+              </CustomTab>
+              <CustomTab
+                onClick={() => handleTabChange(MessageTabs.YOUR_SCHEMA)}
+                isDisabled={!contractAddress}
+              >
+                <Tooltip
+                  label="Please select contract first"
+                  hidden={Boolean(contractAddress)}
+                >
+                  Your Schema
+                </Tooltip>
+              </CustomTab>
+            </TabList>
+          </Tabs>
+        )}
+        <MessageInputContent
+          currentTab={tab}
+          jsonContent={
+            <JsonQuery
+              contractAddress={contractAddress}
+              initialMsg={initialMsg}
+            />
+          }
+          schemaContent={
+            codeId &&
+            codeHash && (
+              <>
+                {hasSchema ? (
+                  <SchemaQuery
+                    verifiedSchema={verifiedSchema}
+                    localSchema={localSchema}
+                    contractAddress={contractAddress}
+                    initialMsg={initialMsg}
+                    codeId={codeId}
+                    codeHash={codeHash}
+                  />
+                ) : (
+                  <UploadSchemaSection
+                    codeId={codeId}
+                    codeHash={codeHash}
+                    title={
+                      <Flex flexDirection="column" alignItems="center">
+                        <Flex display="inline" textAlign="center">
+                          You haven&#39;t attached the JSON Schema for
+                          <CustomIcon name="code" mx={1} color="gray.400" />
+                          code {codeId}
+                        </Flex>
+                        <Flex textAlign="center">
+                          from which this contract is instantiated yet.
+                        </Flex>
                       </Flex>
-                    </Flex>
-                  }
-                />
-              )}
-            </>
-          )
-        }
-      />
-    </>
-  );
-};
+                    }
+                  />
+                )}
+              </>
+            )
+          }
+        />
+      </>
+    );
+  }
+);
diff --git a/src/lib/pages/interact-contract/components/query-area/schema-query/index.tsx b/src/lib/pages/interact-contract/components/query-area/schema-query/index.tsx
index 06497cb28..0d20ca839 100644
--- a/src/lib/pages/interact-contract/components/query-area/schema-query/index.tsx
+++ b/src/lib/pages/interact-contract/components/query-area/schema-query/index.tsx
@@ -110,7 +110,7 @@ export const SchemaQuery = ({
     <>
       <Flex gap={6} mb={6}>
         <InputWithIcon
-          placeholder="Search by Command"
+          placeholder="Search by Query Message"
           value={keyword}
           onChange={(e) => setKeyword(e.target.value)}
           size="md"
diff --git a/src/lib/pages/interact-contract/index.tsx b/src/lib/pages/interact-contract/index.tsx
index 43df3f83c..24263fd53 100644
--- a/src/lib/pages/interact-contract/index.tsx
+++ b/src/lib/pages/interact-contract/index.tsx
@@ -108,7 +108,10 @@ const InteractContractBody = ({
   useEffect(() => {
     setContractAddress(contract);
     setCodeId(undefined);
+    setCodeHash(undefined);
+  }, [contract]);
 
+  useEffect(() => {
     if (!msg) {
       setInitialMsg("");
       setInitialFunds([]);
@@ -124,7 +127,7 @@ const InteractContractBody = ({
         }
       }
     }
-  }, [contract, msg]);
+  }, [msg]);
 
   const verifiedSchema = derivedWasmVerifyInfo?.schema;
   const localSchema = codeHash ? getSchemaByCodeHash(codeHash) : undefined;