diff --git a/CHANGELOG.md b/CHANGELOG.md
index 133fd727a..d212d2aa1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -45,6 +45,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#645](https://github.com/alleslabs/celatone-frontend/pull/645) Add search for resource in account detail
+- [#634](https://github.com/alleslabs/celatone-frontend/pull/634) api v1 - move pool info
 - [#657](https://github.com/alleslabs/celatone-frontend/pull/657) api v1 - overview stats
 - [#650](https://github.com/alleslabs/celatone-frontend/pull/650) api v1 - account info on account detail page
 - [#655](https://github.com/alleslabs/celatone-frontend/pull/655) Change title of publish new module page
diff --git a/src/lib/app-provider/hooks/useBaseApiRoute.ts b/src/lib/app-provider/hooks/useBaseApiRoute.ts
index dfb270ac2..63ca82a60 100644
--- a/src/lib/app-provider/hooks/useBaseApiRoute.ts
+++ b/src/lib/app-provider/hooks/useBaseApiRoute.ts
@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 import { useCelatoneApp } from "../contexts";
 import { CELATONE_API_OVERRIDE as api } from "env";
 
diff --git a/src/lib/components/resource/ResourceDetailCard.tsx b/src/lib/components/resource/ResourceDetailCard.tsx
index 4c6cba888..ea6d3bb30 100644
--- a/src/lib/components/resource/ResourceDetailCard.tsx
+++ b/src/lib/components/resource/ResourceDetailCard.tsx
@@ -91,8 +91,17 @@ export const ResourceDetailCard = ({
       >
         <Flex direction="column" gap={3}>
           {formattedArray.map((item) => (
-            <Flex key={item.key} gap={4}>
-              <Text variant="body2" color="text.dark" minW={40}>
+            <Flex
+              key={item.key}
+              gap={{ base: 1, md: 4 }}
+              direction={{ base: "column", md: "row" }}
+            >
+              <Text
+                variant="body2"
+                color="text.dark"
+                fontWeight="600"
+                minW={40}
+              >
                 {item.key}
               </Text>
               {typeof item.value === "object" ? (
diff --git a/src/lib/components/state/EmptyState.tsx b/src/lib/components/state/EmptyState.tsx
index 83de71e6b..1c4096281 100644
--- a/src/lib/components/state/EmptyState.tsx
+++ b/src/lib/components/state/EmptyState.tsx
@@ -27,29 +27,31 @@ export const EmptyState = ({
   textVariant = "body1",
 }: EmptyStateProps) => (
   <Flex
+    alignItems="center"
+    flexDir="column"
+    gap={4}
+    width="full"
     py={py}
     my={my}
     direction="column"
     borderY={withBorder ? "1px solid" : undefined}
     borderColor="gray.700"
   >
-    <Flex alignItems="center" flexDir="column" gap={4} width="full">
-      {imageVariant && (
-        <StateImage imageVariant={imageVariant} imageWidth={imageWidth} />
-      )}
-      {heading && (
-        <Heading as="h5" variant="h5">
-          {heading}
-        </Heading>
-      )}
-      <Text
-        color="text.dark"
-        textAlign="center"
-        whiteSpace="pre-wrap"
-        variant={textVariant}
-      >
-        {message}
-      </Text>
-    </Flex>
+    {imageVariant && (
+      <StateImage imageVariant={imageVariant} imageWidth={imageWidth} />
+    )}
+    {heading && (
+      <Heading as="h5" variant="h5">
+        {heading}
+      </Heading>
+    )}
+    <Text
+      color="text.dark"
+      textAlign="center"
+      whiteSpace="pre-wrap"
+      variant={textVariant}
+    >
+      {message}
+    </Text>
   </Flex>
 );
diff --git a/src/lib/components/table/MobileTitle.tsx b/src/lib/components/table/MobileTitle.tsx
index 0526769d9..f7c0e6ddc 100644
--- a/src/lib/components/table/MobileTitle.tsx
+++ b/src/lib/components/table/MobileTitle.tsx
@@ -8,6 +8,7 @@ import { TableTitle } from "./TableTitle";
 interface MobileTitleProps {
   title: string;
   count: Option<number>;
+  showCount?: boolean;
   onViewMore?: () => void;
 }
 const cardProps = {
@@ -17,14 +18,19 @@ const cardProps = {
   borderRadius: "8px",
 };
 
-export const MobileTitle = ({ onViewMore, title, count }: MobileTitleProps) => (
+export const MobileTitle = ({
+  title,
+  count,
+  showCount = true,
+  onViewMore,
+}: MobileTitleProps) => (
   <Flex
     style={cardProps}
     onClick={!count ? undefined : onViewMore}
     opacity={!count ? 0.5 : 1}
     bg="gray.900"
   >
-    <TableTitle title={title} count={count} mb={0} />
+    <TableTitle title={title} count={count} showCount={showCount} mb={0} />
     <CustomIcon name="chevron-right" color="gray.600" />
   </Flex>
 );
diff --git a/src/lib/components/table/TableTitle.tsx b/src/lib/components/table/TableTitle.tsx
index de64e5c33..bf9e02715 100644
--- a/src/lib/components/table/TableTitle.tsx
+++ b/src/lib/components/table/TableTitle.tsx
@@ -1,17 +1,17 @@
 import type { BoxProps } from "@chakra-ui/react";
 import { Badge, Box, Flex, Heading, Text } from "@chakra-ui/react";
 
-import type { Option } from "lib/types";
-
 interface TableTitleProps extends BoxProps {
   title: string;
-  count: Option<number>;
+  count?: number;
+  showCount?: boolean;
   helperText?: string;
 }
 
 export const TableTitle = ({
   title,
   count,
+  showCount = true,
   helperText,
   mb = 6,
   ...props
@@ -21,9 +21,11 @@ export const TableTitle = ({
       <Heading as="h6" variant="h6">
         {title}
       </Heading>
-      <Badge textColor={count ? "text.main" : "text.disabled"}>
-        {count ?? "N/A"}
-      </Badge>
+      {showCount && (
+        <Badge textColor={count ? "text.main" : "text.disabled"}>
+          {count ?? "N/A"}
+        </Badge>
+      )}
     </Flex>
     <Text variant="body2" textColor="text.dark" fontWeight={600}>
       {helperText}
diff --git a/src/lib/pages/account-details/components/ErrorFetching.tsx b/src/lib/pages/account-details/components/ErrorFetching.tsx
index ce975f05e..ccaf1a3ef 100644
--- a/src/lib/pages/account-details/components/ErrorFetching.tsx
+++ b/src/lib/pages/account-details/components/ErrorFetching.tsx
@@ -1,8 +1,10 @@
+import { Flex } from "@chakra-ui/react";
+
 import { CustomIcon } from "lib/components/icon";
 
 export const ErrorFetching = () => (
-  <>
+  <Flex>
     <CustomIcon name="alert-circle-solid" color="gray.600" boxSize={4} mr={3} />
     <p>Error fetching data. Please try again later.</p>
-  </>
+  </Flex>
 );
diff --git a/src/lib/pages/account-details/components/modules/ModuleLists.tsx b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
index 60f60b511..22fc6a142 100644
--- a/src/lib/pages/account-details/components/modules/ModuleLists.tsx
+++ b/src/lib/pages/account-details/components/modules/ModuleLists.tsx
@@ -28,7 +28,7 @@ export const ModuleLists = ({
   const isMobile = useMobile();
   const isMobileOverview = isMobile && !!onViewMore;
   return (
-    <Box mt={{ base: 4, md: 8 }}>
+    <Box mt={{ base: 4, md: 16 }}>
       {isMobileOverview ? (
         <MobileTitle
           title="Modules"
diff --git a/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx b/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
new file mode 100644
index 000000000..5cb252a18
--- /dev/null
+++ b/src/lib/pages/account-details/components/resources/ResourceLeftPanel.tsx
@@ -0,0 +1,156 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Flex,
+  Text,
+} from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { useCallback, useMemo, useState } from "react";
+
+import { useInternalNavigate } from "lib/app-provider";
+import InputWithIcon from "lib/components/InputWithIcon";
+import { ResourceCard } from "lib/components/resource";
+import type {
+  HumanAddr,
+  ResourceGroup,
+  ResourceGroupByAccount,
+} from "lib/types";
+import { getFirstQueryParam, truncate } from "lib/utils";
+
+interface ResourceSectionBodyProps {
+  address: HumanAddr;
+  resourcesByOwner: ResourceGroupByAccount[];
+}
+
+export const ResourceLeftPanel = ({
+  address,
+  resourcesByOwner,
+}: ResourceSectionBodyProps) => {
+  const router = useRouter();
+  const navigate = useInternalNavigate();
+  const [keyword, setKeyword] = useState("");
+
+  const selectedAccountParam = getFirstQueryParam(
+    router.query.account,
+    resourcesByOwner?.[0]?.owner
+  );
+  const selectedNameParam = getFirstQueryParam(
+    router.query.selected,
+    resourcesByOwner?.[0]?.resources[0]?.group
+  );
+
+  const handleSelectResource = useCallback(
+    (
+      account: ResourceGroupByAccount["owner"],
+      resource: ResourceGroup["group"]
+    ) => {
+      if (account === selectedAccountParam && resource === selectedNameParam)
+        return;
+      navigate({
+        pathname: `/accounts/[accountAddress]/[tab]`,
+        query: {
+          accountAddress: address,
+          tab: "resources",
+          account,
+          selected: resource,
+        },
+        replace: true,
+        options: {
+          shallow: true,
+        },
+      });
+    },
+    [selectedNameParam, selectedAccountParam, address, navigate]
+  );
+
+  const filteredResourcesByOwner = useMemo(() => {
+    if (!keyword) return resourcesByOwner;
+
+    return resourcesByOwner?.map((each) => ({
+      ...each,
+      resources: each.resources.filter((resource) =>
+        resource.group
+          .toLowerCase()
+          .includes(keyword.trim().toLocaleLowerCase())
+      ),
+    }));
+  }, [keyword, resourcesByOwner]);
+
+  const selectedIndex = filteredResourcesByOwner.findIndex(
+    (item) => item.owner === selectedAccountParam
+  );
+  const selectedGroup = filteredResourcesByOwner[selectedIndex];
+  const selectedResources = selectedGroup?.resources.find(
+    (item) => item.group === selectedNameParam
+  );
+
+  return (
+    <Flex
+      minW={{ base: "full", md: 80 }}
+      direction="column"
+      pb={{ base: 4, md: 0 }}
+      mb={{ base: 4, md: 0 }}
+      borderBottom={{ base: "1px solid", md: "none" }}
+      borderColor={{ base: "gray.700", md: "transparent" }}
+    >
+      <InputWithIcon
+        placeholder="Search with module name..."
+        value={keyword}
+        onChange={(e) => setKeyword(e.target.value)}
+        action="execute-message-search"
+      />
+      <Accordion
+        allowMultiple
+        defaultIndex={[selectedIndex]}
+        width="full"
+        mt={4}
+      >
+        {filteredResourcesByOwner.map((item) => (
+          <AccordionItem mb={4} key={item.owner}>
+            <AccordionButton>
+              <Flex p={4} justifyContent="space-between" w="full">
+                <Text variant="body1" fontWeight={600}>
+                  {truncate(item.owner)}
+                </Text>
+                <AccordionIcon color="gray.600" />
+              </Flex>
+            </AccordionButton>
+            <AccordionPanel>
+              {item.resources.length ? (
+                <Flex direction="column" gap={3}>
+                  {Object.values(item.resources).map((subitem) => (
+                    <ResourceCard
+                      key={subitem.displayName}
+                      name={subitem.group}
+                      amount={subitem.items.length}
+                      isSelected={selectedResources?.group === subitem.group}
+                      onClick={() =>
+                        handleSelectResource(item.owner, subitem.group)
+                      }
+                      hasBorder
+                    />
+                  ))}
+                </Flex>
+              ) : (
+                <Text
+                  variant="body2"
+                  color="text.dark"
+                  textAlign="center"
+                  p={4}
+                  border="1px solid"
+                  borderRadius="8px"
+                  borderColor="gray.700"
+                >
+                  No matching resource found
+                </Text>
+              )}
+            </AccordionPanel>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </Flex>
+  );
+};
diff --git a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
index df631caee..11eb9d18a 100644
--- a/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceOverview.tsx
@@ -36,7 +36,7 @@ export const ResourceOverview = ({
           <TableTitle
             title="Resources"
             helperText="Resources stored in this account"
-            count={totalCount}
+            showCount={false}
           />
           <ResourceOverviewBody
             address={address}
diff --git a/src/lib/pages/account-details/components/resources/ResourceSection.tsx b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
index 76c5b2cf0..31e52d928 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSection.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSection.tsx
@@ -7,12 +7,14 @@ import { ResourceSectionBody } from "./ResourceSectionBody";
 
 interface ResourceSectionProps {
   address: HumanAddr;
+  totalCount: Option<number>;
   resourcesByOwner: Option<ResourceGroupByAccount[]>;
   isLoading: boolean;
 }
 
 export const ResourceSection = ({
   address,
+  totalCount,
   resourcesByOwner,
   isLoading,
 }: ResourceSectionProps) => (
@@ -20,13 +22,9 @@ export const ResourceSection = ({
     <TableTitle
       helperText="Resources stored in this account"
       title="Resources"
-      count={resourcesByOwner?.length}
+      count={totalCount}
     />
-    <Flex
-      gap={6}
-      flexDirection={{ base: "column", md: "row" }}
-      position="relative"
-    >
+    <Flex gap={6} flexDirection={{ base: "column", md: "row" }}>
       <ResourceSectionBody
         address={address}
         resourcesByOwner={resourcesByOwner}
diff --git a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
index 2214cec20..578cfb4d3 100644
--- a/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
+++ b/src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx
@@ -1,33 +1,17 @@
-import {
-  Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Badge,
-  Button,
-  Flex,
-  Heading,
-  Text,
-} from "@chakra-ui/react";
-import { truncate } from "lodash";
+import { Accordion, Badge, Box, Button, Flex, Heading } from "@chakra-ui/react";
 import { useRouter } from "next/router";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { ErrorFetching } from "../ErrorFetching";
-import { useInternalNavigate } from "lib/app-provider";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
-import { ResourceCard, ResourceDetailCard } from "lib/components/resource";
+import { ResourceDetailCard } from "lib/components/resource";
 import { EmptyState } from "lib/components/state";
-import type {
-  HumanAddr,
-  Option,
-  ResourceGroup,
-  ResourceGroupByAccount,
-} from "lib/types";
+import type { HumanAddr, Option, ResourceGroupByAccount } from "lib/types";
 import { getFirstQueryParam } from "lib/utils";
 
+import { ResourceLeftPanel } from "./ResourceLeftPanel";
+
 interface ResourceSectionBodyProps {
   address: HumanAddr;
   resourcesByOwner: Option<ResourceGroupByAccount[]>;
@@ -40,145 +24,87 @@ export const ResourceSectionBody = ({
   isLoading,
 }: ResourceSectionBodyProps) => {
   const router = useRouter();
-  const navigate = useInternalNavigate();
   const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
 
-  const selectedAccountParam = getFirstQueryParam(router.query.account);
-  const selectedNameParam = getFirstQueryParam(router.query.selected);
-
-  const handleSelectResource = useCallback(
-    (
-      account: ResourceGroupByAccount["owner"],
-      resource: ResourceGroup["group"]
-    ) => {
-      if (account === selectedAccountParam && resource === selectedNameParam)
-        return;
-      navigate({
-        pathname: `/accounts/[accountAddress]/[tab]`,
-        query: {
-          accountAddress: address,
-          tab: "resources",
-          account,
-          selected: resource,
-        },
-        replace: true,
-        options: {
-          shallow: true,
-        },
-      });
-    },
-    [selectedNameParam, selectedAccountParam, address, navigate]
+  const selectedAccountParam = getFirstQueryParam(
+    router.query.account,
+    resourcesByOwner?.[0]?.owner
+  );
+  const selectedNameParam = getFirstQueryParam(
+    router.query.selected,
+    resourcesByOwner?.[0]?.resources[0]?.group
   );
 
-  const updateExpandedIndexes = (indexes: number[]) =>
-    setExpandedIndexes(indexes);
-
+  const selectedResource = resourcesByOwner
+    ?.find((resource) => resource.owner === selectedAccountParam)
+    ?.resources?.find((resource) => resource.group === selectedNameParam);
   useEffect(() => {
-    const resourcesLength = resourcesByOwner?.find(
-      (resource) => resource.owner === selectedAccountParam
-    )?.resources?.[selectedNameParam].items.length;
-
-    if (resourcesLength === 1) {
-      setExpandedIndexes([0]);
-    } else {
-      setExpandedIndexes([]);
-    }
-  }, [resourcesByOwner, selectedNameParam, selectedAccountParam]);
+    setExpandedIndexes(selectedResource?.items.length === 1 ? [0] : []);
+  }, [resourcesByOwner, selectedResource]);
 
   if (isLoading) return <Loading />;
   if (!resourcesByOwner) return <ErrorFetching />;
   if (!resourcesByOwner.length)
     return <EmptyState imageVariant="empty" message="No resources found" />;
 
-  const selectedIndex = !selectedAccountParam
-    ? 0
-    : resourcesByOwner.findIndex((item) => item.owner === selectedAccountParam);
-  const selectedGroup = resourcesByOwner[selectedIndex];
-  const selectedGroupArray = Object.values(selectedGroup.resources);
-  const selectedResources =
-    selectedGroupArray.find((item) => item.group === selectedNameParam) ??
-    selectedGroupArray[0];
   return (
     <>
-      <Flex minW={{ base: "full", md: 80 }}>
-        <Accordion allowMultiple defaultIndex={[selectedIndex]} width="full">
-          {resourcesByOwner.map((item) => (
-            <AccordionItem mb={4} key={item.owner}>
-              <AccordionButton>
-                <Flex p={4} justifyContent="space-between" w="full">
-                  <Text variant="body1" fontWeight={600}>
-                    {truncate(item.owner)}
-                  </Text>
-                  <AccordionIcon color="gray.600" />
-                </Flex>
-              </AccordionButton>
-              <AccordionPanel>
-                <Flex direction="column" gap={3} maxW={80}>
-                  {Object.values(item.resources).map((subitem) => (
-                    <ResourceCard
-                      key={subitem.group}
-                      name={subitem.group}
-                      amount={subitem.items.length}
-                      isSelected={selectedResources.group === subitem.group}
-                      onClick={() =>
-                        handleSelectResource(item.owner, subitem.group)
-                      }
-                      hasBorder
-                    />
-                  ))}
-                </Flex>
-              </AccordionPanel>
-            </AccordionItem>
-          ))}
-        </Accordion>
-      </Flex>
-      <Flex direction="column" w="full">
-        <Flex
-          justifyContent="space-between"
-          alignItems="center"
-          pb={6}
-          gap={12}
-        >
-          <Flex alignItems="center">
-            <Heading as="h6" variant="h6" wordBreak="break-word">
-              {selectedGroup.owner}::{selectedResources.group}
-            </Heading>
-            <Badge variant="primary" ml={2}>
-              {selectedResources.items.length}
-            </Badge>
+      <ResourceLeftPanel
+        address={address}
+        resourcesByOwner={resourcesByOwner}
+      />
+      {selectedResource && (
+        <Box w="full">
+          <Flex
+            justifyContent="space-between"
+            alignItems="center"
+            pb={6}
+            gap={12}
+          >
+            <Flex alignItems="center">
+              <Heading as="h6" variant="h6" wordBreak="break-word">
+                {selectedResource.account}::{selectedResource.group}
+              </Heading>
+              <Badge variant="primary" ml={2}>
+                {selectedResource.items.length}
+              </Badge>
+            </Flex>
+            <Button
+              variant="outline-primary"
+              minW={32}
+              size="sm"
+              rightIcon={
+                <CustomIcon
+                  name={expandedIndexes.length ? "chevron-up" : "chevron-down"}
+                  boxSize={3}
+                />
+              }
+              onClick={() => {
+                setExpandedIndexes((prev) =>
+                  !prev.length
+                    ? Array.from(Array(selectedResource.items.length).keys())
+                    : []
+                );
+              }}
+            >
+              {expandedIndexes.length ? "Collapse All" : "Expand All"}
+            </Button>
           </Flex>
-          <Button
-            variant="outline-primary"
-            minW={28}
-            size="sm"
-            rightIcon={
-              <CustomIcon
-                name={expandedIndexes.length ? "chevron-up" : "chevron-down"}
-                boxSize={3}
-              />
-            }
-            onClick={() => {
-              setExpandedIndexes((prev) =>
-                !prev.length
-                  ? Array.from(Array(selectedResources.items.length).keys())
-                  : []
-              );
-            }}
+          <Accordion
+            allowMultiple
+            width="full"
+            index={expandedIndexes}
+            onChange={(indexes: number[]) => setExpandedIndexes(indexes)}
           >
-            {expandedIndexes.length ? "Collapse All" : "Expand All"}
-          </Button>
-        </Flex>
-        <Accordion
-          allowMultiple
-          width="full"
-          index={expandedIndexes}
-          onChange={updateExpandedIndexes}
-        >
-          {selectedResources.items.map((item) => (
-            <ResourceDetailCard resourceData={item} key={item.structTag} />
-          ))}
-        </Accordion>
-      </Flex>
+            {selectedResource.items.map((item) => (
+              <ResourceDetailCard
+                key={`${item.structTag}`}
+                resourceData={item}
+              />
+            ))}
+          </Accordion>
+        </Box>
+      )}
     </>
   );
 };
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 3cf8054f4..189dff3f6 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -247,7 +247,7 @@ const AccountDetailsBody = ({
             <Flex
               direction={{ base: "column", md: "row" }}
               gap={{ base: 4, md: 6 }}
-              my={{ base: 0, md: 8 }}
+              mt={{ base: 0, md: 8 }}
             >
               {accountInfo?.publicInfo?.description && (
                 <Flex
@@ -274,7 +274,7 @@ const AccountDetailsBody = ({
             </Flex>
             <Flex
               borderBottom={{ base: "0px", md: "1px solid" }}
-              borderBottomColor="gray.700"
+              borderBottomColor={{ base: "transparent", md: "gray.700" }}
             >
               <AssetsSection
                 address={accountAddress}
@@ -385,6 +385,7 @@ const AccountDetailsBody = ({
           <TabPanel p={0}>
             <ResourceSection
               address={accountAddress}
+              totalCount={resourcesData?.totalCount}
               resourcesByOwner={resourcesData?.groupedByOwner}
               isLoading={isResourceLoading}
             />
diff --git a/src/lib/pages/module-details/components/ModuleTop.tsx b/src/lib/pages/module-details/components/ModuleTop.tsx
index 86eefb436..45e8cef99 100644
--- a/src/lib/pages/module-details/components/ModuleTop.tsx
+++ b/src/lib/pages/module-details/components/ModuleTop.tsx
@@ -146,7 +146,7 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
             w={{ base: "full", md: "auto" }}
           >
             <Button
-              variant="outline-primary"
+              variant="outline-white"
               w={{ base: "full", md: "auto" }}
               leftIcon={<CustomIcon name="query" mr={0} />}
               size={{ base: "sm", md: "md" }}
@@ -165,7 +165,7 @@ export const ModuleTop = ({ moduleData, isVerified }: ModuleTopProps) => {
               View
             </Button>
             <Button
-              variant="outline-primary"
+              variant="outline-white"
               w={{ base: "full", md: "auto" }}
               leftIcon={<CustomIcon name="execute" mr={0} />}
               size={{ base: "sm", md: "md" }}
diff --git a/src/lib/services/move/resourceService.ts b/src/lib/services/move/resourceService.ts
index 1706f1e80..e7b3e5c93 100644
--- a/src/lib/services/move/resourceService.ts
+++ b/src/lib/services/move/resourceService.ts
@@ -30,25 +30,24 @@ export const useAccountResources = ({
       >((acc, resource) => {
         const [ownerName, groupName] = resource.structTag.split("::");
 
-        const ownerResources = acc[ownerName]?.resources ?? {};
-        const groupResources = ownerResources[groupName] ?? {};
-        const items = groupResources?.items ?? [];
-
-        items.push(resource);
+        const ownerResources = acc[ownerName]?.resources ?? [];
+        const groupResourcesIndex = ownerResources.findIndex(
+          (ownerResource) => ownerResource.group === groupName
+        );
+        if (groupResourcesIndex === -1)
+          ownerResources.push({
+            group: groupName,
+            account: ownerName as MoveAccountAddr,
+            displayName: `${truncate(ownerName)}::${groupName}`,
+            items: [resource],
+          });
+        else ownerResources[groupResourcesIndex].items.push(resource);
 
         return {
           ...acc,
           [ownerName]: {
             owner: ownerName as MoveAccountAddr,
-            resources: {
-              ...ownerResources,
-              [groupName]: {
-                group: groupName,
-                account: ownerName as MoveAccountAddr,
-                displayName: `${truncate(ownerName)}::${groupName}`,
-                items,
-              },
-            },
+            resources: ownerResources,
           },
         };
       }, {});
diff --git a/src/lib/styles/theme/components/button.ts b/src/lib/styles/theme/components/button.ts
index 46d645110..65916ff12 100644
--- a/src/lib/styles/theme/components/button.ts
+++ b/src/lib/styles/theme/components/button.ts
@@ -3,7 +3,6 @@ import { defineStyle } from "@chakra-ui/react";
 
 import { CURR_THEME } from "env";
 
-const gray100 = "gray.100";
 const gray400 = "gray.400";
 const gray500 = "gray.500";
 const gray600 = "gray.600";
@@ -204,7 +203,7 @@ export const Button: ComponentStyleConfig = {
     "outline-white": generateStyle({
       basic: {
         border: borderDefault,
-        borderColor: gray100,
+        borderColor: gray400,
         color: "text.main",
         "> svg": {
           color: "text.main",
@@ -212,13 +211,13 @@ export const Button: ComponentStyleConfig = {
       },
       disabled: {
         border: borderDefault,
-        borderColor: gray500,
-        color: gray500,
+        borderColor: gray600,
+        color: gray600,
         "> svg": {
-          color: gray500,
+          color: gray600,
         },
       },
-      hoverBg: gray400,
+      hoverBg: gray700,
       activeBg: "transparent",
     }),
     "outline-accent": generateStyle({
diff --git a/src/lib/types/move/resource.ts b/src/lib/types/move/resource.ts
index 825d3ef3f..8f328531e 100644
--- a/src/lib/types/move/resource.ts
+++ b/src/lib/types/move/resource.ts
@@ -25,5 +25,5 @@ export interface ResourceGroup {
 
 export interface ResourceGroupByAccount {
   owner: MoveAccountAddr;
-  resources: Record<string, ResourceGroup>;
+  resources: ResourceGroup[];
 }