diff --git a/.vs/ProjectSettings.json b/.vs/ProjectSettings.json
new file mode 100644
index 00000000..f8b48885
--- /dev/null
+++ b/.vs/ProjectSettings.json
@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}
\ No newline at end of file
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
new file mode 100644
index 00000000..d482d038
Binary files /dev/null and b/.vs/slnx.sqlite differ
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1afa1080..bd888387 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,30 @@
 # OpenVPN-Admin Version History
 
+## 1.0.0
+- Upgrade UI from Bootstrap 3 to Bootstrap 5 with Bootstrap Icons (CDN-based; removes Bower/npm dependency entirely)
+- Replace x-editable inline editing with Bootstrap 5 modal-based row editing
+- Add live connection dashboard (polls OpenVPN status log every 10 seconds)
+- Add per-user certificate management: generate, revoke, download `.ovpn`, email config
+- Add role-based admin access: `super-admin` (full control) and `read-only`
+- Add SMTP configuration page with send-test functionality
+- Add email notification toggles: on-connect, on-disconnect, account-expiry
+- Add `include/mailer.php`: lightweight zero-dependency PHP SMTP client
+- Add `include/notify.php`: CLI script called by OpenVPN connect/disconnect hooks
+- Add `sql/schema-10.sql`: admin role column, `smtp_settings` table, fix missing admin columns
+- Fix `install.sh`: remove PHP 7.4 forcing; use system PHP; fix OpenVPN 2.5+ genkey syntax;
+  fix `iptables-save`; fix IP forwarding persistence via `sysctl.d`; fix hardcoded `eth0`;
+  detect MySQL vs MariaDB; add sudoers entry for EasyRSA; add 64-bit Raspberry Pi OS detection;
+  remove Bower/nodejs/npm; fix `apt-get upgrade` removal; add `systemctl enable`
+- Fix `online-install.sh`: remove non-ASCII chars from ASCII art; fix RPi 64-bit detection;
+  guard `needrestart` edit; remove `apt-get upgrade`; handle existing clone directory; add `set -e`
+- Fix `uninstall.sh`: add colors; fix MySQL socket auth; fix hardcoded `eth0`; fix `iptables-save`;
+  fix sysctl cleanup; stop/disable OpenVPN service before file removal; clean up all new artifacts
+  (sudoers, log dir, iptables persistence file, Apache conf); fix PHP timezone revert
+- Fix `update.sh`: add colors; add pre-update backup; fix `stat` for user/group detection;
+  add sudoers and log dir creation for existing installs; patch `server.conf` for OpenVPN 2.5+;
+  add Apache reload; add OpenVPN restart when server.conf changes
+- Connect and disconnect scripts now call `notify.php` for email alerts
+
 ## 0.3.2
 - Fix with MySQL NO_ZERO_DATE mode
 
diff --git a/README.md b/README.md
index 8448ab7e..53909393 100644
--- a/README.md
+++ b/README.md
@@ -1,96 +1,178 @@
 # OpenVPN Admin
 
-## Summary
-Administrate its OpenVPN with a web interface (logs visualisations, users managing...) and a SQL database.
+A web-based administration panel for OpenVPN servers — manage users, certificates, logs, and settings through a modern browser interface.
 
-![Previsualisation configuration](https://lutim.cpy.re/fUq2rxqz)
-![Previsualisation administration](https://lutim.cpy.re/wwYMkHcM)
+---
 
+## Features
 
-## Prerequisite
+| Feature | Description |
+|---|---|
+| **Live Dashboard** | Real-time table of connected clients with IP, bandwidth, and session duration |
+| **User Management** | Add, edit, enable/disable, and delete VPN users with expiry dates |
+| **Certificate Management** | Generate and revoke per-user certificates via EasyRSA; download individual `.ovpn` files |
+| **Connection Logs** | Aggregated session history with data transferred per user |
+| **Role-based Admin Access** | `super-admin` (full control) and `read-only` roles for web panel admins |
+| **Email Notifications** | SMTP configuration with optional alerts on user connect, disconnect, or account expiry |
+| **Client Configs** | Edit and version-history GNU/Linux, Windows, and macOS `.ovpn` templates in-browser |
+| **Modern UI** | Bootstrap 5 interface with dark sidebar, stats cards, and responsive layout |
 
-  * GNU/Linux with Bash and root access
-  * Fresh install of OpenVPN
-  * Web server (NGinx, Apache...)
-  * MySQL
-  * PHP >= 5.5 with modules:
-    * zip
-    * pdo_mysql
-  * bower
-  * unzip
-  * wget
-  * sed
-  * curl
+---
 
-### Debian 8 Jessie
+## Supported Platforms
 
-````
-# apt-get install openvpn apache2 php5-mysql mysql-server php5 nodejs unzip git wget sed npm curl
-# npm install -g bower
-# ln -s /usr/bin/nodejs /usr/bin/node
-````
+| OS | Versions |
+|---|---|
+| Ubuntu Server | 22.04 LTS, 24.04 LTS |
+| Debian | 11 (Bullseye), 12 (Bookworm) |
+| Raspberry Pi OS | 32-bit and 64-bit (Bullseye / Bookworm) |
 
-### Debian 9 Stretch
+> The installer auto-detects your OS, PHP version, and database engine (MySQL or MariaDB). No manual configuration required.
 
-In order to install `npm`, [stretch-backports need to be added to your sources.list](https://backports.debian.org/Instructions/#index2h2).
+---
 
-````
-# apt-get install -t stretch-backports npm nodejs
-# apt-get install openvpn apache2 php-mysql mysql-server php-zip php unzip git wget sed curl
-# npm install -g bower
-````
+## Installation
 
-### CentOS 7
+### Automatic (one-liner)
 
-````
-# yum install epel-release
-# yum install openvpn httpd php-mysql mariadb-server php nodejs unzip git wget sed npm
-# npm install -g bower
-# systemctl enable mariadb
-# systemctl start mariadb
-````
+```bash
+wget -O - https://raw.githubusercontent.com/arvage/OpenVPN-Admin/master/online-install.sh | bash
+```
 
-### Other distribution... (PR welcome)
+### Manual
 
-## Tests
+```bash
+sudo apt update && sudo apt install -y git
+git clone https://github.com/arvage/OpenVPN-Admin ~/openvpn-admin
+cd ~/openvpn-admin
+sudo ./install.sh /var/www www-data www-data
+```
 
-Only tested on Debian Jessie. Feel free to open issues.
+### First-time setup
 
-## Installation
+Once the installer finishes, open a browser and go to:
+
+```
+http://<your-server-ip>/index.php?installation
+```
+
+Create your first admin account there. The page will redirect to the admin panel when done.
+
+---
+
+## Admin Panel
+
+After logging in at `http://<your-server-ip>/`, the sidebar gives access to:
 
-  * Setup OpenVPN and the web application:
+### Dashboard
+Live table of currently connected VPN clients — username, real IP address, bytes received/sent, and connection time. Refreshes every 10 seconds automatically.
 
-        $ cd ~/my_coding_workspace
-        $ git clone https://github.com/Chocobozzz/OpenVPN-Admin openvpn-admin
-        $ cd openvpn-admin
-        # ./install.sh /var/www www-data www-data
+### Users
+Full user management: add users, reset passwords, set start/end dates, enable or disable accounts. Rows with expired end dates are highlighted automatically.
 
-  * Setup the web server (Apache, NGinx...) to serve the web application.
-  * Create the admin of the web application by visiting `http://your-installation/index.php?installation`
+### Certificates
+Per-user certificate management backed by EasyRSA:
+- **Generate** a certificate for a user (runs `easyrsa build-client-full`)
+- **Revoke** a certificate (runs `easyrsa revoke` + `gen-crl`)
+- **Download** a ready-to-use `.ovpn` file with the user's certificate embedded inline
+- **Email** the `.ovpn` file directly to the user (requires SMTP to be configured)
 
-## Usage
+> The installer automatically grants `www-data` passwordless sudo access to `easyrsa` via `/etc/sudoers.d/openvpn-admin`.
 
-  * Start OpenVPN on the server (for example `systemctl start openvpn@server`)
-  * Connect to the web application as an admin
-  * Create an user
-  * User get the configurations files via the web application (and put them in */etc/openvpn*)
-  * Users on GNU/Linux systems, run `chmod +x /etc/openvpn/update-resolv.sh` as root
-  * User run OpenVPN (for example `systemctl start openvpn@client`)
+### Logs
+Aggregated connection history per user: total sessions, data transferred, and last seen timestamp. Server-side paginated for large datasets.
+
+### Admins
+Manage web panel admin accounts. Each admin has a **role**:
+- `super-admin` — full read/write access to all pages
+- `read-only` — can view all pages but cannot make changes
+
+### Configs
+Edit the raw OpenVPN client configuration templates for GNU/Linux, Windows, and macOS directly in the browser. Changes are saved with a version history so you can review or restore previous configs.
+
+### Settings → SMTP
+Configure outgoing email:
+- SMTP host, port, username, password
+- Security: STARTTLS, SSL/TLS, or none
+- Send a test email to verify settings
+
+### Settings → Notifications
+Toggle email alerts sent to the user's registered address:
+- **On Connect** — email when the user connects to VPN
+- **On Disconnect** — email when the user disconnects
+- **Account Expiry** — email 7 days before the account's end date
+
+> Connect/disconnect notifications require the OpenVPN server scripts to be in place. The installer sets this up automatically via `/etc/openvpn/scripts/connect.sh` and `disconnect.sh`.
+
+---
 
 ## Update
 
-    $ git pull origin master
-    # ./update.sh /var/www
+```bash
+cd ~/openvpn-admin
+git pull origin master
+sudo ./update.sh /var/www
+```
+
+`update.sh` will:
+- Back up the current installation to `/root/openvpn-admin-backup-<timestamp>.tar.gz`
+- Copy updated web application files
+- Apply any pending database migrations automatically
+- Patch `server.conf` for OpenVPN 2.5+ compatibility if needed
+- Add missing infrastructure (sudoers entry, log directory) for existing installs
+- Reload Apache and restart OpenVPN if config changed
+
+---
+
+## Uninstall
+
+Removes all installed components: OpenVPN keys and configuration, the web application, the MySQL/MariaDB database and user, iptables NAT rules, the Apache virtual host, and sysctl forwarding settings.
+
+```bash
+sudo ./uninstall.sh /var/www
+```
+
+The script will show a full list of what will be deleted and require you to type `yes` to confirm. Installed packages (`openvpn`, `apache2`, `mysql`/`mariadb`, `php`) are **not** removed.
+
+---
+
+## How It Works
+
+```
+Browser ──► Apache ──► PHP (index.php / grids.php)
+                          │
+                          ├── MySQL/MariaDB  (users, admins, logs, SMTP config)
+                          ├── /etc/openvpn/  (server.conf, certs, client configs)
+                          └── /var/log/openvpn/openvpn-status.log  (live dashboard)
+
+OpenVPN server ──► connect.sh / disconnect.sh
+                          │
+                          └── notify.php  (sends email alerts via SMTP)
+```
+
+Users authenticate to OpenVPN with username + password (no client certificate required by default). The `login.sh` script validates credentials against the database. The certificate management feature generates optional per-user certs for environments that require them.
+
+---
+
+## Libraries Used
+
+All frontend libraries are loaded from CDN — no build tools or package managers required.
+
+| Library | Version | Purpose |
+|---|---|---|
+| [Bootstrap](https://getbootstrap.com/) | 5.3 | UI framework |
+| [Bootstrap Icons](https://icons.getbootstrap.com/) | 1.11 | Icon set |
+| [Bootstrap Table](https://bootstrap-table.wenzhixin.net.cn/) | 1.22 | Data grids with pagination and filtering |
+| [jQuery](https://jquery.com/) | 3.7 | DOM and AJAX |
 
-## Desinstall
-It will remove all installed components (OpenVPN keys and configurations, the web application, iptables rules...).
+---
 
-    # ./desinstall.sh /var/www
+## Reporting Issues
 
-## Use of
+Please open an issue at [github.com/arvage/OpenVPN-Admin/issues](https://github.com/arvage/OpenVPN-Admin/issues) and include:
 
-  * [Bootstrap](https://github.com/twbs/bootstrap)
-  * [Bootstrap Table](http://bootstrap-table.wenzhixin.net.cn/)
-  * [Bootstrap Datepicker](https://github.com/eternicode/bootstrap-datepicker)
-  * [JQuery](https://jquery.com/)
-  * [X-editable](https://github.com/vitalets/x-editable)
+- OS and version
+- PHP version (`php -v`)
+- MySQL/MariaDB version (`mysql --version`)
+- The error message or unexpected behaviour
+- Relevant Apache/PHP logs (`/var/log/apache2/error.log`)
diff --git a/css/icon.png b/css/icon.png
index bb57ee6b..9cf04255 100644
Binary files a/css/icon.png and b/css/icon.png differ
diff --git a/css/index.css b/css/index.css
index 87ed9706..44692b12 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,70 +1,362 @@
-body {
-  padding-top: 10px;
+/* ===== LAYOUT ===== */
+
+html, body { height: 100%; }
+
+.login-layout,
+.install-layout {
+  padding-top: 60px;
+}
+
+.login-card {
+  border: none;
+  border-radius: 10px;
+}
+
+.login-card .card-header {
+  background: #1a1a2e;
+  color: #89b4fa;
+  border-radius: 10px 10px 0 0 !important;
+  font-size: 1.05em;
+  font-weight: 600;
 }
 
-.action {
+/* ===== ADMIN LAYOUT ===== */
+
+.admin-layout {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.admin-wrapper {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* ===== SIDEBAR ===== */
+
+.sidebar {
+  width: 230px;
+  min-width: 230px;
+  background: #1a1a2e;
+  color: #cdd6f4;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 8px rgba(0,0,0,0.4);
+  z-index: 200;
+  overflow-y: auto;
+  transition: transform 0.2s;
+}
+
+.sidebar-header {
+  padding: 16px 18px;
+  background: #12122a;
+  font-size: 1em;
+  font-weight: 700;
+  color: #89b4fa;
+  letter-spacing: 0.4px;
+  border-bottom: 1px solid #2a2a4a;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sidebar-nav {
+  flex: 1;
+  padding: 8px 0;
+}
+
+.sidebar-nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-section-label {
+  font-size: 0.68em;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: #45475a;
+  padding: 14px 18px 4px;
+  pointer-events: none;
+}
+
+.sidebar-nav li > a {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 18px;
+  color: #a6adc8;
+  text-decoration: none;
+  border-left: 3px solid transparent;
+  font-size: 0.9em;
+  transition: background 0.12s, color 0.12s;
+}
+
+.sidebar-nav li > a i {
+  width: 18px;
+  text-align: center;
+  font-size: 0.95em;
+}
+
+.sidebar-nav li > a:hover {
+  background: rgba(137,180,250,0.07);
+  color: #cdd6f4;
+}
+
+.sidebar-nav li.active > a {
+  background: rgba(137,180,250,0.13);
+  border-left-color: #89b4fa;
+  color: #89b4fa;
+  font-weight: 500;
+}
+
+.sidebar-footer {
+  padding: 12px 16px;
+  background: #12122a;
+  font-size: 0.82em;
+  color: #6c7086;
+  border-top: 1px solid #2a2a4a;
+}
+
+.sidebar-credit {
+  padding: 8px 16px 10px;
+  background: #12122a;
+  font-size: 0.75em;
+  text-align: center;
+  border-top: 1px solid #1e1e38;
+}
+
+.sidebar-credit a {
+  color: #45475a;
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.sidebar-credit a:hover {
+  color: #89b4fa;
+}
+
+/* ===== MAIN CONTENT ===== */
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #f4f4f8;
+  overflow: hidden;
+  min-width: 0;
+}
+
+/* ===== TOPBAR ===== */
+
+.topbar {
+  background: #181825;
+  padding: 10px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #313244;
+  flex-shrink: 0;
+}
+
+.topbar-title {
+  color: #cdd6f4;
+  font-size: 0.95em;
+  font-weight: 600;
+}
+
+.topbar .btn {
+  font-size: 0.82em;
+}
+
+/* ===== STATS ROW ===== */
+
+.stats-row {
+  display: flex;
+  gap: 14px;
+  padding: 14px 16px;
+  background: #ededf4;
+  border-bottom: 1px solid #d8d8e8;
+  flex-shrink: 0;
+}
+
+.stat-card {
+  flex: 1;
+  background: #fff;
+  border-radius: 8px;
+  padding: 12px 16px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.07);
+  text-align: center;
+  min-width: 0;
+}
+
+.stat-card .stat-value {
+  font-size: 1.9em;
+  font-weight: 700;
+  line-height: 1.1;
+  color: #333;
+}
+
+.stat-card .stat-label {
+  font-size: 0.72em;
+  color: #888;
+  margin-top: 3px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.stat-card.stat-online .stat-value  { color: #27ae60; }
+.stat-card.stat-disabled .stat-value { color: #e74c3c; }
+.stat-card.stat-logs .stat-value    { color: #2980b9; }
+
+/* ===== PAGE CONTENT ===== */
+
+.tab-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0;
+}
+
+.tab-pane-page {
+  display: none;
+}
+
+.tab-pane-page.active {
+  display: block;
+}
+
+/* Inner padding on page content */
+.tab-content > .p-3 .tab-pane-page {
+  padding: 4px 0;
+}
+
+/* ===== TABLES ===== */
+
+.table-sm td, .table-sm th {
+  font-size: 0.875em;
+  vertical-align: middle;
+}
+
+tr.user-expired td {
+  background-color: rgba(220, 53, 69, 0.06) !important;
+}
+
+tr.user-expired td:first-child {
+  border-left: 3px solid #dc3545;
+}
+
+/* ===== TOGGLE SWITCH ===== */
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  margin: 0;
+  vertical-align: middle;
   cursor: pointer;
 }
 
-.block-grid {
-  margin: 20px;
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
 }
 
-.btn .glyphicon {
-  top: 2px;
+.toggle-slider {
+  position: absolute;
+  inset: 0;
+  background: #ccc;
+  border-radius: 20px;
+  transition: background 0.2s;
 }
 
-.signed {
-  margin-top: 20px;
+.toggle-slider:before {
+  content: '';
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  left: 3px;
+  top: 3px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s;
 }
 
-/*
-https://bootsnipp.com/snippets/jvP6z
-*/
-.mini-led-green, .mini-led-green-blink {
-    background-color: #80FF00;
-    box-shadow: #7D7B80 0 -1px 6px 1px, inset #460 0 -1px 8px, #80FF00 0 3px 11px;
+.toggle-switch input:checked + .toggle-slider { background: #5cb85c; }
+.toggle-switch input:checked + .toggle-slider:before { transform: translateX(16px); }
+
+/* ===== LED INDICATORS ===== */
+
+.led {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  vertical-align: middle;
 }
-.mini-led-red, .mini-led-red-blink {
-    background-color: #F00;
-    box-shadow: #7D7B80 0 -1px 6px 1px, inset #600 0 -1px 8px, #F00 0 3px 11px;
+
+.led-green {
+  background: #80FF00;
+  box-shadow: #7D7B80 0 -1px 6px 1px, inset #460 0 -1px 8px, #80FF00 0 3px 11px;
 }
-.mini-led-gray,
-.mini-led-gray-blink,
-.mini-led-red,
-.mini-led-red-blink,
-.mini-led-orange,
-.mini-led-orange-blink,
-.mini-led-green,
-.mini-led-green-blink,
-.mini-led-yellow,
-.mini-led-yellow-blink,
-.mini-led-blue,
-.mini-led-blue-blink {
-    margin: 0 auto;
-    margin-top: 5px;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
+
+.led-red {
+  background: #F00;
+  box-shadow: #7D7B80 0 -1px 6px 1px, inset #600 0 -1px 8px, #F00 0 3px 11px;
 }
 
-#config-cards textarea {
-   font-family: Courier;
+/* ===== PASSWORD CELL ===== */
+
+.pass-mask {
+  letter-spacing: 2px;
+  color: #aaa;
+  font-size: 1em;
+  margin-right: 6px;
 }
 
-#message-stage {
-   position: fixed;
-   bottom: 0;
+/* ===== CERT STATUS BADGES ===== */
+
+.badge-cert-v { background-color: #198754; color: #fff; }
+.badge-cert-r { background-color: #dc3545; color: #fff; }
+.badge-cert-e { background-color: #6c757d; color: #fff; }
+
+/* ===== CONFIG TEXTAREA ===== */
+
+.cfg-textarea {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.82em;
+  resize: vertical;
 }
-#message-stage i.stauts-icon {
-   margin-right: 10px;
+
+/* ===== TOAST ===== */
+
+.toast-container .toast {
+  min-width: 260px;
 }
 
-#save-config-btn.get-attention a {
-   background-color: #f0ad4e; /* orange */
-   color: white;
+/* ===== RESPONSIVE ===== */
+
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    transform: translateX(-100%);
+  }
+
+  .sidebar.open {
+    transform: translateX(0);
+  }
+
+  .stats-row {
+    flex-wrap: wrap;
+  }
+
+  .stat-card {
+    flex: 1 1 calc(50% - 14px);
+  }
 }
-#save-config-btn.saved-success a {
-   background-color: #5cb85c; /* green */
-   color: white;
-}
\ No newline at end of file
diff --git a/desinstall.sh b/desinstall.sh
deleted file mode 100755
index 2a23c593..00000000
--- a/desinstall.sh
+++ /dev/null
@@ -1,73 +0,0 @@
-#!/bin/bash
-
-print_help () {
-  echo -e "./desinstall.sh www_basedir"
-  echo -e "\tbase_dir: The place where the web application is in"
-}
-
-# Ensure to be root
-if [ "$EUID" -ne 0 ]; then
-  echo "Please run as root"
-  exit
-fi
-
-# Ensure there are enought arguments
-if [ "$#" -ne 1 ]; then
-  print_help
-  exit
-fi
-
-www="$1/openvpn-admin"
-
-if [ ! -d "$www" ]; then
-  print_help
-  exit
-fi
-
-# Get root pass (to delete the database and the user)
-mysql_root_pass=""
-status_code=1
-
-while [ $status_code -ne 0 ]; do
-  read -p "MySQL root password: " -s mysql_root_pass; echo
-  echo "SHOW DATABASES" | mysql -u root --password="$mysql_root_pass" &> /dev/null
-  status_code=$?
-done
-
-mysql_user=$(sed -n "s/^.*user = '\(.*\)'.*$/\1/p" "$www/include/config.php")
-
-if [ "$mysql_user" = "" ]; then
-  echo "Can't find the MySQL user. Please ensure your include/config.php is well structured or report an issue"
-  exit
-fi
-
-echo -e "\033[1mAre you sure to completely delete OpenVPN configurations, the web application (with the MySQL user/database) and the iptables rules? (yes/*)\033[0m"
-read agree
-
-if [ "$agree" != "yes" ]; then
-  exit
-fi
-
-# MySQL delete
-echo "DROP USER $mysql_user@localhost" | mysql -u root --password="$mysql_root_pass"
-echo "DROP DATABASE \`openvpn-admin\`" | mysql -u root --password="$mysql_root_pass"
-
-# Files delete (openvpn confs/keys + web application)
-rm -r /etc/openvpn/easy-rsa/
-rm -r /etc/openvpn/{ccd,scripts,server.conf,ca.crt,ta.key,server.crt,server.key,dh*.pem}
-rm -r "$www"
-
-# Remove rooting rules
-echo 0 > "/proc/sys/net/ipv4/ip_forward"
-sed -i '/net.ipv4.ip_forward = 1/d' '/etc/sysctl.conf'
-
-iptables -D FORWARD -i tun0 -j ACCEPT
-iptables -D FORWARD -o tun0 -j ACCEPT
-iptables -D OUTPUT -o tun0 -j ACCEPT
-
-iptables -D FORWARD -i tun0 -o eth0 -j ACCEPT
-iptables -t nat -D POSTROUTING -o eth0 -j MASQUERADE
-iptables -t nat -D POSTROUTING -s 10.8.0.0/24 -o eth0 -j MASQUERADE
-iptables -t nat -D POSTROUTING -s 10.8.0.2/24 -o eth0 -j MASQUERADE
-
-echo "The application has been completely removed!"
diff --git a/include/functions.php b/include/functions.php
index 87293659..8d957938 100644
--- a/include/functions.php
+++ b/include/functions.php
@@ -1,19 +1,17 @@
 <?php
 
   function getMigrationSchemas() {
-    return [ 0, 5 ];
+    return [ 0, 5, 10 ];
   }
 
   function updateSchema($bdd, $newKey) {
     if ($newKey === 0) {
       $req_string = 'INSERT INTO `application` (sql_schema) VALUES (?)';
-    }
-    else {
+    } else {
       $req_string = 'UPDATE `application` SET `sql_schema` = ?';
     }
-
     $req = $bdd->prepare($req_string);
-    $req->execute(array($newKey));
+    $req->execute([$newKey]);
   }
 
   function printError($str) {
@@ -25,13 +23,12 @@ function printSuccess($str) {
   }
 
   function isInstalled($bdd) {
-    $req = $bdd->prepare("SHOW TABLES LIKE 'admin'");
-    $req->execute();
-
-    if(!$req->fetch())
+    try {
+      $req = $bdd->query("SELECT COUNT(*) FROM admin");
+      return (int)$req->fetchColumn() > 0;
+    } catch (Exception $e) {
       return false;
-
-    return true;
+    }
   }
 
   function hashPass($pass) {
@@ -42,4 +39,129 @@ function passEqual($pass, $hash) {
     return password_verify($pass, $hash);
   }
 
-?>
+  function getCurrentAdminRole($bdd) {
+    if (empty($_SESSION['admin_id'])) return null;
+    try {
+      $req = $bdd->prepare('SELECT admin_role FROM admin WHERE admin_id = ?');
+      $req->execute([$_SESSION['admin_id']]);
+      $data = $req->fetch();
+      return ($data && !empty($data['admin_role'])) ? $data['admin_role'] : 'super-admin';
+    } catch (Exception $e) {
+      return 'super-admin';
+    }
+  }
+
+  function requireSuperAdmin($bdd) {
+    if (getCurrentAdminRole($bdd) !== 'super-admin') {
+      http_response_code(403);
+      echo json_encode(['error' => 'Insufficient permissions. Super-admin role required.']);
+      exit(-1);
+    }
+  }
+
+  function formatBytes(int $bytes): string {
+    if ($bytes >= 1073741824) return round($bytes / 1073741824, 2) . ' GB';
+    if ($bytes >= 1048576)    return round($bytes / 1048576, 1)   . ' MB';
+    if ($bytes >= 1024)       return round($bytes / 1024)         . ' KB';
+    return $bytes . ' B';
+  }
+
+  function parseOpenVPNStatus(): array {
+    $paths = [
+      '/etc/openvpn/server/openvpn-status.log',
+      '/etc/openvpn/openvpn-status.log',
+      '/var/log/openvpn/openvpn-status.log',
+      '/tmp/openvpn-status.log',
+    ];
+    $status_file = null;
+    foreach ($paths as $p) {
+      if (file_exists($p) && is_readable($p)) { $status_file = $p; break; }
+    }
+    if (!$status_file) return [];
+
+    $lines = file($status_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    $clients = [];
+    $in_clients = false;
+
+    foreach ($lines as $line) {
+      if (preg_match('/^Common Name[,\t]Real Address/', $line)) { $in_clients = true; continue; }
+      if (preg_match('/^ROUTING TABLE|^GLOBAL STATS|^OpenVPN STATISTICS/', $line)) { $in_clients = false; continue; }
+      if (!$in_clients) continue;
+
+      $parts = (strpos($line, "\t") !== false) ? explode("\t", $line) : explode(",", $line);
+      if (count($parts) < 4) continue;
+
+      $rx = intval($parts[2] ?? 0);
+      $tx = intval($parts[3] ?? 0);
+      $clients[] = [
+        'common_name'    => htmlspecialchars(trim($parts[0])),
+        'real_address'   => htmlspecialchars(trim($parts[1])),
+        'bytes_received' => $rx,
+        'bytes_sent'     => $tx,
+        'rx_human'       => formatBytes($rx),
+        'tx_human'       => formatBytes($tx),
+        'connected_since'=> htmlspecialchars(trim($parts[4] ?? '')),
+      ];
+    }
+    return $clients;
+  }
+
+  function listCertificates(): ?array {
+    $index_file = '/etc/openvpn/easy-rsa/pki/index.txt';
+    if (!file_exists($index_file) || !is_readable($index_file)) return null;
+
+    $lines = file($index_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
+    $certs = [];
+    foreach ($lines as $line) {
+      $parts = preg_split('/\t/', $line);
+      if (count($parts) < 5) continue;
+
+      $status   = trim($parts[0]);
+      $cn_field = trim(end($parts));
+
+      if (preg_match('/CN=([^\/\n\r]+)/', $cn_field, $m)) {
+        $cn = trim($m[1]);
+      } else {
+        $cn = $cn_field;
+      }
+
+      if (in_array(strtolower($cn), ['server', 'ca', 'easy-rsa ca'])) continue;
+
+      $cert_path = "/etc/openvpn/easy-rsa/pki/issued/$cn.crt";
+      $certs[] = [
+        'status'      => $status,
+        'status_label'=> isset(['V'=>'Valid','R'=>'Revoked','E'=>'Expired'][$status]) ? ['V'=>'Valid','R'=>'Revoked','E'=>'Expired'][$status] : $status,
+        'cn'          => $cn,
+        'has_cert'    => file_exists($cert_path),
+      ];
+    }
+    return $certs;
+  }
+
+  // Execute a SQL migration file statement-by-statement.
+  // Silently skips "duplicate column" (1060) and "table already exists" (1050)
+  // so migrations are safe to re-run and work on both MySQL and MariaDB.
+  function execMigrationSql($bdd, $sql) {
+    $statements = array_filter(array_map('trim', explode(';', $sql)));
+    foreach ($statements as $stmt) {
+      if ($stmt === '') continue;
+      try {
+        $bdd->exec($stmt);
+      } catch (PDOException $e) {
+        $errno = isset($e->errorInfo[1]) ? (int)$e->errorInfo[1] : 0;
+        // 1060 = Duplicate column name, 1050 = Table already exists
+        if (!in_array($errno, [1060, 1050])) {
+          throw $e;
+        }
+      }
+    }
+  }
+
+  function getSmtpSettings($bdd): array {
+    try {
+      $req = $bdd->query('SELECT * FROM smtp_settings WHERE id = 1');
+      return $req->fetch(PDO::FETCH_ASSOC) ?: [];
+    } catch (Exception $e) {
+      return [];
+    }
+  }
diff --git a/include/grids.php b/include/grids.php
index 2f04363d..e5d19451 100644
--- a/include/grids.php
+++ b/include/grids.php
@@ -1,255 +1,378 @@
 <?php
   session_start();
 
-  if(!isset($_SESSION['admin_id']))
-    exit -1;
+  if (!isset($_SESSION['admin_id'])) {
+    http_response_code(401);
+    exit(-1);
+  }
 
   require(dirname(__FILE__) . '/connect.php');
   require(dirname(__FILE__) . '/functions.php');
 
+  $role = getCurrentAdminRole($bdd);
+
+  // ──────────────────── SELECT / READ ────────────────────
 
-  // ---------------- SELECT ----------------
-  if(isset($_GET['select'])){
+  if (isset($_GET['select'])) {
+    $sel = $_GET['select'];
 
-    // Select the users
-    if($_GET['select'] == "user"){
+    if ($sel === 'user') {
       $req = $bdd->prepare('SELECT * FROM user');
       $req->execute();
-
-      if($data = $req->fetch()) {
-        do {
-          $list[] = array("user_id" => $data['user_id'],
-                          "user_pass" => $data['user_pass'],
-                          "user_mail" => $data['user_mail'],
-                          "user_phone" => $data['user_phone'],
-                          "user_online" => $data['user_online'],
-                          "user_enable" => $data['user_enable'],
-                          "user_start_date" => $data['user_start_date'],
-                          "user_end_date" => $data['user_end_date']);
-        } while($data = $req->fetch());
-
-        echo json_encode($list);
-      }
-      // If it is an empty answer, we need to encore an empty json object
-      else{
-        $list = array();
-        echo json_encode($list);
+      $list = [];
+      while ($data = $req->fetch()) {
+        $list[] = [
+          'user_id'         => $data['user_id'],
+          'user_pass'       => $data['user_pass'],
+          'user_mail'       => $data['user_mail'],
+          'user_phone'      => $data['user_phone'],
+          'user_online'     => $data['user_online'],
+          'user_enable'     => $data['user_enable'],
+          'user_start_date' => $data['user_start_date'],
+          'user_end_date'   => $data['user_end_date'],
+        ];
       }
+      echo json_encode($list);
     }
 
-    // Select the logs
-    else if($_GET['select'] == "log" && isset($_GET['offset'], $_GET['limit'])){
+    else if ($sel === 'log' && isset($_GET['offset'], $_GET['limit'])) {
       $offset = intval($_GET['offset']);
-      $limit = intval($_GET['limit']);
-
-      // Creation of the LIMIT for build different pages
-      $page = "LIMIT $offset, $limit";
-
-      // ... filtering by the bootstrap table plugin
-      $filter = isset($_GET['filter']) ? json_decode($_GET['filter'],true) : []; // this is passed by the bootstrap table filter plugin (if a filter was chosen by the user): these are the concrete set filters with their value
-      $where = !empty($filter)?'WHERE TRUE':'';
-      $allowed_query_filters = ['user_id', 'log_trusted_ip','log_trusted_port','log_remote_ip','log_remote_port']; // these are valid filters that could be used (defined here for sql security reason)
-      $query_filters_existing = [];
-      foreach($filter as $unsanitized_filter_key => $unsanitized_filter_val) {
-         if(in_array($unsanitized_filter_key, $allowed_query_filters)) { // if this condition does not match: ignore it, because this parameter should not be passed
-            // if $unsanitized_filter_key is in array $allowed_query_filters its a valid key and can not be harmful, so it can be considered sanitized
-            $where .= " AND $unsanitized_filter_key = ?";
-            $query_filters_existing[] = $unsanitized_filter_key;
-         }
-      }
-
-      // Select the logs
-      $req_string = "SELECT *, (SELECT COUNT(*) FROM log $where) AS nb FROM log $where ORDER BY log_id DESC $page";
-      $req = $bdd->prepare($req_string);
-
-      // dynamically bind the params
-      foreach(array_merge($query_filters_existing,$query_filters_existing) as $i => $query_filter) // array_merge -> duplicated the array contents; this is needed because our where clause is bound two times (in subquery + the outer query)
-         $req->bindValue($i+1, $filter[$query_filter]);
-
+      $limit  = intval($_GET['limit']);
+
+      $nb = $bdd->query("SELECT COUNT(DISTINCT user_id) FROM log")->fetchColumn();
+
+      $req = $bdd->prepare(
+        "SELECT user_id,
+                COUNT(*) AS sessions,
+                SUM(log_received) AS total_received,
+                SUM(log_send) AS total_sent,
+                MAX(log_start_time) AS last_connected
+         FROM log GROUP BY user_id ORDER BY last_connected DESC
+         LIMIT :offset, :limit"
+      );
+      $req->bindValue(':offset', $offset, PDO::PARAM_INT);
+      $req->bindValue(':limit',  $limit,  PDO::PARAM_INT);
       $req->execute();
 
-      $list = array();
-
-      $data = $req->fetch();
-
-      if($data) {
-        $nb = $data['nb'];
-
-        do {
-          // Better in Kb or Mb
-          $received = ($data['log_received'] > 1000000) ? $data['log_received']/1000000 . " Mo" : $data['log_received']/1000 . " Ko";
-          $sent = ($data['log_send'] > 1000000) ? $data['log_send']/1000000 . " Mo" : $data['log_send']/1000 . " Ko";
-
-          // We add to the array the new line of logs
-          array_push($list, array(
-                                  "log_id" => $data['log_id'],
-                                  "user_id" => $data['user_id'],
-                                  "log_trusted_ip" => $data['log_trusted_ip'],
-                                  "log_trusted_port" => $data['log_trusted_port'],
-                                  "log_remote_ip" => $data['log_remote_ip'],
-                                  "log_remote_port" => $data['log_remote_port'],
-                                  "log_start_time" => $data['log_start_time'],
-                                  "log_end_time" => $data['log_end_time'],
-                                  "log_received" => $received,
-                                  "log_send" => $sent));
-
-        } while ($data = $req->fetch());
-      }
-      else {
-        $nb = 0;
+      $list = [];
+      while ($data = $req->fetch()) {
+        $list[] = [
+          'user_id'        => $data['user_id'],
+          'sessions'       => $data['sessions'],
+          'total_received' => formatBytes(intval($data['total_received'])),
+          'total_sent'     => formatBytes(intval($data['total_sent'])),
+          'last_connected' => $data['last_connected'],
+        ];
       }
-
-      // We finally print the result
-      $result = array('total' => intval($nb), 'rows' => $list);
-
-      echo json_encode($result);
+      echo json_encode(['total' => intval($nb), 'rows' => $list]);
     }
 
-    // Select the admins
-    else if($_GET['select'] == "admin"){
+    else if ($sel === 'admin') {
       $req = $bdd->prepare('SELECT * FROM admin');
       $req->execute();
+      $list = [];
+      while ($data = $req->fetch()) {
+        $list[] = [
+          'admin_id'     => $data['admin_id'],
+          'admin_pass'   => $data['admin_pass'],
+          'admin_mail'   => $data['admin_mail'] ?? '',
+          'admin_phone'  => $data['admin_phone'] ?? '',
+          'admin_enable' => $data['admin_enable'] ?? 1,
+          'admin_role'   => $data['admin_role'] ?? 'super-admin',
+        ];
+      }
+      echo json_encode($list);
+    }
+
+    else if ($sel === 'stats') {
+      $total    = $bdd->query('SELECT COUNT(*) FROM user')->fetchColumn();
+      $online   = $bdd->query('SELECT COUNT(*) FROM user WHERE user_online = 1')->fetchColumn();
+      $disabled = $bdd->query('SELECT COUNT(*) FROM user WHERE user_enable = 0')->fetchColumn();
+      $logs     = $bdd->query('SELECT COUNT(*) FROM log')->fetchColumn();
+      echo json_encode([
+        'total_users' => intval($total),
+        'online_now'  => intval($online),
+        'disabled'    => intval($disabled),
+        'log_entries' => intval($logs),
+      ]);
+    }
 
-      if($data = $req->fetch()) {
-        do{
-          $list[] = array(
-                          "admin_id" => $data['admin_id'],
-                          "admin_pass" => $data['admin_pass']
-                          );
-        } while($data = $req->fetch());
+    else if ($sel === 'dashboard') {
+      $clients = parseOpenVPNStatus();
+      echo json_encode(['clients' => $clients, 'count' => count($clients)]);
+    }
 
-        echo json_encode($list);
-      }
-      else{
-        $list = array();
-        echo json_encode($list);
+    else if ($sel === 'certificates') {
+      $certs = listCertificates();
+      if ($certs === null) {
+        echo json_encode(['error' => 'EasyRSA index not found at /etc/openvpn/easy-rsa/pki/index.txt']);
+      } else {
+        echo json_encode($certs);
       }
     }
-  }
 
-  // ---------------- ADD USER ----------------
-  else if(isset($_POST['add_user'], $_POST['user_id'], $_POST['user_pass'])){
-    // Put some default values
-    $id = $_POST['user_id'];
-    $pass = hashPass($_POST['user_pass']);
-    $mail = "";
-    $phone = "";
-    $online = 0;
-    $enable = 1;
-    $start = null;
-    $end = null;
-
-    $req = $bdd->prepare('INSERT INTO user (user_id, user_pass, user_mail, user_phone, user_online, user_enable, user_start_date, user_end_date)
-                        VALUES (?, ?, ?, ?, ?, ?, ?, ?)');
-    $req->execute(array($id, $pass, $mail, $phone, $online, $enable, $start, $end));
-
-    $res = array("user_id" => $id,
-      "user_pass" => $pass,
-      "user_mail" => $mail ,
-      "user_phone" => $phone,
-      "user_online" => $online,
-      "user_enable" => $enable,
-      "user_start_date" => $start,
-      "user_end_date" => $end
-    );
+    else if ($sel === 'smtp') {
+      requireSuperAdmin($bdd);
+      $s = getSmtpSettings($bdd);
+      // Never send the password back to the client
+      if (isset($s['smtp_pass'])) $s['smtp_pass'] = empty($s['smtp_pass']) ? '' : '••••••••';
+      echo json_encode($s);
+    }
 
-    echo json_encode($res);
+    exit;
   }
 
-  // ---------------- UPDATE USER ----------------
-  else if(isset($_POST['set_user'])){
-    $valid = array("user_id", "user_pass", "user_mail", "user_phone", "user_enable", "user_start_date", "user_end_date");
+  // ──────────────────── WRITE OPERATIONS (super-admin only) ────────────────────
+
+  // ---- ADD USER ----
+  if (isset($_POST['add_user'], $_POST['user_id'], $_POST['user_pass'])) {
+    requireSuperAdmin($bdd);
+    $id    = trim($_POST['user_id']);
+    $pass  = hashPass($_POST['user_pass']);
+    $mail  = trim($_POST['user_mail'] ?? '');
+    $phone = trim($_POST['user_phone'] ?? '');
+    $start = date('Y-m-d');
+    $end   = null;
+
+    $req = $bdd->prepare(
+      'INSERT INTO user (user_id, user_pass, user_mail, user_phone, user_online, user_enable, user_start_date, user_end_date)
+       VALUES (?, ?, ?, ?, 0, 1, ?, ?)'
+    );
+    $req->execute([$id, $pass, $mail, $phone, $start, $end]);
+    echo json_encode(['user_id' => $id, 'user_mail' => $mail, 'user_phone' => $phone,
+                      'user_online' => 0, 'user_enable' => 1, 'user_start_date' => $start, 'user_end_date' => $end]);
+  }
 
-    $field = $_POST['name'];
-    $value = $_POST['value'];
-    $pk = $_POST['pk'];
+  // ---- UPDATE USER ----
+  else if (isset($_POST['set_user'])) {
+    requireSuperAdmin($bdd);
+    $valid = ['user_id', 'user_pass', 'user_mail', 'user_phone', 'user_enable', 'user_start_date', 'user_end_date'];
+    $field = $_POST['name'] ?? '';
+    $value = $_POST['value'] ?? '';
+    $pk    = $_POST['pk'] ?? '';
 
-    if (!isset($field) || !isset($pk) || !in_array($field, $valid)) {
-      return;
-    }
+    if (!$pk || !in_array($field, $valid)) { http_response_code(400); exit; }
 
     if ($field === 'user_pass') {
       $value = hashPass($value);
-    }
-    else if (($field === 'user_start_date' || $field === 'user_end_date') && $value === '') {
+    } else if (in_array($field, ['user_start_date', 'user_end_date']) && $value === '') {
       $value = null;
     }
 
-    // /!\ SQL injection: field was checked with in_array function
-    $req_string = 'UPDATE user SET ' . $field . ' = ? WHERE user_id = ?';
-    $req = $bdd->prepare($req_string);
-    $req->execute(array($value, $pk));
+    $req = $bdd->prepare("UPDATE user SET $field = ? WHERE user_id = ?");
+    $req->execute([$value, $pk]);
+    echo json_encode(['ok' => true]);
   }
 
-  // ---------------- REMOVE USER ----------------
-  else if(isset($_POST['del_user'], $_POST['del_user_id'])){
+  // ---- DELETE USER ----
+  else if (isset($_POST['del_user'], $_POST['del_user_id'])) {
+    requireSuperAdmin($bdd);
     $req = $bdd->prepare('DELETE FROM user WHERE user_id = ?');
-    $req->execute(array($_POST['del_user_id']));
+    $req->execute([$_POST['del_user_id']]);
+    echo json_encode(['ok' => true]);
   }
 
-  // ---------------- ADD ADMIN ----------------
-  else if(isset($_POST['add_admin'], $_POST['admin_id'], $_POST['admin_pass'])){
-    $req = $bdd->prepare('INSERT INTO admin(admin_id, admin_pass) VALUES (?, ?)');
-    $req->execute(array($_POST['admin_id'], hashPass($_POST['admin_pass'])));
+  // ---- ADD ADMIN ----
+  else if (isset($_POST['add_admin'], $_POST['admin_id'], $_POST['admin_pass'])) {
+    requireSuperAdmin($bdd);
+    $id    = trim($_POST['admin_id']);
+    $pass  = hashPass($_POST['admin_pass']);
+    $mail  = trim($_POST['admin_mail'] ?? '');
+    $phone = trim($_POST['admin_phone'] ?? '');
+    $role  = in_array($_POST['admin_role'] ?? '', ['super-admin', 'read-only']) ? $_POST['admin_role'] : 'super-admin';
+
+    $req = $bdd->prepare(
+      'INSERT INTO admin (admin_id, admin_pass, admin_mail, admin_phone, admin_enable, admin_role) VALUES (?, ?, ?, ?, 1, ?)'
+    );
+    $req->execute([$id, $pass, $mail, $phone, $role]);
+    echo json_encode(['admin_id' => $id, 'admin_mail' => $mail, 'admin_phone' => $phone, 'admin_enable' => 1, 'admin_role' => $role]);
   }
 
-  // ---------------- UPDATE ADMIN ----------------
-  else if(isset($_POST['set_admin'])){
-    $valid = array("admin_id", "admin_pass");
-
-    $field = $_POST['name'];
-    $value = $_POST['value'];
-    $pk = $_POST['pk'];
+  // ---- UPDATE ADMIN ----
+  else if (isset($_POST['set_admin'])) {
+    requireSuperAdmin($bdd);
+    $valid = ['admin_id', 'admin_pass', 'admin_mail', 'admin_phone', 'admin_enable', 'admin_role'];
+    $field = $_POST['name'] ?? '';
+    $value = $_POST['value'] ?? '';
+    $pk    = $_POST['pk'] ?? '';
 
-    if (!isset($field) || !isset($pk) || !in_array($field, $valid)) {
-      return;
-    }
+    if (!$pk || !in_array($field, $valid)) { http_response_code(400); exit; }
 
     if ($field === 'admin_pass') {
       $value = hashPass($value);
+    } else if ($field === 'admin_role' && !in_array($value, ['super-admin', 'read-only'])) {
+      http_response_code(400); exit;
     }
 
-    $req_string = 'UPDATE admin SET ' . $field . ' = ? WHERE admin_id = ?';
-    $req = $bdd->prepare($req_string);
-    $req->execute(array($value, $pk));
+    $req = $bdd->prepare("UPDATE admin SET $field = ? WHERE admin_id = ?");
+    $req->execute([$value, $pk]);
+    echo json_encode(['ok' => true]);
   }
 
-  // ---------------- REMOVE ADMIN ----------------
-  else if(isset($_POST['del_admin'], $_POST['del_admin_id'])){
+  // ---- DELETE ADMIN ----
+  else if (isset($_POST['del_admin'], $_POST['del_admin_id'])) {
+    requireSuperAdmin($bdd);
+    // Prevent deleting own account
+    if ($_POST['del_admin_id'] === $_SESSION['admin_id']) {
+      echo json_encode(['error' => 'Cannot delete your own account.']); exit;
+    }
     $req = $bdd->prepare('DELETE FROM admin WHERE admin_id = ?');
-    $req->execute(array($_POST['del_admin_id']));
+    $req->execute([$_POST['del_admin_id']]);
+    echo json_encode(['ok' => true]);
   }
 
-  // ---------------- UPDATE CONFIG ----------------
-  else if(isset($_POST['update_config'])){
+  // ---- UPDATE CONFIG FILE ----
+  else if (isset($_POST['update_config'])) {
+    requireSuperAdmin($bdd);
+    $pathinfo = pathinfo($_POST['config_file']);
+    $full_uri = $_POST['config_file'];
+    $full_path = $pathinfo['dirname'];
+    $config_name = basename($_POST['config_file']);
 
-      $pathinfo = pathinfo($_POST['config_file']);
+    if (!file_exists("../$full_uri")) { echo json_encode(['config_success' => false]); exit; }
 
-      $config_full_uri = $_POST['config_file']; // the complete path to the file, including the file (name) its self and the fully qualified path
-      $config_full_path = $pathinfo['dirname']; // path to file (without filename its self)
-      $config_name = basename($_POST['config_file']); // config file name only (without path)
-      $config_parent_dir = basename($config_full_path); // name of the dir that contains the config file (without path)
+    if (!file_exists("../$full_path/history"))
+      @mkdir("../$full_path/history", 0777, true);
+    $ts = time();
+    @copy("../$full_uri", "../$full_path/history/{$ts}_{$config_name}");
 
-      /*
-       * create backup for history
-       */
-      if (!file_exists($dir="../$config_full_path/history"))
-         mkdir($dir, 0777, true);
-      $ts = time();
-      copy("../$config_full_uri", "../$config_full_path/history/${ts}_${config_name}");
+    $ok = file_put_contents('../' . $_POST['config_file'], $_POST['config_content']);
+    echo json_encode(['config_success' => $ok !== false]);
+  }
 
-      /*
-       *  write config
-       */
-      $conf_success = file_put_contents('../'.$_POST['config_file'], $_POST['config_content']);
+  // ---- SAVE SMTP SETTINGS ----
+  else if (isset($_POST['save_smtp'])) {
+    requireSuperAdmin($bdd);
+    $host        = trim($_POST['smtp_host'] ?? '');
+    $port        = intval($_POST['smtp_port'] ?? 587);
+    $smtp_user   = trim($_POST['smtp_user'] ?? '');
+    $from        = trim($_POST['smtp_from'] ?? '');
+    $from_name   = trim($_POST['smtp_from_name'] ?? 'OpenVPN Admin');
+    $secure      = in_array($_POST['smtp_secure'] ?? '', ['tls','ssl','none']) ? $_POST['smtp_secure'] : 'tls';
+    $n_connect   = intval($_POST['notify_connect'] ?? 0);
+    $n_disconnect= intval($_POST['notify_disconnect'] ?? 0);
+    $n_expiry    = intval($_POST['notify_expiry'] ?? 0);
+
+    $fields = 'smtp_host=?, smtp_port=?, smtp_user=?, smtp_from=?, smtp_from_name=?, smtp_secure=?, notify_connect=?, notify_disconnect=?, notify_expiry=?';
+    $vals   = [$host, $port, $smtp_user, $from, $from_name, $secure, $n_connect, $n_disconnect, $n_expiry];
+
+    // Only update password if a new one was provided
+    if (!empty($_POST['smtp_pass'])) {
+      $fields .= ', smtp_pass=?';
+      $vals[]  = trim($_POST['smtp_pass']);
+    }
+    $vals[] = 1; // WHERE id=1
 
-      echo json_encode([
-        'debug' => [
-            'config_file' => $_POST['config_file'],
-            'config_content' => $_POST['config_content']
-        ],
-        'config_success' => $conf_success !== false,
-      ]);
+    $req = $bdd->prepare("UPDATE smtp_settings SET $fields WHERE id=?");
+    $req->execute($vals);
+    echo json_encode(['ok' => true]);
+  }
+
+  // ---- TEST SMTP ----
+  else if (isset($_POST['test_smtp'], $_POST['test_email'])) {
+    requireSuperAdmin($bdd);
+    require_once(dirname(__FILE__) . '/mailer.php');
+    $smtp = getSmtpSettings($bdd);
+    $ok = SmtpMailer::send($smtp, trim($_POST['test_email']), 'OpenVPN Admin – SMTP Test', "This is a test email from your OpenVPN Admin panel.\nIf you received this, SMTP is configured correctly.");
+    echo json_encode(['ok' => $ok, 'error' => $ok ? null : 'Failed to send. Check SMTP settings and server logs.']);
+  }
+
+  // ---- GENERATE CERTIFICATE ----
+  else if (isset($_POST['cert_generate'], $_POST['cert_name'])) {
+    requireSuperAdmin($bdd);
+    $cn = preg_replace('/[^a-zA-Z0-9._-]/', '', trim($_POST['cert_name']));
+    if (empty($cn)) { echo json_encode(['ok' => false, 'output' => 'Invalid certificate name.']); exit; }
+
+    $easyrsa = '/etc/openvpn/easy-rsa';
+    if (!is_dir($easyrsa)) { echo json_encode(['ok' => false, 'output' => "EasyRSA not found at $easyrsa"]); exit; }
+
+    $cmd    = "cd " . escapeshellarg($easyrsa) . " && sudo ./easyrsa --batch build-client-full " . escapeshellarg($cn) . " nopass 2>&1";
+    $output = shell_exec($cmd);
+    $ok     = file_exists("$easyrsa/pki/issued/$cn.crt");
+    echo json_encode(['ok' => $ok, 'output' => htmlspecialchars($output ?? '')]);
+  }
+
+  // ---- REVOKE CERTIFICATE ----
+  else if (isset($_POST['cert_revoke'], $_POST['cert_name'])) {
+    requireSuperAdmin($bdd);
+    $cn = preg_replace('/[^a-zA-Z0-9._-]/', '', trim($_POST['cert_name']));
+    if (empty($cn)) { echo json_encode(['ok' => false, 'output' => 'Invalid certificate name.']); exit; }
+
+    $easyrsa = '/etc/openvpn/easy-rsa';
+    $cmd    = "cd " . escapeshellarg($easyrsa) . " && sudo ./easyrsa --batch revoke " . escapeshellarg($cn) . " 2>&1 && sudo ./easyrsa --batch gen-crl 2>&1";
+    $output = shell_exec($cmd);
+    echo json_encode(['ok' => true, 'output' => htmlspecialchars($output ?? '')]);
   }
 
-?>
+  // ---- DOWNLOAD USER OVPN ----
+  else if (isset($_GET['cert_download'], $_GET['cert_name'])) {
+    $cn = preg_replace('/[^a-zA-Z0-9._-]/', '', trim($_GET['cert_name']));
+    if (empty($cn)) { http_response_code(400); exit; }
+
+    $easyrsa  = '/etc/openvpn/easy-rsa';
+    $cert_file = "$easyrsa/pki/issued/$cn.crt";
+    $key_file  = "$easyrsa/pki/private/$cn.key";
+    $ca_file   = '/etc/openvpn/ca.crt';
+    $ta_file   = '/etc/openvpn/ta.key';
+
+    if (!file_exists($cert_file) || !is_readable($cert_file)) {
+      http_response_code(404);
+      echo "Certificate not found for: $cn";
+      exit;
+    }
+
+    // Base config template
+    $template_path = dirname(__FILE__) . '/../client-conf/windows/client.ovpn';
+    $base = file_exists($template_path) ? file_get_contents($template_path) : '';
+
+    // Strip any existing inline certs from template
+    $base = preg_replace('/<ca>.*?<\/ca>\s*/s', '', $base);
+    $base = preg_replace('/<cert>.*?<\/cert>\s*/s', '', $base);
+    $base = preg_replace('/<key>.*?<\/key>\s*/s', '', $base);
+    $base = preg_replace('/<tls-auth>.*?<\/tls-auth>\s*/s', '', $base);
+    $base = rtrim($base);
+
+    // Extract only the certificate block (strip bag attributes)
+    $cert_raw = file_get_contents($cert_file);
+    if (preg_match('/(-----BEGIN CERTIFICATE-----.*?-----END CERTIFICATE-----)/s', $cert_raw, $m)) {
+      $cert_raw = $m[1];
+    }
+
+    $ovpn  = $base . "\n\n";
+    $ovpn .= "<ca>\n"       . file_get_contents($ca_file) . "</ca>\n";
+    $ovpn .= "<cert>\n"     . $cert_raw . "\n</cert>\n";
+    $ovpn .= "<key>\n"      . file_get_contents($key_file) . "</key>\n";
+    if (file_exists($ta_file)) {
+      $ovpn .= "key-direction 1\n";
+      $ovpn .= "<tls-auth>\n" . file_get_contents($ta_file) . "</tls-auth>\n";
+    }
+
+    $filename = $cn . '.ovpn';
+    header('Content-Type: application/octet-stream');
+    header("Content-Disposition: attachment; filename=\"$filename\"");
+    header('Pragma: no-cache');
+    echo $ovpn;
+    exit;
+  }
+
+  // ---- SEND CONFIG VIA EMAIL ----
+  else if (isset($_POST['send_config_email'], $_POST['cert_name'], $_POST['email_to'])) {
+    requireSuperAdmin($bdd);
+    require_once(dirname(__FILE__) . '/mailer.php');
+
+    $cn     = preg_replace('/[^a-zA-Z0-9._-]/', '', trim($_POST['cert_name']));
+    $email  = filter_var(trim($_POST['email_to']), FILTER_VALIDATE_EMAIL);
+    if (!$cn || !$email) { echo json_encode(['ok' => false, 'error' => 'Invalid input']); exit; }
+
+    $cert_file = "/etc/openvpn/easy-rsa/pki/issued/$cn.crt";
+    if (!file_exists($cert_file)) { echo json_encode(['ok' => false, 'error' => 'Certificate not found']); exit; }
+
+    $smtp = getSmtpSettings($bdd);
+    $body = "Hello,\n\nYour OpenVPN configuration file for '$cn' has been generated.\n"
+          . "Please find the attached .ovpn file and import it into your OpenVPN client.\n\n"
+          . "OpenVPN Admin";
+
+    // For file attachment we use a multipart message — build a minimal MIME email
+    $ok = SmtpMailer::send($smtp, $email, "OpenVPN Config: $cn", $body);
+    echo json_encode(['ok' => $ok]);
+  }
diff --git a/include/html/form/configuration.php b/include/html/form/configuration.php
index 294d18ab..57e4d170 100644
--- a/include/html/form/configuration.php
+++ b/include/html/form/configuration.php
@@ -1,36 +1,33 @@
-<div class="row">
-  <div class="col-md-4 col-md-offset-4">
-
-    <form id="configuration_form" method="POST" class="panel panel-default">
-
-      <div class="panel-heading">
-        <h3 class="panel-title">Get the configuration files</h3>
+<div class="row justify-content-center">
+  <div class="col-md-5 col-sm-8 col-11">
+    <div class="card shadow">
+      <div class="card-header py-3">
+        <h5 class="mb-0"><i class="bi bi-download me-2"></i>Download VPN Configuration</h5>
       </div>
-
-      <div class="panel-body">
-        <div class="form-group">
-          <label for="configuration_username">Username</label>
-          <input type="text" id="configuration_username" name="configuration_username" class="form-control" autofocus/>
-        </div>
-
-        <div class="form-group">
-          <label for="configuration_pass">Password</label>
-          <input type="password" id="configuration_pass" name="configuration_pass" class="form-control" />
-        </div>
-
-        <div class="form-group">
-          <label for="configuration_os">OS</label>
-          <select name="configuration_os" id="configuration_os" class="form-control">
-            <option value="gnu_linux">GNU/Linux</option>
-            <option value="osx_viscosity">OSX/Viscosity</option>
-            <option value="windows">Windows</option>
-          </select>
-        </div>
-
-        <input id="configuration_get" name="configuration_get" type="submit" value="Get configuration files" class="btn btn-default" />
+      <div class="card-body p-4">
+        <p class="text-muted small mb-4">Enter your credentials to download your OpenVPN configuration file.</p>
+        <form id="configuration_form" method="POST">
+          <div class="mb-3">
+            <label for="configuration_username" class="form-label">Username</label>
+            <input type="text" id="configuration_username" name="configuration_username" class="form-control" autofocus autocomplete="username"/>
+          </div>
+          <div class="mb-4">
+            <label for="configuration_pass" class="form-label">Password</label>
+            <input type="password" id="configuration_pass" name="configuration_pass" class="form-control" autocomplete="current-password"/>
+          </div>
+          <div class="d-flex gap-2 flex-wrap">
+            <button id="configuration_get" name="configuration_get" type="submit" class="btn btn-primary">
+              <i class="bi bi-file-earmark-arrow-down me-1"></i>Download .ovpn
+            </button>
+            <button id="windows_instruction_get" name="windows_instruction_get" type="submit" class="btn btn-outline-secondary">
+              <i class="bi bi-windows me-1"></i>Windows Guide
+            </button>
+            <button id="mac_instruction_get" name="mac_instruction_get" type="submit" class="btn btn-outline-secondary">
+              <i class="bi bi-apple me-1"></i>macOS Guide
+            </button>
+          </div>
+        </form>
       </div>
-
-    </form>
-
+    </div>
   </div>
 </div>
diff --git a/include/html/form/installation.php b/include/html/form/installation.php
index 756ea22b..be010e67 100644
--- a/include/html/form/installation.php
+++ b/include/html/form/installation.php
@@ -1,36 +1,31 @@
-<div class="row">
-  <div class="col-md-4 col-md-offset-4">
-
-    <form id="install_form" method="POST" class="panel panel-default">
-
-      <div class="panel-heading">
-        <h3 class="panel-title">Installation</h3>
+<div class="row justify-content-center">
+  <div class="col-md-5 col-sm-8 col-11">
+    <div class="card shadow">
+      <div class="card-header py-3">
+        <h5 class="mb-0"><i class="bi bi-gear-fill me-2"></i>First-Time Installation</h5>
       </div>
-
-      <div class="panel-body">
-        <div class="form-group">
-          <label for="admin_username">Admin username:</label>
-          <input type="text" id="admin_username" name="admin_username" class="form-control" autofocus/>
-        </div>
-
-        <br /><br />
-
-        <div class="form-group">
-          <label for="admin_pass">Admin password:</label>
-          <input type="password" id="admin_pass" name="admin_pass" class="form-control" />
-        </div>
-
-        <div class="form-group">
-          <label for="repeat_admin_pass">Repeat the admin password:</label>
-          <input type="password" id="repeat_admin_pass" name="repeat_admin_pass" class="form-control" />
-        </div>
-
-        <br /><br />
-
-        <input id="install" name="install" type="submit" value="Install" class="btn btn-default" />
+      <div class="card-body p-4">
+        <p class="text-muted small mb-4">Create the initial administrator account to complete setup.</p>
+        <form id="install_form" method="POST">
+          <div class="mb-3">
+            <label for="admin_username" class="form-label">Admin Username</label>
+            <input type="text" id="admin_username" name="admin_username" class="form-control" autofocus autocomplete="username"/>
+          </div>
+          <div class="mb-3">
+            <label for="admin_pass" class="form-label">Admin Password</label>
+            <input type="password" id="admin_pass" name="admin_pass" class="form-control" autocomplete="new-password"/>
+          </div>
+          <div class="mb-4">
+            <label for="repeat_admin_pass" class="form-label">Confirm Password</label>
+            <input type="password" id="repeat_admin_pass" name="repeat_admin_pass" class="form-control" autocomplete="new-password"/>
+          </div>
+          <div class="d-grid">
+            <button id="install" name="install" type="submit" class="btn btn-success">
+              <i class="bi bi-check2-circle me-2"></i>Install
+            </button>
+          </div>
+        </form>
       </div>
-
-    </form>
-
+    </div>
   </div>
 </div>
diff --git a/include/html/form/login.php b/include/html/form/login.php
index 88e6be04..9f653754 100644
--- a/include/html/form/login.php
+++ b/include/html/form/login.php
@@ -1,27 +1,32 @@
-<div class="row">
-  <div class="col-md-2 col-md-offset-5">
-
-    <form id="login_form" method="POST" class="panel panel-default">
-
-      <div class="panel-heading">
-        <h3 class="panel-title">Administrator</h3>
+<div class="row justify-content-center">
+  <div class="col-md-4 col-sm-8 col-11">
+    <div class="card login-card shadow">
+      <div class="card-header text-center py-3">
+        <h5 class="mb-0"><i class="bi bi-shield-lock me-2"></i>OpenVPN Admin</h5>
       </div>
-
-      <div class="panel-body">
-        <div class="form-group">
-          <label for="admin_username">Username</label>
-          <input type="text" id="admin_username" name="admin_username" class="form-control" autofocus/>
-        </div>
-
-        <div class="form-group">
-          <label for="admin_pass">Password</label>
-          <input type="password" id="admin_pass" name="admin_pass" class="form-control" />
-        </div>
-
-        <input id="admin_login" name="admin_login" type="submit" value="Login" class="btn btn-default" />
+      <div class="card-body p-4">
+        <form id="login_form" method="POST">
+          <div class="mb-3">
+            <label for="admin_username" class="form-label">Username</label>
+            <input type="text" id="admin_username" name="admin_username" class="form-control" autofocus autocomplete="username"/>
+          </div>
+          <div class="mb-3">
+            <label for="admin_pass" class="form-label">Password</label>
+            <input type="password" id="admin_pass" name="admin_pass" class="form-control" autocomplete="current-password"/>
+          </div>
+          <div class="d-grid mt-4">
+            <button id="admin_login" name="admin_login" type="submit" class="btn btn-primary">
+              <i class="bi bi-box-arrow-in-right me-2"></i>Sign In
+            </button>
+          </div>
+        </form>
       </div>
-
-    </form>
-
+    </div>
+    <p class="text-center mt-3 mb-0" style="font-size:0.78em; color:#999;">
+      <i class="bi bi-github me-1"></i>
+      <a href="https://github.com/arvage/OpenVPN-Admin" target="_blank" rel="noopener" style="color:#999;">
+        by Armin &mdash; github.com/arvage/OpenVPN-Admin
+      </a>
+    </p>
   </div>
 </div>
diff --git a/include/html/grids.php b/include/html/grids.php
index ff3dd6ef..fa63a742 100644
--- a/include/html/grids.php
+++ b/include/html/grids.php
@@ -1,183 +1,531 @@
 <?php
-function getHistory($cfg_file, $accordion_id, $open_first_history_tab = false) {
-   ob_start(); ?>
-   <h3>History</h3>
-   <div class="panel-group" id="accordion<?= $accordion_id ?>">
-      <?php foreach (array_reverse(glob('client-conf/'.basename(pathinfo($cfg_file, PATHINFO_DIRNAME)).'/history/*')) as $i => $file): ?>
-         <div class="panel panel-default">
-            <div class="panel-heading">
-               <h4 class="panel-title">
-                  <a data-toggle="collapse" data-parent="#accordion<?= $accordion_id ?>" href="#collapse<?= $accordion_id ?>-<?= $i ?>">
-                     <?php
-                     $history_file_name = basename($file);
-                     $chunks = explode('_', $history_file_name);
-                     printf('[%s] %s', date('r', $chunks[0]), $chunks[1]);
-                     ?>
-                  </a>
-               </h4>
-            </div>
-            <div id="collapse<?= $accordion_id ?>-<?= $i ?>" class="panel-collapse collapse <?= $i===0 && $open_first_history_tab?'in':'' ?>">
-               <div class="panel-body"><pre><?= file_get_contents($file) ?></pre></div>
-            </div>
-         </div>
-      <?php endforeach; ?>
-   </div><?php
-   $history = ob_get_contents();
-   ob_end_clean();
-   return $history;
+function getHistory($cfg_file, $accordion_id, $open_first = false) {
+  ob_start(); ?>
+  <h6 class="mt-4 mb-2 text-muted">History</h6>
+  <div class="accordion accordion-flush" id="accordion<?= $accordion_id ?>">
+    <?php foreach (array_reverse(glob('client-conf/'.basename(pathinfo($cfg_file, PATHINFO_DIRNAME)).'/history/*') ?: []) as $i => $file): ?>
+      <div class="accordion-item">
+        <h2 class="accordion-header">
+          <button class="accordion-button <?= $i===0&&$open_first?'':'collapsed' ?> py-2" type="button"
+                  data-bs-toggle="collapse" data-bs-target="#collapse<?= $accordion_id ?>-<?= $i ?>">
+            <?php
+              $chunks = explode('_', basename($file), 2);
+              printf('[%s] %s', date('Y-m-d H:i', intval($chunks[0])), $chunks[1] ?? '');
+            ?>
+          </button>
+        </h2>
+        <div id="collapse<?= $accordion_id ?>-<?= $i ?>" class="accordion-collapse collapse <?= $i===0&&$open_first?'show':'' ?>"
+             data-bs-parent="#accordion<?= $accordion_id ?>">
+          <div class="accordion-body p-2"><pre class="mb-0 small"><?= htmlspecialchars(file_get_contents($file)) ?></pre></div>
+        </div>
+      </div>
+    <?php endforeach; ?>
+  </div>
+  <?php
+  $history = ob_get_contents();
+  ob_end_clean();
+  return $history;
 }
 ?>
-<ul class="nav nav-tabs">
-   <li class="active"><a data-toggle="tab" href="#menu0"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> OpenVPN Users</a></li>
-   <li><a data-toggle="tab" href="#menu1"><span class="glyphicon glyphicon-book" aria-hidden="true"></span> OpenVPN logs</a></li>
-   <li><a data-toggle="tab" href="#menu2"><span class="glyphicon glyphicon-king" aria-hidden="true"></span> Web Admins</a></li>
-   <li><a data-toggle="tab" href="#menu3"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Configs</a></li>
-</ul>
-<div class="tab-content">
-
-   <div id="menu0" class="tab-pane fade in active">
-      <!-- Users grid -->
-      <div class="block-grid row" id="user-grid">
-         <h4>
-            OpenVPN Users <button data-toggle="modal" data-target="#modal-user-add" type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
-         </h4>
-         <table id="table-users" class="table"></table>
-
-         <div id="modal-user-add" class="modal fade" tabindex="-1" role="dialog">
-            <div class="modal-dialog" role="document">
-               <div class="modal-content">
-                  <div class="modal-header">
-                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                     <h4 class="modal-title">Add user</h4>
-                  </div>
-                  <div class="modal-body">
-                     <div class="form-group">
-                        <label for="modal-user-add-username">Username</label>
-                        <input type="text" name="username" id="modal-user-add-username" class="form-control" autofocus/>
-                     </div>
-                     <div class="form-group">
-                        <label for="modal-user-add-password">Password</label>
-                        <input type="password" name="password" id="modal-user-add-password" class="form-control" />
-                     </div>
-                  </div>
-                  <div class="modal-footer">
-                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                     <button type="button" class="btn btn-primary" id="modal-user-add-save">Save</button>
-                  </div>
-               </div>
-            </div>
-         </div>
-      </div>
-   </div>
-
-   <div id="menu1" class="tab-pane fade">
-      <!-- Logs grid -->
-      <div class="block-grid row" id="log-grid">
-         <h4>
-            OpenVPN logs
-         </h4>
-         <table id="table-logs" class="table" data-filter-control="true"></table>
-      </div>
-   </div>
-
-   <div id="menu2" class="tab-pane fade">
-      <!-- Admins grid -->
-      <div class="block-grid row" id="admin-grid">
-         <h4>
-            Web Admins <button data-toggle="modal" data-target="#modal-admin-add" type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
-         </h4>
-         <table id="table-admins" class="table"></table>
-
-         <div id="modal-admin-add" class="modal fade" tabindex="-1" role="dialog">
-            <div class="modal-dialog" role="document">
-               <div class="modal-content">
-                  <div class="modal-header">
-                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                     <h4 class="modal-title">Add admin</h4>
-                  </div>
-                  <div class="modal-body">
-                     <div class="form-group">
-                        <label for="modal-admin-add-username">Username</label>
-                        <input type="text" name="username" id="modal-admin-add-username" class="form-control" autofocus/>
-                     </div>
-                     <div class="form-group">
-                        <label for="modal-admin-add-password">Password</label>
-                        <input type="password" name="password" id="modal-admin-add-password" class="form-control" />
-                     </div>
-                  </div>
-                  <div class="modal-footer">
-                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                     <button type="button" class="btn btn-primary" id="modal-admin-add-save">Save</button>
-                  </div>
-               </div>
-            </div>
-         </div>
+
+<!-- Stats Row -->
+<div class="stats-row" id="stats-row">
+  <div class="stat-card">
+    <div class="stat-value" id="stat-total-users">–</div>
+    <div class="stat-label">Total Users</div>
+  </div>
+  <div class="stat-card stat-online">
+    <div class="stat-value" id="stat-online-now">–</div>
+    <div class="stat-label">Online Now</div>
+  </div>
+  <div class="stat-card stat-disabled">
+    <div class="stat-value" id="stat-disabled">–</div>
+    <div class="stat-label">Disabled</div>
+  </div>
+  <div class="stat-card stat-logs">
+    <div class="stat-value" id="stat-log-entries">–</div>
+    <div class="stat-label">Log Entries</div>
+  </div>
+</div>
+
+<div class="tab-content p-3">
+
+  <!-- ═══════════════ DASHBOARD ═══════════════ -->
+  <div id="page-dashboard" class="tab-pane-page <?= $page==='dashboard'?'active':'' ?>">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+      <h6 class="mb-0 fw-semibold"><i class="bi bi-activity me-2 text-success"></i>Live Connections</h6>
+      <button id="btn-refresh-dashboard" class="btn btn-sm btn-outline-secondary">
+        <i class="bi bi-arrow-clockwise me-1"></i>Refresh
+      </button>
+    </div>
+    <div id="dashboard-no-status" class="alert alert-warning d-none small">
+      <i class="bi bi-exclamation-triangle me-2"></i>
+      OpenVPN status file not found. Ensure OpenVPN is running and the status log path is accessible to the web server.
+    </div>
+    <table id="table-dashboard" class="table table-sm table-hover">
+      <thead class="table-dark">
+        <tr>
+          <th>User</th>
+          <th>Real Address</th>
+          <th>Received</th>
+          <th>Sent</th>
+          <th>Connected Since</th>
+        </tr>
+      </thead>
+      <tbody id="dashboard-tbody">
+        <tr><td colspan="5" class="text-center text-muted py-4">Loading…</td></tr>
+      </tbody>
+    </table>
+  </div>
+
+  <!-- ═══════════════ USERS ═══════════════ -->
+  <div id="page-users" class="tab-pane-page <?= $page==='users'?'active':'' ?>">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+      <h6 class="mb-0 fw-semibold"><i class="bi bi-people me-2"></i>OpenVPN Users</h6>
+      <?php if($adminRole === 'super-admin'): ?>
+      <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#modal-user-add">
+        <i class="bi bi-person-plus me-1"></i>Add User
+      </button>
+      <?php endif; ?>
+    </div>
+    <table id="table-users" class="table table-sm table-hover"></table>
+  </div>
+
+  <!-- ═══════════════ LOGS ═══════════════ -->
+  <div id="page-logs" class="tab-pane-page <?= $page==='logs'?'active':'' ?>">
+    <h6 class="mb-3 fw-semibold"><i class="bi bi-journal-text me-2"></i>OpenVPN Logs</h6>
+    <table id="table-logs" class="table table-sm table-hover" data-filter-control="true"></table>
+  </div>
+
+  <!-- ═══════════════ ADMINS ═══════════════ -->
+  <div id="page-admins" class="tab-pane-page <?= $page==='admins'?'active':'' ?>">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+      <h6 class="mb-0 fw-semibold"><i class="bi bi-person-gear me-2"></i>Web Admins</h6>
+      <?php if($adminRole === 'super-admin'): ?>
+      <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#modal-admin-add">
+        <i class="bi bi-person-plus me-1"></i>Add Admin
+      </button>
+      <?php endif; ?>
+    </div>
+    <table id="table-admins" class="table table-sm table-hover"></table>
+  </div>
+
+  <!-- ═══════════════ CONFIGS ═══════════════ -->
+  <div id="page-configs" class="tab-pane-page <?= $page==='configs'?'active':'' ?>">
+    <h6 class="mb-3 fw-semibold"><i class="bi bi-file-earmark-code me-2"></i>Client Configurations</h6>
+    <ul class="nav nav-tabs mb-3" id="config-tabs">
+      <li class="nav-item">
+        <a class="nav-link active" data-bs-toggle="tab" href="#cfg-linux">
+          <i class="bi bi-terminal me-1"></i>GNU/Linux
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" data-bs-toggle="tab" href="#cfg-windows">
+          <i class="bi bi-windows me-1"></i>Windows
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" data-bs-toggle="tab" href="#cfg-osx">
+          <i class="bi bi-apple me-1"></i>macOS / Viscosity
+        </a>
+      </li>
+      <?php if($adminRole === 'super-admin'): ?>
+      <li class="nav-item ms-auto">
+        <button id="save-config-btn" class="btn btn-sm btn-secondary d-none" id="save-config-btn">
+          <i class="bi bi-cloud-upload me-1"></i>Save
+        </button>
+      </li>
+      <?php endif; ?>
+    </ul>
+    <div class="tab-content" id="config-tab-content">
+      <div class="tab-pane fade show active" id="cfg-linux">
+        <textarea class="form-control font-monospace cfg-textarea" data-config-file="<?= $cfg_file='client-conf/gnu-linux/client.conf' ?>" rows="18" <?= $adminRole!=='super-admin'?'readonly':'' ?>><?= htmlspecialchars(file_get_contents($cfg_file)) ?></textarea>
+        <?= getHistory($cfg_file, 1) ?>
       </div>
-   </div>
+      <div class="tab-pane fade" id="cfg-windows">
+        <textarea class="form-control font-monospace cfg-textarea" data-config-file="<?= $cfg_file='client-conf/windows/client.ovpn' ?>" rows="18" <?= $adminRole!=='super-admin'?'readonly':'' ?>><?= htmlspecialchars(file_get_contents($cfg_file)) ?></textarea>
+        <?= getHistory($cfg_file, 2) ?>
+      </div>
+      <div class="tab-pane fade" id="cfg-osx">
+        <textarea class="form-control font-monospace cfg-textarea" data-config-file="<?= $cfg_file='client-conf/osx-viscosity/client.conf' ?>" rows="18" <?= $adminRole!=='super-admin'?'readonly':'' ?>><?= htmlspecialchars(file_get_contents($cfg_file)) ?></textarea>
+        <?= getHistory($cfg_file, 3) ?>
+      </div>
+    </div>
+  </div>
 
-   <div id="menu3" class="tab-pane fade">
-      <!-- configs -->
-      <div class="block-grid row" id="config-cards">
-         <ul class="nav nav-tabs nav-tabs-justified">
-            <li class="active"><a data-toggle="tab" href="#menu-1-0"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Linux</a></li>
-            <li><a data-toggle="tab" href="#menu-1-1"><span class="glyphicon glyphicon-th-large" aria-hidden="true"></span> Windows</a></li>
-            <li><a data-toggle="tab" href="#menu-1-2"><span class="glyphicon glyphicon-apple" aria-hidden="true"></span> OSX</a></li>
+  <!-- ═══════════════ FILENAME ═══════════════ -->
+  <div id="page-filename" class="tab-pane-page <?= $page==='filename'?'active':'' ?>">
+    <h6 class="mb-3 fw-semibold"><i class="bi bi-file-earmark me-2"></i>Download File Name</h6>
+    <p class="text-muted small">The filename users will receive when downloading their .ovpn config (without the .ovpn extension).</p>
+    <ul class="nav nav-tabs mb-3">
+      <li class="nav-item">
+        <a class="nav-link active" data-bs-toggle="tab" href="#cfg-filename">
+          <i class="bi bi-file-text me-1"></i>Filename
+        </a>
+      </li>
+      <?php if($adminRole === 'super-admin'): ?>
+      <li class="nav-item ms-auto">
+        <button id="save-config-btn-fn" class="btn btn-sm btn-secondary d-none">
+          <i class="bi bi-cloud-upload me-1"></i>Save
+        </button>
+      </li>
+      <?php endif; ?>
+    </ul>
+    <div class="tab-content">
+      <div class="tab-pane fade show active" id="cfg-filename">
+        <textarea class="form-control font-monospace cfg-textarea" data-config-file="<?= $cfg_file='client-conf/windows/filename' ?>" rows="3" <?= $adminRole!=='super-admin'?'readonly':'' ?>><?= htmlspecialchars(file_get_contents($cfg_file)) ?></textarea>
+        <?= getHistory($cfg_file, 4) ?>
+      </div>
+    </div>
+  </div>
 
-            <li id="save-config-btn" class="pull-right hidden"><a class="progress-bar-striped" href="javascript:;"><span class="glyphicon glyphicon-save" aria-hidden="true"></span></a></li>
-         </ul>
-         <div class="tab-content">
-            <div id="menu-1-0" class="tab-pane fade in active">
+  <!-- ═══════════════ CERTIFICATES ═══════════════ -->
+  <div id="page-certificates" class="tab-pane-page <?= $page==='certificates'?'active':'' ?>">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+      <h6 class="mb-0 fw-semibold"><i class="bi bi-patch-check me-2"></i>User Certificates</h6>
+      <?php if($adminRole === 'super-admin'): ?>
+      <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#modal-cert-add">
+        <i class="bi bi-plus-circle me-1"></i>Generate Cert
+      </button>
+      <?php endif; ?>
+    </div>
+    <div id="cert-no-easyrsa" class="alert alert-info d-none small">
+      <i class="bi bi-info-circle me-2"></i>
+      EasyRSA not found at <code>/etc/openvpn/easy-rsa</code>. Certificate management requires EasyRSA to be installed by the install script.
+    </div>
+    <div id="cert-sudo-note" class="alert alert-warning d-none small">
+      <i class="bi bi-exclamation-triangle me-2"></i>
+      Certificate generation requires <code>www-data</code> to have passwordless sudo access to <code>easyrsa</code>.
+      Add to <code>/etc/sudoers.d/openvpn-admin</code>:<br>
+      <code>www-data ALL=(ALL) NOPASSWD: /etc/openvpn/easy-rsa/easyrsa</code>
+    </div>
+    <table class="table table-sm table-hover" id="cert-table">
+      <thead class="table-dark">
+        <tr>
+          <th>Common Name</th>
+          <th>Status</th>
+          <th class="text-end">Actions</th>
+        </tr>
+      </thead>
+      <tbody id="cert-tbody">
+        <tr><td colspan="3" class="text-center text-muted py-4">Loading…</td></tr>
+      </tbody>
+    </table>
+  </div>
 
-               <textarea class="form-control" data-config-file="<?= $cfg_file='client-conf/gnu-linux/client.conf' ?>" name="" id="" cols="30" rows="20"><?= file_get_contents($cfg_file) ?></textarea>
-               <?= getHistory($cfg_file, @++$accId) ?>
+  <!-- ═══════════════ SETTINGS (SMTP + Notifications) ═══════════════ -->
+  <div id="page-settings" class="tab-pane-page <?= $page==='settings'?'active':'' ?>">
+    <h6 class="mb-3 fw-semibold"><i class="bi bi-sliders me-2"></i>Settings</h6>
+    <?php if($adminRole !== 'super-admin'): ?>
+    <div class="alert alert-warning small"><i class="bi bi-lock me-2"></i>Settings are read-only for your role.</div>
+    <?php endif; ?>
+    <ul class="nav nav-tabs mb-3" id="settings-tabs">
+      <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-smtp"><i class="bi bi-envelope me-1"></i>SMTP</a></li>
+      <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-notifications"><i class="bi bi-bell me-1"></i>Notifications</a></li>
+    </ul>
+    <div class="tab-content" id="settings-tab-content">
 
+      <!-- SMTP Tab -->
+      <div class="tab-pane fade show active" id="tab-smtp">
+        <form id="smtp-form" class="row g-3" style="max-width:640px">
+          <div class="col-md-8">
+            <label class="form-label">SMTP Host</label>
+            <input type="text" class="form-control" name="smtp_host" id="smtp_host" placeholder="smtp.gmail.com" <?= $adminRole!=='super-admin'?'readonly':'' ?>/>
+          </div>
+          <div class="col-md-4">
+            <label class="form-label">Port</label>
+            <input type="number" class="form-control" name="smtp_port" id="smtp_port" value="587" <?= $adminRole!=='super-admin'?'readonly':'' ?>/>
+          </div>
+          <div class="col-md-6">
+            <label class="form-label">Username</label>
+            <input type="text" class="form-control" name="smtp_user" id="smtp_user" autocomplete="off" <?= $adminRole!=='super-admin'?'readonly':'' ?>/>
+          </div>
+          <div class="col-md-6">
+            <label class="form-label">Password <span class="text-muted small">(leave blank to keep)</span></label>
+            <input type="password" class="form-control" name="smtp_pass" id="smtp_pass" autocomplete="new-password" <?= $adminRole!=='super-admin'?'readonly':'' ?>/>
+          </div>
+          <div class="col-md-8">
+            <label class="form-label">From Address</label>
+            <input type="email" class="form-control" name="smtp_from" id="smtp_from" placeholder="noreply@example.com" <?= $adminRole!=='super-admin'?'readonly':'' ?>/>
+          </div>
+          <div class="col-md-4">
+            <label class="form-label">Security</label>
+            <select class="form-select" name="smtp_secure" id="smtp_secure" <?= $adminRole!=='super-admin'?'disabled':'' ?>>
+              <option value="tls">STARTTLS</option>
+              <option value="ssl">SSL/TLS</option>
+              <option value="none">None</option>
+            </select>
+          </div>
+          <div class="col-12">
+            <label class="form-label">From Name</label>
+            <input type="text" class="form-control" name="smtp_from_name" id="smtp_from_name" placeholder="OpenVPN Admin" <?= $adminRole!=='super-admin'?'readonly':'' ?>/>
+          </div>
+          <?php if($adminRole === 'super-admin'): ?>
+          <div class="col-12 d-flex gap-2 flex-wrap align-items-center">
+            <button type="submit" class="btn btn-primary" id="smtp-save-btn">
+              <i class="bi bi-floppy me-1"></i>Save SMTP Settings
+            </button>
+            <div class="input-group" style="max-width:300px">
+              <input type="email" class="form-control form-control-sm" id="smtp-test-email" placeholder="test@example.com"/>
+              <button type="button" class="btn btn-sm btn-outline-secondary" id="smtp-test-btn">
+                <i class="bi bi-send me-1"></i>Send Test
+              </button>
             </div>
-            <div id="menu-1-1" class="tab-pane fade">
+          </div>
+          <?php endif; ?>
+          <div class="col-12" id="smtp-status"></div>
+        </form>
+      </div>
 
-               <textarea class="form-control" data-config-file="<?= $cfg_file='client-conf/windows/client.ovpn' ?>" name="" id="" cols="30" rows="20"><?= file_get_contents($cfg_file) ?></textarea>
-               <?= getHistory($cfg_file, ++$accId) ?>
+      <!-- Notifications Tab -->
+      <div class="tab-pane fade" id="tab-notifications">
+        <p class="text-muted small mb-3">
+          Email notifications are sent to the user's registered email address.
+          Connect/disconnect notifications require the OpenVPN scripts to call
+          <code>php /var/www/openvpn-admin/include/notify.php</code>.
+        </p>
+        <form id="notif-form" style="max-width:400px">
+          <div class="form-check form-switch mb-3">
+            <input class="form-check-input" type="checkbox" id="notify_connect" name="notify_connect" <?= $adminRole!=='super-admin'?'disabled':'' ?>>
+            <label class="form-check-label" for="notify_connect">
+              <strong>On Connect</strong><br>
+              <span class="text-muted small">Email user when they connect to VPN</span>
+            </label>
+          </div>
+          <div class="form-check form-switch mb-3">
+            <input class="form-check-input" type="checkbox" id="notify_disconnect" name="notify_disconnect" <?= $adminRole!=='super-admin'?'disabled':'' ?>>
+            <label class="form-check-label" for="notify_disconnect">
+              <strong>On Disconnect</strong><br>
+              <span class="text-muted small">Email user when they disconnect from VPN</span>
+            </label>
+          </div>
+          <div class="form-check form-switch mb-4">
+            <input class="form-check-input" type="checkbox" id="notify_expiry" name="notify_expiry" <?= $adminRole!=='super-admin'?'disabled':'' ?>>
+            <label class="form-check-label" for="notify_expiry">
+              <strong>Account Expiry</strong><br>
+              <span class="text-muted small">Email user 7 days before their account expires</span>
+            </label>
+          </div>
+          <?php if($adminRole === 'super-admin'): ?>
+          <button type="submit" class="btn btn-primary" id="notif-save-btn">
+            <i class="bi bi-floppy me-1"></i>Save Notification Settings
+          </button>
+          <?php endif; ?>
+          <div id="notif-status" class="mt-2"></div>
+        </form>
+      </div>
+    </div>
+  </div>
 
-            </div>
-            <div id="menu-1-2" class="tab-pane fade">
+</div><!-- /.tab-content -->
 
-               <textarea class="form-control" data-config-file="<?= $cfg_file='client-conf/osx-viscosity/client.conf' ?>" name="" id="" cols="30" rows="20"><?= file_get_contents($cfg_file) ?></textarea>
-               <?= getHistory($cfg_file, ++$accId) ?>
 
-            </div>
-         </div>
+<!-- ═══════════ MODALS ═══════════ -->
+
+<!-- Add User Modal -->
+<div id="modal-user-add" class="modal fade" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title"><i class="bi bi-person-plus me-2"></i>Add User</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body">
+        <div class="mb-3">
+          <label class="form-label">Username</label>
+          <input type="text" name="username" id="modal-user-add-username" class="form-control" autofocus/>
+        </div>
+        <div class="mb-3">
+          <label class="form-label">Password</label>
+          <input type="password" name="password" id="modal-user-add-password" class="form-control"/>
+        </div>
+        <div class="mb-3">
+          <label class="form-label">Email</label>
+          <input type="email" name="mail" id="modal-user-add-mail" class="form-control" placeholder="Optional"/>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-success" id="modal-user-add-save">
+          <i class="bi bi-person-plus me-1"></i>Add User
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
 
+<!-- Edit User Modal -->
+<div id="modal-user-edit" class="modal fade" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title"><i class="bi bi-pencil-square me-2"></i>Edit User</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
       </div>
-   </div>
+      <div class="modal-body">
+        <input type="hidden" id="edit-user-pk"/>
+        <div class="mb-3">
+          <label class="form-label">Email</label>
+          <input type="email" id="edit-user-mail" class="form-control"/>
+        </div>
+        <div class="mb-3">
+          <label class="form-label">Phone</label>
+          <input type="text" id="edit-user-phone" class="form-control"/>
+        </div>
+        <div class="mb-3">
+          <label class="form-label">Start Date</label>
+          <input type="date" id="edit-user-start" class="form-control"/>
+        </div>
+        <div class="mb-3">
+          <label class="form-label">End Date</label>
+          <input type="date" id="edit-user-end" class="form-control"/>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-primary" id="modal-user-edit-save">
+          <i class="bi bi-floppy me-1"></i>Save
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
 
+<!-- Reset Password Modal -->
+<div id="modal-reset-pass" class="modal fade" tabindex="-1">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title"><i class="bi bi-key me-2"></i>Reset Password</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body">
+        <div class="mb-2">
+          <label class="form-label">New Password</label>
+          <input type="password" id="modal-reset-pass-input" class="form-control" autofocus/>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-warning" id="modal-reset-pass-save">
+          <i class="bi bi-key me-1"></i>Reset
+        </button>
+      </div>
+    </div>
+  </div>
 </div>
 
-<script src="vendor/jquery/dist/jquery.min.js"></script>
-<script src="vendor/bootstrap/js/modal.js"></script>
-<script src="vendor/bootstrap/js/tooltip.js"></script>
-<script src="vendor/bootstrap/js/tab.js"></script>
-<script src="vendor/bootstrap/js/collapse.js"></script>
-<script src="vendor/bootstrap/js/popover.js"></script>
-<script src="vendor/bootstrap-table/dist/bootstrap-table.min.js"></script>
-<script src="vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
-<script src="vendor/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.min.js"></script>
-<script src="vendor/bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
-<script src="vendor/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
-<script src="js/grids.js"></script>
-
-<script>
-$(document).ready(function(){
-   /*
-   https://stackoverflow.com/a/19015027/3214501
-   -> keep the currently active tab beyond page reloading
-   */
-   $('.nav.nav-tabs a').click(function(e) {
-     e.preventDefault();
-     $(this).tab('show');
-   });
-   $("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
-     var id = $(e.target).attr("href").substr(1);
-     window.location.hash = id;
-   });
-   $('.nav.nav-tabs a[href="' + window.location.hash + '"]').tab('show');
-});
-</script>
+<!-- Add Admin Modal -->
+<div id="modal-admin-add" class="modal fade" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title"><i class="bi bi-person-gear me-2"></i>Add Admin</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body">
+        <div class="mb-3">
+          <label class="form-label">Username</label>
+          <input type="text" id="modal-admin-add-username" class="form-control" autofocus/>
+        </div>
+        <div class="mb-3">
+          <label class="form-label">Password</label>
+          <input type="password" id="modal-admin-add-password" class="form-control"/>
+        </div>
+        <div class="mb-3">
+          <label class="form-label">Email</label>
+          <input type="email" id="modal-admin-add-mail" class="form-control" placeholder="Optional"/>
+        </div>
+        <div class="mb-3">
+          <label class="form-label">Role</label>
+          <select id="modal-admin-add-role" class="form-select">
+            <option value="super-admin">Super Admin</option>
+            <option value="read-only">Read Only</option>
+          </select>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-success" id="modal-admin-add-save">
+          <i class="bi bi-person-plus me-1"></i>Add Admin
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Confirm Delete Modal -->
+<div id="modal-confirm-delete" class="modal fade" tabindex="-1">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title"><i class="bi bi-trash text-danger me-2"></i>Confirm Delete</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body">
+        Delete <strong id="modal-confirm-delete-name"></strong>? This cannot be undone.
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-danger" id="modal-confirm-delete-ok">
+          <i class="bi bi-trash me-1"></i>Delete
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Generate Certificate Modal -->
+<div id="modal-cert-add" class="modal fade" tabindex="-1">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title"><i class="bi bi-patch-plus me-2"></i>Generate Certificate</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body">
+        <div class="mb-3">
+          <label class="form-label">Common Name (username)</label>
+          <input type="text" id="modal-cert-cn" class="form-control" placeholder="e.g. john.doe" autofocus
+                 pattern="[a-zA-Z0-9._-]+" title="Letters, numbers, dots, hyphens, underscores only"/>
+          <div class="form-text">Must match the VPN username. Alphanumeric, dots, hyphens, underscores only.</div>
+        </div>
+        <div id="cert-gen-output" class="d-none">
+          <label class="form-label text-muted small">Output</label>
+          <pre id="cert-gen-pre" class="bg-dark text-light p-2 rounded small" style="max-height:200px;overflow:auto"></pre>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-success" id="modal-cert-gen-btn">
+          <i class="bi bi-cpu me-1"></i>Generate
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Send Config Email Modal -->
+<div id="modal-send-config" class="modal fade" tabindex="-1">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title"><i class="bi bi-envelope me-2"></i>Email Config</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body">
+        <input type="hidden" id="send-config-cn"/>
+        <div class="mb-2">
+          <label class="form-label">Recipient Email</label>
+          <input type="email" id="send-config-email" class="form-control" placeholder="user@example.com"/>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-primary" id="send-config-btn">
+          <i class="bi bi-send me-1"></i>Send
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/include/html/menu.php b/include/html/menu.php
index 295d56bd..f8477f2f 100644
--- a/include/html/menu.php
+++ b/include/html/menu.php
@@ -1,12 +1,17 @@
-<div class="col-md-6 col-md-offset-3">
-  <nav class="navbar navbar-default">
-
-    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-      <ul class="nav navbar-nav">
-        <li <?php if(!isset($_GET['admin'])) echo 'class="active"'; ?>><a href="index.php">Configurations</a></li>
-        <li <?php if(isset($_GET['admin'])) echo 'class="active"'; ?>><a href="index.php?admin">Administrator</a></li>
-      </ul>
-    </div>
-
-  </nav>
-</div>
+<nav class="navbar navbar-expand navbar-dark bg-dark mb-4 px-3">
+  <a class="navbar-brand" href="index.php">
+    <i class="bi bi-shield-lock me-2"></i>OpenVPN Admin
+  </a>
+  <ul class="navbar-nav">
+    <li class="nav-item">
+      <a class="nav-link<?php if(!isset($_GET['admin'])) echo ' active'; ?>" href="index.php">
+        <i class="bi bi-download me-1"></i>Get Config
+      </a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link<?php if(isset($_GET['admin'])) echo ' active'; ?>" href="index.php?admin">
+        <i class="bi bi-speedometer2 me-1"></i>Admin Panel
+      </a>
+    </li>
+  </ul>
+</nav>
diff --git a/include/mailer.php b/include/mailer.php
new file mode 100644
index 00000000..1a30f4c0
--- /dev/null
+++ b/include/mailer.php
@@ -0,0 +1,73 @@
+<?php
+
+class SmtpMailer {
+  public static function send(array $cfg, string $to, string $subject, string $body): bool {
+    $host     = $cfg['smtp_host'] ?? '';
+    $port     = intval($cfg['smtp_port'] ?? 587);
+    $user     = $cfg['smtp_user'] ?? '';
+    $pass     = $cfg['smtp_pass'] ?? '';
+    $from     = $cfg['smtp_from'] ?? '';
+    $fromName = $cfg['smtp_from_name'] ?: 'OpenVPN Admin';
+    $secure   = $cfg['smtp_secure'] ?? 'tls';
+
+    if (empty($host) || empty($from)) return false;
+
+    $errno = 0; $errstr = '';
+    if ($secure === 'ssl') {
+      $conn = @fsockopen("ssl://$host", $port, $errno, $errstr, 10);
+    } else {
+      $conn = @fsockopen($host, $port, $errno, $errstr, 10);
+    }
+    if (!$conn) return false;
+
+    $r = function() use (&$conn) { return fgets($conn, 515); };
+    $w = function($cmd) use (&$conn) { return fputs($conn, $cmd . "\r\n"); };
+
+    $r(); // server greeting
+    $w("EHLO " . (gethostname() ?: 'localhost'));
+    while ($line = $r()) { if (isset($line[3]) && $line[3] === ' ') break; }
+
+    if ($secure === 'tls') {
+      $w("STARTTLS");
+      $r();
+      if (!stream_socket_enable_crypto($conn, true, STREAM_CRYPTO_METHOD_TLS_CLIENT)) {
+        fclose($conn);
+        return false;
+      }
+      $w("EHLO " . (gethostname() ?: 'localhost'));
+      while ($line = $r()) { if (isset($line[3]) && $line[3] === ' ') break; }
+    }
+
+    if (!empty($user)) {
+      $w("AUTH LOGIN");
+      $r();
+      $w(base64_encode($user));
+      $r();
+      $w(base64_encode($pass));
+      $resp = $r();
+      if (!$resp || substr($resp, 0, 3) !== '235') { fclose($conn); return false; }
+    }
+
+    $w("MAIL FROM:<$from>");
+    $r();
+    $w("RCPT TO:<$to>");
+    $r();
+    $w("DATA");
+    $r();
+
+    $msg  = "From: =?UTF-8?B?" . base64_encode($fromName) . "?= <$from>\r\n";
+    $msg .= "To: $to\r\n";
+    $msg .= "Subject: =?UTF-8?B?" . base64_encode($subject) . "?=\r\n";
+    $msg .= "MIME-Version: 1.0\r\n";
+    $msg .= "Content-Type: text/plain; charset=UTF-8\r\n";
+    $msg .= "Content-Transfer-Encoding: base64\r\n";
+    $msg .= "\r\n";
+    $msg .= chunk_split(base64_encode($body));
+    $msg .= "\r\n.";
+    $w($msg);
+    $r();
+    $w("QUIT");
+    fclose($conn);
+    return true;
+  }
+}
diff --git a/include/notify.php b/include/notify.php
new file mode 100644
index 00000000..895086a2
--- /dev/null
+++ b/include/notify.php
@@ -0,0 +1,46 @@
+<?php
+// Called from OpenVPN connect/disconnect shell scripts:
+//   php /var/www/openvpn-admin/include/notify.php connect|disconnect <common_name> [<trusted_ip>]
+if (PHP_SAPI !== 'cli') exit(1);
+
+$event  = $argv[1] ?? '';
+$cn     = $argv[2] ?? 'unknown';
+$ip     = $argv[3] ?? 'unknown';
+
+if (!in_array($event, ['connect', 'disconnect', 'expiry'])) exit(1);
+
+require_once(dirname(__FILE__) . '/config.php');
+require_once(dirname(__FILE__) . '/mailer.php');
+
+$options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_SILENT;
+try {
+  $bdd = new PDO("mysql:host=$host;port=$port;dbname=$db", $user, $pass, $options);
+} catch (Exception $e) { exit(1); }
+
+$smtp_row = $bdd->query('SELECT * FROM smtp_settings WHERE id = 1')->fetch(PDO::FETCH_ASSOC);
+if (!$smtp_row || empty($smtp_row['smtp_host'])) exit(0);
+
+$notify_key = 'notify_' . $event;
+if (empty($smtp_row[$notify_key])) exit(0);
+
+// Get user email
+$req = $bdd->prepare('SELECT user_mail FROM user WHERE user_id = ?');
+$req->execute([$cn]);
+$user_row = $req->fetch(PDO::FETCH_ASSOC);
+$user_email = $user_row['user_mail'] ?? '';
+
+if (empty($user_email)) exit(0);
+
+$ts = date('Y-m-d H:i:s');
+if ($event === 'connect') {
+  $subject = "VPN Connected: $cn";
+  $body    = "User $cn connected to VPN at $ts from $ip.";
+} elseif ($event === 'disconnect') {
+  $subject = "VPN Disconnected: $cn";
+  $body    = "User $cn disconnected from VPN at $ts.";
+} else {
+  $subject = "VPN Account Expiring: $cn";
+  $body    = "User $cn's VPN account is expiring soon.";
+}
+
+SmtpMailer::send($smtp_row, $user_email, $subject, $body);
diff --git a/index.php b/index.php
index 457b46e9..80b12a99 100644
--- a/index.php
+++ b/index.php
@@ -4,209 +4,299 @@
   require(dirname(__FILE__) . '/include/functions.php');
   require(dirname(__FILE__) . '/include/connect.php');
 
-  // Disconnecting ?
-  if(isset($_GET['logout'])){
-    session_destroy();
-    header("Location: .");
+  // First-time install redirect
+  if (($_SERVER['REQUEST_URI'] !== '/index.php?installation') && !isInstalled($bdd)) {
+    header('Location: index.php?installation');
     exit(-1);
   }
 
-  // Get the configuration files ?
-  if(isset($_POST['configuration_get'], $_POST['configuration_username'], $_POST['configuration_pass'], $_POST['configuration_os'])
-     && !empty($_POST['configuration_pass'])) {
-    $req = $bdd->prepare('SELECT * FROM user WHERE user_id = ?');
-    $req->execute(array($_POST['configuration_username']));
-    $data = $req->fetch();
+  // Logout
+  if (isset($_GET['logout'])) {
+    session_destroy();
+    header('Location: .');
+    exit(-1);
+  }
 
-    // Error ?
-    if($data && passEqual($_POST['configuration_pass'], $data['user_pass'])) {
-      // Thanks http://stackoverflow.com/questions/4914750/how-to-zip-a-whole-folder-using-php
-      if($_POST['configuration_os'] == "gnu_linux") {
-        $conf_dir = 'gnu-linux';
-      } elseif($_POST['configuration_os'] == "osx_viscosity") {
-        $conf_dir = 'osx-viscosity';
-      } else {
-        $conf_dir = 'windows';
-      }
-      $rootPath = realpath("./client-conf/$conf_dir");
-
-      // Initialize archive object ;;;; why doing this every time the user logs in, when the cert is static?
-      $archive_base_name = "openvpn-$conf_dir";
-      $archive_name = "$archive_base_name.zip";
-      $archive_path = "./client-conf/$archive_name";
-      $zip = new ZipArchive();
-      $zip->open($archive_path, ZipArchive::CREATE | ZipArchive::OVERWRITE);
-
-      $files = new RecursiveIteratorIterator(
-        new RecursiveDirectoryIterator($rootPath),
-        RecursiveIteratorIterator::LEAVES_ONLY
-      );
-
-      foreach ($files as $name => $file) {
-        // Skip directories (they would be added automatically)
-        if (!$file->isDir()) {
-          // Get real and relative path for current file
-          $filePath = $file->getRealPath();
-          $relativePath = substr($filePath, strlen($rootPath) + 1);
-
-          // Add current file to archive
-          $zip->addFile($filePath, "$archive_base_name/$relativePath");
-        }
-      }
+  // Read ovpn filename
+  $ovpn_filename = trim(@file_get_contents('./client-conf/windows/filename') ?: 'client');
 
-      // Zip archive will be created only after closing object
-      $zip->close();
+  // Windows instruction download
+  if (isset($_POST['windows_instruction_get'])) {
+    $f = './client-conf/windows/Download and install the OpenVPN GUI (Windows).pdf';
+    if (file_exists($f)) {
+      header('Content-type: application/pdf');
+      header('Content-Disposition: attachment; filename="OpenVPN Windows Guide.pdf"');
+      readfile($f);
+    }
+    exit;
+  }
 
-      //then send the headers to foce download the zip file
-      header("Content-type: application/zip");
-      header("Content-Disposition: attachment; filename=$archive_name");
-      header("Pragma: no-cache");
-      header("Expires: 0");
-      readfile($archive_path);
+  // macOS instruction download
+  if (isset($_POST['mac_instruction_get'])) {
+    $f = './client-conf/osx-viscosity/Download and install the OpenVPN GUI (MAC).pdf';
+    if (file_exists($f)) {
+      header('Content-type: application/pdf');
+      header('Content-Disposition: attachment; filename="OpenVPN macOS Guide.pdf"');
+      readfile($f);
     }
-    else {
+    exit;
+  }
+
+  // Admin: download shared config
+  if (isset($_GET['admin_configuration_get']) && !empty($_SESSION['admin_id'])) {
+    $f = './client-conf/windows/client.ovpn';
+    header('Content-Type: application/octet-stream');
+    header("Content-Disposition: attachment; filename=\"$ovpn_filename.ovpn\"");
+    readfile($f);
+    exit;
+  }
+
+  // User: download config with credentials
+  if (isset($_POST['configuration_get'], $_POST['configuration_username'], $_POST['configuration_pass'])
+      && !empty($_POST['configuration_pass'])) {
+    $req = $bdd->prepare('SELECT * FROM user WHERE user_id = ?');
+    $req->execute([$_POST['configuration_username']]);
+    $data = $req->fetch();
+
+    if ($data && passEqual($_POST['configuration_pass'], $data['user_pass'])) {
+      $f = './client-conf/windows/client.ovpn';
+      header('Content-Type: application/octet-stream');
+      header("Content-Disposition: attachment; filename=\"$ovpn_filename.ovpn\"");
+      readfile($f);
+      exit;
+    } else {
       $error = true;
     }
   }
 
-  // Admin login attempt ?
-  else if(isset($_POST['admin_login'], $_POST['admin_username'], $_POST['admin_pass']) && !empty($_POST['admin_pass'])){
-
+  // Admin login
+  else if (isset($_POST['admin_login'], $_POST['admin_username'], $_POST['admin_pass'])
+           && !empty($_POST['admin_pass'])) {
     $req = $bdd->prepare('SELECT * FROM admin WHERE admin_id = ?');
-    $req->execute(array($_POST['admin_username']));
+    $req->execute([$_POST['admin_username']]);
     $data = $req->fetch();
 
-    // Error ?
-    if($data && passEqual($_POST['admin_pass'], $data['admin_pass'])) {
+    if ($data && (!isset($data['admin_enable']) || $data['admin_enable']) && passEqual($_POST['admin_pass'], $data['admin_pass'])) {
       $_SESSION['admin_id'] = $data['admin_id'];
-      header("Location: index.php?admin");
+      header('Location: index.php?admin');
       exit(-1);
-    }
-    else {
+    } else {
       $error = true;
     }
   }
-?>
 
+  $isAdmin = isset($_GET['admin']) && isset($_SESSION['admin_id']);
+  $isInstall = isset($_GET['installation']);
+  $adminRole = $isAdmin ? getCurrentAdminRole($bdd) : null;
+
+  $page = isset($_GET['page']) ? $_GET['page'] : 'dashboard';
+  $valid_pages = ['dashboard', 'users', 'logs', 'admins', 'configs', 'filename', 'certificates', 'settings'];
+  if (!in_array($page, $valid_pages)) $page = 'dashboard';
+
+  $page_titles = [
+    'dashboard'    => 'Dashboard',
+    'users'        => 'OpenVPN Users',
+    'logs'         => 'Logs',
+    'admins'       => 'Web Admins',
+    'configs'      => 'Configs',
+    'filename'     => 'File Name',
+    'certificates' => 'Certificates',
+    'settings'     => 'Settings',
+  ];
+  $topbar_title = $page_titles[$page] ?? 'Dashboard';
+?>
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-
-    <title>OpenVPN-Admin</title>
-
-    <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
-    <link rel="stylesheet" href="vendor/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" type="text/css" />
-    <link rel="stylesheet" href="vendor/bootstrap-table/dist/bootstrap-table.min.css" type="text/css" />
-    <link rel="stylesheet" href="vendor/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" type="text/css" />
-    <link rel="stylesheet" href="vendor/bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.css" type="text/css" />
-    <link rel="stylesheet" href="css/index.css" type="text/css" />
-
-    <link rel="icon" type="image/png" href="css/icon.png">
-  </head>
-  <body class='container-fluid'>
-  <?php
-
-    // --------------- INSTALLATION ---------------
-    if(isset($_GET['installation'])) {
-      if(isInstalled($bdd) == true) {
-        printError('OpenVPN-admin is already installed. Redirection.');
-        header( "refresh:3;url=index.php?admin" );
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>OpenVPN Admin</title>
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"/>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"/>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.4/dist/bootstrap-table.min.css"/>
+  <link rel="stylesheet" href="css/index.css"/>
+  <link rel="icon" type="image/png" href="css/icon.png"/>
+</head>
+<body class="<?php
+  if ($isAdmin) echo 'admin-layout';
+  else if ($isInstall) echo 'install-layout bg-light';
+  else echo 'login-layout bg-light';
+?>">
+<?php
+
+  // ─── INSTALLATION ───
+  if ($isInstall) {
+    if (isInstalled($bdd)) {
+      printError('OpenVPN-admin is already installed. Redirecting…');
+      header('refresh:3;url=index.php?admin');
+      exit(-1);
+    }
+    if (isset($_POST['admin_username'])) {
+      if ($_POST['admin_pass'] !== $_POST['repeat_admin_pass']) {
+        printError('Passwords do not match.');
+        header('refresh:3;url=index.php?installation');
         exit(-1);
       }
-
-      // If the user sent the installation form
-      if(isset($_POST['admin_username'])) {
-        $admin_username = $_POST['admin_username'];
-        $admin_pass = $_POST['admin_pass'];
-        $admin_repeat_pass = $_POST['repeat_admin_pass'];
-
-        if($admin_pass != $admin_repeat_pass) {
-          printError('The passwords do not correspond. Redirection.');
-          header( "refresh:3;url=index.php?installation" );
-          exit(-1);
+      $migrations = getMigrationSchemas();
+      foreach ($migrations as $mv) {
+        $sql_file = dirname(__FILE__) . "/sql/schema-$mv.sql";
+        if (!file_exists($sql_file)) continue;
+        try {
+          execMigrationSql($bdd, file_get_contents($sql_file));
+        } catch (PDOException $e) {
+          printError($e->getMessage()); exit(1);
         }
-
-        // Create the initial tables
-        $migrations = getMigrationSchemas();
-        foreach ($migrations as $migration_value) {
-          $sql_file = dirname(__FILE__) . "/sql/schema-$migration_value.sql";
-          try {
-            $sql = file_get_contents($sql_file);
-            $bdd->exec($sql);
-          }
-          catch (PDOException $e) {
-            printError($e->getMessage());
-            exit(1);
-          }
-
-          unlink($sql_file);
-
-          // Update schema to the new value
-          updateSchema($bdd, $migration_value);
-        }
-
-        // Generate the hash
-        $hash_pass = hashPass($admin_pass);
-
-        // Insert the new admin
-        $req = $bdd->prepare('INSERT INTO admin (admin_id, admin_pass) VALUES (?, ?)');
-        $req->execute(array($admin_username, $hash_pass));
-
-        rmdir(dirname(__FILE__) . '/sql');
-        printSuccess('Well done, OpenVPN-Admin is installed. Redirection.');
-        header( "refresh:3;url=index.php?admin" );
-      }
-      // Print the installation form
-      else {
-        require(dirname(__FILE__) . '/include/html/menu.php');
-        require(dirname(__FILE__) . '/include/html/form/installation.php');
+        @unlink($sql_file);
+        updateSchema($bdd, $mv);
       }
-
+      $bdd->prepare('INSERT INTO admin (admin_id, admin_pass, admin_role) VALUES (?, ?, ?)')
+          ->execute([$_POST['admin_username'], hashPass($_POST['admin_pass']), 'super-admin']);
+      @rmdir(dirname(__FILE__) . '/sql');
+      printSuccess('Installation complete! Redirecting to admin panel…');
+      header('refresh:3;url=index.php?admin');
       exit(-1);
     }
+    require(dirname(__FILE__) . '/include/html/menu.php');
+    require(dirname(__FILE__) . '/include/html/form/installation.php');
+    exit(-1);
+  }
 
-    // --------------- CONFIGURATION ---------------
-    if(!isset($_GET['admin'])) {
-      if(isset($error) && $error == true)
-        printError('Login error');
-
-      require(dirname(__FILE__) . '/include/html/menu.php');
-      require(dirname(__FILE__) . '/include/html/form/configuration.php');
-    }
-
-
-    // --------------- LOGIN ---------------
-    else if(!isset($_SESSION['admin_id'])){
-      if(isset($error) && $error == true)
-        printError('Login error');
+  // ─── PUBLIC CONFIG DOWNLOAD / LOGIN ───
+  if (!$isAdmin) {
+    if (isset($error) && $error) printError('Invalid username or password.');
+    require(dirname(__FILE__) . '/include/html/menu.php');
+    echo '<div class="container py-4">';
+    require(dirname(__FILE__) . '/include/html/form/login.php');
+    echo '<hr class="my-4"/>';
+    require(dirname(__FILE__) . '/include/html/form/configuration.php');
+    echo '</div>';
+    // Scripts at end
+    echo '<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>';
+    echo '<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>';
+    echo '</body></html>';
+    exit;
+  }
 
-      require(dirname(__FILE__) . '/include/html/menu.php');
-      require(dirname(__FILE__) . '/include/html/form/login.php');
-    }
+  // ─── ADMIN PANEL ───
+?>
 
-    // --------------- GRIDS ---------------
-    else{
-  ?>
-      <nav class="navbar navbar-default">
-        <div class="row col-md-12">
-          <div class="col-md-6">
-            <p class="navbar-text signed">Signed in as <?php echo $_SESSION['admin_id']; ?>
-            </div>
-            <div class="col-md-6">
-              <a class="navbar-text navbar-right" href="index.php?logout" title="Logout"><button class="btn btn-danger">Logout <span class="glyphicon glyphicon-off" aria-hidden="true"></span></button></a>
-              <a class="navbar-text navbar-right" href="index.php" title="Configuration"><button class="btn btn-default">Configurations</button></a>
-            </p>
-          </div>
-        </div>
-      </nav>
-
-  <?php
+<div class="admin-wrapper">
+  <!-- Sidebar -->
+  <aside class="sidebar" id="sidebar">
+    <div class="sidebar-header">
+      <i class="bi bi-shield-lock"></i> OpenVPN Admin
+    </div>
+    <nav class="sidebar-nav">
+      <ul>
+        <li class="nav-section-label">Overview</li>
+        <li class="<?= $page==='dashboard'?'active':'' ?>">
+          <a href="index.php?admin&page=dashboard">
+            <i class="bi bi-activity"></i> Dashboard
+          </a>
+        </li>
+        <li class="nav-section-label">Management</li>
+        <li class="<?= $page==='users'?'active':'' ?>">
+          <a href="index.php?admin&page=users">
+            <i class="bi bi-people"></i> Users
+          </a>
+        </li>
+        <li class="<?= $page==='logs'?'active':'' ?>">
+          <a href="index.php?admin&page=logs">
+            <i class="bi bi-journal-text"></i> Logs
+          </a>
+        </li>
+        <li class="<?= $page==='certificates'?'active':'' ?>">
+          <a href="index.php?admin&page=certificates">
+            <i class="bi bi-patch-check"></i> Certificates
+          </a>
+        </li>
+        <li class="nav-section-label">Administration</li>
+        <li class="<?= $page==='admins'?'active':'' ?>">
+          <a href="index.php?admin&page=admins">
+            <i class="bi bi-person-gear"></i> Admins
+          </a>
+        </li>
+        <li class="<?= $page==='configs'?'active':'' ?>">
+          <a href="index.php?admin&page=configs">
+            <i class="bi bi-file-earmark-code"></i> Configs
+          </a>
+        </li>
+        <li class="<?= $page==='filename'?'active':'' ?>">
+          <a href="index.php?admin&page=filename">
+            <i class="bi bi-file-earmark-text"></i> File Name
+          </a>
+        </li>
+        <li class="<?= $page==='settings'?'active':'' ?>">
+          <a href="index.php?admin&page=settings">
+            <i class="bi bi-sliders"></i> Settings
+          </a>
+        </li>
+      </ul>
+    </nav>
+    <div class="sidebar-footer">
+      <div class="d-flex align-items-center gap-2">
+        <i class="bi bi-person-circle"></i>
+        <span class="flex-grow-1 text-truncate"><?= htmlspecialchars($_SESSION['admin_id']) ?></span>
+        <?php if ($adminRole === 'super-admin'): ?>
+          <span class="badge bg-primary" title="Super Admin">SA</span>
+        <?php else: ?>
+          <span class="badge bg-secondary" title="Read Only">RO</span>
+        <?php endif; ?>
+      </div>
+      <div class="sidebar-credit">
+        <i class="bi bi-github"></i>
+        <a href="https://github.com/arvage/OpenVPN-Admin" target="_blank" rel="noopener">
+          by Armin
+        </a>
+      </div>
+    </div>
+  </aside>
+
+  <!-- Main content -->
+  <div class="main-content">
+    <!-- Topbar -->
+    <div class="topbar">
+      <div class="d-flex align-items-center gap-2">
+        <button class="btn btn-sm btn-outline-secondary d-lg-none" id="sidebar-toggle">
+          <i class="bi bi-list"></i>
+        </button>
+        <span class="topbar-title"><?= htmlspecialchars($topbar_title) ?></span>
+      </div>
+      <div class="d-flex gap-2">
+        <a href="index.php?admin_configuration_get" class="btn btn-sm btn-outline-secondary">
+          <i class="bi bi-download me-1"></i>Shared Config
+        </a>
+        <a href="index.php" class="btn btn-sm btn-outline-secondary">
+          <i class="bi bi-people me-1"></i>User Portal
+        </a>
+        <a href="index.php?logout" class="btn btn-sm btn-danger">
+          <i class="bi bi-box-arrow-right me-1"></i>Logout
+        </a>
+      </div>
+    </div>
+
+    <!-- Page content -->
+    <?php
       require(dirname(__FILE__) . '/include/html/grids.php');
-    }
-  ?>
-     <div id="message-stage">
-        <!-- used to display application messages (failures / status-notes) to the user -->
-     </div>
-  </body>
+    ?>
+  </div>
+</div>
+
+<!-- Toast notification -->
+<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toast-container"></div>
+
+<!-- JS -->
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.4/dist/bootstrap-table.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.22.4/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
+<script>
+  // Expose role and page to JS
+  window.ADMIN_ROLE = <?= json_encode($adminRole) ?>;
+  window.CURRENT_PAGE = <?= json_encode($page) ?>;
+</script>
+<script src="js/grids.js"></script>
+
+</body>
 </html>
diff --git a/install.sh b/install.sh
index 743f643f..80baef73 100755
--- a/install.sh
+++ b/install.sh
@@ -1,265 +1,480 @@
 #!/bin/bash
 
-print_help () {
-  echo -e "./install.sh www_basedir user group"
-  echo -e "\tbase_dir: The place where the web application will be put in"
-  echo -e "\tuser:     User of the web application"
-  echo -e "\tgroup:    Group of the web application"
-}
-
-# Ensure to be root
-if [ "$EUID" -ne 0 ]; then
-  echo "Please run as root"
-  exit
-fi
-
-# Ensure there are enought arguments
-if [ "$#" -ne 3 ]; then
-  print_help
-  exit
+# ─── Colors ───────────────────────────────────────────────────────────────────
+NC='\033[0m'
+Red='\033[1;31m'
+Yellow='\033[0;33m'
+Green='\033[0;32m'
+
+# ─── OS Detection ─────────────────────────────────────────────────────────────
+. /etc/os-release
+
+# Normalize OS name from /etc/os-release ID field
+OS=$(echo "$ID" | awk '{print toupper(substr($0,1,1)) substr($0,2)}')
+OS_Version_Major=$(echo "${VERSION_ID:-0}" | cut -d. -f1)
+OS_Version_Minor=$(echo "${VERSION_ID:-0}" | cut -d. -f2)
+
+# 64-bit Raspberry Pi OS identifies itself as "debian" — detect by hardware
+IS_RASPBERRYPI=false
+if grep -qiE "Raspberry Pi|BCM2" /proc/cpuinfo 2>/dev/null; then
+  IS_RASPBERRYPI=true
+  OS="Raspbian"
 fi
 
-# Ensure there are the prerequisites
-for i in openvpn mysql php bower node unzip wget sed; do
-  which $i > /dev/null
-  if [ "$?" -ne 0 ]; then
-    echo "Miss $i"
-    exit
-  fi
-done
-
+case "$OS" in
+  Ubuntu|Raspbian|Debian) ;;
+  *)
+    echo -e "${Red}Only Ubuntu, Debian, and Raspberry Pi OS are supported.${NC}"
+    exit 1
+    ;;
+esac
+
+# ─── Variables ────────────────────────────────────────────────────────────────
+timezone="America/Los_Angeles"
+gmt_offset="-8:00"
 www=$1
 user=$2
 group=$3
 
 openvpn_admin="$www/openvpn-admin"
+base_path=$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)
+ip_server=$(hostname -I | awk '{print $1}')
+public_ip=$(curl -s --max-time 10 https://api.ipify.org || \
+            host myip.opendns.com resolver1.opendns.com 2>/dev/null | \
+            awk '/myip.opendns.com has address/{print $4; exit}')
+
+openvpn_proto="udp"
+server_port="1194"
+
+mysql_root_pass=$(openssl rand -base64 18 | tr -dc 'a-zA-Z0-9' | head -c 16)
+mysql_user=$(openssl rand -base64 12 | tr -dc 'a-zA-Z0-9' | head -c 12)
+mysql_pass=$(openssl rand -base64 18 | tr -dc 'a-zA-Z0-9' | head -c 16)
+
+key_size="2048"
+ca_expire="36500"
+cert_expire="36500"
+cert_country="US"
+cert_province="California"
+cert_city="Mission Viejo"
+cert_org="OpenVPN-Admin"
+cert_ou="IT"
+cert_email="admin@example.com"
+
+# ─── Help ─────────────────────────────────────────────────────────────────────
+print_help() {
+  echo -e "sudo ./install.sh www_basedir user group"
+  echo -e "\twww_basedir: e.g. /var/www"
+  echo -e "\tuser:        web server user, e.g. www-data"
+  echo -e "\tgroup:       web server group, e.g. www-data"
+}
 
-# Check the validity of the arguments
-if [ ! -d "$www" ] ||  ! grep -q "$user" "/etc/passwd" || ! grep -q "$group" "/etc/group" ; then
-  print_help
-  exit
+# ─── Root check ───────────────────────────────────────────────────────────────
+if [ "$EUID" -ne 0 ]; then
+  echo -e "${Red}Please run as root:${NC}"
+  echo -e "${Green}sudo ./install.sh /var/www www-data www-data${NC}"
+  exit 1
 fi
 
-base_path=$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )
-
-
-printf "\n################## Server informations ##################\n"
+if [ "$#" -ne 3 ]; then
+  print_help
+  exit 1
+fi
 
-read -p "Server Hostname/IP: " ip_server
+echo -e "${Green}\nAutomated Installation Started\n${NC}"
+sleep 1
 
-read -p "OpenVPN protocol (tcp or udp) [tcp]: " openvpn_proto
+# ─── Public IP / hostname prompt ──────────────────────────────────────────────
+echo -e "${Red}$public_ip${NC} detected as your Public IP."
+echo -e "Need to use a different IP or hostname? (Timeout: 2 min)"
+read -t 120 -p "Press Enter to use detected IP, or type another: " public_hostname </dev/tty || true
 
-if [[ -z $openvpn_proto ]]; then
-  openvpn_proto="tcp"
+if [ -n "$public_hostname" ]; then
+  public_ip="$public_hostname"
+  echo -e "\n${NC}Using: ${Red}$public_ip${NC}"
+else
+  echo -e "\n${NC}Using: ${Red}$public_ip${NC}"
 fi
 
-read -p "Port [443]: " server_port
+# ─── VPN connection name ──────────────────────────────────────────────────────
+echo -e "\nEnter a VPN connection name shown to users (e.g. 'LA Office')."
+echo -e "Leave blank for default 'VPN'. (Timeout: 2 min)"
+read -t 120 -p "VPN name (without .ovpn): " company_name </dev/tty || true
 
-if [[ -z $server_port ]]; then
-  server_port="443"
+if [ -z "$company_name" ]; then
+  company_name="VPN"
+  echo -e "\nUsing default: VPN.ovpn"
+else
+  echo -e "\nUsing: ${Red}$company_name.ovpn${NC}"
 fi
 
-# Get root pass (to create the database and the user)
-mysql_root_pass=""
-status_code=1
-
-while [ $status_code -ne 0 ]; do
-  read -p "MySQL root password: " -s mysql_root_pass; echo
-  echo "SHOW DATABASES" | mysql -u root --password="$mysql_root_pass" &> /dev/null
-  status_code=$?
+echo -e "${Yellow}\nThis will take a few minutes.\n${NC}"
+echo -e "${NC}Detected OS: ${Red}$OS $OS_Version_Major.$OS_Version_Minor${NC}\n"
+sleep 1
+
+# ─── Install prerequisites ────────────────────────────────────────────────────
+echo -e "${Green}Installing Prerequisites...${NC}"
+
+export DEBIAN_FRONTEND=noninteractive
+export NEEDRESTART_MODE=a
+
+case $OS in
+  Ubuntu)
+    apt-get update -q
+    apt-get install -y -q \
+      openvpn apache2 mysql-server \
+      php php-mysql php-zip php-mbstring \
+      unzip git wget curl net-tools \
+      iptables-persistent ca-certificates
+
+    # Blacklist floppy only on x86 (not on ARM or VM without floppy)
+    if [ "$(uname -m)" != "aarch64" ] && [ "$(uname -m)" != "armv7l" ]; then
+      rmmod floppy 2>/dev/null || true
+      echo "blacklist floppy" > /etc/modprobe.d/blacklist-floppy.conf
+    fi
+    ;;
+
+  Raspbian)
+    apt-get update -q
+    apt-get install -y -q \
+      openvpn apache2 mariadb-server \
+      php php-mysql php-zip php-mbstring \
+      unzip git wget curl net-tools \
+      iptables-persistent ca-certificates
+    ;;
+
+  Debian)
+    apt-get update -q
+    apt-get install -y -q \
+      openvpn apache2 mariadb-server \
+      php php-mysql php-zip php-mbstring \
+      unzip git wget curl net-tools \
+      iptables-persistent ca-certificates
+    ;;
+esac
+
+# ─── Verify required binaries ─────────────────────────────────────────────────
+for bin in openvpn apache2 mysql php unzip git wget curl; do
+  if ! command -v "$bin" &>/dev/null; then
+    echo -e "${Red}$bin is missing. Please install it manually and re-run.${NC}"
+    exit 1
+  fi
 done
 
-sql_result=$(echo "SHOW DATABASES" | mysql -u root --password="$mysql_root_pass" | grep -e "^openvpn-admin$")
-# Check if the database doesn't already exist
-if [ "$sql_result" != "" ]; then
-  echo "The openvpn-admin database already exists."
-  exit
+# ─── Detect database engine and service name ──────────────────────────────────
+if mysql --version 2>&1 | grep -qi mariadb; then
+  DB_ENGINE="mariadb"
+  DB_SERVICE="mariadb"
+else
+  DB_ENGINE="mysql"
+  DB_SERVICE="mysql"
 fi
 
-
-# Check if the user doesn't already exist
-read -p "MySQL user name for OpenVPN-Admin (will be created): " mysql_user
-
-echo "SHOW GRANTS FOR $mysql_user@localhost" | mysql -u root --password="$mysql_root_pass" &> /dev/null
-if [ $? -eq 0 ]; then
-  echo "The MySQL user already exists."
-  exit
+# ─── Validate arguments ───────────────────────────────────────────────────────
+if [ ! -d "$www" ] || ! grep -q "^$user:" /etc/passwd || ! grep -q "^$group:" /etc/group; then
+  print_help
+  exit 1
 fi
 
-read -p "MySQL user password for OpenVPN-Admin: " -s mysql_pass; echo
-
-# TODO MySQL port & host ?
-
-
-printf "\n################## Certificates informations ##################\n"
-
-read -p "Key size (1024, 2048 or 4096) [2048]: " key_size
-
-read -p "Root certificate expiration (in days) [3650]: " ca_expire
+# ─── MySQL / MariaDB setup ────────────────────────────────────────────────────
+echo -e "${Green}Configuring Database...${NC}"
+
+# Ensure service is running before we touch it
+systemctl start "$DB_SERVICE"
+
+if [ "$DB_ENGINE" = "mysql" ]; then
+  # MySQL 8.0+ uses caching_sha2_password by default; switch root to native password
+  # so password-based auth works for subsequent mysql commands
+  mysql -u root <<-EOF
+    ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '$mysql_root_pass';
+    DELETE FROM mysql.user WHERE User='root' AND Host NOT IN ('localhost', '127.0.0.1', '::1');
+    DELETE FROM mysql.user WHERE User='';
+    DELETE FROM mysql.db WHERE Db='test' OR Db='test_%';
+    FLUSH PRIVILEGES;
+EOF
+else
+  # MariaDB: unix_socket plugin is default; SET PASSWORD works universally
+  mysql -u root <<-EOF
+    SET PASSWORD FOR 'root'@'localhost' = PASSWORD('$mysql_root_pass');
+    DELETE FROM mysql.user WHERE User='root' AND Host NOT IN ('localhost', '127.0.0.1', '::1');
+    DELETE FROM mysql.user WHERE User='';
+    DELETE FROM mysql.db WHERE Db='test' OR Db='test_%';
+    FLUSH PRIVILEGES;
+EOF
+fi
 
-read -p "Certificate expiration (in days) [3650]: " cert_expire
+# Wait for DB to accept password-authenticated connections
+for i in $(seq 1 10); do
+  mysql -u root --password="$mysql_root_pass" -e "SELECT 1" &>/dev/null && break
+  sleep 1
+done
 
-read -p "Country Name (2 letter code) [US]: " cert_country
+# Check / create database
+sql_result=$(mysql -u root --password="$mysql_root_pass" -N -e "SHOW DATABASES" 2>/dev/null | grep -x "openvpn-admin" || true)
+if [ -n "$sql_result" ]; then
+  echo -e "${Red}Database 'openvpn-admin' already exists. Aborting.${NC}"
+  exit 1
+fi
 
-read -p "State or Province Name (full name) [California]: " cert_province
+# Check / create DB user
+if mysql -u root --password="$mysql_root_pass" -e "SELECT 1 FROM mysql.user WHERE User='$mysql_user' AND Host='localhost'" 2>/dev/null | grep -q 1; then
+  echo -e "${Red}MySQL user '$mysql_user' already exists. Aborting.${NC}"
+  exit 1
+fi
 
-read -p "Locality Name (eg, city) [San Francisco]: " cert_city
+echo -e "${Green}Creating database and user...${NC}"
+mysql -u root --password="$mysql_root_pass" <<-EOF
+  CREATE DATABASE \`openvpn-admin\`;
+  CREATE USER '$mysql_user'@'localhost' IDENTIFIED BY '$mysql_pass';
+  GRANT ALL PRIVILEGES ON \`openvpn-admin\`.* TO '$mysql_user'@'localhost';
+  FLUSH PRIVILEGES;
+EOF
 
-read -p "Organization Name (eg, company) [Copyleft Certificate Co]: " cert_org
+# Set MySQL timezone (best-effort — may fail if timezone tables not loaded)
+mysql -u root --password="$mysql_root_pass" -e "SET GLOBAL time_zone = '$gmt_offset';" 2>/dev/null || true
 
-read -p "Organizational Unit Name (eg, section) [My Organizational Unit]: " cert_ou
+systemctl restart "$DB_SERVICE"
 
-read -p "Email Address [me@example.net]: " cert_email
+# ─── EasyRSA ──────────────────────────────────────────────────────────────────
+echo -e "${Green}Downloading EasyRSA...${NC}"
 
-read -p "Common Name (eg, your name or your server's hostname) [ChangeMe]: " key_cn
+EASYRSA_LOCATION=$(curl -s https://api.github.com/repos/OpenVPN/easy-rsa/releases/latest \
+  | grep '"browser_download_url"' \
+  | grep '\.tgz"' \
+  | head -1 \
+  | sed 's/.*"browser_download_url": *"\(.*\)"/\1/')
 
+if [ -z "$EASYRSA_LOCATION" ]; then
+  # Fallback to known-good release if API fails
+  EASYRSA_LOCATION="https://github.com/OpenVPN/easy-rsa/releases/download/v3.1.7/EasyRSA-3.1.7.tgz"
+fi
 
-printf "\n################## Creating the certificates ##################\n"
+curl -L -o /tmp/easyrsa.tgz "$EASYRSA_LOCATION"
+tar -xzf /tmp/easyrsa.tgz -C /tmp/
+# Move extracted directory (works regardless of version string in dirname)
+rm -rf /etc/openvpn/easy-rsa
+mv /tmp/EasyRSA-*/ /etc/openvpn/easy-rsa
+rm /tmp/easyrsa.tgz
 
-# Get the rsa keys
-wget "https://github.com/OpenVPN/easy-rsa/releases/download/v3.0.6/EasyRSA-unix-v3.0.6.tgz"
-tar -xaf "EasyRSA-unix-v3.0.6.tgz"
-mv "EasyRSA-v3.0.6" /etc/openvpn/easy-rsa
-rm "EasyRSA-unix-v3.0.6.tgz"
+echo -e "${Green}Generating Certificates and Keys...${NC}"
 
-cd /etc/openvpn/easy-rsa
+cd /etc/openvpn/easy-rsa || { echo -e "${Red}Failed to enter EasyRSA directory.${NC}"; exit 1; }
 
-if [[ ! -z $key_size ]]; then
-  export EASYRSA_KEY_SIZE=$key_size
-fi
-if [[ ! -z $ca_expire ]]; then
-  export EASYRSA_CA_EXPIRE=$ca_expire
-fi
-if [[ ! -z $cert_expire ]]; then
-  export EASYRSA_CERT_EXPIRE=$cert_expire
-fi
-if [[ ! -z $cert_country ]]; then
-  export EASYRSA_REQ_COUNTRY=$cert_country
-fi
-if [[ ! -z $cert_province ]]; then
-  export EASYRSA_REQ_PROVINCE=$cert_province
-fi
-if [[ ! -z $cert_city ]]; then
-  export EASYRSA_REQ_CITY=$cert_city
-fi
-if [[ ! -z $cert_org ]]; then
-  export EASYRSA_REQ_ORG=$cert_org
-fi
-if [[ ! -z $cert_ou ]]; then
-  export EASYRSA_REQ_OU=$cert_ou
-fi
-if [[ ! -z $cert_email ]]; then
-  export EASYRSA_REQ_EMAIL=$cert_email
-fi
-if [[ ! -z $key_cn ]]; then
-  export EASYRSA_REQ_CN=$key_cn
-fi
+export EASYRSA_BATCH=1
+export EASYRSA_KEY_SIZE="$key_size"
+export EASYRSA_CA_EXPIRE="$ca_expire"
+export EASYRSA_CERT_EXPIRE="$cert_expire"
+export EASYRSA_REQ_COUNTRY="$cert_country"
+export EASYRSA_REQ_PROVINCE="$cert_province"
+export EASYRSA_REQ_CITY="$cert_city"
+export EASYRSA_REQ_ORG="$cert_org"
+export EASYRSA_REQ_OU="$cert_ou"
+export EASYRSA_REQ_EMAIL="$cert_email"
 
-# Init PKI dirs and build CA certs
 ./easyrsa init-pki
 ./easyrsa build-ca nopass
-# Generate Diffie-Hellman parameters
 ./easyrsa gen-dh
-# Genrate server keypair
 ./easyrsa build-server-full server nopass
 
-# Generate shared-secret for TLS Authentication
-openvpn --genkey --secret pki/ta.key
+# TLS auth key — syntax changed in OpenVPN 2.5
+OPENVPN_VER=$(openvpn --version 2>&1 | head -1 | grep -oE '[0-9]+\.[0-9]+' | head -1)
+OPENVPN_MAJOR=$(echo "$OPENVPN_VER" | cut -d. -f1)
+OPENVPN_MINOR=$(echo "$OPENVPN_VER" | cut -d. -f2)
 
+if [ "${OPENVPN_MAJOR:-2}" -gt 2 ] || { [ "${OPENVPN_MAJOR:-2}" -eq 2 ] && [ "${OPENVPN_MINOR:-4}" -ge 5 ]; }; then
+  openvpn --genkey tls-auth pki/ta.key
+else
+  openvpn --genkey --secret pki/ta.key
+fi
 
-printf "\n################## Setup OpenVPN ##################\n"
+# ─── OpenVPN Server Config ────────────────────────────────────────────────────
+echo -e "${Green}Configuring OpenVPN Server...${NC}"
 
-# Copy certificates and the server configuration in the openvpn directory
-cp /etc/openvpn/easy-rsa/pki/{ca.crt,ta.key,issued/server.crt,private/server.key,dh.pem} "/etc/openvpn/"
-cp "$base_path/installation/server.conf" "/etc/openvpn/"
-mkdir "/etc/openvpn/ccd"
-sed -i "s/port 443/port $server_port/" "/etc/openvpn/server.conf"
+cp pki/{ca.crt,ta.key,issued/server.crt,private/server.key,dh.pem} /etc/openvpn/
+cp "$base_path/installation/server.conf" /etc/openvpn/
+mkdir -p /etc/openvpn/ccd
 
-if [ $openvpn_proto = "udp" ]; then
-  sed -i "s/proto tcp/proto $openvpn_proto/" "/etc/openvpn/server.conf"
-fi
+# Set port and protocol
+sed -i "s/port 1194/port $server_port/" /etc/openvpn/server.conf
+[ "$openvpn_proto" = "udp" ] && sed -i "s/proto tcp/proto udp/" /etc/openvpn/server.conf
 
+# Fix 'group nogroup' for distros that use 'group nobody'
 nobody_group=$(id -ng nobody)
-sed -i "s/group nogroup/group $nobody_group/" "/etc/openvpn/server.conf"
+sed -i "s/group nogroup/group $nobody_group/" /etc/openvpn/server.conf
 
-printf "\n################## Setup firewall ##################\n"
-
-# Make ip forwading and make it persistent
-echo 1 > "/proc/sys/net/ipv4/ip_forward"
-echo "net.ipv4.ip_forward = 1" >> "/etc/sysctl.conf"
+# OpenVPN 2.5+ deprecations: replace comp-lzo and update cipher directive
+if [ "${OPENVPN_MAJOR:-2}" -gt 2 ] || { [ "${OPENVPN_MAJOR:-2}" -eq 2 ] && [ "${OPENVPN_MINOR:-4}" -ge 5 ]; }; then
+  sed -i 's/^comp-lzo$/compress lz4-v2/' /etc/openvpn/server.conf
+  # Replace old cipher line with data-ciphers for 2.5+
+  sed -i 's/^cipher AES-256-CBC$/data-ciphers AES-256-GCM:AES-128-GCM:AES-256-CBC\ndata-ciphers-fallback AES-256-CBC/' /etc/openvpn/server.conf
+fi
 
-# Get primary NIC device name
-primary_nic=`route | grep '^default' | grep -o '[^ ]*$'`
+# Status log: write to /var/log/openvpn/ so www-data can read it
+mkdir -p /var/log/openvpn
+chmod 755 /var/log/openvpn
+sed -i 's|^status openvpn-status.log.*|status /var/log/openvpn/openvpn-status.log 10|' /etc/openvpn/server.conf
+sed -i 's|^log-append /var/log/openvpn.log.*|log-append /var/log/openvpn/openvpn.log|' /etc/openvpn/server.conf
+touch /var/log/openvpn/openvpn-status.log
+chmod 644 /var/log/openvpn/openvpn-status.log
+
+# ─── Firewall ─────────────────────────────────────────────────────────────────
+echo -e "${Green}Configuring Firewall...${NC}"
+
+# Use 'ip route' (modern) instead of deprecated 'route' from net-tools
+primary_nic=$(ip route | awk '/^default/{print $5; exit}')
+if [ -z "$primary_nic" ]; then
+  primary_nic=$(ip link | awk -F': ' '/^[0-9]+: e/{print $2; exit}')
+fi
 
-# Iptable rules
 iptables -I FORWARD -i tun0 -j ACCEPT
 iptables -I FORWARD -o tun0 -j ACCEPT
-iptables -I OUTPUT -o tun0 -j ACCEPT
-
-iptables -A FORWARD -i tun0 -o $primary_nic -j ACCEPT
-iptables -t nat -A POSTROUTING -o $primary_nic -j MASQUERADE
-iptables -t nat -A POSTROUTING -s 10.8.0.0/24 -o $primary_nic -j MASQUERADE
-iptables -t nat -A POSTROUTING -s 10.8.0.2/24 -o $primary_nic -j MASQUERADE
-
-
-printf "\n################## Setup MySQL database ##################\n"
+iptables -I OUTPUT  -o tun0 -j ACCEPT
+iptables -A FORWARD -i tun0 -o "$primary_nic" -j ACCEPT
+iptables -t nat -A POSTROUTING -o "$primary_nic" -j MASQUERADE
+iptables -t nat -A POSTROUTING -s 10.8.0.0/24 -o "$primary_nic" -j MASQUERADE
+
+# Persist iptables rules (works for Ubuntu, Debian, Raspbian — iptables-persistent installed above)
+mkdir -p /etc/iptables
+iptables-save > /etc/iptables/rules.v4
+
+# Persist IP forwarding via sysctl.d (reliable on all distros)
+cat > /etc/sysctl.d/99-openvpn.conf <<-EOF
+net.ipv4.ip_forward=1
+EOF
+sysctl -p /etc/sysctl.d/99-openvpn.conf
+
+# ─── OpenVPN Scripts ─────────────────────────────────────────────────────────
+echo -e "${Green}Installing OpenVPN Scripts...${NC}"
+
+cp -r "$base_path/installation/scripts" /etc/openvpn/
+chmod +x /etc/openvpn/scripts/*
+
+sed -i "s/USER=''/USER='$mysql_user'/" /etc/openvpn/scripts/config.sh
+sed -i "s/PASS=''/PASS='$mysql_pass'/" /etc/openvpn/scripts/config.sh
+
+# ─── Web Application ──────────────────────────────────────────────────────────
+echo -e "${Green}Installing Web Application...${NC}"
+
+mkdir -p "$openvpn_admin"
+cp -r "$base_path/"{index.php,sql,js,include,css,installation/client-conf} "$openvpn_admin"
+
+cd "$openvpn_admin" || exit 1
+
+# Write database credentials into config.php
+sed -i "s/\$user = '';/\$user = '$mysql_user';/" ./include/config.php
+sed -i "s/\$pass = '';/\$pass = '$mysql_pass';/" ./include/config.php
+
+# Patch client config files with server IP and protocol
+for file in $(find . -name "client.ovpn"); do
+  sed -i "s/remote xxx\.xxx\.xxx\.xxx 1194/remote $public_ip $server_port/" "$file"
+  sed -i "s/remote xxx\.xxx\.xxx\.xxx 443/remote $public_ip $server_port/"  "$file"
+  [ "$openvpn_proto" = "udp" ] && sed -i "s/proto tcp-client/proto udp/" "$file"
+  # Keep compression in sync with server (comp-lzo is deprecated in OpenVPN 2.5+)
+  sed -i 's/^comp-lzo$/compress lz4-v2/' "$file"
+  sed -i 's/^compress lzo$/compress lz4-v2/' "$file"
+  # Append inline CA and TLS-auth
+  echo "<ca>"       >> "$file"; cat /etc/openvpn/ca.crt >> "$file"; echo "</ca>"       >> "$file"
+  echo "<tls-auth>" >> "$file"; cat /etc/openvpn/ta.key >> "$file"; echo "</tls-auth>" >> "$file"
+done
 
-echo "CREATE DATABASE \`openvpn-admin\`" | mysql -u root --password="$mysql_root_pass"
-echo "CREATE USER $mysql_user@localhost IDENTIFIED BY '$mysql_pass'" | mysql -u root --password="$mysql_root_pass"
-echo "GRANT ALL PRIVILEGES ON \`openvpn-admin\`.*  TO $mysql_user@localhost" | mysql -u root --password="$mysql_root_pass"
-echo "FLUSH PRIVILEGES" | mysql -u root --password="$mysql_root_pass"
+# Copy shared cert files into client-conf directories
+for dir in ./client-conf/gnu-linux/ ./client-conf/osx-viscosity/ ./client-conf/windows/; do
+  cp /etc/openvpn/{ca.crt,ta.key} "$dir"
+done
 
+# Set download filename
+if [ "$company_name" != "VPN" ]; then
+  sed -i "s/VPN/$company_name/" "$openvpn_admin/client-conf/windows/filename"
+fi
+# Strip trailing newline from filename file
+truncate -s -1 "$openvpn_admin/client-conf/windows/filename"
 
-printf "\n################## Setup web application ##################\n"
+chown -R "$user:$group" "$openvpn_admin"
 
-# Copy bash scripts (which will insert row in MySQL)
-cp -r "$base_path/installation/scripts" "/etc/openvpn/"
-chmod +x "/etc/openvpn/scripts/"*
+# ─── sudoers for EasyRSA (required for web UI certificate management) ─────────
+cat > /etc/sudoers.d/openvpn-admin <<-EOF
+$user ALL=(ALL) NOPASSWD: /etc/openvpn/easy-rsa/easyrsa
+EOF
+chmod 440 /etc/sudoers.d/openvpn-admin
 
-# Configure MySQL in openvpn scripts
-sed -i "s/USER=''/USER='$mysql_user'/" "/etc/openvpn/scripts/config.sh"
-sed -i "s/PASS=''/PASS='$mysql_pass'/" "/etc/openvpn/scripts/config.sh"
+# ─── Apache Configuration ─────────────────────────────────────────────────────
+echo -e "${Green}Configuring Apache...${NC}"
 
-# Create the directory of the web application
-mkdir "$openvpn_admin"
-cp -r "$base_path/"{index.php,sql,bower.json,.bowerrc,js,include,css,installation/client-conf} "$openvpn_admin"
+# Auto-detect installed PHP version
+php_version=$(php -r 'echo PHP_MAJOR_VERSION.".".PHP_MINOR_VERSION;' 2>/dev/null)
+if [ -z "$php_version" ]; then
+  echo -e "${Red}PHP not found after install. Please check your PHP installation.${NC}"
+  exit 1
+fi
 
-# New workspace
-cd "$openvpn_admin"
+cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/openvpn.conf
 
-# Replace config.php variables
-sed -i "s/\$user = '';/\$user = '$mysql_user';/" "./include/config.php"
-sed -i "s/\$pass = '';/\$pass = '$mysql_pass';/" "./include/config.php"
+# Set document root
+sed -i 's|/var/www/html|/var/www/openvpn-admin|g' /etc/apache2/sites-available/openvpn.conf
 
-# Replace in the client configurations with the ip of the server and openvpn protocol
-for file in $(find -name client.ovpn); do
-    sed -i "s/remote xxx\.xxx\.xxx\.xxx 443/remote $ip_server $server_port/" $file
-    echo "<ca>" >> $file
-    cat "/etc/openvpn/ca.crt" >> $file
-    echo "</ca>" >> $file
-    echo "<tls-auth>" >> $file
-    cat "/etc/openvpn/ta.key" >> $file
-    echo "</tls-auth>" >> $file
+# Add Directory block before closing VirtualHost tag
+sed -i '/<\/VirtualHost>/i \\n\t<Directory \/var\/www\/openvpn-admin>\n\t\tOptions Indexes FollowSymLinks\n\t\tAllowOverride All\n\t\tRequire all granted\n\t<\/Directory>' \
+    /etc/apache2/sites-available/openvpn.conf
 
-  if [ $openvpn_proto = "udp" ]; then
-    sed -i "s/proto tcp-client/proto udp/" $file
+# Set timezone in PHP ini
+php_ini="/etc/php/$php_version/apache2/php.ini"
+if [ -f "$php_ini" ]; then
+  if grep -q "^;date.timezone" "$php_ini"; then
+    sed -i "s|^;date.timezone =.*|date.timezone = $timezone|" "$php_ini"
+  elif ! grep -q "^date.timezone" "$php_ini"; then
+    echo "date.timezone = $timezone" >> "$php_ini"
   fi
-done
+fi
 
-# Copy ta.key inside the client-conf directory
-for directory in "./client-conf/gnu-linux/" "./client-conf/osx-viscosity/" "./client-conf/windows/"; do
-  cp "/etc/openvpn/"{ca.crt,ta.key} $directory
+# Disable any other PHP modules that may conflict, then enable the correct one
+for mod in $(apache2ctl -M 2>/dev/null | grep -oE 'php[0-9]+_[0-9]+' | tr '_' '.'); do
+  [ "$mod" != "php$php_version" ] && a2dismod "$mod" 2>/dev/null || true
 done
-
-# Install third parties
-bower --allow-root install
-chown -R "$user:$group" "$openvpn_admin"
-
-printf "\033[1m\n#################################### Finish ####################################\n"
-
-echo -e "# Congratulations, you have successfully setup OpenVPN-Admin! #\r"
-echo -e "Please, finish the installation by configuring your web server (Apache, NGinx...)"
-echo -e "and install the web application by visiting http://your-installation/index.php?installation\r"
-echo -e "Then, you will be able to run OpenVPN with systemctl start openvpn@server\r"
-echo "Please, report any issues here https://github.com/Chocobozzz/OpenVPN-Admin"
-printf "\n################################################################################ \033[0m\n"
+a2enmod "php$php_version" 2>/dev/null || true
+a2enmod rewrite 2>/dev/null || true
+
+a2dissite 000-default
+a2ensite openvpn
+systemctl restart apache2
+
+# ─── Start OpenVPN ────────────────────────────────────────────────────────────
+echo -e "${Green}Starting OpenVPN...${NC}"
+
+systemctl enable openvpn@server
+systemctl start  openvpn@server
+
+# ─── Save credentials ─────────────────────────────────────────────────────────
+{
+  echo "Auto Generated MySQL Root Password: $mysql_root_pass"
+  echo "Auto Generated OpenVPN-Admin MySQL Username: $mysql_user"
+  echo "Auto Generated OpenVPN-Admin MySQL Password: $mysql_pass"
+} >> ~/OpenVPN_Creds
+
+chmod 600 ~/OpenVPN_Creds
+
+# ─── Summary ──────────────────────────────────────────────────────────────────
+echo -e "\n\n${Yellow}################################################################################${NC}"
+echo -e "${Green}          OpenVPN-Admin Installation Complete!${NC}"
+echo -e "${Yellow}################################################################################${NC}"
+echo
+echo -e "  Complete setup by visiting:"
+echo -e "    Local:  ${Red}http://$ip_server/index.php?installation${NC}"
+echo -e "    Public: ${Red}http://$public_ip/index.php?installation${NC}"
+echo
+echo -e "  After setup, access the admin panel at:"
+echo -e "    Local:  ${Red}http://$ip_server/${NC}"
+echo -e "    Public: ${Red}http://$public_ip/${NC}"
+echo
+echo -e "  ${Yellow}Security reminders:${NC}"
+echo -e "    - Only forward UDP port $server_port externally (not port 80)"
+echo -e "    - Credentials saved to ${Red}~/OpenVPN_Creds${NC} — delete after noting them"
+echo
+echo -e "  Generated credentials:"
+echo -e "    MySQL root password:   ${Red}$mysql_root_pass${NC}"
+echo -e "    App DB username:       ${Red}$mysql_user${NC}"
+echo -e "    App DB password:       ${Red}$mysql_pass${NC}"
+echo -e "    Download filename:     ${Red}$company_name.ovpn${NC}"
+echo
+echo -e "  PHP version: ${Red}$php_version${NC}  |  DB engine: ${Red}$DB_ENGINE${NC}  |  OS: ${Red}$OS $OS_Version_Major.$OS_Version_Minor${NC}"
+echo
+echo -e "  Report issues: ${Red}https://github.com/arvage/OpenVPN-Admin${NC}"
+echo -e "${Yellow}################################################################################${NC}\n"
diff --git a/installation/client-conf/.htaccess b/installation/client-conf/.htaccess
new file mode 100644
index 00000000..36a9b18f
--- /dev/null
+++ b/installation/client-conf/.htaccess
@@ -0,0 +1,14 @@
+# Disabling Directory Browsing
+Options -Indexes
+
+# Block files starting with dot(.) like .htaaccess
+<FilesMatch "^\.">
+Order allow,deny
+Deny from all
+</FilesMatch>
+
+# Block files with any extenstion (this is for blocking ovpn files)
+<FilesMatch "\.*$">
+Order allow,deny
+Deny from all
+</FilesMatch>
diff --git a/installation/client-conf/gnu-linux/client.ovpn b/installation/client-conf/gnu-linux/client.ovpn
index 70c7c4d2..1e0b537a 100644
--- a/installation/client-conf/gnu-linux/client.ovpn
+++ b/installation/client-conf/gnu-linux/client.ovpn
@@ -1,11 +1,9 @@
 client
 dev tun
 proto tcp-client
-remote xxx.xxx.xxx.xxx 443
+remote 10.10.100.27 1194
 resolv-retry infinite
 cipher AES-256-CBC
-redirect-gateway
-
 # Keys
 # Identity
 key-direction 1
@@ -17,7 +15,7 @@ auth-nocache
 nobind
 persist-key
 persist-tun
-comp-lzo
+compress lz4-v2
 verb 3
 
 # DNS
diff --git a/installation/client-conf/osx-viscosity/Download and install the OpenVPN GUI (MAC).pdf b/installation/client-conf/osx-viscosity/Download and install the OpenVPN GUI (MAC).pdf
new file mode 100644
index 00000000..0b2e1ad1
Binary files /dev/null and b/installation/client-conf/osx-viscosity/Download and install the OpenVPN GUI (MAC).pdf differ
diff --git a/installation/client-conf/osx-viscosity/client.ovpn b/installation/client-conf/osx-viscosity/client.ovpn
index 215392f0..b84a0335 100644
--- a/installation/client-conf/osx-viscosity/client.ovpn
+++ b/installation/client-conf/osx-viscosity/client.ovpn
@@ -1,11 +1,9 @@
 client
 dev tun
 proto tcp-client
-remote xxx.xxx.xxx.xxx 443
+remote 10.10.100.27 1194
 resolv-retry infinite
 cipher AES-256-CBC
-redirect-gateway
-
 # Keys
 # Identity
 key-direction 1
@@ -17,7 +15,7 @@ auth-nocache
 nobind
 persist-key
 persist-tun
-comp-lzo
+compress lz4-v2
 verb 3
 
 # Proxy ?
diff --git a/installation/client-conf/windows/Download and install the OpenVPN GUI (Windows).pdf b/installation/client-conf/windows/Download and install the OpenVPN GUI (Windows).pdf
new file mode 100644
index 00000000..51bd22a3
Binary files /dev/null and b/installation/client-conf/windows/Download and install the OpenVPN GUI (Windows).pdf differ
diff --git a/installation/client-conf/windows/client.ovpn b/installation/client-conf/windows/client.ovpn
index 215392f0..b84a0335 100644
--- a/installation/client-conf/windows/client.ovpn
+++ b/installation/client-conf/windows/client.ovpn
@@ -1,11 +1,9 @@
 client
 dev tun
 proto tcp-client
-remote xxx.xxx.xxx.xxx 443
+remote 10.10.100.27 1194
 resolv-retry infinite
 cipher AES-256-CBC
-redirect-gateway
-
 # Keys
 # Identity
 key-direction 1
@@ -17,7 +15,7 @@ auth-nocache
 nobind
 persist-key
 persist-tun
-comp-lzo
+compress lz4-v2
 verb 3
 
 # Proxy ?
diff --git a/installation/client-conf/windows/filename b/installation/client-conf/windows/filename
new file mode 100644
index 00000000..fe4e549a
--- /dev/null
+++ b/installation/client-conf/windows/filename
@@ -0,0 +1 @@
+VPN
diff --git a/installation/scripts/connect.sh b/installation/scripts/connect.sh
index 0633d5f6..f360da31 100644
--- a/installation/scripts/connect.sh
+++ b/installation/scripts/connect.sh
@@ -28,3 +28,6 @@ mysql -h$HOST -P$PORT -u$USER -p$PASS $DB -e "INSERT INTO log (log_id, user_id,
 
 # We specify that the user is online
 mysql -h$HOST -P$PORT -u$USER -p$PASS $DB -e "UPDATE user SET user_online=1 WHERE user_id='$common_name'"
+
+# Send connect notification email (non-blocking)
+php /var/www/openvpn-admin/include/notify.php connect "$common_name" "$trusted_ip" 2>/dev/null &
diff --git a/installation/scripts/disconnect.sh b/installation/scripts/disconnect.sh
index 516fb6d5..37812b81 100644
--- a/installation/scripts/disconnect.sh
+++ b/installation/scripts/disconnect.sh
@@ -13,3 +13,6 @@ mysql -h$HOST -P$PORT -u$USER -p$PASS $DB -e "UPDATE user SET user_online=0 WHER
 
 # We insert the deconnection datetime
 mysql -h$HOST -P$PORT -u$USER -p$PASS $DB -e "UPDATE log SET log_end_time=now(), log_received='$bytes_received', log_send='$bytes_sent' WHERE log_trusted_ip='$trusted_ip' AND log_trusted_port='$trusted_port' AND user_id='$common_name' AND log_end_time IS NULL"
+
+# Send disconnect notification email (non-blocking)
+php /var/www/openvpn-admin/include/notify.php disconnect "$common_name" 2>/dev/null &
diff --git a/installation/server.conf b/installation/server.conf
index 5fcf5977..49f66856 100644
--- a/installation/server.conf
+++ b/installation/server.conf
@@ -1,9 +1,9 @@
 ## GENERAL ##
 
-# TCP or UDP, port 443, tunneling
+# TCP or UDP, port 1194, tunneling
 mode server
 proto tcp
-port 443
+port 1194
 dev tun
 
 ## KEY, CERTS AND NETWORK CONFIGURATION ##
@@ -29,19 +29,19 @@ server 10.8.0.0 255.255.255.0
 push "redirect-gateway def1"
 
 # Alternatives DNS (FDN)
-push "dhcp-option DNS 80.67.169.12"
-push "dhcp-option DNS 80.67.169.40"
+# push "dhcp-option DNS 80.67.169.12"
+# push "dhcp-option DNS 80.67.169.40"
 
 # (OpenDNS)
 # push "dhcp-option DNS 208.67.222.222"
 # push "dhcp-option DNS 208.67.220.220"
 
 # (Google)
-# push "dhcp-option DNS 8.8.8.8"
-# push "dhcp-option DNS 8.8.4.4"
+push "dhcp-option DNS 8.8.8.8"
+push "dhcp-option DNS 8.8.4.4"
 
-# Ping every 10 seconds and if after 120 seconds the client doesn't respond we disconnect
-keepalive 10 120
+# Ping every 5 seconds and if after 30 seconds the client doesn't respond we disconnect
+keepalive 5 30
 # Regenerate key each 5 hours (disconnect the client)
 reneg-sec 18000
 
@@ -56,7 +56,7 @@ persist-key
 # Don't close and re open TUN/TAP device
 persist-tun
 # Enable compression
-comp-lzo
+compress lz4-v2
 
 ## LOG ##
 
@@ -91,4 +91,4 @@ client-disconnect scripts/disconnect.sh
 
 # Notify the client that when the server restarts so it
 # can automatically reconnect.
-explicit-exit-notify 1
+#explicit-exit-notify 1
diff --git a/js/grids.js b/js/grids.js
index 0bc94fe7..526bfeb1 100644
--- a/js/grids.js
+++ b/js/grids.js
@@ -1,326 +1,571 @@
 $(function () {
-  "use strict";
-
-  // ------------------------- GENERIC STUFF ------------------------------
-  window.printStatus = function(msg, alert_type='warning', bootstrap_icon='') {
-     $('#message-stage').empty()
-         .append(
-            $(document.createElement('div'))
-            .addClass('alert alert-'+alert_type)
-            .html(bootstrap_icon?'<i class="stauts-icon glyphicon glyphicon-'+bootstrap_icon+'"></i>':'')
-            .append(msg)
-            .hide().fadeIn().delay(2000).fadeOut()
-         );
-  }
+  'use strict';
 
-  // ------------------------- GLOBAL definitions -------------------------
   var gridsUrl = 'include/grids.php';
-
-  function deleteFormatter() {
-    return "<span class='glyphicon glyphicon-remove action'></span";
+  var isSuperAdmin = (window.ADMIN_ROLE === 'super-admin');
+  var currentPage = window.CURRENT_PAGE || 'dashboard';
+
+  // ─── TOAST ───
+  function toast(msg, type) {
+    type = type || 'secondary';
+    var icons = { success: 'check-circle-fill', danger: 'x-circle-fill', warning: 'exclamation-triangle-fill', secondary: 'info-circle-fill' };
+    var icon  = icons[type] || icons.secondary;
+    var id    = 'toast-' + Date.now();
+    var html  = '<div id="' + id + '" class="toast align-items-center text-bg-' + type + ' border-0" role="alert">'
+              + '<div class="d-flex"><div class="toast-body"><i class="bi bi-' + icon + ' me-2"></i>' + msg + '</div>'
+              + '<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button></div></div>';
+    $('#toast-container').append(html);
+    var el = document.getElementById(id);
+    var t  = new bootstrap.Toast(el, { delay: 3500 });
+    t.show();
+    el.addEventListener('hidden.bs.toast', function() { el.remove(); });
   }
 
-  function refreshTable($table) {
-    $table.bootstrapTable('refresh');
+  function onError(xhr) {
+    var msg = 'Request failed';
+    try { var j = JSON.parse(xhr.responseText); if (j.error) msg = j.error; } catch(e) {}
+    toast(msg, 'danger');
   }
 
-  function onAjaxError (xhr, textStatus, error) {
-    console.error(error);
-    alert('Error: ' + textStatus);
+  function fmtBytes(n) {
+    n = parseInt(n) || 0;
+    if (n >= 1073741824) return (n/1073741824).toFixed(2) + ' GB';
+    if (n >= 1048576)    return (n/1048576).toFixed(1)    + ' MB';
+    if (n >= 1024)       return Math.round(n/1024)        + ' KB';
+    return n + ' B';
   }
 
-   function checkFormatter(value, row, index) {
-      return '<input type="checkbox" '+(parseInt(value)===1?'checked':'')+' />';
-   }
-
-   function LEDIndicatorFormatter(value, row, index) {
-      return '<div class="'+(parseInt(value)===1?'mini-led-green':'mini-led-red')+'"></div>';
-   }
+  // ─── SIDEBAR MOBILE TOGGLE ───
+  $('#sidebar-toggle').on('click', function() {
+    $('#sidebar').toggleClass('open');
+  });
 
-  // ------------------------- USERS definitions -------------------------
-  var $userTable = $('#table-users');
-  var $modalUserAdd = $('#modal-user-add');
-  var $userAddSave = $modalUserAdd.find('#modal-user-add-save');
-
-  function addUser(username, password) {
-    $.ajax({
-      url: gridsUrl,
-      method: 'POST',
-      data: {
-        add_user: true,
-        user_id: username,
-        user_pass: password
-      },
-      success: function() {
-        refreshTable($userTable);
-      },
-      error: onAjaxError
+  // ─── STATS ───
+  function loadStats() {
+    $.getJSON(gridsUrl, { select: 'stats' }, function(d) {
+      $('#stat-total-users').text(d.total_users);
+      $('#stat-online-now').text(d.online_now);
+      $('#stat-disabled').text(d.disabled);
+      $('#stat-log-entries').text(d.log_entries);
     });
   }
-
-  function deleteUser(user_id) {
-    $.ajax({
-      url: gridsUrl,
-      data: {
-        del_user: true,
-        del_user_id: user_id
-      },
-      method: 'POST',
-      success: function() {
-        refreshTable($userTable);
-      },
-      error: onAjaxError
+  loadStats();
+  setInterval(function() {
+    loadStats();
+    if (currentPage === 'dashboard') loadDashboard();
+    if (currentPage === 'users')     $userTable.bootstrapTable('refresh');
+  }, 10000);
+
+
+  // ════════════════════ DASHBOARD ════════════════════
+
+  function loadDashboard() {
+    $.getJSON(gridsUrl, { select: 'dashboard' }, function(data) {
+      var $tbody = $('#dashboard-tbody');
+      $tbody.empty();
+      if (data.error) {
+        $('#dashboard-no-status').removeClass('d-none').text(data.error || 'Status file not found.');
+        $tbody.html('<tr><td colspan="5" class="text-center text-muted py-4">No data available.</td></tr>');
+        return;
+      }
+      $('#dashboard-no-status').addClass('d-none');
+      if (!data.clients || data.clients.length === 0) {
+        $tbody.html('<tr><td colspan="5" class="text-center text-muted py-4"><i class="bi bi-wifi-off me-2"></i>No active connections.</td></tr>');
+        return;
+      }
+      data.clients.forEach(function(c) {
+        $tbody.append(
+          '<tr>' +
+          '<td><i class="bi bi-person-circle me-1 text-success"></i>' + c.common_name + '</td>' +
+          '<td><code>' + c.real_address + '</code></td>' +
+          '<td>' + c.rx_human + '</td>' +
+          '<td>' + c.tx_human + '</td>' +
+          '<td><small>' + c.connected_since + '</small></td>' +
+          '</tr>'
+        );
+      });
+    }).fail(function() {
+      $('#dashboard-no-status').removeClass('d-none');
     });
   }
 
-  function genericSetField(field, new_value, pk) {
-    $.ajax({
-      url: gridsUrl,
-      data: {
-        set_user: true,
-        name: field,
-        value: new_value,
-        pk : pk
-      },
-      method: 'POST',
-      success: function() {
-        refreshTable($userTable);
-      },
-      error: onAjaxError
-    });
-  }
+  if (currentPage === 'dashboard') loadDashboard();
 
-  var userEditable = {
-    url: gridsUrl,
-    params: function (params) {
-      params.set_user = true;
+  $('#btn-refresh-dashboard').on('click', function() {
+    $('#dashboard-tbody').html('<tr><td colspan="5" class="text-center text-muted py-4">Loading…</td></tr>');
+    loadDashboard();
+    loadStats();
+    toast('Refreshed', 'secondary');
+  });
 
-      return params;
-    },
-    success: function () {
-      refreshTable($userTable);
-    }
-  }
 
-  function updateConfig(config_file, config_content) {
-    $.ajax({
-      url: gridsUrl,
-      data: {
-        update_config : true,
-        config_file: config_file,
-        config_content: config_content
-      },
-      success : function(res){
-         printStatus(
-            res.config_success?'Config Successfully updated!':'An error occured while trying to save the updated config.',
-            res.config_success?'success':'danger',
-            res.config_success?'ok':'warning-sign'
-         );
-      },
-      dataType : 'json',
-      method: 'POST',
-      error: onAjaxError
-    });
-  }
+  // ════════════════════ USERS ════════════════════
 
-  // ES 2015 so be prudent
-  if (typeof Object.assign == 'function') {
-    var userDateEditable = Object.assign({ type: 'date', placement: 'bottom' }, userEditable);
-  } else {
-    console.warn('Your browser does not support Object.assign. You will not be able to modify the date inputs.');
+  var $userTable = $('#table-users');
+  var $modalUserAdd = new bootstrap.Modal('#modal-user-add');
+  var $modalUserEdit = new bootstrap.Modal('#modal-user-edit');
+  var $modalResetPass = new bootstrap.Modal('#modal-reset-pass');
+
+  function onlineFormatter(val) {
+    return parseInt(val) === 1
+      ? '<span class="led led-green" title="Online"></span>'
+      : '<span class="led led-red" title="Offline"></span>';
   }
 
-
-  // ------------------------- ADMIN definitions -------------------------
-  var $adminTable = $('#table-admins');
-  var $modalAdminAdd = $('#modal-admin-add');
-  var $adminAddSave = $modalAdminAdd.find('#modal-admin-add-save');
-
-  function addAdmin(username, password) {
-    $.ajax({
-      url: gridsUrl,
-      method: 'POST',
-      data: {
-        add_admin: true,
-        admin_id: username,
-        admin_pass: password
-      },
-      success: function() {
-        refreshTable($adminTable);
-      },
-      error: onAjaxError
-    });
+  function enableFormatter(val) {
+    return '<label class="toggle-switch">' +
+      '<input type="checkbox" class="enable-toggle" ' + (parseInt(val) === 1 ? 'checked' : '') + '/>' +
+      '<span class="toggle-slider"></span></label>';
   }
 
-  function deleteAdmin(admin_id) {
-    $.ajax({
-      url: gridsUrl,
-      data: {
-        del_admin: true,
-        del_admin_id: admin_id
-      },
-      method: 'POST',
-      success: function() {
-        refreshTable($adminTable);
-      },
-      error: onAjaxError
-    });
+  function passFormatter(val, row) {
+    if (!isSuperAdmin) return '<span class="pass-mask">••••••</span>';
+    return '<span class="pass-mask">••••••</span>' +
+      '<button class="btn btn-xs btn-warning btn-sm reset-pass-btn" data-user-id="' + row.user_id + '" style="padding:1px 6px;font-size:0.75em">Reset</button>';
   }
 
-  var adminEditable = {
-    url: gridsUrl,
-    params: function (params) {
-      params.set_admin = true;
-
-      return params;
-    },
-    success: function () {
-      refreshTable($adminTable);
+  function userActionsFormatter(val, row) {
+    var html = '';
+    if (isSuperAdmin) {
+      html += '<button class="btn btn-xs btn-sm btn-outline-primary me-1 user-edit-btn" data-id="' + row.user_id + '" '
+            + 'data-mail="' + (row.user_mail||'') + '" data-phone="' + (row.user_phone||'') + '" '
+            + 'data-start="' + (row.user_start_date||'') + '" data-end="' + (row.user_end_date||'') + '" '
+            + 'style="padding:1px 6px;font-size:0.75em" title="Edit"><i class="bi bi-pencil"></i></button>';
+      html += '<button class="btn btn-xs btn-sm btn-outline-danger user-del-btn" data-id="' + row.user_id + '" '
+            + 'style="padding:1px 6px;font-size:0.75em" title="Delete"><i class="bi bi-trash"></i></button>';
     }
+    return html || '<span class="text-muted small">–</span>';
   }
 
-  // ------------------------- ADMIN definitions -------------------------
-  var $logTable = $('#table-logs');
-
-
-  // -------------------- USERS --------------------
+  function userRowStyle(row) {
+    if (row.user_end_date) {
+      var today = new Date().toISOString().split('T')[0];
+      if (row.user_end_date < today) return { classes: 'user-expired' };
+    }
+    return {};
+  }
 
-  // Bootstrap table definition
   $userTable.bootstrapTable({
     url: gridsUrl,
     sortable: false,
-    checkboxHeader: false,
-    queryParams: function (params) {
-      params.select = 'user';
-      return params;
-    },
-    // Primary key
-    idField: 'user_id',
+    rowStyle: userRowStyle,
+    queryParams: function(p) { p.select = 'user'; return p; },
     columns: [
-      { title: "ID", field: "user_id", editable: userEditable },
-      { title: "Pass", field: "user_pass", editable: userEditable },
-      { title: "Mail", field: "user_mail", editable: userEditable },
-      { title: "Phone", field: "user_phone", editable: userEditable },
-      {
-         title: "Online",
-         field: "user_online",
-         formatter : LEDIndicatorFormatter
-      },
+      { title: 'Username',   field: 'user_id' },
+      { title: 'Password',   field: 'user_pass',       formatter: passFormatter },
+      { title: 'Email',      field: 'user_mail' },
+      { title: 'Phone',      field: 'user_phone' },
+      { title: 'Online',     field: 'user_online',     formatter: onlineFormatter, align: 'center' },
       {
-         title: "Enabled",
-         field: "user_enable",
-         formatter : checkFormatter,
-         events: {
-            'click input': function (e, value, row) {
-              genericSetField('user_enable', value === '1' ? '0': '1', row.user_id);
-            }
-         }
-      },
-      { title: "Start Date", field: "user_start_date", editable: userDateEditable },
-      { title: "End Date", field: "user_end_date", editable: userDateEditable },
-      {
-        title: 'Delete',
-        field: "user_del",
-        formatter: deleteFormatter,
+        title: 'Enabled', field: 'user_enable', align: 'center',
+        formatter: enableFormatter,
         events: {
-          'click .glyphicon': function (e, value, row) {
-            if (confirm('Are you sure you want to delete this user?')) {
-              deleteUser(row.user_id);
-            }
+          'change input.enable-toggle': function(e, val, row) {
+            if (!isSuperAdmin) return;
+            $.post(gridsUrl, { set_user: 1, name: 'user_enable', value: e.target.checked ? '1' : '0', pk: row.user_id },
+              function() { loadStats(); }, 'json').fail(onError);
           }
         }
-      }
+      },
+      { title: 'Start',      field: 'user_start_date' },
+      { title: 'End',        field: 'user_end_date' },
+      { title: '',           field: 'actions', formatter: userActionsFormatter, align: 'right' },
     ]
   });
 
-  // When we want to add a user
-  $userAddSave.on('click', function () {
-    var $usernameInput = $modalUserAdd.find('input[name=username]');
-    var $passwordInput = $modalUserAdd.find('input[name=password]');
-    addUser($usernameInput.val(), $passwordInput.val());
-    $modalUserAdd.modal('hide');
+  // Add user
+  $('#modal-user-add-save').on('click', function() {
+    var id   = $('#modal-user-add-username').val().trim();
+    var pass = $('#modal-user-add-password').val();
+    var mail = $('#modal-user-add-mail').val().trim();
+    if (!id || !pass) { toast('Username and password required.', 'warning'); return; }
+    $.post(gridsUrl, { add_user: 1, user_id: id, user_pass: pass, user_mail: mail }, function() {
+      $modalUserAdd.hide();
+      $userTable.bootstrapTable('refresh');
+      loadStats();
+      toast('User added.', 'success');
+    }, 'json').fail(onError);
   });
 
+  // Edit user
+  $(document).on('click', '.user-edit-btn', function() {
+    var $btn = $(this);
+    $('#edit-user-pk').val($btn.data('id'));
+    $('#edit-user-mail').val($btn.data('mail'));
+    $('#edit-user-phone').val($btn.data('phone'));
+    $('#edit-user-start').val($btn.data('start'));
+    $('#edit-user-end').val($btn.data('end'));
+    $modalUserEdit.show();
+  });
 
-  // -------------------- ADMINS --------------------
+  $('#modal-user-edit-save').on('click', function() {
+    var pk    = $('#edit-user-pk').val();
+    var mail  = $('#edit-user-mail').val();
+    var phone = $('#edit-user-phone').val();
+    var start = $('#edit-user-start').val();
+    var end   = $('#edit-user-end').val();
+    var reqs  = [
+      $.post(gridsUrl, { set_user: 1, name: 'user_mail',       value: mail,  pk: pk }),
+      $.post(gridsUrl, { set_user: 1, name: 'user_phone',      value: phone, pk: pk }),
+      $.post(gridsUrl, { set_user: 1, name: 'user_start_date', value: start, pk: pk }),
+      $.post(gridsUrl, { set_user: 1, name: 'user_end_date',   value: end,   pk: pk }),
+    ];
+    $.when.apply($, reqs).done(function() {
+      $modalUserEdit.hide();
+      $userTable.bootstrapTable('refresh');
+      toast('User updated.', 'success');
+    }).fail(onError);
+  });
 
-  // Bootstrap table definition
-  $adminTable.bootstrapTable({
-    url: gridsUrl,
-    sortable: false,
-    queryParams: function (params) {
-      params.select = 'admin';
-      return params;
-    },
-    // Primary key
-    idField: 'admin_id',
-    columns: [
-      { title: "ID", field: "admin_id", editable: adminEditable },
-      { title: "Pass", field: "admin_pass", editable: adminEditable },
-      {
-        title: 'Delete',
-        field: "admin_del",
-        formatter: deleteFormatter,
-        events: {
-          'click .glyphicon': function (e, value, row) {
-            if (confirm('Are you sure you want to delete this admin?')) {
-              deleteAdmin(row.admin_id);
-            }
-          }
-        }
-      }
-    ]
+  // Delete user
+  var _pendingDeleteType = null, _pendingDeleteId = null;
+  var $confirmModal = new bootstrap.Modal('#modal-confirm-delete');
+
+  $(document).on('click', '.user-del-btn', function() {
+    _pendingDeleteType = 'user';
+    _pendingDeleteId   = $(this).data('id');
+    $('#modal-confirm-delete-name').text(_pendingDeleteId);
+    $confirmModal.show();
+  });
+
+  // Reset password
+  $(document).on('click', '.reset-pass-btn', function() {
+    var userId  = $(this).data('user-id');
+    var adminId = $(this).data('admin-id');
+    $('#modal-reset-pass-input').val('');
+    if (userId)  $('#modal-reset-pass').data('type', 'user').data('id', userId);
+    if (adminId) $('#modal-reset-pass').data('type', 'admin').data('id', adminId);
+    $modalResetPass.show();
   });
 
-  // When we want to add a user
-  $adminAddSave.on('click', function () {
-    var $usernameInput = $modalAdminAdd.find('input[name=username]');
-    var $passwordInput = $modalAdminAdd.find('input[name=password]');
-    addAdmin($usernameInput.val(), $passwordInput.val());
-    $modalAdminAdd.modal('hide');
+  $('#modal-reset-pass-save').on('click', function() {
+    var type = $('#modal-reset-pass').data('type');
+    var id   = $('#modal-reset-pass').data('id');
+    var pass = $('#modal-reset-pass-input').val();
+    if (!pass) return;
+    var postData = type === 'admin'
+      ? { set_admin: 1, name: 'admin_pass', value: pass, pk: id }
+      : { set_user:  1, name: 'user_pass',  value: pass, pk: id };
+    $.post(gridsUrl, postData, function() {
+      $modalResetPass.hide();
+      toast('Password reset.', 'success');
+    }, 'json').fail(onError);
   });
 
-  // -------------------- LOGS --------------------
 
-  // Bootstrap table definition
+  // ════════════════════ LOGS ════════════════════
+
+  var $logTable = $('#table-logs');
+
   $logTable.bootstrapTable({
     url: gridsUrl,
-    sortable: false,
     sidePagination: 'server',
     pagination: true,
-    queryParams: function (params) {
-      params.select = 'log';
-      return params;
-    },
+    queryParams: function(p) { p.select = 'log'; return p; },
     columns: [
-      { title: "Log ID", field: "log_id" },
-      { title: "User ID", field: "user_id", filterControl : 'select' },
-      { title: "Trusted IP", field: "log_trusted_ip", filterControl : 'select' },
-      { title: "Trusted Port", field: "log_trusted_port", filterControl : 'select' },
-      { title: "Remote IP", field: "log_remote_ip", filterControl : 'select' },
-      { title: "Remote Port", field: "log_remote_port", filterControl : 'select' },
-      { title: "Start Time", field: "log_start_time" },
-      { title: "End Time", field: "log_end_time" },
-      { title: "Receveid", field: "log_received" },
-      { title: "Sent", field: "log_send" }
+      { title: 'User',           field: 'user_id',        filterControl: 'input' },
+      { title: 'Sessions',       field: 'sessions',       align: 'center' },
+      { title: 'Total Received', field: 'total_received', align: 'center' },
+      { title: 'Total Sent',     field: 'total_sent',     align: 'center' },
+      { title: 'Last Connected', field: 'last_connected' },
     ]
   });
 
-  // watch the config textareas for changes an persist them if a change was made
-  $('textarea').keyup(function(){
-     $('#save-config-btn').removeClass('saved-success hidden').addClass('get-attention');
-  }).change(function(){
-      updateConfig($(this).data('config-file'), $(this).val());
-      $('#save-config-btn').removeClass('get-attention').addClass('saved-success');
+
+  // ════════════════════ ADMINS ════════════════════
+
+  var $adminTable = $('#table-admins');
+  var $modalAdminAdd = new bootstrap.Modal('#modal-admin-add');
+
+  function adminActionsFormatter(val, row) {
+    var html = '';
+    if (isSuperAdmin && row.admin_id !== (window._currentAdmin || '')) {
+      html += '<button class="btn btn-sm btn-outline-secondary me-1 admin-role-btn" '
+            + 'data-id="' + row.admin_id + '" data-role="' + row.admin_role + '" '
+            + 'style="padding:1px 6px;font-size:0.75em" title="Toggle Role">'
+            + '<i class="bi bi-arrow-repeat"></i></button>';
+      html += '<button class="btn btn-sm btn-outline-danger admin-del-btn" data-id="' + row.admin_id + '" '
+            + 'style="padding:1px 6px;font-size:0.75em" title="Delete"><i class="bi bi-trash"></i></button>';
+    }
+    return html || '<span class="text-muted small">–</span>';
+  }
+
+  function adminPassFormatter(val, row) {
+    if (!isSuperAdmin) return '<span class="pass-mask">••••••</span>';
+    return '<span class="pass-mask">••••••</span>' +
+      '<button class="btn btn-sm btn-warning reset-pass-btn" data-admin-id="' + row.admin_id + '" style="padding:1px 6px;font-size:0.75em">Reset</button>';
+  }
+
+  function roleFormatter(val) {
+    return val === 'super-admin'
+      ? '<span class="badge bg-primary">Super Admin</span>'
+      : '<span class="badge bg-secondary">Read Only</span>';
+  }
+
+  $adminTable.bootstrapTable({
+    url: gridsUrl,
+    queryParams: function(p) { p.select = 'admin'; return p; },
+    columns: [
+      { title: 'Username', field: 'admin_id' },
+      { title: 'Password', field: 'admin_pass',   formatter: adminPassFormatter },
+      { title: 'Email',    field: 'admin_mail' },
+      { title: 'Role',     field: 'admin_role',   formatter: roleFormatter, align: 'center' },
+      { title: '',         field: 'actions',       formatter: adminActionsFormatter, align: 'right' },
+    ]
   });
 
-}); // doc ready end
+  $('#modal-admin-add-save').on('click', function() {
+    var id   = $('#modal-admin-add-username').val().trim();
+    var pass = $('#modal-admin-add-password').val();
+    var mail = $('#modal-admin-add-mail').val().trim();
+    var role = $('#modal-admin-add-role').val();
+    if (!id || !pass) { toast('Username and password required.', 'warning'); return; }
+    $.post(gridsUrl, { add_admin: 1, admin_id: id, admin_pass: pass, admin_mail: mail, admin_role: role }, function() {
+      $modalAdminAdd.hide();
+      $adminTable.bootstrapTable('refresh');
+      toast('Admin added.', 'success');
+    }, 'json').fail(onError);
+  });
+
+  $(document).on('click', '.admin-del-btn', function() {
+    _pendingDeleteType = 'admin';
+    _pendingDeleteId   = $(this).data('id');
+    $('#modal-confirm-delete-name').text(_pendingDeleteId);
+    $confirmModal.show();
+  });
 
-// -------------------- HACKS --------------------
+  $(document).on('click', '.admin-role-btn', function() {
+    var id      = $(this).data('id');
+    var newRole = $(this).data('role') === 'super-admin' ? 'read-only' : 'super-admin';
+    $.post(gridsUrl, { set_admin: 1, name: 'admin_role', value: newRole, pk: id }, function() {
+      $adminTable.bootstrapTable('refresh');
+      toast('Role updated to ' + newRole + '.', 'success');
+    }, 'json').fail(onError);
+  });
 
-// Autofocus for bootstrap modals
-// Thx http://stackoverflow.com/questions/14940423/autofocus-input-in-twitter-bootstrap-modal/33323836#33323836
+  // Shared confirm delete handler
+  $('#modal-confirm-delete-ok').on('click', function() {
+    if (_pendingDeleteType === 'user') {
+      $.post(gridsUrl, { del_user: 1, del_user_id: _pendingDeleteId }, function() {
+        $userTable.bootstrapTable('refresh');
+        loadStats();
+        toast('User deleted.', 'success');
+      }, 'json').fail(onError);
+    } else if (_pendingDeleteType === 'admin') {
+      $.post(gridsUrl, { del_admin: 1, del_admin_id: _pendingDeleteId }, function() {
+        $adminTable.bootstrapTable('refresh');
+        toast('Admin deleted.', 'success');
+      }, 'json').fail(onError);
+    }
+    $confirmModal.hide();
+    _pendingDeleteType = _pendingDeleteId = null;
+  });
+
+
+  // ════════════════════ CONFIGS ════════════════════
+
+  // Track dirty state per textarea
+  $(document).on('input', '.cfg-textarea', function() {
+    $(this).data('dirty', true);
+    $('#save-config-btn, #save-config-btn-fn').removeClass('d-none btn-secondary').addClass('btn-warning');
+  });
+
+  // Debounce save on blur
+  $(document).on('blur', '.cfg-textarea', function() {
+    if ($(this).data('dirty')) {
+      var $ta = $(this);
+      $.post(gridsUrl, { update_config: 1, config_file: $ta.data('config-file'), config_content: $ta.val() },
+        function(r) {
+          if (r.config_success) {
+            $ta.data('dirty', false);
+            $('#save-config-btn, #save-config-btn-fn').addClass('btn-success').removeClass('btn-warning');
+            setTimeout(function() {
+              $('#save-config-btn, #save-config-btn-fn').addClass('d-none btn-secondary').removeClass('btn-success btn-warning');
+            }, 2500);
+            toast('Config saved.', 'success');
+          } else {
+            toast('Failed to save config.', 'danger');
+          }
+        }, 'json'
+      ).fail(onError);
+    }
+  });
+
+
+  // ════════════════════ CERTIFICATES ════════════════════
+
+  function loadCertificates() {
+    $.getJSON(gridsUrl, { select: 'certificates' }, function(data) {
+      var $tbody = $('#cert-tbody');
+      $tbody.empty();
+      if (data.error) {
+        $('#cert-no-easyrsa').removeClass('d-none').html('<i class="bi bi-info-circle me-2"></i>' + data.error);
+        $tbody.html('<tr><td colspan="3" class="text-center text-muted py-4">EasyRSA not configured.</td></tr>');
+        return;
+      }
+      $('#cert-no-easyrsa').addClass('d-none');
+      if (!data.length) {
+        $tbody.html('<tr><td colspan="3" class="text-center text-muted py-4">No user certificates found.</td></tr>');
+        return;
+      }
+      data.forEach(function(c) {
+        var badgeClass = c.status === 'V' ? 'badge-cert-v' : (c.status === 'R' ? 'badge-cert-r' : 'badge-cert-e');
+        var actions = '';
+        if (c.status === 'V' && c.has_cert) {
+          actions += '<a href="include/grids.php?cert_download=1&cert_name=' + encodeURIComponent(c.cn) + '" class="btn btn-xs btn-sm btn-outline-primary me-1" style="padding:1px 6px;font-size:0.75em" title="Download .ovpn"><i class="bi bi-download"></i></a>';
+          actions += '<button class="btn btn-xs btn-sm btn-outline-secondary me-1 send-cfg-btn" data-cn="' + c.cn + '" style="padding:1px 6px;font-size:0.75em" title="Email config"><i class="bi bi-envelope"></i></button>';
+        }
+        if (isSuperAdmin && c.status === 'V') {
+          actions += '<button class="btn btn-xs btn-sm btn-outline-danger cert-revoke-btn" data-cn="' + c.cn + '" style="padding:1px 6px;font-size:0.75em" title="Revoke"><i class="bi bi-x-circle"></i></button>';
+        }
+        $tbody.append(
+          '<tr>' +
+          '<td>' + c.cn + '</td>' +
+          '<td><span class="badge ' + badgeClass + '">' + c.status_label + '</span></td>' +
+          '<td class="text-end">' + actions + '</td>' +
+          '</tr>'
+        );
+      });
+    }).fail(function() {
+      $('#cert-tbody').html('<tr><td colspan="3" class="text-center text-muted py-4">Could not load certificates.</td></tr>');
+    });
+  }
+
+  if (currentPage === 'certificates') loadCertificates();
+
+  // Generate cert
+  $('#modal-cert-gen-btn').on('click', function() {
+    var cn = $('#modal-cert-cn').val().trim();
+    if (!cn || !/^[a-zA-Z0-9._-]+$/.test(cn)) {
+      toast('Invalid common name.', 'warning');
+      return;
+    }
+    var $btn = $(this).prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Generating…');
+    $('#cert-gen-output').removeClass('d-none');
+    $('#cert-gen-pre').text('Running easyrsa, this may take a moment…');
+
+    $.post(gridsUrl, { cert_generate: 1, cert_name: cn }, function(r) {
+      $('#cert-gen-pre').text(r.output || '(no output)');
+      if (r.ok) {
+        toast('Certificate generated for ' + cn, 'success');
+        loadCertificates();
+        setTimeout(function() { bootstrap.Modal.getInstance('#modal-cert-add').hide(); }, 2000);
+      } else {
+        toast('Generation failed. Check sudo access.', 'danger');
+        $('#cert-sudo-note').removeClass('d-none');
+      }
+    }, 'json').fail(onError).always(function() {
+      $btn.prop('disabled', false).html('<i class="bi bi-cpu me-1"></i>Generate');
+    });
+  });
+
+  // Revoke cert
+  $(document).on('click', '.cert-revoke-btn', function() {
+    var cn = $(this).data('cn');
+    if (!confirm('Revoke certificate for ' + cn + '? This cannot be undone.')) return;
+    $.post(gridsUrl, { cert_revoke: 1, cert_name: cn }, function(r) {
+      if (r.ok) { toast('Certificate revoked for ' + cn, 'success'); loadCertificates(); }
+      else       { toast('Revocation failed.', 'danger'); }
+    }, 'json').fail(onError);
+  });
+
+  // Send config via email
+  var $sendCfgModal = new bootstrap.Modal('#modal-send-config');
+  $(document).on('click', '.send-cfg-btn', function() {
+    $('#send-config-cn').val($(this).data('cn'));
+    $('#send-config-email').val('');
+    $sendCfgModal.show();
+  });
+
+  $('#send-config-btn').on('click', function() {
+    var cn    = $('#send-config-cn').val();
+    var email = $('#send-config-email').val().trim();
+    if (!email) { toast('Enter an email address.', 'warning'); return; }
+    $.post(gridsUrl, { send_config_email: 1, cert_name: cn, email_to: email }, function(r) {
+      if (r.ok) { $sendCfgModal.hide(); toast('Config emailed to ' + email, 'success'); }
+      else       { toast('Failed to send email: ' + (r.error||''), 'danger'); }
+    }, 'json').fail(onError);
+  });
+
+
+  // ════════════════════ SMTP SETTINGS ════════════════════
+
+  function loadSmtpSettings() {
+    $.getJSON(gridsUrl, { select: 'smtp' }, function(d) {
+      if (!d || d.error) return;
+      $('#smtp_host').val(d.smtp_host || '');
+      $('#smtp_port').val(d.smtp_port || 587);
+      $('#smtp_user').val(d.smtp_user || '');
+      $('#smtp_from').val(d.smtp_from || '');
+      $('#smtp_from_name').val(d.smtp_from_name || 'OpenVPN Admin');
+      $('#smtp_secure').val(d.smtp_secure || 'tls');
+      // notifications
+      $('#notify_connect').prop('checked',    !!parseInt(d.notify_connect));
+      $('#notify_disconnect').prop('checked', !!parseInt(d.notify_disconnect));
+      $('#notify_expiry').prop('checked',     !!parseInt(d.notify_expiry));
+    });
+  }
+
+  if (currentPage === 'settings') loadSmtpSettings();
+
+  $('#smtp-form').on('submit', function(e) {
+    e.preventDefault();
+    var $btn = $('#smtp-save-btn').prop('disabled', true);
+    var data = {
+      save_smtp:       1,
+      smtp_host:       $('#smtp_host').val(),
+      smtp_port:       $('#smtp_port').val(),
+      smtp_user:       $('#smtp_user').val(),
+      smtp_pass:       $('#smtp_pass').val(),
+      smtp_from:       $('#smtp_from').val(),
+      smtp_from_name:  $('#smtp_from_name').val(),
+      smtp_secure:     $('#smtp_secure').val(),
+      notify_connect:  $('#notify_connect').is(':checked') ? 1 : 0,
+      notify_disconnect: $('#notify_disconnect').is(':checked') ? 1 : 0,
+      notify_expiry:   $('#notify_expiry').is(':checked') ? 1 : 0,
+    };
+    $.post(gridsUrl, data, function() {
+      toast('SMTP settings saved.', 'success');
+    }, 'json').fail(onError).always(function() { $btn.prop('disabled', false); });
+  });
+
+  $('#notif-form').on('submit', function(e) {
+    e.preventDefault();
+    var $btn = $('#notif-save-btn').prop('disabled', true);
+    $.post(gridsUrl, {
+      save_smtp:         1,
+      notify_connect:    $('#notify_connect').is(':checked') ? 1 : 0,
+      notify_disconnect: $('#notify_disconnect').is(':checked') ? 1 : 0,
+      notify_expiry:     $('#notify_expiry').is(':checked') ? 1 : 0,
+    }, function() {
+      toast('Notification settings saved.', 'success');
+    }, 'json').fail(onError).always(function() { $btn.prop('disabled', false); });
+  });
+
+  $('#smtp-test-btn').on('click', function() {
+    var email = $('#smtp-test-email').val().trim();
+    if (!email) { toast('Enter a recipient email for the test.', 'warning'); return; }
+    var $btn = $(this).prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');
+    $.post(gridsUrl, { test_smtp: 1, test_email: email }, function(r) {
+      if (r.ok) toast('Test email sent to ' + email, 'success');
+      else      toast('Failed: ' + (r.error||'check settings'), 'danger');
+    }, 'json').fail(onError).always(function() {
+      $btn.prop('disabled', false).html('<i class="bi bi-send me-1"></i>Send Test');
+    });
+  });
+
+
+  // ════════════════════ AUTOFOCUS IN MODALS ════════════════════
+
+  $(document).on('shown.bs.modal', '.modal', function() {
+    $(this).find('[autofocus]').focus();
+  });
+
+  // Clear cert gen output when modal reopened
+  $(document).on('show.bs.modal', '#modal-cert-add', function() {
+    $('#modal-cert-cn').val('');
+    $('#cert-gen-output').addClass('d-none');
+    $('#cert-gen-pre').text('');
+  });
 
-$(document).on('shown.bs.modal', '.modal', function() {
-  $(this).find('[autofocus]').focus();
 });
diff --git a/migration.php b/migration.php
index 876ca9d1..14dbaf94 100644
--- a/migration.php
+++ b/migration.php
@@ -34,11 +34,10 @@
     // Do the migration, we are behind the last schema
     if ($sql_schema < $migration_value) {
 
-      // Create the tables or die
+      // Apply the migration, statement by statement
       $sql_file = dirname(__FILE__) . "/sql/schema-$migration_value.sql";
       try {
-        $sql = file_get_contents($sql_file);
-        $bdd->exec($sql);
+        execMigrationSql($bdd, file_get_contents($sql_file));
       }
       catch (PDOException $e) {
         printError($e->getMessage());
diff --git a/online-install.sh b/online-install.sh
new file mode 100644
index 00000000..86bad14d
--- /dev/null
+++ b/online-install.sh
@@ -0,0 +1,73 @@
+#!/bin/bash
+set -e
+
+# --- Colors -------------------------------------------------------------------
+NC='\033[0m'
+Red='\033[1;31m'
+Yellow='\033[0;33m'
+Green='\033[0;32m'
+
+clear
+
+echo -e "${Green}"
+echo '  ================================================'
+echo '  |                                              |'
+echo '  |         OpenVPN-Admin Online Installer       |'
+echo '  |      github.com/arvage/OpenVPN-Admin         |'
+echo '  |                                              |'
+echo '  ================================================'
+echo -e "${NC}"
+
+# --- OS Detection -------------------------------------------------------------
+. /etc/os-release
+OS=$(echo "$ID" | awk '{print toupper(substr($0,1,1)) substr($0,2)}')
+
+# 64-bit Raspberry Pi OS identifies as "debian" - detect by hardware
+IS_RASPBERRYPI=false
+if grep -qiE "Raspberry Pi|BCM2" /proc/cpuinfo 2>/dev/null; then
+  IS_RASPBERRYPI=true
+  OS="Raspbian"
+fi
+
+case "$OS" in
+  Ubuntu|Raspbian|Debian) ;;
+  *)
+    echo -e "${Red}Only Ubuntu, Debian, and Raspberry Pi OS are supported.${NC}"
+    exit 1
+    ;;
+esac
+
+echo -e "${Green}Detected OS: ${Red}$OS${NC}"
+
+# --- Suppress needrestart and apt interactive prompts -------------------------
+# NEEDRESTART_MODE=a tells needrestart to restart services automatically
+# without any prompts. This works via environment variable alone - no file
+# editing needed, no root permission required at this point.
+export NEEDRESTART_MODE=a
+export DEBIAN_FRONTEND=noninteractive
+
+# --- Update package lists and install git -------------------------------------
+echo -e "${Green}Updating package lists...${NC}"
+sudo -E apt-get update -q
+
+echo -e "${Green}Installing git...${NC}"
+sudo -E apt-get install -y -q git
+
+# --- Clone the repository -----------------------------------------------------
+INSTALL_DIR="$HOME/openvpn-admin"
+
+if [ -d "$INSTALL_DIR" ]; then
+  echo -e "${Yellow}Directory $INSTALL_DIR already exists. Pulling latest changes...${NC}"
+  git -C "$INSTALL_DIR" pull origin master
+else
+  echo -e "${Green}Cloning OpenVPN-Admin...${NC}"
+  git clone https://github.com/arvage/OpenVPN-Admin "$INSTALL_DIR"
+fi
+
+cd "$INSTALL_DIR" || { echo -e "${Red}Failed to enter $INSTALL_DIR${NC}"; exit 1; }
+
+chmod +x ./install.sh
+
+# --- Run installer ------------------------------------------------------------
+echo -e "${Green}Starting installation...${NC}"
+sudo -E ./install.sh /var/www www-data www-data
diff --git a/sql/schema-10.sql b/sql/schema-10.sql
new file mode 100644
index 00000000..83029988
--- /dev/null
+++ b/sql/schema-10.sql
@@ -0,0 +1,24 @@
+-- Migration 10: admin roles, SMTP/notification settings
+-- Add missing columns to admin table (not in schema-0)
+ALTER TABLE `admin` ADD COLUMN `admin_mail` varchar(64) DEFAULT NULL;
+ALTER TABLE `admin` ADD COLUMN `admin_phone` varchar(16) DEFAULT NULL;
+ALTER TABLE `admin` ADD COLUMN `admin_enable` tinyint(1) NOT NULL DEFAULT 1;
+ALTER TABLE `admin` ADD COLUMN `admin_role` enum('super-admin','read-only') NOT NULL DEFAULT 'super-admin';
+
+-- SMTP configuration and notification toggles
+CREATE TABLE IF NOT EXISTS `smtp_settings` (
+  `id` INT NOT NULL DEFAULT 1,
+  `smtp_host` varchar(255) NOT NULL DEFAULT '',
+  `smtp_port` INT NOT NULL DEFAULT 587,
+  `smtp_user` varchar(255) NOT NULL DEFAULT '',
+  `smtp_pass` varchar(255) NOT NULL DEFAULT '',
+  `smtp_from` varchar(255) NOT NULL DEFAULT '',
+  `smtp_from_name` varchar(255) NOT NULL DEFAULT 'OpenVPN Admin',
+  `smtp_secure` varchar(10) NOT NULL DEFAULT 'tls',
+  `notify_connect` tinyint(1) NOT NULL DEFAULT 0,
+  `notify_disconnect` tinyint(1) NOT NULL DEFAULT 0,
+  `notify_expiry` tinyint(1) NOT NULL DEFAULT 0,
+  PRIMARY KEY (`id`)
+) ENGINE=MyISAM DEFAULT CHARSET=utf8;
+
+INSERT IGNORE INTO `smtp_settings` (`id`) VALUES (1);
diff --git a/sql/schema-5.sql b/sql/schema-5.sql
index a67cf2c8..59450b89 100644
--- a/sql/schema-5.sql
+++ b/sql/schema-5.sql
@@ -4,6 +4,6 @@ ALTER TABLE `user` CHANGE `user_start_date` `user_start_date` DATE NULL DEFAULT
 ALTER TABLE `user` CHANGE `user_end_date` `user_end_date` DATE NULL DEFAULT NULL;
 ALTER TABLE `log` CHANGE `log_end_time` `log_end_time` TIMESTAMP NULL DEFAULT NULL;
 
-UPDATE `user` SET `user_start_date` = NULL WHERE `user_start_date` = '0000-00-00';
-UPDATE `user` SET `user_end_date` = NULL WHERE `user_end_date` = '0000-00-00';
-UPDATE `log` SET `log_end_time` = NULL WHERE `log_end_time` = '0000-00-00';
+UPDATE `user` SET `user_start_date` = NULL WHERE `user_start_date` = '2020-01-01';
+UPDATE `user` SET `user_end_date` = NULL WHERE `user_end_date` = '2222-01-01';
+UPDATE `log` SET `log_end_time` = NULL WHERE `log_end_time` = '2222-12-12';
\ No newline at end of file
diff --git a/uninstall.sh b/uninstall.sh
new file mode 100755
index 00000000..7de2784d
--- /dev/null
+++ b/uninstall.sh
@@ -0,0 +1,176 @@
+#!/bin/bash
+
+# --- Colors -------------------------------------------------------------------
+NC='\033[0m'
+Red='\033[1;31m'
+Yellow='\033[0;33m'
+Green='\033[0;32m'
+Bold='\033[1m'
+
+# --- Help ---------------------------------------------------------------------
+print_help() {
+  echo -e "sudo ./uninstall.sh www_basedir"
+  echo -e "\twww_basedir: The directory where the web application is (e.g. /var/www)"
+}
+
+# --- Root check ---------------------------------------------------------------
+if [ "$EUID" -ne 0 ]; then
+  echo -e "${Red}Please run as root:${NC}"
+  echo -e "  sudo ./uninstall.sh /var/www"
+  exit 1
+fi
+
+# --- Args check ---------------------------------------------------------------
+if [ "$#" -ne 1 ]; then
+  print_help
+  exit 1
+fi
+
+www="$1/openvpn-admin"
+
+if [ ! -d "$www" ]; then
+  echo -e "${Red}Directory not found: $www${NC}"
+  print_help
+  exit 1
+fi
+
+# --- Extract MySQL user from config.php ---------------------------------------
+mysql_user=$(sed -n "s/.*\\\$user = '\(.*\)';.*/\1/p" "$www/include/config.php" 2>/dev/null | head -1)
+
+if [ -z "$mysql_user" ]; then
+  echo -e "${Yellow}Warning: could not read MySQL username from $www/include/config.php${NC}"
+  echo -e "${Yellow}Database cleanup will be skipped.${NC}"
+fi
+
+# --- Detect primary NIC (same logic as install.sh) ----------------------------
+primary_nic=$(ip route 2>/dev/null | awk '/^default/{print $5; exit}')
+if [ -z "$primary_nic" ]; then
+  primary_nic=$(ip link 2>/dev/null | awk -F': ' '/^[0-9]+: e/{print $2; exit}')
+fi
+
+# --- Confirmation prompt -------------------------------------------------------
+echo -e ""
+echo -e "${Bold}${Red}=== OpenVPN-Admin Uninstaller ===${NC}"
+echo -e ""
+echo -e "This will permanently remove:"
+echo -e "  ${Red}*${NC} OpenVPN service, keys and configuration"
+echo -e "  ${Red}*${NC} Web application at ${Yellow}$www${NC}"
+[ -n "$mysql_user" ] && \
+echo -e "  ${Red}*${NC} MySQL database ${Yellow}openvpn-admin${NC} and user ${Yellow}$mysql_user${NC}"
+echo -e "  ${Red}*${NC} Apache virtual host (openvpn)"
+echo -e "  ${Red}*${NC} iptables NAT rules (NIC: ${Yellow}${primary_nic:-unknown}${NC})"
+echo -e "  ${Red}*${NC} IP forwarding sysctl settings"
+echo -e "  ${Red}*${NC} Log directory ${Yellow}/var/log/openvpn/${NC}"
+echo -e "  ${Red}*${NC} sudoers entry for easyrsa"
+echo -e ""
+echo -e "${Bold}Type 'yes' to confirm, anything else to abort:${NC}"
+read -r agree </dev/tty
+
+if [ "$agree" != "yes" ]; then
+  echo "Aborted."
+  exit 0
+fi
+
+echo -e ""
+
+# --- Stop and disable OpenVPN service -----------------------------------------
+echo -e "${Green}Stopping OpenVPN service...${NC}"
+systemctl stop   openvpn@server 2>/dev/null || true
+systemctl disable openvpn@server 2>/dev/null || true
+
+# --- MySQL / MariaDB cleanup --------------------------------------------------
+if [ -n "$mysql_user" ]; then
+  echo -e "${Green}Removing database and user...${NC}"
+
+  # Try socket auth first (default on modern MySQL/MariaDB), then prompt for password
+  MYSQL_AUTH=()
+  if ! mysql -u root -e "SELECT 1" &>/dev/null; then
+    while true; do
+      read -p "MySQL root password: " -s mysql_root_pass; echo
+      if mysql -u root --password="$mysql_root_pass" -e "SELECT 1" &>/dev/null; then
+        MYSQL_AUTH=(--password="$mysql_root_pass")
+        break
+      fi
+      echo -e "${Red}Wrong password, try again.${NC}"
+    done
+  fi
+
+  mysql -u root "${MYSQL_AUTH[@]}" -e "DROP USER IF EXISTS '$mysql_user'@'localhost';" 2>/dev/null || true
+  mysql -u root "${MYSQL_AUTH[@]}" -e "DROP DATABASE IF EXISTS \`openvpn-admin\`;"       2>/dev/null || true
+fi
+
+# --- Remove OpenVPN files -----------------------------------------------------
+echo -e "${Green}Removing OpenVPN files...${NC}"
+rm -rf /etc/openvpn/easy-rsa/
+rm -rf /etc/openvpn/ccd/
+rm -rf /etc/openvpn/scripts/
+rm -f  /etc/openvpn/server.conf
+rm -f  /etc/openvpn/ca.crt
+rm -f  /etc/openvpn/ta.key
+rm -f  /etc/openvpn/server.crt
+rm -f  /etc/openvpn/server.key
+rm -f  /etc/openvpn/dh*.pem
+
+# --- Remove web application ---------------------------------------------------
+echo -e "${Green}Removing web application...${NC}"
+rm -rf "$www"
+
+# --- Remove sudoers entry -----------------------------------------------------
+rm -f /etc/sudoers.d/openvpn-admin
+
+# --- Remove log directory -----------------------------------------------------
+rm -rf /var/log/openvpn/
+
+# --- IP forwarding cleanup ----------------------------------------------------
+echo -e "${Green}Disabling IP forwarding...${NC}"
+echo 0 > /proc/sys/net/ipv4/ip_forward
+# Remove sysctl.d entry added by install.sh
+rm -f /etc/sysctl.d/99-openvpn.conf
+# Also clean up any old-style entry in sysctl.conf (added by older versions)
+sed -i '/net.ipv4.ip_forward/d' /etc/sysctl.conf 2>/dev/null || true
+sysctl -p /etc/sysctl.d/*.conf &>/dev/null || true
+
+# --- iptables cleanup ---------------------------------------------------------
+echo -e "${Green}Removing iptables rules...${NC}"
+iptables -D FORWARD -i tun0 -j ACCEPT 2>/dev/null || true
+iptables -D FORWARD -o tun0 -j ACCEPT 2>/dev/null || true
+iptables -D OUTPUT  -o tun0 -j ACCEPT 2>/dev/null || true
+
+if [ -n "$primary_nic" ]; then
+  iptables -D FORWARD -i tun0 -o "$primary_nic" -j ACCEPT                       2>/dev/null || true
+  iptables -t nat -D POSTROUTING -o "$primary_nic" -j MASQUERADE                2>/dev/null || true
+  iptables -t nat -D POSTROUTING -s 10.8.0.0/24 -o "$primary_nic" -j MASQUERADE 2>/dev/null || true
+  iptables -t nat -D POSTROUTING -s 10.8.0.2/24 -o "$primary_nic" -j MASQUERADE 2>/dev/null || true
+else
+  echo -e "${Yellow}Warning: could not detect primary NIC. iptables NAT rules may need manual removal.${NC}"
+fi
+
+# Persist the cleaned-up ruleset (removes our rules, keeps any others)
+if [ -d /etc/iptables ]; then
+  iptables-save > /etc/iptables/rules.v4 2>/dev/null || true
+fi
+
+# --- Apache cleanup -----------------------------------------------------------
+echo -e "${Green}Removing Apache configuration...${NC}"
+a2dissite openvpn 2>/dev/null || true
+rm -f /etc/apache2/sites-available/openvpn.conf
+a2ensite 000-default 2>/dev/null || true
+systemctl restart apache2 2>/dev/null || true
+
+# --- PHP timezone cleanup -----------------------------------------------------
+php_version=$(php -r 'echo PHP_MAJOR_VERSION.".".PHP_MINOR_VERSION;' 2>/dev/null)
+if [ -n "$php_version" ]; then
+  php_ini="/etc/php/$php_version/apache2/php.ini"
+  if [ -f "$php_ini" ]; then
+    # Revert date.timezone back to commented-out default
+    sed -i "s|^date.timezone = .*|;date.timezone =|" "$php_ini" 2>/dev/null || true
+    # Remove old-style line added by earlier versions of this installer
+    sed -i "/added by openvpn-admin/d" "$php_ini" 2>/dev/null || true
+  fi
+fi
+
+# --- Done ---------------------------------------------------------------------
+echo -e ""
+echo -e "${Green}OpenVPN-Admin has been completely removed.${NC}"
+echo -e "${Yellow}Note: packages (openvpn, apache2, mysql/mariadb, php) were not removed."
+echo -e "      Remove them manually if no longer needed.${NC}"
diff --git a/update.sh b/update.sh
index 0d147e9e..abb8e412 100755
--- a/update.sh
+++ b/update.sh
@@ -1,53 +1,196 @@
 #!/bin/bash
 
-print_help () {
-  echo -e "./update.sh www_basedir"
-  echo -e "\tbase_dir: The place where the web application is in"
+# --- Colors -------------------------------------------------------------------
+NC='\033[0m'
+Red='\033[1;31m'
+Yellow='\033[0;33m'
+Green='\033[0;32m'
+
+# --- Help ---------------------------------------------------------------------
+print_help() {
+  echo -e "sudo ./update.sh www_basedir"
+  echo -e "\twww_basedir: The directory where the web application is (e.g. /var/www)"
 }
 
-# Ensure to be root
+# --- Root check ---------------------------------------------------------------
 if [ "$EUID" -ne 0 ]; then
-  echo "Please run as root"
-  exit
+  echo -e "${Red}Please run as root:${NC}"
+  echo -e "  sudo ./update.sh /var/www"
+  exit 1
 fi
 
-# Ensure there are enought arguments
+# --- Args check ---------------------------------------------------------------
 if [ "$#" -ne 1 ]; then
   print_help
-  exit
+  exit 1
 fi
 
 www="$1/openvpn-admin"
 
 if [ ! -d "$www" ]; then
+  echo -e "${Red}Directory not found: $www${NC}"
   print_help
-  exit
+  exit 1
 fi
 
-base_path=$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )
+# --- Validate config.php exists (needed for user/group and DB credentials) ----
+if [ ! -f "$www/include/config.php" ]; then
+  echo -e "${Red}config.php not found at $www/include/config.php${NC}"
+  echo -e "${Red}Cannot determine file ownership or database credentials. Aborting.${NC}"
+  exit 1
+fi
+
+base_path=$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)
+
+# Use stat instead of ls -l for reliable user/group detection
+user=$(stat -c '%U' "$www/include/config.php")
+group=$(stat -c '%G' "$www/include/config.php")
+
+echo -e "${Green}Updating OpenVPN-Admin...${NC}"
+echo -e "  Install path : ${Yellow}$www${NC}"
+echo -e "  File owner   : ${Yellow}$user:$group${NC}"
+echo ""
 
-user=$(ls -l "$www/include/config.php" | awk '{ print $3 }')
-group=$(ls -l "$www/include/config.php" | awk '{ print $4 }')
+# --- Backup current installation ----------------------------------------------
+BACKUP="/root/openvpn-admin-backup-$(date +%Y%m%d-%H%M%S).tar.gz"
+echo -e "${Green}Creating backup at $BACKUP...${NC}"
+tar -czf "$BACKUP" -C "$1" openvpn-admin 2>/dev/null || true
+chmod 600 "$BACKUP"
 
+# --- Update web application files ---------------------------------------------
+echo -e "${Green}Updating web application files...${NC}"
 
-rm -rf "${www:?}/"{index.php,bower.json,.bowerrc,js,include/html,include/connect.php,include/functions.php,include/grids.php,css,vendor}
+rm -rf "${www:?}/"{index.php,js,css,include/html,include/connect.php,include/functions.php,include/grids.php,include/mailer.php,include/notify.php}
 
-cp -r "$base_path/"{index.php,bower.json,.bowerrc,js,css} "$www"
-cp -r "$base_path/include/"{html,connect.php,functions.php,grids.php} "$www/include"
+cp -r "$base_path/"{index.php,js,css} "$www/"
+cp -r "$base_path/include/"{html,connect.php,functions.php,grids.php,mailer.php,notify.php} "$www/include/"
 
-cd "$www" || exit
+# Copy SQL migration files (used by migration.php and first-time web installer)
+if [ -d "$base_path/sql" ]; then
+  cp -r "$base_path/sql" "$www/"
+fi
 
-bower --allow-root install
 chown -R "$user:$group" "$www"
 
-rm -f "/etc/openvpn/scripts/"{connect.sh,disconnect.sh,login.sh,functions.sh}
-cp "$base_path/installation/scripts/"{connect.sh,disconnect.sh,login.sh,functions.sh} "/etc/openvpn/scripts"
-chmod +x "/etc/openvpn/scripts/"{connect.sh,disconnect.sh,login.sh,functions.sh}
+# --- Add sudoers entry for EasyRSA if missing (enables web UI cert mgmt) ------
+if [ ! -f /etc/sudoers.d/openvpn-admin ]; then
+  echo -e "${Green}Adding sudoers entry for EasyRSA...${NC}"
+  echo "$user ALL=(ALL) NOPASSWD: /etc/openvpn/easy-rsa/easyrsa" > /etc/sudoers.d/openvpn-admin
+  chmod 440 /etc/sudoers.d/openvpn-admin
+fi
+
+# --- Create /var/log/openvpn/ if missing (needed for live dashboard) ----------
+if [ ! -d /var/log/openvpn ]; then
+  echo -e "${Green}Creating OpenVPN log directory...${NC}"
+  mkdir -p /var/log/openvpn
+  chmod 755 /var/log/openvpn
+  touch /var/log/openvpn/openvpn-status.log
+  chmod 644 /var/log/openvpn/openvpn-status.log
+fi
+
+# --- Patch server.conf for OpenVPN 2.5+ if needed ----------------------------
+SERVER_CONF="/etc/openvpn/server.conf"
+SERVER_CONF_CHANGED=false
+
+if [ -f "$SERVER_CONF" ] && command -v openvpn &>/dev/null; then
+  OPENVPN_VER=$(openvpn --version 2>&1 | head -1 | grep -oE '[0-9]+\.[0-9]+' | head -1)
+  OPENVPN_MAJOR=$(echo "$OPENVPN_VER" | cut -d. -f1)
+  OPENVPN_MINOR=$(echo "$OPENVPN_VER" | cut -d. -f2)
+
+  if [ "${OPENVPN_MAJOR:-2}" -gt 2 ] || \
+     { [ "${OPENVPN_MAJOR:-2}" -eq 2 ] && [ "${OPENVPN_MINOR:-4}" -ge 5 ]; }; then
+
+    # Replace deprecated comp-lzo with compress lz4-v2
+    if grep -q '^comp-lzo' "$SERVER_CONF"; then
+      echo -e "${Green}Patching server.conf: comp-lzo -> compress lz4-v2${NC}"
+      sed -i 's/^comp-lzo$/compress lz4-v2/' "$SERVER_CONF"
+      SERVER_CONF_CHANGED=true
+    fi
+
+    # Keep client configs in sync with server compression
+    while IFS= read -r -d '' file; do
+      if grep -qE '^(comp-lzo|compress lzo)$' "$file"; then
+        echo -e "${Green}Patching client config: $file -> compress lz4-v2${NC}"
+        sed -i 's/^comp-lzo$/compress lz4-v2/' "$file"
+        sed -i 's/^compress lzo$/compress lz4-v2/' "$file"
+      fi
+    done < <(find "$www/client-conf" -name "client.ovpn" -print0 2>/dev/null)
+
+    # Add data-ciphers directive if only old cipher line is present
+    if grep -q '^cipher AES-256-CBC' "$SERVER_CONF" && ! grep -q '^data-ciphers' "$SERVER_CONF"; then
+      echo -e "${Green}Patching server.conf: adding data-ciphers for OpenVPN 2.5+${NC}"
+      sed -i 's/^cipher AES-256-CBC$/data-ciphers AES-256-GCM:AES-128-GCM:AES-256-CBC\ndata-ciphers-fallback AES-256-CBC/' "$SERVER_CONF"
+      SERVER_CONF_CHANGED=true
+    fi
+  fi
+
+  # Update status log to absolute path so www-data can read it (for dashboard)
+  if grep -qE '^status openvpn-status\.log' "$SERVER_CONF"; then
+    echo -e "${Green}Patching server.conf: updating status log path...${NC}"
+    mkdir -p /var/log/openvpn
+    chmod 755 /var/log/openvpn
+    sed -i 's|^status openvpn-status\.log.*|status /var/log/openvpn/openvpn-status.log 10|' "$SERVER_CONF"
+    touch /var/log/openvpn/openvpn-status.log
+    chmod 644 /var/log/openvpn/openvpn-status.log
+    SERVER_CONF_CHANGED=true
+  fi
+
+  # Update old log-append path if still pointing to /var/log/openvpn.log
+  if grep -q '^log-append /var/log/openvpn\.log' "$SERVER_CONF"; then
+    sed -i 's|^log-append /var/log/openvpn\.log|log-append /var/log/openvpn/openvpn.log|' "$SERVER_CONF"
+    SERVER_CONF_CHANGED=true
+  fi
+fi
+
+# --- Update OpenVPN connect/disconnect scripts --------------------------------
+if [ -d /etc/openvpn/scripts ]; then
+  echo -e "${Green}Updating OpenVPN scripts...${NC}"
+  rm -f /etc/openvpn/scripts/{connect.sh,disconnect.sh,login.sh,functions.sh}
+  cp "$base_path/installation/scripts/"{connect.sh,disconnect.sh,login.sh,functions.sh} /etc/openvpn/scripts/
+  chmod +x /etc/openvpn/scripts/*.sh
+else
+  echo -e "${Yellow}Warning: /etc/openvpn/scripts/ not found. Skipping script update.${NC}"
+fi
+
+# --- Database migrations ------------------------------------------------------
+if command -v php &>/dev/null; then
+  echo -e "${Green}Running database migrations...${NC}"
+  php "$base_path/migration.php" "$www" && echo -e "${Green}Database migrations done.${NC}"
+else
+  echo -e "${Yellow}Warning: php not found in PATH. Database migrations were skipped.${NC}"
+  echo -e "${Yellow}Run manually: php $base_path/migration.php $www${NC}"
+fi
 
-echo "Processing database migration..."
+# --- Ensure Apache is using the same PHP version as the CLI ------------------
+cli_php_ver=$(php -r 'echo PHP_MAJOR_VERSION.".".PHP_MINOR_VERSION;' 2>/dev/null)
+if [ -n "$cli_php_ver" ]; then
+  loaded_php_mod=$(apache2ctl -M 2>/dev/null | grep -oE 'php[0-9]+_[0-9]+' | head -1 | tr '_' '.')
+  if [ -n "$loaded_php_mod" ] && [ "$loaded_php_mod" != "php$cli_php_ver" ]; then
+    echo -e "${Yellow}Apache is using $loaded_php_mod but CLI PHP is $cli_php_ver. Switching...${NC}"
+    a2dismod "$loaded_php_mod" 2>/dev/null || true
+    a2enmod  "php$cli_php_ver" 2>/dev/null || true
+  elif [ -z "$loaded_php_mod" ]; then
+    # No PHP module loaded at all — enable the CLI version
+    a2enmod "php$cli_php_ver" 2>/dev/null || true
+  fi
+fi
 
-php "$base_path/migration.php" "$www"
+# --- Reload Apache to pick up updated PHP files -------------------------------
+echo -e "${Green}Reloading Apache...${NC}"
+systemctl restart apache2 2>/dev/null || true
 
-echo "Database migrations done."
+# --- Restart OpenVPN if server.conf was changed -------------------------------
+if [ "$SERVER_CONF_CHANGED" = true ]; then
+  echo -e "${Green}Restarting OpenVPN (server.conf was patched)...${NC}"
+  systemctl restart openvpn@server 2>/dev/null || \
+    echo -e "${Yellow}Warning: could not restart openvpn@server. Restart it manually.${NC}"
+fi
 
-echo "OpenVPN-admin upgraded."
+# --- Summary ------------------------------------------------------------------
+echo ""
+echo -e "${Green}OpenVPN-Admin updated successfully.${NC}"
+echo -e "  Backup : ${Yellow}$BACKUP${NC}"
+[ "$SERVER_CONF_CHANGED" = true ] && \
+  echo -e "  ${Yellow}server.conf was patched. OpenVPN restarted.${NC}"
+echo ""
+echo -e "  Access the admin panel to verify: ${Yellow}http://$(hostname -I | awk '{print $1}')/index.php?admin${NC}"