diff --git a/src/app/configs/themesConfig.ts b/src/app/configs/themesConfig.ts
index 58efa41..b3685ac 100644
--- a/src/app/configs/themesConfig.ts
+++ b/src/app/configs/themesConfig.ts
@@ -41,7 +41,7 @@ export const themesConfig: FuseThemesType = {
 			},
 			secondary: {
 				light: '#818cf8',
-				main: '#3cb1fe',
+				main: '#356f93',
 				dark: '#3730a3',
 				contrastText: darkPaletteText.primary
 			},
diff --git a/src/app/main/invoice/generateInvoice/GenerateInvoiceRender.tsx b/src/app/main/invoice/generateInvoice/GenerateInvoiceRender.tsx
index 69b60e0..396056b 100644
--- a/src/app/main/invoice/generateInvoice/GenerateInvoiceRender.tsx
+++ b/src/app/main/invoice/generateInvoice/GenerateInvoiceRender.tsx
@@ -10,8 +10,12 @@ import {
   TextField,
   styled,
   Button,
+  Grid,
+  Box,
 } from "@mui/material";
 import { Controller, useFormContext } from "react-hook-form";
+import DataInvoice from "./components/dataInvoice/DataInvoice";
+import DataClient from "./components/dataClient/DataClient";
 
 const Root = styled(FusePageSimple)(({ theme }) => ({
   "& .FusePageSimple-header": {
@@ -28,58 +32,66 @@ const GenerateInvoiceRender = () => {
         className="text-16 font-bold "
       />
       <Divider />
+      <DataInvoice />
+      <DataClient />
       <CardContent>
-        <TextField
-          className="mt-8 mb-16"
-          required
-          label="Name"
-          autoFocus
-          id="name"
-          variant="outlined"
-          fullWidth
-          /* error={!!errors.name}
+        <Grid container spacing={2}>
+          <Grid item xs={12} md={6}>
+            <TextField
+              className="mt-8 mb-16"
+              required
+              label="Name"
+              autoFocus
+              id="name"
+              variant="outlined"
+              fullWidth
+              /* error={!!errors.name}
 						helperText={errors?.name?.message as string} */
-        />
-
-        <TextField
-          className="mt-8 mb-16"
-          id="description"
-          label="Description"
-          type="text"
-          multiline
-          rows={5}
-          variant="outlined"
-          fullWidth
-        />
-
-        <Autocomplete
-          className="mt-8 mb-16"
-          multiple
-          freeSolo
-          options={[]}
-          /* value={value }
+            />
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <TextField
+              className="mt-8 mb-16"
+              id="description"
+              label="Description"
+              type="text"
+              multiline
+              rows={5}
+              variant="outlined"
+              fullWidth
+            />
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <Autocomplete
+              className="mt-8 mb-16"
+              multiple
+              freeSolo
+              options={[]}
+              /* value={value }
 						onChange={(event, newValue) => {
 							onChange(newValue);
 						}} */
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              placeholder="Select multiple categories"
-              label="Categories"
-              variant="outlined"
-              InputLabelProps={{
-                shrink: true,
-              }}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  placeholder="Select multiple categories"
+                  label="Categories"
+                  variant="outlined"
+                  InputLabelProps={{
+                    shrink: true,
+                  }}
+                />
+              )}
             />
-          )}
-        />
+          </Grid>
+        </Grid>
       </CardContent>
       <CardActions>
         <Button
           className="w-320 "
           variant="contained"
           size="small"
-          color="secondary"
+          color="primary"
         >
           Guardar{" "}
         </Button>
diff --git a/src/app/main/invoice/generateInvoice/components/dataClient/DataClient.tsx b/src/app/main/invoice/generateInvoice/components/dataClient/DataClient.tsx
new file mode 100644
index 0000000..d38c5b5
--- /dev/null
+++ b/src/app/main/invoice/generateInvoice/components/dataClient/DataClient.tsx
@@ -0,0 +1,69 @@
+import {
+  Autocomplete,
+  Box,
+  Divider,
+  Grid,
+  TextField,
+  Typography,
+} from "@mui/material";
+
+const DataClient = () => {
+  return (
+    <Box className="mt-10  p-20 shadow-2 rounded-8">
+      <Typography component="h3" className="mb-7">
+        Datos cliente
+      </Typography>
+      <Divider className="border-1 mb-10" />
+      <Grid container spacing={2}>
+        <Grid item xs={12} md={12}>
+          <Autocomplete
+            className="mt-8 mb-16"
+            multiple
+            freeSolo
+            options={[]}
+            /* value={value }
+						onChange={(event, newValue) => {
+							onChange(newValue);
+						}} */
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                placeholder="Busque el cliente"
+                label="Cliente"
+                variant="outlined"
+                InputLabelProps={{
+                  shrink: true,
+                }}
+              />
+            )}
+          />
+        </Grid>
+        <Grid item md={12} >
+
+        <Divider/>
+        </Grid>
+        <Grid item md={4} xs={12}>
+          <b>Razón Social:</b> Jonathan Andres Alvarez Flores
+        </Grid>
+        <Grid item md={4} xs={12}>
+          <b>Nombre Comercial:</b> Jonathan Andres Alvarez Flores
+        </Grid>
+        <Grid item md={4} xs={12}>
+          <b>Ruc:</b> 17215785512001
+        </Grid>
+
+        <Grid item md={4} xs={12}>
+          <b>Dirección:</b> Calle Oe11g y s32
+        </Grid>
+        <Grid item md={4} xs={12}>
+          <b>Teléfono:</b> 0988545211
+        </Grid>
+        <Grid item md={4} xs={12}>
+          <b>Correo:</b> admin@qsoftec.com
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default DataClient;
diff --git a/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoice.tsx b/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoice.tsx
new file mode 100644
index 0000000..73d72b4
--- /dev/null
+++ b/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoice.tsx
@@ -0,0 +1,35 @@
+import { Box, Grid, Typography, Divider } from "@mui/material";
+
+const DataInvoice = () => {
+  return (
+    <Box className="mt-10  p-20 shadow-2 rounded-8">
+      <Typography component="h3" className="mb-7">
+        Datos emisor
+      </Typography>
+      <Divider className="border-1 mb-10" />
+      <Grid container spacing={2}>
+        <Grid item md={6} xs={12}>
+          <b>Razón Social:</b> Jonathan Andres Alvarez Flores
+        </Grid>
+        <Grid item md={6} xs={12}>
+          <b>Nombre Comercial:</b> Jonathan Andres Alvarez Flores
+        </Grid>
+        <Grid item md={6} xs={12}>
+          <b>Ruc:</b> 17215785512001
+        </Grid>
+
+        <Grid item md={6} xs={12}>
+          <b>Dirección:</b> Calle Oe11g y s32
+        </Grid>
+        <Grid item md={6} xs={12}>
+          <b>Contribuyente Especial:</b> NO
+        </Grid>
+        <Grid item md={6} xs={12}>
+          <b>Obligado Contabilidad:</b> NO
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default DataInvoice;
diff --git a/src/app/main/invoice/listInvoice/ListInvoiceRender.tsx b/src/app/main/invoice/listInvoice/ListInvoiceRender.tsx
index abce6b9..3f5114d 100644
--- a/src/app/main/invoice/listInvoice/ListInvoiceRender.tsx
+++ b/src/app/main/invoice/listInvoice/ListInvoiceRender.tsx
@@ -132,7 +132,7 @@ const ListInvoiceRender = () => {
               <Button
                 size="small"
                 variant="contained"
-                color="secondary"
+                color="primary"
                 component={Link}
                 to={'/invoice/edit'}
                 startIcon={