diff --git a/CHANGELOG.md b/CHANGELOG.md
index 85623c166..2cd827c8f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#725](https://github.com/alleslabs/celatone-frontend/pull/725) Adjust unsupported asset display in account and contract detail
 - [#728](https://github.com/alleslabs/celatone-frontend/pull/728) Support tx events for cosmos sdk 0.50
 - [#729](https://github.com/alleslabs/celatone-frontend/pull/729) Add missing title for block transactions
 - [#726](https://github.com/alleslabs/celatone-frontend/pull/726) Add missing title for instantiate permission and adjust contract menu in nav bar
diff --git a/src/lib/components/CustomTab.tsx b/src/lib/components/CustomTab.tsx
index 1ebfbbdde..3c7666d87 100644
--- a/src/lib/components/CustomTab.tsx
+++ b/src/lib/components/CustomTab.tsx
@@ -33,6 +33,7 @@ export const CustomTab = ({
       lineHeight="24px"
       letterSpacing="0.4px"
       variant="ghost-gray"
+      minW="fit-content"
       mb={0}
       sx={{
         "&[aria-selected=true]": {
diff --git a/src/lib/components/asset/AssetSectionOverview.tsx b/src/lib/components/asset/AssetSectionOverview.tsx
new file mode 100644
index 000000000..ce8a8f469
--- /dev/null
+++ b/src/lib/components/asset/AssetSectionOverview.tsx
@@ -0,0 +1,84 @@
+import { Flex, Grid, GridItem, Text } from "@chakra-ui/react";
+
+import { ViewMore } from "../table";
+import type { Option, TokenWithValue, USD } from "lib/types";
+
+import { SupportedAssetSectionContent } from "./SupportedAssetSectionContent";
+import { SupportedAssetTitle } from "./SupportedAssetTitle";
+import { UnsupportedAssetSectionContent } from "./UnsupportedAssetSectionContent";
+import { UnsupportedAssetTitle } from "./UnsupportedAssetTitle";
+
+const MAX_SUPPORTED_ASSETS_SHOW = 6;
+const MAX_UNSUPPORTED_ASSETS_SHOW = 3;
+
+interface AssetSectionOverviewProps {
+  isAccount: boolean;
+  supportedAssets: TokenWithValue[];
+  totalSupportedAssetsValue: Option<USD<Big>>;
+  unsupportedAssets: TokenWithValue[];
+  onViewMore: () => void;
+}
+
+export const AssetSectionOverview = ({
+  isAccount,
+  supportedAssets,
+  totalSupportedAssetsValue,
+  unsupportedAssets,
+  onViewMore,
+}: AssetSectionOverviewProps) => {
+  if (!supportedAssets.length && !unsupportedAssets.length)
+    return (
+      <Text variant="body2" color="text.dark">
+        This {isAccount ? "address" : "contract"} does not hold any assets
+      </Text>
+    );
+
+  return (
+    <Grid gridTemplateColumns={{ base: "1fr", xl: "2fr 1fr" }} gridGap={4}>
+      <GridItem border="1px solid" borderColor="gray.700" borderRadius="8px">
+        <Flex direction="column" justifyContent="space-between" h="full">
+          <Flex direction="column">
+            <SupportedAssetTitle
+              supportedAssets={supportedAssets}
+              totalSupportedAssetsValue={totalSupportedAssetsValue}
+            />
+            <SupportedAssetSectionContent
+              isAccount={isAccount}
+              supportedAssets={supportedAssets.slice(
+                0,
+                MAX_SUPPORTED_ASSETS_SHOW
+              )}
+              onViewMore={onViewMore}
+            />
+          </Flex>
+          {onViewMore && supportedAssets.length > MAX_SUPPORTED_ASSETS_SHOW && (
+            <ViewMore
+              onClick={onViewMore}
+              borderRadius="0px 0px 8px 8px"
+              minH="48px"
+            />
+          )}
+        </Flex>
+      </GridItem>
+      <GridItem border="1px solid" borderColor="gray.700" borderRadius="8px">
+        <UnsupportedAssetTitle unsupportedAssets={unsupportedAssets} />
+        <UnsupportedAssetSectionContent
+          isAccount={isAccount}
+          unsupportedAssets={unsupportedAssets.slice(
+            0,
+            MAX_UNSUPPORTED_ASSETS_SHOW
+          )}
+          onViewMore={onViewMore}
+        />
+        {onViewMore &&
+          unsupportedAssets.length > MAX_UNSUPPORTED_ASSETS_SHOW && (
+            <ViewMore
+              onClick={onViewMore}
+              borderRadius="0px 0px 8px 8px"
+              minH="48px"
+            />
+          )}
+      </GridItem>
+    </Grid>
+  );
+};
diff --git a/src/lib/components/asset/SupportedAssetSectionContent.tsx b/src/lib/components/asset/SupportedAssetSectionContent.tsx
new file mode 100644
index 000000000..c7e4ea0bb
--- /dev/null
+++ b/src/lib/components/asset/SupportedAssetSectionContent.tsx
@@ -0,0 +1,47 @@
+import { Flex, Grid, Text } from "@chakra-ui/react";
+
+import { TokenCard } from "lib/components/token";
+import type { TokenWithValue } from "lib/types";
+
+interface SupportedAssetSectionContentProps {
+  supportedAssets: TokenWithValue[];
+  isAccount?: boolean;
+  onViewMore?: () => void;
+}
+
+export const SupportedAssetSectionContent = ({
+  supportedAssets,
+  isAccount = false,
+  onViewMore,
+}: SupportedAssetSectionContentProps) => {
+  if (!supportedAssets.length)
+    return (
+      <Flex
+        w="full"
+        alignItems="center"
+        justifyContent="center"
+        h="calc(100% - 45px)"
+        minH={20}
+      >
+        <Text variant="body2" color="text.dark">
+          This {isAccount ? "address" : "contract"} does not hold any supported
+          assets
+        </Text>
+      </Flex>
+    );
+
+  return (
+    <Grid
+      p={4}
+      gridGap={4}
+      gridTemplateColumns={{
+        base: "1 fr",
+        md: onViewMore ? "repeat(3, 1fr)" : "repeat(4, 1fr)",
+      }}
+    >
+      {supportedAssets.map((asset) => (
+        <TokenCard key={asset.denom} token={asset} minW="full" />
+      ))}
+    </Grid>
+  );
+};
diff --git a/src/lib/components/asset/SupportedAssetTitle.tsx b/src/lib/components/asset/SupportedAssetTitle.tsx
new file mode 100644
index 000000000..d04b8bd9c
--- /dev/null
+++ b/src/lib/components/asset/SupportedAssetTitle.tsx
@@ -0,0 +1,49 @@
+import { Flex, Heading } from "@chakra-ui/react";
+
+import { TableTitle } from "../table";
+import { useMobile } from "lib/app-provider";
+import type { Option, TokenWithValue, USD } from "lib/types";
+import { formatPrice } from "lib/utils";
+
+interface SupportedAssetTitleProps {
+  supportedAssets: TokenWithValue[];
+  totalSupportedAssetsValue: Option<USD<Big>>;
+}
+
+export const SupportedAssetTitle = ({
+  supportedAssets,
+  totalSupportedAssetsValue,
+}: SupportedAssetTitleProps) => {
+  const isMobile = useMobile();
+  const isZeroValue =
+    !totalSupportedAssetsValue || totalSupportedAssetsValue.eq(0);
+
+  return (
+    <Flex
+      w="full"
+      bg="gray.900"
+      py={2}
+      px={4}
+      borderRadius="8px 8px 0px 0px"
+      justifyContent="space-between"
+    >
+      <TableTitle
+        title="Supported Assets"
+        count={supportedAssets.length}
+        mb={0}
+      />
+      {!isMobile && (
+        <Heading
+          mt={1}
+          as="h6"
+          variant="h6"
+          color={isZeroValue ? "text.dark" : "text.main"}
+        >
+          {totalSupportedAssetsValue
+            ? formatPrice(totalSupportedAssetsValue)
+            : "N/A"}
+        </Heading>
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/components/asset/UnsupportedAssetSectionContent.tsx b/src/lib/components/asset/UnsupportedAssetSectionContent.tsx
new file mode 100644
index 000000000..bc86dd08c
--- /dev/null
+++ b/src/lib/components/asset/UnsupportedAssetSectionContent.tsx
@@ -0,0 +1,48 @@
+import { Flex, Grid, Text } from "@chakra-ui/react";
+
+import { UnsupportedToken } from "../token";
+import type { TokenWithValue } from "lib/types";
+
+interface UnsupportedAssetSectionContentProps {
+  unsupportedAssets: TokenWithValue[];
+  isAccount?: boolean;
+  onViewMore?: () => void;
+}
+
+export const UnsupportedAssetSectionContent = ({
+  unsupportedAssets,
+  onViewMore,
+  isAccount = false,
+}: UnsupportedAssetSectionContentProps) => {
+  if (!unsupportedAssets.length)
+    return (
+      <Flex
+        w="full"
+        alignItems="center"
+        justifyContent="center"
+        h="calc(100% - 45px)"
+        minH={20}
+      >
+        <Text variant="body2" color="text.dark">
+          This {isAccount ? "address" : "contract"} does not hold any
+          unsupported assets
+        </Text>
+      </Flex>
+    );
+
+  return (
+    <Flex direction="column" gap={5} p={4}>
+      <Grid
+        gridGap={4}
+        gridTemplateColumns={{
+          base: "1 fr",
+          md: onViewMore ? "1fr" : "repeat(2, 1fr)",
+        }}
+      >
+        {unsupportedAssets.map((asset) => (
+          <UnsupportedToken key={asset.denom} token={asset} />
+        ))}
+      </Grid>
+    </Flex>
+  );
+};
diff --git a/src/lib/components/asset/UnsupportedAssetTitle.tsx b/src/lib/components/asset/UnsupportedAssetTitle.tsx
new file mode 100644
index 000000000..8ea72996f
--- /dev/null
+++ b/src/lib/components/asset/UnsupportedAssetTitle.tsx
@@ -0,0 +1,20 @@
+import { Flex } from "@chakra-ui/react";
+
+import { TableTitle } from "../table";
+import type { TokenWithValue } from "lib/types";
+
+interface UnsupportedAssetTitleProps {
+  unsupportedAssets: TokenWithValue[];
+}
+
+export const UnsupportedAssetTitle = ({
+  unsupportedAssets,
+}: UnsupportedAssetTitleProps) => (
+  <Flex w="full" bg="gray.900" py={2} px={4} borderRadius="8px 8px 0px 0px">
+    <TableTitle
+      title="Unsupported Assets"
+      count={unsupportedAssets.length}
+      mb={0}
+    />
+  </Flex>
+);
diff --git a/src/lib/pages/account-details/components/asset/UserAssetInfoCard.tsx b/src/lib/components/asset/UserAssetInfoCard.tsx
similarity index 100%
rename from src/lib/pages/account-details/components/asset/UserAssetInfoCard.tsx
rename to src/lib/components/asset/UserAssetInfoCard.tsx
diff --git a/src/lib/components/asset/index.tsx b/src/lib/components/asset/index.tsx
new file mode 100644
index 000000000..3ff7dedb4
--- /dev/null
+++ b/src/lib/components/asset/index.tsx
@@ -0,0 +1,153 @@
+import { Button, Flex, Heading, Text } from "@chakra-ui/react";
+
+import { ErrorFetching } from "../state";
+import { trackUseViewJSON } from "lib/amplitude";
+import { useMobile } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import { Loading } from "lib/components/Loading";
+import { TableTitle } from "lib/components/table";
+import { useOpenAssetTab } from "lib/hooks";
+import { useBalanceInfos } from "lib/services/balanceService";
+import type { BechAddr } from "lib/types";
+import { formatPrice } from "lib/utils";
+
+import { AssetSectionOverview } from "./AssetSectionOverview";
+import { SupportedAssetSectionContent } from "./SupportedAssetSectionContent";
+import { SupportedAssetTitle } from "./SupportedAssetTitle";
+import { UnsupportedAssetSectionContent } from "./UnsupportedAssetSectionContent";
+import { UnsupportedAssetTitle } from "./UnsupportedAssetTitle";
+import { UserAssetInfoCard } from "./UserAssetInfoCard";
+
+interface AssetsSectionProps {
+  address: BechAddr;
+  onViewMore?: () => void;
+  isAccount?: boolean;
+}
+
+export const AssetsSection = ({
+  address,
+  onViewMore,
+  isAccount = false,
+}: AssetsSectionProps) => {
+  const isMobile = useMobile();
+  const openAssetTab = useOpenAssetTab();
+  const isMobileOverview = isMobile && !!onViewMore;
+
+  const {
+    supportedAssets,
+    totalSupportedAssetsValue,
+    unsupportedAssets,
+    totalData = 0,
+    isLoading,
+    error,
+  } = useBalanceInfos(address);
+
+  if (isLoading) return <Loading />;
+  if (error) return <ErrorFetching dataName="balances" />;
+
+  return (
+    <Flex
+      direction="column"
+      gap={4}
+      mt={{ base: isMobileOverview ? 0 : 4, md: 4 }}
+      mb={{ base: 0, md: 8 }}
+      width="full"
+    >
+      {isMobileOverview ? (
+        <Flex
+          justify="space-between"
+          w="full"
+          bg="gray.900"
+          borderRadius="8px"
+          p={4}
+          onClick={onViewMore}
+        >
+          <Flex direction="column" gap={2}>
+            <TableTitle
+              title="Supported Assets"
+              count={supportedAssets.length}
+              mb={0}
+            />
+            <UserAssetInfoCard
+              totalSupportedAssetsValue={totalSupportedAssetsValue}
+              helperText="Total Asset Value"
+            />
+          </Flex>
+          <CustomIcon name="chevron-right" color="gray.600" />
+        </Flex>
+      ) : (
+        <>
+          <Flex w="full" justifyContent="space-between">
+            <TableTitle title="Assets" count={totalData} mb={0} />
+            <Button
+              disabled={!supportedAssets.length && !unsupportedAssets.length}
+              variant="ghost-gray"
+              size="sm"
+              rightIcon={
+                <CustomIcon name="launch" boxSize={3} color="text.dark" />
+              }
+              onClick={() => {
+                trackUseViewJSON("account_details_page_assets");
+                openAssetTab(address);
+              }}
+            >
+              View all assets in JSON
+            </Button>
+          </Flex>
+          {onViewMore ? (
+            <AssetSectionOverview
+              isAccount={isAccount}
+              supportedAssets={supportedAssets}
+              totalSupportedAssetsValue={totalSupportedAssetsValue}
+              unsupportedAssets={unsupportedAssets}
+              onViewMore={onViewMore}
+            />
+          ) : (
+            <>
+              <Flex
+                border="1px solid"
+                borderColor="gray.700"
+                borderRadius="8px"
+                direction="column"
+              >
+                <SupportedAssetTitle
+                  supportedAssets={supportedAssets}
+                  totalSupportedAssetsValue={totalSupportedAssetsValue}
+                />
+                {isMobile && (
+                  <Flex pt={4} px={4} direction="column">
+                    <Text variant="body2" color="text.dark">
+                      Total Asset Value
+                    </Text>
+                    <Heading as="h6" variant="h6" color="text.main">
+                      {totalSupportedAssetsValue
+                        ? formatPrice(totalSupportedAssetsValue)
+                        : "N/A"}
+                    </Heading>
+                  </Flex>
+                )}
+                <SupportedAssetSectionContent
+                  isAccount={isAccount}
+                  supportedAssets={supportedAssets}
+                />
+              </Flex>
+              <Flex
+                border="1px solid"
+                borderColor="gray.700"
+                borderRadius="8px"
+                direction="column"
+                mt={2}
+              >
+                <UnsupportedAssetTitle unsupportedAssets={unsupportedAssets} />
+                <UnsupportedAssetSectionContent
+                  isAccount={isAccount}
+                  unsupportedAssets={unsupportedAssets}
+                />
+              </Flex>
+            </>
+          )}
+        </>
+      )}
+    </Flex>
+  );
+};
diff --git a/src/lib/components/delegations/DelegationInfo.tsx b/src/lib/components/delegations/DelegationInfo.tsx
index 73ca25443..164eebf00 100644
--- a/src/lib/components/delegations/DelegationInfo.tsx
+++ b/src/lib/components/delegations/DelegationInfo.tsx
@@ -51,6 +51,7 @@ export const DelegationInfo = ({
             alignItems={{ base: "start", md: "center" }}
             justify="space-between"
             overflowX="scroll"
+            overflowY="hidden"
           >
             <Flex
               gap={{ base: 4, md: 8 }}
diff --git a/src/lib/components/modal/UnsupportedTokensModal.tsx b/src/lib/components/modal/UnsupportedTokensModal.tsx
index 5456c4c0f..7b69ffd8c 100644
--- a/src/lib/components/modal/UnsupportedTokensModal.tsx
+++ b/src/lib/components/modal/UnsupportedTokensModal.tsx
@@ -16,17 +16,10 @@ import {
 import { ExplorerLink } from "../ExplorerLink";
 import type { IconKeys } from "../icon";
 import { CustomIcon } from "../icon";
-import { Tooltip } from "../Tooltip";
+import { UnsupportedToken } from "../token";
 import { trackUseUnsupportedToken } from "lib/amplitude";
-import { useGetAddressType, useMobile } from "lib/app-provider";
 import type { AddressReturnType } from "lib/app-provider";
-import { Copier } from "lib/components/copy";
 import type { BechAddr, TokenWithValue } from "lib/types";
-import {
-  getTokenType,
-  getTokenLabel,
-  formatUTokenWithPrecision,
-} from "lib/utils";
 
 interface UnsupportedTokensModalProps {
   unsupportedAssets: TokenWithValue[];
@@ -35,78 +28,6 @@ interface UnsupportedTokensModalProps {
   buttonProps?: ButtonProps;
   amptrackSection?: string;
 }
-const getTokenTypeWithAddress = (addrType: AddressReturnType) =>
-  addrType === "contract_address"
-    ? getTokenType("cw20")
-    : getTokenType("native");
-
-const UnsupportedToken = ({ token }: { token: TokenWithValue }) => {
-  const getAddressType = useGetAddressType();
-  const tokenType = !token.denom.includes("/")
-    ? getTokenTypeWithAddress(getAddressType(token.denom))
-    : getTokenType(token.denom.split("/")[0]);
-
-  const isMobile = useMobile();
-  return (
-    <Flex
-      className="copier-wrapper"
-      borderRadius="8px"
-      bg="gray.800"
-      direction="column"
-      px={4}
-      py={3}
-      role="group"
-      _hover={{
-        "& .info": {
-          display: "flex",
-        },
-      }}
-    >
-      <Flex
-        direction={{ base: "column", md: "row" }}
-        justifyContent="space-between"
-        alignItems={{ base: "flex-start", md: "center" }}
-      >
-        <Flex alignItems="center" justifyContent="center" gap={1} minH={6}>
-          <Text
-            variant="body2"
-            className={isMobile ? "" : "ellipsis"}
-            wordBreak="break-all"
-          >
-            {getTokenLabel(token.denom, token.symbol, !isMobile)}
-          </Text>
-          {!isMobile && (
-            <Tooltip label={`Token ID: ${token.denom}`} maxW="500px">
-              <Flex
-                cursor="pointer"
-                className="info"
-                display={{ base: "flex", md: "none" }}
-                h={6}
-                alignItems="center"
-              >
-                <CustomIcon name="info-circle" boxSize={3} color="gray.600" />
-              </Flex>
-            </Tooltip>
-          )}
-          <Copier
-            display={{ base: "flex", md: "none" }}
-            type="unsupported_asset"
-            value={token.denom}
-            copyLabel="Token ID Copied!"
-            ml={{ base: 1, md: 0 }}
-            amptrackSection="unsupported_token_copy"
-          />
-        </Flex>
-        <Text variant="body3" color="text.dark" my={{ base: 1, md: 0 }}>
-          {`${tokenType} Token`}
-        </Text>
-      </Flex>
-      <Text variant="body2" fontWeight="900">
-        {formatUTokenWithPrecision(token.amount, token.precision ?? 0, false)}
-      </Text>
-    </Flex>
-  );
-};
 
 const unsupportedTokensContent = (
   addressType: AddressReturnType
diff --git a/src/lib/components/table/ViewMore.tsx b/src/lib/components/table/ViewMore.tsx
index ad7775133..f549aaabb 100644
--- a/src/lib/components/table/ViewMore.tsx
+++ b/src/lib/components/table/ViewMore.tsx
@@ -1,3 +1,4 @@
+import type { BorderProps, LayoutProps } from "@chakra-ui/react";
 import { Button, Flex } from "@chakra-ui/react";
 
 import { CustomIcon } from "../icon";
@@ -5,14 +6,20 @@ import { AmpEvent, track } from "lib/amplitude";
 
 interface ViewMoreProps {
   onClick: () => void;
+  borderRadius?: BorderProps["borderRadius"];
+  minH?: LayoutProps["minH"];
 }
 
-export const ViewMore = ({ onClick }: ViewMoreProps) => (
+export const ViewMore = ({
+  onClick,
+  borderRadius = "0",
+  minH = "64px",
+}: ViewMoreProps) => (
   <Flex w="full" justifyContent="center" textAlign="center">
     <Button
       w="full"
-      borderRadius="0"
-      minH="64px"
+      borderRadius={borderRadius}
+      minH={minH}
       variant="ghost-gray"
       gap={2}
       onClick={() => {
diff --git a/src/lib/components/token/UnsupportedToken.tsx b/src/lib/components/token/UnsupportedToken.tsx
new file mode 100644
index 000000000..8f0c5bf60
--- /dev/null
+++ b/src/lib/components/token/UnsupportedToken.tsx
@@ -0,0 +1,99 @@
+import { Flex, Tag, Text, Tooltip } from "@chakra-ui/react";
+
+import { Copier } from "../copy";
+import { CustomIcon } from "../icon";
+import type { AddressReturnType } from "lib/app-provider";
+import { useGetAddressType, useMobile } from "lib/app-provider";
+import type { TokenWithValue } from "lib/types";
+import {
+  formatUTokenWithPrecision,
+  getTokenLabel,
+  getTokenType,
+} from "lib/utils";
+
+const getTokenTypeWithAddress = (addrType: AddressReturnType) =>
+  addrType === "contract_address"
+    ? getTokenType("cw20")
+    : getTokenType("native");
+
+export const UnsupportedToken = ({ token }: { token: TokenWithValue }) => {
+  const isMobile = useMobile();
+  const getAddressType = useGetAddressType();
+  const tokenType = !token.denom.includes("/")
+    ? getTokenTypeWithAddress(getAddressType(token.denom))
+    : getTokenType(token.denom.split("/")[0]);
+
+  return (
+    <Flex
+      className="copier-wrapper"
+      borderRadius="8px"
+      bg="gray.900"
+      direction="column"
+      px={4}
+      py={3}
+      role="group"
+      _hover={{
+        "& .info": {
+          display: "flex",
+        },
+      }}
+    >
+      <Flex
+        direction={{ base: "column", md: "row" }}
+        justifyContent="space-between"
+        alignItems={{ base: "flex-start", md: "center" }}
+      >
+        {isMobile && (
+          <Tag variant="gray" size="xs" my={{ base: 1, md: 0 }}>
+            {`${tokenType} Token`}
+          </Tag>
+        )}
+        <Flex
+          alignItems="center"
+          justifyContent="center"
+          gap={1}
+          minH={6}
+          my={{ base: 1, md: 0 }}
+        >
+          <Text
+            variant="body2"
+            className={isMobile ? "" : "ellipsis"}
+            wordBreak="break-all"
+            color="text.dark"
+          >
+            {getTokenLabel(token.denom, token.symbol, !isMobile)}
+          </Text>
+          {!isMobile && (
+            <Tooltip label={`Token ID: ${token.denom}`} maxW="500px">
+              <Flex
+                cursor="pointer"
+                className="info"
+                display={{ base: "flex", md: "none" }}
+                h={6}
+                alignItems="center"
+              >
+                <CustomIcon name="info-circle" boxSize={3} color="gray.600" />
+              </Flex>
+            </Tooltip>
+          )}
+          <Copier
+            display={{ base: "flex", md: "none" }}
+            type="unsupported_asset"
+            value={token.denom}
+            copyLabel="Token ID Copied!"
+            ml={{ base: 1, md: 0 }}
+            amptrackSection="unsupported_token_copy"
+          />
+        </Flex>
+        {!isMobile && (
+          <Text variant="body3" color="text.dark" my={{ base: 1, md: 0 }}>
+            {`${tokenType} Token`}
+          </Text>
+        )}
+      </Flex>
+      <Text variant="body2" fontWeight="900">
+        {formatUTokenWithPrecision(token.amount, token.precision ?? 0, false)}
+      </Text>
+    </Flex>
+  );
+};
diff --git a/src/lib/components/token/index.ts b/src/lib/components/token/index.ts
index 3723b2e5d..4a9d10add 100644
--- a/src/lib/components/token/index.ts
+++ b/src/lib/components/token/index.ts
@@ -1,3 +1,4 @@
 export * from "./TokenCard";
 export * from "./TokenComposition";
 export * from "./TokenImageRender";
+export * from "./UnsupportedToken";
diff --git a/src/lib/pages/account-details/components/asset/AssetCta.tsx b/src/lib/pages/account-details/components/asset/AssetCta.tsx
deleted file mode 100644
index 6a55f6b9b..000000000
--- a/src/lib/pages/account-details/components/asset/AssetCta.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Button, Flex } from "@chakra-ui/react";
-
-import { trackUseViewJSON } from "lib/amplitude";
-import { CustomIcon } from "lib/components/icon";
-import { UnsupportedTokensModal } from "lib/components/modal";
-import { useOpenAssetTab } from "lib/hooks";
-import type { BechAddr, TokenWithValue } from "lib/types";
-
-interface AssetCtaProps {
-  unsupportedAssets: TokenWithValue[];
-  totalAsset: number;
-  address: BechAddr;
-}
-
-export const AssetCta = ({
-  unsupportedAssets,
-  totalAsset,
-  address,
-}: AssetCtaProps) => {
-  const openAssetTab = useOpenAssetTab();
-
-  return (
-    <Flex
-      w={{ base: "full", md: "auto" }}
-      justify="center"
-      mb={{ base: 4, md: 0 }}
-    >
-      {totalAsset > 0 && (
-        <Button
-          variant="ghost-gray"
-          size="sm"
-          rightIcon={<CustomIcon name="launch" boxSize={3} color="text.dark" />}
-          onClick={() => {
-            trackUseViewJSON("account_details_page_assets");
-            openAssetTab(address);
-          }}
-        >
-          View in JSON
-        </Button>
-      )}
-      <UnsupportedTokensModal
-        unsupportedAssets={unsupportedAssets}
-        address={address}
-        addressType="user_address"
-      />
-    </Flex>
-  );
-};
diff --git a/src/lib/pages/account-details/components/asset/AssetSectionContent.tsx b/src/lib/pages/account-details/components/asset/AssetSectionContent.tsx
deleted file mode 100644
index 4a7164746..000000000
--- a/src/lib/pages/account-details/components/asset/AssetSectionContent.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Grid, Text } from "@chakra-ui/react";
-
-import { ErrorFetching } from "lib/components/state";
-import { TokenCard } from "lib/components/token";
-import type { TokenWithValue } from "lib/types";
-
-interface AssetSectionContentProps {
-  supportedAssets: TokenWithValue[];
-  error: Error;
-  isAccount?: boolean;
-}
-
-export const AssetSectionContent = ({
-  supportedAssets,
-  error,
-  isAccount = false,
-}: AssetSectionContentProps) => {
-  if (error) return <ErrorFetching dataName="balances" />;
-
-  return supportedAssets.length ? (
-    <Grid
-      gridGap={4}
-      gridTemplateColumns={{ base: "1 fr", md: "repeat(4, 1fr)" }}
-    >
-      {supportedAssets.map((asset) => (
-        <TokenCard key={asset.denom} token={asset} minW="full" />
-      ))}
-    </Grid>
-  ) : (
-    <Text variant="body2" color="text.dark">
-      This {isAccount ? "address" : "contract"} does not hold any supported
-      assets
-    </Text>
-  );
-};
diff --git a/src/lib/pages/account-details/components/asset/index.tsx b/src/lib/pages/account-details/components/asset/index.tsx
deleted file mode 100644
index 7e4505cd6..000000000
--- a/src/lib/pages/account-details/components/asset/index.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Flex } from "@chakra-ui/react";
-
-import { useMobile } from "lib/app-provider";
-import { CustomIcon } from "lib/components/icon";
-import { Loading } from "lib/components/Loading";
-import { TableTitle, ViewMore } from "lib/components/table";
-import { useBalanceInfos } from "lib/services/balanceService";
-import type { BechAddr } from "lib/types";
-
-import { AssetCta } from "./AssetCta";
-import { AssetSectionContent } from "./AssetSectionContent";
-import { UserAssetInfoCard } from "./UserAssetInfoCard";
-
-const MAX_ASSETS_SHOW = 8;
-
-interface AssetsSectionProps {
-  address: BechAddr;
-  onViewMore?: () => void;
-  isAccount?: boolean;
-}
-
-export const AssetsSection = ({
-  address,
-  onViewMore,
-  isAccount = false,
-}: AssetsSectionProps) => {
-  const isMobile = useMobile();
-  const isMobileOverview = isMobile && !!onViewMore;
-
-  const {
-    supportedAssets,
-    totalSupportedAssetsValue,
-    unsupportedAssets,
-    isLoading,
-    totalData = 0,
-    error,
-  } = useBalanceInfos(address);
-
-  if (isLoading) return <Loading />;
-
-  const tableTitle = <TableTitle title="Assets" count={totalData} mb={0} />;
-  const totalAssetValueInfo = (
-    <UserAssetInfoCard
-      totalSupportedAssetsValue={totalSupportedAssetsValue}
-      helperText="Total Asset Value"
-    />
-  );
-  return (
-    <Flex
-      direction="column"
-      gap={4}
-      mt={{ base: isMobileOverview ? 0 : 4, md: 4 }}
-      mb={{ base: 0, md: 8 }}
-      width="full"
-    >
-      {isMobileOverview ? (
-        <Flex
-          justify="space-between"
-          w="full"
-          bg="gray.900"
-          borderRadius="8px"
-          p={4}
-          onClick={onViewMore}
-        >
-          <Flex direction="column" gap={2}>
-            {tableTitle}
-            {totalAssetValueInfo}
-          </Flex>
-          <CustomIcon name="chevron-right" color="gray.600" />
-        </Flex>
-      ) : (
-        <>
-          {tableTitle}
-          <Flex
-            justify={{ base: "flex-start", md: "space-between" }}
-            width="full"
-            align={{ base: "start", md: "center" }}
-            direction={{ base: "column", md: "row" }}
-          >
-            {totalAssetValueInfo}
-            {!isMobile && (
-              <AssetCta
-                unsupportedAssets={unsupportedAssets}
-                address={address}
-                totalAsset={totalData}
-              />
-            )}
-          </Flex>
-          <AssetSectionContent
-            isAccount={isAccount}
-            supportedAssets={
-              onViewMore
-                ? supportedAssets.slice(0, MAX_ASSETS_SHOW)
-                : supportedAssets
-            }
-            error={error}
-          />
-          {isMobile && (
-            <AssetCta
-              unsupportedAssets={unsupportedAssets}
-              address={address}
-              totalAsset={totalData}
-            />
-          )}
-          {onViewMore && supportedAssets.length > MAX_ASSETS_SHOW && (
-            <ViewMore onClick={onViewMore} />
-          )}
-        </>
-      )}
-    </Flex>
-  );
-};
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
index 5224002d1..da1f1b43c 100644
--- a/src/lib/pages/account-details/index.tsx
+++ b/src/lib/pages/account-details/index.tsx
@@ -21,6 +21,7 @@ import {
   useValidateAddress,
   useWasmConfig,
 } from "lib/app-provider";
+import { AssetsSection } from "lib/components/asset";
 import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CustomTab } from "lib/components/CustomTab";
 import { CustomIcon } from "lib/components/icon";
@@ -35,7 +36,6 @@ import type { Addr, BechAddr, HexAddr, Option } from "lib/types";
 import { truncate } from "lib/utils";
 
 import { AccountHeader } from "./components/AccountHeader";
-import { AssetsSection } from "./components/asset";
 import { ModuleLists } from "./components/modules";
 import { NftsOverview, NftsSection } from "./components/nfts";
 import { ResourceOverview, ResourceSection } from "./components/resources";
@@ -264,7 +264,7 @@ const AccountDetailsBody = ({
         </TabList>
         <TabPanels>
           <TabPanel p={0} pt={{ base: 4, md: 0 }}>
-            <Flex direction="column" gap={{ base: 4, md: 4 }}>
+            <Flex direction="column" gap={4}>
               <Flex
                 direction={{ base: "column", md: "row" }}
                 gap={{ base: 4, md: 6 }}
diff --git a/src/lib/pages/contract-details/components/ContractTop.tsx b/src/lib/pages/contract-details/components/ContractTop.tsx
index 379ce4b51..c9611d1d0 100644
--- a/src/lib/pages/contract-details/components/ContractTop.tsx
+++ b/src/lib/pages/contract-details/components/ContractTop.tsx
@@ -110,7 +110,7 @@ export const ContractTop = ({
   };
 
   return (
-    <Flex direction="column">
+    <Flex direction="column" mb={6}>
       <Breadcrumb
         items={[
           {
@@ -128,11 +128,11 @@ export const ContractTop = ({
         justify="space-between"
         mt={{ base: 3, md: 6 }}
         direction={{ base: "column", md: "row" }}
-        gap={{ md: 8 }}
+        gap={{ md: 4 }}
       >
         <Flex
           direction="column"
-          gap={3}
+          gap={{ base: 1, md: 3 }}
           overflow="hidden"
           minW={{ md: "680px" }}
         >
@@ -162,7 +162,7 @@ export const ContractTop = ({
               {displayName}
             </Heading>
           </Flex>
-          <Flex gap={1} direction="column">
+          <Flex gap={{ base: 2, md: 1 }} direction="column">
             <Flex
               mt={{ base: 2, md: 0 }}
               gap={{ base: 0, md: 2 }}
@@ -224,7 +224,7 @@ export const ContractTop = ({
         </Flex>
         <Flex direction="column" gap={4}>
           <Flex
-            gap={{ base: 2, md: 4 }}
+            gap={2}
             mt={{ base: 8, md: 0 }}
             w={{ base: "full", md: "auto" }}
           >
diff --git a/src/lib/pages/contract-details/index.tsx b/src/lib/pages/contract-details/index.tsx
index 89200bbcf..cf5a7e1ab 100644
--- a/src/lib/pages/contract-details/index.tsx
+++ b/src/lib/pages/contract-details/index.tsx
@@ -11,8 +11,6 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { useCallback, useEffect } from "react";
 
-import { DelegationsSection } from "../../components/delegations";
-import { AssetsSection } from "../account-details/components/asset";
 import { AmpEvent, track, trackUseTab } from "lib/amplitude";
 import {
   useValidateAddress,
@@ -20,7 +18,9 @@ import {
   useMobile,
   useInternalNavigate,
 } from "lib/app-provider";
+import { AssetsSection } from "lib/components/asset";
 import { CustomTab } from "lib/components/CustomTab";
+import { DelegationsSection } from "lib/components/delegations";
 import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
@@ -41,6 +41,8 @@ import { TabIndex, zContractDetailsQueryParams } from "./types";
 
 const InvalidContract = () => <InvalidState title="Contract does not exist" />;
 
+const tableHeaderId = "contractDetailsTab";
+
 interface ContractDetailsBodyProps {
   contractAddress: BechAddr32;
   tab: TabIndex;
@@ -105,11 +107,10 @@ const ContractDetailsBody = observer(
           lazyBehavior="keepMounted"
         >
           <TabList
-            mt={6}
-            mb={{ base: 0, md: 8 }}
             borderBottom="1px solid"
             borderColor="gray.700"
             overflowX="scroll"
+            id={tableHeaderId}
           >
             <CustomTab onClick={handleTabChange(TabIndex.Overview)}>
               Overview
@@ -133,13 +134,9 @@ const ContractDetailsBody = observer(
             </CustomTab>
           </TabList>
           <TabPanels>
-            <TabPanel p={0}>
+            <TabPanel p={0} pt={{ base: 0, md: 8 }}>
               <Flex flexDirection="column" gap={8}>
-                <Flex
-                  direction="column"
-                  gap={{ base: 4, md: 4 }}
-                  mt={{ base: 4, md: 0 }}
-                >
+                <Flex direction="column" gap={4} mt={{ base: 4, md: 0 }}>
                   <ContractDesc
                     publicInfo={publicInfo}
                     contract={contract}
@@ -231,13 +228,13 @@ const ContractDetailsBody = observer(
             <TabPanel p={0}>
               <AssetsSection address={contractAddress} />
             </TabPanel>
-            <TabPanel p={0}>
+            <TabPanel px={0} pt={{ base: 0, md: 5 }}>
               <DelegationsSection address={contractAddress} />
             </TabPanel>
-            <TabPanel px={0} pt={{ base: 5, md: 0 }}>
+            <TabPanel px={0} pt={5}>
               <ContractTables contractAddress={contractAddress} />
             </TabPanel>
-            <TabPanel px={0} pt={{ base: 5, md: 0 }}>
+            <TabPanel px={0} pt={5}>
               <ContractStates contractAddress={contractAddress} />
             </TabPanel>
           </TabPanels>