diff --git a/build.gradle b/build.gradle
index 2d57854..7d69af9 100644
--- a/build.gradle
+++ b/build.gradle
@@ -149,6 +149,9 @@ dependencies {
     testImplementation 'org.junit-pioneer:junit-pioneer:2.2.0'
 
 implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
+implementation 'org.springframework.boot:spring-boot-starter-security'
+implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
+implementation 'org.springframework.session:spring-session-jdbc'
 implementation 'org.flywaydb:flyway-core'
 testImplementation 'com.h2database:h2'
 testImplementation 'org.mockito:mockito-core:5.3.1'
diff --git a/src/main/java/school/hei/vola/endpoint/rest/controller/PaymentController.java b/src/main/java/school/hei/vola/endpoint/rest/controller/PaymentController.java
index 4ecb109..8faca44 100644
--- a/src/main/java/school/hei/vola/endpoint/rest/controller/PaymentController.java
+++ b/src/main/java/school/hei/vola/endpoint/rest/controller/PaymentController.java
@@ -73,10 +73,12 @@ public ResponseEntity<byte[]> exportPaymentsCsv(
       @RequestParam(required = false) @DateTimeFormat(iso = ISO.DATE) LocalDate startDate,
       @RequestParam(required = false) @DateTimeFormat(iso = ISO.DATE) LocalDate endDate) {
     adminAuthorizer.accept(adminKey);
+    var normalizedScope = (scope == null || scope.isBlank()) ? null : scope;
     var start = startDate != null ? startDate.atStartOfDay(UTC).toInstant() : Instant.EPOCH;
     var end = endDate != null ? endDate.plusDays(1).atStartOfDay(UTC).toInstant() : Instant.now();
 
-    var csv = paymentService.buildPaymentsCsv(applicationName, scope, start, end);
+    var csv = paymentService.buildPaymentsCsv(applicationName, normalizedScope, start, end);
+
     var filename = "payments_" + applicationName + "_" + currentTimeMillis() + ".csv";
 
     return ResponseEntity.ok()
diff --git a/src/main/java/school/hei/vola/endpoint/rest/controller/PaymentViewController.java b/src/main/java/school/hei/vola/endpoint/rest/controller/PaymentViewController.java
new file mode 100644
index 0000000..be7a4e4
--- /dev/null
+++ b/src/main/java/school/hei/vola/endpoint/rest/controller/PaymentViewController.java
@@ -0,0 +1,93 @@
+package school.hei.vola.endpoint.rest.controller;
+
+import static java.time.ZoneOffset.UTC;
+
+import java.time.Instant;
+import java.time.LocalDate;
+import lombok.RequiredArgsConstructor;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.data.domain.PageRequest;
+import org.springframework.data.domain.Sort;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import school.hei.vola.repository.jpa.JApplicationRepository;
+import school.hei.vola.service.PaymentService;
+
+@Controller
+@RequiredArgsConstructor
+public class PaymentViewController {
+
+  private static final int PAGE_SIZE = 15;
+
+  private final PaymentService paymentService;
+  private final JApplicationRepository jApplicationRepository;
+
+  @Value("${ADMIN_API_KEY}")
+  private String adminKey;
+
+  @GetMapping("/")
+  public String index() {
+    return "redirect:/payments";
+  }
+
+  @GetMapping("/payments")
+  public String paymentsPage(
+      @RequestParam(required = false) String applicationName,
+      @RequestParam(required = false) String scope,
+      @RequestParam(required = false) String startDate,
+      @RequestParam(required = false) String endDate,
+      @RequestParam(defaultValue = "0") int page,
+      Model model) {
+    model.addAttribute("applications", jApplicationRepository.findAll());
+
+    var effectiveApp = normalizeFilter(applicationName);
+    var effectiveScope = normalizeFilter(scope);
+    var parsedStartDate = parseDate(startDate);
+    var parsedEndDate = parseDate(endDate);
+
+    var start =
+        parsedStartDate != null ? parsedStartDate.atStartOfDay(UTC).toInstant() : Instant.EPOCH;
+    var end =
+        parsedEndDate != null
+            ? parsedEndDate.plusDays(1).atStartOfDay(UTC).toInstant()
+            : Instant.now();
+
+    var totalAmount =
+        paymentService.sumAmountForSucceeded(effectiveApp, effectiveScope, start, end);
+    var pendingCount = paymentService.countPending(effectiveApp, effectiveScope, start, end);
+    var totalCount = paymentService.countFiltered(effectiveApp, effectiveScope, start, end);
+
+    var paymentsPage =
+        paymentService.findFilteredPage(
+            effectiveApp,
+            effectiveScope,
+            start,
+            end,
+            PageRequest.of(page, PAGE_SIZE, Sort.by(Sort.Direction.DESC, "creationInstant")));
+
+    model.addAttribute("payments", paymentsPage.getContent());
+    model.addAttribute("totalCollected", String.format("%,d Ar", totalAmount));
+    model.addAttribute("pendingCount", pendingCount);
+    model.addAttribute("totalCount", totalCount);
+    model.addAttribute("currentPage", page);
+    model.addAttribute("totalPages", paymentsPage.getTotalPages());
+    model.addAttribute("pageSize", PAGE_SIZE);
+    model.addAttribute("scopes", paymentService.findDistinctScopes(effectiveApp));
+    model.addAttribute("selectedApplication", effectiveApp);
+    model.addAttribute("selectedScope", effectiveScope);
+    model.addAttribute("selectedStartDate", parsedStartDate);
+    model.addAttribute("selectedEndDate", parsedEndDate);
+    model.addAttribute("adminKey", adminKey);
+    return "payments";
+  }
+
+  private static String normalizeFilter(String value) {
+    return (value == null || value.isBlank() || "all".equals(value)) ? null : value;
+  }
+
+  private static LocalDate parseDate(String dateStr) {
+    return (dateStr == null || dateStr.isBlank()) ? null : LocalDate.parse(dateStr);
+  }
+}
diff --git a/src/main/java/school/hei/vola/endpoint/rest/security/SecurityConf.java b/src/main/java/school/hei/vola/endpoint/rest/security/SecurityConf.java
new file mode 100644
index 0000000..f443236
--- /dev/null
+++ b/src/main/java/school/hei/vola/endpoint/rest/security/SecurityConf.java
@@ -0,0 +1,62 @@
+package school.hei.vola.endpoint.rest.security;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.core.env.Environment;
+import org.springframework.security.config.annotation.web.builders.HttpSecurity;
+import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
+import org.springframework.security.core.userdetails.User;
+import org.springframework.security.core.userdetails.UserDetailsService;
+import org.springframework.security.crypto.factory.PasswordEncoderFactories;
+import org.springframework.security.crypto.password.PasswordEncoder;
+import org.springframework.security.provisioning.InMemoryUserDetailsManager;
+import org.springframework.security.web.SecurityFilterChain;
+import org.springframework.session.jdbc.config.annotation.web.http.EnableJdbcHttpSession;
+
+@Configuration
+@EnableWebSecurity
+@EnableJdbcHttpSession
+public class SecurityConf {
+
+  @Bean
+  public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
+    http.authorizeHttpRequests(
+            auth ->
+                auth.requestMatchers(
+                        "/ping",
+                        "/health/**",
+                        "/error",
+                        "/payment",
+                        "/payments/search",
+                        "/payments/export/csv",
+                        "/orange/**",
+                        "/css/**",
+                        "/js/**",
+                        "/script/**",
+                        "/style/**",
+                        "/images/**")
+                    .permitAll()
+                    .requestMatchers("/payments/**")
+                    .authenticated()
+                    .anyRequest()
+                    .denyAll())
+        .formLogin(login -> login.usernameParameter("email").defaultSuccessUrl("/payments", true))
+        .logout(logout -> logout.logoutSuccessUrl("/"))
+        .csrf(csrf -> csrf.ignoringRequestMatchers("/payment", "/payments/search", "/orange/**"));
+    return http.build();
+  }
+
+  @Bean
+  public UserDetailsService users(Environment env, PasswordEncoder passwordEncoder) {
+    return new InMemoryUserDetailsManager(
+        User.builder()
+            .username(env.getRequiredProperty("ADMIN_EMAIL"))
+            .password(passwordEncoder.encode(env.getRequiredProperty("ADMIN_PASSWORD")))
+            .build());
+  }
+
+  @Bean
+  public PasswordEncoder passwordEncoder() {
+    return PasswordEncoderFactories.createDelegatingPasswordEncoder();
+  }
+}
diff --git a/src/main/java/school/hei/vola/endpoint/rest/security/SessionConfig.java b/src/main/java/school/hei/vola/endpoint/rest/security/SessionConfig.java
new file mode 100644
index 0000000..2b63b4a
--- /dev/null
+++ b/src/main/java/school/hei/vola/endpoint/rest/security/SessionConfig.java
@@ -0,0 +1,42 @@
+package school.hei.vola.endpoint.rest.security;
+
+import jakarta.annotation.PostConstruct;
+import java.sql.SQLException;
+import javax.sql.DataSource;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.core.io.ClassPathResource;
+import org.springframework.jdbc.datasource.init.DatabasePopulatorUtils;
+import org.springframework.jdbc.datasource.init.ResourceDatabasePopulator;
+
+@Configuration
+@Slf4j
+public class SessionConfig {
+
+  private final DataSource dataSource;
+
+  public SessionConfig(DataSource dataSource) {
+    this.dataSource = dataSource;
+  }
+
+  @PostConstruct
+  public void initSessionSchema() {
+    var populator = new ResourceDatabasePopulator();
+    populator.addScript(new ClassPathResource(schemaPath()));
+    populator.setContinueOnError(true);
+    DatabasePopulatorUtils.execute(populator, dataSource);
+    log.info("Spring Session schema initialized using {}", schemaPath());
+  }
+
+  private String schemaPath() {
+    try (var conn = dataSource.getConnection()) {
+      var productName = conn.getMetaData().getDatabaseProductName();
+      if ("H2".equalsIgnoreCase(productName)) {
+        return "org/springframework/session/jdbc/schema-h2.sql";
+      }
+    } catch (SQLException e) {
+      log.warn("Could not detect database product name, falling back to PostgreSQL schema", e);
+    }
+    return "org/springframework/session/jdbc/schema-postgresql.sql";
+  }
+}
diff --git a/src/main/resources/static/script/filters.js b/src/main/resources/static/script/filters.js
new file mode 100644
index 0000000..a1c5f8b
--- /dev/null
+++ b/src/main/resources/static/script/filters.js
@@ -0,0 +1,66 @@
+(function () {
+  const scopeInput = document.getElementById('scope');
+  const scopeDropdown = document.getElementById('scope-dropdown');
+  const scopeOptions = [...scopeDropdown.querySelectorAll('.scope-option')];
+  const scopeClear = document.getElementById('scope-clear');
+
+  function setScopeClearVisible() {
+    scopeClear.classList.toggle('hidden', !scopeInput.value);
+  }
+
+  function filterAndShowScope() {
+    const query = scopeInput.value.toLowerCase();
+    const hasVisible = scopeOptions.some(function (opt) {
+      const matches = opt.textContent.toLowerCase().includes(query);
+      opt.classList.toggle('hidden', !matches);
+      return matches;
+    });
+    scopeDropdown.classList.toggle('hidden', !hasVisible);
+  }
+
+  scopeInput.addEventListener('focus', filterAndShowScope);
+  scopeDropdown.addEventListener('mousedown', function (e) { e.preventDefault(); });
+  scopeInput.addEventListener('blur', function () {
+    scopeDropdown.classList.add('hidden');
+  });
+  scopeInput.addEventListener('input', function () {
+    filterAndShowScope();
+    setScopeClearVisible();
+  });
+  scopeClear.addEventListener('click', function () {
+    scopeInput.value = '';
+    scopeInput.form.submit();
+  });
+  scopeOptions.forEach(function (opt) {
+    opt.addEventListener('click', function () {
+      scopeInput.value = opt.dataset.value;
+      scopeDropdown.classList.add('hidden');
+      setScopeClearVisible();
+      scopeInput.form.submit();
+    });
+  });
+  setScopeClearVisible();
+
+  const appHidden = document.getElementById('applicationName');
+  const appDisplay = document.getElementById('app-display');
+  const appTrigger = document.getElementById('app-trigger');
+  const appDropdown = document.getElementById('app-dropdown');
+  const appOptions = [...appDropdown.querySelectorAll('.app-option')];
+
+  appTrigger.addEventListener('click', function (e) {
+    e.stopPropagation();
+    appDropdown.classList.toggle('hidden');
+  });
+  appOptions.forEach(function (opt) {
+    opt.addEventListener('click', function () {
+      const val = opt.dataset.value;
+      appHidden.value = val;
+      appDisplay.textContent = val === 'all' ? 'Toutes les applications' : val;
+      appDropdown.classList.add('hidden');
+      appHidden.form.submit();
+    });
+  });
+  document.addEventListener('click', function () {
+    appDropdown.classList.add('hidden');
+  });
+})();
diff --git a/src/main/resources/static/script/logout.js b/src/main/resources/static/script/logout.js
new file mode 100644
index 0000000..a583b52
--- /dev/null
+++ b/src/main/resources/static/script/logout.js
@@ -0,0 +1,27 @@
+(function () {
+  var logoutBtn = document.getElementById('logout-btn');
+  var logoutDialog = document.getElementById('logout-dialog');
+  var cancelBtn = document.getElementById('logout-cancel-btn');
+
+  function openDialog() {
+    if (logoutDialog) logoutDialog.showModal();
+  }
+
+  function closeDialog() {
+    if (logoutDialog) logoutDialog.close();
+  }
+
+  if (logoutBtn) {
+    logoutBtn.addEventListener('click', openDialog);
+  }
+
+  if (cancelBtn) {
+    cancelBtn.addEventListener('click', closeDialog);
+  }
+
+  if (logoutDialog) {
+    logoutDialog.addEventListener('click', function (e) {
+      if (e.target === logoutDialog) closeDialog();
+    });
+  }
+})();
diff --git a/src/main/resources/static/style/history.css b/src/main/resources/static/style/history.css
new file mode 100644
index 0000000..f9be3dd
--- /dev/null
+++ b/src/main/resources/static/style/history.css
@@ -0,0 +1,51 @@
+:root {
+  --color-primary: #800000;
+  --color-primary-dark: #530c08;
+  --color-primary-light: #8a0a0a;
+  --color-accent: #D32F2F;
+  --color-accent-dark: #b71c1c;
+  --color-success: #22c55e;
+  --color-error: #ef4444;
+  --color-warning: #eab308;
+  --color-psp-bg: #DBEAFE;
+  --color-psp-text: #1E40AF;
+  --color-page-bg: #F4EFE3;
+  --color-input-bg: #F0EDE8;
+  --color-border: #D4C5B5;
+  --color-border-light: #E0D5CA;
+  --color-text-dark: #3C3C3C;
+  --dot-white: rgba(255, 255, 255, 0.12);
+  --dot-white-dim: rgba(255, 255, 255, 0.08);
+  --dot-size: 14px;
+}
+
+.psp-badge {
+  background-color: var(--color-psp-bg);
+  color: var(--color-psp-text);
+}
+
+.border-left-succeeded {
+  border-left: 3px solid var(--color-success);
+}
+
+.border-left-failed {
+  border-left: 3px solid var(--color-error);
+}
+
+.border-left-verifying {
+  border-left: 3px solid var(--color-warning);
+}
+
+.stat-card {
+  background-image:
+    radial-gradient(var(--dot-white) 1px, transparent 1px),
+    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+  background-size: var(--dot-size) var(--dot-size), cover;
+}
+
+.app-header {
+  background-image:
+    radial-gradient(var(--dot-white-dim) 1px, transparent 1px),
+    linear-gradient(120deg, var(--color-primary-light) 0%, var(--color-primary) 45%, var(--color-primary-dark) 100%);
+  background-size: var(--dot-size) var(--dot-size), cover;
+}
diff --git a/src/main/resources/templates/fragments/filter-form.html b/src/main/resources/templates/fragments/filter-form.html
new file mode 100644
index 0000000..f18ab10
--- /dev/null
+++ b/src/main/resources/templates/fragments/filter-form.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<body>
+<form th:fragment="filter-form(selectedApplication, selectedScope, selectedStartDate, selectedEndDate)"
+      th:action="@{/payments}" method="get"
+      class="bg-white rounded-lg shadow-md p-4 sm:p-6 mb-6 border border-[var(--color-border-light)]">
+  <div class="flex w-full flex-wrap justify-center gap-4 items-end">
+    <!-- Application dropdown -->
+    <div class="flex-1 relative">
+      <label class="block text-xs font-semibold text-[var(--color-primary-dark)] mb-1">Application</label>
+      <input type="hidden" name="applicationName" id="applicationName" th:value="${selectedApplication}" />
+      <div class="relative cursor-pointer" id="app-trigger">
+        <div id="app-display"
+             class="w-full bg-[var(--color-input-bg)] border border-[var(--color-border)] rounded-lg pl-3 pr-8 py-2 text-xs outline-none text-gray-700 truncate"
+             th:text="${selectedApplication != null ? selectedApplication : 'Toutes les applications'}">Toutes les applications</div>
+        <span id="app-arrow"
+              class="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--color-primary)] pointer-events-none text-lg leading-none material-icons">arrow_drop_down</span>
+      </div>
+      <div id="app-dropdown"
+           class="absolute z-20 w-full mt-1 bg-[var(--color-input-bg)] border border-[var(--color-border)] rounded-lg shadow-lg max-h-48 overflow-y-auto hidden">
+        <div class="app-option px-3 py-2 text-xs cursor-pointer text-gray-700 hover:bg-[var(--color-border)] hover:text-[var(--color-primary-dark)] transition-colors"
+             data-value="all">Toutes les applications</div>
+        <div th:each="app : ${applications}"
+             class="app-option px-3 py-2 text-xs cursor-pointer text-gray-700 hover:bg-[var(--color-border)] hover:text-[var(--color-primary-dark)] transition-colors"
+             th:data-value="${app.name}" th:text="${app.name}"></div>
+      </div>
+    </div>
+
+    <!-- Scope input with search -->
+    <div class="flex-1 relative">
+      <label for="scope" class="block text-xs font-semibold text-[var(--color-primary-dark)] mb-1">Scope</label>
+      <div class="relative">
+        <input type="text" name="scope" id="scope" autocomplete="off" th:value="${selectedScope}"
+               placeholder="Sélectionner un scope"
+               class="w-full bg-[var(--color-input-bg)] border border-[var(--color-border)] rounded-lg pl-3 pr-8 py-2 text-xs outline-none focus:ring-0 focus:border-[var(--color-primary)] transition-all" />
+        <span id="scope-clear"
+              class="absolute right-6 top-1/2 -translate-y-1/2 text-[var(--color-primary)] cursor-pointer hover:text-[var(--color-primary-dark)] hidden text-sm leading-none font-bold">&times;</span>
+        <span id="scope-arrow"
+              class="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--color-primary)] pointer-events-none text-lg leading-none material-icons">arrow_drop_down</span>
+      </div>
+      <div id="scope-dropdown"
+           class="absolute z-10 w-full mt-1 bg-[var(--color-input-bg)] border border-[var(--color-border)] rounded-lg shadow-lg max-h-48 overflow-y-auto hidden">
+        <div th:each="s : ${scopes}"
+             class="scope-option px-3 py-2 text-xs cursor-pointer text-gray-700 hover:bg-[var(--color-border)] hover:text-[var(--color-primary-dark)] transition-colors"
+             th:data-value="${s}" th:text="${s}"></div>
+      </div>
+    </div>
+
+    <!-- Date inputs -->
+    <div class="flex-1">
+      <label for="startDate" class="block text-xs font-semibold text-[var(--color-primary-dark)] mb-1">Du</label>
+      <input type="date" name="startDate" id="startDate"
+             th:value="${selectedStartDate != null ? #temporals.format(selectedStartDate, 'yyyy-MM-dd') : ''}"
+             class="w-full bg-[var(--color-input-bg)] border border-[var(--color-border)] rounded-lg px-3 py-2 text-xs outline-none focus:ring-0 focus:border-[var(--color-primary)] transition-all" />
+    </div>
+    <div class="flex-1">
+      <label for="endDate" class="block text-xs font-semibold text-[var(--color-primary-dark)] mb-1">Au</label>
+      <input type="date" name="endDate" id="endDate"
+             th:value="${selectedEndDate != null ? #temporals.format(selectedEndDate, 'yyyy-MM-dd') : ''}"
+             class="w-full bg-[var(--color-input-bg)] border border-[var(--color-border)] rounded-lg px-3 py-2 text-xs outline-none focus:ring-0 focus:border-[var(--color-primary)] transition-all" />
+    </div>
+
+    <!-- Buttons -->
+    <div class="flex items-end gap-2">
+      <button type="submit"
+              class="bg-[var(--color-accent)] hover:bg-[var(--color-accent-dark)] text-white text-xs font-medium py-2 px-4 rounded-lg transition-all flex items-center justify-center gap-1">
+        <span class="material-icons text-sm">filter_list</span>
+        Filtrer
+      </button>
+      <a th:if="${selectedApplication != null or selectedScope != null or selectedStartDate != null or selectedEndDate != null}"
+         th:href="@{/payments}"
+         class="bg-gray-100 hover:bg-gray-200 text-gray-600 text-xs font-medium py-2 px-4 rounded-lg transition-all flex items-center justify-center gap-1 border border-gray-200">
+        <span class="material-icons text-sm">refresh</span>
+        Réinitialiser
+      </a>
+    </div>
+  </div>
+</form>
+</body>
+</html>
diff --git a/src/main/resources/templates/fragments/header.html b/src/main/resources/templates/fragments/header.html
new file mode 100644
index 0000000..1d18c6d
--- /dev/null
+++ b/src/main/resources/templates/fragments/header.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<body>
+<header th:fragment="header" class="app-header text-white shadow-[0_2px_12px_rgba(83,12,8,0.35)] border-b-[3px] border-[var(--color-accent)]">
+  <div class="container mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between relative">
+    <div class="flex items-center gap-2.5">
+      <span class="inline-flex items-center justify-center w-8 h-8 rounded-lg text-white">
+        <span class="material-icons text-lg">account_balance_wallet</span>
+      </span>
+      <h1 class="text-xl sm:text-2xl font-bold tracking-tight">Vola</h1>
+    </div>
+    <div class="flex items-center gap-2 sm:gap-3">
+      <span class="inline-flex items-center gap-1.5 text-white">
+        <span class="material-icons text-sm">person</span>
+        <span class="text-xs sm:text-sm">Admin</span>
+      </span>
+      <button type="button" id="logout-btn"
+              class="bg-[var(--color-accent)] hover:bg-[var(--color-accent-dark)] border border-[var(--color-accent)] hover:border-[var(--color-accent-dark)] text-white text-xs sm:text-sm font-medium px-3 sm:px-4 py-2 rounded-lg transition-all flex items-center gap-1.5">
+        <span class="material-icons text-sm">logout</span>
+        <span class="hidden sm:inline">Déconnexion</span>
+      </button>
+    </div>
+  </div>
+
+  <dialog id="logout-dialog"
+          class="fixed inset-0 z-50 m-auto p-0 bg-transparent border-none">
+    <div class="bg-white p-6 sm:p-8 rounded-xl shadow-2xl max-w-md w-full mx-4">
+      <div class="text-center mb-6">
+        <div class="inline-flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 bg-[#800000] bg-opacity-10 rounded-full mb-4">
+          <span class="material-icons text-[var(--color-primary)] text-4xl sm:text-5xl">logout</span>
+        </div>
+        <h2 class="text-2xl font-bold text-[var(--color-text-dark)] mb-2">Confirmer la déconnexion</h2>
+        <p class="text-sm text-gray-600">Voulez-vous vraiment vous déconnecter ?</p>
+      </div>
+
+      <form th:action="@{/logout}" method="POST" class="space-y-3">
+        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
+        <button type="submit"
+                class="w-full bg-[var(--color-accent)] hover:bg-[var(--color-accent-dark)] text-white font-bold py-3 px-6 rounded-full transition-all transform hover:scale-[1.02] text-sm flex items-center justify-center gap-2">
+          <span class="material-icons text-lg">logout</span>
+          <span>Oui, me déconnecter</span>
+        </button>
+      </form>
+
+      <button type="button" id="logout-cancel-btn"
+              class="mt-3 w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-6 rounded-full transition-all transform hover:scale-[1.02] text-sm flex items-center justify-center gap-2">
+        <span class="material-icons text-lg">arrow_back</span>
+        <span>Non, rester connecté</span>
+      </button>
+
+      <div class="mt-6 p-3 rounded-lg bg-[#800000] bg-opacity-10 border border-[#800000] border-opacity-20">
+        <div class="flex items-start gap-2">
+          <span class="material-icons text-[var(--color-primary)] text-sm mt-0.5">info</span>
+          <p class="text-xs text-gray-700">Vous serez redirigé vers la page d'accueil après la déconnexion.</p>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</header>
+</body>
+</html>
diff --git a/src/main/resources/templates/fragments/pagination.html b/src/main/resources/templates/fragments/pagination.html
new file mode 100644
index 0000000..50b9774
--- /dev/null
+++ b/src/main/resources/templates/fragments/pagination.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<body>
+<div th:fragment="pagination(applicationName, scope, startDate, endDate, currentPage, totalPages)">
+  <div th:if="${totalPages > 1}" class="flex items-center justify-center gap-2 mt-6">
+    <a th:if="${currentPage > 0}"
+       th:href="@{/payments(applicationName=${applicationName}, scope=${scope}, startDate=${startDate}, endDate=${endDate}, page=${currentPage - 1})}"
+       class="px-3 py-2 text-xs font-medium rounded-lg bg-white border border-gray-200 hover:bg-gray-50 transition-colors">
+      <span class="material-icons text-sm align-middle">chevron_left</span>
+      Précédent
+    </a>
+    <span th:each="i : ${#numbers.sequence(0, totalPages - 1)}"
+          th:if="${i == currentPage or (i >= currentPage - 2 and i <= currentPage + 2)}">
+      <a th:if="${i != currentPage}"
+         th:href="@{/payments(applicationName=${applicationName}, scope=${scope}, startDate=${startDate}, endDate=${endDate}, page=${i})}"
+         class="px-3 py-2 text-xs font-medium rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
+         th:text="${i + 1}">1</a>
+      <span th:unless="${i != currentPage}"
+            class="px-3 py-2 text-xs font-medium rounded-lg bg-[var(--color-primary)] text-white"
+            th:text="${i + 1}">1</span>
+    </span>
+    <a th:if="${currentPage < totalPages - 1}"
+       th:href="@{/payments(applicationName=${applicationName}, scope=${scope}, startDate=${startDate}, endDate=${endDate}, page=${currentPage + 1})}"
+       class="px-3 py-2 text-xs font-medium rounded-lg bg-white border border-gray-200 hover:bg-gray-50 transition-colors">
+      Suivant
+      <span class="material-icons text-sm align-middle">chevron_right</span>
+    </a>
+  </div>
+</div>
+</body>
+</html>
diff --git a/src/main/resources/templates/fragments/stats-cards.html b/src/main/resources/templates/fragments/stats-cards.html
new file mode 100644
index 0000000..5895d3c
--- /dev/null
+++ b/src/main/resources/templates/fragments/stats-cards.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<body>
+<div th:fragment="stats-cards(totalCollected, totalCount, pendingCount)">
+  <div class="mx-auto grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4 mb-6 max-w-4xl">
+    <div class="stat-card relative overflow-hidden rounded-xl p-5 pb-6 border-t-4 border-[var(--color-accent)] shadow-[0_4px_10px_rgba(83,12,8,0.25)]">
+      <div class="flex items-center justify-between gap-2 mb-7">
+        <span class="material-icons text-white text-[1.75rem] opacity-90">payments</span>
+        <h3 class="text-white font-semibold text-sm text-right">Total collecté</h3>
+      </div>
+      <p class="text-white font-extrabold text-3xl leading-none mb-1" th:text="${totalCollected}">0 Ar</p>
+      <p class="text-white/75 text-xs">Au total</p>
+    </div>
+    <div class="stat-card relative overflow-hidden rounded-xl p-5 pb-6 border-t-4 border-[var(--color-accent)] shadow-[0_4px_10px_rgba(83,12,8,0.25)]">
+      <div class="flex items-center justify-between gap-2 mb-7">
+        <span class="material-icons text-white text-[1.75rem] opacity-90">confirmation_number</span>
+        <h3 class="text-white font-semibold text-sm text-right">Nombre de paiements</h3>
+      </div>
+      <p class="text-white font-extrabold text-3xl leading-none mb-1" th:text="${totalCount}">0</p>
+      <p class="text-white/75 text-xs">Au total</p>
+    </div>
+    <div class="stat-card relative overflow-hidden rounded-xl p-5 pb-6 border-t-4 border-[var(--color-accent)] shadow-[0_4px_10px_rgba(83,12,8,0.25)]">
+      <div class="flex items-center justify-between gap-2 mb-7">
+        <span class="material-icons text-white text-[1.75rem] opacity-90">av_timer</span>
+        <h3 class="text-white font-semibold text-sm text-right">En attente</h3>
+      </div>
+      <p class="text-white font-extrabold text-3xl leading-none mb-1" th:text="${pendingCount}">0</p>
+      <p class="text-white/75 text-xs">Au total</p>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/src/main/resources/templates/payments.html b/src/main/resources/templates/payments.html
new file mode 100644
index 0000000..c2bec53
--- /dev/null
+++ b/src/main/resources/templates/payments.html
@@ -0,0 +1,127 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+  <title>Vola - Historique</title>
+  <meta charset="utf-8" />
+  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="/style/history.css" />
+</head>
+<body class="min-h-screen bg-[var(--color-page-bg)] font-[Poppins] text-gray-700">
+  <div th:replace="~{fragments/header :: header}"></div>
+
+  <div class="container mx-auto px-4 sm:px-6 pt-6 sm:pt-10 pb-10 sm:pb-14">
+    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 gap-3">
+      <h1 class="text-2xl sm:text-3xl font-bold text-[var(--color-primary-dark)]">
+        Historique des paiements
+      </h1>
+      <div class="flex items-center gap-2">
+        <a th:href="@{/payments/export/csv(
+          adminKey=${adminKey},
+          applicationName=${selectedApplication},
+          scope=${selectedScope},
+          startDate=${selectedStartDate},
+          endDate=${selectedEndDate}
+        )}"
+           class="bg-[var(--color-accent)] hover:bg-red-700 text-white text-xs font-medium py-2 px-4 rounded-lg transition-all inline-flex items-center gap-1"
+           th:classappend="${selectedApplication == null} ? 'opacity-50 pointer-events-none' : ''">
+          <span class="material-icons text-sm">download</span>
+          Exporter
+        </a>
+      </div>
+    </div>
+
+    <div th:replace="~{fragments/stats-cards :: stats-cards(totalCollected=${totalCollected}, totalCount=${totalCount}, pendingCount=${pendingCount})}"></div>
+
+    <div th:replace="~{fragments/filter-form :: filter-form(selectedApplication=${selectedApplication}, selectedScope=${selectedScope}, selectedStartDate=${selectedStartDate}, selectedEndDate=${selectedEndDate})}"></div>
+
+    <div class="bg-white rounded-lg shadow-md overflow-hidden">
+      <div class="overflow-x-auto">
+        <table class="w-full table-auto min-w-[800px]">
+          <thead class="bg-[var(--color-primary)] text-white">
+            <tr>
+              <th class="px-2 sm:px-3 py-2 sm:py-3 text-left font-semibold text-xs whitespace-nowrap">Date création</th>
+              <th class="px-2 sm:px-3 py-2 sm:py-3 text-left font-semibold text-xs">Email payeur</th>
+              <th class="px-2 sm:px-3 py-2 sm:py-3 text-left font-semibold text-xs">Application</th>
+              <th class="px-2 sm:px-3 py-2 sm:py-3 text-left font-semibold text-xs">Scope</th>
+              <th class="px-2 sm:px-3 py-2 sm:py-3 text-left font-semibold text-xs">PSP</th>
+              <th class="px-2 sm:px-3 py-2 sm:py-3 text-right font-semibold text-xs">Montant</th>
+              <th class="px-2 sm:px-3 py-2 sm:py-3 text-center font-semibold text-xs">Statut</th>
+              <th class="px-2 sm:px-3 py-2 sm:py-3 text-left font-semibold text-xs whitespace-nowrap">Date vérification</th>
+              <th class="px-2 sm:px-3 py-2 sm:py-3 text-left font-semibold text-xs whitespace-nowrap">Référence OM</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr th:each="p : ${payments}" class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
+                th:classappend="${p.getVerificationStatus().name() == 'SUCCEEDED'} ? 'border-left-succeeded' : (${p.getVerificationStatus().name() == 'FAILED'} ? 'border-left-failed' : 'border-left-verifying')">
+              <td class="px-2 sm:px-3 py-2 sm:py-3 text-xs">
+                <span th:text="${p.creationInstant() != null ? #temporals.format(p.creationInstant(), 'yyyy-MM-dd') : '-'}"
+                      class="text-gray-700 font-medium block whitespace-nowrap">2025-01-01</span>
+                <span th:text="${p.creationInstant() != null ? #temporals.format(p.creationInstant(), 'HH:mm:ss') : '-'}"
+                      class="text-gray-500 text-xs whitespace-nowrap">12:00:00</span>
+              </td>
+              <td class="px-2 sm:px-3 py-2 sm:py-3">
+                <span th:text="${p.payer().email()}" class="text-xs text-gray-500">email@example.com</span>
+              </td>
+              <td class="px-2 sm:px-3 py-2 sm:py-3">
+                <span th:text="${p.application().name()}" class="text-xs text-gray-700">App</span>
+              </td>
+              <td class="px-2 sm:px-3 py-2 sm:py-3">
+                <span th:text="${p.scope() != null ? p.scope() : '--'}" class="text-xs"
+                      th:classappend="${p.scope() != null ? 'text-gray-500' : 'text-gray-400'}">--</span>
+              </td>
+              <td class="px-2 sm:px-3 py-2 sm:py-3">
+                <span class="psp-badge inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium whitespace-nowrap"
+                      th:text="${p.pspPayment().pspType()}">ORANGE_MONEY</span>
+              </td>
+              <td class="px-2 sm:px-3 py-2 sm:py-3 text-right">
+                <span th:text="${p.pspPayment().amount() != null ? #numbers.formatInteger(p.pspPayment().amount(), 0, 'COMMA') + ' Ar' : '--'}"
+                      class="text-xs font-semibold whitespace-nowrap"
+                      th:classappend="${p.pspPayment().amount() != null ? 'text-green-600' : 'text-gray-400'}">0 Ar</span>
+              </td>
+              <td class="px-2 sm:px-3 py-2 sm:py-3 text-center">
+                <span th:switch="${p.getVerificationStatus().name()}" class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium whitespace-nowrap">
+                  <span th:case="'VERIFYING'" class="bg-yellow-100 text-yellow-800">En vérification</span>
+                  <span th:case="'SUCCEEDED'" class="bg-green-100 text-green-800">Succès</span>
+                  <span th:case="'FAILED'" class="bg-red-100 text-red-800">Échoué</span>
+                </span>
+              </td>
+              <td class="px-2 sm:px-3 py-2 sm:py-3 text-xs">
+                <th:block th:if="${p.lastPspVerificationInstant() != null}">
+                  <span th:text="${#temporals.format(p.lastPspVerificationInstant(), 'yyyy-MM-dd')}" class="text-gray-700 font-medium block whitespace-nowrap">2025-01-01</span>
+                  <span th:text="${#temporals.format(p.lastPspVerificationInstant(), 'HH:mm:ss')}" class="text-gray-500 text-xs whitespace-nowrap">12:00:00</span>
+                </th:block>
+                <span th:unless="${p.lastPspVerificationInstant() != null}" class="text-gray-400">--</span>
+              </td>
+              <td class="px-2 sm:px-3 py-2 sm:py-3">
+                <span th:text="${p.pspPayment().id()}" class="text-xs text-gray-600 font-mono bg-gray-100 px-2 py-1 rounded block max-w-[150px] truncate"
+                      th:title="${p.pspPayment().id()}">MP250917.1604.D33118</span>
+              </td>
+            </tr>
+            <tr th:if="${#lists.isEmpty(payments)}">
+              <td colspan="9" class="px-4 py-8 text-center text-gray-500">
+                <div class="flex flex-col items-center justify-center w-full">
+                  <span class="material-icons text-4xl text-gray-300 mb-2">inbox</span>
+                  <span class="text-sm sm:text-base">Aucun paiement trouvé</span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="md:hidden px-4 py-2 bg-gray-50 border-t border-gray-200">
+        <p class="text-xs text-gray-500 text-center flex items-center justify-center gap-1">
+          <span class="material-icons text-sm">swipe</span>
+          Faites défiler horizontalement pour voir plus
+        </p>
+      </div>
+    </div>
+
+    <div th:replace="fragments/pagination :: pagination(applicationName=${selectedApplication}, scope=${selectedScope}, startDate=${selectedStartDate}, endDate=${selectedEndDate}, currentPage=${currentPage}, totalPages=${totalPages})"></div>
+  </div>
+  <script src="/script/filters.js"></script>
+  <script src="/script/logout.js"></script>
+</body>
+</html>
diff --git a/src/test/java/school/hei/vola/conf/EnvConf.java b/src/test/java/school/hei/vola/conf/EnvConf.java
index 7e53f3e..4ad7b91 100644
--- a/src/test/java/school/hei/vola/conf/EnvConf.java
+++ b/src/test/java/school/hei/vola/conf/EnvConf.java
@@ -12,5 +12,7 @@ void configureProperties(DynamicPropertyRegistry registry) {
     registry.add("spring.jpa.database-platform", () -> "org.hibernate.dialect.H2Dialect");
     registry.add("orange.api.url", () -> apiUrl);
     registry.add("ADMIN_API_KEY", () -> "admin-api-key");
+    registry.add("ADMIN_PASSWORD", () -> "test-password");
+    registry.add("ADMIN_EMAIL", () -> "admin@cute.dev");
   }
 }
diff --git a/src/test/java/school/hei/vola/endpoint/rest/controller/PaymentViewControllerIT.java b/src/test/java/school/hei/vola/endpoint/rest/controller/PaymentViewControllerIT.java
new file mode 100644
index 0000000..3fe3e8d
--- /dev/null
+++ b/src/test/java/school/hei/vola/endpoint/rest/controller/PaymentViewControllerIT.java
@@ -0,0 +1,112 @@
+package school.hei.vola.endpoint.rest.controller;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertNotNull;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+
+import java.util.Objects;
+import java.util.regex.Pattern;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.web.client.TestRestTemplate;
+import org.springframework.http.HttpEntity;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.HttpMethod;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
+import org.springframework.util.LinkedMultiValueMap;
+import school.hei.vola.conf.FacadeIT;
+
+class PaymentViewControllerIT extends FacadeIT {
+
+  @Autowired private TestRestTemplate restTemplate;
+
+  @Test
+  void unauthenticated_request_to_payments_shows_login_page() {
+    var response = restTemplate.getForEntity("/payments", String.class);
+
+    assertEquals(200, response.getStatusCodeValue());
+    assertNotNull(response.getBody());
+    assertTrue(response.getBody().contains("Please sign in"));
+  }
+
+  @Test
+  void authenticated_user_can_access_payments() {
+    var sessionCookie = fetchSessionCookie();
+    var csrfToken = fetchCsrfToken(sessionCookie);
+
+    var loginResponse = login(sessionCookie, csrfToken, "admin@cute.dev");
+    assertEquals(302, loginResponse.getStatusCodeValue());
+    assertEquals(
+        "/payments", Objects.requireNonNull(loginResponse.getHeaders().getLocation()).getPath());
+
+    var authCookie = extractSessionId(loginResponse);
+    var paymentsHeaders = new HttpHeaders();
+    paymentsHeaders.add(HttpHeaders.COOKIE, authCookie);
+    var paymentsResponse =
+        restTemplate.exchange(
+            "/payments", HttpMethod.GET, new HttpEntity<>(paymentsHeaders), String.class);
+
+    assertEquals(200, paymentsResponse.getStatusCodeValue());
+  }
+
+  @Test
+  void unknown_user_cannot_login() {
+    var sessionCookie = fetchSessionCookie();
+    var csrfToken = fetchCsrfToken(sessionCookie);
+
+    var loginResponse = login(sessionCookie, csrfToken, "nobody@user.guest");
+    assertEquals(302, loginResponse.getStatusCodeValue());
+    assertTrue(
+        Objects.requireNonNull(loginResponse.getHeaders().getLocation())
+            .getPath()
+            .contains("/login"));
+  }
+
+  @Test
+  void static_resources_are_accessible_without_authentication() {
+    var cssResponse = restTemplate.getForEntity("/style/history.css", String.class);
+    assertEquals(200, cssResponse.getStatusCodeValue());
+  }
+
+  private String fetchSessionCookie() {
+    var loginPage = restTemplate.getForEntity("/login", String.class);
+    var setCookie = loginPage.getHeaders().getFirst(HttpHeaders.SET_COOKIE);
+    assertNotNull(setCookie);
+    return extractSessionId(loginPage);
+  }
+
+  private String fetchCsrfToken(String sessionCookie) {
+    var headers = new HttpHeaders();
+    headers.add(HttpHeaders.COOKIE, sessionCookie);
+    var loginPage =
+        restTemplate.exchange("/login", HttpMethod.GET, new HttpEntity<>(headers), String.class);
+    var token = extractCsrfToken(loginPage.getBody());
+    assertNotNull(token);
+    return token;
+  }
+
+  private ResponseEntity<String> login(String sessionCookie, String csrfToken, String email) {
+    var headers = new HttpHeaders();
+    headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
+    headers.add(HttpHeaders.COOKIE, sessionCookie);
+
+    var formData = new LinkedMultiValueMap<String, String>();
+    formData.add("email", email);
+    formData.add("password", "test-password");
+    formData.add("_csrf", csrfToken);
+
+    return restTemplate.postForEntity("/login", new HttpEntity<>(formData, headers), String.class);
+  }
+
+  private static String extractSessionId(ResponseEntity<?> response) {
+    var cookie = response.getHeaders().getFirst(HttpHeaders.SET_COOKIE);
+    return cookie != null ? cookie.split(";")[0] : null;
+  }
+
+  private static String extractCsrfToken(String html) {
+    var pattern = Pattern.compile("name=\"_csrf\"[^>]*value=\"([^\"]+)\"");
+    var matcher = pattern.matcher(html);
+    return matcher.find() ? matcher.group(1) : null;
+  }
+}