diff --git a/src/components/administrativeHeader/AdministrativeHeader.tsx b/src/components/administrativeHeader/AdministrativeHeader.tsx
new file mode 100644
index 0000000..d72e521
--- /dev/null
+++ b/src/components/administrativeHeader/AdministrativeHeader.tsx
@@ -0,0 +1,74 @@
+import Avatar from '@mui/material/Avatar'
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import TextField from '@mui/material/TextField';
+import React, { useState } from 'react'
+
+import { AdministrativeHeaderView } from './AdministrativeHeaderView';
+
+function stringToColor(string: string) {
+  let hash = 0;
+  let i;
+
+  for (i = 0; i < string.length; i += 1) {
+    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  let color = '#';
+
+  for (i = 0; i < 3; i += 1) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += `00${value.toString(16)}`.slice(-2);
+  }
+
+  return color;
+}
+
+function stringAvatar(name: string) {
+  return {
+    sx: {
+      bgcolor: stringToColor(name),
+    },
+    children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
+  };
+}
+
+export default function AdministrativeHeader() {
+  const [unity, setUnity] = useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setUnity(event.target.value);
+  };
+
+  return (
+    <AdministrativeHeaderView>
+    <section>
+      <TextField
+        id="outlined-textarea"
+        label="Encontre na Página"
+        placeholder="Encontre na Página"
+        multiline
+        fullWidth
+      />
+    </section>
+    <section>
+      <FormControl sx={{mr: '20px', minWidth: 180, minHeight: '80px'}}>
+        <Select
+          value={unity}
+          onChange={handleChange}
+          displayEmpty
+          inputProps={{ 'aria-label': 'Without label' }}
+        >
+          <MenuItem value="">Administrativo</MenuItem>
+          <MenuItem value={10}>Copel</MenuItem>
+          <MenuItem value={20}>Cliente 1</MenuItem>
+          <MenuItem value={30}>Cliente 2</MenuItem>
+        </Select>
+      </FormControl>
+      <Avatar {...stringAvatar('José Corte')} />
+    </section>
+  </AdministrativeHeaderView>
+  )
+}
diff --git a/src/components/administrativeHeader/AdministrativeHeaderView.ts b/src/components/administrativeHeader/AdministrativeHeaderView.ts
new file mode 100644
index 0000000..b3bfc7f
--- /dev/null
+++ b/src/components/administrativeHeader/AdministrativeHeaderView.ts
@@ -0,0 +1,72 @@
+import styled from "styled-components";
+
+export const AdministrativeHeaderView = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  align-self: center;
+
+  margin: 10px 0 20px 0;
+
+  width: 95%;
+
+  /* min-height: 80px; */
+
+  section {
+    width: 30%;
+
+    :last-child {
+      display: flex;
+      justify-content: flex-end;
+      align-items: flex-start;
+
+      height: fit-content;
+    }
+  }
+
+  .icon {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 150px;
+    height: 40px;
+
+    border-radius: 8px;
+
+    background-color: #254F7F;
+    color: white;
+
+    transform: translateX(12%);
+
+    ::after {
+      content: "";
+      position: relative;
+      left: 2.5rem;
+      background-color: #fff;
+      width: 45px;
+      height: 45px;
+      border-radius: 50%;
+    }
+  }
+
+  @media (max-width: 1020px) {
+    .icon {
+      display: none;
+    }
+    section {
+      width: 50%;
+    }
+  }
+  @media (max-width: 1640px) {
+    .icon {
+      transform: translateX(6%);
+    }
+    input {
+      height: 2rem;
+    }
+  }
+`
diff --git a/src/components/administrativeTables/ClientsTable.tsx b/src/components/administrativeTables/ClientsTable.tsx
new file mode 100644
index 0000000..742d03a
--- /dev/null
+++ b/src/components/administrativeTables/ClientsTable.tsx
@@ -0,0 +1,325 @@
+import DeleteIcon from '@mui/icons-material/Delete';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import Box from '@mui/material/Box';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import { alpha } from '@mui/material/styles';
+import Switch from '@mui/material/Switch';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Toolbar from '@mui/material/Toolbar';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import { visuallyHidden } from '@mui/utils';
+import React, { useState } from 'react';
+
+import { ClientTableView, StyledStatus } from './ClientsTableView';
+
+interface Data {
+  clientCode: number,
+  name: string,
+  unity: string,
+  status: string,
+}
+
+function createData(
+  clientCode: number,
+  name: string,
+  unity: string,
+  status: string,
+): Data {
+  return {
+    clientCode,
+    name,
+    unity,
+    status,
+  };
+}
+
+const rows = [
+  createData(9500130, 'Copel', 'clique para ver unidades', 'ativo'),
+  createData(9500131, 'Copel', 'clique para ver unidades', 'ativo'),
+  createData(9500132, 'Copel', 'clique para ver unidades', 'ativo'),
+  createData(9500689, 'Copel', 'clique para ver unidades', 'pendente'),
+  createData(9500690, 'Copel', 'clique para ver unidades', 'inativo'),
+  createData(9500691, 'Copel', 'clique para ver unidades', 'inativo'),
+];
+
+function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
+  if (b[orderBy] < a[orderBy]) {
+    return -1;
+  }
+  if (b[orderBy] > a[orderBy]) {
+    return 1;
+  }
+  return 0;
+}
+
+type Order = 'asc' | 'desc';
+
+function getComparator<Key extends keyof any>(
+  order: Order,
+  orderBy: Key,
+): (
+  a: { [key in Key]: number | string },
+  b: { [key in Key]: number | string },
+) => number {
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
+  const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0]);
+    if (order !== 0) {
+      return order;
+    }
+    return a[1] - b[1];
+  });
+  return stabilizedThis.map((el) => el[0]);
+}
+
+interface HeadCell {
+  disablePadding: boolean;
+  id: keyof Data | string;
+  label: string;
+  numeric: boolean;
+}
+
+const headCells: readonly HeadCell[] = [
+  {
+    id: 'clientCode',
+    numeric: false,
+    disablePadding: true,
+    label: 'código do cliente',
+  },
+  {
+    id: 'name',
+    numeric: true,
+    disablePadding: false,
+    label: 'name',
+  },
+  {
+    id: 'unity',
+    numeric: true,
+    disablePadding: false,
+    label: 'unity',
+  },
+  {
+    id: 'status',
+    numeric: true,
+    disablePadding: false,
+    label: 'status',
+  },
+];
+
+interface EnhancedTableProps {
+  numSelected: number;
+  onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Data) => void;
+  onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  order: Order;
+  orderBy: string;
+  rowCount: number;
+}
+
+function EnhancedTableHead(props: EnhancedTableProps) {
+  const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
+    props;
+  const createSortHandler =
+    (property: keyof Data) => (event: React.MouseEvent<unknown>) => {
+      onRequestSort(event, property);
+    };
+
+  return (
+    <TableHead>
+      <TableRow>
+        <TableCell padding="checkbox">
+          <Checkbox
+            color="primary"
+            indeterminate={numSelected > 0 && numSelected < rowCount}
+            checked={rowCount > 0 && numSelected === rowCount}
+            onChange={onSelectAllClick}
+            inputProps={{
+              'aria-label': 'select all desserts',
+            }}
+          />
+        </TableCell>
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            align='left'
+            padding={headCell.disablePadding ? 'none' : 'normal'}
+            sortDirection={orderBy === headCell.id ? order : false}
+          >
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              direction={orderBy === headCell.id ? order : 'asc'}
+              onClick={createSortHandler(headCell.id)}
+            >
+              {headCell.label}
+              {orderBy === headCell.id ? (
+                <Box component="span" sx={visuallyHidden}>
+                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                </Box>
+              ) : null}
+            </TableSortLabel>
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+export default function ClientTable() {
+  const [order, setOrder] = useState<Order>('asc');
+  const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
+  const [selected, setSelected] = useState<readonly string[]>([]);
+  const [page, setPage] = useState<number>(0);
+  const [dense, setDense] = useState<boolean>(false);
+  const [rowsPerPage, setRowsPerPage] = useState<number>(5);
+
+  const handleRequestSort = (
+    event: React.MouseEvent<unknown>,
+    property: keyof Data,
+  ) => {
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+  };
+
+  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      const newSelecteds = rows.map((n) => n.name);
+      setSelected(newSelecteds);
+      return;
+    }
+    setSelected([]);
+  };
+
+  const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
+    const selectedIndex = selected.indexOf(name);
+    let newSelected: readonly string[] = [];
+
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selected, name);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selected.slice(1));
+    } else if (selectedIndex === selected.length - 1) {
+      newSelected = newSelected.concat(selected.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(
+        selected.slice(0, selectedIndex),
+        selected.slice(selectedIndex + 1),
+      );
+    }
+
+    setSelected(newSelected);
+  };
+
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  const isSelected = (name: string) => selected.indexOf(name) !== -1;
+
+  // Avoid a layout jump when reaching the last page with empty rows.
+  const emptyRows =
+    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
+
+  return (
+    <ClientTableView>
+      <Paper sx={{ width: '100%', mb: 2 }}>
+        <TableContainer>
+          <Table
+            sx={{ minWidth: 750 }}
+            aria-labelledby="tableTitle"
+            size={dense ? 'small' : 'medium'}
+          >
+            <EnhancedTableHead
+              numSelected={selected.length}
+              order={order}
+              orderBy={orderBy}
+              onSelectAllClick={handleSelectAllClick}
+              onRequestSort={handleRequestSort}
+              rowCount={rows.length}
+            />
+            <TableBody>
+              {stableSort(rows, getComparator(order, orderBy))
+                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                .map((row, index) => {
+                  const isItemSelected = isSelected(row.clientCode);
+                  const labelId = `enhanced-table-checkbox-${index}`;
+
+                  return (
+                    <TableRow
+                      hover
+                      onClick={(event) => handleClick(event, row.clientCode)}
+                      role="checkbox"
+                      aria-checked={isItemSelected}
+                      tabIndex={-1}
+                      key={row.clientCode}
+                      selected={isItemSelected}
+                    >
+                      <TableCell padding="checkbox">
+                        <Checkbox
+                          color="primary"
+                          checked={isItemSelected}
+                          inputProps={{
+                            'aria-labelledby': labelId,
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell
+                        component="th"
+                        id={labelId}
+                        scope="row"
+                        padding="none"
+                      >
+                        Unidade - {row.clientCode}
+                      </TableCell>
+                      <TableCell align="left">{row.name}</TableCell>
+                      <TableCell align="left">{row.unity}</TableCell>
+                      <TableCell align="left"><StyledStatus status={row.status}>{row.status}</StyledStatus></TableCell>
+                    </TableRow>
+                  );
+                })}
+              {emptyRows > 0 && (
+                <TableRow
+                  style={{
+                    height: (dense ? 33 : 53) * emptyRows,
+                  }}
+                >
+                  <TableCell colSpan={6} />
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        <TablePagination
+          rowsPerPageOptions={[5, 10, 25]}
+          component="div"
+          count={rows.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+        />
+      </Paper>
+    </ClientTableView>
+  );
+}
diff --git a/src/components/administrativeTables/ClientsTableView.ts b/src/components/administrativeTables/ClientsTableView.ts
new file mode 100644
index 0000000..4ad9b11
--- /dev/null
+++ b/src/components/administrativeTables/ClientsTableView.ts
@@ -0,0 +1,50 @@
+import styled from "styled-components";
+
+export const ClientTableView = styled.main`
+  width: 100%;
+
+  color: #6A707E;
+
+  tbody {
+    tr {
+      th {
+        font-family: 'poppins';
+        font-weight: 500;
+        font-size: 16px;
+        color: #6A707E;
+      }
+
+      td {
+        :nth-child(3) {
+          font-family: 'poppins';
+          font-weight: 500;
+          font-size: 16px;
+          color: #6A707E;
+        }
+        :nth-child(4) {
+          font-family: 'poppins';
+          font-weight: 400;
+          font-size: 12px;
+          color: #828282;
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+`
+
+export const StyledStatus = styled.div<{status: string}>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 72px;
+  height: 31px;
+
+  border-radius: 8px;
+
+  background-color: ${props => props.status == 'ativo'? '#F0FFF8' : props.status == 'pendente'? '#FEFFE5' : '#FFF0F0'};
+  color: ${props => props.status == 'ativo'? '#18AB56' : props.status == 'pendente'? '#FFBC10' : '#EB5757'};
+
+  text-decoration: none!important;;
+`
diff --git a/src/components/administrativeTables/FaqTable.tsx b/src/components/administrativeTables/FaqTable.tsx
new file mode 100644
index 0000000..103fe10
--- /dev/null
+++ b/src/components/administrativeTables/FaqTable.tsx
@@ -0,0 +1,315 @@
+import DeleteIcon from '@mui/icons-material/Delete';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import Box from '@mui/material/Box';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import { alpha } from '@mui/material/styles';
+import Switch from '@mui/material/Switch';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Toolbar from '@mui/material/Toolbar';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import { visuallyHidden } from '@mui/utils';
+import React, { useState } from 'react';
+
+import { ClientTableView, StyledStatus } from './ClientsTableView';
+
+interface Data {
+  question: string,
+  answer: string,
+  status: string,
+}
+
+function createData(
+  question: string,
+  answer: string,
+  status: string,
+): Data {
+  return {
+    question,
+    answer,
+    status,
+  };
+}
+
+const rows = [
+  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'Active'),
+  createData('Como usar o sistema', 'Você deve usar assim... e assado...', 'active'),
+  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'active'),
+  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'active'),
+  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'active'),
+  createData('Como usar o sistema?', 'Você deve usar assim... e assado...', 'inactive'),
+];
+
+function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
+  if (b[orderBy] < a[orderBy]) {
+    return -1;
+  }
+  if (b[orderBy] > a[orderBy]) {
+    return 1;
+  }
+  return 0;
+}
+
+type Order = 'asc' | 'desc';
+
+function getComparator<Key extends keyof any>(
+  order: Order,
+  orderBy: Key,
+): (
+  a: { [key in Key]: number | string },
+  b: { [key in Key]: number | string },
+) => number {
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
+  const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0]);
+    if (order !== 0) {
+      return order;
+    }
+    return a[1] - b[1];
+  });
+  return stabilizedThis.map((el) => el[0]);
+}
+
+interface HeadCell {
+  disablePadding: boolean;
+  id: keyof Data | string;
+  label: string;
+  numeric: boolean;
+}
+
+const headCells: readonly HeadCell[] = [
+  {
+    id: 'question',
+    numeric: false,
+    disablePadding: true,
+    label: 'código do cliente',
+  },
+  {
+    id: 'answer',
+    numeric: true,
+    disablePadding: false,
+    label: 'name',
+  },
+  {
+    id: 'status',
+    numeric: true,
+    disablePadding: false,
+    label: 'status',
+  },
+];
+
+interface EnhancedTableProps {
+  numSelected: number;
+  onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Data) => void;
+  onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  order: Order;
+  orderBy: string;
+  rowCount: number;
+}
+
+function EnhancedTableHead(props: EnhancedTableProps) {
+  const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } =
+    props;
+  const createSortHandler =
+    (property: keyof Data) => (event: React.MouseEvent<unknown>) => {
+      onRequestSort(event, property);
+    };
+
+  return (
+    <TableHead>
+      <TableRow>
+        <TableCell padding="checkbox">
+          <Checkbox
+            color="primary"
+            indeterminate={numSelected > 0 && numSelected < rowCount}
+            checked={rowCount > 0 && numSelected === rowCount}
+            onChange={onSelectAllClick}
+            inputProps={{
+              'aria-label': 'select all desserts',
+            }}
+          />
+        </TableCell>
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            align='left'
+            padding={headCell.disablePadding ? 'none' : 'normal'}
+            sortDirection={orderBy === headCell.id ? order : false}
+          >
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              direction={orderBy === headCell.id ? order : 'asc'}
+              onClick={createSortHandler(headCell.id)}
+            >
+              {headCell.label}
+              {orderBy === headCell.id ? (
+                <Box component="span" sx={visuallyHidden}>
+                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                </Box>
+              ) : null}
+            </TableSortLabel>
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+export default function ClientTable() {
+  const [order, setOrder] = useState<Order>('asc');
+  const [orderBy, setOrderBy] = useState<keyof Data | string>('status');
+  const [selected, setSelected] = useState<readonly string[]>([]);
+  const [page, setPage] = useState<number>(0);
+  const [dense, setDense] = useState<boolean>(false);
+  const [rowsPerPage, setRowsPerPage] = useState<number>(5);
+
+  const handleRequestSort = (
+    event: React.MouseEvent<unknown>,
+    property: keyof Data,
+  ) => {
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+  };
+
+  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      const newSelecteds = rows.map((n) => n.name);
+      setSelected(newSelecteds);
+      return;
+    }
+    setSelected([]);
+  };
+
+  const handleClick = (event: React.MouseEvent<unknown>, name: string) => {
+    const selectedIndex = selected.indexOf(name);
+    let newSelected: readonly string[] = [];
+
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selected, name);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selected.slice(1));
+    } else if (selectedIndex === selected.length - 1) {
+      newSelected = newSelected.concat(selected.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(
+        selected.slice(0, selectedIndex),
+        selected.slice(selectedIndex + 1),
+      );
+    }
+
+    setSelected(newSelected);
+  };
+
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  const isSelected = (name: string) => selected.indexOf(name) !== -1;
+
+  // Avoid a layout jump when reaching the last page with empty rows.
+  const emptyRows =
+    page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
+
+  return (
+    <ClientTableView>
+      <Paper sx={{ width: '100%', mb: 2 }}>
+        <TableContainer>
+          <Table
+            sx={{ minWidth: 750 }}
+            aria-labelledby="tableTitle"
+            size={dense ? 'small' : 'medium'}
+          >
+            <EnhancedTableHead
+              numSelected={selected.length}
+              order={order}
+              orderBy={orderBy}
+              onSelectAllClick={handleSelectAllClick}
+              onRequestSort={handleRequestSort}
+              rowCount={rows.length}
+            />
+            <TableBody>
+              {stableSort(rows, getComparator(order, orderBy))
+                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                .map((row, index) => {
+                  const isItemSelected = isSelected(row.question);
+                  const labelId = `enhanced-table-checkbox-${index}`;
+
+                  return (
+                    <TableRow
+                      hover
+                      onClick={(event) => handleClick(event, row.question)}
+                      role="checkbox"
+                      aria-checked={isItemSelected}
+                      tabIndex={-1}
+                      key={row.question}
+                      selected={isItemSelected}
+                    >
+                      <TableCell padding="checkbox">
+                        <Checkbox
+                          color="primary"
+                          checked={isItemSelected}
+                          inputProps={{
+                            'aria-labelledby': labelId,
+                          }}
+                        />
+                      </TableCell>
+                      <TableCell
+                        component="th"
+                        id={labelId}
+                        scope="row"
+                        padding="none"
+                      >
+                        {row.question}
+                      </TableCell>
+                      <TableCell align="left">{row.answer}</TableCell>
+                      <TableCell align="left"><StyledStatus status={row.status}>{row.status}</StyledStatus></TableCell>
+                    </TableRow>
+                  );
+                })}
+              {emptyRows > 0 && (
+                <TableRow
+                  style={{
+                    height: (dense ? 33 : 53) * emptyRows,
+                  }}
+                >
+                  <TableCell colSpan={6} />
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        <TablePagination
+          rowsPerPageOptions={[5, 10, 25]}
+          component="div"
+          count={rows.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+        />
+      </Paper>
+    </ClientTableView>
+  );
+}
diff --git a/src/components/modal/ConfirmModal.tsx b/src/components/modal/ConfirmModal.tsx
new file mode 100644
index 0000000..b38e561
--- /dev/null
+++ b/src/components/modal/ConfirmModal.tsx
@@ -0,0 +1,50 @@
+import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Modal from '@mui/material/Modal';
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+import { useEffect } from 'react';
+
+const style = {
+  // eslint-disable-next-line @typescript-eslint/prefer-as-const
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '30%',
+  height: '30%',
+  bgcolor: 'background.paper',
+  border: '2px solid #254F7F',
+  boxShadow: 24,
+  p: 4,
+};
+
+interface ConfirmModalInterface{
+  open: boolean,
+  handleIsClose: (value: any) => void,
+  children:  React.ReactNode
+}
+
+export default function ConfirmModal({open, handleIsClose, children}: ConfirmModalInterface) {
+  const [openState, setOpenState] = React.useState(false);
+  const handleOpen = () => setOpenState(true);
+  const handleClose = () => {setOpenState(false); handleIsClose(false)}
+
+  useEffect(() => {
+    setOpenState(open)
+  }, [open, openState])
+
+  return (
+    <Modal
+      open={openState}
+      onClose={handleClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box sx={style}>
+        {children}
+      </Box>
+    </Modal>
+  );
+}
diff --git a/src/components/modal/Modal.tsx b/src/components/modal/Modal.tsx
index 6362e9b..a6b7957 100644
--- a/src/components/modal/Modal.tsx
+++ b/src/components/modal/Modal.tsx
@@ -13,14 +13,20 @@ const style = {
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: '80%',
-  height: '80%',
+  height: '550px',
   bgcolor: 'background.paper',
-  border: '2px solid #000',
+  border: '2px solid #254F7F',
   boxShadow: 24,
   p: 4,
 };
 
-export default function BasicModal({open, handleIsClose, children}: {open: boolean, handleIsClose: (value: any) => void, children:  React.ReactNode}) {
+interface BasicModalInterface{
+  open: boolean,
+  handleIsClose: (value: any) => void,
+  children:  React.ReactNode
+}
+
+export default function BasicModal({open, handleIsClose, children}: BasicModalInterface) {
   const [openState, setOpenState] = React.useState(false);
   const handleOpen = () => setOpenState(true);
   const handleClose = () => {setOpenState(false); handleIsClose(false)}
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 02d42f8..407206c 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -1,15 +1,14 @@
-import React, { useState, useEffect } from 'react'
-import { useRouter } from 'next/router'
-import Image from 'next/image'
-import Link from 'next/link'
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
 import Modal from '@mui/material/Modal';
 import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import React, { useEffect, useState } from 'react'
 
-
-
+import RenderIf from '../../utils/renderIf';
 import { SidebarView } from './SidebarView'
 
 const style = {
@@ -35,56 +34,114 @@ export default function Sidebar() {
 
   const router = useRouter()
 
+  const user = {
+    role: 'admin'
+  }
+
   useEffect(() => {
     setViewModal(false)
   }, [router.pathname])
 
   return (
-    <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
-      <div className='hamburger' onClick={() => setViewModal(!viewModal)} >
-        <Image src='/assets/hamburgerModal.svg' width={60} height={60} />
-      </div>
-      <div className='imageNext'>
-        <Image src='/assets/logo.svg' width={100} height={100} />
-      </div>
-      <ul>
-        <Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
-        <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
-          <div className='economiaDrawer drawer' >
-            <Link href='/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta</li></Link>
-            <Link href='/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Acumulada</li></Link>
-            <Link href='/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Custo Estimado</li></Link>
-            <Link href='/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R/MWh</li></Link>
+    <>
+      <RenderIf isTrue={user.role === 'admin'}>
+        <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
+          <div className='hamburger' onClick={() => setViewModal(!viewModal)} >
+            <Image src='/assets/hamburgerModal.svg' width={60} height={60} />
           </div>
-        <Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
-        <Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
-        <Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
-        <Link href='/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li></Link>
-        <Link href='/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
-        {/* <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link> */}
-        <Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
-        <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
-        <Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
-        <button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
-        <Modal
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="modal-modal-title"
-        aria-describedby="modal-modal-description"
-        >
-         <Box sx={style}>
-          <Typography id="modal-modal-title" variant="h6" component="h2">
-            Deseja realmente sair ?
-          </Typography>
-          <Link href='/'><Button variant="contained"  sx={{mt:5}}>Sim</Button></Link>
-          <Button variant="contained" onClick={handleClose} color="error" sx={{mt:5 ,ml:1}}>Não</Button>
-        </Box>
-      </Modal>
-      </ul>
-      <aside>
-        <p>Nossos Gerentes estão prontos para atendê-los</p>
-        <div><h3>+55(41) 3012-5900</h3></div>
-      </aside>
-    </SidebarView>
+          <div className='imageNext'>
+            <Image src='/assets/logo.svg' width={100} height={100} />
+          </div>
+          <ul>
+            <Link href='/administrative/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
+            {/* <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
+              <div className='economiaDrawer drawer' >
+                <Link href='/administrative/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta</li></Link>
+                <Link href='/administrative/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Acumulada</li></Link>
+                <Link href='/administrative/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Custo Estimado</li></Link>
+                <Link href='/administrative/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R/MWh</li></Link>
+              </div> */}
+            <Link href='/administrative/clients'><li className={router.pathname=='/administrative/clients' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Clientes >'}</li></Link>
+            <Link href='/administrative/faq'><li className={router.pathname=='/administrative/faq' ? 'actualPath' : null } ><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
+            {/* <Link href='/administrative/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
+            <Link href='/administrative/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
+            <Link href='/administrative/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
+            <Link href='/administrative/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li></Link>
+            <Link href='/administrative/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
+            <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link>
+            <Link href='/administrative/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
+            <Link href='/administrative/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
+            <Link href='/administrative/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link> */}
+            <button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
+            <Modal
+            open={open}
+            onClose={handleClose}
+            aria-labelledby="modal-modal-title"
+            aria-describedby="modal-modal-description"
+            >
+            <Box sx={style}>
+              <Typography id="modal-modal-title" variant="h6" component="h2">
+                Deseja realmente sair ?
+              </Typography>
+              <Link href='/'><Button variant="contained"  sx={{mt:5}}>Sim</Button></Link>
+              <Button variant="contained" onClick={handleClose} color="error" sx={{mt:5 ,ml:1}}>Não</Button>
+            </Box>
+          </Modal>
+          </ul>
+          <aside>
+            <p>Nossos Gerentes estão prontos para atendê-los</p>
+            <div><h3>+55(41) 3012-5900</h3></div>
+          </aside>
+        </SidebarView>
+      </RenderIf>
+      <RenderIf isTrue={user.role === 'client'}>
+        <SidebarView economiaDrawer={economiaDrawer} modalOpen={viewModal} >
+          <div className='hamburger' onClick={() => setViewModal(!viewModal)} >
+            <Image src='/assets/hamburgerModal.svg' width={60} height={60} />
+          </div>
+          <div className='imageNext'>
+            <Image src='/assets/logo.svg' width={100} height={100} />
+          </div>
+          <ul>
+            <Link href='/dashboard'><li className={router.pathname=='/dashboard'? 'actualPath' : null} ><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Visão Geral'}</li></Link>
+            <li onClick={() => setEconomiaDrawer(!economiaDrawer)} className={router.pathname=='/grossSavings' || router.pathname=='/accumulatedSavings' || router.pathname=='/estimatedCost' || router.pathname=='/costIndicator' ? 'actualPath' : null } ><Image src='/assets/sidebar/economyIcon.svg' width={25} height={25} />{'Economia >'}</li>
+              <div className='economiaDrawer drawer' >
+                <Link href='/grossSavings'><li className={router.pathname=='/grossSavings'? 'actualPathDrawer' : null}>Economia Bruta</li></Link>
+                <Link href='/accumulatedSavings'><li className={router.pathname=='/accumulatedSavings'? 'actualPathDrawer' : null}>Economia Acumulada</li></Link>
+                <Link href='/estimatedCost'><li className={router.pathname=='/estimatedCost'? 'actualPathDrawer' : null}>Custo Estimado</li></Link>
+                <Link href='/costIndicator'><li className={router.pathname=='/costIndicator'? 'actualPathDrawer' : null}>Custo R/MWh</li></Link>
+              </div>
+            <Link href='/telemetria'><li className={router.pathname=='/telemetria'? 'actualPath' : null}><Image src='/assets/sidebar/telemetryIcon.svg' width={25} height={25} />{'Telemetria >'}</li></Link>
+            <Link href='/resumoOperacao'><li className={router.pathname=='/resumoOperacao'? 'actualPath' : null} ><Image src='/assets/sidebar/summaryOperationsIcon.svg' width={25} height={25} />{'Resumo de Op. '}</li></Link>
+            <Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
+            <Link href='/pld'><li className={router.pathname=='/pld'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'PLD >'}</li></Link>
+            <Link href='/industryInfo'><li className={router.pathname=='/industryInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
+            {/* <Link href='/consumption'><li className={router.pathname=='/consumption'? 'actualPath' : null} ><Image src='/assets/sidebar/consumptionIcon.svg' width={25} height={25} />{'Consumo'}</li></Link> */}
+            <Link href='/notifications'><li className={router.pathname=='/notifications'? 'actualPath' : null}><Image src='/assets/sidebar/notificationsIcon.svg' width={25} height={25} />{'Notificações >'}<div className='notification'><p>25</p></div></li></Link>
+            <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/aboutUs.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>
+            <Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
+            <button onClick={handleOpen}><Image src='/assets/logout.svg' width={25} height={25} />{'Sair'}</button>
+            <Modal
+            open={open}
+            onClose={handleClose}
+            aria-labelledby="modal-modal-title"
+            aria-describedby="modal-modal-description"
+            >
+            <Box sx={style}>
+              <Typography id="modal-modal-title" variant="h6" component="h2">
+                Deseja realmente sair ?
+              </Typography>
+              <Link href='/'><Button variant="contained"  sx={{mt:5}}>Sim</Button></Link>
+              <Button variant="contained" onClick={handleClose} color="error" sx={{mt:5 ,ml:1}}>Não</Button>
+            </Box>
+          </Modal>
+          </ul>
+          <aside>
+            <p>Nossos Gerentes estão prontos para atendê-los</p>
+            <div><h3>+55(41) 3012-5900</h3></div>
+          </aside>
+        </SidebarView>
+      </RenderIf>
+    </>
   )
 }
diff --git a/src/pages/accumulatedSavings.tsx b/src/pages/accumulatedSavings.tsx
index 52b0af1..1134f8f 100644
--- a/src/pages/accumulatedSavings.tsx
+++ b/src/pages/accumulatedSavings.tsx
@@ -7,7 +7,6 @@ import Header from '../components/header/Header'
 import PageTitle from '../components/pageTitle/PageTitle'
 import { EconomiaAcumulada } from '../services/economiaAcumulada'
 import { dataEconomiaBruta } from '../services/economiaBruta'
-
 import { AccumulatedSavingsView } from '../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
 
 export default function AccumulatedSavings() {
@@ -19,7 +18,8 @@ export default function AccumulatedSavings() {
       <Header name='' />
       <PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
       <section>
-        <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada' dataset1='Estimada' label={EconomiaAcumulada.label}  dataProps={EconomiaAcumulada.data2} barLabel month/>
+        <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada'
+          dataset1='Estimada' label={EconomiaAcumulada.label}  dataProps={EconomiaAcumulada.data2} barLabel month/>
       </section>
     </AccumulatedSavingsView>
   )
diff --git a/src/pages/administrative/aboutUs/index.tsx b/src/pages/administrative/aboutUs/index.tsx
new file mode 100644
index 0000000..ba84ee3
--- /dev/null
+++ b/src/pages/administrative/aboutUs/index.tsx
@@ -0,0 +1,64 @@
+import TextField from '@mui/material/TextField';
+import Head from 'next/head'
+import Image from 'next/image'
+import React from 'react'
+
+import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader';
+import Banner from '../../../components/banner/Banner'
+import Header from '../../../components/header/Header'
+import { AboutUsView } from '../../../styles/layouts/aboutUs/AboutUsView'
+
+export default function aboutUs() {
+  return (
+    <AboutUsView>
+      <Head>
+        <title>Smart Energia - About Us</title>
+      </Head>
+      <AdministrativeHeader />
+      <Banner title='Quem Somos' subtitle='Soluções inteligentes em Gestão de Energia' imgSource='/assets/banners/aboutUsBanner.png' />
+      <div>
+        <h4>atualizar texto</h4>
+        <TextField
+          id="outlined-textarea"
+          label="Sobre nós"
+          placeholder="Placeholder"
+          multiline
+          fullWidth
+        />
+      </div>
+      <section>
+        <p>A <strong>SMART ENERGIA</strong> é uma consultoria independente especializada em Gestão de Energia Elétrica, consolidada como uma das três maiores consultorias do Brasil.
+          Devido à grande experiência em operações na CCEE – Câmara de Comercialização de Energia Elétrica e ANEEL, entrega resultados que superam as expectativas.</p>
+
+        <p>Nasceu para gerenciar a compra de energia com inovação, transparência e imparcialidade sendo o elo forte e necessário entre os Consumidores e os
+          Vendedores de energia. </p>
+
+        <p>Baseada em sua experiência no setor elétrico adquirida desde 2001 e em mais de 900 unidades migradas, atua na negociação de contratos de compra e venda de
+          energia, na Gestão de Energia no Mercado Livre e criação de produtos diferenciados para atender as necessidades específicas dos consumidores.</p>
+
+        <p>Apoiada pela sólida experiência de seus gestores, conhecendo as premissas dos agentes de Comercialização e Geração para a compra e venda de energia,
+          aplicamos as mesmas premissas a favor dos Consumidores, disponibilizando assim um diferencial único para a tomada de decisão e elaboração das estratégias de
+          contratação de energia.</p>
+        <ul>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Informação'}</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Economia'}</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Gestão de Energia'}</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Imparcialidade'}</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Previsão de Custos'}</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Experiência'}</li>
+          <li><Image src='/assets/listIcon.svg' width={25} height={25} />{'Relacionamento'}</li>
+        </ul>
+
+        <article>
+          <aside>
+            <h2>Apoio a projetos sociais</h2>
+            <div>
+              <Image src='/assets/stamps/whiteStamp.png' width={200} height={200} />
+              <Image src='/assets/stamps/blueStamp.png' width={200} height={200} />
+            </div>
+          </aside>
+        </article>
+      </section>
+    </AboutUsView>
+  )
+}
diff --git a/src/pages/administrative/accumulatedSavings/index.tsx b/src/pages/administrative/accumulatedSavings/index.tsx
new file mode 100644
index 0000000..85a78d9
--- /dev/null
+++ b/src/pages/administrative/accumulatedSavings/index.tsx
@@ -0,0 +1,39 @@
+import Button from '@material-ui/core/Button'
+import Head from 'next/head'
+import React from 'react'
+
+import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'
+import Chart from '../../../components/graph/Chart'
+import { SingleBar } from '../../../components/graph/SingleBar'
+import Header from '../../../components/header/Header'
+import PageTitle from '../../../components/pageTitle/PageTitle'
+import { EconomiaAcumulada } from '../../../services/economiaAcumulada'
+import { dataEconomiaBruta } from '../../../services/economiaBruta'
+import { AccumulatedSavingsView } from '../../../styles/layouts/economy/accumulatedSavings/AccumulatedSavingsView'
+
+export default function AccumulatedSavings() {
+  return (
+    <AccumulatedSavingsView>
+      <Head>
+        <title>Smart Energia - Economia Acumulada</title>
+      </Head>
+      <AdministrativeHeader />
+      <PageTitle title='Economia Acumulada' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
+      <Button
+        variant="contained"
+        component="label"
+        style={{width: '300px', margin: '30px'}}
+      >
+        Upload de dados
+        <input
+          type="file"
+          hidden
+        />
+      </Button>
+      <section>
+        <SingleBar title='Economia Bruta Estimada e Acumulada' subtitle='(Valores em R$ mil)' dataset='Consolidada'
+          dataset1='Estimada' label={EconomiaAcumulada.label}  dataProps={EconomiaAcumulada.data2} barLabel month/>
+      </section>
+    </AccumulatedSavingsView>
+  )
+}
diff --git a/src/pages/administrative/clients.tsx b/src/pages/administrative/clients.tsx
index 42972a7..c1712b3 100644
--- a/src/pages/administrative/clients.tsx
+++ b/src/pages/administrative/clients.tsx
@@ -3,87 +3,90 @@ import TextField from '@mui/material/TextField';
 import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
 import React, { useState } from 'react'
 
+import AdministrativeHeader from '../../components/administrativeHeader/AdministrativeHeader';
+import ClientsTable from '../../components/administrativeTables/ClientsTable';
 import BasicButton from '../../components/buttons/basicButton/BasicButton'
+import ConfirmModal from '../../components/modal/ConfirmModal';
 import Modal from '../../components/modal/Modal';
 import PageTitle from '../../components/pageTitle/PageTitle'
-import { ClientsModalView, ClientsView } from '../../styles/layouts/clients/ClientsView'
+import { ClientsModalView, ClientsView, ConfirmModalView } from '../../styles/layouts/clients/ClientsView'
 
 export default function clients() {
   const [openModal, setOpenModal] = useState(false)
+  const [openModalInativar, setOpenModalInativar] = useState(false)
 
   const rows = [
-    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
-    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
-    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
-    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
-    { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
-    { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
-    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
-    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
-    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
+    { id: 1, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
+    { id: 2, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
+    { id: 3, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
+    { id: 4, codigoCliente: 'Unidade - 9500689', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
+    { id: 5, codigoCliente: 'Unidade - 9500689', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
+    { id: 6, codigoCliente: 'Unidade - 9500689', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
+    { id: 7, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
+    { id: 8, codigoCliente: 'Unidade - 9500130', clientName: 'FraCopelnces', units: 'clique para ver unidades', age: 'ativo' },
+    { id: 9, codigoCliente: 'Unidade - 9500130', clientName: 'Copel', units: 'clique para ver unidades', age: 'ativo' },
   ];
 
   const columns: GridColDef[] = [
-    { field: 'id', headerName: 'ID', width: 70 },
-    { field: 'firstName', headerName: 'First name', width: 130 },
-    { field: 'lastName', headerName: 'Last name', width: 130 },
-    {
-      field: 'age',
-      headerName: 'Age',
-      type: 'number',
-      width: 90,
-    },
-    {
-      field: 'fullName',
-      headerName: 'Full name',
-      description: 'This column has a value getter and is not sortable.',
-      sortable: false,
-      width: 160,
-      valueGetter: (params: GridValueGetterParams) =>
-        `${params.row.firstName || ''} ${params.row.lastName || ''}`,
-    },
+    { field: 'codigoCliente', headerName: 'Código Cliente', width: 180 },
+    { field: 'clientName', headerName: 'Nome do cliente', width: 130 },
+    { field: 'units', headerName: 'Unidade', width: 130 },
+    { field: 'status', headerName: 'Status', width: 90 },
   ];
 
   return (
-    <>
+    <div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
+      <AdministrativeHeader />
       <ClientsView>
         <PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
 
         <section>
           <BasicButton title='Adicionar' onClick={() => setOpenModal(true)}/>
-          <BasicButton title='Inativar' onClick={() => {throw new Error('fixing...')}}/>
+          <BasicButton title='Inativar' onClick={() => setOpenModalInativar(true)}/>
         </section>
 
         <section>
-          <DataGrid
+          {/* <DataGrid
             rows={rows}
             columns={columns}
             pageSize={6}
             rowsPerPageOptions={[6]}
             checkboxSelection
-          />
+          /> */}
+          <ClientsTable />
         </section>
       </ClientsView>
 
       <Modal open={openModal} handleIsClose={(value) => {setOpenModal(value)}}>
         <ClientsModalView>
-          <TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
-          <TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
-          <TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
-          <TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
-          <TextField id="outlined-basic" label="Outlined" variant="outlined" style={{width: '300px'}}/>
-          <Button
-            variant="contained"
-            component="label"
-          >
-            Upload File
-            <input
-              type="file"
-              hidden
-            />
-          </Button>
+          <PageTitle title='Adicionar Cliente' subtitle='Adicionar Cliente Smart Energia'/>
+          <article>
+            <TextField id="outlined-basic" label="Nome" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
+            <TextField id="outlined-basic" label="email" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
+            <TextField id="outlined-basic" label="senha" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
+            <TextField id="outlined-basic" label="código" variant="outlined" style={{width: '90%', marginRight: '20px'}}/>
+            <BasicButton title='Criar Cliente' onClick={() => console.log()}/>
+            <Button
+              variant="contained"
+              component="label"
+              style={{width: '300px'}}
+            >
+              Logo
+              <input
+                type="file"
+                hidden
+              />
+            </Button>
+          </article>
         </ClientsModalView>
       </Modal>
-    </>
+
+      <ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
+        <ConfirmModalView>
+          <BasicButton title='Confirmar' onClick={() => setOpenModalInativar(true)}/>
+          <BasicButton title='Cancelar' onClick={() => setOpenModalInativar(true)}/>
+        </ConfirmModalView>
+      </ConfirmModal>
+    </div>
   )
 }
diff --git a/src/pages/administrative/costIndicator/index.tsx b/src/pages/administrative/costIndicator/index.tsx
new file mode 100644
index 0000000..f6ee0f3
--- /dev/null
+++ b/src/pages/administrative/costIndicator/index.tsx
@@ -0,0 +1,38 @@
+import Button from '@material-ui/core/Button'
+import Head from 'next/head'
+import React from 'react'
+
+import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'
+import Chart from '../../../components/graph/Chart'
+import { SingleBar } from '../../../components/graph/SingleBar'
+import Header from '../../../components/header/Header'
+import PageTitle from '../../../components/pageTitle/PageTitle'
+import { dataEconomiaBruta } from '../../../services/economiaBruta'
+import { dataEconomiaIndicador } from '../../../services/economiaIndicador'
+import { CostIndicatorView } from '../../../styles/layouts/economy/costIndicator/CostIndicatorView'
+
+export default function CostIndicator() {
+  return (
+    <CostIndicatorView>
+      <Head>
+        <title>Smart Energia - Indicador de Custos</title>
+      </Head>
+      <AdministrativeHeader />
+      <PageTitle title='Indicador de Custo' subtitle='Valores em R$/MWh'/>
+      <Button
+        variant="contained"
+        component="label"
+        style={{width: '300px', margin: '30px'}}
+      >
+        Upload de dados
+        <input
+          type="file"
+          hidden
+        />
+      </Button>
+      <section>
+        <Chart title='Indicador de Custo' subtitle='(Valores em R$/MWh)' data1={dataEconomiaIndicador.data1} data2={dataEconomiaIndicador.data2} label={dataEconomiaIndicador.labels} barLabel />
+      </section>
+    </CostIndicatorView>
+  )
+}
diff --git a/src/pages/administrative/estimatedCost/index.tsx b/src/pages/administrative/estimatedCost/index.tsx
new file mode 100644
index 0000000..fbee31d
--- /dev/null
+++ b/src/pages/administrative/estimatedCost/index.tsx
@@ -0,0 +1,39 @@
+import Button from '@material-ui/core/Button'
+import Head from 'next/head'
+import React from 'react'
+
+import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'
+import Chart from '../../../components/graph/Chart'
+import { LineBarChart } from '../../../components/graph/LineBarChart'
+import Header from '../../../components/header/Header'
+import PageTitle from '../../../components/pageTitle/PageTitle'
+import { ConsumoEstimado } from '../../../services/consumoEstimado'
+import { EstimatedCostView } from '../../../styles/layouts/economy/estimatedCost/EstimatedCostView'
+
+export default function EstimatedCost() {
+  return (
+    <>
+    <Head>
+      <title>Smart Energia - Custos Estimados</title>
+    </Head>
+    <AdministrativeHeader />
+    <EstimatedCostView>
+      <PageTitle title='Custos Estimados' subtitle='Comparativo de Custo Estimado' />
+      <Button
+        variant="contained"
+        component="label"
+        style={{width: '300px', margin: '30px'}}
+      >
+        Upload de dados
+        <input
+          type="file"
+          hidden
+        />
+      </Button>
+      <section>
+        <LineBarChart data1={ConsumoEstimado.data2} data2={ConsumoEstimado.data} data3={ConsumoEstimado.data1} dataset1="Economia (R$)" dataset2='Cativo' dataset3='Livre' label={ConsumoEstimado.label} title='Custo Estimado' subtitle='' barLabel hashurado />
+      </section>
+    </EstimatedCostView>
+    </>
+  )
+}
diff --git a/src/pages/administrative/faq/index.tsx b/src/pages/administrative/faq/index.tsx
index ed36e69..4a41b98 100644
--- a/src/pages/administrative/faq/index.tsx
+++ b/src/pages/administrative/faq/index.tsx
@@ -1,39 +1,24 @@
+import TextField from '@mui/material/TextField';
 import Head from 'next/head'
 import React from 'react'
+
+import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader';
+import FaqTable from '../../../components/administrativeTables/FaqTable';
+import BasicButton from '../../../components/buttons/basicButton/BasicButton';
 import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard'
 import Header from '../../../components/header/Header'
 import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView'
-import BasicButton from '../../../components/buttons/basicButton/BasicButton';
-
-import TextField from '@mui/material/TextField';
 
 export default function commonQuestions() {
   return (
-    <FaqView>
+    <>
       <Head>
         <title>Smart Energia - FAQ</title>
       </Head>
-      <Header name='' />
-      <h1>Perguntas Frequentes</h1>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-
-      <TextField id="standard-basic" label="Pergunta" sx={{width:740}} variant="standard" />
-      <TextField id="standard-basic" label="Resposta" sx={{width:740}} variant="standard" />
-      <br />
-      <BasicButton  title='Enviar' />
-
-      <section className='CommonQuestionsSection' >
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-      </section>
-    </FaqView>
+      <FaqView>
+        <Header name=''/>
+        <FaqTable />
+      </FaqView>
+    </>
   )
 }
diff --git a/src/pages/administrative/grossSavings/index.tsx b/src/pages/administrative/grossSavings/index.tsx
new file mode 100644
index 0000000..5369c0d
--- /dev/null
+++ b/src/pages/administrative/grossSavings/index.tsx
@@ -0,0 +1,39 @@
+import Button from '@material-ui/core/Button'
+import Head from 'next/head'
+import React from 'react'
+
+import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'
+import Chart from '../../../components/graph/Chart'
+import { SingleBar } from '../../../components/graph/SingleBar'
+import Header from '../../../components/header/Header'
+import PageTitle from '../../../components/pageTitle/PageTitle'
+import { dataEconomiaBruta } from '../../../services/economiaBruta'
+import { GrossSavingsView } from '../../../styles/layouts/economy/grossSavings/GrossSavings'
+
+export default function GrossSavings() {
+  return (
+    <>
+    <Head>
+      <title>Smart Energia - Economia Acumulada</title>
+    </Head>
+    <AdministrativeHeader />
+    <GrossSavingsView>
+      <PageTitle title='Economia Bruta' subtitle='Economia Bruta Estimada e Acumulada anual (Valores em R$ mil)' />
+      <Button
+        variant="contained"
+        component="label"
+        style={{width: '300px', margin: '30px'}}
+      >
+        Upload de dados
+        <input
+          type="file"
+          hidden
+        />
+      </Button>
+      <section>
+        <SingleBar title='Economia Bruta' subtitle='(Valores em R$ mil)' label={dataEconomiaBruta.labels} dataset='Consolidada' dataset1='Estimada' dataProps={dataEconomiaBruta.data} barLabel year/>
+      </section>
+    </GrossSavingsView>
+    </>
+  )
+}
diff --git a/src/pages/administrative/index.tsx b/src/pages/administrative/index.tsx
index 90fbab8..5bb3c07 100644
--- a/src/pages/administrative/index.tsx
+++ b/src/pages/administrative/index.tsx
@@ -1,7 +1,94 @@
-import React from 'react'
+import FormControl from '@mui/material/FormControl';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import InputLabel from '@mui/material/InputLabel';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import TextField from '@mui/material/TextField';
+import Head from 'next/head';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/router'
+import React, { useState } from 'react'
+import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
+
+import LoginButton from '../../components/buttons/loginButton/LoginButton';
+import { LoginContainer, LoginView } from  '../../styles/layouts/login/LoginView';
+
+export default function Home() {
+  const [state, setstate]=useState(false);
+
+  const [values, setValues] = React.useState({
+    password: '',
+    showPassword: false,
+  });
+
+  const router = useRouter()
+  const rota = router.pathname
+
+  const handleChange = (prop) => (event) => {
+    setValues({ ...values, [prop]: event.target.value });
+  };
+
+  const handleClickShowPassword = () => {
+    setValues({
+      ...values,
+      showPassword: !values.showPassword,
+    });
+  };
+
+  const handleMouseDownPassword = (event) => {
+    event.preventDefault();
+  };
 
-export default function index() {
   return (
-    <div>index</div>
+    <LoginView auth={rota} >
+      <Head>
+        <title>Smart Energia</title>
+      </Head>
+
+      <div>
+      <Image src='/assets/marca1.svg' width={520} height={350} />
+      </div>
+
+      <LoginContainer>
+        <h1>Bem-Vindo</h1>
+        <h2>Estratégias Inteligentes em<br /> Gestão de Energia</h2>
+
+        <TextField id="outlined-basic" sx={{ m: 1, width: '90%' }}label="Login" variant="outlined" />
+        <FormControl sx={{ m: 1, width: '90%' }} variant="outlined">
+          <InputLabel htmlFor="outlined-adornment-password">Password</InputLabel>
+          <OutlinedInput
+            id="outlined-adornment-password"
+            type={values.showPassword ? 'text' : 'password'}
+            value={values.password}
+            onChange={handleChange('password')}
+            endAdornment={
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="toggle password visibility"
+                  onClick={handleClickShowPassword}
+                  onMouseDown={handleMouseDownPassword}
+                  edge="end"
+                >
+                  {values.showPassword ? <AiOutlineEye /> : <AiOutlineEyeInvisible />}
+                </IconButton>
+              </InputAdornment>
+            }
+            label="Password"
+          />
+        </FormControl>
+        <Link href='verifyEmail' >Esqueceu a senha ?</Link>
+
+        <LoginButton title='ENTRAR' link />
+
+        <fieldset className="line">
+          <legend className="text">Ou</legend>
+        </fieldset>
+
+        <p><a href='tel:+55(41) 3012-5900' >+55(41) 3012-5900</a><br/><a href='https://www.energiasmart.com.br' target="_blank" rel="noreferrer" >www.energiasmart.com.br</a></p>
+
+      </LoginContainer>
+
+    </LoginView>
   )
 }
diff --git a/src/pages/administrative/industryInfo/index.tsx b/src/pages/administrative/industryInfo/index.tsx
new file mode 100644
index 0000000..8ca5b64
--- /dev/null
+++ b/src/pages/administrative/industryInfo/index.tsx
@@ -0,0 +1,37 @@
+import Button from '@material-ui/core/Button'
+import Head from 'next/head'
+import React from 'react'
+
+import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'
+import BasicButton from '../../../components/buttons/basicButton/BasicButton'
+import Header from '../../../components/header/Header'
+import PageTitle from '../../../components/pageTitle/PageTitle'
+import { IndustryInfoView } from '../../../styles/layouts/industryInfo/IndustryInfoView'
+
+export default function industryInfo() {
+  return (
+    <>
+      <Head>
+        <title>Smart Energia - Info de Setor</title>
+      </Head>
+      <AdministrativeHeader />
+      <IndustryInfoView>
+        <div className='title'>
+          <PageTitle title='Info Setorial' subtitle='info setorial' />
+        </div>
+        <Button
+          variant="contained"
+          component="label"
+          style={{width: '300px', margin: '30px'}}
+        >
+          Upload de dados
+          <input
+            type="file"
+            hidden
+          />
+        </Button>
+        <button>Baixar PDF</button>
+      </IndustryInfoView>
+    </>
+  )
+}
diff --git a/src/pages/administrative/news/index.tsx b/src/pages/administrative/news/index.tsx
new file mode 100644
index 0000000..a471f72
--- /dev/null
+++ b/src/pages/administrative/news/index.tsx
@@ -0,0 +1,58 @@
+import Head from 'next/head';
+import Link from 'next/link'
+import React from 'react'
+
+import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader';
+import Banner from '../../../components/banner/Banner'
+import BasicButton from '../../../components/buttons/basicButton/BasicButton';
+import Header from '../../../components/header/Header'
+import { Button, NewsView } from '../../../styles/layouts/news/NewsView'
+
+export default function index() {
+  return (
+    <>
+      <Head>
+        <title>Smart Energia - Noticias</title>
+      </Head>
+      <AdministrativeHeader />
+      <NewsView>
+        <Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/news.png' />
+
+        <section>
+          <h2>19 Abril 2022</h2>
+          <strong>ANEEL APROVA REAJUSTE TARIFÁRIO ANUAL DA ENERGISA SERGIPE DE 16,46 % PARA O CONSUMIDOR RESIDENCIAL</strong>
+          <br />
+          <br />
+          <p>A Agência Nacional de Energia Elétrica (ANEEL) aprovou, nesta terça-feira (19/04) o reajuste tarifário anual da Energisa Sergipe – Distribuidora de Energia S.A (ESE).
+            As novas tarifas da empresa, que atende cerca de e 825 mil unidades consumidoras no Sergipe, entram em vigor nesta sexta, 22/04, com reajuste de 16,46 % para
+            o consumidor residencial. <br />
+            Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
+          <Button>
+          <fieldset>
+          <legend> <BasicButton  title='Ver Mais...' onClick={() => console.log()}/></legend>
+          </fieldset>
+          </Button>
+
+            <h2>19 Abril 2022</h2>
+          <strong>NEEL APROVA REAJUSTE MÉDIO DE 20,36% NA TARIFA DE ENERGIA NO RN</strong>
+          <br />
+          <br />
+          <p>A Agência Nacional de Energia Elétrica (ANEEL) aprovou, nesta terça-feira (19/04) o reajuste tarifário anual da Energisa Sergipe – Distribuidora de Energia S.A (ESE).
+            As novas tarifas da empresa, que atende cerca de e 825 mil unidades consumidoras no Sergipe, entram em vigor nesta sexta, 22/04, com reajuste de 16,46 % para
+            o consumidor residencial. <br />
+            Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
+          <Button>
+          <fieldset>
+          <legend> <BasicButton  title='Ver Mais...' onClick={() => console.log()}/></legend>
+          </fieldset>
+          </Button>
+
+        </section>
+
+        <a href='https://www.energiasmart.com.br/noticias/'
+          target={"_blank"}
+          rel={"noreferrer"}><BasicButton  title='Noticias Atualizadas' onClick={() => console.log()}/></a>
+      </NewsView>
+    </>
+  )
+}
diff --git a/src/pages/administrative/notification/index.tsx b/src/pages/administrative/notification/index.tsx
deleted file mode 100644
index 7962c9f..0000000
--- a/src/pages/administrative/notification/index.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import Head from 'next/head'
-import React from 'react'
-import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard'
-import Header from '../../../components/header/Header'
-import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView'
-import BasicButton from '../../../components/buttons/basicButton/BasicButton';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-import TextField from '@mui/material/TextField';
-
-
-
-
-
-
-export default function commonQuestions() {
-
-  const [month, setMonth] = React.useState('');
-  const [unidade, setUnidade] = React.useState('');
-
-  const handleChangeMonth = (event: SelectChangeEvent) => {
-    setMonth(event.target.value);
-  };
-  const handleChangeUnidade = (event: SelectChangeEvent) => {
-    setUnidade(event.target.value);
-  };
-
-
-
-  return (
-    <FaqView>
-      <Head>
-        <title>Smart Energia - FAQ</title>
-      </Head>
-      <Header name='' />
-      <h1>Perguntas Frequentes</h1>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-
-      <TextField id="standard-basic" label="Mensagem" sx={{width:700}} variant="standard" />
-
-      <br />
-
-      <FormControl size='small' fullWidth sx={{ width: 135}} >
-
-        <InputLabel id="demo-simple-select-label">Clientes</InputLabel>
-        <Select
-          labelId="demo-simple-select-label"
-          id="demo-simple-select"
-          value={month}
-          label="Month"
-          onChange={handleChangeMonth}
-        >
-          <MenuItem value={15}>Cliente 1</MenuItem>
-          <MenuItem value={20}>Cliente 2</MenuItem>
-          <MenuItem value={30}>Cliente 3</MenuItem>
-          <MenuItem value={30}>Cliente 4</MenuItem>
-          <MenuItem value={30}>Cliente 5</MenuItem>
-          <MenuItem value={30}>Cliente 6</MenuItem>
-          <MenuItem value={30}>Cliente 7</MenuItem>
-
-        </Select>
-      </FormControl>
-<br />
-      <BasicButton  title='Enviar' />
-
-      <section className='CommonQuestionsSection' >
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-        <CommonQuestionsCard />
-        <hr />
-      </section>
-    </FaqView>
-  )
-}
diff --git a/src/pages/administrative/notifications/index.tsx b/src/pages/administrative/notifications/index.tsx
new file mode 100644
index 0000000..f585fa2
--- /dev/null
+++ b/src/pages/administrative/notifications/index.tsx
@@ -0,0 +1,79 @@
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import TextField from '@mui/material/TextField';
+import Head from 'next/head'
+import React from 'react'
+
+import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader'
+import BasicButton from '../../../components/buttons/basicButton/BasicButton';
+import CommonQuestionsCard from '../../../components/faqQuestionsCard/FaqQuestionsCard'
+import Header from '../../../components/header/Header'
+import { FaqView } from '../../../styles/layouts/commonQuestions/FaqView'
+
+export default function commonQuestions() {
+
+  const [month, setMonth] = React.useState('');
+  const [unidade, setUnidade] = React.useState('');
+
+  const handleChangeMonth = (event: SelectChangeEvent) => {
+    setMonth(event.target.value);
+  };
+  const handleChangeUnidade = (event: SelectChangeEvent) => {
+    setUnidade(event.target.value);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>Smart Energia - FAQ</title>
+      </Head>
+      <AdministrativeHeader />
+      <FaqView>
+        <h1>Perguntas Frequentes</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+
+        <TextField id="standard-basic" label="Mensagem" sx={{width:700}} variant="standard" />
+
+        <br />
+
+        <FormControl size='small' fullWidth sx={{ width: 135}} >
+
+          <InputLabel id="demo-simple-select-label">Clientes</InputLabel>
+          <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            value={month}
+            label="Month"
+            onChange={handleChangeMonth}
+          >
+            <MenuItem value={15}>Cliente 1</MenuItem>
+            <MenuItem value={20}>Cliente 2</MenuItem>
+            <MenuItem value={30}>Cliente 3</MenuItem>
+            <MenuItem value={30}>Cliente 4</MenuItem>
+            <MenuItem value={30}>Cliente 5</MenuItem>
+            <MenuItem value={30}>Cliente 6</MenuItem>
+            <MenuItem value={30}>Cliente 7</MenuItem>
+
+          </Select>
+        </FormControl>
+  <br />
+        <BasicButton title='Enviar' onClick={() => console.log()}/>
+
+        <section className='CommonQuestionsSection' >
+          <CommonQuestionsCard />
+          <hr />
+          <CommonQuestionsCard />
+          <hr />
+          <CommonQuestionsCard />
+          <hr />
+          <CommonQuestionsCard />
+          <hr />
+          <CommonQuestionsCard />
+          <hr />
+        </section>
+      </FaqView>
+    </>
+  )
+}
diff --git a/src/pages/administrative/pld/index.tsx b/src/pages/administrative/pld/index.tsx
new file mode 100644
index 0000000..82c071b
--- /dev/null
+++ b/src/pages/administrative/pld/index.tsx
@@ -0,0 +1,231 @@
+import MenuItem from '@mui/material/MenuItem';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import TextField from '@mui/material/TextField';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useRouter } from 'next/router'
+import React, { useEffect, useState } from 'react'
+
+import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader';
+import BasicButton from '../../../components/buttons/basicButton/BasicButton';
+import Chart from '../../../components/graph/Chart';
+import { LineBarChart } from '../../../components/graph/LineBarChart';
+import LineChart from '../../../components/graph/LineChart';
+import Header from '../../../components/header/Header'
+import PageTitle from '../../../components/pageTitle/PageTitle';
+import { EconomiaAcumulada } from '../../../services/economiaAcumulada';
+import { EvolucaoPld } from '../../../services/evolucaoPld';
+import { GoBack, NewTableLine, PldGraphView, PldTableView } from '../../../styles/layouts/pld/PldView'
+import RenderIf from '../../../utils/renderIf'
+
+export default function index() {
+  const [page, setPage] = useState<string>('table')
+  const [age, setAge] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setAge(event.target.value);
+  };
+
+  useEffect(() => {
+    console.log(page)
+  }, [page])
+
+  return (
+    <main style={{
+      width: '100%',
+    }}>
+      <Head>
+        <title>Smart Energia - PLD</title>
+      </Head>
+      <AdministrativeHeader />
+      <RenderIf isTrue={page==='table'? true : false}>
+        <Link href='/dashboard' >{'< voltar para visão geral'}</Link>
+        <PageTitle title='Tabela de consumo Pld' subtitle=''/>
+        <NewTableLine>
+          <article>
+            <TextField label="Mês" variant="standard" style={{width: '15%'}}/>
+            <TextField label="Nordeste" variant="standard" style={{width: '15%'}}/>
+            <TextField label="Nort" variant="standard" style={{width: '15%'}}/>
+            <TextField label="Sudeste" variant="standard" style={{width: '15%'}}/>
+            <TextField label="Sul" variant="standard" style={{width: '15%'}}/>
+          </article>
+          <BasicButton title='Adicionar' onClick={() => console.log()}/>
+        </NewTableLine>
+        <PldTableView>
+          <table className="tg">
+            <thead>
+              <tr>
+                <th className='tg-8oo6'>Mês</th>
+                <th className='tg-8oo6'>Nordeste</th>
+                <th className='tg-8oo6'>Norte</th>
+                <th className='tg-8oo6'>Sudeste</th>
+                <th className='tg-8oo6'>Sul</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td className='tg-gceh'>2101</td>
+                <td className='tg-uulg red'>xxxx</td>
+                <td className='tg-gceh dullRed'>xxxx</td>
+                <td className='tg-gceh dullGreen'>xxxx</td>
+                <td className='tg-uulg red'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>2102</td>
+                <td className='tg-0tzy dullGreen'>xxxx</td>
+                <td className='tg-hq65 dullRed'>xxxx</td>
+                <td className='tg-hq65 dullGreen'>xxxx</td>
+                <td className='tg-0tzy dullGreen'>xxxx</td>
+              </tr>
+              <tr>
+                <td className="tg-gceh">2103</td>
+                <td className="tg-uulg red">xxxx</td>
+                <td className="tg-gceh dullGreen">xxxx</td>
+                <td className="tg-gceh dullRed">xxxx</td>
+                <td className="tg-gceh dullGreen">xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>2104</td>
+                <td className='tg-0tzy dullGreen'>xxxx</td>
+                <td className='tg-hq65 dullRed'>xxxx</td>
+                <td className='tg-hq65 dullRed'>xxxx</td>
+                <td className='tg-0tzy dullGreen'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>2105</td>
+                <td className='tg-uulg red'>xxxx</td>
+                <td className='tg-gceh dullGreen'>xxxx</td>
+                <td className='tg-gceh dullGreen'>xxxx</td>
+                <td className='tg-uulg red'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>2106</td>
+                <td className='tg-0tzy dullGreen'>xxxx</td>
+                <td className='tg-hq65 dullRed'>xxxx</td>
+                <td className='tg-hq65 red'>xxxx</td>
+                <td className='tg-0tzy green'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>2107</td>
+                <td className='tg-uulg red'>xxxx</td>
+                <td className='tg-gceh green'>xxxx</td>
+                <td className='tg-gceh dullRed'>xxxx</td>
+                <td className='tg-uulg red'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>2108</td>
+                <td className='tg-0tzy dullGreen'>xxxx</td>
+                <td className='tg-hq65 dullGreen'>xxxx</td>
+                <td className='tg-hq65 green'>xxxx</td>
+                <td className='tg-0tzy dullRed'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>2109</td>
+                <td className='tg-uulg red'>xxxx</td>
+                <td className='tg-gceh green'>xxxx</td>
+                <td className='tg-gceh dullRed'>xxxx</td>
+                <td className='tg-uulg red'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>2110</td>
+                <td className='tg-0tzy red'>xxxx</td>
+                <td className='tg-hq65 green'>xxxx</td>
+                <td className='tg-hq65 red'>xxxx</td>
+                <td className='tg-0tzy red'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>2111</td>
+                <td className='tg-uulg red'>xxxx</td>
+                <td className='tg-gceh dullGreen'>xxxx</td>
+                <td className='tg-gceh green'>xxxx</td>
+                <td className='tg-uulg red'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-hq65'>2112</td>
+                <td className='tg-0tzy green'>xxxx</td>
+                <td className='tg-hq65 dullGreen'>xxxx</td>
+                <td className='tg-hq65 dullRed'>xxxx</td>
+                <td className='tg-0tzy dullGreen'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>2021</td>
+                <td className='tg-uulg red'>xxxx</td>
+                <td className='tg-gceh dullRed'>xxxx</td>
+                <td className='tg-gceh dullGreen'>xxxx</td>
+                <td className='tg-uulg red'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>Mín</td>
+                <td className='tg-uulg'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-uulg'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>Max</td>
+                <td className='tg-uulg'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-uulg'>xxxx</td>
+              </tr>
+              <tr>
+                <td className='tg-gceh'>Desv Pad</td>
+                <td className='tg-uulg'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-gceh'>xxxx</td>
+                <td className='tg-uulg'>xxxx</td>
+              </tr>
+            </tbody>
+          </table>
+          <section>
+            <article onClick={() => setPage('perMouth')}>
+              <p>Valores Diarios</p>
+            </article>
+            <article onClick={() => setPage('perDate')}>
+              <p>Valores Horários</p>
+            </article>
+          </section>
+        </PldTableView>
+      </RenderIf>
+
+      <RenderIf isTrue={page==='perMouth'? true : false}>
+        <GoBack onClick={() => setPage('table')}>{'< voltar para tabela pld'}</GoBack>
+        <PageTitle title='Consumo por mês' subtitle=''/>
+        <PldGraphView>
+          <section className='toolsbar'>
+            <div className='select'>
+              <Select
+                value={age}
+                onChange={handleChange}
+                displayEmpty
+                sx={{
+                  width: '100%'
+                }}
+              >
+                <MenuItem value={0}>Filial 3</MenuItem>
+                <MenuItem value={10}>Filial 3</MenuItem>
+                <MenuItem value={20}>Twenty</MenuItem>
+                <MenuItem value={30}>Thirty</MenuItem>
+              </Select>
+            </div>
+            <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
+            <BasicButton title='Download (csv)' onClick={() => console.log()}/>
+          </section>
+          <LineBarChart data1={EvolucaoPld.data} data3={EvolucaoPld.data1} dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'} label={EvolucaoPld.label} title='Evolução PLD (R$/MWh)' subtitle='' />
+        </PldGraphView>
+      </RenderIf>
+
+      <RenderIf isTrue={page==='perDate'? true : false}>
+        <GoBack onClick={() => setPage('table')}>{'< voltar para tabela pld'}</GoBack>
+        <PldGraphView>
+          <PageTitle title='Consumo por dia' subtitle=''/>
+          <section className='toolsbar'>
+            <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2021-09-19"/>
+            <BasicButton title='Download (csv)' onClick={() => console.log()}/>
+          </section>
+          <LineChart data1={EconomiaAcumulada.data3} data2={EconomiaAcumulada.data4} data3={EconomiaAcumulada.data5} data4={EconomiaAcumulada.data6} dataset1='NORDESTE' dataset2='NORTE' dataset3='SUDESTE' dataset4='SUL' title='PLD - 19/09/21' subtitle='' label={EconomiaAcumulada.label1} />
+        </PldGraphView>
+      </RenderIf>
+    </main>
+  )
+}
diff --git a/src/pages/administrative/resumoOperacao/index.tsx b/src/pages/administrative/resumoOperacao/index.tsx
new file mode 100644
index 0000000..23a0258
--- /dev/null
+++ b/src/pages/administrative/resumoOperacao/index.tsx
@@ -0,0 +1,161 @@
+import TextField from '@material-ui/core/TextField';
+import Box from '@mui/material/Box';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import Head from 'next/head';
+import React, { useEffect } from 'react';
+// import Teste from '../files/teste.csv';
+import { CSVDownload, CSVLink } from "react-csv";
+
+import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader';
+import BasicButton from '../../../components/buttons/basicButton/BasicButton';
+import Header from '../../../components/header/Header';
+import PageTitle from '../../../components/pageTitle/PageTitle';
+import Sidebar from '../../../components/sidebar/Sidebar';
+// import { dados } from '../services/DadosTabelaResumoOperacao';
+import data from '../../../services/dados.json'
+import { NewTableLine, Pagination, TableView } from '../../../styles/layouts/ResumoOperacao/ResumoOperacaoView';
+
+export default function index() {
+  const csvData = [
+    // ["firstname", "lastname", "email"],
+    // ["Ahmed", "Tomi", "ah@smthing.co.com"],
+    // ["Raed", "Labes", "rl@smthing.co.com"],
+    // ["Yezzi", "Min l3b", "ymin@cocococo.com"],
+
+      [ "value", "unidade1", "name", "Unidade-1",  "operacao", "Compra", "montante", "130,00", "contraparte", "cOPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ],
+      [ "value", "unidade2", "name", "Unidade-2",  "operacao", "Compra", "montante", "20,00", "contraparte",  "EMEWE I5", "preco", "234,67", "valorNF", "38.257,15"],
+      [ "value", "unidade3", "name", "Unidade-3",  "operacao", "Compra", "montante", "30,00", "contraparte",  "EMEWE I5", "preco", "234,67", "valorNF", "38.257,15" ],
+      [ "value", "unidade4", "name", "Unidade-4",  "operacao", "Compra", "montante", "40,00", "contraparte",  "COPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ],
+      [ "value", "unidade5", "name", "Unidade-5",  "operacao", "Compra", "montante", "500,00","contraparte", "COPEL COM I5", "preco", "234,67", "valorNF", "38.257,15" ],
+      [ "value", "unidade6", "name", "Unidade-6", "operacao", "Compra", "montante", "300,00", "contraparte", "COPEL COM I5", "preco","234,67", "valorNF", "965,95" ]
+  ];
+
+  const [month, setMonth] = React.useState('');
+  const [unidade, setUnidade] = React.useState('');
+
+  const handleChangeMonth = (event: SelectChangeEvent) => {
+    setMonth(event.target.value);
+  };
+  const handleChangeUnidade = (event: SelectChangeEvent) => {
+    setUnidade(event.target.value);
+  };
+
+  return(
+    <>
+      <AdministrativeHeader />
+      <TableView>
+        <Head>
+          <title>Smart Energia - Resumo de Operação</title>
+        </Head>
+        <PageTitle title='Resumo de Operaçoes' subtitle='Operações detalhadas' />
+
+        <h3>Seletor Mês</h3>
+        <div className='select'>
+          <FormControl fullWidth  >
+            <InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
+            <Select
+              labelId="demo-simple-select-label"
+              id="demo-simple-select"
+              value={unidade}
+              label="Unidade"
+              onChange={handleChangeUnidade}
+            >
+              <MenuItem key={1} value={''}></MenuItem>
+              {
+                data.unidades.map((value) => {
+                  return <MenuItem key={1} value={value.value}>{value.name}</MenuItem>
+                })
+              }
+            </Select>
+          </FormControl>
+
+          <FormControl fullWidth sx={{ml:1}} >
+            <InputLabel>Mês</InputLabel>
+            <Select
+              value={month}
+              label="Month"
+              onChange={handleChangeMonth}
+            >
+              <MenuItem value={15}>Janeiro</MenuItem>
+              <MenuItem value={20}>Fevereiro</MenuItem>
+              <MenuItem value={30}>Março</MenuItem>
+              <MenuItem value={30}>Abril</MenuItem>
+              <MenuItem value={30}>Março</MenuItem>
+              <MenuItem value={30}>Maio</MenuItem>
+              <MenuItem value={30}>Junho</MenuItem>
+              <MenuItem value={30}>Julho</MenuItem>
+              <MenuItem value={30}>Agosto</MenuItem>
+              <MenuItem value={30}>Setembro</MenuItem>
+              <MenuItem value={30}>Outubro</MenuItem>
+              <MenuItem value={30}>Novembro</MenuItem>
+              <MenuItem value={30}>Dezembro</MenuItem>
+            </Select>
+          </FormControl>
+        </div>
+        <NewTableLine>
+          <article>
+            <TextField label="Unidade" variant="standard" style={{width: '150px'}}/>
+            <TextField label="Operação" variant="standard" style={{width: '150px'}}/>
+            <TextField label="Montante (MWh)" variant="standard" style={{width: '150px'}}/>
+            <TextField label="Contraparte" variant="standard" style={{width: '150px'}}/>
+            <TextField label="Preço(R$/MWh)" variant="standard" style={{width: '150px'}}/>
+            <TextField label="ValorNF/Crédito(R$)" variant="standard" style={{width: '150px'}}/>
+          </article>
+          <BasicButton title='Adicionar' onClick={() => console.log()}/>
+        </NewTableLine>
+        <table className="tg">
+          <thead>
+            <tr>
+              <th className='tg-8oo6'>Unidade </th>
+              <th className='tg-8oo6'>Operação</th>
+              <th className='tg-8oo6'>Montante (MWh)</th>
+              <th className='tg-8oo6'>Contraparte</th>
+              <th className='tg-8oo6'>Preço(R$/MWh)</th>
+              <th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
+            </tr>
+          </thead>
+          <tbody>
+            {
+              data.unidades.filter((value, index)=> value.value.includes(unidade)).map((value, index) => {
+                if (index%2===0) {
+                  return <tr key={index}>
+                      <td key={index} className='tg-gceh'>{value.name}</td>
+                      <td key={index} className='tg-uulg'>{value.operacao}</td>
+                      <td key={index} className='tg-gceh'>{value.montante}</td>
+                      <td key={index} className='tg-gceh'>{value.contraparte}</td>
+                      <td key={index} className='tg-uulg'>{value.preco}</td>
+                      <td key={index} className='tg-gceh'>{value.valorNF}</td>
+                    </tr>
+                } else {
+                  return <tr key={index}>
+                  <td key={index} className='tg-hq65'>{value.name}</td>
+                  <td key={index} className='tg-0tzy'>{value.operacao}</td>
+                  <td key={index} className='tg-hq65'>{value.montante}</td>
+                  <td key={index} className='tg-hq65'>{value.contraparte}</td>
+                  <td key={index} className='tg-0tzy'>{value.preco}</td>
+                  <td key={index} className='tg-hq65'>{value.valorNF}</td>
+                </tr>
+                }
+              })
+            }
+          </tbody>
+        </table>
+        <div className='btn'>
+
+          {/* <a href={Teste} download="dowload.csv"> */}
+            {/* <BasicButton title='Baixar PDF'  /> */}
+          {/* </a> */}
+
+          <CSVLink data={csvData} filename="Arquivo_Teste_Smart_Energia">
+            <BasicButton title='Baixar CSV' onClick={() => console.log()}/>
+          </CSVLink>
+
+        </div>
+
+      </TableView>
+    </>
+  )
+}
diff --git a/src/pages/administrative/telemetria/index.tsx b/src/pages/administrative/telemetria/index.tsx
new file mode 100644
index 0000000..f1e77c1
--- /dev/null
+++ b/src/pages/administrative/telemetria/index.tsx
@@ -0,0 +1,195 @@
+import Button from '@material-ui/core/Button';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useRouter } from 'next/router'
+import { start } from 'nprogress';
+import React from 'react';
+
+import AdministrativeHeader from '../../../components/administrativeHeader/AdministrativeHeader';
+import Banner from '../../../components/banner/Banner';
+import GradientButton from '../../../components/buttons/gradientButton/GradientButton'
+import LineChart from '../../../components/graph/LineChart';
+import Header from '../../../components/header/Header';
+import { FatorPotencia } from '../../../services/fatorPotencia';
+import { Buttons, TelemetriaView, Uploads } from '../../../styles/layouts/Telemetria/TelemetriaView';
+import RenderIf from '../../../utils/renderIf';
+
+export default function index() {
+  const [unity, setUnity] = React.useState('');
+  const [startDate, setStartDate] = React.useState('');
+  const [endDate, setEndDate] = React.useState('');
+  const [discretization, setDiscretization] = React.useState('');
+
+  const [showChart, setShowChart] = React.useState(false);
+
+  const handleChange = (event: SelectChangeEvent) => {
+    // setAge(event.target.value);
+  };
+
+  return(
+    <>
+      <AdministrativeHeader />
+      <TelemetriaView>
+        <Head>
+          <title>Smart Energia - Telemetria</title>
+        </Head>
+        <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
+        SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
+        sendo que as quantidades aqui informadas são de responsabilidade do agente de medição
+        - Distribuidora.' imgSource='/assets/graphical.png' />
+
+        <section>
+          <div className='select'>
+            <p className='title' >Unidade</p>
+            <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
+              <InputLabel id="demo-select-small">Unidade</InputLabel>
+              <Select
+                labelId="demo-select-small"
+                id="demo-select-small"
+                value={unity}
+                label="Unidade"
+                onChange={value => setUnity(value.target.value)}
+                fullWidth
+              >
+                <MenuItem value="">
+                  <em>None</em>
+                </MenuItem>
+                <MenuItem value="">07/09/2021</MenuItem>
+                <MenuItem value={10}>Filial 3</MenuItem>
+                <MenuItem value={20}>Twenty</MenuItem>
+                <MenuItem value={30}>Thirty</MenuItem>
+              </Select>
+            </FormControl>
+          </div>
+
+          <div className='select'>
+            <p className='title' >Data inicial</p>
+            <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
+              <InputLabel id="demo-select-small">Data Inicial</InputLabel>
+              <Select
+                labelId="demo-select-small"
+                id="demo-select-small"
+                value={startDate}
+                label="Unidade"
+                onChange={value => setStartDate(value.target.value)}
+                fullWidth
+              >
+                <MenuItem value="">
+                  <em>None</em>
+                </MenuItem>
+                <MenuItem value="">07/09/2021</MenuItem>
+                <MenuItem value={10}>Filial 3</MenuItem>
+                <MenuItem value={20}>Twenty</MenuItem>
+                <MenuItem value={30}>Thirty</MenuItem>
+              </Select>
+            </FormControl>
+          </div>
+
+          <div className='select'>
+            <p className='title' >Data Final</p>
+            <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
+              <InputLabel id="demo-select-small">Data Final</InputLabel>
+              <Select
+                labelId="demo-select-small"
+                id="demo-select-small"
+                value={endDate}
+                label="Unidade"
+                onChange={value => setEndDate(value.target.value)}
+                fullWidth
+              >
+                <MenuItem value="">
+                  <em>None</em>
+                </MenuItem>
+                <MenuItem value="">07/09/2021</MenuItem>
+                <MenuItem value={10}>Filial 3</MenuItem>
+                <MenuItem value={20}>Twenty</MenuItem>
+                <MenuItem value={30}>Thirty</MenuItem>
+              </Select>
+            </FormControl>
+          </div>
+
+          <div className='select'>
+            <p className='title' >Discretização</p>
+            <FormControl sx={{ m: 1, minWidth: 120, width: 200 }} size="small">
+              <InputLabel id="demo-select-small">Discretização</InputLabel>
+              <Select
+                labelId="demo-select-small"
+                id="demo-select-small"
+                value={discretization}
+                label="Unidade"
+                onChange={value => setDiscretization(value.target.value)}
+                fullWidth
+              >
+                <MenuItem value="">
+                  <em>None</em>
+                </MenuItem>
+                <MenuItem value="">07/09/2021</MenuItem>
+                <MenuItem value={10}>Filial 3</MenuItem>
+                <MenuItem value={20}>Twenty</MenuItem>
+                <MenuItem value={30}>Thirty</MenuItem>
+              </Select>
+            </FormControl>
+          </div>
+        </section>
+
+        <RenderIf isTrue={showChart}>
+          <LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
+        </RenderIf>
+
+        <Buttons>
+          <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange link />
+          <GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple />
+          <GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} green />
+        </Buttons>
+        <Uploads>
+        <Button
+            variant="contained"
+            component="label"
+            style={{width: '200px', margin: '30px'}}
+          >
+            Upload de dados
+            <input
+              type="file"
+              hidden
+            />
+          </Button>
+          <Button
+            variant="contained"
+            component="label"
+            style={{width: '200px', margin: '30px'}}
+          >
+            Upload de dados
+            <input
+              type="file"
+              hidden
+            />
+          </Button>
+          <Button
+            variant="contained"
+            component="label"
+            style={{width: '200px', margin: '30px'}}
+          >
+            Upload de dados
+            <input
+              type="file"
+              hidden
+            />
+          </Button>
+        </Uploads>
+        <p className='paragraph'>
+          <i>
+            Fonte: Dados coletados do Sistema de Coleta de Dados
+            de Energia - SCDE da Câmara de Comercialização <br/>
+            Energia Elétrica – CCEE, sendo que as quantidades aqui
+            informadas são de responsabilidade <br/>do agente de
+            medição - Distribuidora.
+          </i>
+        </p>
+      </TelemetriaView>
+    </>
+  )
+}
diff --git a/src/pages/areaTest.tsx b/src/pages/areaTest.tsx
index 626b721..dcd051c 100644
--- a/src/pages/areaTest.tsx
+++ b/src/pages/areaTest.tsx
@@ -1,23 +1,24 @@
-import React from 'react'
+import Box from '@mui/material/Box';
+import FilledInput from '@mui/material/FilledInput';
+import FormControl from '@mui/material/FormControl';
+import FormHelperText from '@mui/material/FormHelperText';
+import IconButton from '@mui/material/IconButton';
+import Input from '@mui/material/Input';
+import InputAdornment from '@mui/material/InputAdornment';
+import InputLabel from '@mui/material/InputLabel';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import TextField from '@mui/material/TextField';
 import Image from 'next/image'
+import React from 'react'
+
 import BasicButton from '../components/buttons/basicButton/BasicButton'
 import GradientButton from '../components/buttons/gradientButton/GradientButton'
 import Graph from '../components/graph/Chart'
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import Input from '@mui/material/Input';
-import FilledInput from '@mui/material/FilledInput';
-import OutlinedInput from '@mui/material/OutlinedInput';
-import InputLabel from '@mui/material/InputLabel';
-import InputAdornment from '@mui/material/InputAdornment';
-import FormHelperText from '@mui/material/FormHelperText';
-import FormControl from '@mui/material/FormControl';
-import TextField from '@mui/material/TextField';
 import LineChart from '../components/graph/LineChart'
+
 // import Footer from '../components/footer/footer'
 
 export default function areaTest() {
-
   const [values, setValues] = React.useState({
     amount: '',
     password: '',
diff --git a/src/pages/news.tsx b/src/pages/news.tsx
index 8452cb2..6039ad3 100644
--- a/src/pages/news.tsx
+++ b/src/pages/news.tsx
@@ -1,10 +1,11 @@
-import React from 'react'
-import Banner from '../components/banner/Banner'
-import Header from '../components/header/Header'
-import BasicButton from '../components/buttons/basicButton/BasicButton';
-import { NewsView, Button } from '../styles/layouts/news/NewsView'
 import Head from 'next/head';
 import Link from 'next/link'
+import React from 'react'
+
+import Banner from '../components/banner/Banner'
+import BasicButton from '../components/buttons/basicButton/BasicButton';
+import Header from '../components/header/Header'
+import { Button, NewsView } from '../styles/layouts/news/NewsView'
 
 export default function aboutUs() {
   return (
@@ -26,7 +27,7 @@ export default function aboutUs() {
           Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
         <Button>
         <fieldset>
-        <legend> <BasicButton  title='Ver Mais...' /></legend>
+        <legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
         </fieldset>
         </Button>
 
@@ -40,15 +41,15 @@ export default function aboutUs() {
           Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
         <Button>
         <fieldset>
-        <legend> <BasicButton  title='Ver Mais...' /></legend>
+        <legend> <BasicButton title='Ver Mais...' onClick={() => console.log()}/></legend>
         </fieldset>
         </Button>
 
       </section>
 
       <a href='https://www.energiasmart.com.br/noticias/'
-     target={"_blank"}
-     rel={"noreferrer"}><BasicButton  title='Noticias Atualizadas' /></a>
+      target={"_blank"}
+      rel={"noreferrer"}><BasicButton title='Noticias Atualizadas' onClick={() => console.log()}/></a>
     </NewsView>
   )
 }
diff --git a/src/pages/pld/index.tsx b/src/pages/pld/index.tsx
index 5cf2ccc..5db0cd5 100644
--- a/src/pages/pld/index.tsx
+++ b/src/pages/pld/index.tsx
@@ -1,22 +1,20 @@
-import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-
-import Header from '../../components/header/Header'
 import MenuItem from '@mui/material/MenuItem';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useRouter } from 'next/router'
+import React, { useEffect, useState } from 'react'
 
-import { GoBack, PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView'
-
-import RenderIf from '../../utils/renderIf'
 import BasicButton from '../../components/buttons/basicButton/BasicButton';
 import Chart from '../../components/graph/Chart';
-import PageTitle from '../../components/pageTitle/PageTitle';
-import Link from 'next/link';
-import LineChart from '../../components/graph/LineChart';
 import { LineBarChart } from '../../components/graph/LineBarChart';
+import LineChart from '../../components/graph/LineChart';
+import Header from '../../components/header/Header'
+import PageTitle from '../../components/pageTitle/PageTitle';
 import { EconomiaAcumulada } from '../../services/economiaAcumulada';
 import { EvolucaoPld } from '../../services/evolucaoPld';
-import Head from 'next/head';
+import { GoBack, PldGraphView, PldTableView } from '../../styles/layouts/pld/PldView'
+import RenderIf from '../../utils/renderIf'
 
 export default function region() {
   const router = useRouter()
@@ -216,7 +214,7 @@ export default function region() {
               </Select>
             </div>
             <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09"/>
-            <BasicButton title='Download (csv)' />
+            <BasicButton title='Download (csv)' onClick={() => console.log()}/>
           </section>
           <LineBarChart data1={EvolucaoPld.data} data3={EvolucaoPld.data1} dataset1={'Economia'} dataset2={'barra1'} dataset3={'2021'} label={EvolucaoPld.label} title='Evolução PLD (R$/MWh)' subtitle='' />
         </PldGraphView>
diff --git a/src/pages/resumoOperacao.tsx b/src/pages/resumoOperacao.tsx
index 4c61655..bda8741 100644
--- a/src/pages/resumoOperacao.tsx
+++ b/src/pages/resumoOperacao.tsx
@@ -1,22 +1,20 @@
+import Box from '@mui/material/Box';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import Head from 'next/head';
 import React, { useEffect } from 'react';
+// import Teste from '../files/teste.csv';
+import { CSVDownload, CSVLink } from "react-csv";
+
+import BasicButton from '../components/buttons/basicButton/BasicButton';
 import Header from '../components/header/Header';
 import PageTitle from '../components/pageTitle/PageTitle';
-import BasicButton from '../components/buttons/basicButton/BasicButton';
 import Sidebar from '../components/sidebar/Sidebar';
 // import { dados } from '../services/DadosTabelaResumoOperacao';
 import data from '../services/dados.json'
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-import Box from '@mui/material/Box';
-// import Teste from '../files/teste.csv';
-import { CSVLink, CSVDownload } from "react-csv";
-
-
-
 import { Pagination, TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
-import Head from 'next/head';
 
 export default function ResumoOperacao() {
   const csvData = [
@@ -55,7 +53,6 @@ export default function ResumoOperacao() {
     console.log(data.unidades.filter((value, index)=> value.value.includes(unidade)))
   }, [month, unidade])
 
-
   return(
     <TableView>
       <Head>
@@ -65,52 +62,49 @@ export default function ResumoOperacao() {
       <PageTitle title='Resumo de Operaçoes' subtitle='Operações detalhadas' />
 
       <h3>Seletor Mês</h3>
-    <div className='select'>
+      <div className='select'>
+        <FormControl fullWidth  >
+          <InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
+          <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            value={unidade}
+            label="Unidade"
+            onChange={handleChangeUnidade}
+          >
+            <MenuItem key={1} value={''}></MenuItem>
+            {
+              data.unidades.map((value) => {
+                return <MenuItem key={1} value={value.value}>{value.name}</MenuItem>
+              })
+            }
+          </Select>
+        </FormControl>
 
-      <FormControl fullWidth  >
-        <InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
-        <Select
-          labelId="demo-simple-select-label"
-          id="demo-simple-select"
-          value={unidade}
-          label="Unidade"
-          onChange={handleChangeUnidade}
-        >
-          <MenuItem key={1} value={''}></MenuItem>
-          {
-            data.unidades.map((value) => {
-              return <MenuItem key={1} value={value.value}>{value.name}</MenuItem>
-            })
-          }
-        </Select>
-      </FormControl>
-
-
-      <FormControl fullWidth sx={{ml:1}} >
-
-        <InputLabel id="demo-simple-select-label">Mês</InputLabel>
-        <Select
-          labelId="demo-simple-select-label"
-          id="demo-simple-select"
-          value={month}
-          label="Month"
-          onChange={handleChangeMonth}
-        >
-          <MenuItem value={15}>Janeiro</MenuItem>
-          <MenuItem value={20}>Fevereiro</MenuItem>
-          <MenuItem value={30}>Março</MenuItem>
-          <MenuItem value={30}>Abril</MenuItem>
-          <MenuItem value={30}>Março</MenuItem>
-          <MenuItem value={30}>Maio</MenuItem>
-          <MenuItem value={30}>Junho</MenuItem>
-          <MenuItem value={30}>Julho</MenuItem>
-          <MenuItem value={30}>Agosto</MenuItem>
-          <MenuItem value={30}>Setembro</MenuItem>
-          <MenuItem value={30}>Outubro</MenuItem>
-          <MenuItem value={30}>Novembro</MenuItem>
-          <MenuItem value={30}>Dezembro</MenuItem>
-        </Select>
-      </FormControl>
+        <FormControl fullWidth sx={{ml:1}} >
+          <InputLabel id="demo-simple-select-label">Mês</InputLabel>
+          <Select
+            labelId="demo-simple-select-label"
+            id="demo-simple-select"
+            value={month}
+            label="Month"
+            onChange={handleChangeMonth}
+          >
+            <MenuItem value={15}>Janeiro</MenuItem>
+            <MenuItem value={20}>Fevereiro</MenuItem>
+            <MenuItem value={30}>Março</MenuItem>
+            <MenuItem value={30}>Abril</MenuItem>
+            <MenuItem value={30}>Março</MenuItem>
+            <MenuItem value={30}>Maio</MenuItem>
+            <MenuItem value={30}>Junho</MenuItem>
+            <MenuItem value={30}>Julho</MenuItem>
+            <MenuItem value={30}>Agosto</MenuItem>
+            <MenuItem value={30}>Setembro</MenuItem>
+            <MenuItem value={30}>Outubro</MenuItem>
+            <MenuItem value={30}>Novembro</MenuItem>
+            <MenuItem value={30}>Dezembro</MenuItem>
+          </Select>
+        </FormControl>
       </div>
       <table className="tg">
         <thead>
@@ -147,22 +141,20 @@ export default function ResumoOperacao() {
               }
             })
           }
-
         </tbody>
       </table>
       <div className='btn'>
-
         {/* <a href={Teste} download="dowload.csv"> */}
           {/* <BasicButton title='Baixar PDF'  /> */}
         {/* </a> */}
 
         <CSVLink data={csvData} filename="Arquivo_Teste_Smart_Energia">
 
-        <BasicButton title='Baixar CSV'  />
+        <BasicButton title='Baixar CSV' onClick={function (): void {
+          throw new Error('Function not implemented.');
+        }}/>
         </CSVLink>
-
       </div>
-
     </TableView>
   )
 }
diff --git a/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts b/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
index 94a909a..c059741 100644
--- a/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
+++ b/src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
@@ -1,6 +1,5 @@
 import styled from 'styled-components'
 
-
 export const TableView = styled.div`
   display: flex;
   padding: 2.5rem;
@@ -21,21 +20,16 @@ export const TableView = styled.div`
   .select{
     display: flex;
 
-
     margin-bottom: 25px;
 
     width: 20rem;
   }
-  .titleUnidade{
-
-  }
 
   .tg{
     border-collapse:collapse;
     border-spacing:0;
     font-family:Poppins;
     width: 100%;
-
   }
 
   .tg td{
@@ -49,7 +43,6 @@ export const TableView = styled.div`
     word-break:normal;
   }
 
-
   .tg th{
     border-color:#DDDFE1;
     border-style:solid;
@@ -134,8 +127,27 @@ export const Pagination = styled.div`
   .numberColor{
     color: #ABAFB3;
   }
+`
 
+export const NewTableLine = styled.section`
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
 
+  flex-direction: column;
 
-`;
+  margin: 0 0 15px 0;
 
+  width: 100%;
+  article {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    flex-direction: row;
+
+    width: 100%;
+
+    margin: 0 0 10px 0;
+  }
+`
diff --git a/src/styles/layouts/Telemetria/TelemetriaView.ts b/src/styles/layouts/Telemetria/TelemetriaView.ts
index f380774..b7ddc00 100644
--- a/src/styles/layouts/Telemetria/TelemetriaView.ts
+++ b/src/styles/layouts/Telemetria/TelemetriaView.ts
@@ -1,12 +1,10 @@
-
 import styled from 'styled-components';
 
-
 export const TelemetriaView = styled.main`
   padding: 20px ;
   width: 100%;
 
-  .title{
+  .title {
     color: black;
     font-weight: 600;
     font-size: 14px;
@@ -14,7 +12,7 @@ export const TelemetriaView = styled.main`
     margin: 0 0 0 10px;
   }
 
-  span{
+  span {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 500;
@@ -23,14 +21,14 @@ export const TelemetriaView = styled.main`
     color: #667085;
   }
 
-  .titleMenuItem{
+  .titleMenuItem {
     color: #667085;
     font-family: Inter;
     font-size: 14px;
     font-weight: 600;
   }
 
-  .paragraph{
+  .paragraph {
     color: #22d1f0;
     text-align: center;
     margin-top: 60px;
@@ -55,14 +53,27 @@ export const TelemetriaView = styled.main`
 
 export const Buttons = styled.div`
   display: flex;
-  min-width: 14rem;
-  cursor: pointer;
-  margin-top: 5rem;
-  padding-left: 100px;
-  padding-right: 100px;
   justify-content: space-evenly;
   flex-direction: row;
+
+  min-width: 14rem;
   height: 6rem;
+
+  margin-top: 5rem;
+
+  padding-left: 100px;
+  padding-right: 100px;
+
+`;
+
+export const Uploads = styled.div`
+  display: flex;
+  justify-content: space-evenly;
+
+  flex-direction: row;
+
+  padding-left: 100px;
+  padding-right: 100px;
 `;
 
 
diff --git a/src/styles/layouts/clients/ClientsView.ts b/src/styles/layouts/clients/ClientsView.ts
index 1faa23b..21ab268 100644
--- a/src/styles/layouts/clients/ClientsView.ts
+++ b/src/styles/layouts/clients/ClientsView.ts
@@ -4,6 +4,8 @@ export const ClientsView = styled.main`
   display: flex;
   flex-direction: column;
 
+  width: 100%;
+
   section {
     display: flex;
 
@@ -18,15 +20,37 @@ export const ClientsView = styled.main`
     }
 
     :last-child {
-      width: 50rem;
-      height: 30rem;
+      width: 100%;
     }
   }
 `
 
 export const ClientsModalView = styled.main`
-  display: grid;
+  display: flex;
+  flex-direction: column;
 
-  grid-template-columns: 100% 100%;
-  grid-template-rows: 100% 100% 100% 100%;
+  width: 70%;
+  article {
+    display: grid;
+
+    align-self: flex-start;
+    width: 100%;
+
+    grid-template-columns: 80% 80%;
+    grid-template-rows: 50% 50%;
+
+    margin-top: 70px
+  }
+`
+
+export const ConfirmModalView = styled.main`
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  margin: 0;
+  padding: 0;
+
+  width: 100%;
+  height: 100%;
 `
diff --git a/src/styles/layouts/industryInfo/IndustryInfoView.ts b/src/styles/layouts/industryInfo/IndustryInfoView.ts
index c57df2b..e3bedb9 100644
--- a/src/styles/layouts/industryInfo/IndustryInfoView.ts
+++ b/src/styles/layouts/industryInfo/IndustryInfoView.ts
@@ -12,7 +12,7 @@ export const IndustryInfoView = styled.main`
 button{
   height:60px;
   width: 22%;
-  margin-top: 17rem;
+  margin-top: 12rem;
   cursor: pointer;
   background: #254F7F;
   border-radius: 8px;
diff --git a/src/styles/layouts/news/NewsView.ts b/src/styles/layouts/news/NewsView.ts
index 74b35c5..992fc0b 100644
--- a/src/styles/layouts/news/NewsView.ts
+++ b/src/styles/layouts/news/NewsView.ts
@@ -3,6 +3,8 @@ import styled from "styled-components";
 export const NewsView = styled.main`
   width: 100%;
 
+  margin-bottom: 100px;
+
   p {
     font-family: 'Poppins';
     font-style: normal;
@@ -22,20 +24,20 @@ export const NewsView = styled.main`
       margin-bottom: 8px;
     }
     button{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 10px;
-    width: 140px;
-    height: 45px;
-    cursor: pointer;
-    background: #254F7F;
-    border-radius: 8px;
-    border-style: none;
-    font-family: 'Poppins';
-    font-size: 90%;
-    color: #FFFFFF;
-   }
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 10px;
+      width: 140px;
+      height: 45px;
+      cursor: pointer;
+      background: #254F7F;
+      border-radius: 8px;
+      border-style: none;
+      font-family: 'Poppins';
+      font-size: 90%;
+      color: #FFFFFF;
+    }
   }
 
   section {
@@ -54,9 +56,8 @@ export const NewsView = styled.main`
         flex-direction: column;
       }
     }
-
-
-}`;
+  }
+`;
 
 export const Button = styled.div`
   display: flex;
diff --git a/src/styles/layouts/pld/PldView.ts b/src/styles/layouts/pld/PldView.ts
index 8997fdc..3b7def4 100644
--- a/src/styles/layouts/pld/PldView.ts
+++ b/src/styles/layouts/pld/PldView.ts
@@ -203,5 +203,28 @@ export const PldGraphView = styled.main`
 `
 
 export const GoBack = styled.label`
-  cursor: pointer
+  cursor: pointer;
+`
+
+export const NewTableLine = styled.section`
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+
+  flex-direction: column;
+
+  margin: 50px 0px 0px 0;
+
+  width: 100%;
+  article {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    flex-direction: row;
+
+    width: 100%;
+
+    margin: 0 0 10px 0;
+  }
 `