diff --git a/src/assets/css/styles.scss b/src/assets/css/styles.scss
index e4b081510..65ad41ce2 100644
--- a/src/assets/css/styles.scss
+++ b/src/assets/css/styles.scss
@@ -120,18 +120,18 @@ body {
 
   .p-paginator {
     background-color: #ffffff !important;
-    border: 0px;
-    padding: 2.5em !important;
+    border: 0;
+    padding: 2.5em;
   }
 
   .p-paginator-next {
-    height: 4em !important;
-    min-width: 4em !important;
+    height: 4em;
+    min-width: 4em;
   }
 
   .p-paginator-prev {
-    height: 4em !important;
-    min-width: 4em !important;
+    height: 4em;
+    min-width: 4em;
   }
 
   .p-paginator-page {
diff --git a/src/componentes/escolas/MembrosDaAssociacao/components/CargosDaComposicaoList.js b/src/componentes/escolas/MembrosDaAssociacao/components/CargosDaComposicaoList.js
new file mode 100644
index 000000000..30791929b
--- /dev/null
+++ b/src/componentes/escolas/MembrosDaAssociacao/components/CargosDaComposicaoList.js
@@ -0,0 +1,91 @@
+import React from "react";
+import {useGetCargosDaComposicao} from "../hooks/useGetCargosDaComposicao";
+import {DataTable} from "primereact/datatable";
+import {Column} from "primereact/column";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faEdit} from "@fortawesome/free-solid-svg-icons";
+import ReactTooltip from "react-tooltip";
+
+export const CargosDaComposicaoList = () => {
+    const {isLoading, data} = useGetCargosDaComposicao()
+
+    const acoesTemplate = (rowData) => {
+        return (
+            <div>
+                <button className="btn-editar-membro">
+                    <span data-tip="Editar membro" data-html={true}>
+                        <FontAwesomeIcon
+                            style={{fontSize: '20px', marginRight: "0", color: "#00585E"}}
+                            icon={faEdit}
+                        />
+                        <ReactTooltip/>
+                    </span>
+                </button>
+            </div>
+        )
+    };
+
+    return(
+        <>
+            {!isLoading && data && data.diretoria_executiva &&
+                <div className="pt-0 pr-2 pl-2 pb-2">
+                    <p><strong>Diretoria executiva</strong></p>
+                    <DataTable
+                        value={data.diretoria_executiva}
+                        className='tabela-lista-usuarios'
+                    >
+                        <Column
+                            field="cargo_associacao_label"
+                            header="Cargo"
+                        />
+                        <Column
+                            field="ocupante_do_cargo.nome"
+                            header="Nome"
+                        />
+                        <Column
+                            field="ocupante_do_cargo.representacao_label"
+                            header="Nome"
+                        />
+                        <Column
+                            field="acao"
+                            header="Ação"
+                            style={{width:'100px'}}
+                            body={acoesTemplate}
+                        />
+                    </DataTable>
+                </div>
+            }
+
+            {data && data.conselho_fiscal &&
+
+                <div className="p-2 mt-3">
+                    <p><strong>Conselho Fiscal</strong></p>
+                    <DataTable
+                        value={data.conselho_fiscal}
+                        className='tabela-lista-usuarios'
+                    >
+                        <Column
+                            field="cargo_associacao_label"
+                            header="Cargo"
+                        />
+                        <Column
+                            field="ocupante_do_cargo.nome"
+                            header="Nome"
+                        />
+                        <Column
+                            field="ocupante_do_cargo.representacao_label"
+                            header="Nome"
+                        />
+                        <Column
+                            field="acao"
+                            header="Ação"
+                            style={{width:'100px'}}
+                            body={acoesTemplate}
+                        />
+                    </DataTable>
+                </div>
+            }
+
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/componentes/escolas/MembrosDaAssociacao/components/MandatoInfo.js b/src/componentes/escolas/MembrosDaAssociacao/components/MandatoInfo.js
new file mode 100644
index 000000000..0011f32ed
--- /dev/null
+++ b/src/componentes/escolas/MembrosDaAssociacao/components/MandatoInfo.js
@@ -0,0 +1,23 @@
+import React from "react";
+import {useGetMandatoVigente} from "../hooks/useGetMandatoVigente";
+import useDataTemplate from "../../../../hooks/Globais/useDataTemplate";
+
+export const MandatoInfo = () => {
+    const {isLoading, data} = useGetMandatoVigente()
+    const dataTemplate = useDataTemplate()
+    return (
+        <>
+            {!isLoading && data && data.uuid &&
+                <div className="d-flex bd-highlight mt-2">
+                    <div className="p-2 pt-3 flex-grow bd-highlight">
+                        <p className='mb-0 fonte-16'><strong>Mandato</strong></p>
+                        <p className='mb-0'>
+                            <span><strong>Período atual: </strong></span>{dataTemplate(null, null, data.data_inicial)} até {dataTemplate(null, null, data.data_final)}
+                        </p>
+                    </div>
+                </div>
+            }
+
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/componentes/escolas/MembrosDaAssociacao/components/Paginacao.js b/src/componentes/escolas/MembrosDaAssociacao/components/Paginacao.js
new file mode 100644
index 000000000..b3cb73d9b
--- /dev/null
+++ b/src/componentes/escolas/MembrosDaAssociacao/components/Paginacao.js
@@ -0,0 +1,31 @@
+import React, {useContext} from "react";
+import {useGetMandatoVigente} from "../hooks/useGetMandatoVigente";
+import {MembrosDaAssociacaoContext} from "../context/MembrosDaAssociacao";
+import {Paginator} from "primereact/paginator";
+
+export const Paginacao = () => {
+    const {isLoading, count} = useGetMandatoVigente()
+    const {setCurrentPage, firstPage, setFirstPage} = useContext(MembrosDaAssociacaoContext)
+
+    const onPageChange = (event) => {
+        setCurrentPage(event.page + 1)
+        setFirstPage(event.first)
+    };
+
+    return(
+        <>
+            {!isLoading &&
+                <Paginator
+                    first={firstPage}
+                    //rows={1}
+                    rows={10}
+                    totalRecords={count}
+                    template="PrevPageLink NextPageLink"
+                    onPageChange={onPageChange}
+                    className='paginacao-composicoes'
+                    style={{padding: "0 0 15px 15px"}}
+                />
+            }
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/componentes/escolas/MembrosDaAssociacao/context/MembrosDaAssociacao.js b/src/componentes/escolas/MembrosDaAssociacao/context/MembrosDaAssociacao.js
new file mode 100644
index 000000000..930658f90
--- /dev/null
+++ b/src/componentes/escolas/MembrosDaAssociacao/context/MembrosDaAssociacao.js
@@ -0,0 +1,34 @@
+import React, { createContext, useMemo, useState } from 'react';
+export const MembrosDaAssociacaoContext = createContext({
+    composicaoUuid: '',
+    setComposicaoUuid: () => {},
+    currentPage: 1,
+    setCurrentPage: () => {},
+    firstPage: 0,
+    setFirstPage: () => {},
+})
+
+export const MembrosDaAssociacaoProvider = ({children}) => {
+
+    const [composicaoUuid, setComposicaoUuid] = useState('');
+    const [firstPage, setFirstPage] = useState(0);
+    const [currentPage, setCurrentPage] = useState(1);
+
+    const contextValue = useMemo(() => {
+        return{
+            composicaoUuid,
+            setComposicaoUuid,
+            firstPage,
+            setFirstPage,
+            currentPage,
+            setCurrentPage,
+        }
+    }, [composicaoUuid, firstPage, currentPage])
+
+    return (
+        <MembrosDaAssociacaoContext.Provider value={contextValue}>
+            {children}
+        </MembrosDaAssociacaoContext.Provider>
+    )
+
+}
\ No newline at end of file
diff --git a/src/componentes/escolas/MembrosDaAssociacao/hooks/useGetCargosDaComposicao.js b/src/componentes/escolas/MembrosDaAssociacao/hooks/useGetCargosDaComposicao.js
new file mode 100644
index 000000000..fdcd5ae14
--- /dev/null
+++ b/src/componentes/escolas/MembrosDaAssociacao/hooks/useGetCargosDaComposicao.js
@@ -0,0 +1,23 @@
+import {getCargosDaComposicao} from "../../../../services/Mandatos.service";
+import {useQuery} from "@tanstack/react-query";
+import {useContext} from "react";
+import {MembrosDaAssociacaoContext} from "../context/MembrosDaAssociacao";
+
+export const useGetCargosDaComposicao = () => {
+
+    const {composicaoUuid} = useContext(MembrosDaAssociacaoContext)
+
+    const { isLoading, isError, data, error, refetch } = useQuery(
+        ['cargos-da-composicao', composicaoUuid],
+        ()=> getCargosDaComposicao(composicaoUuid),
+        {
+            keepPreviousData: true,
+            staleTime: 5000, // 5 segundos
+            refetchOnWindowFocus: true, // Caso saia da aba e voltar ele refaz a requisição
+        }
+    );
+
+    return {isLoading, isError, data, error, refetch}
+
+
+}
\ No newline at end of file
diff --git a/src/componentes/escolas/MembrosDaAssociacao/hooks/useGetMandatoVigente.js b/src/componentes/escolas/MembrosDaAssociacao/hooks/useGetMandatoVigente.js
new file mode 100644
index 000000000..5a763427b
--- /dev/null
+++ b/src/componentes/escolas/MembrosDaAssociacao/hooks/useGetMandatoVigente.js
@@ -0,0 +1,24 @@
+import {getMandatoVigente} from "../../../../services/Mandatos.service";
+import {useQuery} from "@tanstack/react-query";
+import {useMemo} from "react";
+import {visoesService} from "../../../../services/visoes.service";
+
+export const useGetMandatoVigente = () => {
+
+    const associacao_uuid = visoesService.getItemUsuarioLogado('associacao_selecionada.uuid')
+
+    const { isLoading, isError, data = {uuid: null, composicoes: [] }, error } = useQuery(
+        ['mandato-vigente', associacao_uuid],
+        ()=> getMandatoVigente(associacao_uuid),
+        {
+            keepPreviousData: true,
+            staleTime: 5000, // 5 segundos
+            refetchOnWindowFocus: true, // Caso saia da aba e voltar ele refaz a requisição
+        }
+    );
+
+    const count = useMemo(() => data.composicoes.length, [data]);
+
+    return {isLoading, isError, data, error, count}
+
+}
\ No newline at end of file
diff --git a/src/componentes/escolas/MembrosDaAssociacao/index.js b/src/componentes/escolas/MembrosDaAssociacao/index.js
new file mode 100644
index 000000000..88846efc1
--- /dev/null
+++ b/src/componentes/escolas/MembrosDaAssociacao/index.js
@@ -0,0 +1,33 @@
+import React from "react";
+import {UrlsMenuInterno} from "../Associacao/UrlsMenuInterno";
+import {MenuInterno} from "../../Globais/MenuInterno";
+import {PaginaMandatoVigente} from "./pages/PaginaMandatoVigente";
+import {MandatosAnteriores} from "./pages/MandatosAnteriores";
+import {ExportaDadosDaAsssociacao} from "../Associacao/ExportaDadosAssociacao";
+import {MembrosDaAssociacaoProvider} from "./context/MembrosDaAssociacao";
+import "./membros-da-associacao.scss"
+
+export const MembrosDaAssociacao = () => {
+    return (
+        <MembrosDaAssociacaoProvider>
+            <MenuInterno
+                caminhos_menu_interno={UrlsMenuInterno}
+            />
+            <ExportaDadosDaAsssociacao/>
+            <nav>
+                <div className="nav nav-tabs" id="nav-tab" role="tablist">
+                    <button className="nav-link active" id="nav-mandato-vigente-tab" data-toggle="tab" data-target="#nav-mandato-vigente" type="button" role="tab" aria-controls="nav-mandato-vigente" aria-selected="true">Mandato vigente</button>
+                    <button className="nav-link" id="nav-mandatos-anteriores-tab" data-toggle="tab" data-target="#nav-mandatos-anteriores" type="button" role="tab" aria-controls="nav-mandatos-anteriores" aria-selected="false">Mandatos anteriores</button>
+                </div>
+            </nav>
+            <div className="tab-content" id="nav-tabContent">
+                <div className="tab-pane fade show active" id="nav-mandato-vigente" role="tabpanel" aria-labelledby="nav-mandato-vigente-tab">
+                    <PaginaMandatoVigente/>
+                </div>
+                <div className="tab-pane fade" id="nav-mandatos-anteriores" role="tabpanel" aria-labelledby="nav-mandatos-anteriores-tab">
+                    <MandatosAnteriores/>
+                </div>
+            </div>
+        </MembrosDaAssociacaoProvider>
+    )
+}
\ No newline at end of file
diff --git a/src/componentes/escolas/MembrosDaAssociacao/membros-da-associacao.scss b/src/componentes/escolas/MembrosDaAssociacao/membros-da-associacao.scss
new file mode 100644
index 000000000..cccf385a2
--- /dev/null
+++ b/src/componentes/escolas/MembrosDaAssociacao/membros-da-associacao.scss
@@ -0,0 +1,14 @@
+.paginacao-composicoes{
+  text-align: right !important;
+  padding: 0 10px 0 0 !important;
+}
+
+.paginacao-composicoes .p-paginator-prev, .paginacao-composicoes .p-paginator-next{
+  height: 3em !important;
+  min-width: 3em !important;
+}
+
+.paginacao-composicoes .p-paginator-element{
+  margin: 5px !important;
+  background-color: #DADADA !important;
+}
diff --git a/src/componentes/escolas/MembrosDaAssociacao/pages/MandatosAnteriores.js b/src/componentes/escolas/MembrosDaAssociacao/pages/MandatosAnteriores.js
new file mode 100644
index 000000000..ab4180196
--- /dev/null
+++ b/src/componentes/escolas/MembrosDaAssociacao/pages/MandatosAnteriores.js
@@ -0,0 +1,8 @@
+import React from "react";
+
+export const MandatosAnteriores = () => {
+    return (
+        <h2>Mandatos anteriores</h2>
+    )
+
+}
\ No newline at end of file
diff --git a/src/componentes/escolas/MembrosDaAssociacao/pages/PaginaMandatoVigente.js b/src/componentes/escolas/MembrosDaAssociacao/pages/PaginaMandatoVigente.js
new file mode 100644
index 000000000..7c8cb12bf
--- /dev/null
+++ b/src/componentes/escolas/MembrosDaAssociacao/pages/PaginaMandatoVigente.js
@@ -0,0 +1,48 @@
+import React, {useContext, useEffect} from "react";
+import {useGetMandatoVigente} from "../hooks/useGetMandatoVigente";
+import {MandatoInfo} from "../components/MandatoInfo";
+import Loading from "../../../../utils/Loading";
+import {CargosDaComposicaoList} from "../components/CargosDaComposicaoList";
+import {MembrosDaAssociacaoContext} from "../context/MembrosDaAssociacao";
+import {Paginacao} from "../components/Paginacao";
+
+export const PaginaMandatoVigente = () => {
+
+    const {isLoading, data, isError} = useGetMandatoVigente()
+    const {setComposicaoUuid, composicaoUuid, currentPage} = useContext(MembrosDaAssociacaoContext)
+
+    useEffect(() => {
+        let indice = currentPage-1
+        if (data && data.composicoes && data.composicoes.length > 0) {
+            let composicao_uuid = data.composicoes[indice].uuid
+            setComposicaoUuid(composicao_uuid)
+        }
+    }, [data, setComposicaoUuid, currentPage]);
+
+    if (isLoading) {
+        return (
+            <Loading
+                corGrafico="black"
+                corFonte="dark"
+                marginTop="0"
+                marginBottom="0"
+            />
+        );
+    }
+
+    if ((data && !data.uuid) || isError){
+        return (
+            <p className='mt-3'><strong>Não existe mandato vigente</strong></p>
+        )
+    }
+
+    return (
+        <>
+            <MandatoInfo/>
+            <Paginacao/>
+            {composicaoUuid &&
+                <CargosDaComposicaoList/>
+            }
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/paginas/escolas/MembrosDaAssociacao/index.js b/src/paginas/escolas/MembrosDaAssociacao/index.js
index 8794e7da5..b96a663a6 100644
--- a/src/paginas/escolas/MembrosDaAssociacao/index.js
+++ b/src/paginas/escolas/MembrosDaAssociacao/index.js
@@ -1,16 +1,31 @@
 import React from "react";
 import {PaginasContainer} from "../../PaginasContainer";
+
+// TODO Remover esse componente, nova versão abaixo
 import {MembrosDaAssociacao} from "../../../componentes/escolas/Associacao/Membros";
-import { TopoComBotoes } from "../../../componentes/escolas/Associacao/TopoComBotoes";
 
+// TODO Remover alias quando concluido
+// Nova versão com mandatos e composições
+import {MembrosDaAssociacao as NovoMembrosAssociacao} from '../../../componentes/escolas/MembrosDaAssociacao';
+
+import {TopoComBotoes} from "../../../componentes/escolas/Associacao/TopoComBotoes";
+import {visoesService} from "../../../services/visoes.service";
 
-export const MembrosDaAssociacaoPage = () =>{
+
+export const MembrosDaAssociacaoPage = () => {
     return (
         <PaginasContainer>
             <TopoComBotoes tituloPagina="Membros"/>
             <div className="page-content-inner">
-                <MembrosDaAssociacao/>
+                <>
+                    {[['access_membros_da_associacao'], ['change_membros_da_associacao']].some(visoesService.getPermissoes) ? (
+                            <NovoMembrosAssociacao/>
+                        ) :
+                        <MembrosDaAssociacao/>
+                    }
+                </>
             </div>
         </PaginasContainer>
+
     )
 };
\ No newline at end of file
diff --git a/src/rotas/index.js b/src/rotas/index.js
index c1e48af0f..2726cb2e1 100644
--- a/src/rotas/index.js
+++ b/src/rotas/index.js
@@ -16,6 +16,7 @@ import {DetalhedasPrestacoesPage} from "../paginas/escolas/DetalheDasPrestacoes"
 import {VisualizacaoDaAta} from "../componentes/escolas/GeracaoDaAta/VisualizacaoDaAta";
 import {EdicaoAta} from "../componentes/escolas/GeracaoDaAta/VisualizacaoDaAta/EdicaoAta";
 import {MembrosDaAssociacaoPage} from "../paginas/escolas/MembrosDaAssociacao";
+import {PaginaMandatoVigente} from "../componentes/escolas/MembrosDaAssociacao/pages/PaginaMandatoVigente";
 import { ValoresReprogramados } from "../componentes/Globais/ValoresReprogramados";
 import {DadosDasContasPage} from "../paginas/escolas/DadosDasContasAssociacao";
 import {EsqueciMinhaSenhaPage} from "../paginas/Login/EsqueciMinhaSenha";
@@ -92,6 +93,7 @@ import TesteDataTableAnt
 import {GestaoDeUsuariosFormPage} from "../componentes/Globais/GestaoDeUsuariosForm";
 import {Mandatos} from "../componentes/sme/Mandatos";
 import {MotivosRejeicaoEncerramentoConta} from "../componentes/sme/Parametrizacoes/Estrutura/MotivosRejeicaoEncerramentoConta";
+import {MandatosAnteriores} from "../componentes/escolas/MembrosDaAssociacao/pages/MandatosAnteriores";
 
 const routesConfig = [
     {
@@ -160,6 +162,18 @@ const routesConfig = [
         component: MembrosDaAssociacaoPage,
         permissoes: ['access_dados_associacao'],
     },
+    {
+        exact: true,
+        path: "/membros-da-associacao-mandato-vigente",
+        component: PaginaMandatoVigente,
+        permissoes: ['access_dados_associacao'],
+    },
+    {
+        exact: true,
+        path: "/membros-da-associacao-mandatos-anteriores",
+        component: MandatosAnteriores,
+        permissoes: ['access_dados_associacao'],
+    },
     {
         exact: true,
         path: "/cadastro-de-membros-da-associacao/:uuid_membro_associacao?",
diff --git a/src/services/Mandatos.service.js b/src/services/Mandatos.service.js
index e0945c679..385af01b2 100644
--- a/src/services/Mandatos.service.js
+++ b/src/services/Mandatos.service.js
@@ -34,3 +34,21 @@ export const patchMandato = async (uuidMandato, payload) => {
         authHeader,
     ))
 };
+
+export const getMandatoVigente = async (associacao_uuid, currentPage) => {
+    return (await api.get(`/api/mandatos/mandato-vigente/`,{
+        ...authHeader,
+        params: {
+            associacao_uuid: associacao_uuid,
+        }
+    })).data
+}
+
+export const getCargosDaComposicao = async (composicao_uuid) => {
+    return (await api.get(`/api/cargos-composicao/cargos-da-composicao/`,{
+        ...authHeader,
+        params: {
+            composicao_uuid: composicao_uuid,
+        }
+    })).data
+}