diff --git a/src/containers/Audiencias/index.js b/src/containers/Audiencias/index.js
index 77ffb819..3d7afa46 100644
--- a/src/containers/Audiencias/index.js
+++ b/src/containers/Audiencias/index.js
@@ -54,6 +54,7 @@ import { useStyles } from './style';
 import customTheme from '../../styles/theme';
 
 import * as TEXTCONSTANTS from '../../settings/texts/AudienciasPage';
+import CaroulselCards from '../../components/CarouselCards';
 
 const defaultSelectedPeriodType = APPLICATION_OPTIONS.DEFAULT_SELECTED_PERIOD_TYPE; // Get all months of the year
 const defaultMonthPeriod = APPLICATION_OPTIONS.DEFAULT_MONTH_PERIOD; // All months
@@ -72,8 +73,10 @@ function Audiencias(props) {
   };
 
   const classes = useStyles();
+  const { totalFrame, totalFrameDesktop } = useStyles();
   // Charts and report Data
   const [audienciasTotalsData, setAudienciasTotalsData] = useState('');
+  const [audienciasData, setAudienciasData] = useState([]);
   const [newUsersChartData, setNewUsersChartData] = useState([]);
   const [totalUsersChartData, setTotalUsersChartData] = useState([]);
   const [roomsRankingData, setRoomsRankingData] = useState(
@@ -348,6 +351,45 @@ function Audiencias(props) {
     }
   }
 
+  async function updateAudiencesData() {
+    await setAudienciasData(
+      [
+        {
+          isLoaded: totalsAreLoaded,
+          info: audienciasTotalsData.users_total,
+          title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals.title,
+          toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals.toolTip,
+          toolTipAriaLabel: TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals.toolTipAriaLabel,
+          toolTipColor: customTheme.palette.audiencias.seabuckthorn,
+        },
+        {
+          isLoaded: totalsAreLoaded,
+          info: audienciasTotalsData.audiencias_total,
+          title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals.title,
+          toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals.toolTip,
+          toolTipAriaLabel: TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals.toolTipAriaLabel,
+          toolTipColor: customTheme.palette.audiencias.seabuckthorn,
+          subInformation: `${audienciasTotalsData.audiencias_total_finished} realizadas`,
+        },
+        {
+          isLoaded: totalsAreLoaded,
+          info: audienciasTotalsData.messages_total,
+          title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals.title,
+          toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals.toolTip,
+          toolTipAriaLabel: TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals.toolTipAriaLabel,
+          toolTipColor: customTheme.palette.audiencias.seabuckthorn,
+        },
+        {
+          isLoaded: totalsAreLoaded,
+          info: audienciasTotalsData.questions_total,
+          title: TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.title,
+          toolTipText: TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.toolTip,
+          toolTipAriaLabel: TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.toolTipAriaLabel,
+        },
+      ],
+    );
+  }
+
   async function updateTotalsData() {
     try {
       const dataJson = {
@@ -542,6 +584,10 @@ function Audiencias(props) {
     updateAllPageInformations(selectedPeriod, selectedMonth, selectedYear);
   }, [apisDataObject]);
 
+  useEffect(() => {
+    updateAudiencesData();
+  }, [audienciasTotalsData, totalsAreLoaded]);
+
   useEffect(() => {
     checkIfCachedDataIsUpdated();
   }, []);
@@ -571,84 +617,28 @@ function Audiencias(props) {
           />
         </Grid>
 
-        <Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
-          <TotalFrame
-            className={classes.totalFrame}
-            isLoaded={totalsAreLoaded}
-            info={`${audienciasTotalsData.users_total}`}
-            title={
-              TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals
-                .title
-            }
-            toolTipText={
-              TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals
-                .toolTip
-            }
-            toolTipAriaLabel={
-              TEXTCONSTANTS.audiencesTotalsTexts.subSectionParticipantsTotals
-                .toolTipAriaLabel
-            }
-            toolTipColor={customTheme.palette.audiencias.seabuckthorn}
-          />
-        </Grid>
-
-        <Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
-          <TotalFrame
-            className={classes.totalFrame}
-            isLoaded={totalsAreLoaded}
-            info={`${audienciasTotalsData.audiencias_total}`}
-            title={
-              TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals.title
-            }
-            toolTipText={
-              TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals
-                .toolTip
-            }
-            toolTipAriaLabel={
-              TEXTCONSTANTS.audiencesTotalsTexts.subSectionAudiencesTotals
-                .toolTipAriaLabel
-            }
-            toolTipColor={customTheme.palette.audiencias.seabuckthorn}
-            subInformation={`${audienciasTotalsData.audiencias_total_finished} realizadas`}
-          />
-        </Grid>
-
-        <Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
-          <TotalFrame
-            isLoaded={totalsAreLoaded}
-            info={`${audienciasTotalsData.messages_total}`}
-            title={
-              TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals.title
-            }
-            toolTipText={
-              TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals
-                .toolTip
-            }
-            toolTipAriaLabel={
-              TEXTCONSTANTS.audiencesTotalsTexts.subSectionMessagesTotals
-                .toolTipAriaLabel
-            }
-            toolTipColor={customTheme.palette.audiencias.seabuckthorn}
-          />
-        </Grid>
-
-        <Grid item xs={12} sm={6} md={3} className={classes.spacing} style={{ padding: 0 }}>
-          <TotalFrame
-            className={classes.totalFrameDesktop}
-            isLoaded={totalsAreLoaded}
-            info={audienciasTotalsData.questions_total}
-            title={
-              TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals.title
-            }
-            toolTipText={
-              TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals
-                .toolTip
-            }
-            toolTipAriaLabel={
-              TEXTCONSTANTS.audiencesTotalsTexts.subSectionQuestionsTotals
-                .toolTipAriaLabel
-            }
-          />
+        {
+          audienciasData.map((audiencia, index) => (
+            <Grid key={audiencia.title} item md={3} className={`${classes.spacing} ${classes.desktop}`} style={{ padding: 0 }}>
+              <TotalFrame
+                // className={`${index + 1 === audienciasData.length && classes.totalFrameDesktop}`}
+                isLoaded={audiencia.isLoaded}
+                info={audiencia.info}
+                title={audiencia.title}
+                toolTipText={audiencia.toolTipText}
+                toolTipAriaLabel={audiencia.toolTipAriaLabel}
+                toolTipColor={audiencia.toolTipColor}
+                subInformation={audiencia.subInformation}
+              />
+            </Grid>
+          ))
+        }
+        <Grid className={classes.mobile} item xs={12}>
+          <Box className={classes.caroulselBox}>
+            <Box className={classes.caroulselInsideBox}>
+              <CaroulselCards carouselItens={audienciasData} classes={classes} />
+            </Box>
+          </Box>
         </Grid>
 
         <Grid item xs={12} className={classes.spacing} style={{ padding: 0 }}>
diff --git a/src/containers/Audiencias/style.js b/src/containers/Audiencias/style.js
index e19d6d98..0190c600 100644
--- a/src/containers/Audiencias/style.js
+++ b/src/containers/Audiencias/style.js
@@ -57,19 +57,40 @@ export const useStyles = makeStyles((theme) => ({
       paddingTop: '48px',
     },
   },
-  totalFrame: {
-    padding: '0px 16px 0px 0px',
+  totalFrameDesktop: {
+    [theme.breakpoints.up('md')]: {
+      padding: '0px 0px',
+    },
+  },
+  desktop: {
+    display: 'none',
 
-    [theme.breakpoints.up('sm')]: {
-      padding: '0px 35px 0px 0px',
+    '@media (min-width: 1025px)': {
+      display: 'block',
     },
-    [theme.breakpoints.up('md')]: {
-      padding: '0px 20px 0px 0px',
+  },
+  mobile: {
+    display: 'block',
+
+    '@media (min-width: 1025px)': {
+      display: 'none',
     },
   },
-  totalFrameDesktop: {
-    [theme.breakpoints.up('md')]: {
-      padding: '0px 0px',
+  caroulselBox: {
+    width: '100%',
+    minHeight: '100%',
+    display: 'flex',
+    padding: '2px 0px 16px 0px',
+
+    [theme.breakpoints.up('sm')]: {
+      padding: '0px 0px 19px 0px',
+    },
+    [theme.breakpoints.down('md')]: {
+      alignItems: 'center',
+      justifyContent: 'center',
     },
   },
+  caroulselInsideBox: {
+    width: '100%',
+  },
 }));