diff --git a/src/@fuse/default-settings/FuseDefaultSettings.ts b/src/@fuse/default-settings/FuseDefaultSettings.ts
index 56396bd..1975441 100644
--- a/src/@fuse/default-settings/FuseDefaultSettings.ts
+++ b/src/@fuse/default-settings/FuseDefaultSettings.ts
@@ -171,7 +171,8 @@ export const defaultThemeOptions = {
 		MuiDialog: {
 			styleOverrides: {
 				paper: {
-					borderRadius: 16
+					borderRadius: 10,
+					padding: 5
 				}
 			}
 		},
diff --git a/src/app/main/invoice/generateInvoice/GenerateInvoice.tsx b/src/app/main/invoice/generateInvoice/GenerateInvoice.tsx
index 4bdfacf..b357dc1 100644
--- a/src/app/main/invoice/generateInvoice/GenerateInvoice.tsx
+++ b/src/app/main/invoice/generateInvoice/GenerateInvoice.tsx
@@ -1,10 +1,7 @@
-import React from 'react'
-import GenerateInvoiceRender from './GenerateInvoiceRender'
+import GenerateInvoiceRender from './GenerateInvoiceRender';
 
-const GenerateInvoice = () => {
-  return (
-    <GenerateInvoiceRender/>
-  )
+function GenerateInvoice() {
+	return <GenerateInvoiceRender />;
 }
 
-export default GenerateInvoice
\ No newline at end of file
+export default GenerateInvoice;
diff --git a/src/app/main/invoice/generateInvoice/GenerateInvoiceRender.tsx b/src/app/main/invoice/generateInvoice/GenerateInvoiceRender.tsx
index 396056b..23f8b72 100644
--- a/src/app/main/invoice/generateInvoice/GenerateInvoiceRender.tsx
+++ b/src/app/main/invoice/generateInvoice/GenerateInvoiceRender.tsx
@@ -1,103 +1,33 @@
-import FusePageCarded from "@fuse/core/FusePageCarded";
-import FusePageSimple from "@fuse/core/FusePageSimple";
-import {
-  Autocomplete,
-  Card,
-  CardActions,
-  CardContent,
-  CardHeader,
-  Divider,
-  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";
+import { Card, CardActions, CardContent, CardHeader, Divider, Button } from '@mui/material';
+import DataInvoice from './components/dataInvoice/DataInvoice';
+import DataClient from './components/dataClient/DataClient';
+import DataTransmitter from './components/dataTransmitter/DataTransmitter';
 
-const Root = styled(FusePageSimple)(({ theme }) => ({
-  "& .FusePageSimple-header": {
-    backgroundColor: theme.palette.background.paper,
-    boxShadow: `inset 0 0 0 1px  ${theme.palette.divider}`,
-  },
-}));
-
-const GenerateInvoiceRender = () => {
-  return (
-    <Card className=" m-20 p-24">
-      <CardHeader
-        title="Crear Factura de venta"
-        className="text-16 font-bold "
-      />
-      <Divider />
-      <DataInvoice />
-      <DataClient />
-      <CardContent>
-        <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} */
-            />
-          </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,
-                  }}
-                />
-              )}
-            />
-          </Grid>
-        </Grid>
-      </CardContent>
-      <CardActions>
-        <Button
-          className="w-320 "
-          variant="contained"
-          size="small"
-          color="primary"
-        >
-          Guardar{" "}
-        </Button>
-      </CardActions>
-    </Card>
-  );
-};
+function GenerateInvoiceRender() {
+	return (
+		<Card className=" m-20 p-12">
+			<CardHeader
+				title="Crear Factura de venta"
+				className="text-16 font-bold "
+			/>
+			<Divider />
+			<CardContent>
+				<DataTransmitter />
+				<DataClient />
+				<DataInvoice />
+			</CardContent>
+			<CardActions>
+				<Button
+					className="w-320 "
+					variant="contained"
+					size="small"
+					color="primary"
+				>
+					Guardar{' '}
+				</Button>
+			</CardActions>
+		</Card>
+	);
+}
 
 export default GenerateInvoiceRender;
diff --git a/src/app/main/invoice/generateInvoice/components/dataClient/DataClient.tsx b/src/app/main/invoice/generateInvoice/components/dataClient/DataClient.tsx
index d38c5b5..91ee81b 100644
--- a/src/app/main/invoice/generateInvoice/components/dataClient/DataClient.tsx
+++ b/src/app/main/invoice/generateInvoice/components/dataClient/DataClient.tsx
@@ -1,69 +1,30 @@
-import {
-  Autocomplete,
-  Box,
-  Divider,
-  Grid,
-  TextField,
-  Typography,
-} from "@mui/material";
+import { useState } from 'react';
+import DataClientRender from './DataClientRender';
+import { Client } from './DataClientInterfaz';
 
-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} >
+const clientes = [
+	{
+		id: 1,
+		nombreComercial: 'Andres Alvarez',
+		razonSocial: 'Andres Alvarez',
+		identificacion: '1721529707',
+		direccion: 'Calle oe',
+		telefono: '0988545102',
+		correo: 'andres@test.com'
+	}
+];
+function DataClient() {
+	const [clients, setClients] = useState<Client[]>(clientes);
 
-        <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>
-  );
-};
+	const handleSelectClient = (value) => {
+		setClients([...clients, value]);
+	};
+	return (
+		<DataClientRender
+			client={clients}
+			handleSelectClient={handleSelectClient}
+		/>
+	);
+}
 
 export default DataClient;
diff --git a/src/app/main/invoice/generateInvoice/components/dataClient/DataClientInterfaz.ts b/src/app/main/invoice/generateInvoice/components/dataClient/DataClientInterfaz.ts
new file mode 100644
index 0000000..903e2c5
--- /dev/null
+++ b/src/app/main/invoice/generateInvoice/components/dataClient/DataClientInterfaz.ts
@@ -0,0 +1,9 @@
+export interface Client {
+	id: number;
+	nombreComercial: string;
+	razonSocial: string;
+	identificacion: string;
+	direccion: string;
+	telefono: string;
+	correo: string;
+}
diff --git a/src/app/main/invoice/generateInvoice/components/dataClient/DataClientRender.tsx b/src/app/main/invoice/generateInvoice/components/dataClient/DataClientRender.tsx
new file mode 100644
index 0000000..ad18734
--- /dev/null
+++ b/src/app/main/invoice/generateInvoice/components/dataClient/DataClientRender.tsx
@@ -0,0 +1,148 @@
+import { useState } from 'react';
+import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
+import { Autocomplete, Box, Divider, Grid, TextField, Typography, Button } from '@mui/material';
+import AddClient from './components/addClient/AddClient';
+import { Client } from './DataClientInterfaz';
+
+interface Props {
+	client: Client[];
+	handleSelectClient: (value: Client) => void;
+}
+function DataClientRender({ client, handleSelectClient }: Props) {
+	const [openDialog, setOpenDialog] = useState<boolean>(false);
+	return (
+		<Box className="mt-10  p-20 shadow-2 rounded-8">
+			<AddClient
+				open={openDialog}
+				setOpen={setOpenDialog}
+			/>
+			<Grid
+				container
+				spacing={2}
+			>
+				<Grid
+					item
+					xs={12}
+					md={10}
+				>
+					<Typography
+						component="h3"
+						className="mb-7 text-16"
+					>
+						Datos cliente
+					</Typography>
+				</Grid>
+				<Grid
+					item
+					xs={12}
+					md={2}
+					className="flex justify-end"
+				>
+					<Button
+						color="primary"
+						variant="outlined"
+						className="rounded-6"
+						size="small"
+						onClick={() => setOpenDialog(true)}
+						startIcon={
+							<FuseSvgIcon
+								className="text-48"
+								size={24}
+								color="action"
+							>
+								heroicons-outline:plus
+							</FuseSvgIcon>
+						}
+					>
+						Agregar{' '}
+					</Button>
+				</Grid>
+				<Grid
+					item
+					xs={12}
+				>
+					<Divider className="border-1 mb-10" />
+				</Grid>
+				<Grid
+					item
+					xs={12}
+					md={12}
+				>
+					<Autocomplete
+						className="mt-8 mb-16"
+						options={client}
+						getOptionLabel={(option) => option.razonSocial}
+						noOptionsText="No se encontro un resultado"
+						size="small"
+						/* 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 DataClientRender;
diff --git a/src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClient.tsx b/src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClient.tsx
new file mode 100644
index 0000000..087b3e3
--- /dev/null
+++ b/src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClient.tsx
@@ -0,0 +1,16 @@
+import AddClientRender from './AddClientRender';
+
+interface Props {
+	open: boolean;
+	setOpen: (open: boolean) => void;
+}
+function AddClient({ open, setOpen }: Props) {
+	return (
+		<AddClientRender
+			open={open}
+			setOpen={setOpen}
+		/>
+	);
+}
+
+export default AddClient;
diff --git a/src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClientRender.tsx b/src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClientRender.tsx
new file mode 100644
index 0000000..1946b2a
--- /dev/null
+++ b/src/app/main/invoice/generateInvoice/components/dataClient/components/addClient/AddClientRender.tsx
@@ -0,0 +1,118 @@
+import { DialogActions, DialogContent, DialogTitle, Button, Grid, TextField, Dialog } from '@mui/material';
+
+interface Props {
+	open: boolean;
+	setOpen: (open: boolean) => void;
+}
+function AddClientRender({ open, setOpen }: Props) {
+	return (
+		<Dialog
+			open={open}
+			scroll="body"
+			fullWidth
+			maxWidth="md"
+		>
+			<DialogTitle id="alert-dialog-title">Agregar Cliente</DialogTitle>
+			<DialogContent dividers>
+				<Grid
+					container
+					spacing={2}
+				>
+					<Grid
+						item
+						md={6}
+						xs={12}
+					>
+						<TextField
+							size="small"
+							label="Nombre Comercial"
+							variant="outlined"
+							fullWidth
+						/>
+					</Grid>
+					<Grid
+						item
+						md={6}
+						xs={12}
+					>
+						<TextField
+							size="small"
+							label="Razón Social"
+							variant="outlined"
+							fullWidth
+						/>
+					</Grid>
+					<Grid
+						item
+						md={6}
+						xs={12}
+					>
+						<TextField
+							size="small"
+							label="Identificación"
+							variant="outlined"
+							fullWidth
+						/>
+					</Grid>
+					<Grid
+						item
+						md={6}
+						xs={12}
+					>
+						<TextField
+							size="small"
+							label="Dirección"
+							variant="outlined"
+							fullWidth
+						/>
+					</Grid>
+					<Grid
+						item
+						md={6}
+						xs={12}
+					>
+						<TextField
+							size="small"
+							label="Teléfono"
+							variant="outlined"
+							fullWidth
+						/>
+					</Grid>
+					<Grid
+						item
+						md={6}
+						xs={12}
+					>
+						<TextField
+							size="small"
+							label="Correo electrónico"
+							variant="outlined"
+							fullWidth
+						/>
+					</Grid>
+				</Grid>
+			</DialogContent>
+			<DialogActions className="pr-24">
+				<Button
+					onClick={() => setOpen(false)}
+					color="primary"
+					variant="contained"
+					size="small"
+				>
+					Cancelar
+				</Button>
+				<Button
+					onClick={() => setOpen(false)}
+					color="primary"
+					autoFocus
+					variant="contained"
+					size="small"
+				>
+					Aceptar
+				</Button>
+			</DialogActions>
+		</Dialog>
+	);
+}
+
+export default AddClientRender;
diff --git a/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoice.tsx b/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoice.tsx
index 73d72b4..443f563 100644
--- a/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoice.tsx
+++ b/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoice.tsx
@@ -1,35 +1,28 @@
-import { Box, Grid, Typography, Divider } from "@mui/material";
+import { useState } from 'react';
+import DataInvoiceRender from './DataInvoiceRender';
+import { ItemInvoice } from './DataInvoiceInterface';
 
-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>
+function DataInvoice() {
+	const [items, setItems] = useState<Array<ItemInvoice>>();
 
-        <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>
-  );
-};
+	const handleAddItem = () => {
+		const newItems: ItemInvoice = {
+			cod: '',
+			description: '',
+			amount: 0,
+			iva: true,
+			unitValue: 1,
+			total: 0
+		};
+		setItems([...items, newItems]);
+	};
+
+	return (
+		<DataInvoiceRender
+			handleAddItem={handleAddItem}
+			items={items}
+		/>
+	);
+}
 
 export default DataInvoice;
diff --git a/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoiceInterface.ts b/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoiceInterface.ts
new file mode 100644
index 0000000..f0eeadf
--- /dev/null
+++ b/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoiceInterface.ts
@@ -0,0 +1,14 @@
+export interface Headers {
+	id: number;
+	name: string;
+	style?: string | number;
+}
+
+export interface ItemInvoice {
+	cod: string;
+	description: string;
+	amount: number;
+	unitValue: number;
+	iva: boolean;
+	total: number;
+}
diff --git a/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoiceRender.tsx b/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoiceRender.tsx
new file mode 100644
index 0000000..a69ffcf
--- /dev/null
+++ b/src/app/main/invoice/generateInvoice/components/dataInvoice/DataInvoiceRender.tsx
@@ -0,0 +1,106 @@
+import { Box, Grid, Typography, Divider, Button } from '@mui/material';
+import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
+import TableInvoice from './components/tableInvoice/TableInvoice';
+import { ItemInvoice } from './DataInvoiceInterface';
+
+interface Props {
+	handleAddItem: () => void;
+	items: ItemInvoice[];
+}
+function DataInvoiceRender({ handleAddItem, items }: Props) {
+	return (
+		<Box className="mt-10  p-20 shadow-2 rounded-8">
+			<Grid
+				container
+				spacing={2}
+			>
+				<Grid
+					item
+					xs={12}
+					md={10}
+				>
+					<Typography
+						component="h3"
+						className="mb-7 text-16"
+					>
+						Datos factura
+					</Typography>
+				</Grid>
+				<Grid
+					item
+					xs={12}
+					md={2}
+					className="flex justify-end"
+				>
+					<Button
+						color="primary"
+						variant="outlined"
+						className="rounded-6"
+						size="small"
+						onClick={handleAddItem}
+						startIcon={
+							<FuseSvgIcon
+								className="text-48"
+								size={24}
+								color="action"
+							>
+								heroicons-outline:plus
+							</FuseSvgIcon>
+						}
+					>
+						Agregar{' '}
+					</Button>
+				</Grid>
+				<Grid
+					item
+					xs={12}
+				>
+					<Divider className="border-1" />
+				</Grid>
+			</Grid>
+			<Grid
+				container
+				spacing={2}
+			>
+				<Grid
+					item
+					xs={12}
+				>
+					<TableInvoice />
+				</Grid>
+				<Grid
+					item
+					xs={7}
+					md={9}
+				/>
+				<Grid
+					item
+					xs={2}
+					md={2}
+				>
+					<Typography
+						variant="subtitle2"
+						gutterBottom
+					>
+						Sub Total:
+					</Typography>
+				</Grid>
+				<Grid
+					item
+					xs={3}
+					md={1}
+					className="item"
+				>
+					<Typography
+						variant="subtitle2"
+						gutterBottom
+					>
+						$10
+					</Typography>
+				</Grid>
+			</Grid>
+		</Box>
+	);
+}
+
+export default DataInvoiceRender;
diff --git a/src/app/main/invoice/generateInvoice/components/dataInvoice/components/tableInvoice/TableInvoice.tsx b/src/app/main/invoice/generateInvoice/components/dataInvoice/components/tableInvoice/TableInvoice.tsx
new file mode 100644
index 0000000..c880aed
--- /dev/null
+++ b/src/app/main/invoice/generateInvoice/components/dataInvoice/components/tableInvoice/TableInvoice.tsx
@@ -0,0 +1,17 @@
+import { Headers } from '../../DataInvoiceInterface';
+import TableInvoiceRender from './TableInvoiceRender';
+
+function TableInvoice() {
+	const headers: Array<Headers> = [
+		{ id: 1, name: 'Código', style: 100 },
+		{ id: 2, name: 'Descripción', style: 400 },
+		{ id: 3, name: 'Cantidad', style: 130 },
+		{ id: 4, name: 'Valor unitario', style: 130 },
+		{ id: 5, name: 'Iva', style: 10 },
+		{ id: 6, name: 'Total', style: 130 },
+		{ id: 7, name: 'Acción', style: 10 }
+	];
+	return <TableInvoiceRender headers={headers} />;
+}
+
+export default TableInvoice;
diff --git a/src/app/main/invoice/generateInvoice/components/dataInvoice/components/tableInvoice/TableInvoiceRender.tsx b/src/app/main/invoice/generateInvoice/components/dataInvoice/components/tableInvoice/TableInvoiceRender.tsx
new file mode 100644
index 0000000..68fd7f6
--- /dev/null
+++ b/src/app/main/invoice/generateInvoice/components/dataInvoice/components/tableInvoice/TableInvoiceRender.tsx
@@ -0,0 +1,136 @@
+import {
+	Table,
+	TableCell,
+	TableHead,
+	Typography,
+	TableRow,
+	TableBody,
+	TextField,
+	Autocomplete,
+	Checkbox
+} from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
+import { Headers } from '../../DataInvoiceInterface';
+
+interface Props {
+	headers: Headers[];
+}
+function TableInvoiceRender({ headers }: Props) {
+	return (
+		<div className="table-responsive mt-24">
+			<Table
+				sx={{ minWidth: 650 }}
+				className="simple"
+			>
+				<TableHead>
+					<TableRow>
+						{headers.map((column) => (
+							<TableCell
+								key={column.id}
+								style={column.style ? { width: column.style } : {}}
+							>
+								<Typography
+									color="text.secondary"
+									className="font-semibold text-14 whitespace-nowrap"
+								>
+									{column.name}
+								</Typography>
+							</TableCell>
+						))}
+					</TableRow>
+				</TableHead>
+				<TableBody>
+					<TableRow>
+						<TableCell
+							component="th"
+							scope="row"
+						>
+							<TextField
+								variant="outlined"
+								size="small"
+								fullWidth
+							/>
+						</TableCell>
+						<TableCell
+							component="th"
+							scope="row"
+						>
+							<Autocomplete
+								className=""
+								freeSolo
+								size="small"
+								options={[]}
+								/* value={value }
+            onChange={(event, newValue) => {
+              onChange(newValue);
+            }} */
+								renderInput={(params) => (
+									<TextField
+										{...params}
+										placeholder="Busque el producto"
+										variant="outlined"
+										fullWidth
+										InputLabelProps={{
+											shrink: true
+										}}
+									/>
+								)}
+							/>
+						</TableCell>
+						<TableCell
+							component="th"
+							scope="row"
+						>
+							<TextField
+								variant="outlined"
+								size="small"
+								fullWidth
+								type="number"
+							/>
+						</TableCell>
+						<TableCell
+							component="th"
+							scope="row"
+						>
+							<TextField
+								variant="outlined"
+								size="small"
+								fullWidth
+								type="number"
+							/>
+						</TableCell>
+						<TableCell
+							component="th"
+							scope="row"
+							className="px-0"
+						>
+							<Checkbox />
+						</TableCell>
+						<TableCell
+							component="th"
+							scope="row"
+						>
+							<TextField
+								variant="outlined"
+								size="small"
+								fullWidth
+								type="number"
+							/>
+						</TableCell>
+						<TableCell
+							component="th"
+							scope="row"
+						>
+							<IconButton>
+								<FuseSvgIcon>heroicons-outline:trash</FuseSvgIcon>
+							</IconButton>
+						</TableCell>
+					</TableRow>
+				</TableBody>
+			</Table>
+		</div>
+	);
+}
+
+export default TableInvoiceRender;
diff --git a/src/app/main/invoice/generateInvoice/components/dataTransmitter/DataTransmitter.tsx b/src/app/main/invoice/generateInvoice/components/dataTransmitter/DataTransmitter.tsx
new file mode 100644
index 0000000..679cfd4
--- /dev/null
+++ b/src/app/main/invoice/generateInvoice/components/dataTransmitter/DataTransmitter.tsx
@@ -0,0 +1,65 @@
+import { Box, Grid, Typography, Divider } from '@mui/material';
+
+function DataTransmitter() {
+	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 DataTransmitter;
diff --git a/src/app/main/invoice/listInvoice/ListInvoiceRender.tsx b/src/app/main/invoice/listInvoice/ListInvoiceRender.tsx
index 3f5114d..3a48051 100644
--- a/src/app/main/invoice/listInvoice/ListInvoiceRender.tsx
+++ b/src/app/main/invoice/listInvoice/ListInvoiceRender.tsx
@@ -1,257 +1,265 @@
-import FusePageSimple from "@fuse/core/FusePageSimple";
-import FuseSvgIcon from "@fuse/core/FuseSvgIcon";
-import {
-  Button,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Typography,
-  styled,
-} from "@mui/material";
-import clsx from "clsx";
-import { format } from "date-fns";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import FusePageSimple from '@fuse/core/FusePageSimple';
+import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
+import { Button, Paper, Table, TableBody, TableCell, TableHead, TableRow, Typography, styled } from '@mui/material';
+import clsx from 'clsx';
+import { format } from 'date-fns';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 
 const Root = styled(FusePageSimple)(({ theme }) => ({
-  "& .FusePageSimple-header": {
-    backgroundColor: theme.palette.background.paper,
-    boxShadow: `inset 0 0 0 1px  ${theme.palette.divider}`,
-  },
+	'& .FusePageSimple-header': {
+		backgroundColor: theme.palette.background.paper,
+		boxShadow: `inset 0 0 0 1px  ${theme.palette.divider}`
+	}
 }));
 
-const ListInvoiceRender = () => {
-  const { t } = useTranslation("invoicePage");
-  const columns = [
-    "Número factura",
-    "Fecha",
-    "Cliente",
-    "Identificación",
-    "Valor",
-    "Estado",
-    "Acciones",
-  ];
+function ListInvoiceRender() {
+	const { t } = useTranslation('invoicePage');
+	const columns = ['Número factura', 'Fecha', 'Cliente', 'Identificación', 'Valor', 'Estado', 'Acciones'];
 
-  const rows = [
-    {
-      id: "528651571NT",
-      date: "2019-10-07T22:22:37.274Z",
-      name: "Morgan Page",
-      identification: "17215896114",
-      amount: 1358.75,
-      status: "completed",
-      action: true,
-    },
-    {
-      id: "421436904YT",
-      date: "2019-12-18T14:51:24.461Z",
-      name: "Nita Hebert",
-      identification: "17215896114",
-      amount: -1042.82,
-      status: "completed",
-      action: true,
-    },
-    {
-      id: "685377421YT",
-      date: "2019-12-25T17:52:14.304Z",
-      name: "Marsha Chambers",
-      identification: "17215896114",
-      amount: 1828.16,
-      status: "pending",
-      action: true,
-    },
-    {
-      id: "884960091RT",
-      date: "2019-11-29T06:32:16.111Z",
-      name: "Charmaine Jackson",
-      identification: "17215896114",
-      amount: 1647.55,
-      status: "completed",
-      action: true,
-    },
-    {
-      id: "361402213NT",
-      date: "2019-11-24T12:13:23.064Z",
-      name: "Maura Carey",
-      identification: "17215896114",
-      amount: -927.43,
-      status: "completed",
-      action: true,
-    },
-    {
-      id: "361402213NT",
-      date: "2019-11-24T12:13:23.064Z",
-      name: "Maura Carey",
-      identification: "17215896114",
-      amount: -927.43,
-      status: "completed",
-      action: true,
-    },
-    {
-      id: "361402213NT",
-      date: "2019-11-24T12:13:23.064Z",
-      name: "Maura Carey",
-      identification: "17215896114",
-      amount: -927.43,
-      status: "completed",
-      action: true,
-    },
-    {
-      id: "361402213NT",
-      date: "2019-11-24T12:13:23.064Z",
-      name: "Maura Carey",
-      identification: "17215896114",
-      amount: -927.43,
-      status: "completed",
-      action: true,
-    },
-  ];
+	const rows = [
+		{
+			id: '528651571NT',
+			date: '2019-10-07T22:22:37.274Z',
+			name: 'Morgan Page',
+			identification: '17215896114',
+			amount: 1358.75,
+			status: 'completed',
+			action: true
+		},
+		{
+			id: '421436904YT',
+			date: '2019-12-18T14:51:24.461Z',
+			name: 'Nita Hebert',
+			identification: '17215896114',
+			amount: -1042.82,
+			status: 'completed',
+			action: true
+		},
+		{
+			id: '685377421YT',
+			date: '2019-12-25T17:52:14.304Z',
+			name: 'Marsha Chambers',
+			identification: '17215896114',
+			amount: 1828.16,
+			status: 'pending',
+			action: true
+		},
+		{
+			id: '884960091RT',
+			date: '2019-11-29T06:32:16.111Z',
+			name: 'Charmaine Jackson',
+			identification: '17215896114',
+			amount: 1647.55,
+			status: 'completed',
+			action: true
+		},
+		{
+			id: '361402213NT',
+			date: '2019-11-24T12:13:23.064Z',
+			name: 'Maura Carey',
+			identification: '17215896114',
+			amount: -927.43,
+			status: 'completed',
+			action: true
+		},
+		{
+			id: '361402213NT',
+			date: '2019-11-24T12:13:23.064Z',
+			name: 'Maura Carey',
+			identification: '17215896114',
+			amount: -927.43,
+			status: 'completed',
+			action: true
+		},
+		{
+			id: '361402213NT',
+			date: '2019-11-24T12:13:23.064Z',
+			name: 'Maura Carey',
+			identification: '17215896114',
+			amount: -927.43,
+			status: 'completed',
+			action: true
+		},
+		{
+			id: '361402213NT',
+			date: '2019-11-24T12:13:23.064Z',
+			name: 'Maura Carey',
+			identification: '17215896114',
+			amount: -927.43,
+			status: 'completed',
+			action: true
+		}
+	];
 
-  return (
-    <Root
-      header={
-        <div className="p-24">
-          <h4>{t("TITLE")}</h4>
-        </div>
-      }
-      content={
-        <Paper className="flex flex-col flex-auto p-24 shadow rounded-2 overflow-hidden mt-6">
-          <div className="flex md:flex-row justify-between flex-col">
-            <div>
-              <Typography className="mr-16 text-lg font-medium tracking-tight leading-6 truncate">
-                {t("TITLE_TABLE")}
-              </Typography>
-              <Typography className="font-medium" color="text.secondary">
-                1 pendiente, 4 completadas
-              </Typography>
-            </div>
-            <div>
-              <Button
-                size="small"
-                variant="contained"
-                color="primary"
-                component={Link}
-                to={'/invoice/edit'}
-                startIcon={
-                  <FuseSvgIcon
-                    className="text-48 text-white"
-                    size={24}
-                    color="action"
-                  >
-                    heroicons-outline:plus
-                  </FuseSvgIcon>
-                }
-              >
-                Nueva factura
-              </Button>
-            </div>
-          </div>
-          <div className="table-responsive mt-24">
-            <Table className="simple w-full min-w-full h-full">
-              <TableHead>
-                <TableRow>
-                  {columns.map((column, index) => (
-                    <TableCell key={index}>
-                      <Typography
-                        color="text.secondary"
-                        className="font-semibold text-12 whitespace-nowrap"
-                      >
-                        {column}
-                      </Typography>
-                    </TableCell>
-                  ))}
-                </TableRow>
-              </TableHead>
+	return (
+		<Root
+			header={
+				<div className="p-24">
+					<h4>{t('TITLE')}</h4>
+				</div>
+			}
+			content={
+				<Paper className="flex flex-col flex-auto p-24 shadow rounded-2 overflow-hidden mt-6">
+					<div className="flex md:flex-row justify-between flex-col">
+						<div>
+							<Typography className="mr-16 text-lg font-medium tracking-tight leading-6 truncate">
+								{t('TITLE_TABLE')}
+							</Typography>
+							<Typography
+								className="font-medium"
+								color="text.secondary"
+							>
+								1 pendiente, 4 completadas
+							</Typography>
+						</div>
+						<div>
+							<Button
+								size="small"
+								variant="contained"
+								color="primary"
+								component={Link}
+								to="/invoice/edit"
+								startIcon={
+									<FuseSvgIcon
+										className="text-48 text-white"
+										size={24}
+										color="action"
+									>
+										heroicons-outline:plus
+									</FuseSvgIcon>
+								}
+							>
+								Nueva factura
+							</Button>
+						</div>
+					</div>
+					<div className="table-responsive mt-24">
+						<Table className="simple w-full min-w-full h-full">
+							<TableHead>
+								<TableRow>
+									{columns.map((column, index) => (
+										<TableCell key={index}>
+											<Typography
+												color="text.secondary"
+												className="font-semibold text-12 whitespace-nowrap"
+											>
+												{column}
+											</Typography>
+										</TableCell>
+									))}
+								</TableRow>
+							</TableHead>
 
-              <TableBody>
-                {rows.map((row, index) => (
-                  <TableRow key={index}>
-                    {Object.entries(row).map(([key, value]) => {
-                      switch (key) {
-                        case "id": {
-                          return (
-                            <TableCell key={key} component="th" scope="row">
-                              <Typography color="text.secondary">
-                                {value}
-                              </Typography>
-                            </TableCell>
-                          );
-                        }
-                        case "date": {
-                          return (
-                            <TableCell key={key} component="th" scope="row">
-                              <Typography>
-                                {
-                                  // @ts-ignore
-                                  format(new Date(value), "dd/MM/yyyy")
-                                }
-                              </Typography>
-                            </TableCell>
-                          );
-                        }
-                        case "amount": {
-                          return (
-                            <TableCell key={key} component="th" scope="row">
-                              <Typography>
-                                {value.toLocaleString("en-US", {
-                                  style: "currency",
-                                  currency: "USD",
-                                })}
-                              </Typography>
-                            </TableCell>
-                          );
-                        }
-                        case "status": {
-                          return (
-                            <TableCell key={key} component="th" scope="row">
-                              <Typography
-                                className={clsx(
-                                  "inline-flex items-center font-bold text-10 px-10 py-2 rounded-full tracking-wide uppercase",
-                                  value === "pending" &&
-                                    "bg-red-100 text-red-800 dark:bg-red-600 dark:text-red-50",
-                                  value === "completed" &&
-                                    "bg-green-50 text-green-800 dark:bg-green-600 dark:text-green-50"
-                                )}
-                              >
-                                {value}
-                              </Typography>
-                            </TableCell>
-                          );
-                        }
-                        case "action": {
-                          return (
-                            <TableCell key={key} component="th" scope="row">
-                              <Button
-                                size="small"
-                                variant="contained"
-                                color="primary"
-                              >
-                                Ver
-                              </Button>
-                            </TableCell>
-                          );
-                        }
-                        default: {
-                          return (
-                            <TableCell key={key} component="th" scope="row">
-                              <Typography>{value}</Typography>
-                            </TableCell>
-                          );
-                        }
-                      }
-                    })}
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        </Paper>
-      }
-    />
-  );
-};
+							<TableBody>
+								{rows.map((row, index) => (
+									<TableRow key={index}>
+										{Object.entries(row).map(([key, value]) => {
+											switch (key) {
+												case 'id': {
+													return (
+														<TableCell
+															key={key}
+															component="th"
+															scope="row"
+														>
+															<Typography color="text.secondary">{value}</Typography>
+														</TableCell>
+													);
+												}
+												case 'date': {
+													return (
+														<TableCell
+															key={key}
+															component="th"
+															scope="row"
+														>
+															<Typography>
+																{
+																	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+																	// @ts-ignore
+																	format(new Date(value), 'dd/MM/yyyy')
+																}
+															</Typography>
+														</TableCell>
+													);
+												}
+												case 'amount': {
+													return (
+														<TableCell
+															key={key}
+															component="th"
+															scope="row"
+														>
+															<Typography>
+																{value.toLocaleString('en-US', {
+																	style: 'currency',
+																	currency: 'USD'
+																})}
+															</Typography>
+														</TableCell>
+													);
+												}
+												case 'status': {
+													return (
+														<TableCell
+															key={key}
+															component="th"
+															scope="row"
+														>
+															<Typography
+																className={clsx(
+																	'inline-flex items-center font-bold text-10 px-10 py-2 rounded-full tracking-wide uppercase',
+																	value === 'pending' &&
+																		'bg-red-100 text-red-800 dark:bg-red-600 dark:text-red-50',
+																	value === 'completed' &&
+																		'bg-green-50 text-green-800 dark:bg-green-600 dark:text-green-50'
+																)}
+															>
+																{value}
+															</Typography>
+														</TableCell>
+													);
+												}
+												case 'action': {
+													return (
+														<TableCell
+															key={key}
+															component="th"
+															scope="row"
+														>
+															<Button
+																size="small"
+																variant="contained"
+																color="primary"
+															>
+																Ver
+															</Button>
+														</TableCell>
+													);
+												}
+												default: {
+													return (
+														<TableCell
+															key={key}
+															component="th"
+															scope="row"
+														>
+															<Typography>{value}</Typography>
+														</TableCell>
+													);
+												}
+											}
+										})}
+									</TableRow>
+								))}
+							</TableBody>
+						</Table>
+					</div>
+				</Paper>
+			}
+		/>
+	);
+}
 
 export default ListInvoiceRender;
diff --git a/src/styles/tables.css b/src/styles/tables.css
index b0f5dfb..20c36ec 100644
--- a/src/styles/tables.css
+++ b/src/styles/tables.css
@@ -17,31 +17,31 @@ table.simple {
 }
 
 table.simple thead tr th {
-    padding: 16px 8px;
+    /* padding: 16px 16px; */
     font-weight: 500;
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
     white-space: nowrap;
 }
 
 table.simple thead tr th:first-child {
-    padding-left: 24px;
+    padding-left: 15px;
 }
 
 table.simple thead tr th:last-child {
-    padding-right: 24px;
+    padding-right: 0px;
 }
 
 table.simple tbody tr td {
-    padding: 12px 8px;
+    padding: 12px 12px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 }
 
 table.simple tbody tr td:first-child {
-    padding-left: 24px;
+    padding-left: 0px;
 }
 
 table.simple tbody tr td:last-child {
-    padding-right: 24px;
+    padding-right: 0px;
 }
 
 table.simple tbody tr:last-child td {