diff --git a/src/components/inputUplaod/inputUpload.tsx b/src/components/inputUplaod/inputUpload.tsx
new file mode 100644
index 0000000..257b836
--- /dev/null
+++ b/src/components/inputUplaod/inputUpload.tsx
@@ -0,0 +1,50 @@
+import React,{ useState, useEffect } from 'react'
+
+import { InputUploadView } from './inputUploadView'
+
+
+export default function InputUpload() {
+  const [images, setImages] = useState([] as any);
+  const [imageURLS, setImageURLs] = useState([]);
+
+  useEffect(() => {
+    if (images.length < 1) return;
+    const newImageUrls: any = [];
+    images.forEach((image:any) => newImageUrls.push(URL.createObjectURL(image)));
+    setImageURLs(newImageUrls);
+  }, [images]);
+
+  function onImageChange(e: any) {
+    setImages([...e.target.files]);
+    console.log(e);
+  }
+
+
+
+
+  return (
+    <InputUploadView>
+
+<div className='imgContainer'>
+        <article>
+     {imageURLS.map((imageSrc) => (
+          <img  className="image" src={imageSrc} alt="not fount"  />
+        ))}
+
+       </article>
+
+
+    </div>
+
+        <div className="update">
+        <form action="">
+          <div >
+            <label  htmlFor="arquivo"> <p className='TitleButton'> Enviar foto de Perfil </p>   </label>
+            <input  type="file" name='arquivo' id='arquivo' onChange={onImageChange} />
+          </div>
+        </form>
+      </div>
+
+    </InputUploadView>
+  )
+}
diff --git a/src/components/inputUplaod/inputUploadView.ts b/src/components/inputUplaod/inputUploadView.ts
new file mode 100644
index 0000000..7a244d0
--- /dev/null
+++ b/src/components/inputUplaod/inputUploadView.ts
@@ -0,0 +1,57 @@
+import styled from 'styled-components'
+
+export const InputUploadView = styled.button`
+  width: 350px;
+  margin-left: 63px;
+  height: 58px;
+
+  border-radius: 5px;
+  background-color: #fff;
+  border: 1px solid #adacac;
+
+
+  margin-top: 13px;
+
+.imgContainer{
+  max-width: 40px;
+  height: 30px;
+}
+
+  input[type="file"] {
+    display: none;
+
+  }
+  label {
+    width: 169px;
+    height: 30px;
+    border-radius: 4px;
+    background-color: #254F7F;
+    color: white;
+    margin-left: 3px;
+    font-size: 13px;
+    font-weight: 600;
+    text-transform: uppercase;
+    display: flex;
+    text-align: center;
+    cursor: pointer;
+  }
+  .image{
+    width:30px;
+  }
+
+  .text{
+    margin-left: 60px;
+  }
+  .update{
+    margin-left: 160px;
+    margin-top: -29px;
+  }
+  .TitleButton{
+    margin-left: 9px;
+    margin-top: 6px;
+    font-family: 'Poppins';
+  }
+
+
+
+`
diff --git a/src/pages/administrative/clients.tsx b/src/pages/administrative/clients.tsx
index 7f2d1c3..b9caf6f 100644
--- a/src/pages/administrative/clients.tsx
+++ b/src/pages/administrative/clients.tsx
@@ -12,9 +12,13 @@ import BasicButton from '../../components/buttons/basicButton/BasicButton'
 import FaqButton1 from '../../components/buttons/faqButton/FaqButton1';
 import FaqButton2 from '../../components/buttons/faqButton/FaqButton2';
 import Header from '../../components/header/Header'
+import InputUpload from '../../components/inputUplaod/inputUpload';
+import { IconButton } from '@mui/material';
+import { ClientsView, ConfirmModalView } from '../../styles/layouts/clients/ClientsView';
+import PageTitle from '../../components/pageTitle/PageTitle';
 import ConfirmModal from '../../components/modal/ConfirmModal';
-import PageTitle from '../../components/pageTitle/PageTitle'
-import { ClientsView, ConfirmModalView } from '../../styles/layouts/clients/ClientsView'
+
+
 
 const style = {
   position: 'absolute' as const,
@@ -42,6 +46,8 @@ export default function clients() {
 
 
 
+
+
   return (
     <div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
       <ClientsView>
@@ -63,12 +69,12 @@ export default function clients() {
           <Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
           Adicionar Cliente Smart Energia</Typography>
           <br />
-        <TextField id="outlined-basic" label="Nome" sx={{width:350, ml:5}} variant="outlined" />
-        <TextField id="outlined-basic" label="E-mail/Usuário" sx={{width:350, ml:8}} variant="outlined" />
-        <TextField id="outlined-basic" label="Senha" sx={{width:350, ml:5, mt:2}} variant="outlined" />
-        <TextField id="outlined-basic" label="Confirma Senha" sx={{width:350, ml:8, mt:2}} variant="outlined" />
-        <TextField id="outlined-basic" label="Codigo do Cliente Smart Energia" sx={{width:350, ml:5, mt:2}} variant="outlined" />
-        <TextField id="outlined-basic" label="Imagem/Logotipo" sx={{width:350, ml:8, mt:2}} variant="outlined" />
+          <TextField id="outlined-basic" label="Nome" sx={{width:350, ml:5}} variant="outlined" />
+          <TextField id="outlined-basic" label="E-mail/Usuário" sx={{width:350, ml:8}} variant="outlined" />
+          <TextField id="outlined-basic" label="Senha" sx={{width:350, ml:5, mt:2}} variant="outlined" />
+          <TextField id="outlined-basic" label="Confirma Senha" sx={{width:350, ml:8, mt:2}} variant="outlined" />
+          <TextField id="outlined-basic" label="Codigo do Cliente Smart Energia" sx={{width:350, ml:5, mt:2}} variant="outlined" />
+          <InputUpload />
           <br /><br />
         <FaqButton1  title='Cancelar' onClick={()=>console.log()} />
         <FaqButton2  title='Salvar' onClick={()=>console.log()}/>