diff --git a/apps/web/src/views/FixedStaking/components/FixedStakingPosition.tsx b/apps/web/src/views/FixedStaking/components/FixedStakingActions.tsx
similarity index 97%
rename from apps/web/src/views/FixedStaking/components/FixedStakingPosition.tsx
rename to apps/web/src/views/FixedStaking/components/FixedStakingActions.tsx
index 3d0fbb2653ad57..f544439b4379c3 100644
--- a/apps/web/src/views/FixedStaking/components/FixedStakingPosition.tsx
+++ b/apps/web/src/views/FixedStaking/components/FixedStakingActions.tsx
@@ -36,7 +36,7 @@ import { StakePositionUserInfo } from '../type'
 import { UnlockedFixedTag } from './UnlockedFixedTag'
 import { FixedStakingModal } from './FixedStakingModal'
 
-export function FixedStakingPosition({
+export function FixedStakingActions({
   token,
   stakePositionUserInfo,
   unlockTime,
@@ -168,7 +168,7 @@ export function FixedStakingPosition({
               <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
                 APR
               </Text>
-              <Text bold>36%</Text>
+              <Text bold>0%</Text>
             </Flex>
             <Flex alignItems="center" justifyContent="space-between">
               <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
@@ -180,7 +180,7 @@ export function FixedStakingPosition({
               <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
                 Projected Return
               </Text>
-              <Text bold>2.055 {token.symbol}</Text>
+              <Text bold>0 {token.symbol}</Text>
             </Flex>
           </LightCard>
           <PreTitle fontSize="12px" color="textSubtle">
@@ -196,13 +196,13 @@ export function FixedStakingPosition({
               <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
                 Withdrawal Commission
               </Text>
-              <Text bold>1.2507 {token.symbol}</Text>
+              <Text bold>0 {token.symbol}</Text>
             </Flex>
             <Flex alignItems="center" justifyContent="space-between">
               <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
                 You Will Get
               </Text>
-              <Text bold>1,1410 {token.symbol}</Text>
+              <Text bold>0 {token.symbol}</Text>
             </Flex>
           </LightCard>
           <Button
diff --git a/apps/web/src/views/FixedStaking/components/FixedStakingCard.tsx b/apps/web/src/views/FixedStaking/components/FixedStakingCard.tsx
new file mode 100644
index 00000000000000..807caab0b4ef06
--- /dev/null
+++ b/apps/web/src/views/FixedStaking/components/FixedStakingCard.tsx
@@ -0,0 +1,90 @@
+import { useTranslation } from '@pancakeswap/localization'
+import { CardBody, Flex, Heading, StarFillIcon, Tag, Box, Button } from '@pancakeswap/uikit'
+import { StyledCard } from '@pancakeswap/uikit/src/widgets/Pool'
+import CurrencyLogo from 'components/Logo/CurrencyLogo'
+import BigNumber from 'bignumber.js'
+
+import { FixedStakingCardBody } from './FixedStakingCardBody'
+import { FixedStakingActions } from './FixedStakingActions'
+import { HarvestFixedStaking } from './HarvestFixedStaking'
+import { FixedStakingModal } from './FixedStakingModal'
+import { InlineText } from './InlineText'
+import { FixedStakingPool, StakedPosition } from '../type'
+
+export function FixedStakingCard({
+  pool,
+  stakedPositions,
+}: {
+  pool: FixedStakingPool
+  stakedPositions: StakedPosition[]
+}) {
+  const { t } = useTranslation()
+
+  const stakePosition = stakedPositions.find((position) => position.pool.token.address === pool.token.address)
+
+  return (
+    <StyledCard>
+      <Flex px="24px" pt="24px" alignItems="center" justifyContent="space-between">
+        <>
+          <CurrencyLogo currency={pool.token} size="56px" />
+          <Box>
+            <Heading color="secondary" scale="lg" textAlign="end">
+              {pool.token.symbol}
+            </Heading>
+            {new BigNumber(pool.boostDayPercent).gt(0) ? (
+              <Tag outline variant="success" startIcon={<StarFillIcon width="18px" color="success" />}>
+                vCAKE Boost
+              </Tag>
+            ) : null}
+          </Box>
+        </>
+      </Flex>
+      <CardBody>
+        <FixedStakingCardBody pool={pool}>
+          {stakePosition ? (
+            <>
+              <Box display="inline">
+                <InlineText color="secondary" bold fontSize="12px">
+                  {`${pool.token.symbol} `}
+                </InlineText>
+                <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
+                  {t('Earned')}
+                </InlineText>
+              </Box>
+              <HarvestFixedStaking
+                lockPeriod={pool.lockPeriod}
+                unlockTime={stakePosition.timestampEndLockPeriod}
+                stakePositionUserInfo={stakePosition.userInfo}
+                token={pool.token}
+                poolIndex={pool.poolIndex}
+              />
+            </>
+          ) : null}
+          {stakePosition ? (
+            <>
+              <Box display="inline">
+                <InlineText color="secondary" bold fontSize="12px">
+                  {`${pool.token.symbol} `}
+                </InlineText>
+                <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
+                  {t('Staked')}
+                </InlineText>
+              </Box>
+              <FixedStakingActions
+                poolIndex={pool.poolIndex}
+                lockPeriod={pool.lockPeriod}
+                unlockTime={stakePosition.timestampEndLockPeriod}
+                stakePositionUserInfo={stakePosition.userInfo}
+                token={pool.token}
+              />
+            </>
+          ) : (
+            <FixedStakingModal lockPeriod={pool.lockPeriod} poolIndex={pool.poolIndex} stakingToken={pool.token}>
+              {(openModal) => <Button onClick={openModal}>{t('Stake')}</Button>}
+            </FixedStakingModal>
+          )}
+        </FixedStakingCardBody>
+      </CardBody>
+    </StyledCard>
+  )
+}
diff --git a/apps/web/src/views/FixedStaking/components/FixedStakingCardBody.tsx b/apps/web/src/views/FixedStaking/components/FixedStakingCardBody.tsx
index b9a5e73adcf56e..1f42e5374bf206 100644
--- a/apps/web/src/views/FixedStaking/components/FixedStakingCardBody.tsx
+++ b/apps/web/src/views/FixedStaking/components/FixedStakingCardBody.tsx
@@ -3,8 +3,10 @@ import { useTranslation } from '@pancakeswap/localization'
 
 import { useStablecoinPriceAmount } from 'hooks/useBUSDPrice'
 import { getBalanceAmount } from '@pancakeswap/utils/formatBalance'
+import { ReactNode } from 'react'
 
 import { LockedFixedTag } from './LockedFixedTag'
+import { FixedStakingPool } from '../type'
 
 function OverviewDataRow({ title, detail }) {
   return (
@@ -17,7 +19,7 @@ function OverviewDataRow({ title, detail }) {
   )
 }
 
-export function FixedStakingCardBody({ children, pool }) {
+export function FixedStakingCardBody({ children, pool }: { pool: FixedStakingPool; children: ReactNode }) {
   const { t } = useTranslation()
   const totalStakedAmount = getBalanceAmount(pool.totalDeposited, pool.token.decimals)
 
@@ -27,7 +29,7 @@ export function FixedStakingCardBody({ children, pool }) {
     <>
       <OverviewDataRow
         title={t('APR:')}
-        detail={<Balance fontSize={['14px', '14px', '16px']} value={1} decimals={2} unit="%" fontWeight={[600, 400]} />}
+        detail={<Balance fontSize={['14px', '14px', '16px']} value={0} decimals={2} unit="%" fontWeight={[600, 400]} />}
       />
 
       <OverviewDataRow title={t('Lock Periods:')} detail={<LockedFixedTag>{pool.lockPeriod}D</LockedFixedTag>} />
diff --git a/apps/web/src/views/FixedStaking/components/FixedStakingModal.tsx b/apps/web/src/views/FixedStaking/components/FixedStakingModal.tsx
index 8687bc811ede90..d5160fbc226916 100644
--- a/apps/web/src/views/FixedStaking/components/FixedStakingModal.tsx
+++ b/apps/web/src/views/FixedStaking/components/FixedStakingModal.tsx
@@ -32,6 +32,7 @@ import toNumber from 'lodash/toNumber'
 import { CurrencyLogo } from 'components/Logo'
 import ConnectWalletButton from 'components/ConnectWalletButton'
 import useAccountActiveChain from 'hooks/useAccountActiveChain'
+import { format, add } from 'date-fns'
 
 export function FixedStakingModal({
   stakingToken,
@@ -188,19 +189,19 @@ export function FixedStakingModal({
                 <Text fontSize={12} textTransform="uppercase" color="textSubtle" bold>
                   {t('APR')}
                 </Text>
-                <Text bold>36%</Text>
+                <Text bold>0%</Text>
               </Flex>
               <Flex alignItems="center" justifyContent="space-between">
                 <Text fontSize={12} textTransform="uppercase" color="textSubtle" bold>
                   Unlock On
                 </Text>
-                <Text bold>Sep 16 2023 21:45</Text>
+                <Text bold>{format(add(new Date(), { days: lockPeriod }), 'MMM d, yyyy hh:mm')}</Text>
               </Flex>
               <Flex alignItems="center" justifyContent="space-between">
                 <Text fontSize={12} textTransform="uppercase" color="textSubtle" bold>
                   Projected Return
                 </Text>
-                <Text bold>0.23 BNB</Text>
+                <Text bold>0 {stakingToken.symbol}</Text>
               </Flex>
             </LightGreyCard>
           </Box>
@@ -212,7 +213,7 @@ export function FixedStakingModal({
               }}
               onClick={handleSubmission}
             >
-              {pendingTx ? t('Confirming') : t('Confirm')}
+              {pendingTx ? t('Staking') : t('Stake')}
             </Button>
           ) : (
             <Button
diff --git a/apps/web/src/views/FixedStaking/components/FixedStakingRow.tsx b/apps/web/src/views/FixedStaking/components/FixedStakingRow.tsx
new file mode 100644
index 00000000000000..1b404d26347795
--- /dev/null
+++ b/apps/web/src/views/FixedStaking/components/FixedStakingRow.tsx
@@ -0,0 +1,218 @@
+import { memo, useMemo } from 'react'
+import {
+  CurrencyLogo,
+  Text,
+  Pool,
+  Flex,
+  StarFillIcon,
+  Tag,
+  Balance,
+  Box,
+  Button,
+  useMatchBreakpoints,
+} from '@pancakeswap/uikit'
+import { StyledCell } from 'views/Pools/components/PoolsTable/Cells/NameCell'
+import BigNumber from 'bignumber.js'
+import { useTranslation } from '@pancakeswap/localization'
+import { useStablecoinPriceAmount } from 'hooks/useBUSDPrice'
+import { getBalanceAmount } from '@pancakeswap/utils/formatBalance'
+import {
+  ActionContainer,
+  InfoSection,
+  StyledActionPanel,
+} from 'views/Pools/components/PoolsTable/ActionPanel/ActionPanel'
+import { LightGreyCard } from 'components/Card'
+
+import { LockedFixedTag } from './LockedFixedTag'
+import { HarvestFixedStaking } from './HarvestFixedStaking'
+import { FixedStakingPool, StakedPosition } from '../type'
+import { InlineText } from './InlineText'
+import { FixedStakingActions } from './FixedStakingActions'
+import { FixedStakingModal } from './FixedStakingModal'
+import { useCurrenDay } from '../hooks/useStakedPools'
+
+const FixedStakingRow = ({ pool, stakedPositions }: { pool: FixedStakingPool; stakedPositions: StakedPosition[] }) => {
+  const isBoost = useMemo(() => new BigNumber(pool.boostDayPercent).gt(0), [pool.boostDayPercent])
+  const { t } = useTranslation()
+  const totalStakedAmount = getBalanceAmount(pool.totalDeposited, pool.token.decimals)
+  const { isMobile, isTablet } = useMatchBreakpoints()
+
+  const currentDate = useCurrenDay()
+
+  const remainingDays = pool.endDay - currentDate
+
+  const formattedUsdValueStaked = useStablecoinPriceAmount(pool.token, totalStakedAmount.toNumber())
+  const stakePosition = stakedPositions.find((position) => position.pool.token.address === pool.token.address)
+
+  return (
+    <Pool.ExpandRow
+      initialActivity={false}
+      panel={
+        <StyledActionPanel expanded>
+          <InfoSection mt="8px">
+            <Flex alignItems="center" justifyContent="space-between">
+              <Text textTransform="uppercase" fontSize="12px">
+                {t('APR:')}
+              </Text>
+              <Balance fontSize={['14px', '14px', '16px']} value={0} decimals={2} unit="%" fontWeight={[600, 400]} />
+            </Flex>
+            <Flex alignItems="center" justifyContent="space-between">
+              <Text fontSize="12px">{t('Ends in')}</Text>
+              <Text color="textSubtle" fontSize="12px">
+                {remainingDays > 0 ? remainingDays : 0} {t('days')}
+              </Text>
+            </Flex>
+          </InfoSection>
+          <ActionContainer>
+            {stakePosition ? (
+              <ActionContainer pl={['0px', '0px', '0px', '0px', '32px']}>
+                <HarvestFixedStaking
+                  lockPeriod={pool.lockPeriod}
+                  unlockTime={stakePosition.timestampEndLockPeriod}
+                  stakePositionUserInfo={stakePosition.userInfo}
+                  token={pool.token}
+                  poolIndex={pool.poolIndex}
+                />
+              </ActionContainer>
+            ) : null}
+            <ActionContainer>
+              {stakePosition ? (
+                <LightGreyCard mb="16px" mt="8px" ml={['0px', '0px', '32px']}>
+                  <Box display="inline">
+                    <InlineText color="secondary" bold fontSize="12px">
+                      {`${pool.token.symbol} `}
+                    </InlineText>
+                    <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
+                      {t('Staked')}
+                    </InlineText>
+                  </Box>
+                  <FixedStakingActions
+                    poolIndex={pool.poolIndex}
+                    lockPeriod={pool.lockPeriod}
+                    unlockTime={stakePosition?.timestampEndLockPeriod}
+                    stakePositionUserInfo={stakePosition?.userInfo}
+                    token={pool.token}
+                  />
+                </LightGreyCard>
+              ) : (
+                <LightGreyCard
+                  mb="16px"
+                  mt="8px"
+                  ml="32px"
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                  }}
+                >
+                  <Box display="inline">
+                    <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px" mr="4px">
+                      {t('Stake')}
+                    </InlineText>
+                    <InlineText color="secondary" bold fontSize="12px">
+                      {`${pool.token.symbol} `}
+                    </InlineText>
+                  </Box>
+                  <FixedStakingModal lockPeriod={pool.lockPeriod} poolIndex={pool.poolIndex} stakingToken={pool.token}>
+                    {(openModal) => <Button onClick={openModal}>{t('Stake')}</Button>}
+                  </FixedStakingModal>
+                </LightGreyCard>
+              )}
+            </ActionContainer>
+          </ActionContainer>
+        </StyledActionPanel>
+      }
+    >
+      <StyledCell minWidth="120px" display="flex" alignItems="center">
+        <CurrencyLogo currency={pool.token} size="40px" />
+        <Flex flexDirection="column" justifyContent="center" alignItems="start" ml="8px">
+          <Text color="secondary" fontSize="16px" bold>
+            {pool.token.symbol}
+          </Text>
+          {isBoost ? (
+            isMobile || isTablet ? (
+              <>
+                <LockedFixedTag
+                  style={{
+                    height: '16px',
+                    marginBottom: '4px',
+                  }}
+                >
+                  {pool.lockPeriod}D
+                </LockedFixedTag>
+                {isBoost ? (
+                  <Tag
+                    outline
+                    variant="success"
+                    style={{ height: '16px', width: 'fit-content', padding: '0 4px' }}
+                    startIcon={<StarFillIcon width="12px" color="success" scale="sm" />}
+                  >
+                    <Text bold color="success" fontSize="12px">
+                      vCAKE
+                    </Text>
+                  </Tag>
+                ) : null}
+              </>
+            ) : isBoost ? (
+              <Tag
+                outline
+                variant="success"
+                style={{ height: '16px', width: 'fit-content', padding: '0 4px' }}
+                startIcon={<StarFillIcon width="12px" color="success" scale="sm" />}
+              >
+                <Text bold color="success" fontSize="12px">
+                  vCAKE Boost
+                </Text>
+              </Tag>
+            ) : null
+          ) : null}
+        </Flex>
+      </StyledCell>
+      {isMobile || isTablet ? null : (
+        <StyledCell>
+          <Pool.CellContent>
+            <Text fontSize="12px" color="textSubtle" textAlign="left" mb="4px">
+              Lock Periods
+            </Text>
+            <LockedFixedTag>{pool.lockPeriod}D</LockedFixedTag>
+          </Pool.CellContent>
+        </StyledCell>
+      )}
+      <StyledCell>
+        <Pool.CellContent>
+          <Text fontSize="12px" color="textSubtle" textAlign="left" mb="4px">
+            {t('APR')}
+          </Text>
+          <Balance fontSize={['14px', '14px', '16px']} value={0} decimals={2} unit="%" fontWeight={[600, 400]} />
+        </Pool.CellContent>
+      </StyledCell>
+      <StyledCell>
+        <Pool.CellContent>
+          <Text fontSize="12px" color="textSubtle" textAlign="left" mb="4px">
+            {t('Total Staked:')}
+          </Text>
+          <Balance
+            fontSize={['14px', '14px', '16px']}
+            value={formattedUsdValueStaked}
+            decimals={2}
+            unit="$"
+            fontWeight={[600, 400]}
+          />
+        </Pool.CellContent>
+      </StyledCell>
+      {isMobile || isTablet ? null : (
+        <StyledCell>
+          <Pool.CellContent>
+            <Text fontSize="12px" color="textSubtle" textAlign="left" mb="4px">
+              {t('Ends in')}
+            </Text>
+            <Text fontSize="12px" color="textSubtle" textAlign="left" mb="4px">
+              {remainingDays > 0 ? remainingDays : 0} {t('days')}
+            </Text>
+          </Pool.CellContent>
+        </StyledCell>
+      )}
+    </Pool.ExpandRow>
+  )
+}
+
+export default memo(FixedStakingRow)
diff --git a/apps/web/src/views/FixedStaking/components/HarvestFixedStaking.tsx b/apps/web/src/views/FixedStaking/components/HarvestFixedStaking.tsx
index 763a2fcdd12c10..cad478ec4b0def 100644
--- a/apps/web/src/views/FixedStaking/components/HarvestFixedStaking.tsx
+++ b/apps/web/src/views/FixedStaking/components/HarvestFixedStaking.tsx
@@ -8,8 +8,6 @@ import {
   PreTitle,
   Text,
   useModalV2,
-  Message,
-  MessageText,
   useToast,
   Balance,
 } from '@pancakeswap/uikit'
@@ -36,11 +34,13 @@ export function HarvestFixedStaking({
   stakePositionUserInfo,
   unlockTime,
   lockPeriod,
+  poolIndex,
 }: {
   unlockTime: number
   token: Token
   stakePositionUserInfo: StakePositionUserInfo
   lockPeriod: number
+  poolIndex: number
 }) {
   const { t } = useTranslation()
   const stakeModal = useModalV2()
@@ -49,26 +49,26 @@ export function HarvestFixedStaking({
   const { callWithGasPrice } = useCallWithGasPrice()
   const { toastSuccess } = useToast()
 
-  const totalStakedAmount = getBalanceAmount(stakePositionUserInfo.userDeposit, token.decimals)
+  const earnedAmount = getBalanceAmount(stakePositionUserInfo.accrueInterest, token.decimals)
 
-  const formattedUsdValueStaked = useStablecoinPriceAmount(token, totalStakedAmount.toNumber())
+  const formattedUsdEarnedAmount = useStablecoinPriceAmount(token, earnedAmount.toNumber())
 
   const handleSubmission = useCallback(async () => {
     const receipt = await fetchWithCatchTxError(() => {
-      const methodArgs = [0]
-      return callWithGasPrice(fixedStakingContract, 'withdraw', methodArgs)
+      const methodArgs = [poolIndex]
+      return callWithGasPrice(fixedStakingContract, 'harvest', methodArgs)
     })
 
     if (receipt?.status) {
       toastSuccess(
         t('Successfully submitted!'),
         <ToastDescriptionWithTx txHash={receipt.transactionHash}>
-          {t('Your withdrawn request has been submitted.')}
+          {t('Your harvest request has been submitted.')}
         </ToastDescriptionWithTx>,
       )
       stakeModal.onDismiss()
     }
-  }, [callWithGasPrice, fetchWithCatchTxError, fixedStakingContract, stakeModal, t, toastSuccess])
+  }, [callWithGasPrice, fetchWithCatchTxError, fixedStakingContract, poolIndex, stakeModal, t, toastSuccess])
 
   const shouldUnlock = differenceInMilliseconds(unlockTime * 1_000, new Date())
 
@@ -79,27 +79,28 @@ export function HarvestFixedStaking({
           <Flex>
             <Box>
               <Flex>
-                <Balance color="secondary" bold fontSize="16px" decimals={2} value={totalStakedAmount.toNumber()} />
+                <Balance color="secondary" bold fontSize="16px" decimals={4} value={earnedAmount.toNumber()} />
                 <Text color="secondary" ml="4px" bold>
                   {token.symbol}
                 </Text>
               </Flex>
-              <Balance unit=" USD" bold prefix="~$" fontSize="14px" decimals={0} value={formattedUsdValueStaked} />
+              <Balance unit=" USD" bold prefix="~$" fontSize="14px" decimals={2} value={formattedUsdEarnedAmount} />
             </Box>
           </Flex>
-          {shouldUnlock ? <UnlockedFixedTag>{t('End')}</UnlockedFixedTag> : <LockedFixedTag>{t('90D')}</LockedFixedTag>}
+          {shouldUnlock ? (
+            <UnlockedFixedTag>{t('Ended')}</UnlockedFixedTag>
+          ) : (
+            <LockedFixedTag>{unlockTime}D</LockedFixedTag>
+          )}
         </Flex>
         <Flex justifyContent="space-between" width="100%">
           <Box>
             <Text color="textSubtle" fontSize="12px">
-              APR: 35%
+              APR: 0%
             </Text>
             <Text color="textSubtle" fontSize="12px">
               Unlock on {format(unlockTime * 1_000, 'MMM d, yyyy')}
             </Text>
-            <Text color="textSubtle" fontSize="12px">
-              Est. Reward: 2.155 {token.symbol}
-            </Text>
           </Box>
           <Button height="auto" onClick={stakeModal.onOpen} variant="secondary">
             {t('Harvest')}
@@ -115,7 +116,7 @@ export function HarvestFixedStaking({
                 {token?.symbol}
               </Heading>
               {shouldUnlock ? (
-                <UnlockedFixedTag>{t('End')}</UnlockedFixedTag>
+                <UnlockedFixedTag>{t('Ended')}</UnlockedFixedTag>
               ) : (
                 <LockedFixedTag>{lockPeriod}D</LockedFixedTag>
               )}
@@ -128,15 +129,15 @@ export function HarvestFixedStaking({
             <Flex justifyContent="space-between">
               <Box>
                 <PreTitle fontSize="12px" color="textSubtle">
-                  {t('Stake Amount')}
+                  {t('Earned Amount')}
                 </PreTitle>
                 <Flex>
-                  <Balance bold fontSize="16px" decimals={2} value={totalStakedAmount.toNumber()} />
+                  <Balance bold fontSize="16px" decimals={4} value={earnedAmount.toNumber()} />
                   <Text ml="4px" bold>
                     {token.symbol}
                   </Text>
                 </Flex>
-                <Balance bold prefix="~$" fontSize="14px" decimals={0} value={formattedUsdValueStaked} />
+                <Balance bold prefix="~$" fontSize="14px" decimals={2} value={formattedUsdEarnedAmount} />
               </Box>
               <Box>
                 <PreTitle fontSize="12px" color="textSubtle">
@@ -157,57 +158,7 @@ export function HarvestFixedStaking({
               </Box>
             </Flex>
           </LightCard>
-          <PreTitle fontSize="12px" color="textSubtle">
-            {t('Position Details')}
-          </PreTitle>
-          <LightCard mb="16px">
-            <Flex alignItems="center" justifyContent="space-between">
-              <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
-                Duration
-              </Text>
-              <Text bold>{lockPeriod} Days</Text>
-            </Flex>
-            <Flex alignItems="center" justifyContent="space-between">
-              <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
-                APR
-              </Text>
-              <Text bold>36%</Text>
-            </Flex>
-            <Flex alignItems="center" justifyContent="space-between">
-              <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
-                Unlock Date
-              </Text>
-              <Text bold>{format(unlockTime * 1_000, 'MMM d, yyyy hh:mm')}</Text>
-            </Flex>
-            <Flex alignItems="center" justifyContent="space-between">
-              <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
-                Projected Return
-              </Text>
-              <Text bold>2.055 {token.symbol}</Text>
-            </Flex>
-          </LightCard>
-          <PreTitle fontSize="12px" color="textSubtle">
-            {t('Withdrawal Details')}
-          </PreTitle>
-          <LightCard mb="16px">
-            <Message variant="warning" mb="16px">
-              <MessageText maxWidth="200px">
-                {t('No rewards are credited for early withdrawal, and commission is required')}
-              </MessageText>
-            </Message>
-            <Flex alignItems="center" justifyContent="space-between">
-              <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
-                Withdrawal Commission
-              </Text>
-              <Text bold>1.2507 {token.symbol}</Text>
-            </Flex>
-            <Flex alignItems="center" justifyContent="space-between">
-              <Text textTransform="uppercase" fontSize={12} color="textSubtle" bold>
-                You Will Get
-              </Text>
-              <Text bold>1,1410 {token.symbol}</Text>
-            </Flex>
-          </LightCard>
+
           <Button
             disabled={pendingTx}
             style={{
@@ -215,7 +166,7 @@ export function HarvestFixedStaking({
             }}
             onClick={handleSubmission}
           >
-            {pendingTx ? t('Unstaking...') : t('Unstake')}
+            {pendingTx ? t('Harvesting') : t('Harvest')}
           </Button>
         </Modal>
       </ModalV2>
diff --git a/apps/web/src/views/FixedStaking/components/InlineText.tsx b/apps/web/src/views/FixedStaking/components/InlineText.tsx
new file mode 100644
index 00000000000000..ead7783987323a
--- /dev/null
+++ b/apps/web/src/views/FixedStaking/components/InlineText.tsx
@@ -0,0 +1,6 @@
+import { Text } from '@pancakeswap/uikit'
+import styled from 'styled-components'
+
+export const InlineText = styled(Text)`
+  display: inline;
+`
diff --git a/apps/web/src/views/FixedStaking/components/LockedFixedTag.tsx b/apps/web/src/views/FixedStaking/components/LockedFixedTag.tsx
index 11c3b3a88a08af..0d41d5b839f0b3 100644
--- a/apps/web/src/views/FixedStaking/components/LockedFixedTag.tsx
+++ b/apps/web/src/views/FixedStaking/components/LockedFixedTag.tsx
@@ -1,8 +1,9 @@
 import { Tag, LockIcon } from '@pancakeswap/uikit'
+import { ReactNode, CSSProperties } from 'react'
 
-export function LockedFixedTag({ children }) {
+export function LockedFixedTag({ children, style }: { children: ReactNode; style?: CSSProperties }) {
   return (
-    <Tag variant="secondary" startIcon={<LockIcon width="18px" color="white" />}>
+    <Tag style={style} variant="secondary" startIcon={<LockIcon width="18px" color="white" />}>
       {children}
     </Tag>
   )
diff --git a/apps/web/src/views/FixedStaking/hooks/useStakedPools.ts b/apps/web/src/views/FixedStaking/hooks/useStakedPools.ts
index 6eb83999cf879a..7cb2375be9d0fc 100644
--- a/apps/web/src/views/FixedStaking/hooks/useStakedPools.ts
+++ b/apps/web/src/views/FixedStaking/hooks/useStakedPools.ts
@@ -6,8 +6,26 @@ import { useContractRead } from 'wagmi'
 import toNumber from 'lodash/toNumber'
 import { useMemo } from 'react'
 import { useSingleContractMultipleData } from 'state/multicall/hooks'
+import BigNumber from 'bignumber.js'
 import { FixedStakingPool, StakedPosition } from '../type'
 
+export function useCurrenDay(): number {
+  const fixedStakingContract = useFixedStakingContract()
+
+  const { chainId } = useActiveWeb3React()
+
+  const { data } = useContractRead({
+    abi: fixedStakingContract.abi,
+    address: fixedStakingContract.address as `0x${string}`,
+    functionName: 'getCurrentDay',
+    enabled: true,
+    watch: true,
+    chainId,
+  })
+
+  return (data || 0) as number
+}
+
 export function useStakedPositionsByUser(): StakedPosition[] {
   const fixedStakingContract = useFixedStakingContract()
   const { account, chainId } = useActiveWeb3React()
@@ -80,7 +98,7 @@ export function useStakedPools(): FixedStakingPool[] {
         depositEnabled: fixedStakePool[7],
         maxDeposit: fixedStakePool[8],
         minDeposit: fixedStakePool[9],
-        totalDeposited: fixedStakePool[10],
+        totalDeposited: new BigNumber(fixedStakePool[10]),
         maxPoolAmount: fixedStakePool[11],
         minBoostAmount: fixedStakePool[12],
       }
diff --git a/apps/web/src/views/FixedStaking/index.tsx b/apps/web/src/views/FixedStaking/index.tsx
index 9c1e46fa046809..b6225a628b2f57 100644
--- a/apps/web/src/views/FixedStaking/index.tsx
+++ b/apps/web/src/views/FixedStaking/index.tsx
@@ -1,110 +1,42 @@
 import { useTranslation } from '@pancakeswap/localization'
 import {
-  CardBody,
   Flex,
   FlexLayout,
   Heading,
-  StarFillIcon,
   PageHeader,
-  Tag,
-  Box,
-  Text,
-  Button,
+  Pool,
+  ToggleView,
+  ViewMode,
+  ButtonMenu,
+  ButtonMenuItem,
 } from '@pancakeswap/uikit'
-import { StyledCard } from '@pancakeswap/uikit/src/widgets/Pool'
 import Page from 'components/Layout/Page'
-import CurrencyLogo from 'components/Logo/CurrencyLogo'
-import BigNumber from 'bignumber.js'
-import styled from 'styled-components'
+import { useState } from 'react'
+import { useCurrenDay, useStakedPools, useStakedPositionsByUser } from './hooks/useStakedPools'
+import { FixedStakingCard } from './components/FixedStakingCard'
+import FixedStakingRow from './components/FixedStakingRow'
 
-import { FixedStakingCardBody } from './components/FixedStakingCardBody'
-import { FixedStakingPosition } from './components/FixedStakingPosition'
-import { useStakedPools, useStakedPositionsByUser } from './hooks/useStakedPools'
-import { FixedStakingPool, StakedPosition } from './type'
-import { HarvestFixedStaking } from './components/HarvestFixedStaking'
-import { FixedStakingModal } from './components/FixedStakingModal'
-
-const InlineText = styled(Text)`
-  display: inline;
-`
-
-function FixedStakingCard({ pool, stakedPositions }: { pool: FixedStakingPool; stakedPositions: StakedPosition[] }) {
-  const { t } = useTranslation()
-
-  const stakePosition = stakedPositions.find((position) => position.pool.token.address === pool.token.address)
-
-  return (
-    <StyledCard>
-      <Flex px="24px" pt="24px" alignItems="center" justifyContent="space-between">
-        <>
-          <CurrencyLogo currency={pool.token} size="56px" />
-          <Box>
-            <Heading color="secondary" scale="lg" textAlign="end">
-              {pool.token.symbol}
-            </Heading>
-            {new BigNumber(pool.boostDayPercent).gt(0) ? (
-              <Tag outline variant="success" startIcon={<StarFillIcon width="18px" color="success" />}>
-                vCAKE Boost
-              </Tag>
-            ) : null}
-          </Box>
-        </>
-      </Flex>
-      <CardBody>
-        <FixedStakingCardBody pool={pool}>
-          {stakePosition ? (
-            <>
-              <Box display="inline">
-                <InlineText color="secondary" bold fontSize="12px">
-                  {`${pool.token.symbol} `}
-                </InlineText>
-                <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
-                  {t('Earned')}
-                </InlineText>
-              </Box>
-              <HarvestFixedStaking
-                lockPeriod={pool.lockPeriod}
-                unlockTime={stakePosition.timestampEndLockPeriod}
-                stakePositionUserInfo={stakePosition.userInfo}
-                token={pool.token}
-              />
-            </>
-          ) : null}
-          {stakePosition ? (
-            <>
-              <Box display="inline">
-                <InlineText color="secondary" bold fontSize="12px">
-                  {`${pool.token.symbol} `}
-                </InlineText>
-                <InlineText color="textSubtle" textTransform="uppercase" bold fontSize="12px">
-                  {t('Staked')}
-                </InlineText>
-              </Box>
-              <FixedStakingPosition
-                poolIndex={pool.poolIndex}
-                lockPeriod={pool.lockPeriod}
-                unlockTime={stakePosition.timestampEndLockPeriod}
-                stakePositionUserInfo={stakePosition.userInfo}
-                token={pool.token}
-              />
-            </>
-          ) : (
-            <FixedStakingModal lockPeriod={pool.lockPeriod} poolIndex={pool.poolIndex} stakingToken={pool.token}>
-              {(openModal) => <Button onClick={openModal}>{t('Stake')}</Button>}
-            </FixedStakingModal>
-          )}
-        </FixedStakingCardBody>
-      </CardBody>
-    </StyledCard>
-  )
+enum POOL_STATUS {
+  Finished = 1,
+  Live = 0,
 }
 
 const FixedStaking = () => {
   const { t } = useTranslation()
 
+  const [viewMode, setViewMode] = useState(ViewMode.TABLE)
+
+  const [poolStatus, togglePoolStatus] = useState(POOL_STATUS.Live)
+
   const stakingPools = useStakedPools()
 
   const stakedPositions = useStakedPositionsByUser()
+  const currentDate = useCurrenDay()
+
+  const displayPools =
+    poolStatus === POOL_STATUS.Live
+      ? stakingPools.filter((pool) => pool.endDay > currentDate)
+      : stakingPools.filter((pool) => pool.endDay <= currentDate)
 
   return (
     <>
@@ -121,19 +53,44 @@ const FixedStaking = () => {
         </Flex>
       </PageHeader>
       <Page title={t('Pools')}>
-        <FlexLayout>
-          {stakingPools.map(
-            (pool) =>
-              pool?.token && (
-                <FixedStakingCard
-                  pool={pool}
-                  stakedPositions={stakedPositions.filter(
-                    ({ pool: stakedPool }) => stakedPool.token.address === pool.token.address,
-                  )}
-                />
-              ),
-          )}
-        </FlexLayout>
+        <Flex mb="24px">
+          <ToggleView idPrefix="clickFarm" viewMode={viewMode} onToggle={setViewMode} />
+          <Flex>
+            <ButtonMenu activeIndex={poolStatus} scale="sm" variant="subtle" onItemClick={togglePoolStatus}>
+              <ButtonMenuItem>{t('Live')}</ButtonMenuItem>
+              <ButtonMenuItem>{t('Finished')}</ButtonMenuItem>
+            </ButtonMenu>
+          </Flex>
+        </Flex>
+        {viewMode === ViewMode.TABLE ? (
+          <Pool.PoolsTable>
+            {displayPools.map(
+              (pool) =>
+                pool && (
+                  <FixedStakingRow
+                    stakedPositions={stakedPositions.filter(
+                      ({ pool: stakedPool }) => stakedPool.token.address === pool.token.address,
+                    )}
+                    pool={pool}
+                  />
+                ),
+            )}
+          </Pool.PoolsTable>
+        ) : (
+          <FlexLayout>
+            {displayPools.map(
+              (pool) =>
+                pool?.token && (
+                  <FixedStakingCard
+                    pool={pool}
+                    stakedPositions={stakedPositions.filter(
+                      ({ pool: stakedPool }) => stakedPool.token.address === pool.token.address,
+                    )}
+                  />
+                ),
+            )}
+          </FlexLayout>
+        )}
       </Page>
     </>
   )
diff --git a/apps/web/src/views/FixedStaking/type.ts b/apps/web/src/views/FixedStaking/type.ts
index a9cd322abfd38b..00a7d2afd2bda3 100644
--- a/apps/web/src/views/FixedStaking/type.ts
+++ b/apps/web/src/views/FixedStaking/type.ts
@@ -19,7 +19,7 @@ export interface FixedStakingPool {
   depositEnabled: boolean
   maxDeposit: number
   minDeposit: number
-  totalDeposited: number
+  totalDeposited: BigNumber
   maxPoolAmount: number
   minBoostAmount: number
 }
diff --git a/apps/web/src/views/Pools/components/PoolsTable/ActionPanel/ActionPanel.tsx b/apps/web/src/views/Pools/components/PoolsTable/ActionPanel/ActionPanel.tsx
index 5b64805d54955c..566660513b22ef 100644
--- a/apps/web/src/views/Pools/components/PoolsTable/ActionPanel/ActionPanel.tsx
+++ b/apps/web/src/views/Pools/components/PoolsTable/ActionPanel/ActionPanel.tsx
@@ -37,7 +37,7 @@ const collapseAnimation = keyframes`
   }
 `
 
-const StyledActionPanel = styled.div<{ expanded: boolean }>`
+export const StyledActionPanel = styled.div<{ expanded: boolean }>`
   animation: ${({ expanded }) =>
     expanded
       ? css`
@@ -59,7 +59,7 @@ const StyledActionPanel = styled.div<{ expanded: boolean }>`
   }
 `
 
-const ActionContainer = styled.div<{ isAutoVault?: boolean; hasBalance?: boolean }>`
+export const ActionContainer = styled(Box)<{ isAutoVault?: boolean; hasBalance?: boolean }>`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -81,7 +81,7 @@ interface ActionPanelProps {
   expanded: boolean
 }
 
-const InfoSection = styled(Box)`
+export const InfoSection = styled(Box)`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
diff --git a/apps/web/src/views/Pools/components/PoolsTable/Cells/NameCell.tsx b/apps/web/src/views/Pools/components/PoolsTable/Cells/NameCell.tsx
index 57fa806f82f6ea..565571ae82ef91 100644
--- a/apps/web/src/views/Pools/components/PoolsTable/Cells/NameCell.tsx
+++ b/apps/web/src/views/Pools/components/PoolsTable/Cells/NameCell.tsx
@@ -15,7 +15,7 @@ interface NameCellProps {
   pool: Pool.DeserializedPool<Token>
 }
 
-const StyledCell = styled(Pool.BaseCell)`
+export const StyledCell = styled(Pool.BaseCell)`
   flex: 5;
   flex-direction: row;
   padding-left: 12px;