diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a44b69b0..60ffba076 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -62,6 +62,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#502](https://github.com/alleslabs/celatone-frontend/pull/502) Display queried time and add json/schema output switch
 - [#500](https://github.com/alleslabs/celatone-frontend/pull/500) Disable estimated fee when input is invalid
 - [#498](https://github.com/alleslabs/celatone-frontend/pull/498) Automatically switch to schema tab and show 404 not found error
 - [#491](https://github.com/alleslabs/celatone-frontend/pull/491) Improve scrolling into view by delaying scroll function
diff --git a/src/lib/components/fund/index.tsx b/src/lib/components/fund/index.tsx
index a273f6499..b67caa303 100644
--- a/src/lib/components/fund/index.tsx
+++ b/src/lib/components/fund/index.tsx
@@ -64,13 +64,15 @@ const AttachFundContent = ({ control, setValue }: AttachFundContentProps) => {
 interface AttachFundProps {
   control: Control<AttachFundsState>;
   attachFundsOption: AttachFundsType;
+  labelBgColor?: string;
   setValue: UseFormSetValue<AttachFundsState>;
 }
 
 export const AttachFund = ({
   control,
-  setValue,
   attachFundsOption,
+  labelBgColor,
+  setValue,
 }: AttachFundProps) => (
   <>
     <Flex mb={5}>
@@ -90,6 +92,7 @@ export const AttachFund = ({
             option will be used.
           </Text>
         }
+        labelBgColor={labelBgColor}
       />
     </Flex>
     <AttachFundContent control={control} setValue={setValue} />
diff --git a/src/lib/components/json-schema/MessageInputSwitch.tsx b/src/lib/components/json-schema/MessageInputSwitch.tsx
index 56272b86e..86c4a4b24 100644
--- a/src/lib/components/json-schema/MessageInputSwitch.tsx
+++ b/src/lib/components/json-schema/MessageInputSwitch.tsx
@@ -1,6 +1,6 @@
 import { Flex } from "@chakra-ui/react";
-import type { Dispatch, SetStateAction } from "react";
-import { useRef } from "react";
+import { useMemo } from "react";
+import type { CSSProperties, Dispatch, SetStateAction } from "react";
 
 import { Tooltip } from "../Tooltip";
 import { MotionBox } from "lib/components/MotionBox";
@@ -11,29 +11,47 @@ export enum MessageTabs {
   YOUR_SCHEMA = "Your Schema",
 }
 
+export enum OutputMessageTabs {
+  JSON_OUTPUT = "JSON Output",
+  YOUR_SCHEMA = "Your Schema",
+}
+
 export const jsonInputFormKey = MessageTabs.JSON_INPUT as "JSON Input";
 export const yourSchemaInputFormKey = MessageTabs.YOUR_SCHEMA as "Your Schema";
 
-interface MessageInputSwitchProps {
-  currentTab: Option<MessageTabs>;
+interface MessageInputSwitchProps<
+  T extends Option<MessageTabs | OutputMessageTabs>
+> {
+  currentTab: T;
   disabled?: boolean;
   tooltipLabel?: string;
-  onTabChange: Dispatch<SetStateAction<Option<MessageTabs>>>;
+  ml?: CSSProperties["marginLeft"];
+  isOutput?: boolean;
+  onTabChange: Dispatch<SetStateAction<T>>;
 }
 
-const tabs = Object.values(MessageTabs);
-
-export const MessageInputSwitch = ({
+export const MessageInputSwitch = <
+  T extends Option<MessageTabs | OutputMessageTabs>
+>({
   currentTab,
   disabled = false,
   tooltipLabel = "Select or fill code id first",
+  ml,
+  isOutput = false,
   onTabChange,
-}: MessageInputSwitchProps) => {
-  const tabRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const activeIndex = currentTab ? tabs.indexOf(currentTab) : -1;
+}: MessageInputSwitchProps<T>) => {
+  const tabs = useMemo<T[]>(
+    () => Object.values(isOutput ? OutputMessageTabs : MessageTabs),
+    [isOutput]
+  );
+  const activeIndex = currentTab ? tabs.indexOf(currentTab) : 0;
+
+  /**
+   * @todos current implementation of sliding box dimensions and position is hardcoded due to issues with ref, improve this later
+   */
   return (
     <Tooltip label={tooltipLabel} isDisabled={!disabled}>
-      <div>
+      <div style={{ marginLeft: ml }}>
         <Flex
           border="1px solid var(--chakra-colors-gray-700)"
           borderRadius="4px"
@@ -43,14 +61,12 @@ export const MessageInputSwitch = ({
           position="relative"
           sx={{ ...(disabled ? { pointerEvents: "none", opacity: 0.3 } : {}) }}
         >
-          {tabs.map((tab, idx) => (
+          {tabs.map((tab) => (
             <MotionBox
               key={tab}
-              ref={(el) => {
-                tabRefs.current[idx] = el;
-              }}
               cursor="pointer"
               p="2px 10px"
+              w="96px"
               fontSize="12px"
               fontWeight={700}
               variants={{
@@ -69,13 +85,13 @@ export const MessageInputSwitch = ({
             </MotionBox>
           ))}
           <MotionBox
-            h={tabRefs.current[activeIndex]?.clientHeight}
-            w={tabRefs.current[activeIndex]?.clientWidth}
+            w="96px"
+            h="22px"
             position="absolute"
             borderRadius="2px"
             backgroundColor="primary.dark"
             animate={{
-              left: `${tabRefs.current[activeIndex]?.offsetLeft ?? 0}px`,
+              left: activeIndex === 0 ? "4px" : "100px",
             }}
             transition={{
               type: "spring",
diff --git a/src/lib/components/json/JsonReadOnly.tsx b/src/lib/components/json/JsonReadOnly.tsx
index 2a5a340ab..59693895c 100644
--- a/src/lib/components/json/JsonReadOnly.tsx
+++ b/src/lib/components/json/JsonReadOnly.tsx
@@ -14,6 +14,7 @@ const JsonEditor = dynamic(() => import("lib/components/json/JsonEditor"), {
 
 interface JsonReadOnlyProps {
   topic?: string;
+  labelBgColor?: string;
   text: string;
   canCopy?: boolean;
   isExpandable?: boolean;
@@ -26,6 +27,7 @@ const THRESHOLD_LINES = 16;
 
 const JsonReadOnly = ({
   topic,
+  labelBgColor = "background.main",
   text,
   canCopy,
   isExpandable,
@@ -80,7 +82,7 @@ const JsonReadOnly = ({
         <Text
           top="-10px"
           w="fit-content"
-          background="background.main"
+          background={labelBgColor}
           color={!isJsonValid ? "error.main" : "text.dark"}
           fontSize="12px"
           position="absolute"
@@ -107,6 +109,7 @@ const JsonReadOnly = ({
           top="10px"
           right="10px"
           className="copy-button-box"
+          display="none"
         >
           <CopyButton value={text} amptrackSection={amptrackSection} />
         </Box>
diff --git a/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx b/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx
index ed85b1bb2..e52dbb2ca 100644
--- a/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx
+++ b/src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx
@@ -292,6 +292,7 @@ export const ExecuteBox = ({
               control={control}
               setValue={setValue}
               attachFundsOption={attachFundsOption}
+              labelBgColor="gray.900"
             />
           </GridItem>
           <GridItem>
diff --git a/src/lib/pages/query/components/SchemaQuery.tsx b/src/lib/pages/query/components/SchemaQuery.tsx
index b933d3044..5ae34bbd4 100644
--- a/src/lib/pages/query/components/SchemaQuery.tsx
+++ b/src/lib/pages/query/components/SchemaQuery.tsx
@@ -1,251 +1,17 @@
-import {
-  Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Alert,
-  AlertDescription,
-  Box,
-  Button,
-  Flex,
-  Grid,
-  GridItem,
-  Text,
-} from "@chakra-ui/react";
-import type { RJSFSchema } from "@rjsf/utils";
-import { useQuery } from "@tanstack/react-query";
-import type { AxiosError } from "axios";
-import { encode } from "js-base64";
-import dynamic from "next/dynamic";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Accordion, Button, Flex } from "@chakra-ui/react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
-import {
-  CELATONE_QUERY_KEYS,
-  useBaseApiRoute,
-  useCurrentChain,
-} from "lib/app-provider";
-import { CopyButton } from "lib/components/copy";
+import { useBaseApiRoute, useCurrentChain } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import InputWithIcon from "lib/components/InputWithIcon";
-import { JsonSchemaForm } from "lib/components/json-schema";
 import { EmptyState } from "lib/components/state";
-import { DEFAULT_RPC_ERROR } from "lib/data";
 import { useContractStore } from "lib/providers/store";
-import { AmpTrack, AmpEvent, AmpTrackExpandAll } from "lib/services/amplitude";
-import { queryData } from "lib/services/contract";
-import type { Activity } from "lib/stores/contract";
+import { AmpTrackExpandAll } from "lib/services/amplitude";
 import type { QueryExecuteSchema, QuerySchema } from "lib/stores/schema";
-import type { ContractAddr, HumanAddr, Option, RpcQueryError } from "lib/types";
-import {
-  getCurrentDate,
-  jsonValidate,
-  parseSchemaInitialData,
-} from "lib/utils";
+import type { ContractAddr } from "lib/types";
+import { parseSchemaInitialData } from "lib/utils";
 
-const CodeSnippet = dynamic(() => import("lib/components/modal/CodeSnippet"), {
-  ssr: false,
-});
-
-interface QueryComponentInterface {
-  msgSchema: QueryExecuteSchema;
-  resSchema: RJSFSchema;
-  contractAddress: ContractAddr;
-  lcdEndpoint: string;
-  walletAddress: Option<string>;
-  initialMsg: Record<string, unknown>;
-  addActivity: (activity: Activity) => void;
-}
-
-const QueryComponent = ({
-  msgSchema,
-  resSchema,
-  contractAddress,
-  lcdEndpoint,
-  walletAddress,
-  initialMsg,
-  addActivity,
-}: QueryComponentInterface) => {
-  const [msg, setMsg] = useState("{}");
-  const [res, setRes] = useState("{}");
-  const [queryError, setQueryError] = useState("");
-
-  useEffect(() => {
-    if (Object.keys(initialMsg).length) setMsg(JSON.stringify(initialMsg));
-  }, [initialMsg]);
-
-  // TODO: Abstract query
-  const {
-    refetch,
-    isFetching: queryFetching,
-    isRefetching: queryRefetching,
-  } = useQuery(
-    [
-      CELATONE_QUERY_KEYS.CONTRACT_QUERY,
-      lcdEndpoint,
-      contractAddress,
-      msgSchema.title,
-      msg,
-    ],
-    async () =>
-      queryData(
-        lcdEndpoint,
-        contractAddress,
-        msgSchema.inputRequired
-          ? msg
-          : JSON.stringify({ [msgSchema.title ?? ""]: {} })
-      ),
-    {
-      enabled: false,
-      retry: false,
-      cacheTime: 0,
-      onSuccess(data) {
-        setQueryError("");
-        setRes(JSON.stringify(data.data, null, 2));
-        addActivity({
-          type: "query",
-          action: msgSchema.title ?? "Unknown",
-          sender: walletAddress as HumanAddr,
-          contractAddress,
-          msg: encode(msg),
-          timestamp: getCurrentDate(),
-        });
-      },
-      onError(err: AxiosError<RpcQueryError>) {
-        setQueryError(err.response?.data.message || DEFAULT_RPC_ERROR);
-      },
-    }
-  );
-
-  const handleQuery = useCallback(() => {
-    AmpTrack(AmpEvent.ACTION_QUERY);
-    refetch();
-  }, [refetch]);
-
-  useEffect(() => {
-    if (!msgSchema.inputRequired) refetch();
-  }, [msgSchema.inputRequired, refetch]);
-
-  return (
-    <AccordionItem className={`query_msg_${msgSchema.schema.required?.[0]}`}>
-      <h6>
-        <AccordionButton p={4}>
-          <Box w="full" textAlign="start">
-            <Text variant="body1" fontWeight={700}>
-              {msgSchema.title}
-            </Text>
-            <Text variant="body1">{msgSchema.description}</Text>
-          </Box>
-          <AccordionIcon />
-        </AccordionButton>
-      </h6>
-      <AccordionPanel mx={2}>
-        <Grid
-          templateColumns={msgSchema.inputRequired ? "1fr 1fr" : "1fr"}
-          columnGap={6}
-        >
-          {msgSchema.inputRequired && (
-            <GridItem>
-              <JsonSchemaForm
-                formId={`query-${msgSchema.title}`}
-                schema={msgSchema.schema}
-                onChange={(data) => setMsg(JSON.stringify(data))}
-                initialFormData={initialMsg}
-              />
-              <Flex gap={2} justify="flex-start">
-                <CopyButton
-                  value={msg}
-                  amptrackSection="query_msg"
-                  buttonText="Copy QueryMsg"
-                />
-                <CodeSnippet
-                  type="query"
-                  contractAddress={contractAddress}
-                  message={msg}
-                />
-                <Button
-                  variant="primary"
-                  size="sm"
-                  onClick={handleQuery}
-                  isDisabled={jsonValidate(msg) !== null}
-                  isLoading={queryFetching || queryRefetching}
-                  leftIcon={<CustomIcon name="query" />}
-                  ml="auto"
-                >
-                  Query
-                </Button>
-              </Flex>
-            </GridItem>
-          )}
-          <GridItem>
-            <Flex align="center" gap={2} mb={3}>
-              <Text variant="body1" fontWeight={700}>
-                Return Output
-              </Text>
-              <Text variant="body3" color="text.dark">
-                Query response will display here
-              </Text>
-              <CopyButton
-                isDisable={res === "{}" || Boolean(queryError)}
-                value={res}
-                amptrackSection="query_response"
-                buttonText="Copy Output"
-                ml="auto"
-              />
-            </Flex>
-            {queryError && (
-              <Alert variant="error" mb={3} alignItems="center">
-                <AlertDescription wordBreak="break-word">
-                  {queryError}
-                </AlertDescription>
-              </Alert>
-            )}
-            <Box bg="gray.800" p={4} borderRadius="8px">
-              <JsonSchemaForm
-                formId={`response-${msgSchema.title}`}
-                schema={resSchema}
-                initialFormData={parseSchemaInitialData(res)}
-              />
-            </Box>
-            {!msgSchema.inputRequired && (
-              <Flex gap={2} justify="flex-start" mt={3}>
-                <CopyButton
-                  value={JSON.stringify({ [msgSchema.title ?? ""]: {} })}
-                  amptrackSection="query_msg"
-                  buttonText="Copy QueryMsg"
-                />
-                <CodeSnippet
-                  type="query"
-                  contractAddress={contractAddress}
-                  message={JSON.stringify({ [msgSchema.title ?? ""]: {} })}
-                />
-                <Flex gap={2} ml="auto">
-                  <CopyButton
-                    isDisable={res === "{}" || Boolean(queryError)}
-                    value={res}
-                    amptrackSection="query_response"
-                    buttonText="Copy Output"
-                  />
-                  <Button
-                    variant="primary"
-                    size="sm"
-                    onClick={handleQuery}
-                    isDisabled={jsonValidate(msg) !== null}
-                    isLoading={queryFetching || queryRefetching}
-                    leftIcon={<CustomIcon name="query" />}
-                    ml="auto"
-                  >
-                    Query Again
-                  </Button>
-                </Flex>
-              </Flex>
-            )}
-          </GridItem>
-        </Grid>
-      </AccordionPanel>
-    </AccordionItem>
-  );
-};
+import { SchemaQueryComponent } from "./SchemaQueryComponent";
 
 interface SchemaQueryProps {
   schema: QuerySchema;
@@ -347,7 +113,7 @@ export const SchemaQuery = ({
           sx={{ ".chakra-accordion__icon": { color: "gray.600" } }}
         >
           {filteredMsgs.map(([msg, res]) => (
-            <QueryComponent
+            <SchemaQueryComponent
               key={JSON.stringify(msg.schema) + JSON.stringify(res)}
               msgSchema={msg}
               resSchema={res}
diff --git a/src/lib/pages/query/components/SchemaQueryComponent.tsx b/src/lib/pages/query/components/SchemaQueryComponent.tsx
new file mode 100644
index 000000000..8e0e70ddb
--- /dev/null
+++ b/src/lib/pages/query/components/SchemaQueryComponent.tsx
@@ -0,0 +1,340 @@
+import {
+  AccordionItem,
+  AccordionButton,
+  AccordionIcon,
+  AccordionPanel,
+  Grid,
+  GridItem,
+  Flex,
+  Button,
+  Alert,
+  AlertDescription,
+  Box,
+  Text,
+} from "@chakra-ui/react";
+import type { RJSFSchema } from "@rjsf/utils";
+import { useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import dynamic from "next/dynamic";
+import type { SetStateAction, Dispatch } from "react";
+import { memo, useState, useEffect, useCallback } from "react";
+
+import { CELATONE_QUERY_KEYS } from "lib/app-provider";
+import { CopyButton } from "lib/components/copy";
+import { CustomIcon } from "lib/components/icon";
+import {
+  JsonSchemaForm,
+  MessageInputSwitch,
+  OutputMessageTabs,
+} from "lib/components/json-schema";
+import JsonReadOnly from "lib/components/json/JsonReadOnly";
+import { DEFAULT_RPC_ERROR } from "lib/data";
+import { AmpTrack, AmpEvent } from "lib/services/amplitude";
+import { queryData } from "lib/services/contract";
+import type { Activity } from "lib/stores/contract";
+import type { QueryExecuteSchema } from "lib/stores/schema";
+import type { ContractAddr, HumanAddr, RpcQueryError, Option } from "lib/types";
+import {
+  dateFromNow,
+  encode,
+  formatUTC,
+  getCurrentDate,
+  jsonValidate,
+  parseSchemaInitialData,
+} from "lib/utils";
+
+const CodeSnippet = dynamic(() => import("lib/components/modal/CodeSnippet"), {
+  ssr: false,
+});
+
+interface SchemaQueryComponentInterface {
+  msgSchema: QueryExecuteSchema;
+  resSchema: RJSFSchema;
+  contractAddress: ContractAddr;
+  lcdEndpoint: string;
+  walletAddress: Option<string>;
+  initialMsg: Record<string, unknown>;
+  addActivity: (activity: Activity) => void;
+}
+
+const TimestampText = memo(({ timestamp }: { timestamp: Option<Date> }) => {
+  const [, setRenderCount] = useState(0);
+  let text = "Query response will display here";
+  if (timestamp)
+    text = `Last Queried at ${formatUTC(timestamp)} (${dateFromNow(
+      timestamp
+    )})`;
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setRenderCount((prev) => prev + 1);
+    }, 60 * 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Text variant="body3" color="text.dark">
+      {text}
+    </Text>
+  );
+});
+
+interface ReturnWidgetsProps {
+  timestamp: Option<Date>;
+  inputRequired: Option<boolean>;
+  res: string;
+  resTab: Option<OutputMessageTabs>;
+  queryError: string;
+  setResTab: Dispatch<SetStateAction<Option<OutputMessageTabs>>>;
+}
+
+const ReturnWidgets = ({
+  timestamp,
+  inputRequired,
+  res,
+  resTab,
+  queryError,
+  setResTab,
+}: ReturnWidgetsProps) => {
+  return !inputRequired ? (
+    <Flex align="center" gap={2} mb={3}>
+      <Text variant="body1" fontWeight={700}>
+        Return Output
+      </Text>
+      <TimestampText timestamp={timestamp} />
+      <MessageInputSwitch
+        currentTab={resTab}
+        onTabChange={setResTab}
+        ml="auto"
+        isOutput
+      />
+    </Flex>
+  ) : (
+    <Flex justify="space-between" mb={6}>
+      <Flex direction="column" gap={2} flex={0.6}>
+        <Text variant="body1" fontWeight={700}>
+          Return Output
+        </Text>
+        <TimestampText timestamp={timestamp} />
+      </Flex>
+      <Flex direction="column" gap={2}>
+        <MessageInputSwitch
+          currentTab={resTab}
+          onTabChange={setResTab}
+          ml="auto"
+          isOutput
+        />
+        <CopyButton
+          isDisable={res === "{}" || Boolean(queryError)}
+          value={res}
+          amptrackSection="query_response"
+          buttonText="Copy Output"
+          ml="auto"
+        />
+      </Flex>
+    </Flex>
+  );
+};
+
+export const SchemaQueryComponent = ({
+  msgSchema,
+  resSchema,
+  contractAddress,
+  lcdEndpoint,
+  walletAddress,
+  initialMsg,
+  addActivity,
+}: SchemaQueryComponentInterface) => {
+  const [resTab, setResTab] = useState<OutputMessageTabs>();
+  const [msg, setMsg] = useState("{}");
+  const [res, setRes] = useState("{}");
+  const [queryError, setQueryError] = useState("");
+  const [timestamp, setTimestamp] = useState<Date>();
+
+  useEffect(() => {
+    if (Object.keys(initialMsg).length) setMsg(JSON.stringify(initialMsg));
+  }, [initialMsg]);
+
+  useEffect(() => {
+    if (msgSchema.inputRequired) setResTab(OutputMessageTabs.YOUR_SCHEMA);
+    else setResTab(OutputMessageTabs.JSON_OUTPUT);
+  }, [msgSchema.inputRequired, setResTab]);
+
+  // TODO: Abstract query
+  const {
+    refetch,
+    isFetching: queryFetching,
+    isRefetching: queryRefetching,
+  } = useQuery(
+    [
+      CELATONE_QUERY_KEYS.CONTRACT_QUERY,
+      lcdEndpoint,
+      contractAddress,
+      msgSchema.title,
+      msg,
+    ],
+    async () =>
+      queryData(
+        lcdEndpoint,
+        contractAddress,
+        msgSchema.inputRequired
+          ? msg
+          : JSON.stringify({ [msgSchema.title ?? ""]: {} })
+      ),
+    {
+      enabled: false,
+      retry: false,
+      cacheTime: 0,
+      onSuccess(data) {
+        const currentDate = getCurrentDate();
+        setQueryError("");
+        setRes(JSON.stringify(data.data, null, 2));
+        setTimestamp(currentDate);
+        addActivity({
+          type: "query",
+          action: msgSchema.title ?? "Unknown",
+          sender: walletAddress as HumanAddr,
+          contractAddress,
+          msg: encode(msg),
+          timestamp: currentDate,
+        });
+      },
+      onError(err: AxiosError<RpcQueryError>) {
+        setQueryError(err.response?.data.message || DEFAULT_RPC_ERROR);
+        setTimestamp(undefined);
+        setRes("{}");
+      },
+    }
+  );
+
+  const handleQuery = useCallback(() => {
+    AmpTrack(AmpEvent.ACTION_QUERY);
+    refetch();
+  }, [refetch]);
+
+  useEffect(() => {
+    if (!msgSchema.inputRequired) refetch();
+  }, [msgSchema.inputRequired, refetch]);
+
+  return (
+    <AccordionItem className={`query_msg_${msgSchema.schema.required?.[0]}`}>
+      <h6>
+        <AccordionButton p={4}>
+          <Box w="full" textAlign="start">
+            <Text variant="body1" fontWeight={700}>
+              {msgSchema.title}
+            </Text>
+            <Text variant="body1">{msgSchema.description}</Text>
+          </Box>
+          <AccordionIcon />
+        </AccordionButton>
+      </h6>
+      <AccordionPanel mx={2}>
+        <Grid
+          templateColumns={msgSchema.inputRequired ? "1fr 1fr" : "1fr"}
+          columnGap={6}
+        >
+          {msgSchema.inputRequired && (
+            <GridItem>
+              <JsonSchemaForm
+                formId={`query-${msgSchema.title}`}
+                schema={msgSchema.schema}
+                onChange={(data) => setMsg(JSON.stringify(data))}
+                initialFormData={initialMsg}
+              />
+              <Flex gap={2} justify="flex-start">
+                <CopyButton
+                  value={msg}
+                  amptrackSection="query_msg"
+                  buttonText="Copy QueryMsg"
+                />
+                <CodeSnippet
+                  type="query"
+                  contractAddress={contractAddress}
+                  message={msg}
+                />
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={handleQuery}
+                  isDisabled={jsonValidate(msg) !== null}
+                  isLoading={queryFetching || queryRefetching}
+                  leftIcon={<CustomIcon name="query" />}
+                  ml="auto"
+                >
+                  Query
+                </Button>
+              </Flex>
+            </GridItem>
+          )}
+          <GridItem>
+            <ReturnWidgets
+              timestamp={timestamp}
+              inputRequired={msgSchema.inputRequired}
+              res={res}
+              resTab={resTab}
+              queryError={queryError}
+              setResTab={setResTab}
+            />
+            {queryError && (
+              <Alert variant="error" mb={3} alignItems="center">
+                <AlertDescription wordBreak="break-word">
+                  {queryError}
+                </AlertDescription>
+              </Alert>
+            )}
+            {resTab === OutputMessageTabs.JSON_OUTPUT ? (
+              <JsonReadOnly
+                topic="Return Output"
+                labelBgColor="gray.900"
+                text={res}
+                canCopy={res !== "{}"}
+              />
+            ) : (
+              <Box bg="gray.800" p={4} borderRadius="8px">
+                <JsonSchemaForm
+                  formId={`response-${msgSchema.title}`}
+                  schema={resSchema}
+                  initialFormData={parseSchemaInitialData(res)}
+                />
+              </Box>
+            )}
+            {!msgSchema.inputRequired && (
+              <Flex gap={2} justify="flex-start" mt={3}>
+                <CopyButton
+                  value={JSON.stringify({ [msgSchema.title ?? ""]: {} })}
+                  amptrackSection="query_msg"
+                  buttonText="Copy QueryMsg"
+                />
+                <CodeSnippet
+                  type="query"
+                  contractAddress={contractAddress}
+                  message={JSON.stringify({ [msgSchema.title ?? ""]: {} })}
+                />
+                <Flex gap={2} ml="auto">
+                  <CopyButton
+                    isDisable={res === "{}" || Boolean(queryError)}
+                    value={res}
+                    amptrackSection="query_response"
+                    buttonText="Copy Output"
+                  />
+                  <Button
+                    variant="primary"
+                    size="sm"
+                    onClick={handleQuery}
+                    isDisabled={jsonValidate(msg) !== null}
+                    isLoading={queryFetching || queryRefetching}
+                    leftIcon={<CustomIcon name="query" />}
+                    ml="auto"
+                  >
+                    Query Again
+                  </Button>
+                </Flex>
+              </Flex>
+            )}
+          </GridItem>
+        </Grid>
+      </AccordionPanel>
+    </AccordionItem>
+  );
+};