diff --git a/frontend/src/app/core/pages/asset-home/index.tsx b/frontend/src/app/core/pages/asset-home/index.tsx
index 66246c17..eb479688 100644
--- a/frontend/src/app/core/pages/asset-home/index.tsx
+++ b/frontend/src/app/core/pages/asset-home/index.tsx
@@ -9,6 +9,7 @@ import { assetHomeHelper } from 'utils/constants/helpers'
 import { AssetActions } from 'components/enums/asset-actions'
 import { PathRoute } from 'components/enums/path-route'
 import { ActionHelper } from 'components/molecules/action-helper'
+import { TChartPeriod } from 'components/molecules/chart-period'
 import { ManagementBreadcrumb } from 'components/molecules/management-breadcrumb'
 import { MenuActionsAsset } from 'components/organisms/menu-actions-asset'
 import { Sidebar } from 'components/organisms/sidebar'
@@ -18,6 +19,8 @@ export const AssetHome: React.FC = () => {
   const [asset, setAsset] = useState<Hooks.UseAssetsTypes.IAssetDto>()
   const [paymentsAsset, setPaymentsAsset] =
     useState<Hooks.UseDashboardsTypes.IAsset>()
+  const [chartPeriod, setChartPeriod] = useState<TChartPeriod>('24h')
+
   const { loadingAsset, getAssetById } = useAssets()
   const { getPaymentsByAssetId, loadingChart } = useDashboards()
   const { id } = useParams()
@@ -30,11 +33,11 @@ export const AssetHome: React.FC = () => {
 
   useEffect(() => {
     if (id) {
-      getPaymentsByAssetId(id).then(paymentsAsset =>
+      getPaymentsByAssetId(id, 0, chartPeriod).then(paymentsAsset =>
         setPaymentsAsset(paymentsAsset)
       )
     }
-  }, [getPaymentsByAssetId, id])
+  }, [chartPeriod, getPaymentsByAssetId, id])
 
   return (
     <Flex>
@@ -50,6 +53,8 @@ export const AssetHome: React.FC = () => {
                 asset={asset}
                 loadingChart={loadingChart}
                 paymentsAsset={paymentsAsset}
+                chartPeriod={chartPeriod}
+                setChartPeriod={setChartPeriod}
               />
             )}
           </Flex>
diff --git a/frontend/src/app/core/pages/burn-asset/index.tsx b/frontend/src/app/core/pages/burn-asset/index.tsx
index f016e67c..b742fe91 100644
--- a/frontend/src/app/core/pages/burn-asset/index.tsx
+++ b/frontend/src/app/core/pages/burn-asset/index.tsx
@@ -4,12 +4,14 @@ import { FieldValues, UseFormSetValue } from 'react-hook-form'
 import { useParams } from 'react-router-dom'
 
 import { useAssets } from 'hooks/useAssets'
+import { useDashboards } from 'hooks/useDashboards'
 import { burnHelper } from 'utils/constants/helpers'
 import { MessagesError } from 'utils/constants/messages-error'
 
 import { AssetActions } from 'components/enums/asset-actions'
 import { PathRoute } from 'components/enums/path-route'
 import { ActionHelper } from 'components/molecules/action-helper'
+import { TChartPeriod } from 'components/molecules/chart-period'
 import { ManagementBreadcrumb } from 'components/molecules/management-breadcrumb'
 import { MenuActionsAsset } from 'components/organisms/menu-actions-asset'
 import { Sidebar } from 'components/organisms/sidebar'
@@ -17,7 +19,14 @@ import { BurnAssetTemplate } from 'components/templates/burn-asset'
 
 export const BurnAsset: React.FC = () => {
   const [asset, setAsset] = useState<Hooks.UseAssetsTypes.IAssetDto>()
+  const [mintOperations, setMintOperations] =
+    useState<Hooks.UseDashboardsTypes.IAsset>()
+  const [burnOperations, setBurnOperations] =
+    useState<Hooks.UseDashboardsTypes.IAsset>()
+  const [chartPeriod, setChartPeriod] = useState<TChartPeriod>('24h')
+
   const { burn, getAssetById, loadingOperation, loadingAsset } = useAssets()
+  const { loadingChart, getPaymentsByAssetId } = useDashboards()
   const { id } = useParams()
   const toast = useToast()
 
@@ -63,6 +72,22 @@ export const BurnAsset: React.FC = () => {
     }
   }, [getAssetById, id])
 
+  useEffect(() => {
+    if (id) {
+      getPaymentsByAssetId(id, 2, chartPeriod).then(paymentsAsset => {
+        setMintOperations(paymentsAsset)
+      })
+    }
+  }, [chartPeriod, getPaymentsByAssetId, id])
+
+  useEffect(() => {
+    if (id) {
+      getPaymentsByAssetId(id, 5, chartPeriod).then(paymentsAsset => {
+        setBurnOperations(paymentsAsset)
+      })
+    }
+  }, [chartPeriod, getPaymentsByAssetId, id])
+
   const toastError = (message: string): void => {
     toast({
       title: 'Burn error!',
@@ -85,9 +110,14 @@ export const BurnAsset: React.FC = () => {
             ) : (
               <BurnAssetTemplate
                 onSubmit={onSubmit}
+                setChartPeriod={setChartPeriod}
                 loading={loadingOperation}
                 asset={asset}
                 assetData={asset.assetData}
+                mintOperations={mintOperations}
+                burnOperations={burnOperations}
+                loadingChart={loadingChart}
+                chartPeriod={chartPeriod}
               />
             )}
           </Flex>
diff --git a/frontend/src/app/core/pages/dashboards/index.tsx b/frontend/src/app/core/pages/dashboards/index.tsx
index 1cb899e5..3760d57a 100644
--- a/frontend/src/app/core/pages/dashboards/index.tsx
+++ b/frontend/src/app/core/pages/dashboards/index.tsx
@@ -6,6 +6,7 @@ import { useDashboards } from 'hooks/useDashboards'
 import { useVaults } from 'hooks/useVaults'
 
 import { PathRoute } from 'components/enums/path-route'
+import { TChartPeriod } from 'components/molecules/chart-period'
 import { Sidebar } from 'components/organisms/sidebar'
 import { DashboardsTemplate } from 'components/templates/dashboards'
 
@@ -15,6 +16,7 @@ export const Dashboards: React.FC = () => {
     useState<Hooks.UseVaultsTypes.IVaultCategory[]>()
   const [paymentsAssets, setPaymentsAssets] =
     useState<Hooks.UseDashboardsTypes.IAsset[]>()
+  const [chartPeriod, setChartPeriod] = useState<TChartPeriod>('24h')
 
   const { loadingVaults, getVaults, getVaultCategories } = useVaults()
   const { loadingChart, getPayments } = useDashboards()
@@ -31,8 +33,10 @@ export const Dashboards: React.FC = () => {
   }, [getVaultCategories])
 
   useEffect(() => {
-    getPayments().then(paymentsAssets => setPaymentsAssets(paymentsAssets))
-  }, [getPayments])
+    getPayments(chartPeriod).then(paymentsAssets =>
+      setPaymentsAssets(paymentsAssets)
+    )
+  }, [chartPeriod, getPayments])
 
   useEffect(() => {
     getAssets()
@@ -49,6 +53,8 @@ export const Dashboards: React.FC = () => {
           vaultCategories={vaultCategories}
           assets={assets}
           loadingAssets={loadingAssets}
+          chartPeriod={chartPeriod}
+          setChartPeriod={setChartPeriod}
         />
       </Sidebar>
     </Flex>
diff --git a/frontend/src/app/core/pages/mint-asset/index.tsx b/frontend/src/app/core/pages/mint-asset/index.tsx
index 0b2a36f3..ed5e44bf 100644
--- a/frontend/src/app/core/pages/mint-asset/index.tsx
+++ b/frontend/src/app/core/pages/mint-asset/index.tsx
@@ -4,12 +4,14 @@ import { FieldValues, UseFormSetValue } from 'react-hook-form'
 import { useParams } from 'react-router-dom'
 
 import { useAssets } from 'hooks/useAssets'
+import { useDashboards } from 'hooks/useDashboards'
 import { mintHelper } from 'utils/constants/helpers'
 import { MessagesError } from 'utils/constants/messages-error'
 
 import { AssetActions } from 'components/enums/asset-actions'
 import { PathRoute } from 'components/enums/path-route'
 import { ActionHelper } from 'components/molecules/action-helper'
+import { TChartPeriod } from 'components/molecules/chart-period'
 import { ManagementBreadcrumb } from 'components/molecules/management-breadcrumb'
 import { MenuActionsAsset } from 'components/organisms/menu-actions-asset'
 import { Sidebar } from 'components/organisms/sidebar'
@@ -17,7 +19,14 @@ import { MintAssetTemplate } from 'components/templates/mint-asset'
 
 export const MintAsset: React.FC = () => {
   const [asset, setAsset] = useState<Hooks.UseAssetsTypes.IAssetDto>()
+  const [mintOperations, setMintOperations] =
+    useState<Hooks.UseDashboardsTypes.IAsset>()
+  const [burnOperations, setBurnOperations] =
+    useState<Hooks.UseDashboardsTypes.IAsset>()
+  const [chartPeriod, setChartPeriod] = useState<TChartPeriod>('24h')
+
   const { mint, getAssetById, loadingOperation, loadingAsset } = useAssets()
+  const { loadingChart, getPaymentsByAssetId } = useDashboards()
   const { id } = useParams()
   const toast = useToast()
 
@@ -63,6 +72,22 @@ export const MintAsset: React.FC = () => {
     }
   }, [getAssetById, id])
 
+  useEffect(() => {
+    if (id) {
+      getPaymentsByAssetId(id, 2, chartPeriod).then(paymentsAsset => {
+        setMintOperations(paymentsAsset)
+      })
+    }
+  }, [chartPeriod, getPaymentsByAssetId, id])
+
+  useEffect(() => {
+    if (id) {
+      getPaymentsByAssetId(id, 5, chartPeriod).then(paymentsAsset => {
+        setBurnOperations(paymentsAsset)
+      })
+    }
+  }, [chartPeriod, getPaymentsByAssetId, id])
+
   const toastError = (message: string): void => {
     toast({
       title: 'Mint error!',
@@ -85,9 +110,14 @@ export const MintAsset: React.FC = () => {
             ) : (
               <MintAssetTemplate
                 onSubmit={onSubmit}
+                setChartPeriod={setChartPeriod}
                 loading={loadingOperation}
                 asset={asset}
                 assetData={asset.assetData}
+                mintOperations={mintOperations}
+                burnOperations={burnOperations}
+                loadingChart={loadingChart}
+                chartPeriod={chartPeriod}
               />
             )}
           </Flex>
diff --git a/frontend/src/components/molecules/chart-mint-burn/index.tsx b/frontend/src/components/molecules/chart-mint-burn/index.tsx
new file mode 100644
index 00000000..f637bb4e
--- /dev/null
+++ b/frontend/src/components/molecules/chart-mint-burn/index.tsx
@@ -0,0 +1,135 @@
+import {
+  Box,
+  Container,
+  Flex,
+  Skeleton,
+  Text,
+  useColorMode,
+} from '@chakra-ui/react'
+import { Dispatch, SetStateAction } from 'react'
+import Chart from 'react-apexcharts'
+
+import { getChartLabels, isEqualLabel } from 'utils/constants/dashboards'
+import { toCrypto } from 'utils/formatter'
+
+import { ChartPeriod, TChartPeriod } from '../chart-period'
+
+interface IChartMintBurn {
+  loadingChart: boolean
+  mintOperations: Hooks.UseDashboardsTypes.IAsset
+  burnOperations: Hooks.UseDashboardsTypes.IAsset
+  chartPeriod: TChartPeriod
+  setChartPeriod: Dispatch<SetStateAction<TChartPeriod>>
+}
+
+export const ChartMintBurn: React.FC<IChartMintBurn> = ({
+  mintOperations,
+  burnOperations,
+  chartPeriod,
+  loadingChart,
+  setChartPeriod,
+}) => {
+  const { colorMode } = useColorMode()
+
+  const series = [
+    {
+      name: 'Mint',
+      data: getChartLabels(chartPeriod).map(label => {
+        const index = mintOperations.date?.findIndex(date =>
+          isEqualLabel(chartPeriod, date, label)
+        )
+        return index > -1 ? mintOperations.amount[index] : 0
+      }),
+    },
+    {
+      name: 'Burn',
+      data: getChartLabels(chartPeriod).map(label => {
+        const index = burnOperations.date?.findIndex(date =>
+          isEqualLabel(chartPeriod, date, label)
+        )
+        return index > -1 ? burnOperations.amount[index] : 0
+      }),
+    },
+  ]
+
+  const options = {
+    chart: {
+      id: 'line',
+      foreColor: colorMode === 'dark' ? 'white' : 'black',
+      toolbar: {
+        show: true,
+        offsetX: 0,
+        offsetY: 0,
+        tools: {
+          download: false,
+          selection: false,
+          zoom: true,
+          zoomin: true,
+          zoomout: true,
+          pan: false,
+          reset: true,
+        },
+      },
+      stroke: {
+        curve: 'smooth',
+      },
+    },
+    tooltip: {
+      theme: colorMode,
+    },
+    xaxis: {
+      categories: getChartLabels(chartPeriod),
+      labels: {
+        show: true,
+        formatter: function (value: string): string {
+          return `${chartPeriod === '24h' ? `${value}h` : `${value}`}`
+        },
+      },
+    },
+    yaxis: {
+      labels: {
+        show: true,
+        formatter: function (value: number): string {
+          return `${toCrypto(value)}`
+        },
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+  }
+
+  return (
+    <Container
+      variant="primary"
+      justifyContent="center"
+      py="0.5rem"
+      px="0.75rem"
+      w="full"
+      maxW="full"
+      mt="1rem"
+    >
+      <Flex justifyContent="space-between" mb="1.25rem">
+        <Text fontSize="xs" fontWeight="600">
+          Mint/Burn timeline
+        </Text>
+        <Flex>
+          <ChartPeriod period={chartPeriod} setPeriod={setChartPeriod} />
+        </Flex>
+      </Flex>
+      <Box>
+        {loadingChart ? (
+          <Skeleton h="12rem" w="full" />
+        ) : (
+          <Chart
+            options={options}
+            series={series}
+            type="line"
+            width="100%"
+            height="320px"
+          />
+        )}
+      </Box>
+    </Container>
+  )
+}
diff --git a/frontend/src/components/molecules/chart-period/index.tsx b/frontend/src/components/molecules/chart-period/index.tsx
new file mode 100644
index 00000000..a3d6c1d2
--- /dev/null
+++ b/frontend/src/components/molecules/chart-period/index.tsx
@@ -0,0 +1,47 @@
+import { Button, Container, Flex } from '@chakra-ui/react'
+import React, { Dispatch, SetStateAction } from 'react'
+
+export type TChartPeriod = '24h' | '7d' | '30d'
+
+interface IChartPeriod {
+  period: TChartPeriod
+  setPeriod: Dispatch<SetStateAction<TChartPeriod>>
+}
+
+export const ChartPeriod: React.FC<IChartPeriod> = ({ period, setPeriod }) => {
+  return (
+    <Container variant="primary" p="0" h="2rem">
+      <Flex>
+        <Button
+          variant={period === '24h' ? 'menuButtonSelected' : 'menuButton'}
+          borderStartRadius="0.25rem"
+          h="2rem"
+          onClick={(): void => {
+            setPeriod('24h')
+          }}
+        >
+          Last 24h
+        </Button>
+        <Button
+          variant={period === '7d' ? 'menuButtonSelected' : 'menuButton'}
+          h="2rem"
+          onClick={(): void => {
+            setPeriod('7d')
+          }}
+        >
+          7 days
+        </Button>
+        <Button
+          variant={period === '30d' ? 'menuButtonSelected' : 'menuButton'}
+          h="2rem"
+          borderEndRadius="0.25rem"
+          onClick={(): void => {
+            setPeriod('30d')
+          }}
+        >
+          30 days
+        </Button>
+      </Flex>
+    </Container>
+  )
+}
diff --git a/frontend/src/components/templates/asset-home/components/chart-payments/index.tsx b/frontend/src/components/templates/asset-home/components/chart-payments/index.tsx
index 94017f90..f286f406 100644
--- a/frontend/src/components/templates/asset-home/components/chart-payments/index.tsx
+++ b/frontend/src/components/templates/asset-home/components/chart-payments/index.tsx
@@ -1,19 +1,31 @@
-import { Box, Container, Flex, Text, useColorMode } from '@chakra-ui/react'
-import { FunctionComponent } from 'react'
+import {
+  Box,
+  Container,
+  Flex,
+  Skeleton,
+  Text,
+  useColorMode,
+} from '@chakra-ui/react'
+import { Dispatch, FunctionComponent, SetStateAction } from 'react'
 import Chart from 'react-apexcharts'
 
-import { getChartLabels } from 'utils/constants/dashboards'
+import { getChartLabels, isEqualLabel } from 'utils/constants/dashboards'
 import { toCrypto } from 'utils/formatter'
 
-import { HelpIcon } from 'components/icons'
+import { ChartPeriod, TChartPeriod } from 'components/molecules/chart-period'
 
 export interface IChartPayments {
   loadingChart: boolean
   paymentsAsset: Hooks.UseDashboardsTypes.IAsset
+  chartPeriod: TChartPeriod
+  setChartPeriod: Dispatch<SetStateAction<TChartPeriod>>
 }
 
 const ChartPayments: FunctionComponent<IChartPayments> = ({
   paymentsAsset,
+  chartPeriod,
+  loadingChart,
+  setChartPeriod,
 }) => {
   const { colorMode } = useColorMode()
 
@@ -47,13 +59,13 @@ const ChartPayments: FunctionComponent<IChartPayments> = ({
       enabled: true,
       enabledOnSeries: [1],
     },
-    labels: getChartLabels('24h'),
+    labels: getChartLabels(chartPeriod),
     xaxis: {
-      categories: getChartLabels('24h'),
+      categories: getChartLabels(chartPeriod),
       labels: {
         show: true,
         formatter: function (value: string): string {
-          return `${value}h`
+          return `${chartPeriod === '24h' ? `${value}h` : `${value}`}`
         },
       },
     },
@@ -86,10 +98,10 @@ const ChartPayments: FunctionComponent<IChartPayments> = ({
     {
       name: 'Volume',
       type: 'column',
-      data: getChartLabels('24h').map(label => {
+      data: getChartLabels(chartPeriod).map(label => {
         if (!paymentsAsset.date) return 0
-        const index = paymentsAsset.date?.findIndex(
-          date => new Date(date).getHours().toString() === label
+        const index = paymentsAsset.date?.findIndex(date =>
+          isEqualLabel(chartPeriod, date, label)
         )
         return index > -1 ? paymentsAsset.amount[index] : 0
       }),
@@ -97,10 +109,10 @@ const ChartPayments: FunctionComponent<IChartPayments> = ({
     {
       name: 'Payments',
       type: 'line',
-      data: getChartLabels('24h').map(label => {
+      data: getChartLabels(chartPeriod).map(label => {
         if (!paymentsAsset.date) return 0
-        const index = paymentsAsset.date?.findIndex(
-          date => new Date(date).getHours().toString() === label
+        const index = paymentsAsset.date?.findIndex(date =>
+          isEqualLabel(chartPeriod, date, label)
         )
         return index > -1 ? paymentsAsset.quantity[index] : null
       }),
@@ -122,11 +134,21 @@ const ChartPayments: FunctionComponent<IChartPayments> = ({
           Payments timeline
         </Text>
         <Flex>
-          <HelpIcon />
+          <ChartPeriod period={chartPeriod} setPeriod={setChartPeriod} />
         </Flex>
       </Flex>
       <Box>
-        <Chart options={options} series={series} type="area" width="100%" />
+        {loadingChart ? (
+          <Skeleton h="20rem" w="full" />
+        ) : (
+          <Chart
+            options={options}
+            series={series}
+            type="area"
+            width="100%"
+            height="320px"
+          />
+        )}
       </Box>
     </Container>
   )
diff --git a/frontend/src/components/templates/asset-home/index.tsx b/frontend/src/components/templates/asset-home/index.tsx
index 44dd2361..f86351d4 100644
--- a/frontend/src/components/templates/asset-home/index.tsx
+++ b/frontend/src/components/templates/asset-home/index.tsx
@@ -1,5 +1,5 @@
 import { Container, Flex, Tag, Text } from '@chakra-ui/react'
-import React from 'react'
+import React, { Dispatch, SetStateAction } from 'react'
 
 import {
   STELLAR_EXPERT_ASSET,
@@ -11,18 +11,23 @@ import { formatAccount, toCrypto } from 'utils/formatter'
 import { InfoCard } from '../contracts-detail/components/info-card'
 import { ChartPayments } from './components/chart-payments'
 import { LinkIcon, WalletIcon } from 'components/icons'
+import { TChartPeriod } from 'components/molecules/chart-period'
 
 interface IAssetHomeTemplate {
   loading: boolean
   loadingChart: boolean
   asset: Hooks.UseAssetsTypes.IAssetDto
   paymentsAsset: Hooks.UseDashboardsTypes.IAsset | undefined
+  chartPeriod: TChartPeriod
+  setChartPeriod: Dispatch<SetStateAction<TChartPeriod>>
 }
 
 export const AssetHomeTemplate: React.FC<IAssetHomeTemplate> = ({
   asset,
   loadingChart,
   paymentsAsset,
+  chartPeriod,
+  setChartPeriod,
 }) => {
   return (
     <Flex flexDir="column" w="full">
@@ -130,6 +135,8 @@ export const AssetHomeTemplate: React.FC<IAssetHomeTemplate> = ({
         <ChartPayments
           loadingChart={loadingChart}
           paymentsAsset={paymentsAsset}
+          chartPeriod={chartPeriod}
+          setChartPeriod={setChartPeriod}
         />
       )}
     </Flex>
diff --git a/frontend/src/components/templates/burn-asset/index.tsx b/frontend/src/components/templates/burn-asset/index.tsx
index 4ce8cf61..71e8ef78 100644
--- a/frontend/src/components/templates/burn-asset/index.tsx
+++ b/frontend/src/components/templates/burn-asset/index.tsx
@@ -9,14 +9,15 @@ import {
   Input,
   Text,
 } from '@chakra-ui/react'
-import React from 'react'
+import React, { Dispatch, SetStateAction } from 'react'
 import { FieldValues, UseFormSetValue, useForm } from 'react-hook-form'
 
 import { toCrypto } from 'utils/formatter'
 
 import { AssetHeader } from 'components/atoms'
 import { HelpIcon } from 'components/icons'
-import { ChartSupply } from 'components/molecules/chart-supply'
+import { ChartMintBurn } from 'components/molecules/chart-mint-burn'
+import { TChartPeriod } from 'components/molecules/chart-period'
 
 interface IBurnAssetTemplate {
   onSubmit(
@@ -26,13 +27,23 @@ interface IBurnAssetTemplate {
   loading: boolean
   asset: Hooks.UseAssetsTypes.IAssetDto
   assetData: Hooks.UseHorizonTypes.IAsset | undefined
+  mintOperations: Hooks.UseDashboardsTypes.IAsset | undefined
+  burnOperations: Hooks.UseDashboardsTypes.IAsset | undefined
+  loadingChart: boolean
+  chartPeriod: TChartPeriod
+  setChartPeriod: Dispatch<SetStateAction<TChartPeriod>>
 }
 
 export const BurnAssetTemplate: React.FC<IBurnAssetTemplate> = ({
   onSubmit,
+  setChartPeriod,
   loading,
   asset,
   assetData,
+  chartPeriod,
+  mintOperations,
+  burnOperations,
+  loadingChart,
 }) => {
   const {
     register,
@@ -102,7 +113,15 @@ export const BurnAssetTemplate: React.FC<IBurnAssetTemplate> = ({
           </form>
         </Box>
       </Container>
-      <ChartSupply />
+      {mintOperations && burnOperations && (
+        <ChartMintBurn
+          loadingChart={loadingChart}
+          mintOperations={mintOperations}
+          burnOperations={burnOperations}
+          chartPeriod={chartPeriod}
+          setChartPeriod={setChartPeriod}
+        />
+      )}
     </Flex>
   )
 }
diff --git a/frontend/src/components/templates/dashboards/components/chart-payments/index.tsx b/frontend/src/components/templates/dashboards/components/chart-payments/index.tsx
index 08faa702..0c97c137 100644
--- a/frontend/src/components/templates/dashboards/components/chart-payments/index.tsx
+++ b/frontend/src/components/templates/dashboards/components/chart-payments/index.tsx
@@ -1,25 +1,40 @@
-import { Text, Container, Flex, Box, useColorMode } from '@chakra-ui/react'
-import React from 'react'
+import {
+  Text,
+  Container,
+  Flex,
+  Box,
+  useColorMode,
+  Skeleton,
+} from '@chakra-ui/react'
+import React, { Dispatch, SetStateAction } from 'react'
 import Chart from 'react-apexcharts'
 
-import { getChartLabels } from 'utils/constants/dashboards'
+import { getChartLabels, isEqualLabel } from 'utils/constants/dashboards'
 import { toCrypto } from 'utils/formatter'
 
-import { HelpIcon } from 'components/icons'
+import { ChartPeriod, TChartPeriod } from 'components/molecules/chart-period'
 
 interface IChartPayments {
   loadingChart: boolean
   paymentsAssets: Hooks.UseDashboardsTypes.IAsset[]
+  chartPeriod: TChartPeriod
+  setChartPeriod: Dispatch<SetStateAction<TChartPeriod>>
 }
 
-export const ChartPayments: React.FC<IChartPayments> = ({ paymentsAssets }) => {
+export const ChartPayments: React.FC<IChartPayments> = ({
+  paymentsAssets,
+
+  chartPeriod,
+  loadingChart,
+  setChartPeriod,
+}) => {
   const { colorMode } = useColorMode()
 
   const series = paymentsAssets.map(paymentsAsset => ({
     name: paymentsAsset.asset.code,
-    data: getChartLabels('24h').map(label => {
-      const index = paymentsAsset.date.findIndex(
-        date => new Date(date).getHours().toString() === label
+    data: getChartLabels(chartPeriod).map(label => {
+      const index = paymentsAsset.date.findIndex(date =>
+        isEqualLabel(chartPeriod, date, label)
       )
       return index > -1 ? paymentsAsset.amount[index] : 0
     }),
@@ -48,11 +63,11 @@ export const ChartPayments: React.FC<IChartPayments> = ({ paymentsAssets }) => {
       theme: colorMode,
     },
     xaxis: {
-      categories: getChartLabels('24h'),
+      categories: getChartLabels(chartPeriod),
       labels: {
         show: true,
         formatter: function (value: string): string {
-          return `${value}h`
+          return `${chartPeriod === '24h' ? `${value}h` : `${value}`}`
         },
       },
     },
@@ -96,18 +111,21 @@ export const ChartPayments: React.FC<IChartPayments> = ({ paymentsAssets }) => {
           Payments timeline
         </Text>
         <Flex>
-          <HelpIcon />
+          <ChartPeriod period={chartPeriod} setPeriod={setChartPeriod} />
         </Flex>
       </Flex>
       <Box>
-        <Chart
-          options={options}
-          series={series}
-          type="area"
-          width="100%"
-          height="240px"
-          data-testid="area-chart"
-        />
+        {loadingChart ? (
+          <Skeleton h="12rem" w="full" />
+        ) : (
+          <Chart
+            options={options}
+            series={series}
+            type="area"
+            width="100%"
+            height="240px"
+          />
+        )}
       </Box>
     </Container>
   )
diff --git a/frontend/src/components/templates/dashboards/index.tsx b/frontend/src/components/templates/dashboards/index.tsx
index 681a5f4d..3373dad1 100644
--- a/frontend/src/components/templates/dashboards/index.tsx
+++ b/frontend/src/components/templates/dashboards/index.tsx
@@ -1,10 +1,11 @@
 import { Box, Flex, Text } from '@chakra-ui/react'
-import React from 'react'
+import React, { Dispatch, SetStateAction } from 'react'
 
 import { MAX_PAGE_WIDTH } from 'utils/constants/sizes'
 
 import { AssetsList } from './components/assets-list'
 import { ChartPayments } from './components/chart-payments'
+import { TChartPeriod } from 'components/molecules/chart-period'
 
 interface IDashboardsTemplate {
   loading: boolean
@@ -14,6 +15,8 @@ interface IDashboardsTemplate {
   paymentsAssets: Hooks.UseDashboardsTypes.IAsset[] | undefined
   assets: Hooks.UseAssetsTypes.IAssetDto[] | undefined
   loadingAssets: boolean
+  chartPeriod: TChartPeriod
+  setChartPeriod: Dispatch<SetStateAction<TChartPeriod>>
 }
 
 export const DashboardsTemplate: React.FC<IDashboardsTemplate> = ({
@@ -21,6 +24,8 @@ export const DashboardsTemplate: React.FC<IDashboardsTemplate> = ({
   paymentsAssets,
   assets,
   loadingAssets,
+  chartPeriod,
+  setChartPeriod,
 }) => {
   return (
     <Flex flexDir="column" w="full">
@@ -36,6 +41,8 @@ export const DashboardsTemplate: React.FC<IDashboardsTemplate> = ({
               <ChartPayments
                 loadingChart={loadingChart}
                 paymentsAssets={paymentsAssets}
+                chartPeriod={chartPeriod}
+                setChartPeriod={setChartPeriod}
               />
             )}
           </Box>
diff --git a/frontend/src/components/templates/mint-asset/index.tsx b/frontend/src/components/templates/mint-asset/index.tsx
index 7309685c..f6ea5784 100644
--- a/frontend/src/components/templates/mint-asset/index.tsx
+++ b/frontend/src/components/templates/mint-asset/index.tsx
@@ -9,14 +9,15 @@ import {
   Input,
   Text,
 } from '@chakra-ui/react'
-import React from 'react'
+import React, { Dispatch, SetStateAction } from 'react'
 import { FieldValues, UseFormSetValue, useForm } from 'react-hook-form'
 
 import { toCrypto } from 'utils/formatter'
 
 import { AssetHeader } from 'components/atoms'
 import { HelpIcon } from 'components/icons'
-import { ChartSupply } from 'components/molecules/chart-supply'
+import { ChartMintBurn } from 'components/molecules/chart-mint-burn'
+import { TChartPeriod } from 'components/molecules/chart-period'
 
 interface IMintAssetTemplate {
   onSubmit(
@@ -26,13 +27,23 @@ interface IMintAssetTemplate {
   loading: boolean
   asset: Hooks.UseAssetsTypes.IAssetDto
   assetData: Hooks.UseHorizonTypes.IAsset | undefined
+  mintOperations: Hooks.UseDashboardsTypes.IAsset | undefined
+  burnOperations: Hooks.UseDashboardsTypes.IAsset | undefined
+  loadingChart: boolean
+  chartPeriod: TChartPeriod
+  setChartPeriod: Dispatch<SetStateAction<TChartPeriod>>
 }
 
 export const MintAssetTemplate: React.FC<IMintAssetTemplate> = ({
   onSubmit,
+  setChartPeriod,
   loading,
   asset,
   assetData,
+  mintOperations,
+  burnOperations,
+  loadingChart,
+  chartPeriod,
 }) => {
   const {
     register,
@@ -102,7 +113,15 @@ export const MintAssetTemplate: React.FC<IMintAssetTemplate> = ({
           </form>
         </Box>
       </Container>
-      <ChartSupply />
+      {mintOperations && burnOperations && (
+        <ChartMintBurn
+          loadingChart={loadingChart}
+          mintOperations={mintOperations}
+          burnOperations={burnOperations}
+          chartPeriod={chartPeriod}
+          setChartPeriod={setChartPeriod}
+        />
+      )}
     </Flex>
   )
 }
diff --git a/frontend/src/hooks/useDashboards/context.tsx b/frontend/src/hooks/useDashboards/context.tsx
index 465bc978..944af487 100644
--- a/frontend/src/hooks/useDashboards/context.tsx
+++ b/frontend/src/hooks/useDashboards/context.tsx
@@ -3,6 +3,8 @@ import { createContext, useCallback, useState } from 'react'
 import axios from 'axios'
 import { MessagesError } from 'utils/constants/messages-error'
 
+import { TChartPeriod } from 'components/molecules/chart-period'
+
 import { http } from 'interfaces/http'
 
 export const DashboardsContext = createContext(
@@ -18,14 +20,18 @@ export const DashboardsProvider: React.FC<IProps> = ({ children }) => {
 
   const getPaymentsByAssetId = useCallback(
     async (
-      assetId: string
+      assetId: string,
+      transactionId?: number,
+      period?: TChartPeriod
     ): Promise<Hooks.UseDashboardsTypes.IAsset | undefined> => {
       setLoadingChart(true)
       try {
-        const timeRange = '24h'
-        const timeFrame = '1'
+        const timeRange = period || '24h'
+        const timeFrame = !period || period === '24h' ? '1h' : '24h'
         const response = await http.get(
-          `/log_transactions/assets/${assetId}/sum/${timeRange}/${timeFrame}`
+          `log_transactions/assets/${assetId}/type/${
+            transactionId || 0
+          }/sum/${timeRange}/${timeFrame}`
         )
         const data = response.data
         if (data) {
@@ -43,29 +49,32 @@ export const DashboardsProvider: React.FC<IProps> = ({ children }) => {
     []
   )
 
-  const getPayments = useCallback(async (): Promise<
-    Hooks.UseDashboardsTypes.IAsset[] | undefined
-  > => {
-    setLoadingChart(true)
-    try {
-      const timeRange = '24h'
-      const timeFrame = '1'
-      const response = await http.get(
-        `/log_transactions/assets/sum/${timeRange}/${timeFrame}`
-      )
-      const data = response.data
-      if (data) {
-        return data
-      }
-    } catch (error) {
-      if (axios.isAxiosError(error)) {
-        throw new Error(error.message)
+  const getPayments = useCallback(
+    async (
+      period?: TChartPeriod
+    ): Promise<Hooks.UseDashboardsTypes.IAsset[] | undefined> => {
+      setLoadingChart(true)
+      try {
+        const timeRange = period || '24h'
+        const timeFrame = !period || period === '24h' ? '1h' : '24h'
+        const response = await http.get(
+          `/log_transactions/assets/sum/${timeRange}/${timeFrame}`
+        )
+        const data = response.data
+        if (data) {
+          return data
+        }
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          throw new Error(error.message)
+        }
+        throw new Error(MessagesError.errorOccurred)
+      } finally {
+        setLoadingChart(false)
       }
-      throw new Error(MessagesError.errorOccurred)
-    } finally {
-      setLoadingChart(false)
-    }
-  }, [])
+    },
+    []
+  )
 
   return (
     <DashboardsContext.Provider
diff --git a/frontend/src/hooks/useDashboards/use-dashboards-types.d.ts b/frontend/src/hooks/useDashboards/use-dashboards-types.d.ts
index 2e52b95b..0732c812 100644
--- a/frontend/src/hooks/useDashboards/use-dashboards-types.d.ts
+++ b/frontend/src/hooks/useDashboards/use-dashboards-types.d.ts
@@ -38,9 +38,13 @@ declare namespace Hooks {
     interface IDashboardsContext {
       loadingChart: boolean
       getPaymentsByAssetId(
-        assetId: string
+        assetId: string,
+        transactionId?: number,
+        period?: TChartPeriod
       ): Promise<Hooks.UseDashboardsTypes.IAsset | undefined>
-      getPayments(): Promise<Hooks.UseDashboardsTypes.IAsset[] | undefined>
+      getPayments(
+        period?: TChartPeriod
+      ): Promise<Hooks.UseDashboardsTypes.IAsset[] | undefined>
     }
   }
 }
diff --git a/frontend/src/utils/constants/dashboards.tsx b/frontend/src/utils/constants/dashboards.tsx
index 177ce96e..6de8cd4c 100644
--- a/frontend/src/utils/constants/dashboards.tsx
+++ b/frontend/src/utils/constants/dashboards.tsx
@@ -1,13 +1,56 @@
+import { formatDateMD } from 'utils/formatter'
+
+import { TChartPeriod } from 'components/molecules/chart-period'
+
 export const getChartLabels = (type: '24h' | '7d' | '30d'): string[] => {
   let labels: string[] = []
 
   if (type === '24h') {
+    const date = new Date()
+    date.setHours(new Date().getHours() - 24)
+
     labels = Array(24)
       .fill(0)
-      .map((_, i) => {
-        return i.toString()
+      .map(() => {
+        date.setHours(date.getHours() + 1)
+        return date.getHours().toString()
+      })
+  }
+
+  if (type === '7d') {
+    const date = new Date()
+    date.setDate(new Date().getDate() - 7)
+
+    labels = Array(7)
+      .fill(0)
+      .map(() => {
+        date.setDate(date.getDate() + 1)
+        return formatDateMD(date.toString())
+      })
+  }
+
+  if (type === '30d') {
+    const date = new Date()
+    date.setDate(new Date().getDate() - 30)
+
+    labels = Array(30)
+      .fill(0)
+      .map(() => {
+        date.setDate(date.getDate() + 1)
+        return formatDateMD(date.toString())
       })
   }
 
   return labels
 }
+
+export const isEqualLabel = (
+  period: TChartPeriod,
+  date: string,
+  label: string
+): boolean => {
+  if (period === '24h') {
+    return new Date(date).getHours().toString() === label
+  }
+  return formatDateMD(date) === label
+}
diff --git a/frontend/src/utils/formatter/index.tsx b/frontend/src/utils/formatter/index.tsx
index b37c27d0..9f25de3f 100644
--- a/frontend/src/utils/formatter/index.tsx
+++ b/frontend/src/utils/formatter/index.tsx
@@ -22,6 +22,15 @@ export const formatDateMY = (date: string): string => {
   return formattedDate
 }
 
+export const formatDateMD = (date: string): string => {
+  const formattedDate = new Date(date).toLocaleDateString('en-US', {
+    month: '2-digit',
+    day: '2-digit',
+  })
+
+  return formattedDate
+}
+
 export const formatDateY = (date: string): string => {
   const formattedDate = new Date(date).toLocaleDateString('en-US', {
     year: 'numeric',