diff --git a/src/app/Layout/MainLayout/index.tsx b/src/app/Layout/MainLayout/index.tsx
index c8785726..76c181ad 100644
--- a/src/app/Layout/MainLayout/index.tsx
+++ b/src/app/Layout/MainLayout/index.tsx
@@ -1,13 +1,16 @@
+import { Box, CircularProgress, Container, Typography } from '@mui/material'
 import React, { useContext, useEffect } from 'react'
+import { getActiveNetwork, selectAllChains, selectNetworkStatus } from 'store/app-config'
+import { useAppDispatch, useAppSelector } from 'store/configureStore'
+
+import { ColorModeContext } from '../../../styles/theme/ThemeProvider'
+import Icon from '@mdi/react'
 import { NavBar } from 'app/components/NavBar'
 import { Outlet } from 'react-router-dom'
-import { useAppDispatch, useAppSelector } from 'store/configureStore'
-import { Typography, Box, CircularProgress, Container } from '@mui/material'
-import { getActiveNetwork, selectAllChains, selectNetworkStatus } from 'store/app-config'
+import PageContainer from 'app/components/PageContainer'
 import { Status } from 'types'
 import { getChains } from 'api'
-import PageContainer from 'app/components/PageContainer'
-import { ColorModeContext } from '../../../styles/theme/ThemeProvider'
+import { mdiAccessPointNetworkOff } from '@mdi/js'
 import { selectedTheme } from '../../../store/app-config'
 
 const Content: React.FC = () => {
@@ -36,14 +39,32 @@ const Content: React.FC = () => {
                     gap: '20px',
                 }}
             >
-                <Typography
-                    variant="h4"
-                    component="span"
-                    fontWeight="fontWeightBold"
-                    sx={{ color: 'error.light' }}
+                <Box
+                    sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        maxWidth: '500px',
+                        gap: '1rem',
+                    }}
                 >
-                    Something went wrong, Please Try Again!
-                </Typography>
+                    <Icon path={mdiAccessPointNetworkOff} size={3} color="#94A2B8" />
+                    <Typography variant="h4" component="span" fontWeight="fontWeightBold">
+                        Something went wrong
+                    </Typography>
+                    <Typography
+                        variant="body1"
+                        component="span"
+                        sx={{
+                            textAlign: 'center',
+                            color: theme => (theme.palette.mode === 'dark' ? '#CBD4E2' : '#64748B'),
+                        }}
+                    >
+                        We have encountered an unexpected issue with our current system. For
+                        uninterrupted service, switch over to the Camino Network.
+                    </Typography>
+                </Box>
             </Box>
         </PageContainer>
     )
diff --git a/src/app/components/CamAmount.tsx b/src/app/components/CamAmount.tsx
index eda95c43..462263ea 100644
--- a/src/app/components/CamAmount.tsx
+++ b/src/app/components/CamAmount.tsx
@@ -1,16 +1,18 @@
 import * as React from 'react'
-import { Typography, Tooltip, Box } from '@mui/material'
-import { ReactComponent as GasStationOutline } from './assets/gas-station-outline.svg'
-import { ReactComponent as ACamIcon } from './assets/a-cam.svg'
-import { ReactComponent as NCamIcon } from './assets/n-cam.svg'
-import { ReactComponent as CamIcon } from './assets/cam.svg'
+
+import { Box, Tooltip, Typography } from '@mui/material'
 import {
-    getDisplayAmount,
-    getACamAmount,
     customToLocaleString,
+    getACamAmount,
+    getDisplayAmount,
     roundedToLocaleString,
 } from '../../utils/currency-utils'
+
+import { ReactComponent as ACamIcon } from './assets/a-cam.svg'
+import { ReactComponent as CamIcon } from './assets/cam.svg'
+import { ReactComponent as GasStationOutline } from './assets/gas-station-outline.svg'
 import { ICamAmount } from 'types/filesInComponents'
+import { ReactComponent as NCamIcon } from './assets/n-cam.svg'
 import { useLocation } from 'react-router-dom'
 
 export function AmountIcon({ currency }: { currency: string }) {
diff --git a/src/app/components/CopyTitleCard.tsx b/src/app/components/CopyTitleCard.tsx
index e753f6f8..ba4d7c41 100644
--- a/src/app/components/CopyTitleCard.tsx
+++ b/src/app/components/CopyTitleCard.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import DetailsField from 'app/components/DetailsField'
 import Icon from '@mdi/react'
 import OutlinedContainer from 'app/components/OutlinedContainer'
 import OutlinedFilledContainer from 'app/components/OutlinedFilledContainer'
-import DetailsField from 'app/components/DetailsField'
+import React from 'react'
 
 export default function CopyTitleCard({
     label,
diff --git a/src/app/components/DetailsField.tsx b/src/app/components/DetailsField.tsx
index f16d979b..579707a8 100644
--- a/src/app/components/DetailsField.tsx
+++ b/src/app/components/DetailsField.tsx
@@ -1,14 +1,15 @@
-import { mdiInformationOutline, mdiOpenInNew } from '@mdi/js'
-import Icon from '@mdi/react'
 import { Box, Button, Chip, Grid, Tooltip, Typography } from '@mui/material'
-import React from 'react'
-import { Link } from 'react-router-dom'
 import { IDetailsField, IField } from 'types/filesInComponents'
-import { roundedToLocaleString } from '../../utils/currency-utils'
+import { mdiInformationOutline, mdiOpenInNew } from '@mdi/js'
 import moment, { currentDateFormat } from '../../utils/helpers/moment'
-import useWidth from '../hooks/useWidth'
+
 import { CamAmount } from './CamAmount'
 import CopyToClipboardButton from './CopyToClipboardButton'
+import Icon from '@mdi/react'
+import { Link } from 'react-router-dom'
+import React from 'react'
+import { roundedToLocaleString } from '../../utils/currency-utils'
+import useWidth from '../hooks/useWidth'
 
 function DetailsField({
     field,
@@ -47,7 +48,7 @@ function DetailsField({
                 {!isMobile && (
                     <>
                         {tooltip?.toLowerCase() || getTooltip(field?.toLowerCase()) ? (
-                            <Grid item xs={2}>
+                            <Grid item xs={2} sx={{ display: 'grid', alignItems: 'center' }}>
                                 <Tooltip title={getTooltip(field?.toLowerCase()) as string}>
                                     {icon || (
                                         <Icon
@@ -58,7 +59,7 @@ function DetailsField({
                                 </Tooltip>
                             </Grid>
                         ) : (
-                            <Grid item xs={2}>
+                            <Grid item xs={2} sx={{ display: 'grid', alignItems: 'center' }}>
                                 {icon}
                             </Grid>
                         )}
diff --git a/src/app/components/FilledCard.tsx b/src/app/components/FilledCard.tsx
index b25d7a98..01c07aee 100644
--- a/src/app/components/FilledCard.tsx
+++ b/src/app/components/FilledCard.tsx
@@ -1,4 +1,5 @@
 import React, { FC } from 'react'
+
 import { Paper } from '@mui/material'
 
 interface BlockCardProps {
@@ -18,7 +19,6 @@ const FilledCard: FC<BlockCardProps> = React.forwardRef((props, ref) => {
                 gap: '10px',
                 display: 'flex',
                 flexDirection: 'column',
-                backgroundColor: 'primary.light',
                 backgroundImage: 'none',
             }}
             ref={ref}
diff --git a/src/app/components/MainButton.tsx b/src/app/components/MainButton.tsx
index a0070302..82f7d1ed 100644
--- a/src/app/components/MainButton.tsx
+++ b/src/app/components/MainButton.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+
 import { Button } from '@mui/material'
 
 function MainButton({
@@ -17,13 +18,15 @@ function MainButton({
             variant={variant}
             onClick={onClick}
             sx={{
-                borderRadius: '12px',
-                padding: '.55rem 2rem',
+                borderRadius: '8px',
+                padding: '0.55rem 2rem',
                 backgroundColor: variant === 'outlined' ? 'transparent' : 'secondary.main',
                 color: variant === 'outlined' ? 'secondary.main' : 'white',
                 borderColor: variant === 'outlined' ? 'secondary.main' : '',
                 boxShadow: 'none',
                 borderWidth: '1.5px',
+                textTransform: 'capitalize',
+                fontWeight: 600,
                 '&:hover': {
                     boxShadow: 'none',
                     backgroundColor: variant === 'outlined' ? 'transparent' : 'secondary.main',
diff --git a/src/app/components/NavBar/Links.tsx b/src/app/components/NavBar/Links.tsx
index 22e089c6..caef4374 100644
--- a/src/app/components/NavBar/Links.tsx
+++ b/src/app/components/NavBar/Links.tsx
@@ -1,13 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import React, { useMemo } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
 import Box from '@mui/material/Box'
-import { ChainType } from 'utils/types/chain-type'
-import { RoutesConfig } from 'utils/route-paths'
-import { STATISTICS_LINK } from '../../../utils/types/statistics-type'
 import Tab from '@mui/material/Tab'
 import Tabs from '@mui/material/Tabs'
-import { getChainTypeFromUrl } from 'utils/route-utils'
+import { RoutesConfig } from 'utils/route-paths'
+import { ChainType } from 'utils/types/chain-type'
+import { STATISTICS_LINK } from '../../../utils/types/statistics-type'
 
 function a11yProps(index: number) {
     return {
@@ -32,22 +31,18 @@ const activeTab = (path: string): number => {
 export default function Links() {
     const routes = RoutesConfig()
     const location = useLocation()
-    const [value, setValue] = useState(activeTab(getChainTypeFromUrl()))
     const handleChange = (event: React.SyntheticEvent, newValue: number) => {
         if (location.pathname !== routes.MAINNET) {
             if (newValue === 0) navigate(routes.CCHAIN)
             else if (newValue === 1) navigate(routes.XCHAIN)
             else if (newValue === 2) navigate(routes.PCHAIN)
             else if (newValue === 5) navigate(routes.STATISTICS)
-            if (newValue !== 3 && newValue !== 4) setValue(newValue)
         }
     }
-    useEffect(() => {
-        if (location.pathname === routes.MAINNET) setValue(0)
-        else if (location.pathname === routes.CCHAIN) setValue(0)
-        else if (location.pathname === routes.XCHAIN) setValue(1)
-        else if (location.pathname === routes.PCHAIN) setValue(2)
-        else if (location.pathname === routes.STATISTICS) setValue(5)
+
+    const activeChainTab = useMemo(() => {
+        let activeChain = location.pathname.split('/')[3]
+        return activeTab(activeChain)
     }, [location])
 
     let navigate = useNavigate()
@@ -61,7 +56,7 @@ export default function Links() {
             }}
         >
             <Tabs
-                value={value}
+                value={activeChainTab}
                 onChange={handleChange}
                 textColor="secondary"
                 // remove the underline
diff --git a/src/app/components/NavBar/SearchInput.tsx b/src/app/components/NavBar/SearchInput.tsx
index ad484434..483b0f5b 100644
--- a/src/app/components/NavBar/SearchInput.tsx
+++ b/src/app/components/NavBar/SearchInput.tsx
@@ -1,36 +1,43 @@
-import React, { useEffect, useState } from 'react'
-import OutlinedInput from '@mui/material/OutlinedInput'
-import InputAdornment from '@mui/material/InputAdornment'
 import SearchIcon from '@mui/icons-material/Search'
+import {
+    Avatar,
+    ClickAwayListener,
+    ListItemIcon,
+    MenuItem,
+    MenuList,
+    useTheme,
+} from '@mui/material'
 import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
+import InputAdornment from '@mui/material/InputAdornment'
 import Modal from '@mui/material/Modal'
+import OutlinedInput from '@mui/material/OutlinedInput'
+import Typography from '@mui/material/Typography'
+import { getChainID } from 'api/utils'
 import useWidth from 'app/hooks/useWidth'
 import axios, { AxiosError, AxiosResponse } from 'axios'
-import { MenuItem, MenuList, ListItemIcon, Avatar, ClickAwayListener } from '@mui/material'
-import { useTheme } from '@mui/material'
-import { ISearchMenu, SearchMenuItem } from 'types/search-menu'
-import { debounce } from './utils/debounce'
+import React, { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useAppSelector } from 'store/configureStore'
 import { selectMagellanAddress } from 'store/app-config'
-import { searchApi } from 'utils/magellan-api-utils'
+import { useAppSelector } from 'store/configureStore'
 import {
+    MagellanAddressResponse,
+    MagellanAddressSearchResult,
+    MagellanCBlockSearchResult,
+    MagellanCTransactionSearchResult,
     MagellanSearchResultElementType,
     MagellanXPTransactionSearchResult,
-    MagellanCTransactionSearchResult,
-    MagellanCBlockSearchResult,
-    MagellanAddressSearchResult,
-    MagellanAddressResponse,
 } from 'types/magellan-types'
+import { ISearchMenu, SearchMenuItem } from 'types/search-menu'
+import { searchApi } from 'utils/magellan-api-utils'
+import { RoutesConfig } from 'utils/route-paths'
 import {
-    GetBlockDetailsPath,
     GetAddressDetailsPath,
+    GetBlockDetailsPath,
     GetTransactionDetailsPath,
 } from 'utils/route-utils'
+
 import { ChainType } from 'utils/types/chain-type'
-import { getChainID } from 'api/utils'
-import { RoutesConfig } from 'utils/route-paths'
+import { debounce } from './utils/debounce'
 
 function OutlinedSearchInput() {
     const routesConfig = RoutesConfig()
@@ -241,9 +248,13 @@ function OutlinedSearchInput() {
                             height: '100%',
                             borderRadius: '8px',
                             p: '8px 16px',
-                            backgroundColor: 'primary.light',
+                            backgroundColor: 'card.background',
+                            boxShadow: 0,
+                            backgroundImage: 'none',
+                            borderWidth: '1px',
+                            borderColor: 'card.border',
+                            borderStyle: 'solid',
                             color: 'primary.contrastText',
-                            borderWidth: '0px',
                             fontSize: '15px',
                             lineHeight: '24px',
                             fontWeight: 500,
@@ -374,7 +385,6 @@ const SearchResultMenu = ({ children }: { children?: React.ReactNode }) => {
 }
 
 const SearchResultMenuList = ({ menuItems }: { menuItems: SearchMenuItem[] }) => {
-    console.log(menuItems)
     const navigate = useNavigate()
     return (
         <MenuList>
diff --git a/src/app/components/OutlinedContainer.tsx b/src/app/components/OutlinedContainer.tsx
index a5f266cd..3ec50414 100644
--- a/src/app/components/OutlinedContainer.tsx
+++ b/src/app/components/OutlinedContainer.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+
 import { Box } from '@mui/material'
 
 export default function OutlinedContainer({
diff --git a/src/app/components/OverviewCards/OverviewCard.tsx b/src/app/components/OverviewCards/OverviewCard.tsx
index 73d4cd4d..63175478 100644
--- a/src/app/components/OverviewCards/OverviewCard.tsx
+++ b/src/app/components/OverviewCards/OverviewCard.tsx
@@ -1,7 +1,8 @@
+import { Box, Card, CardContent, Typography } from '@mui/material'
 import React, { FC } from 'react'
-import { Card, CardContent, Box, Typography } from '@mui/material'
-import { Status } from 'types'
+
 import LoadingWrapper from 'app/components/LoadingWrapper'
+import { Status } from 'types'
 
 type OverviewCardProps = {
     title: string
@@ -32,6 +33,7 @@ const OverviewCard: FC<OverviewCardProps> = ({
                 p: '1rem 2rem',
                 borderRadius: '12px',
                 cursor: onClick ? 'pointer' : 'default',
+                borderColor: 'card.border',
             }}
             onClick={onClick}
         >
diff --git a/src/app/components/Statistics/BlockchainDataCharts/index.tsx b/src/app/components/Statistics/BlockchainDataCharts/index.tsx
index c8a2c899..d5009f73 100644
--- a/src/app/components/Statistics/BlockchainDataCharts/index.tsx
+++ b/src/app/components/Statistics/BlockchainDataCharts/index.tsx
@@ -1,34 +1,35 @@
-import { Fragment, useEffect, useState } from 'react'
+import 'react-datepicker/dist/react-datepicker.css'
+import '../../../../styles/scrollbarModal.css'
 
-import { mdiClose } from '@mdi/js'
-import Icon from '@mdi/react'
-import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'
-import InfoIcon from '@mui/icons-material/Info'
+import {
+    Box,
+    Card,
+    CardContent,
+    CardHeader,
+    CircularProgress,
+    IconButton,
+    Modal,
+    Tooltip,
+    Typography,
+} from '@mui/material'
+import { ConsumptionCharts, Emissions, TextProps } from 'types/statistics'
+import { Fragment, useEffect, useState } from 'react'
 import { Grid, useTheme } from '@mui/material'
-import Box from '@mui/material/Box'
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import CardHeader from '@mui/material/CardHeader'
-import CircularProgress from '@mui/material/CircularProgress'
-import IconButton from '@mui/material/IconButton'
-import Modal from '@mui/material/Modal'
-import Tooltip from '@mui/material/Tooltip'
-import useWidth from 'app/hooks/useWidth'
-import moment from 'moment'
-import 'react-datepicker/dist/react-datepicker.css'
+import { mdiArrowExpand, mdiClose, mdiInformationOutline } from '@mdi/js'
 import { useAppDispatch, useAppSelector } from 'store/configureStore'
-import styled from 'styled-components'
-import { Status } from 'types'
-import { ConsumptionCharts, Emissions, TextProps } from 'types/statistics'
-import '../../../../styles/scrollbarModal.css'
-import TextBlockchainDatachart from '../../../../utils/statistics/TextBlockchainDatachart'
+
 import DateRange from '../DateRange/DateRange'
+import Icon from '@mdi/react'
 import LinearMeter from './LinearMeter'
-
 import React from 'react'
+import { Status } from 'types'
+import TextBlockchainDatachart from '../../../../utils/statistics/TextBlockchainDatachart'
+import moment from 'moment'
+import styled from 'styled-components'
+import useWidth from 'app/hooks/useWidth'
+
 const TooltipContainer = styled.div`
     display: flex;
-    padding-top: 2rem;
 `
 const LinearMeterContainer = styled.div`
     margin-top: -3rem;
@@ -96,6 +97,16 @@ const BlockchainCharts = ({
     const dataStatistics: Emissions = useAppSelector(sliceGetter)
     const loader = useAppSelector(sliceGetterLoader)
 
+    const onOpenModal = () => {
+        document.body.style.overflow = 'hidden'
+        setOpenModal(true)
+    }
+
+    const onCloseModal = () => {
+        document.body.style.overflow = 'initial'
+        setOpenModal(false)
+    }
+
     return (
         <Fragment>
             {loader === Status.LOADING ? (
@@ -106,33 +117,47 @@ const BlockchainCharts = ({
                 </>
             ) : (
                 <>
-                    <Card style={{ backgroundColor: darkMode ? '#060F24' : 'white' }}>
+                    <Card
+                        sx={{
+                            backgroundColor: 'card.background',
+                            boxShadow: 0,
+                            backgroundImage: 'none',
+                            borderRadius: '12px',
+                            borderWidth: '1px',
+                            borderColor: 'primary.light',
+                            borderStyle: 'solid',
+                        }}
+                    >
                         <CardHeader
                             title={
-                                <span>
+                                <Typography
+                                    variant="h5"
+                                    component="span"
+                                    sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
+                                >
                                     {titleText}
                                     <Tooltip title={tooltipTitle} placement="top">
-                                        <IconButton>
-                                            <InfoIcon />
-                                        </IconButton>
+                                        <Icon path={mdiInformationOutline} size={1} />
                                     </Tooltip>
-                                </span>
+                                </Typography>
                             }
                             action={
                                 <TooltipContainer>
                                     <IconButton
                                         color="info"
                                         component="label"
-                                        onClick={() => setOpenModal(true)}
-                                        style={{
-                                            cursor: 'default',
-                                            color: 'GrayText',
+                                        onClick={onOpenModal}
+                                        sx={{
+                                            color: `var(--camino-too-blue-to-be-true)`,
+                                            padding: '0.5rem',
+                                            border: '1px solid var(--camino-too-blue-to-be-true)',
                                         }}
                                     >
-                                        <ArrowOutwardIcon />
+                                        <Icon path={mdiArrowExpand} size={0.7} />
                                     </IconButton>
                                 </TooltipContainer>
                             }
+                            sx={{ '& .MuiCardHeader-action': { alignSelf: 'center' } }}
                         />
 
                         <CardContent>
@@ -155,13 +180,12 @@ const BlockchainCharts = ({
 
             <Modal
                 open={openModal}
-                onClose={e => {
-                    setOpenModal(false)
-                }}
+                onClose={onCloseModal}
                 sx={{
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
+                    '& .MuiPaper-root': { backgroundImage: 'none' },
                 }}
                 disableScrollLock={true}
             >
@@ -190,11 +214,8 @@ const BlockchainCharts = ({
                                 <IconButton
                                     color="info"
                                     component="label"
-                                    onClick={() => setOpenModal(false)}
-                                    style={{
-                                        cursor: 'default',
-                                        color: isDark ? 'white' : 'black',
-                                    }}
+                                    onClick={onCloseModal}
+                                    style={{ cursor: 'default', color: isDark ? 'white' : 'black' }}
                                 >
                                     <Icon path={mdiClose} size={1} />
                                 </IconButton>
@@ -213,9 +234,21 @@ const BlockchainCharts = ({
                                     alignItems="center"
                                 >
                                     <Grid item xs={12}>
-                                        <Text backgroundColor={isDark ? '#0f172a' : '#F5F6FA'}>
+                                        <Typography
+                                            variant="body1"
+                                            component="p"
+                                            sx={{
+                                                my: 2,
+                                                mx: 1,
+                                                border: 1,
+                                                borderColor: 'primary.light',
+                                                borderRadius: 1,
+                                                backgroundColor: 'card.background',
+                                                p: 2,
+                                            }}
+                                        >
                                             {tooltipTitle}
-                                        </Text>
+                                        </Typography>
                                     </Grid>
                                     <Grid item xs={12} md={6}>
                                         <TextBlockchainDatachart
diff --git a/src/app/components/Statistics/CO2ConsumptionCharts/index.tsx b/src/app/components/Statistics/CO2ConsumptionCharts/index.tsx
index 8f8ae9bb..b7d6ceba 100644
--- a/src/app/components/Statistics/CO2ConsumptionCharts/index.tsx
+++ b/src/app/components/Statistics/CO2ConsumptionCharts/index.tsx
@@ -1,30 +1,33 @@
-import React, { useEffect, Fragment, useState } from 'react'
+import '../../../../styles/custompicker.css'
+import '../../../../styles/scrollbarModal.css'
+
+import {
+    Box,
+    Card,
+    CardContent,
+    CardHeader,
+    CircularProgress,
+    IconButton,
+    Modal,
+    Tooltip,
+    Typography,
+} from '@mui/material'
+import { ConsumptionCharts, Emissions } from 'types/statistics'
+import { Grid, useTheme } from '@mui/material'
+import React, { Fragment, useEffect, useState } from 'react'
+import { mdiArrowExpand, mdiClose, mdiInformationOutline } from '@mdi/js'
 import { useAppDispatch, useAppSelector } from 'store/configureStore'
-import { typesMeter } from '../../../../utils/statistics/ChartSelector'
+
 import BarMeter from './BarMeter'
-import TimeSeriesMeter from './TimeSeriesMeter'
-import { Status } from 'types'
-import CircularProgress from '@mui/material/CircularProgress'
-import IconButton from '@mui/material/IconButton'
-import Modal from '@mui/material/Modal'
-import Box from '@mui/material/Box'
-import useWidth from 'app/hooks/useWidth'
+import CountriesBarMeter from './CountriesBarMeter'
 import DateRange from '../DateRange/DateRange'
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import CardHeader from '@mui/material/CardHeader'
+import Icon from '@mdi/react'
+import { Status } from 'types'
+import TimeSeriesMeter from './TimeSeriesMeter'
 import moment from 'moment'
-import CountriesBarMeter from './CountriesBarMeter'
-import '../../../../styles/custompicker.css'
 import styled from 'styled-components'
-import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward'
-import Icon from '@mdi/react'
-import { mdiClose } from '@mdi/js'
-import { useTheme, Grid } from '@mui/material'
-import '../../../../styles/scrollbarModal.css'
-import { ConsumptionCharts, Emissions } from 'types/statistics'
-import Tooltip from '@mui/material/Tooltip'
-import InfoIcon from '@mui/icons-material/Info'
+import { typesMeter } from '../../../../utils/statistics/ChartSelector'
+import useWidth from 'app/hooks/useWidth'
 
 type DatesChart = {
     starterDate: Date
@@ -33,7 +36,6 @@ type DatesChart = {
 
 const TooltipContainer = styled.div`
     display: flex;
-    padding-top: 2rem;
 `
 const DateRangeContainer = styled.div`
     margin-top: 2rem;
@@ -44,20 +46,6 @@ const DateRangeContainer = styled.div`
     }
 `
 
-interface TextProps {
-    backgroundColor: string
-}
-
-const Text = styled('p')<TextProps>`
-    margin-left: 3rem;
-    margin-right: 1rem;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-    border-radius: 0.5rem;
-    background: ${({ backgroundColor }) => backgroundColor};
-    padding: 0.5rem;
-`
-
 const CO2ConsumptionCharts = ({
     utilSlice,
     typeMeter,
@@ -170,37 +158,47 @@ const CO2ConsumptionCharts = ({
                 </>
             ) : (
                 <>
-                    <Card style={{ backgroundColor: darkMode ? '#060F24' : 'white' }}>
+                    <Card
+                        sx={{
+                            backgroundColor: 'card.background',
+                            boxShadow: 0,
+                            backgroundImage: 'none',
+                            borderRadius: '12px',
+                            borderWidth: '1px',
+                            borderColor: 'primary.light',
+                            borderStyle: 'solid',
+                        }}
+                    >
                         <CardHeader
                             title={
-                                <span>
+                                <Typography
+                                    variant="h5"
+                                    component="span"
+                                    sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
+                                >
                                     {titleText}
                                     <Tooltip title={description} placement="top">
-                                        <IconButton>
-                                            <InfoIcon />
-                                        </IconButton>
+                                        <Icon path={mdiInformationOutline} size={1} />
                                     </Tooltip>
-                                </span>
+                                </Typography>
                             }
-                            style={{
-                                marginBottom: '0rem',
-                                marginLeft: '0.5rem',
-                            }}
                             action={
                                 <TooltipContainer>
                                     <IconButton
                                         color="info"
                                         component="label"
                                         onClick={() => setOpenModal(true)}
-                                        style={{
-                                            cursor: 'default',
-                                            color: 'GrayText',
+                                        sx={{
+                                            color: `var(--camino-too-blue-to-be-true)`,
+                                            padding: '0.5rem',
+                                            border: '1px solid var(--camino-too-blue-to-be-true)',
                                         }}
                                     >
-                                        <ArrowOutwardIcon />
+                                        <Icon path={mdiArrowExpand} size={0.7} />
                                     </IconButton>
                                 </TooltipContainer>
                             }
+                            sx={{ '& .MuiCardHeader-action': { alignSelf: 'center' } }}
                         />
                         <CardContent>
                             {firstLoad === true && (
@@ -241,6 +239,7 @@ const CO2ConsumptionCharts = ({
                             display: 'flex',
                             justifyContent: 'center',
                             alignItems: 'center',
+                            '& .MuiPaper-root': { backgroundImage: 'none' },
                         }}
                         disableScrollLock={true}
                     >
@@ -281,9 +280,21 @@ const CO2ConsumptionCharts = ({
                                         alignItems="center"
                                     >
                                         <Grid item xs={12}>
-                                            <Text backgroundColor={isDark ? '#0f172a' : '#F5F6FA'}>
+                                            <Typography
+                                                variant="body1"
+                                                component="p"
+                                                sx={{
+                                                    my: 2,
+                                                    mx: 1,
+                                                    border: 1,
+                                                    borderColor: 'primary.light',
+                                                    borderRadius: 1,
+                                                    backgroundColor: 'card.background',
+                                                    p: 2,
+                                                }}
+                                            >
                                                 {description}
-                                            </Text>
+                                            </Typography>
                                         </Grid>
                                     </Grid>
                                     {meterCO2 != null && meterCO2 !== undefined && (
diff --git a/src/app/components/ValidatorsMap/Statistics.tsx b/src/app/components/ValidatorsMap/Statistics.tsx
index d2fa8003..cca5f0e1 100644
--- a/src/app/components/ValidatorsMap/Statistics.tsx
+++ b/src/app/components/ValidatorsMap/Statistics.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
 import Highcharts from 'highcharts'
 import HighchartsReact from 'highcharts-react-official'
-import flags from './json/flags.json'
+import React from 'react'
 import { IStatistics } from 'types/statistics'
+import flags from './json/flags.json'
 
 const Statistics = ({ nodesPerCountry, darkMode }: IStatistics) => {
     const getUrlFlag = (index: string) => {
@@ -48,6 +48,12 @@ const Statistics = ({ nodesPerCountry, darkMode }: IStatistics) => {
         legend: {
             itemStyle: {
                 color: darkMode ? 'white' : 'black',
+                cursor: 'default',
+            },
+            itemHoverStyle: {
+                opacity: 1,
+                color: darkMode ? 'white' : 'black',
+                cursor: 'default',
             },
         },
         series: [
@@ -57,6 +63,12 @@ const Statistics = ({ nodesPerCountry, darkMode }: IStatistics) => {
                 color: '#41547C',
                 data: nodesPerCountry.map(value => value.nodes.length),
                 lineColor: 'transparent', // make the line invisible
+                showInLegend: true,
+                events: {
+                    legendItemClick: function () {
+                        return false
+                    },
+                },
             },
         ],
         credits: {
@@ -79,4 +91,4 @@ const Statistics = ({ nodesPerCountry, darkMode }: IStatistics) => {
     )
 }
 
-export default Statistics
+export default React.memo(Statistics)
diff --git a/src/app/pages/CChainPages/Address/Transactions.tsx b/src/app/pages/CChainPages/Address/Transactions.tsx
index f3d516a3..73217e56 100644
--- a/src/app/pages/CChainPages/Address/Transactions.tsx
+++ b/src/app/pages/CChainPages/Address/Transactions.tsx
@@ -1,17 +1,18 @@
-import React, { useRef, useEffect, useCallback, FC } from 'react'
-import { Grid, TableContainer, Box, LinearProgress } from '@mui/material'
-import { useLocation } from 'react-router-dom'
-import { useInfiniteQuery } from 'react-query'
-import { loadCAddressTransactions } from 'api'
+import { Box, Grid, LinearProgress, TableContainer } from '@mui/material'
+import React, { FC, useCallback, useEffect, useRef } from 'react'
+
 import Address from './Address'
-import TableView from 'app/components/Table/TableView'
-import useWidth from 'app/hooks/useWidth'
+import { CAddressTransactionTableData } from 'types/transaction'
+import { ColumnType } from 'app/pages/Validators'
 import LoadingWrapper from 'app/components/LoadingWrapper'
 import { Status } from 'types'
-import { queryClient } from '../../../../App'
+import TableView from 'app/components/Table/TableView'
 import { getAddressFromUrl } from 'utils/route-utils'
-import { CAddressTransactionTableData } from 'types/transaction'
-import { ColumnType } from 'app/pages/Validators'
+import { loadCAddressTransactions } from 'api'
+import { queryClient } from '../../../../App'
+import { useInfiniteQuery } from 'react-query'
+import { useLocation } from 'react-router-dom'
+import useWidth from 'app/hooks/useWidth'
 
 const Transactions: FC = () => {
     const location = useLocation()
@@ -73,7 +74,7 @@ const Transactions: FC = () => {
                 loadingBoxStyle={{ minHeight: '500px' }}
             >
                 {status === 'success' && data && (
-                    <TableContainer sx={{ height: '680px' }}>
+                    <TableContainer sx={{ height: '680px', borderRadius: '12px' }}>
                         {isWidescreen || isDesktop ? (
                             <TableView columns={columns}>{content}</TableView>
                         ) : (
diff --git a/src/app/pages/CChainPages/Blocks/BlockDetails.tsx b/src/app/pages/CChainPages/Blocks/BlockDetails.tsx
index 6a49c4a5..1de5e1a0 100644
--- a/src/app/pages/CChainPages/Blocks/BlockDetails.tsx
+++ b/src/app/pages/CChainPages/Blocks/BlockDetails.tsx
@@ -1,17 +1,18 @@
+import { Box, Grid, Paper } from '@mui/material'
 import React, { FC } from 'react'
-import { Grid, Paper, Box } from '@mui/material'
-import { useLocation } from 'react-router-dom'
-import { useAppDispatch, useAppSelector } from 'store/configureStore'
-import { fetchCBlockDetail } from 'store/cchainSlice/utils'
 import { getCBlockDetail, getCBlockDetailStatus } from 'store/cchainSlice'
-import { RoutesConfig } from 'utils/route-paths'
-import { Status } from 'types'
+import { useAppDispatch, useAppSelector } from 'store/configureStore'
+
+import BlockDetailView from './BlockDetailView'
 import LoadingWrapper from 'app/components/LoadingWrapper'
-import TransactionsList from 'app/pages/CChainPages/LatestBlocksAndTransactionsList/TransactionsList'
 import PageContainer from 'app/components/PageContainer'
-import BlockDetailView from './BlockDetailView'
+import { RoutesConfig } from 'utils/route-paths'
+import { Status } from 'types'
 import SubPageTitle from 'app/components/SubPageTitle'
+import TransactionsList from 'app/pages/CChainPages/LatestBlocksAndTransactionsList/TransactionsList'
+import { fetchCBlockDetail } from 'store/cchainSlice/utils'
 import { getBlockNumber } from 'utils/route-utils'
+import { useLocation } from 'react-router-dom'
 
 const BlockDetails: FC = () => {
     const routesConfig = RoutesConfig()
@@ -38,7 +39,6 @@ const BlockDetails: FC = () => {
                         backgroundColor: 'card.background',
                         borderRadius: '12px',
                         borderWidth: '1px',
-                        borderColor: 'primary.light',
                         borderStyle: 'solid',
                         p: '1rem 1.5rem 1rem 1.5rem',
                     }}
diff --git a/src/app/pages/CChainPages/Blocks/index.tsx b/src/app/pages/CChainPages/Blocks/index.tsx
index 27c3c4c4..54538501 100644
--- a/src/app/pages/CChainPages/Blocks/index.tsx
+++ b/src/app/pages/CChainPages/Blocks/index.tsx
@@ -1,17 +1,17 @@
+import { Box, Grid, LinearProgress, Paper, TableCellProps, TableContainer } from '@mui/material'
 import React, { FC } from 'react'
-import { Grid, Paper, TableContainer, TableCellProps, Box, LinearProgress } from '@mui/material'
-import { useInfiniteQuery } from 'react-query'
-import { getBlocksPage } from 'api'
-import { RoutesConfig } from 'utils/route-paths'
-import PageContainer from 'app/components/PageContainer'
+
 import Block from './Block'
+import { BlockTableData } from 'types/block'
+import PageContainer from 'app/components/PageContainer'
+import { RoutesConfig } from 'utils/route-paths'
+import SubPageTitle from 'app/components/SubPageTitle'
 import TableView from 'app/components/Table/TableView'
+import { getBlocksPage } from 'api'
+import { useInfiniteQuery } from 'react-query'
 import useWidth from 'app/hooks/useWidth'
-import SubPageTitle from 'app/components/SubPageTitle'
-import { BlockTableData } from 'types/block'
 
 const Blocks: FC = () => {
-
     const routesConfig = RoutesConfig()
     const intObserver = React.useRef<IntersectionObserver | null>(null)
     const { isDesktop, isWidescreen } = useWidth()
@@ -62,7 +62,6 @@ const Blocks: FC = () => {
                     backgroundColor: 'card.background',
                     borderRadius: '12px',
                     borderWidth: '1px',
-                    borderColor: 'primary.light',
                     borderStyle: 'solid',
                     p: '1rem 1.5rem 1rem 1.5rem',
                 }}
@@ -75,7 +74,7 @@ const Blocks: FC = () => {
                 >
                     <SubPageTitle title="C-Blocks" backToLink={routesConfig.CCHAIN} />
                     {status === 'success' && data && (
-                        <TableContainer sx={{ height: '750px' }}>
+                        <TableContainer sx={{ height: '750px', borderRadius: '12px' }}>
                             {isWidescreen || isDesktop ? (
                                 <TableView columns={columns}>{content}</TableView>
                             ) : (
diff --git a/src/app/pages/CChainPages/CChainPage.tsx b/src/app/pages/CChainPages/CChainPage.tsx
index 815e9cce..e828f06b 100644
--- a/src/app/pages/CChainPages/CChainPage.tsx
+++ b/src/app/pages/CChainPages/CChainPage.tsx
@@ -1,16 +1,18 @@
 import * as React from 'react'
-import { getCchainOverreview } from 'store/cchainSlice'
-import { Typography } from '@mui/material'
-import { useAppSelector } from 'store/configureStore'
+
+import { fetchBlocksTransactionsCChain, loadBlocksTransactionstype } from 'api'
+import { getValidatorsOverreview, getValidatorsStatus } from 'store/validatorsSlice'
+
+import DataControllers from 'app/components/DataControllers'
 import LatestBlocksAndTransactionsList from 'app/pages/CChainPages/LatestBlocksAndTransactionsList'
+import LoadingWrapper from 'app/components/LoadingWrapper'
 import OverviewCards from 'app/components/OverviewCards'
-import DataControllers from 'app/components/DataControllers'
 import PageContainer from 'app/components/PageContainer'
-import { getValidatorsOverreview, getValidatorsStatus } from 'store/validatorsSlice'
-import { useQuery } from 'react-query'
-import { fetchBlocksTransactionsCChain, loadBlocksTransactionstype } from 'api'
 import { Status } from 'types'
-import LoadingWrapper from 'app/components/LoadingWrapper'
+import { Typography } from '@mui/material'
+import { getCchainOverreview } from 'store/cchainSlice'
+import { useAppSelector } from 'store/configureStore'
+import { useQuery } from 'react-query'
 
 export default function CChainPage() {
     const validatorsLoading = useAppSelector(getValidatorsStatus)
diff --git a/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/BlockList.tsx b/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/BlockList.tsx
index a6143ebb..f790d575 100644
--- a/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/BlockList.tsx
+++ b/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/BlockList.tsx
@@ -23,7 +23,6 @@ const BlockList: FC<BlockListProps> = ({ title, items, to }) => {
                 display: 'flex',
                 backgroundColor: 'card.background',
                 borderWidth: '1px',
-                borderColor: 'primary.light',
                 borderStyle: 'solid',
                 p: '1rem 1.5rem 1rem 1.5rem',
                 flexDirection: 'column',
diff --git a/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/Items/TransactionItem.tsx b/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/Items/TransactionItem.tsx
index 20aefa9b..e2692351 100644
--- a/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/Items/TransactionItem.tsx
+++ b/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/Items/TransactionItem.tsx
@@ -1,12 +1,13 @@
+import { Box, Grid, Typography } from '@mui/material'
 import React, { FC } from 'react'
-import { Box, Typography, Grid } from '@mui/material'
-import { mdiTransfer } from '@mdi/js'
-import { CamAmount } from '../../../../components/CamAmount'
+
+import AddressLink from '../../../../components/AddressLink'
 import { CTransaction } from 'types/transaction'
-import { RoutesConfig } from 'utils/route-paths'
+import { CamAmount } from '../../../../components/CamAmount'
 import Icon from '@mdi/react'
-import AddressLink from '../../../../components/AddressLink'
 import RelativeTime from '../../../../components/RelativeTime'
+import { RoutesConfig } from 'utils/route-paths'
+import { mdiTransfer } from '@mdi/js'
 import useWidth from 'app/hooks/useWidth'
 
 interface TransactionItemProps {
diff --git a/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/TransactionsList.tsx b/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/TransactionsList.tsx
index 44748bc4..673ea147 100644
--- a/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/TransactionsList.tsx
+++ b/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/TransactionsList.tsx
@@ -25,7 +25,6 @@ const TransactionsList: FC<TransactionsListProps> = ({ title, items, link }) =>
                 display: 'flex',
                 backgroundColor: 'card.background',
                 borderWidth: '1px',
-                borderColor: 'primary.light',
                 borderStyle: 'solid',
                 p: '1rem 1.5rem 1rem 1.5rem',
                 flexDirection: 'column',
diff --git a/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/index.tsx b/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/index.tsx
index ef1323e4..0e99923c 100644
--- a/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/index.tsx
+++ b/src/app/pages/CChainPages/LatestBlocksAndTransactionsList/index.tsx
@@ -1,9 +1,10 @@
 import React, { FC } from 'react'
-import { Grid } from '@mui/material'
+
+import BlockList from './BlockList'
 import { BlockTableData } from 'types/block'
 import { CTransaction } from 'types/transaction'
+import { Grid } from '@mui/material'
 import { RoutesConfig } from 'utils/route-paths'
-import BlockList from './BlockList'
 import TransactionsList from './TransactionsList'
 
 interface LatestBlocksAndTransactionsListProps {
@@ -15,7 +16,6 @@ const LatestBlocksAndTransactionsList: FC<LatestBlocksAndTransactionsListProps>
     blocks,
     transactions,
 }) => {
-
     const routesConfig = RoutesConfig()
     return (
         <Grid container rowSpacing={{ xs: 4, lg: '0!important' }} columnSpacing={{ xs: 0, lg: 4 }}>
diff --git a/src/app/pages/CChainPages/Transactions/TransactionDetails.tsx b/src/app/pages/CChainPages/Transactions/TransactionDetails.tsx
index 25d888bc..7ef44331 100644
--- a/src/app/pages/CChainPages/Transactions/TransactionDetails.tsx
+++ b/src/app/pages/CChainPages/Transactions/TransactionDetails.tsx
@@ -1,4 +1,11 @@
-import React, { FC, useState, useEffect } from 'react'
+import { Box, Button, Grid, Paper, useTheme } from '@mui/material'
+import React, { FC, useEffect, useState } from 'react'
+import {
+    TrimmedTransactionDetails,
+    fetchNextTransactionDetails,
+    fetchPrevTransactionDetails,
+    getNextPrevTransaction,
+} from './utils'
 import {
     changeCurrentIndex,
     clearTr,
@@ -10,29 +17,23 @@ import {
     getNextPrevTx,
     resetLoadingStatusForNPTransactions,
 } from 'store/cchainSlice'
-import {
-    fetchNextTransactionDetails,
-    fetchPrevTransactionDetails,
-    getNextPrevTransaction,
-    TrimmedTransactionDetails,
-} from './utils'
-import { fetchTransactionDetails } from 'store/cchainSlice/utils'
+import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
 import { useAppDispatch, useAppSelector } from 'store/configureStore'
-import { Grid, Paper, useTheme, Box, Button } from '@mui/material'
-import { useNavigate } from 'react-router-dom'
-import { Status } from 'types'
-import { mdiTransfer } from '@mdi/js'
-import { mdiChevronRight, mdiChevronLeft } from '@mdi/js'
-import { RoutesConfig } from 'utils/route-paths'
-import PageContainer from 'app/components/PageContainer'
+
 import BackButton from 'app/components/BackButton'
-import OutlinedContainer from 'app/components/OutlinedContainer'
 import DetailsField from 'app/components/DetailsField'
 import Icon from '@mdi/react'
-import TransactionDetailView from './TransactionDetailView'
+import OutlinedContainer from 'app/components/OutlinedContainer'
+import PageContainer from 'app/components/PageContainer'
+import RoundButton from 'app/components/RoundButton'
+import { RoutesConfig } from 'utils/route-paths'
+import { Status } from 'types'
 import SubPageTitle from 'app/components/SubPageTitle'
+import TransactionDetailView from './TransactionDetailView'
+import { fetchTransactionDetails } from 'store/cchainSlice/utils'
 import { getTransactionFromUrl } from 'utils/route-utils'
-import RoundButton from 'app/components/RoundButton'
+import { mdiTransfer } from '@mdi/js'
+import { useNavigate } from 'react-router-dom'
 
 const TransactionDetails: FC = () => {
     const routesConfig = RoutesConfig()
@@ -89,22 +90,23 @@ const TransactionDetails: FC = () => {
     }, [currentIndex])
 
     return (
-        <PageContainer pageTitle="C TransactionDetails" metaContent="chain-overview c-chain">
+        <PageContainer pageTitle="C Transaction Details" metaContent="chain-overview c-chain">
             <Paper
                 variant="outlined"
                 square
                 sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
                     minHeight: '680px',
                     width: 1,
                     backgroundColor: 'card.background',
                     borderRadius: '12px',
                     borderWidth: '1px',
-                    borderColor: 'primary.light',
                     borderStyle: 'solid',
                     p: '1rem 1.5rem 1rem 1.5rem',
                 }}
             >
-                <Grid container direction="column" sx={{ width: 1, gap: '20px' }}>
+                <Grid container direction="column" sx={{ width: 1, gap: '20px', flex: 1 }}>
                     <SubPageTitle title="C-Chain Transaction" backToLink={routesConfig.CCHAIN}>
                         <Box
                             sx={{
@@ -185,7 +187,14 @@ const TransactionDetails: FC = () => {
                     />
                 </Grid>
                 {(detailTr || detailCr) && (
-                    <Box sx={{ display: 'flex', width: '100%', paddingTop: '1rem' }}>
+                    <Box
+                        sx={{
+                            display: 'flex',
+                            width: '100%',
+                            paddingTop: '1rem',
+                            marginTop: 'auto',
+                        }}
+                    >
                         <BackButton backToLink={routesConfig.CCHAIN} />
                     </Box>
                 )}
diff --git a/src/app/pages/CChainPages/Transactions/index.tsx b/src/app/pages/CChainPages/Transactions/index.tsx
index 0ccf6d2a..1a703509 100644
--- a/src/app/pages/CChainPages/Transactions/index.tsx
+++ b/src/app/pages/CChainPages/Transactions/index.tsx
@@ -1,15 +1,16 @@
-import React, { FC, useRef, useCallback } from 'react'
-import { Grid, Paper, TableContainer, Box, LinearProgress } from '@mui/material'
-import { useInfiniteQuery } from 'react-query'
-import { getTransactionsPage } from 'api'
+import { Box, Grid, LinearProgress, Paper, TableContainer } from '@mui/material'
+import React, { FC, useCallback, useRef } from 'react'
+
+import { ColumnType } from 'app/pages/Validators'
 import PageContainer from 'app/components/PageContainer'
+import { RoutesConfig } from 'utils/route-paths'
+import SubPageTitle from 'app/components/SubPageTitle'
 import TableView from 'app/components/Table/TableView'
-import useWidth from 'app/hooks/useWidth'
 import Transaction from './Transaction'
-import SubPageTitle from 'app/components/SubPageTitle'
-import { RoutesConfig } from 'utils/route-paths'
 import { TransactionTableData } from 'types/transaction'
-import { ColumnType } from 'app/pages/Validators'
+import { getTransactionsPage } from 'api'
+import { useInfiniteQuery } from 'react-query'
+import useWidth from 'app/hooks/useWidth'
 
 const Transactions: FC = () => {
     const intObserver = useRef<IntersectionObserver | null>(null)
@@ -69,7 +70,6 @@ const Transactions: FC = () => {
                     backgroundColor: 'card.background',
                     borderRadius: '12px',
                     borderWidth: '1px',
-                    borderColor: 'primary.light',
                     borderStyle: 'solid',
                     p: '1rem 1.5rem 1rem 1.5rem',
                 }}
@@ -82,7 +82,7 @@ const Transactions: FC = () => {
                 >
                     <SubPageTitle title="C-Transactions" backToLink={routesConfig.CCHAIN} />
                     {status === 'success' && data && (
-                        <TableContainer sx={{ height: '750px' }}>
+                        <TableContainer sx={{ height: '750px', borderRadius: '12px' }}>
                             {isWidescreen || isDesktop ? (
                                 <TableView columns={columns}>{content}</TableView>
                             ) : (
diff --git a/src/app/pages/Statistics/index.tsx b/src/app/pages/Statistics/index.tsx
index 8f67a8ee..a2a41468 100644
--- a/src/app/pages/Statistics/index.tsx
+++ b/src/app/pages/Statistics/index.tsx
@@ -1,6 +1,6 @@
+import '../../../styles/datacharts.css'
+
 import { Paper, useTheme } from '@mui/material'
-import PageContainer from 'app/components/PageContainer'
-import SubPageTitle from 'app/components/SubPageTitle'
 import React, { FC } from 'react'
 import {
     getActiveAddresses,
@@ -24,12 +24,13 @@ import {
     loadGasUsed,
     loadUniqueAddresses,
 } from 'store/blockchainDatachartsSlice/utils'
-import { typeChartData } from '../../../utils/statistics/ChartSelector'
-import BlockchainCharts from '../../components/Statistics/BlockchainDataCharts'
 
+import BlockchainCharts from '../../components/Statistics/BlockchainDataCharts'
 import Box from '@mui/material/Box'
 import Grid from '@mui/material/Grid'
-import '../../../styles/datacharts.css'
+import PageContainer from 'app/components/PageContainer'
+import SubPageTitle from 'app/components/SubPageTitle'
+import { typeChartData } from '../../../utils/statistics/ChartSelector'
 
 const Statistics: FC = () => {
     const theme = useTheme()
@@ -43,10 +44,9 @@ const Statistics: FC = () => {
                 sx={{
                     minHeight: '544px',
                     width: 1,
-                    backgroundColor: 'primary.dark',
+                    backgroundColor: 'card.background',
                     borderRadius: '12px',
                     borderWidth: '1px',
-                    borderColor: 'primary.light',
                     borderStyle: 'solid',
                     p: '1rem 1.5rem 1rem 1.5rem',
                 }}
@@ -138,10 +138,9 @@ const Statistics: FC = () => {
                 sx={{
                     minHeight: '544px',
                     width: 1,
-                    backgroundColor: 'primary.dark',
+                    backgroundColor: 'card.background',
                     borderRadius: '12px',
                     borderWidth: '1px',
-                    borderColor: 'primary.light',
                     borderStyle: 'solid',
                     p: '1rem 1.5rem 1rem 1.5rem',
                 }}
diff --git a/src/app/pages/Validators/GridViewItem.tsx b/src/app/pages/Validators/GridViewItem.tsx
index 14f54888..130fa5ea 100644
--- a/src/app/pages/Validators/GridViewItem.tsx
+++ b/src/app/pages/Validators/GridViewItem.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react'
-import { Grid, Paper, Typography, Box } from '@mui/material'
+
+import { Box, Grid, Paper, Typography } from '@mui/material'
+
+import Chip from '@mui/material/Chip'
+import CopyButton from '../../components/CopyToClipboardButton'
 import { Field } from 'app/components/DetailsField'
+import Tooltip from '@mui/material/Tooltip'
 import { ValidatorType } from 'types/store'
-import Chip from '@mui/material/Chip'
 import moment from 'utils/helpers/moment'
-import Tooltip from '@mui/material/Tooltip'
-import CopyButton from '../../components/CopyToClipboardButton'
 import useFeatureFlags from '../../../context/featureFlagProvider'
 
 export const GridViewItem = ({ validator }: { validator: ValidatorType }) => {
@@ -35,7 +37,6 @@ export const GridViewItem = ({ validator }: { validator: ValidatorType }) => {
                 gap: '10px',
                 display: 'flex',
                 flexDirection: 'column',
-                backgroundColor: 'primary.light',
                 backgroundImage: 'none',
             }}
         >
diff --git a/src/app/pages/Validators/index.tsx b/src/app/pages/Validators/index.tsx
index 75ccfa2a..d1725105 100644
--- a/src/app/pages/Validators/index.tsx
+++ b/src/app/pages/Validators/index.tsx
@@ -75,10 +75,9 @@ const Validators: FC = () => {
                     minHeight: '544px',
                     width: 1,
                     flex: 1,
-                    backgroundColor: 'primary.dark',
+                    backgroundColor: 'card.background',
                     borderRadius: '12px',
                     borderWidth: '1px',
-                    borderColor: 'primary.light',
                     borderStyle: 'solid',
                     p: '1rem 1.5rem 1rem 1.5rem',
                 }}
diff --git a/src/app/pages/XChainPages/Address/AddressSection.tsx b/src/app/pages/XChainPages/Address/AddressSection.tsx
index 1ce9e6a2..7bd33b9a 100644
--- a/src/app/pages/XChainPages/Address/AddressSection.tsx
+++ b/src/app/pages/XChainPages/Address/AddressSection.tsx
@@ -1,10 +1,11 @@
-import React from 'react'
-import { Grid, Box, Chip } from '@mui/material'
+import { Box, Chip, Grid } from '@mui/material'
+
 import AddressLink from 'app/components/AddressLink'
-import moment from 'utils/helpers/moment'
-import { getAddressFromUrl } from 'utils/route-utils'
-import { RoutesConfig } from 'utils/route-paths'
 import { IAddress } from 'types/address'
+import React from 'react'
+import { RoutesConfig } from 'utils/route-paths'
+import { getAddressFromUrl } from 'utils/route-utils'
+import moment from 'utils/helpers/moment'
 
 export const AddressSection = ({ type, timestamp, id, chainType }: IAddress) => {
     const routesConfig = RoutesConfig()
@@ -50,11 +51,7 @@ export const AddressSection = ({ type, timestamp, id, chainType }: IAddress) =>
                     <Chip
                         label={type}
                         size="small"
-                        style={{
-                            minWidth: '61px',
-                            height: 'min-content',
-                            backgroundColor: '#334155',
-                        }}
+                        style={{ minWidth: '61px', height: 'min-content' }}
                     />
                 </Grid>
             </Grid>
diff --git a/src/app/pages/XChainPages/Address/InputOutputSection.tsx b/src/app/pages/XChainPages/Address/InputOutputSection.tsx
index b165d208..e3d89cef 100644
--- a/src/app/pages/XChainPages/Address/InputOutputSection.tsx
+++ b/src/app/pages/XChainPages/Address/InputOutputSection.tsx
@@ -1,8 +1,9 @@
-import React from 'react'
+import { Fund, InputsOutputs } from 'types/transaction'
 import { Grid, Paper, Typography } from '@mui/material'
+
 import DetailsField from 'app/components/DetailsField'
+import React from 'react'
 import useWidth from 'app/hooks/useWidth'
-import { Fund, InputsOutputs } from 'types/transaction'
 
 export const InputOutputSection = ({ inputs, outputs }: InputsOutputs) => {
     const { isTablet } = useWidth()
@@ -80,10 +81,14 @@ const InputCard = ({ address, value }: Fund) => {
                 gap: '10px',
                 display: 'flex',
                 flexDirection: 'column',
-                backgroundColor: 'primary.light',
                 backgroundImage: 'none',
                 maxWidth: '500px',
                 width: '100%',
+                borderRadius: '12px',
+                backgroundColor: 'card.background',
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                borderColor: 'card.border',
             }}
         >
             <Typography
@@ -114,10 +119,14 @@ const OutputCard = ({ address, value }: Fund) => {
                 gap: '10px',
                 display: 'flex',
                 flexDirection: 'column',
-                backgroundColor: 'primary.light',
                 backgroundImage: 'none',
                 maxWidth: '500px',
                 width: '100%',
+                borderRadius: '12px',
+                backgroundColor: 'card.background',
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                borderColor: 'card.border',
             }}
         >
             <Typography
diff --git a/src/app/pages/XChainPages/Address/XAddressDetail.tsx b/src/app/pages/XChainPages/Address/XAddressDetail.tsx
index 9d3f572f..a7eadcf3 100644
--- a/src/app/pages/XChainPages/Address/XAddressDetail.tsx
+++ b/src/app/pages/XChainPages/Address/XAddressDetail.tsx
@@ -1,20 +1,21 @@
+import { Box, Grid, Paper, Typography } from '@mui/material'
 import React, { useEffect, useState } from 'react'
+import { addressesApi, assetsApi } from 'utils/magellan-api-utils'
+import { getAddressFromUrl, getChainTypeFromUrl } from 'utils/route-utils'
+
+import { CamAmount } from 'app/components/CamAmount'
+import { ChainType } from 'utils/types/chain-type'
+import CopyTitleCard from 'app/components/CopyTitleCard'
 import PageContainer from 'app/components/PageContainer'
+import { RoutesConfig } from '../../../../utils/route-paths'
 import SubPageTitle from 'app/components/SubPageTitle'
-import CopyTitleCard from 'app/components/CopyTitleCard'
-import TabsHeader from 'app/components/TabComponent/TabsHeader'
 import TabPanel from 'app/components/TabComponent/TabPanel'
+import TabsHeader from 'app/components/TabComponent/TabsHeader'
 import XPAddressView from './XPAddressView'
 import axios from 'axios'
-import { Typography, Box, Grid, Paper } from '@mui/material'
-import { useLocation } from 'react-router-dom'
-import { CamAmount } from 'app/components/CamAmount'
-import { ChainType } from 'utils/types/chain-type'
-import { mdiFileDocumentOutline } from '@mdi/js'
 import { getBaseUrl } from 'api/utils'
-import { addressesApi, assetsApi } from 'utils/magellan-api-utils'
-import { RoutesConfig } from '../../../../utils/route-paths'
-import { getChainTypeFromUrl, getAddressFromUrl } from 'utils/route-utils'
+import { mdiFileDocumentOutline } from '@mdi/js'
+import { useLocation } from 'react-router-dom'
 
 const tabOptions = [
     {
@@ -104,7 +105,7 @@ export default function XAddressDetail() {
                 mixedStyle
             />
             <AddressOverviewCard balance={balance} />
-            <Paper square variant="outlined" sx={{ backgroundColor: 'primary.dark' }}>
+            <Paper square variant="outlined" sx={{ backgroundColor: 'card.background' }}>
                 <TabsHeader tabValue={value} changeAction={handleChange} tabOptions={tabOptions}>
                     <Panels value={value} chainType={getChainTypeFromUrl() as ChainType} />
                 </TabsHeader>
@@ -126,7 +127,7 @@ const Panels = ({ value, chainType }: { value: number; chainType: ChainType }) =
 
 export const AddressOverviewCard = ({ balance }: { balance: number }) => {
     return (
-        <Paper variant="outlined" sx={{ backgroundColor: 'primary.dark' }}>
+        <Paper variant="outlined" sx={{ backgroundColor: 'card.background' }}>
             <Box p={2}>
                 <Grid container spacing={2}>
                     <Grid item xs md={6}>
diff --git a/src/app/pages/XChainPages/Address/XPAddressView.tsx b/src/app/pages/XChainPages/Address/XPAddressView.tsx
index 116c10dc..d613364f 100644
--- a/src/app/pages/XChainPages/Address/XPAddressView.tsx
+++ b/src/app/pages/XChainPages/Address/XPAddressView.tsx
@@ -1,16 +1,18 @@
 import * as React from 'react'
-import { Grid, TableContainer, Divider } from '@mui/material'
-import axios from 'axios'
+
+import { Divider, Grid, TableContainer } from '@mui/material'
 import { convertMemo, getInputFunds, getOutputFunds } from 'utils/magellan'
-import { MagellanXPTransaction } from 'types/magellan-types'
-import { useLocation } from 'react-router-dom'
-import { ChainType } from 'utils/types/chain-type'
+import { getBaseUrl, getChainID } from 'api/utils'
+
 import { AddressSection } from './AddressSection'
+import { ChainType } from 'utils/types/chain-type'
 import { InputOutputSection } from './InputOutputSection'
-import { getBaseUrl, getChainID } from 'api/utils'
-import { xpTransactionApi } from 'utils/magellan-api-utils'
-import { getAddressFromUrl } from 'utils/route-utils'
 import { LoadsBlocksAndTransactions } from 'types/address'
+import { MagellanXPTransaction } from 'types/magellan-types'
+import axios from 'axios'
+import { getAddressFromUrl } from 'utils/route-utils'
+import { useLocation } from 'react-router-dom'
+import { xpTransactionApi } from 'utils/magellan-api-utils'
 
 export function createTransaction(magellanTransaction: MagellanXPTransaction) {
     return {
diff --git a/src/app/pages/XChainPages/Transactions/Transaction.tsx b/src/app/pages/XChainPages/Transactions/Transaction.tsx
index 25c8e4f5..5641ddb4 100644
--- a/src/app/pages/XChainPages/Transactions/Transaction.tsx
+++ b/src/app/pages/XChainPages/Transactions/Transaction.tsx
@@ -1,15 +1,16 @@
-import React from 'react'
-import { Grid, Paper, TableCell, TableRow, Typography, Chip } from '@mui/material'
-import { Field } from 'app/components/DetailsField'
-import { getAddressLink, GetTransactionType, GetAddressType } from 'utils/route-utils'
-import { ChainType } from 'utils/types/chain-type'
+import { Chip, Grid, Paper, TableCell, TableRow, Typography } from '@mui/material'
+import { GetAddressType, GetTransactionType, getAddressLink } from 'utils/route-utils'
+
 import AddressLink from 'app/components/AddressLink'
-import useWidth from 'app/hooks/useWidth'
-import moment from 'utils/helpers/moment'
+import { ChainType } from 'utils/types/chain-type'
+import { Field } from 'app/components/DetailsField'
 import { NoMaxWidthTooltip } from 'app/components/RelativeTime'
-import { getChainTypeFromUrl } from 'utils/route-utils'
-import { XPTransaction } from 'types/transaction'
+import React from 'react'
 import { RoutesConfig } from 'utils/route-paths'
+import { XPTransaction } from 'types/transaction'
+import { getChainTypeFromUrl } from 'utils/route-utils'
+import moment from 'utils/helpers/moment'
+import useWidth from 'app/hooks/useWidth'
 
 interface Props {
     transaction: any
@@ -37,7 +38,6 @@ const Transaction = React.forwardRef<Ref, Props>((props, ref) => {
                     gap: '10px',
                     display: 'flex',
                     flexDirection: 'column',
-                    backgroundColor: 'primary.light',
                     backgroundImage: 'none',
                 }}
                 ref={ref}
@@ -53,7 +53,6 @@ const Transaction = React.forwardRef<Ref, Props>((props, ref) => {
                     gap: '10px',
                     display: 'flex',
                     flexDirection: 'column',
-                    backgroundColor: 'primary.light',
                     backgroundImage: 'none',
                 }}
             >
@@ -139,7 +138,7 @@ const GridItem = ({ transaction }: { transaction: XPTransaction }) => {
                 <Chip
                     label={transaction.type}
                     size="small"
-                    style={{ minWidth: '61px', height: 'min-content', backgroundColor: '#334155' }}
+                    style={{ minWidth: '61px', height: 'min-content' }}
                 />
             </Grid>
             <Grid item xs={12} md zeroMinWidth order={{ xs: 3, md: 2 }}>
@@ -222,7 +221,7 @@ const CustomRow = ({ transaction }: { transaction: XPTransaction }) => {
                 <Chip
                     label={transaction.type}
                     size="small"
-                    style={{ minWidth: '61px', height: 'min-content', backgroundColor: '#334155' }}
+                    style={{ minWidth: '61px', height: 'min-content' }}
                 />
             </TableCell>
             <TableCell align="left" width="15%">
diff --git a/src/app/pages/XChainPages/Transactions/XPTransactionDetailView.tsx b/src/app/pages/XChainPages/Transactions/XPTransactionDetailView.tsx
index 2e592c49..1df3d407 100644
--- a/src/app/pages/XChainPages/Transactions/XPTransactionDetailView.tsx
+++ b/src/app/pages/XChainPages/Transactions/XPTransactionDetailView.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react'
+
 import { Divider, Grid } from '@mui/material'
-import OutlinedContainer from 'app/components/OutlinedContainer'
+
 import DetailsField from 'app/components/DetailsField'
+import { ITransactionDetailView } from 'types/transaction'
+import Icon from '@mdi/react'
 import { InputOutputSection } from '../Address/InputOutputSection'
-import { mdiCheckboxMarkedCircleOutline } from '@mdi/js'
+import OutlinedContainer from 'app/components/OutlinedContainer'
 import { mdiAlertCircleOutline } from '@mdi/js'
-import Icon from '@mdi/react'
-import { ITransactionDetailView } from 'types/transaction'
+import { mdiCheckboxMarkedCircleOutline } from '@mdi/js'
 
 function TransactionDetailView({ detailTr, inputs, outputs }: ITransactionDetailView) {
     return (
@@ -72,11 +74,15 @@ function TransactionDetailView({ detailTr, inputs, outputs }: ITransactionDetail
                                 type="string"
                                 style={{ padding: '1rem' }}
                             />
-                            <Divider variant="fullWidth" />
-                        </Grid>
-                        <Grid container item xs={12} spacing={2} sx={{ padding: '1rem' }}>
-                            <InputOutputSection inputs={inputs} outputs={outputs} />
+                            {inputs && inputs?.length > 0 && outputs && outputs?.length > 0 && (
+                                <Divider variant="fullWidth" />
+                            )}
                         </Grid>
+                        {inputs && inputs?.length > 0 && outputs && outputs?.length > 0 && (
+                            <Grid container item xs={12} spacing={2} sx={{ padding: '1rem' }}>
+                                <InputOutputSection inputs={inputs} outputs={outputs} />
+                            </Grid>
+                        )}
                     </Grid>
                 </OutlinedContainer>
             )}
diff --git a/src/app/pages/XChainPages/Transactions/XPTransactionsDetails.tsx b/src/app/pages/XChainPages/Transactions/XPTransactionsDetails.tsx
index d1db99e5..f1381c5c 100644
--- a/src/app/pages/XChainPages/Transactions/XPTransactionsDetails.tsx
+++ b/src/app/pages/XChainPages/Transactions/XPTransactionsDetails.tsx
@@ -1,22 +1,25 @@
-import { mdiTransfer } from '@mdi/js'
+import * as React from 'react'
+
 import { Box, Grid, Paper, Typography } from '@mui/material'
+import { convertMemo, getInputFunds, getOutputFunds } from 'utils/magellan'
+import { getAddressFromUrl, getChainTypeFromUrl } from 'utils/route-utils'
+
 import BackButton from 'app/components/BackButton'
 import CopyTitleCard from 'app/components/CopyTitleCard'
 import PageContainer from 'app/components/PageContainer'
+import { RoutesConfig } from 'utils/route-paths'
+import SubPageTitle from 'app/components/SubPageTitle'
+import TransactionDetailView from './XPTransactionDetailView'
+import { XPTransaction } from 'types/transaction'
+import { XPTransactionDetail } from 'types/magellan-types'
 import axios from 'axios'
+import { currentDateFormat } from 'utils/helpers/moment'
+import { mdiTransfer } from '@mdi/js'
 import moment from 'moment'
-import * as React from 'react'
-import { useLocation } from 'react-router-dom'
 import { selectMagellanAddress } from 'store/app-config'
-import { useAppSelector } from 'store/configureStore'
-import { XPTransactionDetail } from 'types/magellan-types'
-import { XPTransaction } from 'types/transaction'
-import { currentDateFormat } from 'utils/helpers/moment'
-import { convertMemo, getInputFunds, getOutputFunds } from 'utils/magellan'
 import { transactionApi } from 'utils/magellan-api-utils'
-import { RoutesConfig } from 'utils/route-paths'
-import { getAddressFromUrl, getChainTypeFromUrl } from 'utils/route-utils'
-import TransactionDetailView from './XPTransactionDetailView'
+import { useAppSelector } from 'store/configureStore'
+import { useLocation } from 'react-router-dom'
 
 export default function XPTransactionDetails() {
     const routesConfig = RoutesConfig()
@@ -73,34 +76,24 @@ export default function XPTransactionDetails() {
                 variant="outlined"
                 square
                 sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
                     minHeight: '680px',
                     width: 1,
                     backgroundColor: 'card.background',
                     borderRadius: '12px',
                     borderWidth: '1px',
-                    borderColor: 'primary.light',
                     borderStyle: 'solid',
                     p: '1rem 1.5rem 1rem 1.5rem',
                 }}
             >
-                <Grid container direction="column" sx={{ width: 1, gap: '20px' }}>
-                    <Grid
-                        item
-                        container
-                        alignItems="center"
-                        sx={{
-                            gap: '20px',
-                        }}
-                    >
-                        <BackButton
-                            backToLink={`${routesConfig.BASE_PATH}/${getChainTypeFromUrl()}`}
-                        />
-                        <Typography variant="h5" component="h5" fontWeight="fontWeightBold">
-                            {`${location.pathname
-                                .split('/')[3][0]
-                                .toLocaleUpperCase()}-Chain Transaction`}
-                        </Typography>
-                    </Grid>
+                <Grid container direction="column" sx={{ width: 1, gap: '20px', flex: 1 }}>
+                    <SubPageTitle
+                        title={`${location.pathname
+                            .split('/')[3][0]
+                            .toLocaleUpperCase()}-Chain Transaction`}
+                        backToLink={`${routesConfig.BASE_PATH}/${getChainTypeFromUrl()}`}
+                    />
                     {details && (
                         <CopyTitleCard label="Transaction" value={details.id} icon={mdiTransfer} />
                     )}
diff --git a/src/app/pages/XChainPages/Transactions/index.tsx b/src/app/pages/XChainPages/Transactions/index.tsx
index 66d03287..c11a606d 100644
--- a/src/app/pages/XChainPages/Transactions/index.tsx
+++ b/src/app/pages/XChainPages/Transactions/index.tsx
@@ -1,15 +1,16 @@
-import React from 'react'
-import { Grid, Paper, TableContainer, Box, LinearProgress } from '@mui/material'
-import { useInfiniteQuery } from 'react-query'
-import { getXPTransactions } from 'api'
-import PageContainer from 'app/components/PageContainer'
+import { Box, Grid, LinearProgress, Paper, TableContainer } from '@mui/material'
+
+import { ColumnType } from 'app/pages/Validators'
 import CutomTable from 'app/components/Table/TableView'
-import useWidth from 'app/hooks/useWidth'
-import Transaction from './Transaction'
+import PageContainer from 'app/components/PageContainer'
+import React from 'react'
+import { RoutesConfig } from 'utils/route-paths'
 import SubPageTitle from 'app/components/SubPageTitle'
+import Transaction from './Transaction'
 import { getChainTypeFromUrl } from 'utils/route-utils'
-import { ColumnType } from 'app/pages/Validators'
-import { RoutesConfig } from 'utils/route-paths'
+import { getXPTransactions } from 'api'
+import { useInfiniteQuery } from 'react-query'
+import useWidth from 'app/hooks/useWidth'
 
 const XPTransactions = () => {
     const routesConfig = RoutesConfig()
@@ -73,10 +74,9 @@ const XPTransactions = () => {
                 sx={{
                     minHeight: '680px',
                     width: 1,
-                    backgroundColor: 'primary.dark',
+                    backgroundColor: 'card.background',
                     borderRadius: '12px',
                     borderWidth: '1px',
-                    borderColor: 'primary.light',
                     borderStyle: 'solid',
                     p: '1rem 1.5rem 1rem 1.5rem',
                 }}
@@ -92,7 +92,7 @@ const XPTransactions = () => {
                         backToLink={routesConfig.BASE_PATH + '/' + chainType}
                     />
                     {status === 'success' && data && (
-                        <TableContainer sx={{ height: '650px' }}>
+                        <TableContainer sx={{ height: '650px', borderRadius: '12px' }}>
                             {isWidescreen || isDesktop ? (
                                 <CutomTable columns={columns}>{content}</CutomTable>
                             ) : (
@@ -160,4 +160,4 @@ const columns: ColumnType[] = [
     },
 ]
 
-export default XPTransactions
\ No newline at end of file
+export default XPTransactions
diff --git a/src/index.css b/src/index.css
index 8b137891..edbf7b34 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1 +1,56 @@
+:root {
+    --border-radius-lg: 12px;
+    --border-radius-sm: 6px;
+    --spacing-space-md: 12px;
+    --spacing-space-base: 16px;
 
+    --spacing-space-sm: 8px;
+    --spacing-space-md: 12px;
+    --spacing-space-base: 16px;
+    --spacing-space-lg: 24px;
+
+    --tailwind-slate-white: #ffffff;
+    --tailwind-slate-slate-50: #f8fafc;
+    --tailwind-slate-slate-100: #f1f5f9;
+    --tailwind-slate-slate-200: #e2e7f0;
+    --tailwind-slate-slate-300: #cbd4e2;
+    --tailwind-slate-slate-400: #94a2b8;
+    --tailwind-slate-slate-500: #64748b;
+    --tailwind-slate-slate-600: #475569;
+    --tailwind-slate-slate-700: #334155;
+    --tailwind-slate-slate-800: #1e293b;
+    --tailwind-slate-slate-900: #0f182a;
+    --tailwind-slate-slate-950: #020617;
+
+    --camino-too-blue-to-be-true: #0085ff;
+    --camino-magento: #b440fc;
+    --camino-aphrodite-teal: #35e9ad;
+    --camino-aphrodite-aqua: #b5e3fd;
+    --camino-muted-blue: #317ca5;
+
+    --camino-gradient-1: linear-gradient(90deg, #0085ff 0%, #b440fc 100%);
+    --camino-gradient-2: linear-gradient(90deg, #b440fc 0%, #35e9ad 100%);
+    --camino-gradient-3: linear-gradient(90deg, #35e9ad 0%, #0085ff 100%);
+    --camino-gradient-4: linear-gradient(90deg, #b440fc 0%, #0f182a 100%);
+
+    --camino-primary-light: #b3daff;
+    --camino-primary-dark: #012c5d;
+    --camino-secondary-light: #e9c6fe;
+    --camino-secondary-dark: #37175c;
+    --camino-success-light: #18b728;
+    --camino-success-dark: #09de6b;
+    --camino-warning-light: #e5a21f;
+    --camino-warning-dark: #e5a21f;
+    --camino-error-light: #e5431f;
+    --camino-error-dark: #e5431f;
+}
+
+html[data-theme='light'] {
+    --bg: #f1f5f9;
+    --bg-card: #ffffff;
+}
+
+html[data-theme='dark'] {
+    --bg: #020617;
+    --bg-card: #020617;
+}
diff --git a/src/styles/theme/themes.ts b/src/styles/theme/themes.ts
index 702eb6f7..299157c9 100644
--- a/src/styles/theme/themes.ts
+++ b/src/styles/theme/themes.ts
@@ -71,7 +71,7 @@ export const LightThemePalette: Partial<PaletteWithCustomColors> = {
         contrastText: '#0F172A',
     },
     secondary: {
-        main: '#149EED',
+        main: '#0085FF',
         light: '#B440FC',
         dark: '#7E2DB0',
         contrastText: '#0F172A',
@@ -104,7 +104,7 @@ export const LightThemePalette: Partial<PaletteWithCustomColors> = {
     card: {
         background: '#FFFFFF',
         navBar: '#FFFFFF',
-        border: '#CBD5E1',
+        border: '#CBD4E2',
         title: '#0F172A',
         subValue: '#334155',
         contrastText: '#0F172A',
@@ -146,7 +146,7 @@ export const DarkThemePalette: Partial<PaletteWithCustomColors> = {
         contrastText: '#FFFFFF',
     },
     secondary: {
-        main: '#149EED',
+        main: '#0085FF',
         light: '#B440FC',
         dark: '#7E2DB0',
         contrastText: '#0F172A',
@@ -177,9 +177,9 @@ export const DarkThemePalette: Partial<PaletteWithCustomColors> = {
     },
     grey: grey,
     card: {
-        background: '#0F172A',
-        navBar: '#0F172A',
-        border: alpha('#919EAB', 0.24),
+        background: `var(--bg)`,
+        navBar: `var(--bg)`,
+        border: '#334155',
         title: '#64748B',
         subValue: '#64748B',
         contrastText: '#FFFFFF',
@@ -342,14 +342,16 @@ const defaultComponents = {
             },
         },
     },
-    MuiPaper: {
-        styleOverrides: {
-            root: {
-                boxShadow: '0px 0px 5px rgba(0, 0, 0, 0.1)',
-                borderRadius: '7px',
-            },
-        },
-    },
+    // MuiPaper: {
+    //     styleOverrides: {
+    //         root: {
+    //             // boxShadow: '0px 0px 5px rgba(0, 0, 0, 0.1)',
+    //             boxShadow: 'none',
+    //             borderRadius: '7px',
+    //             borderColor: 'card.border',
+    //         },
+    //     },
+    // },
     MuiTab: {
         styleOverrides: {
             root: {
@@ -403,6 +405,15 @@ const defaultComponents = {
 export const lightTheme = createTheme({
     palette: LightThemePalette,
     components: {
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    boxShadow: 'none',
+                    borderRadius: '7px',
+                    borderColor: '#CBD4E2',
+                },
+            },
+        },
         MuiCssBaseline: {
             styleOverrides: {
                 body: {
@@ -445,10 +456,19 @@ export const lightTheme = createTheme({
 export const darkTheme = createTheme({
     palette: DarkThemePalette,
     components: {
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    boxShadow: 'none',
+                    borderRadius: '7px',
+                    borderColor: '#334155',
+                },
+            },
+        },
         MuiCssBaseline: {
             styleOverrides: {
                 body: {
-                    backgroundColor: '#0F172A',
+                    backgroundColor: `var(--bg)`,
                 },
             },
         },
diff --git a/src/types/filesInComponents.ts b/src/types/filesInComponents.ts
index c52f7821..d217f848 100644
--- a/src/types/filesInComponents.ts
+++ b/src/types/filesInComponents.ts
@@ -1,6 +1,6 @@
 export interface IDetailsField {
     field: string
-    value?: string | number
+    value?: string | number | React.ReactElement
     type: string
     icon?: React.ReactElement
     tooltip?: string
@@ -13,7 +13,7 @@ export interface IDetailsField {
 
 export interface IField {
     type: string
-    value?: number | string
+    value?: number | string | React.ReactElement
     fontWeight?: string
     abbreviate?: boolean
     field?: string
diff --git a/src/utils/statistics/TextBlockchainDatachart.tsx b/src/utils/statistics/TextBlockchainDatachart.tsx
index f8743416..5816fe8f 100644
--- a/src/utils/statistics/TextBlockchainDatachart.tsx
+++ b/src/utils/statistics/TextBlockchainDatachart.tsx
@@ -1,8 +1,8 @@
-import { useTheme } from '@mui/material'
-import moment from 'moment'
-import React from 'react'
 import { IBlockChainDataChart } from 'types/statistics'
+import React from 'react'
+import { Typography } from '@mui/material'
 import { currentDateFormat } from 'utils/helpers/moment'
+import moment from 'moment'
 import { seeTimeAxis } from '../../app/components/Statistics/ChartConfig/SeeTimeAxis'
 import { typeChartData } from './ChartSelector'
 
@@ -15,8 +15,6 @@ const TextBlockchainDatachart = ({
     isDescriptionOfHighest,
     timeSeeAxis,
 }: IBlockChainDataChart) => {
-    const theme = useTheme()
-    const isDark = theme.palette.mode === 'dark'
     const getLowestDate = () => {
         if (dataStatistics.lowestDate !== null && dataStatistics.lowestDate !== undefined) {
             let dateString = validateTypeTimeFilter(dataStatistics.lowestDate)
@@ -85,43 +83,115 @@ const TextBlockchainDatachart = ({
             {isDescriptionOfHighest ? (
                 <>
                     {typeStatistic === typeChartData.DAILY_TRANSACTIONS && (
-                        <Text backgroundColor={isDark ? '#0f172a' : '#F5F6FA'}>
+                        <Typography
+                            variant="body1"
+                            component="p"
+                            sx={{
+                                my: 2,
+                                mx: 1,
+                                border: 1,
+                                borderColor: 'primary.light',
+                                borderRadius: 1,
+                                backgroundColor: 'card.background',
+                                p: 2,
+                            }}
+                        >
                             Highest number of {dataStatistics.highestValue} transactions on <br />
                             {`${getHighestDate()}`}
-                        </Text>
+                        </Typography>
                     )}
                     {typeStatistic === typeChartData.UNIQUE_ADRESSES && (
-                        <Text backgroundColor={isDark ? '#0f172a' : '#F5F6FA'}>
+                        <Typography
+                            variant="body1"
+                            component="p"
+                            sx={{
+                                my: 2,
+                                mx: 1,
+                                border: 1,
+                                borderColor: 'primary.light',
+                                borderRadius: 1,
+                                backgroundColor: 'card.background',
+                                p: 2,
+                            }}
+                        >
                             Highest increase of {dataStatistics.highestValue} new addresses was
                             recorded on <br /> {`${getHighestDate()}`}
-                        </Text>
+                        </Typography>
                     )}
                     {typeStatistic === typeChartData.ACTIVE_ADDRESSES && (
-                        <Text backgroundColor={isDark ? '#0f172a' : '#F5F6FA'}>
+                        <Typography
+                            variant="body1"
+                            component="p"
+                            sx={{
+                                my: 2,
+                                mx: 1,
+                                border: 1,
+                                borderColor: 'primary.light',
+                                borderRadius: 1,
+                                backgroundColor: 'card.background',
+                                p: 2,
+                            }}
+                        >
                             Highest number of {dataStatistics.highestValue} addresses on <br />
                             {`${getHighestDate()}`}
-                        </Text>
+                        </Typography>
                     )}
                 </>
             ) : (
                 <>
                     {typeStatistic === typeChartData.DAILY_TRANSACTIONS && (
-                        <Text backgroundColor={isDark ? '#0f172a' : '#F5F6FA'}>
+                        <Typography
+                            variant="body1"
+                            component="p"
+                            sx={{
+                                my: 2,
+                                mx: 1,
+                                border: 1,
+                                borderColor: 'primary.light',
+                                borderRadius: 1,
+                                backgroundColor: 'card.background',
+                                p: 2,
+                            }}
+                        >
                             Lowest number of {dataStatistics.lowestValue} transactions on <br />
                             {`${getLowestDate()}`}
-                        </Text>
+                        </Typography>
                     )}
                     {typeStatistic === typeChartData.UNIQUE_ADRESSES && (
-                        <Text backgroundColor={isDark ? '#0f172a' : '#F5F6FA'}>
+                        <Typography
+                            variant="body1"
+                            component="p"
+                            sx={{
+                                my: 2,
+                                mx: 1,
+                                border: 1,
+                                borderColor: 'primary.light',
+                                borderRadius: 1,
+                                backgroundColor: 'card.background',
+                                p: 2,
+                            }}
+                        >
                             Lowest increase of {dataStatistics.lowestValue} new addresses was
                             recorded on <br /> {`${getLowestDate()}`}
-                        </Text>
+                        </Typography>
                     )}
                     {typeStatistic === typeChartData.ACTIVE_ADDRESSES && (
-                        <Text backgroundColor={isDark ? '#0f172a' : '#F5F6FA'}>
+                        <Typography
+                            variant="body1"
+                            component="p"
+                            sx={{
+                                my: 2,
+                                mx: 1,
+                                border: 1,
+                                borderColor: 'primary.light',
+                                borderRadius: 1,
+                                backgroundColor: 'card.background',
+                                p: 2,
+                            }}
+                        >
                             Lowest number of {dataStatistics.lowestValue} addresses on <br />
                             {`${getLowestDate()}`}
-                        </Text>
+                        </Typography>
                     )}
                 </>
             )}