diff --git a/CHANGELOG.md b/CHANGELOG.md
index dd1a08876..2b983a050 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
 
+- [#934](https://github.com/alleslabs/celatone-frontend/pull/934) Add view module in mobile
 - [#950](https://github.com/alleslabs/celatone-frontend/pull/950) Add initia username
 - [#971](https://github.com/alleslabs/celatone-frontend/pull/971) Support search functionality with LCD endpoint
 - [#970](https://github.com/alleslabs/celatone-frontend/pull/970) Support account details lite version
diff --git a/src/config/chain/osmosis.ts b/src/config/chain/osmosis.ts
index 71b2e301f..ed53dcfad 100644
--- a/src/config/chain/osmosis.ts
+++ b/src/config/chain/osmosis.ts
@@ -58,7 +58,7 @@ export const OSMOSIS_CHAIN_CONFIGS: ChainConfigs = {
     prettyName: "Osmosis Testnet",
     lcd: "https://lcd.osmotest5.osmosis.zone",
     rpc: "https://osmosis-testnet-rpc.polkachu.com:443",
-    indexer: "",
+    indexer: "https://osmo-test-5-graphql.alleslabs.dev/v1/graphql",
     wallets: [...keplrWallets],
     features: {
       faucet: {
diff --git a/src/lib/components/MobileGuard.tsx b/src/lib/components/MobileGuard.tsx
index ef2d26c52..318c2387d 100644
--- a/src/lib/components/MobileGuard.tsx
+++ b/src/lib/components/MobileGuard.tsx
@@ -29,6 +29,7 @@ export const MobileGuard = ({ children }: MobileGuardProps) => {
     pathName.includes(`/codes`) ||
     // move
     pathName.includes(`/modules`) ||
+    pathName.includes(`/interact`) ||
     // validators
     pathName.includes(`/validators`);
 
diff --git a/src/lib/components/forms/TextInput.tsx b/src/lib/components/forms/TextInput.tsx
index f2195860a..300fdbb38 100644
--- a/src/lib/components/forms/TextInput.tsx
+++ b/src/lib/components/forms/TextInput.tsx
@@ -86,7 +86,7 @@ export const TextInput = ({
           {status?.message ? (
             getResponseMsg(status, helperText)
           ) : (
-            <Text color="text.dark" variant="body3">
+            <Text color="text.dark" variant="body3" wordBreak="break-word">
               {helperText}
             </Text>
           )}
diff --git a/src/lib/components/module/FunctionCard.tsx b/src/lib/components/module/FunctionCard.tsx
index d7fb00f2e..a5a15422d 100644
--- a/src/lib/components/module/FunctionCard.tsx
+++ b/src/lib/components/module/FunctionCard.tsx
@@ -3,19 +3,24 @@ import { Flex, Text } from "@chakra-ui/react";
 
 import { DotSeparator } from "../DotSeparator";
 import { CustomIcon } from "../icon";
+import { useMobile } from "lib/app-provider";
 import { Tooltip } from "lib/components/Tooltip";
 import type { ExposedFunction } from "lib/types";
 import { checkAvailability, getVisibilityIcon } from "lib/utils";
 
-type CardVariant = "common" | "disabled" | "selected";
+type CardVariant = "common" | "disabled" | "selected" | "readonly";
 
 interface FunctionCardProps {
   variant?: CardVariant;
-  isSelected?: boolean;
+  isReadOnly?: boolean;
   exposedFn: ExposedFunction;
   onFunctionSelect: (fn: ExposedFunction) => void;
 }
 
+interface FunctionCardBodyProps extends FunctionCardProps {
+  disabled: boolean;
+}
+
 const cardStyles: { [key in CardVariant]: FlexProps } = {
   common: {
     bgColor: "gray.800",
@@ -35,93 +40,114 @@ const cardStyles: { [key in CardVariant]: FlexProps } = {
     cursor: "pointer",
     borderColor: "gray.600",
   },
+  readonly: {
+    bgColor: "gray.800",
+    borderColor: "transparent",
+  },
 };
 
-export const FunctionCard = ({
+const FunctionCardBody = ({
   variant = "common",
-  exposedFn,
   onFunctionSelect,
-}: FunctionCardProps) => {
+  isReadOnly,
+  disabled,
+  exposedFn,
+}: FunctionCardBodyProps) => {
   const { is_view: isView, visibility, name } = exposedFn;
-  const disabled = !checkAvailability(exposedFn);
 
   return (
-    <Tooltip
-      bg="primary.dark"
-      label="Only functions with “is_entry: true” are able to interacted through Celatone’s module interactions."
-      hidden={!disabled}
+    <Flex
+      w="full"
+      borderRadius={8}
+      py={2}
+      px={3}
+      transition="all .25s ease-in-out"
+      flexDirection="column"
+      gap={1}
+      border="1px solid"
+      onClick={() =>
+        disabled || isReadOnly ? null : onFunctionSelect(exposedFn)
+      }
+      {...cardStyles[disabled ? "disabled" : variant]}
     >
-      <Flex
-        w="full"
-        borderRadius={8}
-        py={2}
-        px={3}
-        transition="all .25s ease-in-out"
-        flexDirection="column"
-        gap={1}
-        border="1px solid"
-        onClick={disabled ? undefined : () => onFunctionSelect(exposedFn)}
-        {...cardStyles[disabled ? "disabled" : variant]}
-      >
-        <Flex gap={1} justifyContent="space-between" w="full">
-          <Flex gap={1} alignItems="center">
+      <Flex gap={1} justifyContent="space-between" w="full">
+        <Flex gap={1} alignItems="center">
+          <CustomIcon
+            name="query"
+            color={isView ? "primary.main" : "accent.dark"}
+            boxSize={3}
+          />
+          <Text variant="body3" color={isView ? "primary.main" : "accent.dark"}>
+            {isView ? "View" : "Execute"}
+          </Text>
+        </Flex>
+        <Flex alignItems="center" gap={2}>
+          {!isView && (
+            <>
+              <Tooltip
+                bg="primary.dark"
+                label={`is_entry: ${exposedFn.is_entry}`}
+              >
+                <Flex pointerEvents="auto" onClick={(e) => e.stopPropagation()}>
+                  {disabled ? (
+                    <CustomIcon name="close" color="gray.600" boxSize={3} />
+                  ) : (
+                    <CustomIcon name="check" color="success.main" boxSize={3} />
+                  )}
+                </Flex>
+              </Tooltip>
+              <DotSeparator bg="gray.600" />
+            </>
+          )}
+          <Flex alignItems="center" gap={1}>
             <CustomIcon
-              name="query"
-              color={isView ? "primary.main" : "accent.dark"}
+              name={getVisibilityIcon(visibility)}
+              color="gray.600"
               boxSize={3}
             />
-            <Text
-              variant="body3"
-              color={isView ? "primary.main" : "accent.dark"}
-            >
-              {isView ? "View" : "Execute"}
+            <Text variant="body3" color="text.dark" textTransform="capitalize">
+              {visibility}
             </Text>
           </Flex>
-          <Flex alignItems="center" gap={2}>
-            {!isView && (
-              <>
-                <Tooltip
-                  bg="primary.dark"
-                  label={`is_entry: ${exposedFn.is_entry}`}
-                >
-                  <Flex
-                    pointerEvents="auto"
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    {disabled ? (
-                      <CustomIcon name="close" color="gray.600" boxSize={3} />
-                    ) : (
-                      <CustomIcon
-                        name="check"
-                        color="success.main"
-                        boxSize={3}
-                      />
-                    )}
-                  </Flex>
-                </Tooltip>
-                <DotSeparator bg="gray.600" />
-              </>
-            )}
-            <Flex alignItems="center" gap={1}>
-              <CustomIcon
-                name={getVisibilityIcon(visibility)}
-                color="gray.600"
-                boxSize={3}
-              />
-              <Text
-                variant="body3"
-                color="text.dark"
-                textTransform="capitalize"
-              >
-                {visibility}
-              </Text>
-            </Flex>
-          </Flex>
         </Flex>
-        <Text variant="body2" color={disabled ? "text.disabled" : "text.main"}>
-          {name}
-        </Text>
       </Flex>
+      <Text variant="body2" color={disabled ? "text.disabled" : "text.main"}>
+        {name}
+      </Text>
+    </Flex>
+  );
+};
+
+export const FunctionCard = ({
+  variant = "common",
+  exposedFn,
+  onFunctionSelect,
+  isReadOnly = false,
+}: FunctionCardProps) => {
+  const isMobile = useMobile();
+  const disabled = !checkAvailability(exposedFn);
+
+  return isMobile ? (
+    <FunctionCardBody
+      variant={variant}
+      exposedFn={exposedFn}
+      onFunctionSelect={onFunctionSelect}
+      isReadOnly={isReadOnly}
+      disabled={disabled}
+    />
+  ) : (
+    <Tooltip
+      bg="primary.dark"
+      label="Only functions with “is_entry: true” are able to interacted through Celatone’s module interactions."
+      hidden={!disabled}
+    >
+      <FunctionCardBody
+        variant={variant}
+        exposedFn={exposedFn}
+        onFunctionSelect={onFunctionSelect}
+        isReadOnly={isReadOnly}
+        disabled={disabled}
+      />
     </Tooltip>
   );
 };
diff --git a/src/lib/components/module/FunctionDetailCard.tsx b/src/lib/components/module/FunctionDetailCard.tsx
index d4915bdd6..99fda9723 100644
--- a/src/lib/components/module/FunctionDetailCard.tsx
+++ b/src/lib/components/module/FunctionDetailCard.tsx
@@ -10,12 +10,13 @@ import {
 } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 
+import { DotSeparator } from "../DotSeparator";
 import { CustomIcon } from "../icon";
 import { LabelText } from "../LabelText";
 import { Tooltip } from "../Tooltip";
 import { AmpEvent, track, trackUseExpand } from "lib/amplitude";
 import { useInternalNavigate, useMobile } from "lib/app-provider";
-import type { ExposedFunction, IndexedModule } from "lib/types";
+import type { ExposedFunction, IndexedModule, Visibility } from "lib/types";
 import {
   checkAvailability,
   getFirstQueryParam,
@@ -37,6 +38,95 @@ const StyledIconButton = chakra(IconButton, {
   },
 });
 
+const VisibilityLabel = ({ visibility }: { visibility: Visibility }) => (
+  <Flex alignItems="center">
+    <CustomIcon
+      name={getVisibilityIcon(visibility)}
+      color="gray.600"
+      boxSize={3}
+    />
+    <Text variant="body3" color="text.dark" textTransform="capitalize">
+      {visibility}
+    </Text>
+  </Flex>
+);
+
+const FunctionButton = ({
+  isView,
+  disabled,
+  address,
+  moduleName,
+  exposedFn,
+}: {
+  isView: boolean;
+  disabled: boolean;
+  address: string;
+  moduleName: string;
+  exposedFn: ExposedFunction;
+}) => {
+  const navigate = useInternalNavigate();
+  const isMobile = useMobile();
+  const router = useRouter();
+
+  const getButtonStyle = () => {
+    if ((isMobile && !isView) || disabled)
+      return { variant: "outline-gray", color: "gray.500" };
+    if (isView) return { variant: "outline-primary", color: "primary.dark" };
+    return { variant: "outline-accent", color: "accent.dark" };
+  };
+
+  return (
+    <Tooltip
+      bg="primary.dark"
+      label={
+        isMobile && !isView
+          ? "You can currently execute functions on a desktop device only"
+          : "Only execute functions with “is_entry: true” and “visibility: public” are interactable through Celatone’s module interactions."
+      }
+      hidden={!disabled && !(isMobile && !isView)}
+    >
+      <Button
+        variant={getButtonStyle().variant}
+        isDisabled={disabled || (isMobile && !isView)}
+        borderColor={getButtonStyle().color}
+        size="sm"
+        minW={{ md: 24 }}
+        onClick={(e) => {
+          track(AmpEvent.USE_MODULE_FUNCTION_CTA, {
+            address,
+            moduleName,
+            functionType: isView ? "view" : "execute",
+            functionName: exposedFn.name,
+            section: getFirstQueryParam(router.query.type),
+          });
+          navigate({
+            pathname: "/interact",
+            query: {
+              address,
+              moduleName,
+              functionType: isView ? "view" : "execute",
+              functionName: exposedFn.name,
+            },
+          });
+          e.stopPropagation();
+        }}
+        leftIcon={
+          <CustomIcon
+            mx={0}
+            name={isView ? "query" : "execute"}
+            color={getButtonStyle().color}
+            boxSize={3}
+          />
+        }
+      >
+        <Text color={getButtonStyle().color} mt="2px">
+          {isView ? "View" : "Execute"}
+        </Text>
+      </Button>
+    </Tooltip>
+  );
+};
+
 const FunctionDetail = ({ exposedFn }: { exposedFn: ExposedFunction }) => (
   <AccordionPanel bg="gray.900" borderRadius={8} mt={4} py={3} px={4}>
     <Flex gap={3} direction="column">
@@ -121,17 +211,10 @@ export const FunctionDetailCard = ({
 }: FunctionDetailCardProps) => {
   const { is_view: isView, visibility, name } = exposedFn;
   const disabled = !checkAvailability(exposedFn);
-  const navigate = useInternalNavigate();
   const isMobile = useMobile();
   const fnColor = isView ? "primary.main" : "accent.main";
   const router = useRouter();
 
-  const getButtonStyle = () => {
-    if (disabled) return { variant: "outline-gray", color: "gray.500" };
-    if (isView) return { variant: "outline-primary", color: "primary.dark" };
-    return { variant: "outline-accent", color: "accent.dark" };
-  };
-
   return (
     <AccordionItem
       bg="gray.800"
@@ -157,85 +240,44 @@ export const FunctionDetailCard = ({
               })
             }
           >
-            <Flex justifyContent="space-between" w="full">
+            <Flex justifyContent="space-between" w="full" gap={2}>
               <Flex direction="column" gap={1} alignItems="flex-start">
-                <Flex gap={1} alignItems="center">
-                  <CustomIcon
-                    name={isView ? "query" : "execute"}
-                    color={fnColor}
-                    boxSize={3}
+                <Flex alignItems="center" gap={1}>
+                  <Flex gap={{ base: 0, md: 1 }} alignItems="center">
+                    <CustomIcon
+                      name={isView ? "query" : "execute"}
+                      color={fnColor}
+                      boxSize={3}
+                    />
+                    <Text variant="body3" color={fnColor}>
+                      {isView ? "View" : "Execute"}
+                    </Text>
+                  </Flex>
+                  <DotSeparator
+                    bg="gray.600"
+                    ml={1}
+                    display={{ base: "flex", md: "none" }}
                   />
-                  <Text variant="body3" color={fnColor}>
-                    {isView ? "View" : "Execute"}
-                  </Text>
+                  {isMobile && <VisibilityLabel visibility={visibility} />}
                 </Flex>
-                <Text variant="body2" color="text.main">
+                <Text
+                  variant="body2"
+                  color="text.main"
+                  wordBreak="break-word"
+                  textAlign="left"
+                >
                   {name}
                 </Text>
               </Flex>
               <Flex alignItems="center" gap={{ base: 0, md: 4 }}>
-                {!isMobile && (
-                  <>
-                    <Flex alignItems="center" gap={1}>
-                      <CustomIcon
-                        name={getVisibilityIcon(visibility)}
-                        color="gray.600"
-                        boxSize={3}
-                      />
-                      <Text
-                        variant="body3"
-                        color="text.dark"
-                        textTransform="capitalize"
-                      >
-                        {visibility}
-                      </Text>
-                    </Flex>
-
-                    <Tooltip
-                      bg="primary.dark"
-                      label="Only execute functions with “is_entry: true” and “visibility: public” are interactable through Celatone’s module interactions."
-                      hidden={!disabled}
-                    >
-                      <Button
-                        variant={getButtonStyle().variant}
-                        isDisabled={disabled}
-                        borderColor={getButtonStyle().color}
-                        size="sm"
-                        onClick={(e) => {
-                          track(AmpEvent.USE_MODULE_FUNCTION_CTA, {
-                            address,
-                            moduleName,
-                            functionType: isView ? "view" : "execute",
-                            functionName: exposedFn.name,
-                            section: getFirstQueryParam(router.query.type),
-                          });
-                          navigate({
-                            pathname: "/interact",
-                            query: {
-                              address,
-                              moduleName,
-                              functionType: isView ? "view" : "execute",
-                              functionName: exposedFn.name,
-                            },
-                          });
-                          e.stopPropagation();
-                        }}
-                        leftIcon={
-                          <CustomIcon
-                            mx={0}
-                            name={isView ? "query" : "execute"}
-                            color={getButtonStyle().color}
-                            boxSize={3}
-                          />
-                        }
-                      >
-                        <Text color={getButtonStyle().color} mt="2px">
-                          {isView ? "View" : "Execute"}
-                        </Text>
-                      </Button>
-                    </Tooltip>
-                  </>
-                )}
+                {!isMobile && <VisibilityLabel visibility={visibility} />}
+                <FunctionButton
+                  isView={isView}
+                  disabled={disabled}
+                  address={address}
+                  moduleName={moduleName}
+                  exposedFn={exposedFn}
+                />
                 <StyledIconButton
                   variant="none"
                   aria-label="external"
diff --git a/src/lib/components/module/ModuleCard.tsx b/src/lib/components/module/ModuleCard.tsx
index 8a4470ca0..2de5cd00a 100644
--- a/src/lib/components/module/ModuleCard.tsx
+++ b/src/lib/components/module/ModuleCard.tsx
@@ -5,6 +5,7 @@ import { useMemo } from "react";
 import { AppLink } from "../AppLink";
 import { CustomIcon } from "../icon";
 import { AmpEvent, track } from "lib/amplitude";
+import { ModuleInteractionMobileStep } from "lib/pages/interact/types";
 import { useVerifyModule } from "lib/services/move/module";
 import type { BechAddr, IndexedModule, Option } from "lib/types";
 
@@ -15,6 +16,8 @@ interface ModuleCardProps {
   module: IndexedModule;
   selectedModule: Option<IndexedModule>;
   setSelectedModule?: (module: IndexedModule) => void;
+  setStep?: (step: ModuleInteractionMobileStep) => void;
+  readOnly?: boolean;
 }
 
 export const ModuleCard = ({
@@ -22,12 +25,23 @@ export const ModuleCard = ({
   module,
   selectedModule,
   setSelectedModule,
+  setStep,
+  readOnly = false,
 }: ModuleCardProps) => {
   const { data: isVerified } = useVerifyModule({
     address: selectedAddress,
     moduleName: module.moduleName,
   });
 
+  const handleModuleClick = (clickedModule: IndexedModule) => {
+    track(AmpEvent.USE_MODULE_CARD, {
+      viewCount: clickedModule.viewFunctions.length,
+      executeCount: clickedModule.executeFunctions.length,
+    });
+    setSelectedModule?.(clickedModule);
+    setStep?.(ModuleInteractionMobileStep.SelectFunction);
+  };
+
   const card = useMemo(
     () => (
       <Grid
@@ -39,19 +53,11 @@ export const ModuleCard = ({
         }
         p={4}
         alignItems="center"
-        cursor="pointer"
-        onClick={() => {
-          track(AmpEvent.USE_MODULE_CARD, {
-            viewCount: module.viewFunctions.length,
-            executeCount: module.executeFunctions.length,
-          });
-          setSelectedModule?.(module);
-        }}
+        cursor={readOnly ? "default" : "pointer"}
         gap={1}
         templateColumns="20px 1fr auto"
-        _hover={{
-          bg: "gray.700",
-        }}
+        onClick={() => (readOnly ? null : handleModuleClick(module))}
+        _hover={{ bg: readOnly ? "unset" : "gray.700" }}
         transition=".25s all ease-out"
       >
         <CustomIcon name="contract-address" color="primary.main" boxSize={3} />
@@ -84,7 +90,7 @@ export const ModuleCard = ({
     ]
   );
 
-  return setSelectedModule ? (
+  return setSelectedModule || readOnly ? (
     card
   ) : (
     <AppLink href={`/modules/${module.address}/${module.moduleName}`}>
diff --git a/src/lib/layout/mobile/utils.ts b/src/lib/layout/mobile/utils.ts
index 081b3cb3b..123fa8549 100644
--- a/src/lib/layout/mobile/utils.ts
+++ b/src/lib/layout/mobile/utils.ts
@@ -118,6 +118,11 @@ export const getNavDrawerFull = (
               slug: "/account/0x1",
               icon: "hex" as IconKeys,
             },
+            {
+              name: "View Module",
+              slug: "/interact",
+              icon: "query" as IconKeys,
+            },
           ]
         : []),
       ...(isNft
diff --git a/src/lib/pages/interact/component/InteractionBodySection.tsx b/src/lib/pages/interact/component/InteractionBodySection.tsx
new file mode 100644
index 000000000..a989a196a
--- /dev/null
+++ b/src/lib/pages/interact/component/InteractionBodySection.tsx
@@ -0,0 +1,41 @@
+import { Grid } from "@chakra-ui/react";
+import type { Dispatch, SetStateAction } from "react";
+
+import type { ExposedFunction, IndexedModule, Option } from "lib/types";
+
+import type { InteractionTabs } from "./common";
+import { FunctionSelectBody } from "./FunctionSelectBody";
+import { FunctionSelectPanel } from "./FunctionSelectPanel";
+
+interface InteractionBodySectionProps {
+  module: Option<IndexedModule>;
+  selectedType: InteractionTabs;
+  selectedFn: Option<ExposedFunction>;
+  setSelectedType: Dispatch<SetStateAction<InteractionTabs>>;
+  handleFunctionSelect: (fn: ExposedFunction) => void;
+  onOpen: () => void;
+}
+
+export const InteractionBodySection = ({
+  module,
+  selectedType,
+  setSelectedType,
+  selectedFn,
+  handleFunctionSelect,
+  onOpen,
+}: InteractionBodySectionProps) => (
+  <Grid gap={8} templateColumns="minmax(300px, 20%) 1fr" overflow="hidden">
+    <FunctionSelectPanel
+      module={module}
+      tab={selectedType}
+      setTab={setSelectedType}
+      selectedFn={selectedFn}
+      setSelectedFn={handleFunctionSelect}
+    />
+    <FunctionSelectBody
+      module={module}
+      selectedFn={selectedFn}
+      openDrawer={onOpen}
+    />
+  </Grid>
+);
diff --git a/src/lib/pages/interact/component/InteractionBodySectionMobile.tsx b/src/lib/pages/interact/component/InteractionBodySectionMobile.tsx
new file mode 100644
index 000000000..cc42482f3
--- /dev/null
+++ b/src/lib/pages/interact/component/InteractionBodySectionMobile.tsx
@@ -0,0 +1,50 @@
+import { Button, Flex } from "@chakra-ui/react";
+
+import { EmptyState } from "lib/components/state";
+import type { ExposedFunction, IndexedModule, Option } from "lib/types";
+
+import { ViewArea } from "./form";
+
+interface InteractionBodySectionMobileProps {
+  module: Option<IndexedModule>;
+  selectedFn: Option<ExposedFunction>;
+  openDrawer: () => void;
+}
+
+export const InteractionBodySectionMobile = ({
+  module,
+  selectedFn,
+  openDrawer,
+}: InteractionBodySectionMobileProps) => (
+  <Flex>
+    {module && selectedFn ? (
+      <ViewArea
+        moduleAddress={module.address}
+        moduleName={module.moduleName}
+        fn={selectedFn}
+      />
+    ) : (
+      <Flex
+        direction="column"
+        alignItems="center"
+        justifyContent="center"
+        p={8}
+        border="1px solid"
+        borderColor="gray.700"
+        borderRadius={4}
+      >
+        <EmptyState
+          imageWidth="80px"
+          imageVariant="empty"
+          message={`Initiate your Module interactions by choosing its associated ${!module ? "module" : "function"}.`}
+          textVariant="body2"
+          my={0}
+          py={4}
+        />
+        <Button variant="primary" onClick={openDrawer}>
+          {!module ? "Select Module" : "Select Function"}
+        </Button>
+      </Flex>
+    )}
+  </Flex>
+);
diff --git a/src/lib/pages/interact/component/SelectedFunctionCard.tsx b/src/lib/pages/interact/component/SelectedFunctionCard.tsx
index 7def46abf..252dca2d4 100644
--- a/src/lib/pages/interact/component/SelectedFunctionCard.tsx
+++ b/src/lib/pages/interact/component/SelectedFunctionCard.tsx
@@ -2,6 +2,7 @@ import { Button, Divider, Flex } from "@chakra-ui/react";
 import { useState } from "react";
 
 import { trackUseExpand } from "lib/amplitude";
+import { useMobile } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
 import { MotionBox } from "lib/components/MotionBox";
@@ -13,15 +14,25 @@ interface SelectedFunctionCardProps {
 }
 
 export const SelectedFunctionCard = ({ fn }: SelectedFunctionCardProps) => {
+  const isMobile = useMobile();
   const [expand, setExpand] = useState(false);
   return (
     <Flex direction="column" bg="gray.900" borderRadius="8px">
-      <Flex align="center" justify="space-between" p={4} borderRadius="8px">
+      <Flex
+        align="center"
+        justify="space-between"
+        p={{ base: 0, md: 4 }}
+        borderRadius="8px"
+      >
         <Flex gap={8} h="full">
-          <LabelText label="Selected function" labelWeight={700}>
-            {fn.name}
-          </LabelText>
-          <Divider orientation="vertical" borderColor="gray.700" />
+          {!isMobile && (
+            <>
+              <LabelText label="Selected function" labelWeight={700}>
+                {fn.name}
+              </LabelText>
+              <Divider orientation="vertical" borderColor="gray.700" />
+            </>
+          )}
           <LabelText label="Visibility" labelWeight={700}>
             <Flex
               align="center"
@@ -92,7 +103,8 @@ export const SelectedFunctionCard = ({ fn }: SelectedFunctionCardProps) => {
           duration: "0.25",
           ease: "easeInOut",
         }}
-        p={`0 16px ${expand ? "16px" : 0}`}
+        p={{ base: 0, md: `0 16px ${expand ? "16px" : 0}` }}
+        mt={{ base: 3, md: 0 }}
         gap={3}
       >
         <LabelText label="generic_type_params" labelWeight={700}>
diff --git a/src/lib/pages/interact/component/drawer/ModuleSelectDrawer.tsx b/src/lib/pages/interact/component/drawer/ModuleSelectDrawer.tsx
index 4ad68d81d..e366ecd00 100644
--- a/src/lib/pages/interact/component/drawer/ModuleSelectDrawer.tsx
+++ b/src/lib/pages/interact/component/drawer/ModuleSelectDrawer.tsx
@@ -17,7 +17,7 @@ import { useModulesByAddress } from "lib/services/move/module";
 import type { BechAddr, HexAddr, IndexedModule, Option } from "lib/types";
 import { isHexWalletAddress } from "lib/utils";
 
-import { ModuleSelectMainBody } from "./body";
+import { DrawerBodyDesktop } from "./body";
 import { ModuleSelector } from "./selector";
 import type {
   DisplayMode,
@@ -100,7 +100,7 @@ export const ModuleSelectDrawer = ({
               closeModal={onClose}
             />
             {modules ? (
-              <ModuleSelectMainBody
+              <DrawerBodyDesktop
                 selectedAddress={selectedAddress}
                 mode={mode}
                 modules={modules}
diff --git a/src/lib/pages/interact/component/drawer/ModuleSelectDrawerMobile.tsx b/src/lib/pages/interact/component/drawer/ModuleSelectDrawerMobile.tsx
new file mode 100644
index 000000000..fb208f600
--- /dev/null
+++ b/src/lib/pages/interact/component/drawer/ModuleSelectDrawerMobile.tsx
@@ -0,0 +1,195 @@
+import {
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  Flex,
+  Heading,
+  Text,
+} from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+
+import { ModuleInteractionMobileStep } from "../../types";
+import { ModuleEmptyState } from "../common";
+import { useConvertHexAddress } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import { ModuleCard } from "lib/components/module";
+import { useModulesByAddress } from "lib/services/move/module";
+import type { BechAddr, HexAddr, IndexedModule, Option } from "lib/types";
+import { isHexWalletAddress } from "lib/utils";
+
+import { SelectFunctionSection, SelectModuleSection } from "./body";
+import { ModuleSelector } from "./selector";
+import type {
+  DisplayMode,
+  ModuleSelectFunction,
+  SelectedAddress,
+} from "./types";
+
+interface ModuleSelectDrawerMobileProps {
+  isOpen: boolean;
+  onClose: () => void;
+  hexAddress: Option<HexAddr>;
+  handleModuleSelect: ModuleSelectFunction;
+  step: ModuleInteractionMobileStep;
+  setStep: (step: ModuleInteractionMobileStep) => void;
+  selectedModule: Option<IndexedModule>;
+  setSelectedModule: (module: IndexedModule) => void;
+}
+
+export const ModuleSelectDrawerMobile = ({
+  isOpen,
+  onClose,
+  hexAddress,
+  handleModuleSelect,
+  step,
+  setStep,
+  selectedModule,
+  setSelectedModule,
+}: ModuleSelectDrawerMobileProps) => {
+  const { convertHexWalletAddress, convertHexModuleAddress } =
+    useConvertHexAddress();
+
+  const [mode, setMode] = useState<DisplayMode>("input");
+  const [selectedAddress, setSelectedAddress] = useState<SelectedAddress>({
+    address: "" as BechAddr,
+    hex: "" as HexAddr,
+  });
+  const [modules, setModules] = useState<IndexedModule[]>();
+
+  const { refetch } = useModulesByAddress({
+    address: selectedAddress.hex,
+    enabled: false,
+    onSuccess: ({ items }) => setModules(items),
+  });
+
+  useEffect(() => {
+    if (hexAddress) {
+      setMode("display");
+      setSelectedAddress({
+        address: isHexWalletAddress(hexAddress)
+          ? convertHexWalletAddress(hexAddress)
+          : convertHexModuleAddress(hexAddress),
+        hex: hexAddress,
+      });
+    } else {
+      setMode("input");
+      setSelectedAddress({
+        address: "" as BechAddr,
+        hex: "" as HexAddr,
+      });
+      setModules(undefined);
+    }
+  }, [convertHexWalletAddress, convertHexModuleAddress, hexAddress]);
+
+  useEffect(() => {
+    if (isOpen && selectedAddress.hex) refetch();
+  }, [isOpen, refetch, selectedAddress.hex]);
+
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} placement="bottom">
+      <DrawerOverlay />
+      <DrawerContent h="90%">
+        {step === ModuleInteractionMobileStep.SelectModule ? (
+          <>
+            <DrawerHeader borderBottom="1px solid" borderColor="gray.700">
+              <CustomIcon
+                name="contract-address"
+                boxSize={6}
+                color="gray.600"
+              />
+              <Heading as="h5" variant="h5">
+                Select Module
+              </Heading>
+            </DrawerHeader>
+            <DrawerCloseButton color="text.dark" />
+            <DrawerBody p={6}>
+              <Flex h="full" direction="column">
+                <ModuleSelector
+                  mode={mode}
+                  selectedAddress={selectedAddress}
+                  setSelectedAddress={setSelectedAddress}
+                  setModules={setModules}
+                  setMode={setMode}
+                  handleModuleSelect={handleModuleSelect}
+                  closeModal={onClose}
+                />
+                {modules ? (
+                  <SelectModuleSection
+                    selectedAddress={selectedAddress}
+                    modules={modules}
+                    selectedModule={selectedModule}
+                    setSelectedModule={setSelectedModule}
+                    setStep={setStep}
+                  />
+                ) : (
+                  <ModuleEmptyState
+                    description="Available functions for selected modules will display here"
+                    hasImage
+                  />
+                )}
+              </Flex>
+            </DrawerBody>
+          </>
+        ) : (
+          <>
+            <DrawerHeader borderBottom="1px solid" borderColor="gray.700">
+              <CustomIcon
+                name="chevron-left"
+                boxSize={6}
+                color="gray.600"
+                cursor="pointer"
+                onClick={() =>
+                  setStep(ModuleInteractionMobileStep.SelectModule)
+                }
+              />
+              <Heading as="h5" variant="h5">
+                Select Function
+              </Heading>
+            </DrawerHeader>
+            <DrawerCloseButton color="text.dark" />
+            <DrawerBody p={6}>
+              <Flex h="full" direction="column">
+                {selectedModule && (
+                  <>
+                    <Flex alignItems="center" gap={2} mb={2}>
+                      <Text variant="body2" fontWeight={600} color="text.dark">
+                        Selected Module
+                      </Text>
+                      <Button
+                        onClick={() =>
+                          setStep(ModuleInteractionMobileStep.SelectModule)
+                        }
+                        size="sm"
+                        px={1}
+                        variant="ghost-primary"
+                        leftIcon={<CustomIcon name="swap" boxSize={3} />}
+                      >
+                        Change Module
+                      </Button>
+                    </Flex>
+                    <ModuleCard
+                      selectedAddress={selectedAddress.address}
+                      module={selectedModule}
+                      selectedModule={selectedModule}
+                      readOnly
+                    />
+                  </>
+                )}
+                <SelectFunctionSection
+                  area="main"
+                  module={selectedModule}
+                  handleModuleSelect={handleModuleSelect}
+                  closeModal={onClose}
+                />
+              </Flex>
+            </DrawerBody>
+          </>
+        )}
+      </DrawerContent>
+    </Drawer>
+  );
+};
diff --git a/src/lib/pages/interact/component/drawer/ModuleSelectDrawerTrigger.tsx b/src/lib/pages/interact/component/drawer/ModuleSelectDrawerTrigger.tsx
index adcd4437a..e745e3d8b 100644
--- a/src/lib/pages/interact/component/drawer/ModuleSelectDrawerTrigger.tsx
+++ b/src/lib/pages/interact/component/drawer/ModuleSelectDrawerTrigger.tsx
@@ -29,7 +29,8 @@ export const ModuleSelectDrawerTrigger = ({
 }: ModuleSelectDrawerTriggerProps) => (
   <Button
     {...buttonStyles[triggerVariant]}
-    ml="auto"
+    ml={{ md: "auto" }}
+    size={{ base: "sm", md: "md" }}
     onClick={() => {
       track(AmpEvent.USE_MODULE_SELECTION_DRAWER, {
         label: buttonText,
diff --git a/src/lib/pages/interact/component/drawer/body/DrawerBodyDesktop.tsx b/src/lib/pages/interact/component/drawer/body/DrawerBodyDesktop.tsx
new file mode 100644
index 000000000..6bed48489
--- /dev/null
+++ b/src/lib/pages/interact/component/drawer/body/DrawerBodyDesktop.tsx
@@ -0,0 +1,69 @@
+import { Box, Grid, GridItem } from "@chakra-ui/react";
+import { useState } from "react";
+
+import type {
+  DisplayMode,
+  ModuleSelectFunction,
+  SelectedAddress,
+} from "../types";
+import type { IndexedModule } from "lib/types";
+
+import { SelectFunctionSection } from "./SelectFunctionSection";
+import { SelectModuleSection } from "./SelectModuleSection";
+
+interface ModuleSelectBodyProps {
+  selectedAddress: SelectedAddress;
+  modules: IndexedModule[];
+  mode: DisplayMode;
+  handleModuleSelect: ModuleSelectFunction;
+  closeModal: () => void;
+}
+
+export const DrawerBodyDesktop = ({
+  selectedAddress,
+  mode,
+  modules,
+  handleModuleSelect,
+  closeModal,
+}: ModuleSelectBodyProps) => {
+  const [selectedModule, setSelectedModule] = useState<IndexedModule>();
+
+  return (
+    <Grid
+      templateAreas={`"panel main""button button"`}
+      columnGap={4}
+      rowGap={6}
+      templateColumns="minmax(300px, 20%) 1fr"
+      templateRows="1fr auto"
+      position="relative"
+      overflow="hidden"
+      pointerEvents={mode === "input" ? "none" : undefined}
+    >
+      {mode === "input" && (
+        <Box
+          position="absolute"
+          pointerEvents="none"
+          bgColor="background.overlay"
+          opacity={0.8}
+          w="full"
+          h="full"
+          zIndex="overlay"
+        />
+      )}
+      <GridItem area="panel" overflow="hidden">
+        <SelectModuleSection
+          selectedAddress={selectedAddress}
+          modules={modules}
+          selectedModule={selectedModule}
+          setSelectedModule={setSelectedModule}
+        />
+      </GridItem>
+      <SelectFunctionSection
+        area="main"
+        module={selectedModule}
+        handleModuleSelect={handleModuleSelect}
+        closeModal={closeModal}
+      />
+    </Grid>
+  );
+};
diff --git a/src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx b/src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx
deleted file mode 100644
index 884662338..000000000
--- a/src/lib/pages/interact/component/drawer/body/ModuleSelectMainBody.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { Box, Button, Flex, Grid, GridItem, Text } from "@chakra-ui/react";
-import type { Dispatch, SetStateAction } from "react";
-import { useMemo, useState } from "react";
-
-import { NoImageEmptyState } from "../../common";
-import type {
-  DisplayMode,
-  ModuleSelectFunction,
-  SelectedAddress,
-} from "../types";
-import { AmpEvent, track } from "lib/amplitude";
-import InputWithIcon from "lib/components/InputWithIcon";
-import { CountBadge } from "lib/components/module/CountBadge";
-import { ModuleCard } from "lib/components/module/ModuleCard";
-import type { IndexedModule, Option } from "lib/types";
-
-import { ModuleFunctionBody } from "./ModuleFunctionBody";
-
-interface ModuleSelectBodyProps {
-  selectedAddress: SelectedAddress;
-  modules: IndexedModule[];
-  mode: DisplayMode;
-  handleModuleSelect: ModuleSelectFunction;
-  closeModal: () => void;
-}
-
-const RenderModules = ({
-  selectedAddress,
-  modulesLength,
-  filtered,
-  selectedModule,
-  setSelectedModule,
-}: {
-  selectedAddress: SelectedAddress;
-  modulesLength: number;
-  filtered: IndexedModule[];
-  selectedModule: Option<IndexedModule>;
-  setSelectedModule: Dispatch<SetStateAction<Option<IndexedModule>>>;
-}) => {
-  if (!modulesLength)
-    return <NoImageEmptyState desc="This address does not have any modules." />;
-  return filtered?.length ? (
-    <>
-      {filtered.map((module) => (
-        <ModuleCard
-          key={module.moduleName}
-          selectedAddress={selectedAddress.address}
-          module={module}
-          selectedModule={selectedModule}
-          setSelectedModule={setSelectedModule}
-        />
-      ))}
-    </>
-  ) : (
-    <NoImageEmptyState desc="No matching module found." />
-  );
-};
-
-export const ModuleSelectMainBody = ({
-  selectedAddress,
-  mode,
-  modules,
-  handleModuleSelect,
-  closeModal,
-}: ModuleSelectBodyProps) => {
-  const [keyword, setKeyword] = useState("");
-  const [selectedModule, setSelectedModule] = useState<IndexedModule>();
-
-  const filteredModules = useMemo(
-    () => modules.filter((each) => each.moduleName.includes(keyword)),
-    [modules, keyword]
-  );
-
-  return (
-    <Grid
-      templateAreas={`"panel main""button button"`}
-      columnGap={4}
-      rowGap={6}
-      templateColumns="minmax(300px, 20%) 1fr"
-      templateRows="1fr auto"
-      position="relative"
-      overflow="hidden"
-      pointerEvents={mode === "input" ? "none" : undefined}
-    >
-      {mode === "input" && (
-        <Box
-          position="absolute"
-          pointerEvents="none"
-          bgColor="background.overlay"
-          opacity={0.8}
-          w="full"
-          h="full"
-          zIndex="overlay"
-        />
-      )}
-      <GridItem area="panel" overflow="hidden">
-        <InputWithIcon
-          value={keyword}
-          onChange={(e) => setKeyword(e.target.value)}
-          placeholder="Search with Module Name"
-          size="md"
-          amptrackSection="module-select-drawer-module-search"
-        />
-        <Flex alignItems="center" gap={2} mt={6}>
-          <Text variant="body2" fontWeight={600} color="text.dark">
-            Modules
-          </Text>
-          <CountBadge variant="common" count={modules.length} />
-        </Flex>
-        <Flex
-          // TODO: 100% - element and margin hack, find better way to setup the height
-          h="calc(100% - 40px - 24px - 21px - 8px)"
-          overflowY="scroll"
-          direction="column"
-          gap={2}
-          mt={2}
-        >
-          <RenderModules
-            selectedAddress={selectedAddress}
-            modulesLength={modules.length}
-            filtered={filteredModules}
-            selectedModule={selectedModule}
-            setSelectedModule={setSelectedModule}
-          />
-        </Flex>
-      </GridItem>
-      <ModuleFunctionBody
-        area="main"
-        module={selectedModule}
-        handleModuleSelect={handleModuleSelect}
-        closeModal={closeModal}
-      />
-      <GridItem area="button" justifySelf="flex-end">
-        <Button
-          size="md"
-          onClick={() => {
-            if (selectedModule) {
-              track(AmpEvent.USE_MODULE_SELECTION_MODULE);
-              handleModuleSelect(selectedModule);
-              closeModal();
-            }
-          }}
-          isDisabled={!selectedModule}
-        >
-          Select this module
-        </Button>
-      </GridItem>
-    </Grid>
-  );
-};
diff --git a/src/lib/pages/interact/component/drawer/body/ModuleFunctionBody.tsx b/src/lib/pages/interact/component/drawer/body/SelectFunctionSection.tsx
similarity index 60%
rename from src/lib/pages/interact/component/drawer/body/ModuleFunctionBody.tsx
rename to src/lib/pages/interact/component/drawer/body/SelectFunctionSection.tsx
index 8eae1805a..7d5d83423 100644
--- a/src/lib/pages/interact/component/drawer/body/ModuleFunctionBody.tsx
+++ b/src/lib/pages/interact/component/drawer/body/SelectFunctionSection.tsx
@@ -5,16 +5,14 @@ import { useCallback, useMemo, useState } from "react";
 import { ModuleEmptyState, NoImageEmptyState } from "../../common";
 import type { ModuleSelectFunction } from "../types";
 import { AmpEvent, track } from "lib/amplitude";
+import { useMobile } from "lib/app-provider";
 import InputWithIcon from "lib/components/InputWithIcon";
 import { CountBadge } from "lib/components/module/CountBadge";
 import { FunctionCard } from "lib/components/module/FunctionCard";
 import type { ExposedFunction, IndexedModule, Option } from "lib/types";
 
 const functionGridBaseStyle: FlexProps = {
-  border: "1px solid",
   borderRadius: 8,
-  borderColor: "gray.700",
-  p: 4,
   direction: "column",
 };
 
@@ -51,12 +49,13 @@ interface ModuleFunctionBodyProps extends GridItemProps {
   closeModal: () => void;
 }
 
-export const ModuleFunctionBody = ({
+export const SelectFunctionSection = ({
   module,
   handleModuleSelect,
   closeModal,
   ...gridItemProps
 }: ModuleFunctionBodyProps) => {
+  const isMobile = useMobile();
   const [keyword, setKeyword] = useState("");
   const [filteredView, filteredExecute] = useMemo(
     () => [
@@ -88,15 +87,24 @@ export const ModuleFunctionBody = ({
   return (
     <GridItem
       gap={4}
+      p={{ base: 0, md: 4 }}
+      border={{ base: 0, md: "1px solid" }}
+      borderColor={{ base: "transparent", md: "gray.700" }}
       {...functionGridBaseStyle}
       {...gridItemProps}
       overflow="hidden"
     >
       {module ? (
         <>
-          <Heading as="h6" variant="h6" fontWeight={600}>
-            {module.moduleName}
-          </Heading>
+          {isMobile ? (
+            <Heading as="h6" variant="h6" fontWeight={600} mt={6}>
+              Select View Function
+            </Heading>
+          ) : (
+            <Heading as="h6" variant="h6" fontWeight={600}>
+              {module.moduleName}
+            </Heading>
+          )}
           <InputWithIcon
             value={keyword}
             onChange={(e) => setKeyword(e.target.value)}
@@ -105,17 +113,30 @@ export const ModuleFunctionBody = ({
             my={4}
             amptrackSection="module-select-drawer-function-search"
           />
-          <Flex gap={6} h={maxHeight}>
-            <Flex flex={0.5} gap={3} {...functionGridBaseStyle}>
-              <Flex alignItems="center" gap={1}>
-                <Text variant="body2" fontWeight={600} color="text.dark">
-                  View Functions
-                </Text>
-                <CountBadge
-                  count={module.viewFunctions.length}
-                  variant="view"
-                />
-              </Flex>
+          <Flex
+            gap={6}
+            h={{ base: "auto", md: maxHeight }}
+            minH={{ base: 40, md: "auto" }}
+          >
+            <Flex
+              flex={{ base: 1, md: 0.5 }}
+              p={{ base: 0, md: 4 }}
+              border={{ base: 0, md: "1px solid" }}
+              borderColor={{ base: "transparent", md: "gray.700" }}
+              gap={3}
+              {...functionGridBaseStyle}
+            >
+              {!isMobile && (
+                <Flex alignItems="center" gap={1}>
+                  <Text variant="body2" fontWeight={600} color="text.dark">
+                    View Functions
+                  </Text>
+                  <CountBadge
+                    count={module.viewFunctions.length}
+                    variant="view"
+                  />
+                </Flex>
+              )}
               <Flex direction="column" gap={3} overflow="scroll">
                 <RenderFunctions
                   exposedFnsLength={module.viewFunctions.length}
@@ -124,24 +145,33 @@ export const ModuleFunctionBody = ({
                 />
               </Flex>
             </Flex>
-            <Flex flex={0.5} gap={3} {...functionGridBaseStyle}>
-              <Flex alignItems="center" gap={1}>
-                <Text variant="body2" fontWeight={600} color="text.dark">
-                  Execute Functions
-                </Text>
-                <CountBadge
-                  count={module.executeFunctions.length}
-                  variant="execute"
-                />
+            {!isMobile && (
+              <Flex
+                flex={0.5}
+                gap={3}
+                p={4}
+                border="1px solid"
+                borderColor="gray.700"
+                {...functionGridBaseStyle}
+              >
+                <Flex alignItems="center" gap={1}>
+                  <Text variant="body2" fontWeight={600} color="text.dark">
+                    Execute Functions
+                  </Text>
+                  <CountBadge
+                    count={module.executeFunctions.length}
+                    variant="execute"
+                  />
+                </Flex>
+                <Flex direction="column" gap={3} overflow="scroll">
+                  <RenderFunctions
+                    exposedFnsLength={module.executeFunctions.length}
+                    filtered={filteredExecute}
+                    onFunctionSelect={onFunctionSelect}
+                  />
+                </Flex>
               </Flex>
-              <Flex direction="column" gap={3} overflow="scroll">
-                <RenderFunctions
-                  exposedFnsLength={module.executeFunctions.length}
-                  filtered={filteredExecute}
-                  onFunctionSelect={onFunctionSelect}
-                />
-              </Flex>
-            </Flex>
+            )}
           </Flex>
         </>
       ) : (
diff --git a/src/lib/pages/interact/component/drawer/body/SelectModuleSection.tsx b/src/lib/pages/interact/component/drawer/body/SelectModuleSection.tsx
new file mode 100644
index 000000000..b78dd2744
--- /dev/null
+++ b/src/lib/pages/interact/component/drawer/body/SelectModuleSection.tsx
@@ -0,0 +1,103 @@
+import { Flex, Text } from "@chakra-ui/react";
+import { useMemo, useState } from "react";
+
+import { NoImageEmptyState } from "../../common";
+import type { SelectedAddress } from "../types";
+import InputWithIcon from "lib/components/InputWithIcon";
+import { CountBadge, ModuleCard } from "lib/components/module";
+import type { ModuleInteractionMobileStep } from "lib/pages/interact/types";
+import type { IndexedModule, Option } from "lib/types";
+
+interface SelectModuleSectionProps {
+  selectedAddress: SelectedAddress;
+  modules: IndexedModule[];
+  setStep?: (step: ModuleInteractionMobileStep) => void;
+  selectedModule: Option<IndexedModule>;
+  setSelectedModule: (module: IndexedModule) => void;
+}
+
+interface RenderModulesProps {
+  selectedAddress: SelectedAddress;
+  modulesLength: number;
+  filtered: IndexedModule[];
+  selectedModule: Option<IndexedModule>;
+  setSelectedModule: (module: IndexedModule) => void;
+  setStep?: (step: ModuleInteractionMobileStep) => void;
+}
+
+const RenderModules = ({
+  selectedAddress,
+  modulesLength,
+  filtered,
+  selectedModule,
+  setSelectedModule,
+  setStep,
+}: RenderModulesProps) => {
+  if (!modulesLength)
+    return <NoImageEmptyState desc="This address does not have any modules." />;
+
+  return filtered?.length ? (
+    filtered.map((module) => (
+      <ModuleCard
+        key={module.moduleName}
+        selectedAddress={selectedAddress.address}
+        module={module}
+        selectedModule={selectedModule}
+        setSelectedModule={setSelectedModule}
+        setStep={setStep}
+      />
+    ))
+  ) : (
+    <NoImageEmptyState desc="No matching module found." />
+  );
+};
+
+export const SelectModuleSection = ({
+  selectedAddress,
+  modules,
+  selectedModule,
+  setSelectedModule,
+  setStep,
+}: SelectModuleSectionProps) => {
+  const [keyword, setKeyword] = useState("");
+
+  const filteredModules = useMemo(
+    () => modules.filter((each) => each.moduleName.includes(keyword)),
+    [modules, keyword]
+  );
+
+  return (
+    <>
+      <InputWithIcon
+        value={keyword}
+        onChange={(e) => setKeyword(e.target.value)}
+        placeholder="Search with Module Name"
+        size="md"
+        amptrackSection="module-select-drawer-module-search"
+      />
+      <Flex alignItems="center" gap={2} mt={6}>
+        <Text variant="body2" fontWeight={600} color="text.dark">
+          Modules
+        </Text>
+        <CountBadge variant="common" count={modules.length} />
+      </Flex>
+      <Flex
+        // TODO: 100% - element and margin hack, find better way to setup the height
+        h="calc(100% - 40px - 24px - 21px - 8px)"
+        overflowY="scroll"
+        direction="column"
+        gap={2}
+        mt={2}
+      >
+        <RenderModules
+          selectedAddress={selectedAddress}
+          modulesLength={modules.length}
+          filtered={filteredModules}
+          selectedModule={selectedModule}
+          setSelectedModule={setSelectedModule}
+          setStep={setStep}
+        />
+      </Flex>
+    </>
+  );
+};
diff --git a/src/lib/pages/interact/component/drawer/body/index.ts b/src/lib/pages/interact/component/drawer/body/index.ts
index 6bed2e43e..4d5f565f8 100644
--- a/src/lib/pages/interact/component/drawer/body/index.ts
+++ b/src/lib/pages/interact/component/drawer/body/index.ts
@@ -1 +1,3 @@
-export * from "./ModuleSelectMainBody";
+export * from "./DrawerBodyDesktop";
+export * from "./SelectModuleSection";
+export * from "./SelectFunctionSection";
diff --git a/src/lib/pages/interact/component/drawer/selector/ModuleSelectorDisplay.tsx b/src/lib/pages/interact/component/drawer/selector/ModuleSelectorDisplay.tsx
index 893660f1b..cd5fb3bbc 100644
--- a/src/lib/pages/interact/component/drawer/selector/ModuleSelectorDisplay.tsx
+++ b/src/lib/pages/interact/component/drawer/selector/ModuleSelectorDisplay.tsx
@@ -1,7 +1,8 @@
-import { Button, Flex } from "@chakra-ui/react";
+import { Button, Flex, IconButton, Text } from "@chakra-ui/react";
 import type { Dispatch, SetStateAction } from "react";
 
 import type { DisplayMode, SelectedAddress } from "../types";
+import { useMobile } from "lib/app-provider";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
@@ -14,43 +15,81 @@ interface ModuleSelectorDisplayProps {
 export const ModuleSelectorDisplay = ({
   selectedAddress,
   setMode,
-}: ModuleSelectorDisplayProps) => (
-  <Flex
-    className="selector-display"
-    justifyContent="space-between"
-    w="full"
-    bgColor="gray.800"
-    px={4}
-    py={3}
-    mb={6}
-    borderRadius={8}
-    alignItems="center"
-  >
-    <Flex flex={1}>
-      <LabelText label="Viewing Address">
-        <CopyLink
-          value={selectedAddress.address}
-          type="user_address"
-          showCopyOnHover
-        />
-      </LabelText>
-    </Flex>
-    <Flex flex={1}>
-      <LabelText label="Hex">
-        <CopyLink
-          value={selectedAddress.hex}
-          type="user_address"
-          showCopyOnHover
-        />
-      </LabelText>
-    </Flex>
-    <Button
-      variant="outline-white"
-      size="sm"
-      leftIcon={<CustomIcon name="swap" boxSize={3} />}
-      onClick={() => setMode("input")}
+}: ModuleSelectorDisplayProps) => {
+  const isMobile = useMobile();
+  return (
+    <Flex
+      className="selector-display"
+      justifyContent="space-between"
+      w="full"
+      bgColor="gray.800"
+      px={4}
+      py={3}
+      mb={6}
+      borderRadius={8}
+      alignItems="center"
     >
-      Change Address
-    </Button>
-  </Flex>
-);
+      {isMobile ? (
+        <>
+          <Flex direction="column" gap={1}>
+            <Flex alignItems="center" gap={2}>
+              <Text variant="body2" color="text.dark">
+                VM Address:
+              </Text>
+              <CopyLink
+                value={selectedAddress.address}
+                type="user_address"
+                isTruncate
+              />
+            </Flex>
+            <Flex alignItems="center" gap={2}>
+              <Text variant="body2" color="text.dark">
+                HEX Address:
+              </Text>
+              <CopyLink
+                value={selectedAddress.hex}
+                type="user_address"
+                isTruncate
+              />
+            </Flex>
+          </Flex>
+          <IconButton
+            variant="outline-white"
+            onClick={() => setMode("input")}
+            icon={<CustomIcon name="swap" boxSize={3} />}
+            aria-label="reattach schema"
+          />
+        </>
+      ) : (
+        <>
+          <Flex flex={1}>
+            <LabelText label="Viewing Address">
+              <CopyLink
+                value={selectedAddress.address}
+                type="user_address"
+                showCopyOnHover
+              />
+            </LabelText>
+          </Flex>
+          <Flex flex={1}>
+            <LabelText label="Hex">
+              <CopyLink
+                value={selectedAddress.hex}
+                type="user_address"
+                showCopyOnHover
+              />
+            </LabelText>
+          </Flex>
+          <Button
+            variant="outline-white"
+            size="sm"
+            leftIcon={<CustomIcon name="swap" boxSize={3} />}
+            onClick={() => setMode("input")}
+          >
+            Change Address
+          </Button>
+        </>
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/interact/component/drawer/selector/ModuleSelectorInput.tsx b/src/lib/pages/interact/component/drawer/selector/ModuleSelectorInput.tsx
index a3041982d..a6180debd 100644
--- a/src/lib/pages/interact/component/drawer/selector/ModuleSelectorInput.tsx
+++ b/src/lib/pages/interact/component/drawer/selector/ModuleSelectorInput.tsx
@@ -106,8 +106,9 @@ export const ModuleSelectorInput = ({
       bgColor="gray.800"
       p={4}
       mb={6}
-      gap={4}
+      gap={{ base: 2, md: 4 }}
       borderRadius={8}
+      direction={{ base: "column", md: "row" }}
     >
       <TextInput
         value={keyword}
@@ -120,11 +121,12 @@ export const ModuleSelectorInput = ({
         variant="fixed-floating"
         labelBgColor="gray.800"
         onKeyDown={handleKeydown}
-        autoFocus
       />
-      <Flex gap={2}>
+      <Flex gap={2} w={{ base: "full", md: "auto" }} mt={{ base: 1, md: 0 }}>
         <Button
           variant="primary"
+          w={{ base: "full", md: "auto" }}
+          size={{ base: "sm", md: "md" }}
           onClick={handleSubmit}
           isDisabled={!keyword.length || isFetching}
           isLoading={isFetching}
@@ -133,6 +135,8 @@ export const ModuleSelectorInput = ({
         </Button>
         <Button
           variant="outline-white"
+          w={{ base: "full", md: "auto" }}
+          size={{ base: "sm", md: "md" }}
           onClick={() =>
             selectedAddress.address ? setMode("display") : closeModal()
           }
diff --git a/src/lib/pages/interact/component/form/ViewArea.tsx b/src/lib/pages/interact/component/form/ViewArea.tsx
index 7d53db5af..ae37df4be 100644
--- a/src/lib/pages/interact/component/form/ViewArea.tsx
+++ b/src/lib/pages/interact/component/form/ViewArea.tsx
@@ -76,7 +76,7 @@ export const ViewArea = ({
     Object.values(abiData.typeArgs).some((v) => !v.length) || !!abiErrors.length
   );
   return (
-    <Grid templateColumns="1fr 1fr" gap={6}>
+    <Grid templateColumns={{ base: "1fr", md: "1fr 1fr" }} gap={6} w="full">
       <GridItem>
         <AbiForm
           fn={fn}
diff --git a/src/lib/pages/interact/component/index.ts b/src/lib/pages/interact/component/index.ts
index 0671e8b81..7f1398b64 100644
--- a/src/lib/pages/interact/component/index.ts
+++ b/src/lib/pages/interact/component/index.ts
@@ -3,3 +3,5 @@ export * from "./drawer";
 export * from "./form";
 export * from "./FunctionSelectBody";
 export * from "./FunctionSelectPanel";
+export * from "./InteractionBodySection";
+export * from "./InteractionBodySectionMobile";
diff --git a/src/lib/pages/interact/index.tsx b/src/lib/pages/interact/index.tsx
index f196cf864..3bd8eea0e 100644
--- a/src/lib/pages/interact/index.tsx
+++ b/src/lib/pages/interact/index.tsx
@@ -1,12 +1,17 @@
-import { Box, Button, Flex, Grid, Text, useDisclosure } from "@chakra-ui/react";
+import { Box, Button, Flex, Text, useDisclosure } from "@chakra-ui/react";
 import { useRouter } from "next/router";
+import type { Dispatch, SetStateAction } from "react";
 import { useCallback, useEffect, useState } from "react";
 
 import { AmpEvent, track, trackToModuleInteraction } from "lib/amplitude";
-import { useInternalNavigate, useMoveConfig } from "lib/app-provider";
+import {
+  useInternalNavigate,
+  useMobile,
+  useMoveConfig,
+} from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { LabelText } from "lib/components/LabelText";
-import { ModuleSourceCode } from "lib/components/module";
+import { FunctionCard, ModuleSourceCode } from "lib/components/module";
 import PageContainer from "lib/components/PageContainer";
 import { PageHeader } from "lib/components/PageHeader";
 import { useOpenNewTab } from "lib/hooks";
@@ -18,27 +23,123 @@ import type { Addr, ExposedFunction, IndexedModule } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
 import {
-  FunctionSelectBody,
-  FunctionSelectPanel,
+  InteractionBodySection,
+  InteractionBodySectionMobile,
   InteractionTabs,
   ModuleSelectDrawer,
   ModuleSelectDrawerTrigger,
 } from "./component";
+import { ModuleSelectDrawerMobile } from "./component/drawer/ModuleSelectDrawerMobile";
+import { SelectedFunctionCard } from "./component/SelectedFunctionCard";
+import { ModuleInteractionMobileStep } from "./types";
+
+const FunctionSection = ({
+  selectedFn,
+  setSelectedFn,
+  isZeroState,
+  handleDrawerOpen,
+}: {
+  selectedFn?: ExposedFunction;
+  setSelectedFn?: Dispatch<SetStateAction<ExposedFunction | undefined>>;
+  isZeroState?: boolean;
+  handleDrawerOpen?: (step: ModuleInteractionMobileStep) => void;
+}) => (
+  <Flex
+    borderTop="1px solid"
+    borderTopColor="gray.700"
+    pt={4}
+    mt={2}
+    direction="column"
+    gap={4}
+  >
+    <Flex direction="column" gap={2}>
+      <Flex gap={2} alignItems="center">
+        <Text as="h6" variant="h6" fontWeight={600}>
+          Selected Function
+        </Text>
+        <Button
+          size="sm"
+          variant={isZeroState ? "ghost-gray" : "ghost-primary"}
+          leftIcon={<CustomIcon name="swap" boxSize={3} />}
+          px={1}
+          onClick={() =>
+            handleDrawerOpen?.(ModuleInteractionMobileStep.SelectFunction)
+          }
+        >
+          Change Function
+        </Button>
+      </Flex>
+      {selectedFn && setSelectedFn && (
+        <FunctionCard
+          variant="readonly"
+          exposedFn={selectedFn}
+          isReadOnly
+          onFunctionSelect={() => {
+            setSelectedFn(selectedFn);
+          }}
+        />
+      )}
+    </Flex>
+    {selectedFn ? (
+      <SelectedFunctionCard fn={selectedFn} />
+    ) : (
+      <Flex
+        p={4}
+        borderRadius={8}
+        alignItems="center"
+        justifyContent="center"
+        bg="background.main"
+        color="text.dark"
+      >
+        Please select module first
+      </Flex>
+    )}
+  </Flex>
+);
+
+const ZeroState = ({
+  onOpen,
+  isMobile,
+}: {
+  onOpen: () => void;
+  isMobile: boolean;
+}) => (
+  <Flex
+    direction={{ base: "column", md: "row" }}
+    alignItems={{ md: "center" }}
+    justifyContent={{ md: "space-between" }}
+    w="full"
+    gap={4}
+  >
+    <p>Select a module to interact with ...</p>
+    <ModuleSelectDrawerTrigger triggerVariant="select-module" onOpen={onOpen} />
+    {isMobile && <FunctionSection isZeroState />}
+  </Flex>
+);
 
 export const Interact = () => {
   useMoveConfig({ shouldRedirect: true });
 
   const router = useRouter();
+  const isMobile = useMobile();
   const navigate = useInternalNavigate();
-  const { isOpen, onClose, onOpen } = useDisclosure();
-  const openNewTab = useOpenNewTab();
 
+  const openNewTab = useOpenNewTab();
+  const { isOpen, onClose, onOpen } = useDisclosure();
   const [module, setModule] = useState<IndexedModule>();
   const [selectedType, setSelectedType] = useState<InteractionTabs>(
     InteractionTabs.VIEW_MODULE
   );
   const [selectedFn, setSelectedFn] = useState<ExposedFunction>();
 
+  const [step, setStep] = useState(ModuleInteractionMobileStep.SelectModule);
+  const [selectedModule, setSelectedModule] = useState<IndexedModule>();
+
+  const handleDrawerOpen = (selectedStep: ModuleInteractionMobileStep) => {
+    setStep(selectedStep);
+    onOpen();
+  };
+
   const handleSetSelectedType = (type: string) =>
     setSelectedType(
       type === "execute"
@@ -47,16 +148,16 @@ export const Interact = () => {
     );
 
   const handleModuleSelect = useCallback(
-    (selectedModule: IndexedModule, fn?: ExposedFunction) => {
-      setModule(selectedModule);
+    (selectedModuleInput: IndexedModule, fn?: ExposedFunction) => {
+      setModule(selectedModuleInput);
       setSelectedFn(fn);
       handleSetSelectedType(fn?.is_view ?? true ? "view" : "execute");
 
       navigate({
         pathname: "/interact",
         query: {
-          address: selectedModule.address,
-          moduleName: selectedModule.moduleName,
+          address: selectedModuleInput.address,
+          moduleName: selectedModuleInput.moduleName,
           ...(fn && { functionName: fn.name }),
         },
         options: { shallow: true },
@@ -134,6 +235,14 @@ export const Interact = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.isReady]);
 
+  useEffect(() => {
+    if (!module || !isMobile || !router.isReady) return;
+
+    setSelectedModule(module);
+    handleDrawerOpen(ModuleInteractionMobileStep.SelectFunction);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.isReady, module]);
+
   return (
     <>
       <PageContainer
@@ -142,7 +251,10 @@ export const Interact = () => {
         display="grid"
         gridTemplateRows="auto auto 1fr"
       >
-        <PageHeader title=" Module Interactions" docHref="move/view-execute" />
+        <PageHeader
+          title={isMobile ? "View Module" : "Module Interactions"}
+          docHref="move/view-execute"
+        />
         <Flex
           alignItems="center"
           justifyContent="space-between"
@@ -152,35 +264,62 @@ export const Interact = () => {
           mb={8}
         >
           {module ? (
-            <>
+            <Flex
+              direction={{ base: "column", md: "row" }}
+              alignItems={{ md: "center" }}
+              justifyContent={{ md: "space-between" }}
+              w="full"
+              gap={{ base: 4, md: 0 }}
+            >
               <Flex direction="column" gap={4}>
-                <LabelText label="Module Path" labelWeight={600}>
-                  <Flex align="center" gap={1}>
-                    <Text variant="body1">{module.address.toString()}</Text>
+                <LabelText
+                  label="Module Path"
+                  labelWeight={600}
+                  labelColor="text.main"
+                >
+                  <Flex align="center" gap={1} display="inline">
+                    <Text
+                      variant="body1"
+                      display="inline-flex"
+                      wordBreak="break-all"
+                    >
+                      {module.address}
+                    </Text>
                     <CustomIcon
                       name="chevron-right"
                       color="gray.600"
                       boxSize={3}
                     />
-                    <Text variant="body1" fontWeight={700}>
+                    <Text
+                      variant="body1"
+                      fontWeight={700}
+                      display="inline-flex"
+                    >
                       {module.moduleName}
                     </Text>
                   </Flex>
                 </LabelText>
-                <LabelText label="Friends" labelWeight={600}>
+                <LabelText
+                  label="Friends"
+                  labelWeight={600}
+                  labelColor="text.main"
+                >
                   <Text variant="body2" color="gray.400">
                     {JSON.stringify(module.parsedAbi.friends)}
                   </Text>
                 </LabelText>
               </Flex>
-              <Flex direction="column" gap={2}>
+              <Flex direction={{ base: "row", md: "column" }} gap={2}>
                 <ModuleSelectDrawerTrigger
                   triggerVariant="change-module"
                   buttonText="Change Module"
-                  onOpen={onOpen}
+                  onOpen={() =>
+                    handleDrawerOpen(ModuleInteractionMobileStep.SelectModule)
+                  }
                 />
                 <Button
                   variant="ghost-gray"
+                  size={{ base: "sm", md: "md" }}
                   rightIcon={
                     <CustomIcon name="launch" boxSize={3} color="text.dark" />
                   }
@@ -199,43 +338,53 @@ export const Interact = () => {
                   See Module
                 </Button>
               </Flex>
-            </>
+              {isMobile && selectedFn && (
+                <FunctionSection
+                  selectedFn={selectedFn}
+                  setSelectedFn={setSelectedFn}
+                  handleDrawerOpen={handleDrawerOpen}
+                />
+              )}
+            </Flex>
           ) : (
-            <>
-              <p>Select a module to interact with ...</p>
-              <ModuleSelectDrawerTrigger
-                triggerVariant="select-module"
-                onOpen={onOpen}
-              />
-            </>
+            <ZeroState onOpen={onOpen} isMobile={isMobile} />
+          )}
+          {isMobile ? (
+            <ModuleSelectDrawerMobile
+              isOpen={isOpen}
+              onClose={onClose}
+              hexAddress={module?.address}
+              handleModuleSelect={handleModuleSelect}
+              step={step}
+              setStep={setStep}
+              selectedModule={selectedModule}
+              setSelectedModule={setSelectedModule}
+            />
+          ) : (
+            <ModuleSelectDrawer
+              isOpen={isOpen}
+              onClose={onClose}
+              hexAddress={module?.address}
+              handleModuleSelect={handleModuleSelect}
+            />
           )}
-          <ModuleSelectDrawer
-            isOpen={isOpen}
-            onClose={onClose}
-            hexAddress={module?.address}
-            handleModuleSelect={handleModuleSelect}
-          />
         </Flex>
-        <Grid
-          gap={8}
-          templateColumns="minmax(300px, 20%) 1fr"
-          overflow="hidden"
-        >
-          {/* Left side */}
-          <FunctionSelectPanel
+        {isMobile ? (
+          <InteractionBodySectionMobile
             module={module}
-            tab={selectedType}
-            setTab={setSelectedType}
             selectedFn={selectedFn}
-            setSelectedFn={handleFunctionSelect}
+            openDrawer={onOpen}
           />
-          {/* Right side */}
-          <FunctionSelectBody
+        ) : (
+          <InteractionBodySection
             module={module}
+            selectedType={selectedType}
+            setSelectedType={setSelectedType}
             selectedFn={selectedFn}
-            openDrawer={onOpen}
+            handleFunctionSelect={handleFunctionSelect}
+            onOpen={onOpen}
           />
-        </Grid>
+        )}
       </PageContainer>
       <Box px={{ base: "16px", md: "48px" }}>
         <ModuleSourceCode sourceCode={verificationData?.source} />
diff --git a/src/lib/pages/interact/types.ts b/src/lib/pages/interact/types.ts
new file mode 100644
index 000000000..66ff23033
--- /dev/null
+++ b/src/lib/pages/interact/types.ts
@@ -0,0 +1,4 @@
+export enum ModuleInteractionMobileStep {
+  SelectModule = "select-module",
+  SelectFunction = "select-function",
+}
diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index 931e93275..eca2e2792 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -16,7 +16,7 @@ import { ExplorerLink } from "lib/components/ExplorerLink";
 import { CustomIcon } from "lib/components/icon";
 import { Tooltip } from "lib/components/Tooltip";
 import { UpgradePolicy } from "lib/types";
-import type { HexAddr, IndexedModule } from "lib/types";
+import type { Addr, IndexedModule } from "lib/types";
 import { isHexModuleAddress, isHexWalletAddress, truncate } from "lib/utils";
 
 interface ModuleTopProps {
@@ -31,20 +31,16 @@ const baseTextStyle: TextProps = {
   whiteSpace: "nowrap",
 };
 
-export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
+const ModuleCta = ({
+  moduleData,
+  moduleAddress,
+}: {
+  moduleData: IndexedModule;
+  moduleAddress: Addr;
+}) => {
   const isMobile = useMobile();
   const navigate = useInternalNavigate();
   const { address } = useCurrentChain();
-  const { convertHexWalletAddress, convertHexModuleAddress } =
-    useConvertHexAddress();
-
-  const moduleAddress = useMemo(() => {
-    if (isHexWalletAddress(moduleData.address))
-      return convertHexWalletAddress(moduleData.address as HexAddr);
-    if (isHexModuleAddress(moduleData.address))
-      return convertHexModuleAddress(moduleData.address as HexAddr);
-    return moduleData.address;
-  }, [convertHexModuleAddress, convertHexWalletAddress, moduleData.address]);
 
   const { canRepublish, republishRemark } = useMemo(() => {
     // cannot republish if upgrade policy is IMMUTABLE
@@ -71,6 +67,105 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
     };
   }, [moduleData.upgradePolicy, moduleAddress, address]);
 
+  return (
+    <Flex
+      gap={{ base: 2, md: 3 }}
+      w={{ base: "full", md: "auto" }}
+      justifyContent={{ md: "end" }}
+      mt={{ base: 4, md: 0 }}
+    >
+      <Button
+        variant="outline-white"
+        w={{ base: "full", md: "auto" }}
+        leftIcon={<CustomIcon name="query" mr={0} />}
+        size={{ base: "sm", md: "md" }}
+        onClick={() => {
+          track(AmpEvent.USE_MODULE_DETAILS_MAIN_CTA, {
+            label: "view",
+          });
+          navigate({
+            pathname: "/interact",
+            query: {
+              address: moduleData.address,
+              moduleName: moduleData.moduleName,
+              functionType: "view",
+            },
+          });
+        }}
+      >
+        View
+      </Button>
+      {!isMobile && (
+        <>
+          <Button
+            variant="outline-white"
+            leftIcon={<CustomIcon name="execute" mr={0} />}
+            onClick={() => {
+              track(AmpEvent.USE_MODULE_DETAILS_MAIN_CTA, {
+                label: "execute",
+              });
+              navigate({
+                pathname: "/interact",
+                query: {
+                  address: moduleData.address,
+                  moduleName: moduleData.moduleName,
+                  functionType: "execute",
+                },
+              });
+            }}
+          >
+            Execute
+          </Button>
+          <Tooltip
+            variant="primary-light"
+            label={republishRemark}
+            closeOnClick={false}
+          >
+            <Button
+              isDisabled={!canRepublish}
+              variant="outline-white"
+              leftIcon={<CustomIcon name="migrate" mr={0} />}
+              onClick={() => {
+                track(AmpEvent.USE_MODULE_DETAILS_MAIN_CTA, {
+                  label: "republish",
+                });
+                navigate({
+                  pathname: "/publish-module",
+                });
+              }}
+            >
+              Republish
+            </Button>
+          </Tooltip>
+        </>
+      )}
+      <CopyButton
+        w={{ base: "full", md: "auto" }}
+        size={{ base: "sm", md: "md" }}
+        amptrackSection="[Module Detail CTA] Copy ABI "
+        value={moduleData.abi}
+        variant="outline-primary"
+        buttonText="Copy ABI"
+        iconGap={2}
+      />
+    </Flex>
+  );
+};
+
+export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
+  const isMobile = useMobile();
+
+  const { convertHexWalletAddress, convertHexModuleAddress } =
+    useConvertHexAddress();
+
+  const moduleAddress = useMemo(() => {
+    if (isHexWalletAddress(moduleData.address))
+      return convertHexWalletAddress(moduleData.address);
+    if (isHexModuleAddress(moduleData.address))
+      return convertHexModuleAddress(moduleData.address);
+    return moduleData.address;
+  }, [convertHexModuleAddress, convertHexWalletAddress, moduleData.address]);
+
   return (
     <Flex direction="column">
       <Breadcrumb
@@ -89,9 +184,10 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
       <Flex
         justifyContent="space-between"
         w="full"
-        alignItems="center"
+        alignItems={{ base: "start", md: "center" }}
         mt={5}
         mb={3}
+        direction={{ base: "column", md: "row" }}
       >
         <Flex
           gap={1}
@@ -124,90 +220,9 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
             </Tooltip>
           )}
         </Flex>
-        <Flex
-          gap={{ base: 2, md: 3 }}
-          w={{ base: "full", md: "auto" }}
-          justifyContent="end"
-        >
-          {!isMobile && (
-            <>
-              <Button
-                variant="outline-white"
-                w={{ base: "full", md: "auto" }}
-                leftIcon={<CustomIcon name="query" mr={0} />}
-                size={{ base: "sm", md: "md" }}
-                onClick={() => {
-                  track(AmpEvent.USE_MODULE_DETAILS_MAIN_CTA, {
-                    label: "view",
-                  });
-                  navigate({
-                    pathname: "/interact",
-                    query: {
-                      address: moduleData.address,
-                      moduleName: moduleData.moduleName,
-                      functionType: "view",
-                    },
-                  });
-                }}
-              >
-                View
-              </Button>
-              <Button
-                variant="outline-white"
-                w={{ base: "full", md: "auto" }}
-                leftIcon={<CustomIcon name="execute" mr={0} />}
-                size={{ base: "sm", md: "md" }}
-                onClick={() => {
-                  track(AmpEvent.USE_MODULE_DETAILS_MAIN_CTA, {
-                    label: "execute",
-                  });
-                  navigate({
-                    pathname: "/interact",
-                    query: {
-                      address: moduleData.address,
-                      moduleName: moduleData.moduleName,
-                      functionType: "execute",
-                    },
-                  });
-                }}
-              >
-                Execute
-              </Button>
-              <Tooltip
-                variant="primary-light"
-                label={republishRemark}
-                closeOnClick={false}
-              >
-                <Button
-                  isDisabled={!canRepublish}
-                  variant="outline-white"
-                  w={{ base: "full", md: "auto" }}
-                  leftIcon={<CustomIcon name="migrate" mr={0} />}
-                  size={{ base: "sm", md: "md" }}
-                  onClick={() => {
-                    track(AmpEvent.USE_MODULE_DETAILS_MAIN_CTA, {
-                      label: "republish",
-                    });
-                    navigate({
-                      pathname: "/publish-module",
-                    });
-                  }}
-                >
-                  Republish
-                </Button>
-              </Tooltip>
-            </>
-          )}
-          <CopyButton
-            amptrackSection="[Module Detail CTA] Copy ABI "
-            value={moduleData.abi}
-            variant="outline-primary"
-            size={{ base: "sm", md: "md" }}
-            buttonText="Copy ABI"
-            iconGap={2}
-            w={{ base: "full", md: "auto" }}
-          />
-        </Flex>
+        {!isMobile && (
+          <ModuleCta moduleData={moduleData} moduleAddress={moduleAddress} />
+        )}
       </Flex>
       <Flex direction="column" textOverflow="ellipsis" gap={{ base: 2, md: 1 }}>
         <Flex
@@ -272,6 +287,9 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
           </Flex>
         </Flex>
       </Flex>
+      {isMobile && (
+        <ModuleCta moduleData={moduleData} moduleAddress={moduleAddress} />
+      )}
     </Flex>
   );
 };