diff --git a/src/components/Card/Card.theme.ts b/src/components/Card/Card.theme.ts
index 714890a60fe..12124fa7cdf 100644
--- a/src/components/Card/Card.theme.ts
+++ b/src/components/Card/Card.theme.ts
@@ -45,6 +45,9 @@ export const CardStyle = {
       container: {
         bg: 'background.surface.raised.base',
         borderColor: 'border.base',
+        _dark: {
+          boxShadow: '0 1px 0 var(--chakra-colors-border-base) inset, var(--chakra-shadows-sm)',
+        },
       },
     }),
     unstyled: {
diff --git a/src/pages/Yields/components/YieldAvailableToDeposit.tsx b/src/pages/Yields/components/YieldAvailableToDeposit.tsx
index 8f0b5b60882..4acdedbb0ef 100644
--- a/src/pages/Yields/components/YieldAvailableToDeposit.tsx
+++ b/src/pages/Yields/components/YieldAvailableToDeposit.tsx
@@ -141,18 +141,12 @@ export const YieldAvailableToDeposit = memo(
     }
 
     return (
-      <Card variant='dashboard'>
+      <Card>
         <CardBody p={{ base: 4, md: 5 }}>
           <VStack spacing={4} align='stretch'>
             <Flex justifyContent='space-between' alignItems='center'>
               <HStack spacing={2}>
-                <Heading
-                  as='h3'
-                  size='sm'
-                  textTransform='uppercase'
-                  color='text.subtle'
-                  letterSpacing='wider'
-                >
+                <Heading as='h3' size='sm' color='text.subtle'>
                   {translate('yieldXYZ.availableToDeposit')}
                 </Heading>
                 <Tooltip label={tooltipLabel} placement='top'>
@@ -182,8 +176,9 @@ export const YieldAvailableToDeposit = memo(
                 <Amount.Fiat
                   fontSize='sm'
                   fontWeight='semibold'
+                  color='text.success'
                   value={potentialYearlyEarningsFiat.toFixed()}
-                  suffix='/yr'
+                  suffix={translate('yieldXYZ.perYear')}
                 />
               </Flex>
             )}
diff --git a/src/pages/Yields/components/YieldInfoCard.tsx b/src/pages/Yields/components/YieldInfoCard.tsx
index 760c704f18e..12a2f668884 100644
--- a/src/pages/Yields/components/YieldInfoCard.tsx
+++ b/src/pages/Yields/components/YieldInfoCard.tsx
@@ -3,13 +3,13 @@ import {
   AlertDescription,
   AlertIcon,
   Avatar,
-  Badge,
   Box,
   Card,
   CardBody,
   Flex,
   Heading,
   HStack,
+  Tag,
   Text,
   VStack,
 } from '@chakra-ui/react'
@@ -53,41 +53,8 @@ export const YieldInfoCard = memo(
       <AssetIcon src={iconSource.src} size='lg' />
     )
 
-    const hasOverlay = validatorOrProvider?.logoURI || yieldItem.chainId
-
-    const stackedIconElement = !hasOverlay ? (
-      assetIcon
-    ) : (
-      <Box position='relative'>
-        {assetIcon}
-        {validatorOrProvider?.logoURI ? (
-          <Avatar
-            size='xs'
-            src={validatorOrProvider.logoURI}
-            name={validatorOrProvider.name}
-            position='absolute'
-            bottom='-4px'
-            right='-4px'
-            border='2px solid'
-            borderColor='background.surface.raised.base'
-          />
-        ) : yieldItem.chainId ? (
-          <Box
-            position='absolute'
-            bottom='-4px'
-            right='-4px'
-            bg='background.surface.raised.base'
-            borderRadius='full'
-            p='3px'
-          >
-            <ChainIcon chainId={yieldItem.chainId} boxSize='16px' />
-          </Box>
-        ) : null}
-      </Box>
-    )
-
     return (
-      <Card variant='dashboard'>
+      <Card>
         <CardBody p={{ base: 4, md: 6 }}>
           <VStack spacing={4} align='stretch'>
             {yieldItem.metadata.deprecated && (
@@ -109,72 +76,41 @@ export const YieldInfoCard = memo(
             )}
 
             <Flex gap={4} align='center'>
-              {stackedIconElement}
+              {assetIcon}
               <Heading as='h2' size='md'>
                 {yieldTitle}
               </Heading>
+              <HStack spacing={2} flexWrap='wrap' ml='auto'>
+                <Tag borderRadius='full' px={3} textTransform='capitalize' alignSelf='stretch'>
+                  {type}
+                </Tag>
+                {yieldItem.chainId && (
+                  <Tag gap={1} borderRadius='full' p={2} textTransform='capitalize'>
+                    <ChainIcon chainId={yieldItem.chainId} boxSize='20px' />
+                    {yieldItem.network}
+                  </Tag>
+                )}
+                {validatorOrProvider?.name && (
+                  <Tag gap={1} borderRadius='full' p={2}>
+                    {validatorOrProvider.logoURI && (
+                      <Avatar
+                        boxSize='20px'
+                        src={validatorOrProvider.logoURI}
+                        name={validatorOrProvider.name}
+                      />
+                    )}
+                    {validatorOrProvider.name}
+                  </Tag>
+                )}
+              </HStack>
             </Flex>
 
             <HStack spacing={3} flexWrap='wrap'>
-              <Box
-                bg='background.surface.overlay.base'
-                borderRadius='full'
-                px={3}
-                py={1.5}
-                borderWidth={1}
-                borderColor='border.base'
-              >
-                <GradientApy fontSize='sm'>
+              <Box>
+                <GradientApy fontSize='4xl' fontWeight='medium'>
                   {apy}% {translate('common.apy')}
                 </GradientApy>
               </Box>
-              <Badge
-                colorScheme='gray'
-                variant='subtle'
-                borderRadius='full'
-                px={3}
-                py={1.5}
-                fontWeight='medium'
-                fontSize='sm'
-                textTransform='capitalize'
-              >
-                {type}
-              </Badge>
-            </HStack>
-
-            <HStack spacing={6} flexWrap='wrap'>
-              <HStack spacing={2}>
-                {iconSource.assetId ? (
-                  <AssetIcon assetId={iconSource.assetId} size='xs' />
-                ) : (
-                  <AssetIcon src={iconSource.src} size='xs' />
-                )}
-                <Text fontSize='md' fontWeight='semibold'>
-                  {yieldItem.token.symbol}
-                </Text>
-              </HStack>
-              {yieldItem.chainId && (
-                <HStack spacing={2}>
-                  <ChainIcon chainId={yieldItem.chainId} boxSize='20px' />
-                  <Text fontSize='md' fontWeight='semibold' textTransform='capitalize'>
-                    {yieldItem.network}
-                  </Text>
-                </HStack>
-              )}
-              {validatorOrProvider?.name && (
-                <HStack spacing={2}>
-                  {validatorOrProvider.logoURI && (
-                    <Avatar
-                      size='xs'
-                      src={validatorOrProvider.logoURI}
-                      name={validatorOrProvider.name}
-                    />
-                  )}
-                  <Text fontSize='md' fontWeight='semibold'>
-                    {validatorOrProvider.name}
-                  </Text>
-                </HStack>
-              )}
             </HStack>
 
             {description && (
diff --git a/src/pages/Yields/components/YieldPositionCard.tsx b/src/pages/Yields/components/YieldPositionCard.tsx
index 624d66bbe30..cf33143f91a 100644
--- a/src/pages/Yields/components/YieldPositionCard.tsx
+++ b/src/pages/Yields/components/YieldPositionCard.tsx
@@ -415,16 +415,10 @@ export const YieldPositionCard = memo(
 
     if (isBalancesLoading) {
       return (
-        <Card variant='dashboard'>
+        <Card>
           <CardBody p={{ base: 4, md: 5 }}>
             <Flex justifyContent='space-between' alignItems='center' mb={4}>
-              <Heading
-                as='h3'
-                size='sm'
-                textTransform='uppercase'
-                color='text.subtle'
-                letterSpacing='wider'
-              >
+              <Heading as='h3' size='sm' color='text.subtle'>
                 {translate('yieldXYZ.myPosition')}
               </Heading>
             </Flex>
@@ -435,16 +429,10 @@ export const YieldPositionCard = memo(
     }
 
     return (
-      <Card variant='dashboard'>
+      <Card>
         <CardBody p={{ base: 4, md: 5 }}>
           <Flex justifyContent='space-between' alignItems='center' mb={4}>
-            <Heading
-              as='h3'
-              size='sm'
-              textTransform='uppercase'
-              color='text.subtle'
-              letterSpacing='wider'
-            >
+            <Heading as='h3' size='sm' color='text.subtle'>
               {headingText}
             </Heading>
             {addressBadge}
diff --git a/src/pages/Yields/components/YieldProviderInfo.tsx b/src/pages/Yields/components/YieldProviderInfo.tsx
index e3a0a09b9f8..d53109ceca3 100644
--- a/src/pages/Yields/components/YieldProviderInfo.tsx
+++ b/src/pages/Yields/components/YieldProviderInfo.tsx
@@ -1,5 +1,16 @@
 import { ExternalLinkIcon } from '@chakra-ui/icons'
-import { Avatar, Box, Button, Flex, Heading, HStack, Link, Text } from '@chakra-ui/react'
+import {
+  Avatar,
+  Box,
+  Button,
+  Card,
+  CardBody,
+  Flex,
+  Heading,
+  HStack,
+  Link,
+  Text,
+} from '@chakra-ui/react'
 import { memo, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
 
@@ -27,36 +38,38 @@ export const YieldProviderInfo = memo(
     return (
       <Box>
         <Display.Desktop>
-          <Box bg='background.surface.raised.base' borderRadius='xl' p={6} mt={6}>
-            <Flex gap={6} align='flex-start'>
-              <Flex flex={1} direction='column' gap={4}>
-                <HStack spacing={3}>
-                  {providerLogoURI && (
-                    <Avatar size='md' src={providerLogoURI} name={providerName} />
-                  )}
-                  <Heading as='h3' size='md'>
-                    {translate('yieldXYZ.aboutProvider', { provider: providerName })}
-                  </Heading>
-                </HStack>
-                <Text color='text.subtle' fontSize='sm' lineHeight='tall'>
-                  {description}
-                </Text>
-                {providerWebsite && (
-                  <Link href={providerWebsite} isExternal ml={-2}>
-                    <Button
-                      variant='ghost'
-                      size='sm'
-                      rightIcon={<ExternalLinkIcon />}
-                      color='text.subtle'
-                      _hover={{ color: 'text.base' }}
-                    >
-                      {translate('yieldXYZ.visitWebsite')}
-                    </Button>
-                  </Link>
-                )}
+          <Card>
+            <CardBody>
+              <Flex gap={6} align='flex-start'>
+                <Flex flex={1} direction='column' gap={4}>
+                  <HStack spacing={3}>
+                    {providerLogoURI && (
+                      <Avatar size='md' src={providerLogoURI} name={providerName} />
+                    )}
+                    <Heading as='h3' size='md'>
+                      {translate('yieldXYZ.aboutProvider', { provider: providerName })}
+                    </Heading>
+                    {providerWebsite && (
+                      <Link href={providerWebsite} isExternal ml='auto'>
+                        <Button
+                          variant='ghost'
+                          size='sm'
+                          rightIcon={<ExternalLinkIcon />}
+                          color='text.subtle'
+                          _hover={{ color: 'text.base' }}
+                        >
+                          {translate('yieldXYZ.visitWebsite')}
+                        </Button>
+                      </Link>
+                    )}
+                  </HStack>
+                  <Text color='text.subtle' fontSize='sm' lineHeight='tall'>
+                    {description}
+                  </Text>
+                </Flex>
               </Flex>
-            </Flex>
-          </Box>
+            </CardBody>
+          </Card>
         </Display.Desktop>
 
         <Display.Mobile>
diff --git a/src/pages/Yields/components/YieldStats.tsx b/src/pages/Yields/components/YieldStats.tsx
index ff6693763b5..fe14bd30b34 100644
--- a/src/pages/Yields/components/YieldStats.tsx
+++ b/src/pages/Yields/components/YieldStats.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Box, Flex, SimpleGrid, Text } from '@chakra-ui/react'
+import { Avatar, Box, Card, CardBody, Flex, SimpleGrid, Text } from '@chakra-ui/react'
 import { memo, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { useSearchParams } from 'react-router-dom'
@@ -94,47 +94,55 @@ export const YieldStats = memo(({ yieldItem, balances }: YieldStatsProps) => {
   )
 
   return (
-    <SimpleGrid columns={3} spacing={4} px={{ base: 2, md: 0 }}>
-      <Box>
-        <Text fontSize='xs' color='text.subtle' textTransform='uppercase' mb={1}>
-          {translate('yieldXYZ.tvl')}
-        </Text>
-        <Amount.Fiat value={tvlUserCurrency} abbreviated fontSize='sm' fontWeight='bold' />
-      </Box>
-
-      <Box>
-        <Text fontSize='xs' color='text.subtle' textTransform='uppercase' mb={1}>
-          {translate('yieldXYZ.rewardSchedule')}
-        </Text>
-        <Text fontSize='sm' fontWeight='bold' textTransform='capitalize'>
-          {yieldItem.mechanics.rewardSchedule}
-        </Text>
-      </Box>
+    <Card>
+      <CardBody>
+        <SimpleGrid columns={3} spacing={4}>
+          <Box>
+            <Text fontSize='xs' color='text.subtle' textTransform='uppercase' mb={1}>
+              {translate('yieldXYZ.tvl')}
+            </Text>
+            <Amount.Fiat value={tvlUserCurrency} abbreviated fontSize='sm' fontWeight='bold' />
+          </Box>
 
-      <Box>
-        <Text fontSize='xs' color='text.subtle' textTransform='uppercase' mb={1}>
-          {translate('yieldXYZ.type')}
-        </Text>
-        <Text fontSize='sm' fontWeight='bold' textTransform='capitalize'>
-          {yieldItem.mechanics.type}
-        </Text>
-      </Box>
+          <Box>
+            <Text fontSize='xs' color='text.subtle' textTransform='uppercase' mb={1}>
+              {translate('yieldXYZ.rewardSchedule')}
+            </Text>
+            <Text fontSize='sm' fontWeight='bold' textTransform='capitalize'>
+              {yieldItem.mechanics.rewardSchedule}
+            </Text>
+          </Box>
 
-      {validatorMetadata && (
-        <Box>
-          <Text fontSize='xs' color='text.subtle' textTransform='uppercase' mb={1}>
-            {translate('yieldXYZ.validator')}
-          </Text>
-          <Flex align='center' gap={1}>
-            {validatorMetadata.logoURI && (
-              <Avatar size='2xs' src={validatorMetadata.logoURI} name={validatorMetadata.name} />
-            )}
-            <Text fontSize='sm' fontWeight='bold'>
-              {validatorMetadata.name}
+          <Box>
+            <Text fontSize='xs' color='text.subtle' textTransform='uppercase' mb={1}>
+              {translate('yieldXYZ.type')}
+            </Text>
+            <Text fontSize='sm' fontWeight='bold' textTransform='capitalize'>
+              {yieldItem.mechanics.type}
             </Text>
-          </Flex>
-        </Box>
-      )}
-    </SimpleGrid>
+          </Box>
+
+          {validatorMetadata && (
+            <Box>
+              <Text fontSize='xs' color='text.subtle' textTransform='uppercase' mb={1}>
+                {translate('yieldXYZ.validator')}
+              </Text>
+              <Flex align='center' gap={1}>
+                {validatorMetadata.logoURI && (
+                  <Avatar
+                    size='2xs'
+                    src={validatorMetadata.logoURI}
+                    name={validatorMetadata.name}
+                  />
+                )}
+                <Text fontSize='sm' fontWeight='bold'>
+                  {validatorMetadata.name}
+                </Text>
+              </Flex>
+            </Box>
+          )}
+        </SimpleGrid>
+      </CardBody>
+    </Card>
   )
 })