diff --git a/static/js/home.js b/static/js/home.js
new file mode 100644
index 0000000..d72440e
--- /dev/null
+++ b/static/js/home.js
@@ -0,0 +1,11 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Configurar clique nos itens da lista de pagamentos
+    document.querySelectorAll('.list-group-item[onclick*="carregarDadosPagamento"]').forEach(item => {
+        item.addEventListener('click', function(e) {
+            const pagamentoId = this.getAttribute('data-pagamento-id');
+            if (pagamentoId) {
+                carregarDadosPagamento(pagamentoId);
+            }
+        });
+    });
+}); 
\ No newline at end of file
diff --git a/templates/home.html b/templates/home.html
index 5e3bd77..083afa7 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -82,14 +82,9 @@
                     {% for militante in ultimos_militantes %}
                     <div class="list-group-item" style="cursor: pointer" 
                          data-bs-toggle="modal"
-                         data-bs-target="#militanteModal"
+                         data-bs-target="#modalEditarMilitante"
                          data-militante-id="{{ militante.id }}"
-                         data-militante-nome="{{ militante.nome }}"
-                         data-militante-cpf="{{ militante.cpf }}"
-                         data-militante-email="{{ militante.email }}"
-                         data-militante-telefone="{{ militante.telefone }}"
-                         data-militante-endereco="{{ militante.endereco }}"
-                         data-militante-filiado="{{ militante.filiado }}">
+                         data-militante-nome="{{ militante.nome }}">
                         <div class="militante-info">
                             <h6 class="mb-1">{{ militante.nome }}</h6>
                             <small>{{ militante.email }}</small>
@@ -153,107 +148,6 @@
     </div>
 </div>
 
-<!-- Modal de Detalhes do Militante -->
-<div class="modal fade" id="militanteModal" tabindex="-1">
-    <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">
-                    <i class="fas fa-user me-2"></i>Detalhes do Militante
-                </h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
-            </div>
-            <div class="modal-body">
-                <div class="mb-3">
-                    <label class="fw-bold">Nome:</label>
-                    <p id="militanteNome" class="mb-2"></p>
-                </div>
-                <div class="mb-3">
-                    <label class="fw-bold">CPF:</label>
-                    <p id="militanteCPF" class="mb-2"></p>
-                </div>
-                <div class="mb-3">
-                    <label class="fw-bold">Email:</label>
-                    <p id="militanteEmail" class="mb-2"></p>
-                </div>
-                <div class="mb-3">
-                    <label class="fw-bold">Telefone:</label>
-                    <p id="militanteTelefone" class="mb-2"></p>
-                </div>
-                <div class="mb-3">
-                    <label class="fw-bold">Endereço:</label>
-                    <p id="militanteEndereco" class="mb-2"></p>
-                </div>
-                <div class="mb-3">
-                    <label class="fw-bold">Status:</label>
-                    <p id="militanteFiliado" class="mb-2"></p>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalEditarMilitante" style="background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important;">
-                    <i class="fas fa-edit me-2"></i>Editar
-                </button>
-                <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
-                    <i class="fas fa-trash me-2"></i>Excluir
-                </button>
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Modal de Edição -->
-<div class="modal fade" id="modalEditarMilitante" tabindex="-1">
-    <div class="modal-dialog modal-lg modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">
-                    <i class="fas fa-user-edit me-2"></i>Editar Militante
-                </h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-            </div>
-            <div class="modal-body">
-                <form id="formEditarMilitante" method="post">
-                    <div class="row">
-                        <div class="col-md-6 mb-3">
-                            <label for="editNome" class="form-label">Nome:</label>
-                            <input type="text" class="form-control" id="editNome" name="nome" required>
-                        </div>
-                        <div class="col-md-6 mb-3">
-                            <label for="editCpf" class="form-label">CPF:</label>
-                            <input type="text" class="form-control" id="editCpf" name="cpf" required>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-md-6 mb-3">
-                            <label for="editEmail" class="form-label">Email:</label>
-                            <input type="email" class="form-control" id="editEmail" name="email" required>
-                        </div>
-                        <div class="col-md-6 mb-3">
-                            <label for="editTelefone" class="form-label">Telefone:</label>
-                            <input type="text" class="form-control" id="editTelefone" name="telefone">
-                        </div>
-                    </div>
-                    <div class="mb-3">
-                        <label for="editEndereco" class="form-label">Endereço:</label>
-                        <input type="text" class="form-control" id="editEndereco" name="endereco">
-                    </div>
-                    <div class="mb-3 form-check">
-                        <input type="checkbox" class="form-check-input" id="editFiliado" name="filiado">
-                        <label class="form-check-label" for="editFiliado">Filiado</label>
-                    </div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
-                <button type="submit" form="formEditarMilitante" class="btn btn-success">
-                    <i class="fas fa-save me-2"></i>Salvar
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
-
 <!-- Modal de Edição de Pagamento -->
 <div class="modal fade" id="modalEditarPagamento" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
@@ -330,6 +224,10 @@
     </div>
 </div>
 
+<!-- Incluir os modais globais de militantes -->
+{% include 'modals/militante_editar.html' %}
+{% include 'modals/militante_excluir.html' %}
+
 <style>
 .welcome-header {
     background: linear-gradient(to right, var(--background-color), rgba(232, 0, 12, 0.05));
@@ -427,6 +325,76 @@
     background-color: var(--bs-primary-dark) !important;
     border-color: var(--bs-primary-dark) !important;
 }
+
+/* Estilo para os itens da lista de militantes */
+.list-group-item {
+    transition: all 0.3s ease;
+    border-left: 3px solid transparent;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+}
+
+.list-group-item:hover {
+    background-color: rgba(232, 0, 12, 0.05);
+    border-left-color: var(--primary-color);
+    transform: translateX(5px);
+}
+
+.list-group-item .militante-info {
+    flex: 1;
+}
+
+.list-group-item .fa-chevron-right {
+    color: var(--primary-color);
+    opacity: 0.5;
+    transition: opacity 0.3s ease;
+}
+
+.list-group-item:hover .fa-chevron-right {
+    opacity: 1;
+}
+
+/* Garantir que o botão de salvar mantenha a cor correta */
+.btn-success,
+.modal-footer .btn-success {
+    background-color: var(--bs-success) !important;
+    border-color: var(--bs-success) !important;
+    color: white !important;
+}
+
+.btn-success:hover,
+.btn-success:focus,
+.btn-success:active,
+.modal-footer .btn-success:hover,
+.modal-footer .btn-success:focus,
+.modal-footer .btn-success:active {
+    background-color: var(--bs-success-dark) !important;
+    border-color: var(--bs-success-dark) !important;
+    color: white !important;
+    opacity: 0.9;
+}
+
+/* Garantir que o botão de cancelar mantenha a cor correta */
+.btn-secondary,
+.modal-footer .btn-secondary {
+    background-color: var(--bs-secondary) !important;
+    border-color: var(--bs-secondary) !important;
+    color: white !important;
+}
+
+.btn-secondary:hover,
+.btn-secondary:focus,
+.btn-secondary:active,
+.modal-footer .btn-secondary:hover,
+.modal-footer .btn-secondary:focus,
+.modal-footer .btn-secondary:active {
+    background-color: var(--bs-secondary-dark) !important;
+    border-color: var(--bs-secondary-dark) !important;
+    color: white !important;
+    opacity: 0.9;
+}
 </style>
 
 {% block extra_js %}
@@ -639,5 +607,6 @@ document.addEventListener('DOMContentLoaded', function() {
 
 {% block scripts %}
 <script src="{{ url_for('static', filename='js/militantes.js') }}"></script>
+<script src="{{ url_for('static', filename='js/home.js') }}"></script>
 {% endblock %}
 {% endblock %} 
\ No newline at end of file