System & UI/UX

NginxProxyGuard provides a modern web interface designed with user experience as the top priority.

Dashboard

The dashboard is a central hub for viewing the overall system status at a glance.

Real-time Statistics Cards

Statistics cards at the top show key metrics in real-time:

Hourly Traffic Chart

Visualizes request patterns over 24 hours:

• Requests per hour trend
• Normal vs blocked requests comparison
• Peak time identification

World Map Visualization

Displays traffic origins on a map based on GeoIP data:

• Request distribution by country
• Blocked countries highlighted
• Interactive map (click for details)

Docker Container Status

Monitor the status of system containers:

• nginx, API, DB container status
• CPU/Memory usage
• Uptime information

Security Events Summary

Shows a summary of recent security events:

• Recent WAF block events
• Bot filter activity
• IP block status

Internationalization (i18n)

NginxProxyGuard provides full multilingual support.

Supported Languages

Switching Languages

1. Auto-detection: Automatic selection based on browser language settings
2. Manual switch: Use language selector in top navigation
3. User settings: Set default language in account settings

Translation Coverage

All UI elements are translated:

• Navigation menus
• Buttons and labels
• Form fields and placeholders
• Error messages and notifications
• Help text

Theme and Design

Dark Mode

Dark mode reduces eye strain:

• System settings auto-detection
• Manual toggle available
• Colors optimized for all components

Light Mode

Light mode optimized for bright environments:

• Clear contrast
• High readability design

Theme Switching

Instantly switch themes using the theme toggle button in the top navigation bar.

Responsive Design

Perfectly adapts to all screen sizes.

Desktop (1280px+)

• Wide sidebar navigation
• Multi-column layout
• Extended table views

Tablet (768px - 1279px)

• Collapsed sidebar (icons only)
• Adaptive grid
• Touch-friendly buttons

Mobile (~ 767px)

• Hamburger menu navigation
• Single-column layout
• Swipeable cards

Navigation Structure

Main Navigation

Top tabs main menu:

1. Dashboard
2. Proxy Hosts
3. Redirects
4. WAF / Blocking
5. Access Control
6. Certificates
7. Logs
8. Settings

Sub Navigation

Each main menu has sub-tabs:

WAF / Blocking:

• WAF Policy
• IP Bans
• URI Blocks
• Exploit Rules
• Fail2ban
• WAF Tester

Certificates:

• Certificates
• Issue/Renewal History
• DNS Providers

Logs:

• Access Logs
• WAF Events
• Bot Filter
• Exploit Blocks
• System Logs
• Admin Audit
• Raw Files

Settings:

• Global Settings
• CAPTCHA
• GeoIP
• Bot Filter
• WAF Auto-Ban
• SSL / ACME
• Maintenance
• Backups
• System Logs

User Account

Login Screen

• Username/password authentication
• 2FA (TOTP) support
• Login attempt limiting

Account Settings

• Change password
• Change username
• Enable/disable 2FA
• Set default language
• Font settings

Two-Factor Authentication (2FA)

TOTP-based two-factor authentication:

1. Setup: Scan QR code or enter secret key
2. Activate: Confirm with 6-digit code
3. Login: Password + OTP code

Supported apps:

• Google Authenticator
• Authy
• Microsoft Authenticator
• 1Password
• Other TOTP-compatible apps

API Token Management

API tokens for external system integration:

Token Creation

• Name the token
• Set permission scope (read/write)
• Set expiration date (optional)

Token Management

• Active/inactive token list
• Usage statistics
• Token revocation

Permission Scopes

Initial Setup Wizard

Guided setup process on first installation:

1. Create Admin Account

   • Set username
   • Set password

2. Basic Settings

   • Select language
   • Select theme

3. Security Settings (Optional)

   • Enable 2FA
   • Configure GeoIP

Notification System

Toast Notifications

Immediate feedback on actions:

• Success (green)
• Warning (yellow)
• Error (red)
• Info (blue)

Inline Notifications

Form validation and status messages:

• Per-field error display
• Save status indicator
• Sync status indicator

Keyboard Shortcuts

Shortcuts for efficient work:

Accessibility

WCAG 2.1 guideline compliance:

• Keyboard navigation support
• Screen reader compatible
• Sufficient color contrast
• Focus indicators