diff --git a/src/app/[lang]/liveness/form.tsx b/src/app/[lang]/liveness/form.tsx
index 2663050b..2def8b5a 100644
--- a/src/app/[lang]/liveness/form.tsx
+++ b/src/app/[lang]/liveness/form.tsx
@@ -26,6 +26,8 @@ import { createTermsSchema } from '@/common/validation-schemas';
 import { LivenessModal } from '@/components/LivenessModal';
 import { useLanguage } from '../provider';
 
+import styles from './styles.module.css';
+
 type TermsForm = z.infer<ReturnType<typeof createTermsSchema>>;
 import theme from '@/components/themes/theme';
 
@@ -52,16 +54,7 @@ export function Form({ cedula }: Props) {
     <form onSubmit={onSubmit}>
       <GridContainer>
         <GridItem lg={12} md={12}>
-          <div
-            style={{
-              background: '#EFF7FF',
-              borderRadius: '6px',
-              padding: '30px 20px',
-              display: 'flex',
-              alignItems: 'center',
-              flexDirection: 'row',
-            }}
-          >
+          <div className={styles.liveness_conditions}>
             <CameraAltOutlinedIcon
               sx={{
                 fontSize: '45px',
@@ -85,16 +78,7 @@ export function Form({ cedula }: Props) {
         </GridItem>
 
         <GridItem lg={12} md={12}>
-          <div
-            style={{
-              background: '#EFF7FF',
-              borderRadius: '6px',
-              padding: '30px 20px',
-              display: 'flex',
-              alignItems: 'center',
-              flexDirection: 'row',
-            }}
-          >
+          <div className={styles.liveness_conditions}>
             <SentimentSatisfiedOutlinedIcon
               sx={{
                 fontSize: '45px',
diff --git a/src/app/[lang]/liveness/styles.module.css b/src/app/[lang]/liveness/styles.module.css
new file mode 100644
index 00000000..88c66515
--- /dev/null
+++ b/src/app/[lang]/liveness/styles.module.css
@@ -0,0 +1,8 @@
+.liveness_conditions {
+  background: #eff7ff;
+  border-radius: 6px;
+  padding: 30px 20px;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
diff --git a/src/components/LivenessModal/index.tsx b/src/components/LivenessModal/index.tsx
index 53a8ef25..980b0482 100644
--- a/src/components/LivenessModal/index.tsx
+++ b/src/components/LivenessModal/index.tsx
@@ -58,14 +58,7 @@ export function LivenessModal({ cedula, setOpen }: Props) {
           </div>
         </AppBar>
         <div style={{ paddingTop: '100px' }}>
-          <div
-            style={{
-              width: '100%',
-              maxWidth: '800px',
-              margin: 'auto',
-              padding: '0 10px',
-            }}
-          >
+          <div className={styles.liveness_container}>
             <LivenessQuickStart cedula={cedula} />
           </div>
         </div>
diff --git a/src/components/LivenessModal/styles.module.css b/src/components/LivenessModal/styles.module.css
index 00494d41..20f87e65 100644
--- a/src/components/LivenessModal/styles.module.css
+++ b/src/components/LivenessModal/styles.module.css
@@ -10,6 +10,13 @@
   position: absolute;
 }
 
+.liveness_container {
+  width: 100%;
+  max-width: 800px;
+  margin: auto;
+  padding: 0 10px;
+}
+
 @media only screen and (max-width: 1200px) {
   .layer_logo {
     display: none;
diff --git a/src/components/LivenessQuickStart/index.tsx b/src/components/LivenessQuickStart/index.tsx
index 82fb3c66..64cadf29 100644
--- a/src/components/LivenessQuickStart/index.tsx
+++ b/src/components/LivenessQuickStart/index.tsx
@@ -14,6 +14,8 @@ import { useLocalizedText } from './localizedText';
 import { unwrap } from '@/common/helpers';
 import awsExports from '@/aws-exports';
 
+import styles from './styles.module.css';
+
 Amplify.configure(awsExports);
 
 type Props = { cedula: string };
@@ -91,15 +93,7 @@ export function LivenessQuickStart({ cedula }: Props) {
   return (
     <ThemeProvider>
       {loading ? (
-        <div
-          style={{
-            width: '100%',
-            height: '55vh',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
+        <div className={styles.liveness_container}>
           <CircularProgress sx={{ color: 'white' }} />
         </div>
       ) : sessionId ? (
diff --git a/src/components/LivenessQuickStart/styles.module.css b/src/components/LivenessQuickStart/styles.module.css
new file mode 100644
index 00000000..90019603
--- /dev/null
+++ b/src/components/LivenessQuickStart/styles.module.css
@@ -0,0 +1,7 @@
+.liveness_container {
+  width: 100%;
+  height: 55vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/components/elements/boxContentCenter/index.tsx b/src/components/elements/boxContentCenter/index.tsx
index e2d31588..cb114dc9 100644
--- a/src/components/elements/boxContentCenter/index.tsx
+++ b/src/components/elements/boxContentCenter/index.tsx
@@ -1,19 +1,11 @@
 import Box from '@mui/material/Box';
 
+import styles from './styles.module.css';
+
 export default function BoxContentCenter({ children }: any) {
   return (
-    <Box
-      sx={{
-        width: '100%',
-        minHeight: `calc(100vh - 630px)`,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <Box sx={{ width: '100%', maxWidth: '560px', padding: '0 10px' }}>
-        {children}
-      </Box>
+    <Box className={styles.box_container}>
+      <Box className={styles.box_content}>{children}</Box>
     </Box>
   );
 }
diff --git a/src/components/elements/boxContentCenter/styles.module.css b/src/components/elements/boxContentCenter/styles.module.css
new file mode 100644
index 00000000..3eb67f28
--- /dev/null
+++ b/src/components/elements/boxContentCenter/styles.module.css
@@ -0,0 +1,13 @@
+.box_container {
+  width: 100%;
+  min-height: calc(100vh - 630px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.box_content {
+  width: 100%;
+  max-width: 560px;
+  padding: 0 10px;
+}
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index 3ef0eacd..3e58f728 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -17,6 +17,8 @@ import { useLanguage } from '@/app/[lang]/provider';
 import DivGrow from '../elements/divGrow';
 import theme from '../themes/theme';
 
+import styles from './styles.module.css';
+
 export default function Index() {
   const { intl } = useLanguage();
 
@@ -25,14 +27,7 @@ export default function Index() {
       <div
         style={{ background: theme.palette.primary.main, padding: '75px 25px' }}
       >
-        <div
-          style={{
-            width: '100%',
-            maxWidth: '1400px',
-            margin: 'auto',
-            padding: '0px 24px',
-          }}
-        >
+        <div className={styles.footer_container}>
           <GridContainer spacing={4}>
             <GridItem md={12} lg={2}>
               <Image src={logoGOB.src} alt="logo" width="198" height="80" />
@@ -108,14 +103,7 @@ export default function Index() {
       </div>
 
       <div style={{ background: 'white', padding: '12.5px 25px' }}>
-        <div
-          style={{
-            width: '100%',
-            maxWidth: '1400px',
-            margin: 'auto',
-            padding: '0px 24px',
-          }}
-        >
+        <div className={styles.footer_container}>
           <GridContainer>
             <GridItem md={6} lg={6}>
               <div style={{ marginTop: '8px' }}>
diff --git a/src/components/layout/styles.module.css b/src/components/layout/styles.module.css
index e89b1206..bc728ef0 100644
--- a/src/components/layout/styles.module.css
+++ b/src/components/layout/styles.module.css
@@ -1,3 +1,10 @@
+.footer_container {
+  width: 100%;
+  max-width: 1400px;
+  margin: auto;
+  padding: 0px 24px;
+}
+
 .logo {
   flex-grow: 1;
   padding-top: '8px';