diff --git a/packages/checkout/src/shared/components/Skeleton/Skeleton.tsx b/packages/checkout/src/shared/components/Skeleton/Skeleton.tsx
deleted file mode 100644
index 18206657..00000000
--- a/packages/checkout/src/shared/components/Skeleton/Skeleton.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import { Box, BoxProps } from '@0xsequence/design-system'
-
-import * as styles from './styles.css'
-
-interface SkeletonProps {
-  width?: number | string
-  height?: number | string
-  borderRadius?: BoxProps['borderRadius']
-}
-
-export const Skeleton = ({ width = '100%', height = '100%', borderRadius = 'md' }: SkeletonProps) => {
-  return <Box className={styles.skeleton} borderRadius={borderRadius} style={{ width, height }} />
-}
diff --git a/packages/checkout/src/shared/components/Skeleton/index.ts b/packages/checkout/src/shared/components/Skeleton/index.ts
deleted file mode 100644
index 4220e69f..00000000
--- a/packages/checkout/src/shared/components/Skeleton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Skeleton'
diff --git a/packages/checkout/src/shared/components/Skeleton/styles.css.ts b/packages/checkout/src/shared/components/Skeleton/styles.css.ts
deleted file mode 100644
index 5fb23505..00000000
--- a/packages/checkout/src/shared/components/Skeleton/styles.css.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { style, keyframes } from '@vanilla-extract/css'
-
-const PulseSimple = keyframes({
-  '0%': { opacity: 0.25 },
-  '50%': { opacity: 0.1 },
-  '100%': { opacity: 0.25 }
-})
-
-export const skeleton = style({
-  height: '76px',
-  backgroundColor: '#909090',
-  animation: `${PulseSimple} 2s ease-in-out infinite`
-})
diff --git a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx b/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
index 93561578..fd9ff1f5 100644
--- a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
+++ b/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx
@@ -1,10 +1,9 @@
 import React from 'react'
 import { ethers } from 'ethers'
 import { useConfig } from 'wagmi'
-import { Box, Card, Image, Text } from '@0xsequence/design-system'
+import { Box, Card, Image, Text, Placeholder } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useContractInfo, useTokenMetadata } from '@0xsequence/kit'
 import { CoinIcon } from '../../../shared/components/CoinIcon'
-import { Skeleton } from '../../../shared/components/Skeleton'
 
 import { formatDisplay } from '../../../utils'
 
@@ -72,13 +71,13 @@ export const OrderSummarySkeleton = () => {
   return (
     <Card flexDirection="row" alignItems="flex-start" justifyContent="space-between">
       <Box flexDirection="row" alignItems="center" justifyContent="center" gap="2">
-        <Skeleton height="80px" width="80px" />
+        <Placeholder style={{ width: '80px', height: '80px' }} />
         <Box flexDirection="column" alignItems="flex-start" justifyContent="center" gap="2">
-          <Skeleton width="100px" height="14px" />
-          <Skeleton width="180px" height="34px" />
+          <Placeholder style={{ width: '100px', height: '14px' }} />
+          <Placeholder style={{ width: '180px', height: '34px' }} />
         </Box>
       </Box>
-      <Skeleton height="14px" width="14px" />
+      <Placeholder style={{ width: '14px', height: '14px' }} />
     </Card>
   )
 }
diff --git a/packages/checkout/src/views/CheckoutSelection/index.tsx b/packages/checkout/src/views/CheckoutSelection/index.tsx
index 471628d9..62bc9102 100644
--- a/packages/checkout/src/views/CheckoutSelection/index.tsx
+++ b/packages/checkout/src/views/CheckoutSelection/index.tsx
@@ -10,7 +10,8 @@ import {
   TooltipPrimitive,
   Tooltip,
   PaymentsIcon,
-  vars
+  vars,
+  Placeholder
 } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useBalances, useContractInfo, useTokenMetadata, useProjectAccessKey } from '@0xsequence/kit'
 
@@ -20,7 +21,6 @@ import { OrderSummaryItem } from './component/OrderSummaryItem'
 
 import { fetchSardineClientToken, fetchSardineOrderStatus } from '../../api'
 import { CoinIcon } from '../../shared/components/CoinIcon'
-import { Skeleton } from '../../shared/components/Skeleton'
 import { HEADER_HEIGHT } from '../../constants'
 import { useNavigation, useCheckoutModal } from '../../hooks'
 import { compareAddress, formatDisplay } from '../../utils'
@@ -159,7 +159,7 @@ export const CheckoutSelection = () => {
             Total
           </Text>
           {isPending ? (
-            <Skeleton width="100px" height="17px" />
+            <Placeholder style={{ width: '100px', height: '17px' }} />
           ) : (
             <Box flexDirection="row" gap="1" alignItems="center">
               <CoinIcon imageUrl={coinImageUrl} size={12} />
@@ -220,7 +220,7 @@ export const CheckoutSelection = () => {
       {displayCryptoCheckout && (
         <Box width="full" justifyContent="flex-end">
           {isPending ? (
-            <Skeleton width="102px" height="14px" />
+            <Placeholder style={{ width: '102px', height: '14px' }} />
           ) : (
             <Text fontWeight="bold" fontSize="small" color="text50">
               Balance: {`${formatDisplay(userBalance)} ${coinSymbol}`}
diff --git a/packages/kit/src/components/TxnDetails/index.tsx b/packages/kit/src/components/TxnDetails/index.tsx
index d09f180e..6019fd9f 100644
--- a/packages/kit/src/components/TxnDetails/index.tsx
+++ b/packages/kit/src/components/TxnDetails/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Card, GradientAvatar, Text } from '@0xsequence/design-system'
+import { Box, Card, GradientAvatar, Placeholder, Text } from '@0xsequence/design-system'
 
 import React, { useEffect, useState } from 'react'
 
@@ -6,7 +6,7 @@ import { ethers } from 'ethers'
 import { useConfig } from 'wagmi'
 
 import { useTokenMetadata, useBalances } from '@0xsequence/kit'
-import { Skeleton, CollectibleTileImage, CoinIcon, formatDisplay } from '@0xsequence/kit-wallet'
+import { CollectibleTileImage, CoinIcon, formatDisplay } from '@0xsequence/kit-wallet'
 import { compareAddress, getNativeTokenInfoByChainId } from '../../utils'
 import { commons } from '@0xsequence/core'
 import { DecodingType, TransferProps, AwardItemProps, decodeTransactions } from '../../utils/txnDecoding'
@@ -24,15 +24,15 @@ export const TxnDetailsSkeleton = () => {
   return (
     <Box alignItems="center" justifyContent="space-between">
       <Box justifyContent="center" alignItems="center" gap="2">
-        <Skeleton width={30} height={30} borderRadius="circle" />
+        <Placeholder style={{ width: 30, height: 30 }} borderRadius="circle" />
         <Box flexDirection="column" gap="2" alignItems="flex-start">
-          <Skeleton width={100} height={14} />
-          <Skeleton width={75} height={14} />
+          <Placeholder style={{ width: 100, height: 14 }} />
+          <Placeholder style={{ width: 75, height: 14 }} />
         </Box>
       </Box>
       <Box flexDirection="column" gap="2" alignItems="flex-end">
-        <Skeleton width={100} height={14} />
-        <Skeleton width={50} height={12} />
+        <Placeholder style={{ width: 100, height: 14 }} />
+        <Placeholder style={{ width: 50, height: 12 }} />
       </Box>
     </Box>
   )
diff --git a/packages/wallet/src/shared/CoinRow.tsx b/packages/wallet/src/shared/CoinRow.tsx
index f12ca6f7..de7b7ae4 100644
--- a/packages/wallet/src/shared/CoinRow.tsx
+++ b/packages/wallet/src/shared/CoinRow.tsx
@@ -1,7 +1,6 @@
-import { Box, Image, Text, vars } from '@0xsequence/design-system'
+import { Box, Image, Placeholder, Text, vars } from '@0xsequence/design-system'
 
 import React from 'react'
-import { Skeleton } from '../shared/Skeleton'
 import { ethers } from 'ethers'
 
 import { CoinIcon } from './CoinIcon'
@@ -29,15 +28,15 @@ export const CoinRowSkeleton = () => {
       paddingX="3"
     >
       <Box justifyContent="center" alignItems="center" gap="2">
-        <Skeleton width={30} height={30} borderRadius="circle" />
+        <Placeholder style={{ width: 30, height: 30 }} borderRadius="circle" />
         <Box flexDirection="column" gap="2" alignItems="flex-start">
-          <Skeleton width={100} height={14} />
-          <Skeleton width={75} height={14} />
+          <Placeholder style={{ width: 100, height: 14 }} />
+          <Placeholder style={{ width: 75, height: 14 }} />
         </Box>
       </Box>
       <Box flexDirection="column" gap="2" alignItems="flex-end">
-        <Skeleton width={100} height={14} />
-        <Skeleton width={50} height={12} />
+        <Placeholder style={{ width: 100, height: 14 }} />
+        <Placeholder style={{ width: 50, height: 12 }} />
       </Box>
     </Box>
   )
diff --git a/packages/wallet/src/shared/SendItemInfo.tsx b/packages/wallet/src/shared/SendItemInfo.tsx
index 534e4c7a..7bfa9660 100644
--- a/packages/wallet/src/shared/SendItemInfo.tsx
+++ b/packages/wallet/src/shared/SendItemInfo.tsx
@@ -1,7 +1,6 @@
-import { Box, Image, Text, vars } from '@0xsequence/design-system'
+import { Box, Placeholder, Text } from '@0xsequence/design-system'
 
 import React from 'react'
-import { Skeleton } from './Skeleton'
 import { ethers } from 'ethers'
 import { useConfig } from 'wagmi'
 
@@ -27,15 +26,15 @@ export const SendItemInfoSkeleton = () => {
   return (
     <Box alignItems="center" justifyContent="space-between">
       <Box justifyContent="center" alignItems="center" gap="2">
-        <Skeleton width={30} height={30} borderRadius="circle" />
+        <Placeholder style={{ width: 30, height: 30 }} borderRadius="circle" />
         <Box flexDirection="column" gap="2" alignItems="flex-start">
-          <Skeleton width={100} height={14} />
-          <Skeleton width={75} height={14} />
+          <Placeholder style={{ width: 100, height: 14 }} />
+          <Placeholder style={{ width: 75, height: 14 }} />
         </Box>
       </Box>
       <Box flexDirection="column" gap="2" alignItems="flex-end">
-        <Skeleton width={100} height={14} />
-        <Skeleton width={50} height={12} />
+        <Placeholder style={{ width: 100, height: 14 }} />
+        <Placeholder style={{ width: 50, height: 12 }} />
       </Box>
     </Box>
   )
diff --git a/packages/wallet/src/shared/Skeleton/Skeleton.tsx b/packages/wallet/src/shared/Skeleton/Skeleton.tsx
deleted file mode 100644
index 4bbbf12a..00000000
--- a/packages/wallet/src/shared/Skeleton/Skeleton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import { Box, BoxProps } from '@0xsequence/design-system'
-
-import * as styles from './styles.css'
-
-interface SkeletonProps {
-  width?: number | string
-  height?: number | string
-  borderRadius?: BoxProps['borderRadius']
-  aspectRatio?: '1/1'
-}
-
-export const Skeleton = ({ width = '100%', height = '100%', borderRadius = 'md', aspectRatio }: SkeletonProps) => {
-  return <Box className={styles.skeleton} borderRadius={borderRadius} aspectRatio={aspectRatio} style={{ width, height }} />
-}
diff --git a/packages/wallet/src/shared/Skeleton/index.ts b/packages/wallet/src/shared/Skeleton/index.ts
deleted file mode 100644
index 4220e69f..00000000
--- a/packages/wallet/src/shared/Skeleton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Skeleton'
diff --git a/packages/wallet/src/shared/Skeleton/styles.css.ts b/packages/wallet/src/shared/Skeleton/styles.css.ts
deleted file mode 100644
index 5fb23505..00000000
--- a/packages/wallet/src/shared/Skeleton/styles.css.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { style, keyframes } from '@vanilla-extract/css'
-
-const PulseSimple = keyframes({
-  '0%': { opacity: 0.25 },
-  '50%': { opacity: 0.1 },
-  '100%': { opacity: 0.25 }
-})
-
-export const skeleton = style({
-  height: '76px',
-  backgroundColor: '#909090',
-  animation: `${PulseSimple} 2s ease-in-out infinite`
-})
diff --git a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx
index 224a2ad7..ea8f6073 100644
--- a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx
+++ b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx
@@ -3,11 +3,20 @@ import { TokenPrice } from '@0xsequence/api'
 import { ethers } from 'ethers'
 import { Transaction, TxnTransfer, TxnTransferType } from '@0xsequence/indexer'
 import { getNativeTokenInfoByChainId, useCoinPrices, useExchangeRate } from '@0xsequence/kit'
-import { ArrowRightIcon, Box, Text, Image, SendIcon, ReceiveIcon, TransactionIcon, vars } from '@0xsequence/design-system'
+import {
+  ArrowRightIcon,
+  Box,
+  Text,
+  Image,
+  SendIcon,
+  ReceiveIcon,
+  TransactionIcon,
+  vars,
+  Placeholder
+} from '@0xsequence/design-system'
 import dayjs from 'dayjs'
 import { useConfig } from 'wagmi'
 
-import { Skeleton } from '../../shared/Skeleton'
 import { useSettings, useNavigation } from '../../hooks'
 import { formatDisplay, compareAddress } from '../../utils'
 
@@ -160,7 +169,7 @@ export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemPr
                 {tokenLogoUri && <Image src={tokenLogoUri} width="5" alt="token logo" />}
                 {getTransferAmountLabel(formatDisplay(amountValue), symbol, transfer.transferType)}
               </Box>
-              {isPending && <Skeleton width="35px" height="20px" />}
+              {isPending && <Placeholder style={{ width: '35px', height: '20px' }} />}
               {fiatConversionRate && (
                 <Text fontWeight="medium" fontSize="normal" color="text50">
                   {`${fiatCurrency.sign}${(Number(amountValue) * fiatConversionRate * conversionRate).toFixed(2)}`}
diff --git a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistorySkeleton.tsx b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistorySkeleton.tsx
index 82b9d51f..65a10d92 100644
--- a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistorySkeleton.tsx
+++ b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistorySkeleton.tsx
@@ -1,19 +1,17 @@
 import React from 'react'
-import { Text, Box } from '@0xsequence/design-system'
-
-import { Skeleton } from '../../shared/Skeleton'
+import { Text, Box, Placeholder } from '@0xsequence/design-system'
 
 export const TransactionHistorySkeleton = () => {
   const getTransactionItem = () => {
     return (
       <Box flexDirection="column" gap="2" width="full" justifyContent="space-between">
         <Box flexDirection="row" justifyContent="space-between">
-          <Skeleton width="65px" height="20px" />
-          <Skeleton width="75px" height="17px" />
+          <Placeholder style={{ width: '65px', height: '20px' }} />
+          <Placeholder style={{ width: '75px', height: '17px' }} />
         </Box>
         <Box flexDirection="row" justifyContent="space-between">
-          <Skeleton width="120px" height="20px" />
-          <Skeleton width="35px" height="17px" />
+          <Placeholder style={{ width: '120px', height: '20px' }} />
+          <Placeholder style={{ width: '35px', height: '17px' }} />
         </Box>
       </Box>
     )
@@ -21,7 +19,7 @@ export const TransactionHistorySkeleton = () => {
 
   return (
     <Box flexDirection="column" gap="3">
-      <Skeleton width="70px" height="17px" />
+      <Placeholder style={{ width: '70px', height: '17px' }} />
       <Box flexDirection="column" gap="2">
         {Array(8)
           .fill(null)
diff --git a/packages/wallet/src/views/CoinDetails/Skeleton.tsx b/packages/wallet/src/views/CoinDetails/Skeleton.tsx
index e00795e8..da034472 100644
--- a/packages/wallet/src/views/CoinDetails/Skeleton.tsx
+++ b/packages/wallet/src/views/CoinDetails/Skeleton.tsx
@@ -1,9 +1,8 @@
 import React from 'react'
-import { Box, Button, SendIcon, Text, vars } from '@0xsequence/design-system'
+import { Box, Button, Placeholder, SendIcon, Text } from '@0xsequence/design-system'
 
 import { TransactionHistorySkeleton } from '../../shared/TransactionHistoryList/TransactionHistorySkeleton'
 import { NetworkBadge } from '../../shared/NetworkBadge'
-import { Skeleton } from '../../shared/Skeleton'
 
 import { HEADER_HEIGHT } from '../../constants'
 import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
@@ -19,8 +18,8 @@ export const CoinDetailsSkeleton = ({ chainId }: CoinDetailsSkeletonProps) => {
     <Box style={{ paddingTop: HEADER_HEIGHT }}>
       <Box flexDirection="column" gap="10" paddingBottom="5" paddingX="4" paddingTop="0" style={{ marginTop: '-20px' }}>
         <Box marginBottom="10" gap="2" alignItems="center" justifyContent="center" flexDirection="column">
-          <Skeleton width="32px" height="32px" />
-          <Skeleton height="24px" width="70px" />
+          <Placeholder style={{ width: '32px', height: '32px' }} />
+          <Placeholder style={{ height: '24px', width: '70px' }} />
           <NetworkBadge chainId={chainId} />
         </Box>
         <Box>
@@ -28,8 +27,8 @@ export const CoinDetailsSkeleton = ({ chainId }: CoinDetailsSkeletonProps) => {
             Balance
           </Text>
           <Box flexDirection="row" alignItems="flex-end" justifyContent="space-between">
-            <Skeleton width="150px" height="36px" />
-            <Skeleton width="33px" height="17px" />
+            <Placeholder style={{ width: '150px', height: '36px' }} />
+            <Placeholder style={{ width: '33px', height: '17px' }} />
           </Box>
         </Box>
         <Button
diff --git a/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx b/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx
index e599b579..5a852209 100644
--- a/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx
+++ b/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
-import { Box, Button, SendIcon, Text, vars } from '@0xsequence/design-system'
+import { Box, Button, Placeholder, SendIcon, Text } from '@0xsequence/design-system'
 
-import { Skeleton } from '../../shared/Skeleton'
 import { TransactionHistorySkeleton } from '../../shared/TransactionHistoryList/TransactionHistorySkeleton'
 
 import { HEADER_HEIGHT } from '../../constants'
@@ -23,11 +22,11 @@ export const CollectibleDetailsSkeleton = () => {
         }}
       >
         <Box gap="3" alignItems="center" justifyContent="center" flexDirection="column">
-          <Skeleton width="120px" height="30px" />
-          <Skeleton width="140px" height="40px" />
+          <Placeholder style={{ width: '120px', height: '30px' }} />
+          <Placeholder style={{ width: '140px', height: '40px' }} />
         </Box>
         <Box>
-          <Skeleton width="347px" height="347px" />
+          <Placeholder style={{ width: '347px', height: '347px' }} />
         </Box>
         <Box>
           {/* balance */}
@@ -36,8 +35,8 @@ export const CollectibleDetailsSkeleton = () => {
               Balance
             </Text>
             <Box flexDirection="row" alignItems="flex-end" justifyContent="space-between">
-              <Skeleton width="44px" height="36px" />
-              <Skeleton width="34px" height="17px" />
+              <Placeholder style={{ width: '44px', height: '36px' }} />
+              <Placeholder style={{ width: '34px', height: '17px' }} />
             </Box>
           </Box>
           <Button
diff --git a/packages/wallet/src/views/CollectionDetails/Skeleton.tsx b/packages/wallet/src/views/CollectionDetails/Skeleton.tsx
index 65f4ef9d..71556378 100644
--- a/packages/wallet/src/views/CollectionDetails/Skeleton.tsx
+++ b/packages/wallet/src/views/CollectionDetails/Skeleton.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
-import { Box, vars } from '@0xsequence/design-system'
+import { Box, Placeholder, vars } from '@0xsequence/design-system'
 
 import { NetworkBadge } from '../../shared/NetworkBadge'
-import { Skeleton } from '../../shared/Skeleton'
 import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
 
 interface CollectionDetailsSkeletonProps {
@@ -24,13 +23,13 @@ export const CollectionDetailsSkeleton = ({ chainId }: CollectionDetailsSkeleton
       gap="10"
     >
       <Box flexDirection="column" gap="2" justifyContent="center" alignItems="center">
-        <Skeleton width="32px" height="32px" />
-        <Skeleton width="100px" height="24px" />
+        <Placeholder style={{ width: '32px', height: '32px' }} />
+        <Placeholder style={{ width: '100px', height: '24px' }} />
         <NetworkBadge chainId={chainId} />
-        <Skeleton width="142px" height="17px" />
+        <Placeholder style={{ width: '142px', height: '17px' }} />
       </Box>
       <Box width="full">
-        <Skeleton width="168px" height="20px" />
+        <Placeholder style={{ width: '168px', height: '20px' }} />
         <Box
           style={{
             display: 'grid',
@@ -43,7 +42,7 @@ export const CollectionDetailsSkeleton = ({ chainId }: CollectionDetailsSkeleton
           {Array(8)
             .fill(null)
             .map((_, i) => (
-              <Skeleton key={i} width="full" aspectRatio="1/1" />
+              <Placeholder key={i} width="full" aspectRatio="1/1" />
             ))}
         </Box>
       </Box>
diff --git a/packages/wallet/src/views/Home/components/AssetSummary/SkeletonTiles.tsx b/packages/wallet/src/views/Home/components/AssetSummary/SkeletonTiles.tsx
index 9aa47aa6..b5b34ec1 100644
--- a/packages/wallet/src/views/Home/components/AssetSummary/SkeletonTiles.tsx
+++ b/packages/wallet/src/views/Home/components/AssetSummary/SkeletonTiles.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
-import { Box, vars } from '@0xsequence/design-system'
-import { Skeleton } from '../../../../shared/Skeleton'
+import { Box, Placeholder, vars } from '@0xsequence/design-system'
 
 export const SkeletonTiles = () => {
   return (
@@ -15,7 +14,7 @@ export const SkeletonTiles = () => {
         .fill(null)
         .map((_, i) => (
           <Box key={i}>
-            <Skeleton height="100%" width="100%" aspectRatio="1/1" />
+            <Placeholder height="full" width="full" aspectRatio="1/1" />
           </Box>
         ))}
     </Box>
diff --git a/packages/wallet/src/views/Search/SearchWallet.tsx b/packages/wallet/src/views/Search/SearchWallet.tsx
index 7b20c024..298a0398 100644
--- a/packages/wallet/src/views/Search/SearchWallet.tsx
+++ b/packages/wallet/src/views/Search/SearchWallet.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { ethers } from 'ethers'
-import { Box, SearchIcon, Text, TextInput } from '@0xsequence/design-system'
+import { Box, Placeholder, SearchIcon, Text, TextInput } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices, useBalances } from '@0xsequence/kit'
 import Fuse from 'fuse.js'
 import { useAccount, useConfig } from 'wagmi'
@@ -8,7 +8,6 @@ import { useAccount, useConfig } from 'wagmi'
 import { BalanceItem } from './components/BalanceItem'
 import { WalletLink } from './components/WalletLink'
 
-import { Skeleton } from '../../shared/Skeleton'
 import { useSettings } from '../../hooks'
 import { compareAddress, computeBalanceFiat } from '../../utils'
 import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
@@ -148,7 +147,7 @@ export const SearchWallet = () => {
         {isPending ? (
           Array(5)
             .fill(null)
-            .map((_, i) => <Skeleton key={i} width="100%" height="32px" />)
+            .map((_, i) => <Placeholder key={i} width="full" height="8" />)
         ) : foundCollectionBalances.length === 0 ? (
           <Text color="text100">No collections found</Text>
         ) : (
@@ -171,7 +170,7 @@ export const SearchWallet = () => {
         {isPending ? (
           Array(5)
             .fill(null)
-            .map((_, i) => <Skeleton key={i} width="100%" height="32px" />)
+            .map((_, i) => <Placeholder key={i} width="full" height="8" />)
         ) : foundCoinBalances.length === 0 ? (
           <Text color="text100">No coins found</Text>
         ) : (
diff --git a/packages/wallet/src/views/Search/SearchWalletViewAll.tsx b/packages/wallet/src/views/Search/SearchWalletViewAll.tsx
index cffd0105..081ba01e 100644
--- a/packages/wallet/src/views/Search/SearchWalletViewAll.tsx
+++ b/packages/wallet/src/views/Search/SearchWalletViewAll.tsx
@@ -1,12 +1,11 @@
 import React, { useState, useEffect } from 'react'
 import { ethers } from 'ethers'
-import { Box, SearchIcon, TabsContent, TabsHeader, TabsRoot, Text, TextInput } from '@0xsequence/design-system'
+import { Box, Placeholder, SearchIcon, TabsContent, TabsHeader, TabsRoot, Text, TextInput } from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices, useBalances } from '@0xsequence/kit'
 import { BalanceItem } from './components/BalanceItem'
 import Fuse from 'fuse.js'
 import { useAccount, useConfig } from 'wagmi'
 
-import { Skeleton } from '../../shared/Skeleton'
 import { useSettings } from '../../hooks'
 import { compareAddress, computeBalanceFiat } from '../../utils'
 import { useScrollbarWidth } from '../../hooks/useScrollbarWidth'
@@ -120,7 +119,7 @@ export const SearchWalletViewAll = ({ defaultTab }: SearchWalletViewAllProps) =>
     search === '' ? indexedCollectionBalances : fuzzySearchCollections.search(search).map(result => result.item)
 
   const TabsHeaderSkeleton = () => {
-    return <Skeleton width="360px" height="48px" />
+    return <Placeholder style={{ width: '360px', height: '48px' }} />
   }
 
   const ItemsSkeletons = () => {
@@ -129,7 +128,7 @@ export const SearchWalletViewAll = ({ defaultTab }: SearchWalletViewAllProps) =>
         {Array(8)
           .fill(null)
           .map((_, i) => (
-            <Skeleton key={i} width="full" height="32px" />
+            <Placeholder key={i} width="full" height="8" />
           ))}
       </>
     )
diff --git a/packages/wallet/src/views/TransactionDetails/index.tsx b/packages/wallet/src/views/TransactionDetails/index.tsx
index 57e80e8f..05895559 100644
--- a/packages/wallet/src/views/TransactionDetails/index.tsx
+++ b/packages/wallet/src/views/TransactionDetails/index.tsx
@@ -2,7 +2,17 @@ import React from 'react'
 import { ethers } from 'ethers'
 import { Token } from '@0xsequence/api'
 import { Transaction, TxnTransfer } from '@0xsequence/indexer'
-import { ArrowRightIcon, Box, Button, Divider, GradientAvatar, Image, LinkIcon, Text } from '@0xsequence/design-system'
+import {
+  ArrowRightIcon,
+  Box,
+  Button,
+  Divider,
+  GradientAvatar,
+  Image,
+  LinkIcon,
+  Placeholder,
+  Text
+} from '@0xsequence/design-system'
 import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices, useCollectiblePrices } from '@0xsequence/kit'
 import dayjs from 'dayjs'
 import { useConfig } from 'wagmi'
@@ -10,7 +20,6 @@ import { useConfig } from 'wagmi'
 import { CoinIcon } from '../../shared/CoinIcon'
 import { CopyButton } from '../../shared/CopyButton'
 import { NetworkBadge } from '../../shared/NetworkBadge'
-import { Skeleton } from '../../shared/Skeleton'
 import { compareAddress, formatDisplay } from '../../utils'
 import { useSettings } from '../../hooks'
 
@@ -131,7 +140,7 @@ export const TransactionDetails = ({ transaction }: TransactionDetailProps) => {
                     {`${balanceDisplayed} ${symbol}`}
                   </Text>
                   {arePricesLoading ? (
-                    <Skeleton width="44px" height="12px" />
+                    <Placeholder style={{ width: '44px', height: '12px' }} />
                   ) : (
                     <Text fontWeight="bold" fontSize="xsmall" color="text50">
                       {fiatPrice ? `${fiatCurrency.sign}${fiatValue}` : ''}