Merge pull request #143 from RostislavDugin/develop

FEATURE (parsing): Add parsing connection string on DB creation

.github/workflows/ci-release.yml

@@ -82,6 +82,11 @@ jobs:
           cd frontend
           npm run lint
 
+      - name: Run frontend tests
+        run: |
+          cd frontend
+          npm run test
+
   test-backend:
     runs-on: ubuntu-latest
     needs: [lint-backend]
@@ -144,6 +149,12 @@ jobs:
           # testing Telegram
           TEST_TELEGRAM_BOT_TOKEN=${{ secrets.TEST_TELEGRAM_BOT_TOKEN }}
           TEST_TELEGRAM_CHAT_ID=${{ secrets.TEST_TELEGRAM_CHAT_ID }}
+          # supabase
+          TEST_SUPABASE_HOST=${{ secrets.TEST_SUPABASE_HOST }}
+          TEST_SUPABASE_PORT=${{ secrets.TEST_SUPABASE_PORT }}
+          TEST_SUPABASE_USERNAME=${{ secrets.TEST_SUPABASE_USERNAME }}
+          TEST_SUPABASE_PASSWORD=${{ secrets.TEST_SUPABASE_PASSWORD }}
+          TEST_SUPABASE_DATABASE=${{ secrets.TEST_SUPABASE_DATABASE }}
           EOF
 
       - name: Start test containers
@@ -465,3 +476,37 @@ jobs:
           body: ${{ steps.changelog.outputs.changelog }}
           draft: false
           prerelease: false
+
+  publish-helm-chart:
+    runs-on: ubuntu-latest
+    needs: [determine-version, build-and-push]
+    if: ${{ needs.determine-version.outputs.should_release == 'true' }}
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Set up Helm
+        uses: azure/setup-helm@v4
+        with:
+          version: v3.14.0
+
+      - name: Log in to GHCR
+        run: echo "${{ secrets.GITHUB_TOKEN }}" | helm registry login ghcr.io -u ${{ github.actor }} --password-stdin
+
+      - name: Update Chart.yaml with release version
+        run: |
+          VERSION="${{ needs.determine-version.outputs.new_version }}"
+          sed -i "s/^version: .*/version: ${VERSION}/" deploy/helm/Chart.yaml
+          sed -i "s/^appVersion: .*/appVersion: \"v${VERSION}\"/" deploy/helm/Chart.yaml
+          cat deploy/helm/Chart.yaml
+
+      - name: Package Helm chart
+        run: helm package deploy/helm --destination .
+
+      - name: Push Helm chart to GHCR
+        run: |
+          VERSION="${{ needs.determine-version.outputs.new_version }}"
+          helm push postgresus-${VERSION}.tgz oci://ghcr.io/rostislavdugin/charts

.gitignore

@@ -5,4 +5,7 @@ pgdata/
 docker-compose.yml
 node_modules/
 .idea
-/articles
+/articles
+
+.DS_Store
+/scripts

README.md

@@ -25,6 +25,8 @@
     <a href="https://postgresus.com" target="_blank"><strong>🌐 Postgresus website</strong></a>
   </p>
   
+  <img src="assets/dashboard-dark.svg" alt="Postgresus Dark Dashboard" width="800" style="margin-bottom: 10px;"/>
+
   <img src="assets/dashboard.svg" alt="Postgresus Dashboard" width="800"/>
   
  
@@ -72,6 +74,21 @@
 - **Audit logs**: Track all system activities and changes made by users
 - **User roles**: Assign viewer, member, admin or owner roles within workspaces
 
+### 🎨 **UX-Friendly**
+
+- **Designer-polished UI**: Clean, intuitive interface crafted with attention to detail
+- **Dark & light themes**: Choose the look that suits your workflow
+- **Mobile adaptive**: Check your backups from anywhere on any device
+
+### ☁️ **Works with Self-Hosted & Cloud Databases**
+
+Postgresus works seamlessly with both self-hosted PostgreSQL and cloud-managed databases:
+
+- **Cloud support**: AWS RDS, Google Cloud SQL, Azure Database for PostgreSQL
+- **Self-hosted**: Any PostgreSQL instance you manage yourself
+- **Why no PITR?**: Cloud providers already offer native PITR, and external PITR backups cannot be restored to managed cloud databases — making them impractical for cloud-hosted PostgreSQL
+- **Practical granularity**: Hourly and daily backups are sufficient for 99% of projects without the operational complexity of WAL archiving
+
 ### 🐳 **Self-Hosted & Secure**
 
 - **Docker-based**: Easy deployment and management
@@ -80,7 +97,7 @@
 
 ### 📦 Installation <a href="https://postgresus.com/installation">(docs)</a>
 
-You have three ways to install Postgresus:
+You have several ways to install Postgresus:
 
 - Script (recommended)
 - Simple Docker run
@@ -98,7 +115,7 @@ You have three ways to install Postgresus: automated script (recommended), simpl
 
 The installation script will:
 
-- ✅ Install Docker with Docker Compose(if not already installed)
+- ✅ Install Docker with Docker Compose (if not already installed)
 - ✅ Set up Postgresus
 - ✅ Configure automatic startup on system reboot
 
@@ -149,6 +166,46 @@ Then run:
 docker compose up -d
 ```
 
+### Option 4: Kubernetes with Helm
+
+For Kubernetes deployments, install directly from the OCI registry.
+
+**With ClusterIP + port-forward (development/testing):**
+
+```bash
+helm install postgresus oci://ghcr.io/rostislavdugin/charts/postgresus \
+  -n postgresus --create-namespace
+```
+
+```bash
+kubectl port-forward svc/postgresus-service 4005:4005 -n postgresus
+# Access at http://localhost:4005
+```
+
+**With LoadBalancer (cloud environments):**
+
+```bash
+helm install postgresus oci://ghcr.io/rostislavdugin/charts/postgresus \
+  -n postgresus --create-namespace \
+  --set service.type=LoadBalancer
+```
+
+```bash
+kubectl get svc postgresus-service -n postgresus
+# Access at http://<EXTERNAL-IP>:4005
+```
+
+**With Ingress (domain-based access):**
+
+```bash
+helm install postgresus oci://ghcr.io/rostislavdugin/charts/postgresus \
+  -n postgresus --create-namespace \
+  --set ingress.enabled=true \
+  --set ingress.hosts[0].host=backup.example.com
+```
+
+For more options (NodePort, TLS, HTTPRoute for Gateway API), see the [Helm chart README](deploy/helm/README.md).
+
 ---
 
 ## 🚀 Usage
@@ -181,4 +238,4 @@ This project is licensed under the Apache 2.0 License - see the [LICENSE](LICENS
 
 ## 🤝 Contributing
 
-Contributions are welcome! Read <a href="https://postgresus.com/contributing">contributing guide</a> for more details, prioerities and rules are specified there. If you want to contribute, but don't know what and how - message me on Telegram [@rostislav_dugin](https://t.me/rostislav_dugin)
+Contributions are welcome! Read <a href="https://postgresus.com/contribute">contributing guide</a> for more details, priorities and rules are specified there. If you want to contribute, but don't know what and how - message me on Telegram [@rostislav_dugin](https://t.me/rostislav_dugin)

backend/.env.development.example

@@ -33,4 +33,10 @@ TEST_NAS_PORT=7006
 TEST_TELEGRAM_BOT_TOKEN=
 TEST_TELEGRAM_CHAT_ID=
 # testing Azure Blob Storage
-TEST_AZURITE_BLOB_PORT=10000
+TEST_AZURITE_BLOB_PORT=10000
+# supabase
+TEST_SUPABASE_HOST=
+TEST_SUPABASE_PORT=
+TEST_SUPABASE_USERNAME=
+TEST_SUPABASE_PASSWORD=
+TEST_SUPABASE_DATABASE=

backend/internal/config/config.go

@@ -58,6 +58,13 @@ type EnvVariables struct {
 	// testing Telegram
 	TestTelegramBotToken string `env:"TEST_TELEGRAM_BOT_TOKEN"`
 	TestTelegramChatID   string `env:"TEST_TELEGRAM_CHAT_ID"`
+
+	// testing Supabase
+	TestSupabaseHost     string `env:"TEST_SUPABASE_HOST"`
+	TestSupabasePort     string `env:"TEST_SUPABASE_PORT"`
+	TestSupabaseUsername string `env:"TEST_SUPABASE_USERNAME"`
+	TestSupabasePassword string `env:"TEST_SUPABASE_PASSWORD"`
+	TestSupabaseDatabase string `env:"TEST_SUPABASE_DATABASE"`
 }
 
 var (

backend/internal/features/backups/backups/backup_context_manager.go

@@ -2,20 +2,21 @@ package backups
 
 import (
 	"context"
-	"errors"
 	"sync"
 
 	"github.com/google/uuid"
 )
 
 type BackupContextManager struct {
-	mu          sync.RWMutex
-	cancelFuncs map[uuid.UUID]context.CancelFunc
+	mu               sync.RWMutex
+	cancelFuncs      map[uuid.UUID]context.CancelFunc
+	cancelledBackups map[uuid.UUID]bool
 }
 
 func NewBackupContextManager() *BackupContextManager {
 	return &BackupContextManager{
-		cancelFuncs: make(map[uuid.UUID]context.CancelFunc),
+		cancelFuncs:      make(map[uuid.UUID]context.CancelFunc),
+		cancelledBackups: make(map[uuid.UUID]bool),
 	}
 }
 
@@ -23,25 +24,37 @@ func (m *BackupContextManager) RegisterBackup(backupID uuid.UUID, cancelFunc con
 	m.mu.Lock()
 	defer m.mu.Unlock()
 	m.cancelFuncs[backupID] = cancelFunc
+	delete(m.cancelledBackups, backupID)
 }
 
 func (m *BackupContextManager) CancelBackup(backupID uuid.UUID) error {
 	m.mu.Lock()
 	defer m.mu.Unlock()
 
-	cancelFunc, exists := m.cancelFuncs[backupID]
-	if !exists {
-		return errors.New("backup is not in progress or already completed")
+	if m.cancelledBackups[backupID] {
+		return nil
 	}
 
-	cancelFunc()
-	delete(m.cancelFuncs, backupID)
+	cancelFunc, exists := m.cancelFuncs[backupID]
+	if exists {
+		cancelFunc()
+		delete(m.cancelFuncs, backupID)
+	}
+
+	m.cancelledBackups[backupID] = true
 
 	return nil
 }
 
+func (m *BackupContextManager) IsCancelled(backupID uuid.UUID) bool {
+	m.mu.RLock()
+	defer m.mu.RUnlock()
+	return m.cancelledBackups[backupID]
+}
+
 func (m *BackupContextManager) UnregisterBackup(backupID uuid.UUID) {
 	m.mu.Lock()
 	defer m.mu.Unlock()
 	delete(m.cancelFuncs, backupID)
+	delete(m.cancelledBackups, backupID)
 }

backend/internal/features/backups/backups/controller_test.go

@@ -1,6 +1,7 @@
 package backups
 
 import (
+	"context"
 	"encoding/json"
 	"fmt"
 	"io"
@@ -701,7 +702,7 @@ func createTestBackup(
 	dummyContent := []byte("dummy backup content for testing")
 	reader := strings.NewReader(string(dummyContent))
 	logger := slog.New(slog.NewTextHandler(io.Discard, nil))
-	if err := storages[0].SaveFile(encryption.GetFieldEncryptor(), logger, backup.ID, reader); err != nil {
+	if err := storages[0].SaveFile(context.Background(), encryption.GetFieldEncryptor(), logger, backup.ID, reader); err != nil {
 		panic(fmt.Sprintf("Failed to create test backup file: %v", err))
 	}
 

backend/internal/features/backups/backups/encryption/utils.go

@@ -16,7 +16,7 @@ const (
 	NonceLen         = 12
 	ReservedLen      = 12
 	HeaderLen        = MagicBytesLen + SaltLen + NonceLen + ReservedLen
-	ChunkSize        = 32 * 1024
+	ChunkSize        = 1 * 1024 * 1024
 	PBKDF2Iterations = 100000
 )
 

backend/internal/features/backups/backups/service.go

@@ -275,7 +275,12 @@ func (s *BackupService) MakeBackup(databaseID uuid.UUID, isLastTry bool) {
 		errMsg := err.Error()
 
 		// Check if backup was cancelled (not due to shutdown)
-		if strings.Contains(errMsg, "backup cancelled") && !strings.Contains(errMsg, "shutdown") {
+		isCancelled := strings.Contains(errMsg, "backup cancelled") ||
+			strings.Contains(errMsg, "context canceled") ||
+			errors.Is(err, context.Canceled)
+		isShutdown := strings.Contains(errMsg, "shutdown")
+
+		if isCancelled && !isShutdown {
 			backup.Status = BackupStatusCanceled
 			backup.BackupDurationMs = time.Since(start).Milliseconds()
 			backup.BackupSizeMb = 0

backend/internal/features/backups/backups/usecases/postgresql/create_backup_uc.go

@@ -30,7 +30,7 @@ import (
 const (
 	backupTimeout            = 23 * time.Hour
 	shutdownCheckInterval    = 1 * time.Second
-	copyBufferSize           = 32 * 1024
+	copyBufferSize           = 8 * 1024 * 1024
 	progressReportIntervalMB = 1.0
 	pgConnectTimeout         = 30
 	compressionLevel         = 5
@@ -45,6 +45,11 @@ type CreatePostgresqlBackupUsecase struct {
 	fieldEncryptor   encryption.FieldEncryptor
 }
 
+type writeResult struct {
+	bytesWritten int
+	writeErr     error
+}
+
 // Execute creates a backup of the database
 func (uc *CreatePostgresqlBackupUsecase) Execute(
 	ctx context.Context,
@@ -172,7 +177,7 @@ func (uc *CreatePostgresqlBackupUsecase) streamToStorage(
 	// Start streaming into storage in its own goroutine
 	saveErrCh := make(chan error, 1)
 	go func() {
-		saveErr := storage.SaveFile(uc.fieldEncryptor, uc.logger, backupID, storageReader)
+		saveErr := storage.SaveFile(ctx, uc.fieldEncryptor, uc.logger, backupID, storageReader)
 		saveErrCh <- saveErr
 	}()
 
@@ -195,12 +200,10 @@ func (uc *CreatePostgresqlBackupUsecase) streamToStorage(
 		copyResultCh <- err
 	}()
 
-	// Wait for the copy to finish first, then the dump process
 	copyErr := <-copyResultCh
 	bytesWritten := <-bytesWrittenCh
 	waitErr := cmd.Wait()
 
-	// Check for shutdown or cancellation before finalizing
 	select {
 	case <-ctx.Done():
 		uc.cleanupOnCancellation(encryptionWriter, storageWriter, saveErrCh)
@@ -213,7 +216,6 @@ func (uc *CreatePostgresqlBackupUsecase) streamToStorage(
 		return nil, err
 	}
 
-	// Wait until storage ends reading
 	saveErr := <-saveErrCh
 	stderrOutput := <-stderrCh
 
@@ -267,7 +269,23 @@ func (uc *CreatePostgresqlBackupUsecase) copyWithShutdownCheck(
 
 		bytesRead, readErr := src.Read(buf)
 		if bytesRead > 0 {
-			bytesWritten, writeErr := dst.Write(buf[0:bytesRead])
+			writeResultCh := make(chan writeResult, 1)
+			go func() {
+				bytesWritten, writeErr := dst.Write(buf[0:bytesRead])
+				writeResultCh <- writeResult{bytesWritten, writeErr}
+			}()
+
+			var bytesWritten int
+			var writeErr error
+
+			select {
+			case <-ctx.Done():
+				return totalBytesWritten, fmt.Errorf("copy cancelled during write: %w", ctx.Err())
+			case result := <-writeResultCh:
+				bytesWritten = result.bytesWritten
+				writeErr = result.writeErr
+			}
+
 			if bytesWritten < 0 || bytesRead < bytesWritten {
 				bytesWritten = 0
 				if writeErr == nil {
@@ -316,6 +334,10 @@ func (uc *CreatePostgresqlBackupUsecase) buildPgDumpArgs(pg *pgtypes.PostgresqlD
 		"--verbose",
 	}
 
+	for _, schema := range pg.IncludeSchemas {
+		args = append(args, "-n", schema)
+	}
+
 	compressionArgs := uc.getCompressionArgs(pg.Version)
 	return append(args, compressionArgs...)
 }
@@ -354,6 +376,9 @@ func (uc *CreatePostgresqlBackupUsecase) createBackupContext(
 			select {
 			case <-ctx.Done():
 				return
+			case <-parentCtx.Done():
+				cancel()
+				return
 			case <-ticker.C:
 				if config.IsShouldShutdown() {
 					cancel()
@@ -417,7 +442,6 @@ func (uc *CreatePostgresqlBackupUsecase) setupPgEnvironment(
 		"PGCONNECT_TIMEOUT="+strconv.Itoa(pgConnectTimeout),
 		"LC_ALL=C.UTF-8",
 		"LANG=C.UTF-8",
-		"PGOPTIONS=--client-encoding=UTF8",
 	)
 
 	if shouldRequireSSL {
@@ -611,7 +635,6 @@ func (uc *CreatePostgresqlBackupUsecase) handleExitCode1NoStderr(
 			"PGCONNECT_TIMEOUT=" + strconv.Itoa(pgConnectTimeout),
 			"LC_ALL=C.UTF-8",
 			"LANG=C.UTF-8",
-			"PGOPTIONS=--client-encoding=UTF8",
 		},
 	)
 
@@ -719,11 +742,15 @@ func (uc *CreatePostgresqlBackupUsecase) createTempPgpassFile(
 		return "", nil
 	}
 
+	escapedHost := tools.EscapePgpassField(pgConfig.Host)
+	escapedUsername := tools.EscapePgpassField(pgConfig.Username)
+	escapedPassword := tools.EscapePgpassField(password)
+
 	pgpassContent := fmt.Sprintf("%s:%d:*:%s:%s",
-		pgConfig.Host,
+		escapedHost,
 		pgConfig.Port,
-		pgConfig.Username,
-		password,
+		escapedUsername,
+		escapedPassword,
 	)
 
 	tempDir, err := os.MkdirTemp("", "pgpass")

backend/internal/features/databases/databases/postgresql/model.go

@@ -13,6 +13,7 @@ import (
 
 	"github.com/google/uuid"
 	"github.com/jackc/pgx/v5"
+	"gorm.io/gorm"
 )
 
 type PostgresqlDatabase struct {
@@ -29,17 +30,37 @@ type PostgresqlDatabase struct {
 	Password string  `json:"password" gorm:"type:text;not null"`
 	Database *string `json:"database" gorm:"type:text"`
 	IsHttps  bool    `json:"isHttps"  gorm:"type:boolean;default:false"`
+
+	// backup settings
+	IncludeSchemas       []string `json:"includeSchemas" gorm:"-"`
+	IncludeSchemasString string   `json:"-"              gorm:"column:include_schemas;type:text;not null;default:''"`
 }
 
 func (p *PostgresqlDatabase) TableName() string {
 	return "postgresql_databases"
 }
 
-func (p *PostgresqlDatabase) Validate() error {
-	if p.Version == "" {
-		return errors.New("version is required")
+func (p *PostgresqlDatabase) BeforeSave(_ *gorm.DB) error {
+	if len(p.IncludeSchemas) > 0 {
+		p.IncludeSchemasString = strings.Join(p.IncludeSchemas, ",")
+	} else {
+		p.IncludeSchemasString = ""
 	}
 
+	return nil
+}
+
+func (p *PostgresqlDatabase) AfterFind(_ *gorm.DB) error {
+	if p.IncludeSchemasString != "" {
+		p.IncludeSchemas = strings.Split(p.IncludeSchemasString, ",")
+	} else {
+		p.IncludeSchemas = []string{}
+	}
+
+	return nil
+}
+
+func (p *PostgresqlDatabase) Validate() error {
 	if p.Host == "" {
 		return errors.New("host is required")
 	}
@@ -85,6 +106,7 @@ func (p *PostgresqlDatabase) Update(incoming *PostgresqlDatabase) {
 	p.Username = incoming.Username
 	p.Database = incoming.Database
 	p.IsHttps = incoming.IsHttps
+	p.IncludeSchemas = incoming.IncludeSchemas
 
 	if incoming.Password != "" {
 		p.Password = incoming.Password
@@ -106,6 +128,50 @@ func (p *PostgresqlDatabase) EncryptSensitiveFields(
 	return nil
 }
 
+// PopulateVersionIfEmpty detects and sets the PostgreSQL version if not already set.
+// This should be called before encrypting sensitive fields.
+func (p *PostgresqlDatabase) PopulateVersionIfEmpty(
+	logger *slog.Logger,
+	encryptor encryption.FieldEncryptor,
+	databaseID uuid.UUID,
+) error {
+	if p.Version != "" {
+		return nil
+	}
+
+	if p.Database == nil || *p.Database == "" {
+		return nil
+	}
+
+	ctx, cancel := context.WithTimeout(context.Background(), 15*time.Second)
+	defer cancel()
+
+	password, err := decryptPasswordIfNeeded(p.Password, encryptor, databaseID)
+	if err != nil {
+		return fmt.Errorf("failed to decrypt password: %w", err)
+	}
+
+	connStr := buildConnectionStringForDB(p, *p.Database, password)
+
+	conn, err := pgx.Connect(ctx, connStr)
+	if err != nil {
+		return fmt.Errorf("failed to connect to database: %w", err)
+	}
+	defer func() {
+		if closeErr := conn.Close(ctx); closeErr != nil {
+			logger.Error("Failed to close connection", "error", closeErr)
+		}
+	}()
+
+	detectedVersion, err := detectDatabaseVersion(ctx, conn)
+	if err != nil {
+		return err
+	}
+
+	p.Version = detectedVersion
+	return nil
+}
+
 // IsUserReadOnly checks if the database user has read-only privileges.
 //
 // This method performs a comprehensive security check by examining:
@@ -286,8 +352,20 @@ func (p *PostgresqlDatabase) CreateReadOnlyUser(
 
 	// Retry logic for username collision
 	maxRetries := 3
-	for attempt := 0; attempt < maxRetries; attempt++ {
-		username := fmt.Sprintf("postgresus-%s", uuid.New().String()[:8])
+	for attempt := range maxRetries {
+		// Generate base username for PostgreSQL user creation
+		baseUsername := fmt.Sprintf("postgresus-%s", uuid.New().String()[:8])
+
+		// For Supabase session pooler, the username format for connection is "username.projectid"
+		// but the actual PostgreSQL user must be created with just the base name.
+		// The pooler will strip the ".projectid" suffix when authenticating.
+		connectionUsername := baseUsername
+		if isSupabaseConnection(p.Host, p.Username) {
+			if supabaseProjectID := extractSupabaseProjectID(p.Username); supabaseProjectID != "" {
+				connectionUsername = fmt.Sprintf("%s.%s", baseUsername, supabaseProjectID)
+			}
+		}
+
 		newPassword := uuid.New().String()
 
 		tx, err := conn.Begin(ctx)
@@ -305,9 +383,10 @@ func (p *PostgresqlDatabase) CreateReadOnlyUser(
 		}()
 
 		// Step 1: Create PostgreSQL user with LOGIN privilege
+		// Note: We use baseUsername for the actual PostgreSQL user name if Supabase is used
 		_, err = tx.Exec(
 			ctx,
-			fmt.Sprintf(`CREATE USER "%s" WITH PASSWORD '%s' LOGIN`, username, newPassword),
+			fmt.Sprintf(`CREATE USER "%s" WITH PASSWORD '%s' LOGIN`, baseUsername, newPassword),
 		)
 		if err != nil {
 			if err.Error() != "" && attempt < maxRetries-1 {
@@ -331,28 +410,28 @@ func (p *PostgresqlDatabase) CreateReadOnlyUser(
 		}
 
 		// Now revoke from the specific user as well (belt and suspenders)
-		_, err = tx.Exec(ctx, fmt.Sprintf(`REVOKE CREATE ON SCHEMA public FROM "%s"`, username))
+		_, err = tx.Exec(ctx, fmt.Sprintf(`REVOKE CREATE ON SCHEMA public FROM "%s"`, baseUsername))
 		if err != nil {
 			logger.Error(
 				"Failed to revoke CREATE on public schema from user",
 				"error",
 				err,
 				"username",
-				username,
+				baseUsername,
 			)
 		}
 
 		// Step 2: Grant database connection privilege and revoke TEMP
 		_, err = tx.Exec(
 			ctx,
-			fmt.Sprintf(`GRANT CONNECT ON DATABASE %s TO "%s"`, *p.Database, username),
+			fmt.Sprintf(`GRANT CONNECT ON DATABASE "%s" TO "%s"`, *p.Database, baseUsername),
 		)
 		if err != nil {
 			return "", "", fmt.Errorf("failed to grant connect privilege: %w", err)
 		}
 
 		// Revoke TEMP privilege from PUBLIC role (like CREATE on public schema, TEMP is granted to PUBLIC by default)
-		_, err = tx.Exec(ctx, fmt.Sprintf(`REVOKE TEMP ON DATABASE %s FROM PUBLIC`, *p.Database))
+		_, err = tx.Exec(ctx, fmt.Sprintf(`REVOKE TEMP ON DATABASE "%s" FROM PUBLIC`, *p.Database))
 		if err != nil {
 			logger.Warn("Failed to revoke TEMP from PUBLIC", "error", err)
 		}
@@ -360,10 +439,10 @@ func (p *PostgresqlDatabase) CreateReadOnlyUser(
 		// Also revoke from the specific user (belt and suspenders)
 		_, err = tx.Exec(
 			ctx,
-			fmt.Sprintf(`REVOKE TEMP ON DATABASE %s FROM "%s"`, *p.Database, username),
+			fmt.Sprintf(`REVOKE TEMP ON DATABASE "%s" FROM "%s"`, *p.Database, baseUsername),
 		)
 		if err != nil {
-			logger.Warn("Failed to revoke TEMP privilege", "error", err, "username", username)
+			logger.Warn("Failed to revoke TEMP privilege", "error", err, "username", baseUsername)
 		}
 
 		// Step 3: Discover all user-created schemas
@@ -396,7 +475,7 @@ func (p *PostgresqlDatabase) CreateReadOnlyUser(
 			// Revoke CREATE specifically (handles inheritance from PUBLIC role)
 			_, err = tx.Exec(
 				ctx,
-				fmt.Sprintf(`REVOKE CREATE ON SCHEMA "%s" FROM "%s"`, schema, username),
+				fmt.Sprintf(`REVOKE CREATE ON SCHEMA "%s" FROM "%s"`, schema, baseUsername),
 			)
 			if err != nil {
 				logger.Warn(
@@ -406,14 +485,14 @@ func (p *PostgresqlDatabase) CreateReadOnlyUser(
 					"schema",
 					schema,
 					"username",
-					username,
+					baseUsername,
 				)
 			}
 
 			// Grant only USAGE (not CREATE)
 			_, err = tx.Exec(
 				ctx,
-				fmt.Sprintf(`GRANT USAGE ON SCHEMA "%s" TO "%s"`, schema, username),
+				fmt.Sprintf(`GRANT USAGE ON SCHEMA "%s" TO "%s"`, schema, baseUsername),
 			)
 			if err != nil {
 				return "", "", fmt.Errorf("failed to grant usage on schema %s: %w", schema, err)
@@ -435,7 +514,7 @@ func (p *PostgresqlDatabase) CreateReadOnlyUser(
 					EXECUTE format('GRANT SELECT ON ALL SEQUENCES IN SCHEMA %%I TO "%s"', schema_rec.schema_name);
 				END LOOP;
 			END $$;
-		`, username, username)
+		`, baseUsername, baseUsername)
 
 		_, err = tx.Exec(ctx, grantSelectSQL)
 		if err != nil {
@@ -457,7 +536,7 @@ func (p *PostgresqlDatabase) CreateReadOnlyUser(
 					EXECUTE format('ALTER DEFAULT PRIVILEGES IN SCHEMA %%I GRANT SELECT ON SEQUENCES TO "%s"', schema_rec.schema_name);
 				END LOOP;
 			END $$;
-		`, username, username)
+		`, baseUsername, baseUsername)
 
 		_, err = tx.Exec(ctx, defaultPrivilegesSQL)
 		if err != nil {
@@ -466,7 +545,7 @@ func (p *PostgresqlDatabase) CreateReadOnlyUser(
 
 		// Step 7: Verify user creation before committing
 		var verifyUsername string
-		err = tx.QueryRow(ctx, fmt.Sprintf(`SELECT rolname FROM pg_roles WHERE rolname = '%s'`, username)).
+		err = tx.QueryRow(ctx, fmt.Sprintf(`SELECT rolname FROM pg_roles WHERE rolname = '%s'`, baseUsername)).
 			Scan(&verifyUsername)
 		if err != nil {
 			return "", "", fmt.Errorf("failed to verify user creation: %w", err)
@@ -477,8 +556,15 @@ func (p *PostgresqlDatabase) CreateReadOnlyUser(
 		}
 
 		success = true
-		logger.Info("Read-only user created successfully", "username", username)
-		return username, newPassword, nil
+		// Return connectionUsername (with project ID suffix for Supabase) for the caller to use when connecting
+		logger.Info(
+			"Read-only user created successfully",
+			"username",
+			baseUsername,
+			"connectionUsername",
+			connectionUsername,
+		)
+		return connectionUsername, newPassword, nil
 	}
 
 	return "", "", errors.New("failed to generate unique username after 3 attempts")
@@ -521,10 +607,12 @@ func testSingleDatabaseConnection(
 		}
 	}()
 
-	// Check version after successful connection
-	if err := verifyDatabaseVersion(ctx, conn, postgresDb.Version); err != nil {
+	// Detect and set the database version automatically
+	detectedVersion, err := detectDatabaseVersion(ctx, conn)
+	if err != nil {
 		return err
 	}
+	postgresDb.Version = detectedVersion
 
 	// Test if we can perform basic operations (like pg_dump would need)
 	if err := testBasicOperations(ctx, conn, *postgresDb.Database); err != nil {
@@ -538,35 +626,31 @@ func testSingleDatabaseConnection(
 	return nil
 }
 
-// verifyDatabaseVersion checks if the actual database version matches the specified version
-func verifyDatabaseVersion(
-	ctx context.Context,
-	conn *pgx.Conn,
-	expectedVersion tools.PostgresqlVersion,
-) error {
+// detectDatabaseVersion queries and returns the PostgreSQL major version
+func detectDatabaseVersion(ctx context.Context, conn *pgx.Conn) (tools.PostgresqlVersion, error) {
 	var versionStr string
 	err := conn.QueryRow(ctx, "SELECT version()").Scan(&versionStr)
 	if err != nil {
-		return fmt.Errorf("failed to query database version: %w", err)
+		return "", fmt.Errorf("failed to query database version: %w", err)
 	}
 
 	// Parse version from string like "PostgreSQL 14.2 on x86_64-pc-linux-gnu..."
-	re := regexp.MustCompile(`PostgreSQL (\d+)\.`)
+	// or "PostgreSQL 16 maintained by Postgre BY..." (some builds omit minor version)
+	re := regexp.MustCompile(`PostgreSQL (\d+)`)
 	matches := re.FindStringSubmatch(versionStr)
 	if len(matches) < 2 {
-		return fmt.Errorf("could not parse version from: %s", versionStr)
+		return "", fmt.Errorf("could not parse version from: %s", versionStr)
 	}
 
-	actualVersion := tools.GetPostgresqlVersionEnum(matches[1])
-	if actualVersion != expectedVersion {
-		return fmt.Errorf(
-			"you specified wrong version. Real version is %s, but you specified %s",
-			actualVersion,
-			expectedVersion,
-		)
-	}
+	majorVersion := matches[1]
 
-	return nil
+	// Map to known PostgresqlVersion enum values
+	switch majorVersion {
+	case "12", "13", "14", "15", "16", "17", "18":
+		return tools.PostgresqlVersion(majorVersion), nil
+	default:
+		return "", fmt.Errorf("unsupported PostgreSQL version: %s", majorVersion)
+	}
 }
 
 // testBasicOperations tests basic operations that backup tools need
@@ -593,7 +677,8 @@ func buildConnectionStringForDB(p *PostgresqlDatabase, dbName string, password s
 		sslMode = "require"
 	}
 
-	return fmt.Sprintf("host=%s port=%d user=%s password=%s dbname=%s sslmode=%s",
+	return fmt.Sprintf(
+		"host=%s port=%d user=%s password=%s dbname=%s sslmode=%s default_query_exec_mode=simple_protocol standard_conforming_strings=on client_encoding=UTF8",
 		p.Host,
 		p.Port,
 		p.Username,
@@ -613,3 +698,15 @@ func decryptPasswordIfNeeded(
 	}
 	return encryptor.Decrypt(databaseID, password)
 }
+
+func isSupabaseConnection(host, username string) bool {
+	return strings.Contains(strings.ToLower(host), "supabase") ||
+		strings.Contains(strings.ToLower(username), "supabase")
+}
+
+func extractSupabaseProjectID(username string) string {
+	if idx := strings.Index(username, "."); idx != -1 {
+		return username[idx+1:]
+	}
+	return ""
+}

backend/internal/features/databases/databases/postgresql/readonly_user_test.go

@@ -246,6 +246,188 @@ func Test_ReadOnlyUser_MultipleSchemas_AllAccessible(t *testing.T) {
 	assert.NoError(t, err)
 }
 
+func Test_CreateReadOnlyUser_DatabaseNameWithDash_Success(t *testing.T) {
+	env := config.GetEnv()
+	container := connectToPostgresContainer(t, env.TestPostgres16Port)
+	defer container.DB.Close()
+
+	dashDbName := "test-db-with-dash"
+
+	_, err := container.DB.Exec(fmt.Sprintf(`DROP DATABASE IF EXISTS "%s"`, dashDbName))
+	assert.NoError(t, err)
+
+	_, err = container.DB.Exec(fmt.Sprintf(`CREATE DATABASE "%s"`, dashDbName))
+	assert.NoError(t, err)
+
+	defer func() {
+		_, _ = container.DB.Exec(fmt.Sprintf(`DROP DATABASE IF EXISTS "%s"`, dashDbName))
+	}()
+
+	dashDSN := fmt.Sprintf("host=%s port=%d user=%s password=%s dbname=%s sslmode=disable",
+		container.Host, container.Port, container.Username, container.Password, dashDbName)
+	dashDB, err := sqlx.Connect("postgres", dashDSN)
+	assert.NoError(t, err)
+	defer dashDB.Close()
+
+	_, err = dashDB.Exec(`
+		CREATE TABLE dash_test (
+			id SERIAL PRIMARY KEY,
+			data TEXT NOT NULL
+		);
+		INSERT INTO dash_test (data) VALUES ('test1'), ('test2');
+	`)
+	assert.NoError(t, err)
+
+	pgModel := &PostgresqlDatabase{
+		Version:  tools.GetPostgresqlVersionEnum("16"),
+		Host:     container.Host,
+		Port:     container.Port,
+		Username: container.Username,
+		Password: container.Password,
+		Database: &dashDbName,
+		IsHttps:  false,
+	}
+
+	logger := slog.New(slog.NewTextHandler(os.Stdout, nil))
+	ctx := context.Background()
+
+	username, password, err := pgModel.CreateReadOnlyUser(ctx, logger, nil, uuid.New())
+	assert.NoError(t, err)
+	assert.NotEmpty(t, username)
+	assert.NotEmpty(t, password)
+	assert.True(t, strings.HasPrefix(username, "postgresus-"))
+
+	readOnlyDSN := fmt.Sprintf("host=%s port=%d user=%s password=%s dbname=%s sslmode=disable",
+		container.Host, container.Port, username, password, dashDbName)
+	readOnlyConn, err := sqlx.Connect("postgres", readOnlyDSN)
+	assert.NoError(t, err)
+	defer readOnlyConn.Close()
+
+	var count int
+	err = readOnlyConn.Get(&count, "SELECT COUNT(*) FROM dash_test")
+	assert.NoError(t, err)
+	assert.Equal(t, 2, count)
+
+	_, err = readOnlyConn.Exec("INSERT INTO dash_test (data) VALUES ('should-fail')")
+	assert.Error(t, err)
+	assert.Contains(t, err.Error(), "permission denied")
+
+	_, err = dashDB.Exec(fmt.Sprintf(`DROP OWNED BY "%s" CASCADE`, username))
+	if err != nil {
+		t.Logf("Warning: Failed to drop owned objects: %v", err)
+	}
+
+	_, err = dashDB.Exec(fmt.Sprintf(`DROP USER IF EXISTS "%s"`, username))
+	assert.NoError(t, err)
+}
+
+func Test_CreateReadOnlyUser_Supabase_UserCanReadButNotWrite(t *testing.T) {
+	env := config.GetEnv()
+
+	if env.TestSupabaseHost == "" {
+		t.Skip("Skipping Supabase test: missing environment variables")
+	}
+
+	portInt, err := strconv.Atoi(env.TestSupabasePort)
+	assert.NoError(t, err)
+
+	dsn := fmt.Sprintf(
+		"host=%s port=%d user=%s password=%s dbname=%s sslmode=require",
+		env.TestSupabaseHost,
+		portInt,
+		env.TestSupabaseUsername,
+		env.TestSupabasePassword,
+		env.TestSupabaseDatabase,
+	)
+
+	adminDB, err := sqlx.Connect("postgres", dsn)
+	assert.NoError(t, err)
+	defer adminDB.Close()
+
+	tableName := fmt.Sprintf(
+		"readonly_test_%s",
+		strings.ReplaceAll(uuid.New().String()[:8], "-", ""),
+	)
+	_, err = adminDB.Exec(fmt.Sprintf(`
+		DROP TABLE IF EXISTS public.%s CASCADE;
+		CREATE TABLE public.%s (
+			id SERIAL PRIMARY KEY,
+			data TEXT NOT NULL
+		);
+		INSERT INTO public.%s (data) VALUES ('test1'), ('test2');
+	`, tableName, tableName, tableName))
+	assert.NoError(t, err)
+
+	defer func() {
+		_, _ = adminDB.Exec(fmt.Sprintf(`DROP TABLE IF EXISTS public.%s CASCADE`, tableName))
+	}()
+
+	pgModel := &PostgresqlDatabase{
+		Host:     env.TestSupabaseHost,
+		Port:     portInt,
+		Username: env.TestSupabaseUsername,
+		Password: env.TestSupabasePassword,
+		Database: &env.TestSupabaseDatabase,
+		IsHttps:  true,
+	}
+
+	logger := slog.New(slog.NewTextHandler(os.Stdout, nil))
+	ctx := context.Background()
+
+	connectionUsername, newPassword, err := pgModel.CreateReadOnlyUser(ctx, logger, nil, uuid.New())
+	assert.NoError(t, err)
+	assert.NotEmpty(t, connectionUsername)
+	assert.NotEmpty(t, newPassword)
+	assert.True(t, strings.HasPrefix(connectionUsername, "postgresus-"))
+
+	baseUsername := connectionUsername
+	if idx := strings.Index(connectionUsername, "."); idx != -1 {
+		baseUsername = connectionUsername[:idx]
+	}
+
+	defer func() {
+		_, _ = adminDB.Exec(fmt.Sprintf(`DROP OWNED BY "%s" CASCADE`, baseUsername))
+		_, _ = adminDB.Exec(fmt.Sprintf(`DROP USER IF EXISTS "%s"`, baseUsername))
+	}()
+
+	readOnlyDSN := fmt.Sprintf(
+		"host=%s port=%d user=%s password=%s dbname=%s sslmode=require",
+		env.TestSupabaseHost,
+		portInt,
+		connectionUsername,
+		newPassword,
+		env.TestSupabaseDatabase,
+	)
+	readOnlyConn, err := sqlx.Connect("postgres", readOnlyDSN)
+	assert.NoError(t, err)
+	defer readOnlyConn.Close()
+
+	var count int
+	err = readOnlyConn.Get(&count, fmt.Sprintf("SELECT COUNT(*) FROM public.%s", tableName))
+	assert.NoError(t, err)
+	assert.Equal(t, 2, count)
+
+	_, err = readOnlyConn.Exec(
+		fmt.Sprintf("INSERT INTO public.%s (data) VALUES ('should-fail')", tableName),
+	)
+	assert.Error(t, err)
+	assert.Contains(t, err.Error(), "permission denied")
+
+	_, err = readOnlyConn.Exec(
+		fmt.Sprintf("UPDATE public.%s SET data = 'hacked' WHERE id = 1", tableName),
+	)
+	assert.Error(t, err)
+	assert.Contains(t, err.Error(), "permission denied")
+
+	_, err = readOnlyConn.Exec(fmt.Sprintf("DELETE FROM public.%s WHERE id = 1", tableName))
+	assert.Error(t, err)
+	assert.Contains(t, err.Error(), "permission denied")
+
+	_, err = readOnlyConn.Exec("CREATE TABLE public.hack_table (id INT)")
+	assert.Error(t, err)
+	assert.Contains(t, err.Error(), "permission denied")
+}
+
 type PostgresContainer struct {
 	Host     string
 	Port     int

backend/internal/features/databases/model.go

@@ -75,6 +75,16 @@ func (d *Database) EncryptSensitiveFields(encryptor encryption.FieldEncryptor) e
 	return nil
 }
 
+func (d *Database) PopulateVersionIfEmpty(
+	logger *slog.Logger,
+	encryptor encryption.FieldEncryptor,
+) error {
+	if d.Postgresql != nil {
+		return d.Postgresql.PopulateVersionIfEmpty(logger, encryptor, d.ID)
+	}
+	return nil
+}
+
 func (d *Database) Update(incoming *Database) {
 	d.Name = incoming.Name
 	d.Type = incoming.Type

backend/internal/features/databases/service.go

@@ -68,6 +68,10 @@ func (s *DatabaseService) CreateDatabase(
 		return nil, err
 	}
 
+	if err := database.PopulateVersionIfEmpty(s.logger, s.fieldEncryptor); err != nil {
+		return nil, fmt.Errorf("failed to auto-detect database version: %w", err)
+	}
+
 	if err := database.EncryptSensitiveFields(s.fieldEncryptor); err != nil {
 		return nil, fmt.Errorf("failed to encrypt sensitive fields: %w", err)
 	}
@@ -125,6 +129,10 @@ func (s *DatabaseService) UpdateDatabase(
 		return err
 	}
 
+	if err := existingDatabase.PopulateVersionIfEmpty(s.logger, s.fieldEncryptor); err != nil {
+		return fmt.Errorf("failed to auto-detect database version: %w", err)
+	}
+
 	if err := existingDatabase.EncryptSensitiveFields(s.fieldEncryptor); err != nil {
 		return fmt.Errorf("failed to encrypt sensitive fields: %w", err)
 	}

backend/internal/features/notifiers/models/email_notifier/auth.go

@@ -0,0 +1,28 @@
+package email_notifier
+
+import (
+	"errors"
+	"net/smtp"
+)
+
+type loginAuth struct {
+	username, password string
+}
+
+func (a *loginAuth) Start(server *smtp.ServerInfo) (string, []byte, error) {
+	return "LOGIN", []byte{}, nil
+}
+
+func (a *loginAuth) Next(fromServer []byte, more bool) ([]byte, error) {
+	if more {
+		switch string(fromServer) {
+		case "Username:":
+			return []byte(a.username), nil
+		case "Password:":
+			return []byte(a.password), nil
+		default:
+			return nil, errors.New("unknown LOGIN challenge: " + string(fromServer))
+		}
+	}
+	return nil, nil
+}

backend/internal/features/notifiers/models/email_notifier/model.go

@@ -58,11 +58,10 @@ func (e *EmailNotifier) Validate(encryptor encryption.FieldEncryptor) error {
 
 func (e *EmailNotifier) Send(
 	encryptor encryption.FieldEncryptor,
-	logger *slog.Logger,
+	_ *slog.Logger,
 	heading string,
 	message string,
 ) error {
-	// Decrypt SMTP password if provided
 	var smtpPassword string
 	if e.SMTPPassword != "" {
 		decrypted, err := encryptor.Decrypt(e.NotifierID, e.SMTPPassword)
@@ -72,7 +71,6 @@ func (e *EmailNotifier) Send(
 		smtpPassword = decrypted
 	}
 
-	// Compose email
 	from := e.From
 	if from == "" {
 		from = e.SMTPUser
@@ -81,153 +79,13 @@ func (e *EmailNotifier) Send(
 		}
 	}
 
-	to := []string{e.TargetEmail}
-
-	// Format the email content
-	subject := fmt.Sprintf("Subject: %s\r\n", heading)
-	mime := fmt.Sprintf(
-		"MIME-version: 1.0;\nContent-Type: %s; charset=\"%s\";\n\n",
-		MIMETypeHTML,
-		MIMECharsetUTF8,
-	)
-	body := message
-	fromHeader := fmt.Sprintf("From: %s\r\n", from)
-	toHeader := fmt.Sprintf("To: %s\r\n", e.TargetEmail)
-
-	// Combine all parts of the email
-	emailContent := []byte(fromHeader + toHeader + subject + mime + body)
-
-	addr := net.JoinHostPort(e.SMTPHost, fmt.Sprintf("%d", e.SMTPPort))
-	timeout := DefaultTimeout
-
-	// Determine if authentication is required
+	emailContent := e.buildEmailContent(heading, message, from)
 	isAuthRequired := e.SMTPUser != "" && smtpPassword != ""
 
-	// Handle different port scenarios
 	if e.SMTPPort == ImplicitTLSPort {
-		// Implicit TLS (port 465)
-		// Set up TLS config
-		tlsConfig := &tls.Config{
-			ServerName: e.SMTPHost,
-		}
-
-		// Dial with timeout
-		dialer := &net.Dialer{Timeout: timeout}
-		conn, err := tls.DialWithDialer(dialer, "tcp", addr, tlsConfig)
-		if err != nil {
-			return fmt.Errorf("failed to connect to SMTP server: %w", err)
-		}
-		defer func() {
-			_ = conn.Close()
-		}()
-
-		// Create SMTP client
-		client, err := smtp.NewClient(conn, e.SMTPHost)
-		if err != nil {
-			return fmt.Errorf("failed to create SMTP client: %w", err)
-		}
-		defer func() {
-			_ = client.Quit()
-		}()
-
-		// Set up authentication only if credentials are provided
-		if isAuthRequired {
-			auth := smtp.PlainAuth("", e.SMTPUser, smtpPassword, e.SMTPHost)
-			if err := client.Auth(auth); err != nil {
-				return fmt.Errorf("SMTP authentication failed: %w", err)
-			}
-		}
-
-		// Set sender and recipients
-		if err := client.Mail(from); err != nil {
-			return fmt.Errorf("failed to set sender: %w", err)
-		}
-		for _, recipient := range to {
-			if err := client.Rcpt(recipient); err != nil {
-				return fmt.Errorf("failed to set recipient: %w", err)
-			}
-		}
-
-		// Send the email body
-		writer, err := client.Data()
-		if err != nil {
-			return fmt.Errorf("failed to get data writer: %w", err)
-		}
-		_, err = writer.Write(emailContent)
-		if err != nil {
-			return fmt.Errorf("failed to write email content: %w", err)
-		}
-		err = writer.Close()
-		if err != nil {
-			return fmt.Errorf("failed to close data writer: %w", err)
-		}
-
-		return nil
-	} else {
-		// STARTTLS (port 587) or other ports
-		// Create a custom dialer with timeout
-		dialer := &net.Dialer{Timeout: timeout}
-		conn, err := dialer.Dial("tcp", addr)
-		if err != nil {
-			return fmt.Errorf("failed to connect to SMTP server: %w", err)
-		}
-
-		// Create client from connection
-		client, err := smtp.NewClient(conn, e.SMTPHost)
-		if err != nil {
-			return fmt.Errorf("failed to create SMTP client: %w", err)
-		}
-		defer func() {
-			_ = client.Quit()
-		}()
-
-		// Send email using the client
-		if err := client.Hello(DefaultHelloName); err != nil {
-			return fmt.Errorf("SMTP hello failed: %w", err)
-		}
-
-		// Start TLS if available
-		if ok, _ := client.Extension("STARTTLS"); ok {
-			if err := client.StartTLS(&tls.Config{ServerName: e.SMTPHost}); err != nil {
-				return fmt.Errorf("STARTTLS failed: %w", err)
-			}
-		}
-
-		// Authenticate only if credentials are provided
-		if isAuthRequired {
-			auth := smtp.PlainAuth("", e.SMTPUser, smtpPassword, e.SMTPHost)
-			if err := client.Auth(auth); err != nil {
-				return fmt.Errorf("SMTP authentication failed: %w", err)
-			}
-		}
-
-		if err := client.Mail(from); err != nil {
-			return fmt.Errorf("failed to set sender: %w", err)
-		}
-
-		for _, recipient := range to {
-			if err := client.Rcpt(recipient); err != nil {
-				return fmt.Errorf("failed to set recipient: %w", err)
-			}
-		}
-
-		writer, err := client.Data()
-		if err != nil {
-			return fmt.Errorf("failed to get data writer: %w", err)
-		}
-
-		_, err = writer.Write(emailContent)
-		if err != nil {
-			return fmt.Errorf("failed to write email content: %w", err)
-		}
-
-		err = writer.Close()
-		if err != nil {
-			return fmt.Errorf("failed to close data writer: %w", err)
-		}
-
-		return client.Quit()
+		return e.sendImplicitTLS(emailContent, from, smtpPassword, isAuthRequired)
 	}
+	return e.sendStartTLS(emailContent, from, smtpPassword, isAuthRequired)
 }
 
 func (e *EmailNotifier) HideSensitiveData() {
@@ -256,3 +114,166 @@ func (e *EmailNotifier) EncryptSensitiveData(encryptor encryption.FieldEncryptor
 	}
 	return nil
 }
+
+func (e *EmailNotifier) buildEmailContent(heading, message, from string) []byte {
+	subject := fmt.Sprintf("Subject: %s\r\n", heading)
+	mime := fmt.Sprintf(
+		"MIME-version: 1.0;\nContent-Type: %s; charset=\"%s\";\n\n",
+		MIMETypeHTML,
+		MIMECharsetUTF8,
+	)
+	fromHeader := fmt.Sprintf("From: %s\r\n", from)
+	toHeader := fmt.Sprintf("To: %s\r\n", e.TargetEmail)
+	return []byte(fromHeader + toHeader + subject + mime + message)
+}
+
+func (e *EmailNotifier) sendImplicitTLS(
+	emailContent []byte,
+	from string,
+	password string,
+	isAuthRequired bool,
+) error {
+	createClient := func() (*smtp.Client, func(), error) {
+		return e.createImplicitTLSClient()
+	}
+
+	client, cleanup, err := e.authenticateWithRetry(createClient, password, isAuthRequired)
+	if err != nil {
+		return err
+	}
+	defer cleanup()
+
+	return e.sendEmail(client, from, emailContent)
+}
+
+func (e *EmailNotifier) sendStartTLS(
+	emailContent []byte,
+	from string,
+	password string,
+	isAuthRequired bool,
+) error {
+	createClient := func() (*smtp.Client, func(), error) {
+		return e.createStartTLSClient()
+	}
+
+	client, cleanup, err := e.authenticateWithRetry(createClient, password, isAuthRequired)
+	if err != nil {
+		return err
+	}
+	defer cleanup()
+
+	return e.sendEmail(client, from, emailContent)
+}
+
+func (e *EmailNotifier) createImplicitTLSClient() (*smtp.Client, func(), error) {
+	addr := net.JoinHostPort(e.SMTPHost, fmt.Sprintf("%d", e.SMTPPort))
+	tlsConfig := &tls.Config{ServerName: e.SMTPHost}
+	dialer := &net.Dialer{Timeout: DefaultTimeout}
+
+	conn, err := tls.DialWithDialer(dialer, "tcp", addr, tlsConfig)
+	if err != nil {
+		return nil, nil, fmt.Errorf("failed to connect to SMTP server: %w", err)
+	}
+
+	client, err := smtp.NewClient(conn, e.SMTPHost)
+	if err != nil {
+		_ = conn.Close()
+		return nil, nil, fmt.Errorf("failed to create SMTP client: %w", err)
+	}
+
+	return client, func() { _ = client.Quit() }, nil
+}
+
+func (e *EmailNotifier) createStartTLSClient() (*smtp.Client, func(), error) {
+	addr := net.JoinHostPort(e.SMTPHost, fmt.Sprintf("%d", e.SMTPPort))
+	dialer := &net.Dialer{Timeout: DefaultTimeout}
+
+	conn, err := dialer.Dial("tcp", addr)
+	if err != nil {
+		return nil, nil, fmt.Errorf("failed to connect to SMTP server: %w", err)
+	}
+
+	client, err := smtp.NewClient(conn, e.SMTPHost)
+	if err != nil {
+		_ = conn.Close()
+		return nil, nil, fmt.Errorf("failed to create SMTP client: %w", err)
+	}
+
+	if err := client.Hello(DefaultHelloName); err != nil {
+		_ = client.Quit()
+		_ = conn.Close()
+		return nil, nil, fmt.Errorf("SMTP hello failed: %w", err)
+	}
+
+	if ok, _ := client.Extension("STARTTLS"); ok {
+		if err := client.StartTLS(&tls.Config{ServerName: e.SMTPHost}); err != nil {
+			_ = client.Quit()
+			_ = conn.Close()
+			return nil, nil, fmt.Errorf("STARTTLS failed: %w", err)
+		}
+	}
+
+	return client, func() { _ = client.Quit() }, nil
+}
+
+func (e *EmailNotifier) authenticateWithRetry(
+	createClient func() (*smtp.Client, func(), error),
+	password string,
+	isAuthRequired bool,
+) (*smtp.Client, func(), error) {
+	client, cleanup, err := createClient()
+	if err != nil {
+		return nil, nil, err
+	}
+
+	if !isAuthRequired {
+		return client, cleanup, nil
+	}
+
+	// Try PLAIN auth first
+	plainAuth := smtp.PlainAuth("", e.SMTPUser, password, e.SMTPHost)
+	if err := client.Auth(plainAuth); err == nil {
+		return client, cleanup, nil
+	}
+
+	// PLAIN auth failed, connection may be closed - recreate and try LOGIN auth
+	cleanup()
+
+	client, cleanup, err = createClient()
+	if err != nil {
+		return nil, nil, err
+	}
+
+	loginAuth := &loginAuth{username: e.SMTPUser, password: password}
+	if err := client.Auth(loginAuth); err != nil {
+		cleanup()
+		return nil, nil, fmt.Errorf("SMTP authentication failed: %w", err)
+	}
+
+	return client, cleanup, nil
+}
+
+func (e *EmailNotifier) sendEmail(client *smtp.Client, from string, content []byte) error {
+	if err := client.Mail(from); err != nil {
+		return fmt.Errorf("failed to set sender: %w", err)
+	}
+
+	if err := client.Rcpt(e.TargetEmail); err != nil {
+		return fmt.Errorf("failed to set recipient: %w", err)
+	}
+
+	writer, err := client.Data()
+	if err != nil {
+		return fmt.Errorf("failed to get data writer: %w", err)
+	}
+
+	if _, err = writer.Write(content); err != nil {
+		return fmt.Errorf("failed to write email content: %w", err)
+	}
+
+	if err = writer.Close(); err != nil {
+		return fmt.Errorf("failed to close data writer: %w", err)
+	}
+
+	return nil
+}

backend/internal/features/notifiers/models/slack/model.go

@@ -70,6 +70,7 @@ func (s *SlackNotifier) Send(
 		maxAttempts       = 5
 		defaultBackoff    = 2 * time.Second // when Retry-After header missing
 		backoffMultiplier = 1.5             // use exponential growth
+		requestTimeout    = 30 * time.Second
 	)
 
 	var (
@@ -77,6 +78,10 @@ func (s *SlackNotifier) Send(
 		attempts = 0
 	)
 
+	client := &http.Client{
+		Timeout: requestTimeout,
+	}
+
 	for {
 		attempts++
 
@@ -92,7 +97,7 @@ func (s *SlackNotifier) Send(
 		req.Header.Set("Content-Type", "application/json; charset=utf-8")
 		req.Header.Set("Authorization", "Bearer "+botToken)
 
-		resp, err := http.DefaultClient.Do(req)
+		resp, err := client.Do(req)
 		if err != nil {
 			return fmt.Errorf("send slack message: %w", err)
 		}

backend/internal/features/notifiers/models/webhook/model.go

@@ -10,20 +10,57 @@ import (
 	"net/http"
 	"net/url"
 	"postgresus-backend/internal/util/encryption"
+	"strings"
 
 	"github.com/google/uuid"
+	"gorm.io/gorm"
 )
 
+type WebhookHeader struct {
+	Key   string `json:"key"`
+	Value string `json:"value"`
+}
+
 type WebhookNotifier struct {
 	NotifierID    uuid.UUID     `json:"notifierId"    gorm:"primaryKey;column:notifier_id"`
 	WebhookURL    string        `json:"webhookUrl"    gorm:"not null;column:webhook_url"`
 	WebhookMethod WebhookMethod `json:"webhookMethod" gorm:"not null;column:webhook_method"`
+	BodyTemplate  *string       `json:"bodyTemplate"  gorm:"column:body_template;type:text"`
+	HeadersJSON   string        `json:"-"             gorm:"column:headers;type:text"`
+
+	Headers []WebhookHeader `json:"headers" gorm:"-"`
 }
 
 func (t *WebhookNotifier) TableName() string {
 	return "webhook_notifiers"
 }
 
+func (t *WebhookNotifier) BeforeSave(_ *gorm.DB) error {
+	if len(t.Headers) > 0 {
+		data, err := json.Marshal(t.Headers)
+
+		if err != nil {
+			return err
+		}
+
+		t.HeadersJSON = string(data)
+	} else {
+		t.HeadersJSON = "[]"
+	}
+
+	return nil
+}
+
+func (t *WebhookNotifier) AfterFind(_ *gorm.DB) error {
+	if t.HeadersJSON != "" {
+		if err := json.Unmarshal([]byte(t.HeadersJSON), &t.Headers); err != nil {
+			return err
+		}
+	}
+
+	return nil
+}
+
 func (t *WebhookNotifier) Validate(encryptor encryption.FieldEncryptor) error {
 	if t.WebhookURL == "" {
 		return errors.New("webhook URL is required")
@@ -49,66 +86,9 @@ func (t *WebhookNotifier) Send(
 
 	switch t.WebhookMethod {
 	case WebhookMethodGET:
-		reqURL := fmt.Sprintf("%s?heading=%s&message=%s",
-			webhookURL,
-			url.QueryEscape(heading),
-			url.QueryEscape(message),
-		)
-
-		resp, err := http.Get(reqURL)
-		if err != nil {
-			return fmt.Errorf("failed to send GET webhook: %w", err)
-		}
-		defer func() {
-			if cerr := resp.Body.Close(); cerr != nil {
-				logger.Error("failed to close response body", "error", cerr)
-			}
-		}()
-
-		if resp.StatusCode < 200 || resp.StatusCode >= 300 {
-			body, _ := io.ReadAll(resp.Body)
-			return fmt.Errorf(
-				"webhook GET returned status: %s, body: %s",
-				resp.Status,
-				string(body),
-			)
-		}
-
-		return nil
-
+		return t.sendGET(webhookURL, heading, message, logger)
 	case WebhookMethodPOST:
-		payload := map[string]string{
-			"heading": heading,
-			"message": message,
-		}
-
-		body, err := json.Marshal(payload)
-		if err != nil {
-			return fmt.Errorf("failed to marshal webhook payload: %w", err)
-		}
-
-		resp, err := http.Post(webhookURL, "application/json", bytes.NewReader(body))
-		if err != nil {
-			return fmt.Errorf("failed to send POST webhook: %w", err)
-		}
-
-		defer func() {
-			if cerr := resp.Body.Close(); cerr != nil {
-				logger.Error("failed to close response body", "error", cerr)
-			}
-		}()
-
-		if resp.StatusCode < 200 || resp.StatusCode >= 300 {
-			body, _ := io.ReadAll(resp.Body)
-			return fmt.Errorf(
-				"webhook POST returned status: %s, body: %s",
-				resp.Status,
-				string(body),
-			)
-		}
-
-		return nil
-
+		return t.sendPOST(webhookURL, heading, message, logger)
 	default:
 		return fmt.Errorf("unsupported webhook method: %s", t.WebhookMethod)
 	}
@@ -120,15 +100,144 @@ func (t *WebhookNotifier) HideSensitiveData() {
 func (t *WebhookNotifier) Update(incoming *WebhookNotifier) {
 	t.WebhookURL = incoming.WebhookURL
 	t.WebhookMethod = incoming.WebhookMethod
+	t.BodyTemplate = incoming.BodyTemplate
+	t.Headers = incoming.Headers
 }
 
 func (t *WebhookNotifier) EncryptSensitiveData(encryptor encryption.FieldEncryptor) error {
 	if t.WebhookURL != "" {
 		encrypted, err := encryptor.Encrypt(t.NotifierID, t.WebhookURL)
+
 		if err != nil {
 			return fmt.Errorf("failed to encrypt webhook URL: %w", err)
 		}
+
 		t.WebhookURL = encrypted
 	}
+
 	return nil
 }
+
+func (t *WebhookNotifier) sendGET(webhookURL, heading, message string, logger *slog.Logger) error {
+	reqURL := fmt.Sprintf("%s?heading=%s&message=%s",
+		webhookURL,
+		url.QueryEscape(heading),
+		url.QueryEscape(message),
+	)
+
+	req, err := http.NewRequest(http.MethodGet, reqURL, nil)
+	if err != nil {
+		return fmt.Errorf("failed to create GET request: %w", err)
+	}
+
+	t.applyHeaders(req)
+
+	client := &http.Client{}
+	resp, err := client.Do(req)
+	if err != nil {
+		return fmt.Errorf("failed to send GET webhook: %w", err)
+	}
+
+	defer func() {
+		if cerr := resp.Body.Close(); cerr != nil {
+			logger.Error("failed to close response body", "error", cerr)
+		}
+	}()
+
+	if resp.StatusCode < 200 || resp.StatusCode >= 300 {
+		body, _ := io.ReadAll(resp.Body)
+		return fmt.Errorf(
+			"webhook GET returned status: %s, body: %s",
+			resp.Status,
+			string(body),
+		)
+	}
+
+	return nil
+}
+
+func (t *WebhookNotifier) sendPOST(webhookURL, heading, message string, logger *slog.Logger) error {
+	body := t.buildRequestBody(heading, message)
+
+	req, err := http.NewRequest(http.MethodPost, webhookURL, bytes.NewReader(body))
+	if err != nil {
+		return fmt.Errorf("failed to create POST request: %w", err)
+	}
+
+	hasContentType := false
+
+	for _, h := range t.Headers {
+		if strings.EqualFold(h.Key, "Content-Type") {
+			hasContentType = true
+			break
+		}
+	}
+
+	if !hasContentType {
+		req.Header.Set("Content-Type", "application/json")
+	}
+
+	t.applyHeaders(req)
+
+	client := &http.Client{}
+	resp, err := client.Do(req)
+	if err != nil {
+		return fmt.Errorf("failed to send POST webhook: %w", err)
+	}
+
+	defer func() {
+		if cerr := resp.Body.Close(); cerr != nil {
+			logger.Error("failed to close response body", "error", cerr)
+		}
+	}()
+
+	if resp.StatusCode < 200 || resp.StatusCode >= 300 {
+		respBody, _ := io.ReadAll(resp.Body)
+		return fmt.Errorf(
+			"webhook POST returned status: %s, body: %s",
+			resp.Status,
+			string(respBody),
+		)
+	}
+
+	return nil
+}
+
+func (t *WebhookNotifier) buildRequestBody(heading, message string) []byte {
+	if t.BodyTemplate != nil && *t.BodyTemplate != "" {
+		result := *t.BodyTemplate
+		result = strings.ReplaceAll(result, "{{heading}}", escapeJSONString(heading))
+		result = strings.ReplaceAll(result, "{{message}}", escapeJSONString(message))
+		return []byte(result)
+	}
+
+	payload := map[string]string{
+		"heading": heading,
+		"message": message,
+	}
+	body, _ := json.Marshal(payload)
+
+	return body
+}
+
+func (t *WebhookNotifier) applyHeaders(req *http.Request) {
+	for _, h := range t.Headers {
+		if h.Key != "" {
+			req.Header.Set(h.Key, h.Value)
+		}
+	}
+}
+
+func escapeJSONString(s string) string {
+	b, err := json.Marshal(s)
+	if err != nil || len(b) < 2 {
+		escaped := strings.ReplaceAll(s, `\`, `\\`)
+		escaped = strings.ReplaceAll(escaped, `"`, `\"`)
+		escaped = strings.ReplaceAll(escaped, "\n", `\n`)
+		escaped = strings.ReplaceAll(escaped, "\r", `\r`)
+		escaped = strings.ReplaceAll(escaped, "\t", `\t`)
+		return escaped
+	}
+
+	return string(b[1 : len(b)-1])
+}

backend/internal/features/restores/controller_test.go

@@ -1,6 +1,7 @@
 package restores
 
 import (
+	"context"
 	"encoding/json"
 	"fmt"
 	"io"
@@ -340,7 +341,7 @@ func createTestBackup(
 	dummyContent := []byte("dummy backup content for testing")
 	reader := strings.NewReader(string(dummyContent))
 	logger := slog.New(slog.NewTextHandler(io.Discard, nil))
-	if err := storages[0].SaveFile(fieldEncryptor, logger, backup.ID, reader); err != nil {
+	if err := storages[0].SaveFile(context.Background(), fieldEncryptor, logger, backup.ID, reader); err != nil {
 		panic(fmt.Sprintf("Failed to create test backup file: %v", err))
 	}
 

backend/internal/features/restores/di.go

@@ -8,6 +8,7 @@ import (
 	"postgresus-backend/internal/features/restores/usecases"
 	"postgresus-backend/internal/features/storages"
 	workspaces_services "postgresus-backend/internal/features/workspaces/services"
+	"postgresus-backend/internal/util/encryption"
 	"postgresus-backend/internal/util/logger"
 )
 
@@ -22,6 +23,7 @@ var restoreService = &RestoreService{
 	logger.GetLogger(),
 	workspaces_services.GetWorkspaceService(),
 	audit_logs.GetAuditLogService(),
+	encryption.GetFieldEncryptor(),
 }
 var restoreController = &RestoreController{
 	restoreService,

backend/internal/features/restores/service.go

@@ -14,6 +14,7 @@ import (
 	"postgresus-backend/internal/features/storages"
 	users_models "postgresus-backend/internal/features/users/models"
 	workspaces_services "postgresus-backend/internal/features/workspaces/services"
+	"postgresus-backend/internal/util/encryption"
 	"postgresus-backend/internal/util/tools"
 	"time"
 
@@ -30,6 +31,7 @@ type RestoreService struct {
 	logger               *slog.Logger
 	workspaceService     *workspaces_services.WorkspaceService
 	auditLogService      *audit_logs.AuditLogService
+	fieldEncryptor       encryption.FieldEncryptor
 }
 
 func (s *RestoreService) OnBeforeBackupRemove(backup *backups.Backup) error {
@@ -120,12 +122,6 @@ func (s *RestoreService) RestoreBackupWithAuth(
 		return err
 	}
 
-	fmt.Printf(
-		"restore from %s to %s\n",
-		backupDatabase.Postgresql.Version,
-		requestDTO.PostgresqlDatabase.Version,
-	)
-
 	if tools.IsBackupDbVersionHigherThanRestoreDbVersion(
 		backupDatabase.Postgresql.Version,
 		requestDTO.PostgresqlDatabase.Version,
@@ -214,6 +210,10 @@ func (s *RestoreService) RestoreBackup(
 		Postgresql: requestDTO.PostgresqlDatabase,
 	}
 
+	if err := restoringToDB.PopulateVersionIfEmpty(s.logger, s.fieldEncryptor); err != nil {
+		return fmt.Errorf("failed to auto-detect database version: %w", err)
+	}
+
 	err = s.restoreBackupUsecase.Execute(
 		backupConfig,
 		restore,

backend/internal/features/restores/usecases/postgresql/restore_backup_uc.go

@@ -378,7 +378,6 @@ func (uc *RestorePostgresqlBackupUsecase) setupPgRestoreEnvironment(
 	// Add encoding-related environment variables
 	cmd.Env = append(cmd.Env, "LC_ALL=C.UTF-8")
 	cmd.Env = append(cmd.Env, "LANG=C.UTF-8")
-	cmd.Env = append(cmd.Env, "PGOPTIONS=--client-encoding=UTF8")
 
 	shouldRequireSSL := pgConfig.IsHttps
 
@@ -503,7 +502,7 @@ func (uc *RestorePostgresqlBackupUsecase) copyWithShutdownCheck(
 	dst io.Writer,
 	src io.Reader,
 ) (int64, error) {
-	buf := make([]byte, 32*1024) // 32KB buffer
+	buf := make([]byte, 16*1024*1024) // 16MB buffer
 	var totalBytesWritten int64
 
 	for {
@@ -564,11 +563,15 @@ func (uc *RestorePostgresqlBackupUsecase) createTempPgpassFile(
 		return "", nil
 	}
 
+	escapedHost := tools.EscapePgpassField(pgConfig.Host)
+	escapedUsername := tools.EscapePgpassField(pgConfig.Username)
+	escapedPassword := tools.EscapePgpassField(password)
+
 	pgpassContent := fmt.Sprintf("%s:%d:*:%s:%s",
-		pgConfig.Host,
+		escapedHost,
 		pgConfig.Port,
-		pgConfig.Username,
-		password,
+		escapedUsername,
+		escapedPassword,
 	)
 
 	tempDir, err := os.MkdirTemp("", "pgpass")

backend/internal/features/storages/interfaces.go

@@ -1,6 +1,7 @@
 package storages
 
 import (
+	"context"
 	"io"
 	"log/slog"
 	"postgresus-backend/internal/util/encryption"
@@ -10,6 +11,7 @@ import (
 
 type StorageFileSaver interface {
 	SaveFile(
+		ctx context.Context,
 		encryptor encryption.FieldEncryptor,
 		logger *slog.Logger,
 		fileID uuid.UUID,

backend/internal/features/storages/model.go

@@ -1,6 +1,7 @@
 package storages
 
 import (
+	"context"
 	"errors"
 	"io"
 	"log/slog"
@@ -30,12 +31,13 @@ type Storage struct {
 }
 
 func (s *Storage) SaveFile(
+	ctx context.Context,
 	encryptor encryption.FieldEncryptor,
 	logger *slog.Logger,
 	fileID uuid.UUID,
 	file io.Reader,
 ) error {
-	err := s.getSpecificStorage().SaveFile(encryptor, logger, fileID, file)
+	err := s.getSpecificStorage().SaveFile(ctx, encryptor, logger, fileID, file)
 	if err != nil {
 		lastSaveError := err.Error()
 		s.LastSaveError = &lastSaveError

backend/internal/features/storages/model_test.go

@@ -167,6 +167,7 @@ func Test_Storage_BasicOperations(t *testing.T) {
 				fileID := uuid.New()
 
 				err = tc.storage.SaveFile(
+					context.Background(),
 					encryptor,
 					logger.GetLogger(),
 					fileID,
@@ -189,6 +190,7 @@ func Test_Storage_BasicOperations(t *testing.T) {
 
 				fileID := uuid.New()
 				err = tc.storage.SaveFile(
+					context.Background(),
 					encryptor,
 					logger.GetLogger(),
 					fileID,
@@ -238,7 +240,7 @@ func setupS3Container(ctx context.Context) (*S3Container, error) {
 	secretKey := "testpassword"
 	bucketName := "test-bucket"
 	region := "us-east-1"
-	endpoint := fmt.Sprintf("localhost:%s", env.TestMinioPort)
+	endpoint := fmt.Sprintf("127.0.0.1:%s", env.TestMinioPort)
 
 	// Create MinIO client and ensure bucket exists
 	minioClient, err := minio.New(endpoint, &minio.Options{

backend/internal/features/storages/models/azure_blob/model.go

@@ -3,19 +3,44 @@ package azure_blob_storage
 import (
 	"bytes"
 	"context"
+	"encoding/base64"
 	"errors"
 	"fmt"
 	"io"
 	"log/slog"
+	"net"
+	"net/http"
 	"postgresus-backend/internal/util/encryption"
 	"strings"
 	"time"
 
 	"github.com/Azure/azure-sdk-for-go/sdk/azcore"
+	"github.com/Azure/azure-sdk-for-go/sdk/azcore/policy"
 	"github.com/Azure/azure-sdk-for-go/sdk/storage/azblob"
+	"github.com/Azure/azure-sdk-for-go/sdk/storage/azblob/blockblob"
 	"github.com/google/uuid"
 )
 
+const (
+	azureConnectTimeout      = 30 * time.Second
+	azureResponseTimeout     = 30 * time.Second
+	azureIdleConnTimeout     = 90 * time.Second
+	azureTLSHandshakeTimeout = 30 * time.Second
+
+	// Chunk size for block blob uploads - 16MB provides good balance between
+	// memory usage and upload efficiency. This creates backpressure to pg_dump
+	// by only reading one chunk at a time and waiting for Azure to confirm receipt.
+	azureChunkSize = 16 * 1024 * 1024
+)
+
+type readSeekCloser struct {
+	*bytes.Reader
+}
+
+func (r *readSeekCloser) Close() error {
+	return nil
+}
+
 type AuthMethod string
 
 const (
@@ -39,27 +64,91 @@ func (s *AzureBlobStorage) TableName() string {
 }
 
 func (s *AzureBlobStorage) SaveFile(
+	ctx context.Context,
 	encryptor encryption.FieldEncryptor,
 	logger *slog.Logger,
 	fileID uuid.UUID,
 	file io.Reader,
 ) error {
+	select {
+	case <-ctx.Done():
+		return fmt.Errorf("upload cancelled before start: %w", ctx.Err())
+	default:
+	}
+
 	client, err := s.getClient(encryptor)
 	if err != nil {
 		return err
 	}
 
 	blobName := s.buildBlobName(fileID.String())
+	blockBlobClient := client.ServiceClient().
+		NewContainerClient(s.ContainerName).
+		NewBlockBlobClient(blobName)
 
-	_, err = client.UploadStream(
-		context.TODO(),
-		s.ContainerName,
-		blobName,
-		file,
-		nil,
-	)
+	var blockIDs []string
+	blockNumber := 0
+	buf := make([]byte, azureChunkSize)
+
+	for {
+		select {
+		case <-ctx.Done():
+			return fmt.Errorf("upload cancelled: %w", ctx.Err())
+		default:
+		}
+
+		n, readErr := io.ReadFull(file, buf)
+
+		if n == 0 && readErr == io.EOF {
+			break
+		}
+
+		if readErr != nil && readErr != io.EOF && readErr != io.ErrUnexpectedEOF {
+			return fmt.Errorf("read error: %w", readErr)
+		}
+
+		blockID := base64.StdEncoding.EncodeToString([]byte(fmt.Sprintf("%06d", blockNumber)))
+
+		_, err := blockBlobClient.StageBlock(
+			ctx,
+			blockID,
+			&readSeekCloser{bytes.NewReader(buf[:n])},
+			nil,
+		)
+		if err != nil {
+			select {
+			case <-ctx.Done():
+				return fmt.Errorf("upload cancelled: %w", ctx.Err())
+			default:
+				return fmt.Errorf("failed to stage block %d: %w", blockNumber, err)
+			}
+		}
+
+		blockIDs = append(blockIDs, blockID)
+		blockNumber++
+
+		if readErr == io.EOF || readErr == io.ErrUnexpectedEOF {
+			break
+		}
+	}
+
+	if len(blockIDs) == 0 {
+		_, err = client.UploadStream(
+			ctx,
+			s.ContainerName,
+			blobName,
+			bytes.NewReader([]byte{}),
+			nil,
+		)
+		if err != nil {
+			return fmt.Errorf("failed to upload empty blob: %w", err)
+		}
+		return nil
+	}
+
+	_, err = blockBlobClient.CommitBlockList(ctx, blockIDs, &blockblob.CommitBlockListOptions{})
 	if err != nil {
-		return fmt.Errorf("failed to upload blob to Azure: %w", err)
+		return fmt.Errorf("failed to commit block list: %w", err)
 	}
 
 	return nil
@@ -253,6 +342,8 @@ func (s *AzureBlobStorage) getClient(encryptor encryption.FieldEncryptor) (*azbl
 	var client *azblob.Client
 	var err error
 
+	clientOptions := s.buildClientOptions()
+
 	switch s.AuthMethod {
 	case AuthMethodConnectionString:
 		connectionString, decryptErr := encryptor.Decrypt(s.StorageID, s.ConnectionString)
@@ -260,7 +351,7 @@ func (s *AzureBlobStorage) getClient(encryptor encryption.FieldEncryptor) (*azbl
 			return nil, fmt.Errorf("failed to decrypt Azure connection string: %w", decryptErr)
 		}
 
-		client, err = azblob.NewClientFromConnectionString(connectionString, nil)
+		client, err = azblob.NewClientFromConnectionString(connectionString, clientOptions)
 		if err != nil {
 			return nil, fmt.Errorf(
 				"failed to create Azure Blob client from connection string: %w",
@@ -279,7 +370,7 @@ func (s *AzureBlobStorage) getClient(encryptor encryption.FieldEncryptor) (*azbl
 			return nil, fmt.Errorf("failed to create Azure shared key credential: %w", credErr)
 		}
 
-		client, err = azblob.NewClientWithSharedKeyCredential(accountURL, credential, nil)
+		client, err = azblob.NewClientWithSharedKeyCredential(accountURL, credential, clientOptions)
 		if err != nil {
 			return nil, fmt.Errorf("failed to create Azure Blob client with shared key: %w", err)
 		}
@@ -290,6 +381,26 @@ func (s *AzureBlobStorage) getClient(encryptor encryption.FieldEncryptor) (*azbl
 	return client, nil
 }
 
+func (s *AzureBlobStorage) buildClientOptions() *azblob.ClientOptions {
+	transport := &http.Transport{
+		DialContext: (&net.Dialer{
+			Timeout: azureConnectTimeout,
+		}).DialContext,
+		TLSHandshakeTimeout:   azureTLSHandshakeTimeout,
+		ResponseHeaderTimeout: azureResponseTimeout,
+		IdleConnTimeout:       azureIdleConnTimeout,
+	}
+
+	return &azblob.ClientOptions{
+		ClientOptions: azcore.ClientOptions{
+			Transport: &http.Client{Transport: transport},
+			Retry: policy.RetryOptions{
+				MaxRetries: 0,
+			},
+		},
+	}
+}
+
 func (s *AzureBlobStorage) buildAccountURL() string {
 	if s.Endpoint != "" {
 		endpoint := s.Endpoint

backend/internal/features/storages/models/google_drive/model.go

@@ -7,6 +7,8 @@ import (
 	"fmt"
 	"io"
 	"log/slog"
+	"net"
+	"net/http"
 	"postgresus-backend/internal/util/encryption"
 	"strings"
 	"time"
@@ -16,9 +18,22 @@ import (
 	"golang.org/x/oauth2/google"
 
 	drive "google.golang.org/api/drive/v3"
+	"google.golang.org/api/googleapi"
 	"google.golang.org/api/option"
 )
 
+const (
+	gdConnectTimeout      = 30 * time.Second
+	gdResponseTimeout     = 30 * time.Second
+	gdIdleConnTimeout     = 90 * time.Second
+	gdTLSHandshakeTimeout = 30 * time.Second
+
+	// Chunk size for Google Drive resumable uploads - 16MB provides good balance
+	// between memory usage and upload efficiency. Google Drive requires chunks
+	// to be multiples of 256KB for resumable uploads.
+	gdChunkSize = 16 * 1024 * 1024
+)
+
 type GoogleDriveStorage struct {
 	StorageID    uuid.UUID `json:"storageId"    gorm:"primaryKey;type:uuid;column:storage_id"`
 	ClientID     string    `json:"clientId"     gorm:"not null;type:text;column:client_id"`
@@ -31,31 +46,44 @@ func (s *GoogleDriveStorage) TableName() string {
 }
 
 func (s *GoogleDriveStorage) SaveFile(
+	ctx context.Context,
 	encryptor encryption.FieldEncryptor,
 	logger *slog.Logger,
 	fileID uuid.UUID,
 	file io.Reader,
 ) error {
-	return s.withRetryOnAuth(encryptor, func(driveService *drive.Service) error {
-		ctx := context.Background()
+	return s.withRetryOnAuth(ctx, encryptor, func(driveService *drive.Service) error {
 		filename := fileID.String()
 
-		// Ensure the postgresus_backups folder exists
 		folderID, err := s.ensureBackupsFolderExists(ctx, driveService)
 		if err != nil {
 			return fmt.Errorf("failed to create/find backups folder: %w", err)
 		}
 
-		// Delete any previous copy so we keep at most one object per logical file.
-		_ = s.deleteByName(ctx, driveService, filename, folderID) // ignore "not found"
+		_ = s.deleteByName(ctx, driveService, filename, folderID)
 
 		fileMeta := &drive.File{
 			Name:    filename,
 			Parents: []string{folderID},
 		}
 
-		_, err = driveService.Files.Create(fileMeta).Media(file).Context(ctx).Do()
+		backpressureReader := &backpressureReader{
+			reader:    file,
+			ctx:       ctx,
+			chunkSize: gdChunkSize,
+			buf:       make([]byte, gdChunkSize),
+		}
+
+		_, err = driveService.Files.Create(fileMeta).
+			Media(backpressureReader, googleapi.ChunkSize(gdChunkSize)).
+			Context(ctx).
+			Do()
 		if err != nil {
+			select {
+			case <-ctx.Done():
+				return fmt.Errorf("upload cancelled: %w", ctx.Err())
+			default:
+			}
 			return fmt.Errorf("failed to upload file to Google Drive: %w", err)
 		}
 
@@ -70,30 +98,85 @@ func (s *GoogleDriveStorage) SaveFile(
 	})
 }
 
+type backpressureReader struct {
+	reader     io.Reader
+	ctx        context.Context
+	chunkSize  int
+	buf        []byte
+	bufStart   int
+	bufEnd     int
+	totalBytes int64
+	chunkCount int
+}
+
+func (r *backpressureReader) Read(p []byte) (n int, err error) {
+	select {
+	case <-r.ctx.Done():
+		return 0, r.ctx.Err()
+	default:
+	}
+
+	if r.bufStart >= r.bufEnd {
+		r.chunkCount++
+
+		bytesRead, readErr := io.ReadFull(r.reader, r.buf)
+		if bytesRead > 0 {
+			r.bufStart = 0
+			r.bufEnd = bytesRead
+		}
+
+		if readErr != nil && readErr != io.EOF && readErr != io.ErrUnexpectedEOF {
+			return 0, readErr
+		}
+
+		if bytesRead == 0 && readErr == io.EOF {
+			return 0, io.EOF
+		}
+	}
+
+	n = copy(p, r.buf[r.bufStart:r.bufEnd])
+	r.bufStart += n
+	r.totalBytes += int64(n)
+
+	if r.bufStart >= r.bufEnd {
+		select {
+		case <-r.ctx.Done():
+			return n, r.ctx.Err()
+		default:
+		}
+	}
+
+	return n, nil
+}
+
 func (s *GoogleDriveStorage) GetFile(
 	encryptor encryption.FieldEncryptor,
 	fileID uuid.UUID,
 ) (io.ReadCloser, error) {
 	var result io.ReadCloser
-	err := s.withRetryOnAuth(encryptor, func(driveService *drive.Service) error {
-		folderID, err := s.findBackupsFolder(driveService)
-		if err != nil {
-			return fmt.Errorf("failed to find backups folder: %w", err)
-		}
+	err := s.withRetryOnAuth(
+		context.Background(),
+		encryptor,
+		func(driveService *drive.Service) error {
+			folderID, err := s.findBackupsFolder(driveService)
+			if err != nil {
+				return fmt.Errorf("failed to find backups folder: %w", err)
+			}
 
-		fileIDGoogle, err := s.lookupFileID(driveService, fileID.String(), folderID)
-		if err != nil {
-			return err
-		}
+			fileIDGoogle, err := s.lookupFileID(driveService, fileID.String(), folderID)
+			if err != nil {
+				return err
+			}
 
-		resp, err := driveService.Files.Get(fileIDGoogle).Download()
-		if err != nil {
-			return fmt.Errorf("failed to download file from Google Drive: %w", err)
-		}
+			resp, err := driveService.Files.Get(fileIDGoogle).Download()
+			if err != nil {
+				return fmt.Errorf("failed to download file from Google Drive: %w", err)
+			}
 
-		result = resp.Body
-		return nil
-	})
+			result = resp.Body
+			return nil
+		},
+	)
 
 	return result, err
 }
@@ -102,8 +185,8 @@ func (s *GoogleDriveStorage) DeleteFile(
 	encryptor encryption.FieldEncryptor,
 	fileID uuid.UUID,
 ) error {
-	return s.withRetryOnAuth(encryptor, func(driveService *drive.Service) error {
-		ctx := context.Background()
+	ctx := context.Background()
+	return s.withRetryOnAuth(ctx, encryptor, func(driveService *drive.Service) error {
 		folderID, err := s.findBackupsFolder(driveService)
 		if err != nil {
 			return fmt.Errorf("failed to find backups folder: %w", err)
@@ -142,8 +225,8 @@ func (s *GoogleDriveStorage) Validate(encryptor encryption.FieldEncryptor) error
 }
 
 func (s *GoogleDriveStorage) TestConnection(encryptor encryption.FieldEncryptor) error {
-	return s.withRetryOnAuth(encryptor, func(driveService *drive.Service) error {
-		ctx := context.Background()
+	ctx := context.Background()
+	return s.withRetryOnAuth(ctx, encryptor, func(driveService *drive.Service) error {
 		testFilename := "test-connection-" + uuid.New().String()
 		testData := []byte("test")
 
@@ -243,9 +326,16 @@ func (s *GoogleDriveStorage) Update(incoming *GoogleDriveStorage) {
 
 // withRetryOnAuth executes the provided function with retry logic for authentication errors
 func (s *GoogleDriveStorage) withRetryOnAuth(
+	ctx context.Context,
 	encryptor encryption.FieldEncryptor,
 	fn func(*drive.Service) error,
 ) error {
+	select {
+	case <-ctx.Done():
+		return ctx.Err()
+	default:
+	}
+
 	driveService, err := s.getDriveService(encryptor)
 	if err != nil {
 		return err
@@ -253,6 +343,12 @@ func (s *GoogleDriveStorage) withRetryOnAuth(
 
 	err = fn(driveService)
 	if err != nil && s.isAuthError(err) {
+		select {
+		case <-ctx.Done():
+			return ctx.Err()
+		default:
+		}
+
 		// Try to refresh token and retry once
 		fmt.Printf("Google Drive auth error detected, attempting token refresh: %v\n", err)
 
@@ -422,7 +518,6 @@ func (s *GoogleDriveStorage) getDriveService(
 		return nil, err
 	}
 
-	// Decrypt credentials before use
 	clientSecret, err := encryptor.Decrypt(s.StorageID, s.ClientSecret)
 	if err != nil {
 		return nil, fmt.Errorf("failed to decrypt Google Drive client secret: %w", err)
@@ -449,16 +544,16 @@ func (s *GoogleDriveStorage) getDriveService(
 
 	tokenSource := cfg.TokenSource(ctx, &token)
 
-	// Force token validation to ensure we're using the current token
 	currentToken, err := tokenSource.Token()
 	if err != nil {
 		return nil, fmt.Errorf("failed to get current token: %w", err)
 	}
 
-	// Create a new token source with the validated token
 	validatedTokenSource := oauth2.StaticTokenSource(currentToken)
 
-	driveService, err := drive.NewService(ctx, option.WithTokenSource(validatedTokenSource))
+	httpClient := s.buildHTTPClient(validatedTokenSource)
+
+	driveService, err := drive.NewService(ctx, option.WithHTTPClient(httpClient))
 	if err != nil {
 		return nil, fmt.Errorf("unable to create Drive client: %w", err)
 	}
@@ -466,6 +561,24 @@ func (s *GoogleDriveStorage) getDriveService(
 	return driveService, nil
 }
 
+func (s *GoogleDriveStorage) buildHTTPClient(tokenSource oauth2.TokenSource) *http.Client {
+	transport := &http.Transport{
+		DialContext: (&net.Dialer{
+			Timeout: gdConnectTimeout,
+		}).DialContext,
+		TLSHandshakeTimeout:   gdTLSHandshakeTimeout,
+		ResponseHeaderTimeout: gdResponseTimeout,
+		IdleConnTimeout:       gdIdleConnTimeout,
+	}
+
+	return &http.Client{
+		Transport: &oauth2.Transport{
+			Source: tokenSource,
+			Base:   transport,
+		},
+	}
+}
+
 func (s *GoogleDriveStorage) lookupFileID(
 	driveService *drive.Service,
 	name string,

backend/internal/features/storages/models/local/model.go

@@ -1,6 +1,7 @@
 package local_storage
 
 import (
+	"context"
 	"fmt"
 	"io"
 	"log/slog"
@@ -13,6 +14,13 @@ import (
 	"github.com/google/uuid"
 )
 
+const (
+	// Chunk size for local storage writes - 8MB per buffer with double-buffering
+	// allows overlapped I/O while keeping total memory under 32MB.
+	// Two 8MB buffers = 16MB for local storage, plus 8MB for pg_dump buffer = ~25MB total.
+	localChunkSize = 8 * 1024 * 1024
+)
+
 // LocalStorage uses ./postgresus_local_backups folder as a
 // directory for backups and ./postgresus_local_temp folder as a
 // directory for temp files
@@ -25,11 +33,18 @@ func (l *LocalStorage) TableName() string {
 }
 
 func (l *LocalStorage) SaveFile(
+	ctx context.Context,
 	encryptor encryption.FieldEncryptor,
 	logger *slog.Logger,
 	fileID uuid.UUID,
 	file io.Reader,
 ) error {
+	select {
+	case <-ctx.Done():
+		return ctx.Err()
+	default:
+	}
+
 	logger.Info("Starting to save file to local storage", "fileId", fileID.String())
 
 	err := files_utils.EnsureDirectories([]string{
@@ -60,7 +75,7 @@ func (l *LocalStorage) SaveFile(
 	}()
 
 	logger.Debug("Copying file data to temp file", "fileId", fileID.String())
-	_, err = io.Copy(tempFile, file)
+	_, err = copyWithContext(ctx, tempFile, file)
 	if err != nil {
 		logger.Error("Failed to write to temp file", "fileId", fileID.String(), "error", err)
 		return fmt.Errorf("failed to write to temp file: %w", err)
@@ -175,3 +190,35 @@ func (l *LocalStorage) EncryptSensitiveData(encryptor encryption.FieldEncryptor)
 
 func (l *LocalStorage) Update(incoming *LocalStorage) {
 }
+
+func copyWithContext(ctx context.Context, dst io.Writer, src io.Reader) (int64, error) {
+	buf := make([]byte, localChunkSize)
+	var written int64
+
+	for {
+		select {
+		case <-ctx.Done():
+			return written, ctx.Err()
+		default:
+		}
+
+		nr, readErr := src.Read(buf)
+		if nr > 0 {
+			nw, writeErr := dst.Write(buf[:nr])
+			written += int64(nw)
+			if writeErr != nil {
+				return written, writeErr
+			}
+			if nr != nw {
+				return written, io.ErrShortWrite
+			}
+		}
+
+		if readErr == io.EOF {
+			return written, nil
+		}
+		if readErr != nil {
+			return written, readErr
+		}
+	}
+}

backend/internal/features/storages/models/nas/model.go

@@ -1,6 +1,7 @@
 package nas_storage
 
 import (
+	"context"
 	"crypto/tls"
 	"errors"
 	"fmt"
@@ -16,6 +17,13 @@ import (
 	"github.com/hirochachacha/go-smb2"
 )
 
+const (
+	// Chunk size for NAS uploads - 16MB provides good balance between
+	// memory usage and upload efficiency. This creates backpressure to pg_dump
+	// by only reading one chunk at a time and waiting for NAS to confirm receipt.
+	nasChunkSize = 16 * 1024 * 1024
+)
+
 type NASStorage struct {
 	StorageID uuid.UUID `json:"storageId" gorm:"primaryKey;type:uuid;column:storage_id"`
 	Host      string    `json:"host"      gorm:"not null;type:text;column:host"`
@@ -33,14 +41,21 @@ func (n *NASStorage) TableName() string {
 }
 
 func (n *NASStorage) SaveFile(
+	ctx context.Context,
 	encryptor encryption.FieldEncryptor,
 	logger *slog.Logger,
 	fileID uuid.UUID,
 	file io.Reader,
 ) error {
+	select {
+	case <-ctx.Done():
+		return ctx.Err()
+	default:
+	}
+
 	logger.Info("Starting to save file to NAS storage", "fileId", fileID.String(), "host", n.Host)
 
-	session, err := n.createSession(encryptor)
+	session, err := n.createSessionWithContext(ctx, encryptor)
 	if err != nil {
 		logger.Error("Failed to create NAS session", "fileId", fileID.String(), "error", err)
 		return fmt.Errorf("failed to create NAS session: %w", err)
@@ -121,7 +136,7 @@ func (n *NASStorage) SaveFile(
 	}()
 
 	logger.Debug("Copying file data to NAS", "fileId", fileID.String())
-	_, err = io.Copy(nasFile, file)
+	_, err = copyWithContext(ctx, nasFile, file)
 	if err != nil {
 		logger.Error("Failed to write file to NAS", "fileId", fileID.String(), "error", err)
 		return fmt.Errorf("failed to write file to NAS: %w", err)
@@ -290,20 +305,24 @@ func (n *NASStorage) Update(incoming *NASStorage) {
 }
 
 func (n *NASStorage) createSession(encryptor encryption.FieldEncryptor) (*smb2.Session, error) {
-	// Create connection with timeout
-	conn, err := n.createConnection()
+	return n.createSessionWithContext(context.Background(), encryptor)
+}
+
+func (n *NASStorage) createSessionWithContext(
+	ctx context.Context,
+	encryptor encryption.FieldEncryptor,
+) (*smb2.Session, error) {
+	conn, err := n.createConnectionWithContext(ctx)
 	if err != nil {
 		return nil, err
 	}
 
-	// Decrypt password before use
 	password, err := encryptor.Decrypt(n.StorageID, n.Password)
 	if err != nil {
 		_ = conn.Close()
 		return nil, fmt.Errorf("failed to decrypt NAS password: %w", err)
 	}
 
-	// Create SMB2 dialer
 	d := &smb2.Dialer{
 		Initiator: &smb2.NTLMInitiator{
 			User:     n.Username,
@@ -312,7 +331,6 @@ func (n *NASStorage) createSession(encryptor encryption.FieldEncryptor) (*smb2.S
 		},
 	}
 
-	// Create session
 	session, err := d.Dial(conn)
 	if err != nil {
 		_ = conn.Close()
@@ -322,34 +340,30 @@ func (n *NASStorage) createSession(encryptor encryption.FieldEncryptor) (*smb2.S
 	return session, nil
 }
 
-func (n *NASStorage) createConnection() (net.Conn, error) {
+func (n *NASStorage) createConnectionWithContext(ctx context.Context) (net.Conn, error) {
 	address := net.JoinHostPort(n.Host, fmt.Sprintf("%d", n.Port))
 
-	// Create connection with timeout
 	dialer := &net.Dialer{
-		Timeout: 10 * time.Second,
+		Timeout: 30 * time.Second,
 	}
 
 	if n.UseSSL {
-		// Use TLS connection
 		tlsConfig := &tls.Config{
 			ServerName:         n.Host,
-			InsecureSkipVerify: false, // Change to true if you want to skip cert verification
+			InsecureSkipVerify: false,
 		}
-
 		conn, err := tls.DialWithDialer(dialer, "tcp", address, tlsConfig)
 		if err != nil {
 			return nil, fmt.Errorf("failed to create SSL connection to %s: %w", address, err)
 		}
 		return conn, nil
-	} else {
-		// Use regular TCP connection
-		conn, err := dialer.Dial("tcp", address)
-		if err != nil {
-			return nil, fmt.Errorf("failed to create connection to %s: %w", address, err)
-		}
-		return conn, nil
 	}
+
+	conn, err := dialer.DialContext(ctx, "tcp", address)
+	if err != nil {
+		return nil, fmt.Errorf("failed to create connection to %s: %w", address, err)
+	}
+	return conn, nil
 }
 
 func (n *NASStorage) ensureDirectory(fs *smb2.Share, path string) error {
@@ -444,3 +458,71 @@ func (r *nasFileReader) Close() error {
 
 	return nil
 }
+
+type writeResult struct {
+	bytesWritten int
+	writeErr     error
+}
+
+func copyWithContext(ctx context.Context, dst io.Writer, src io.Reader) (int64, error) {
+	buf := make([]byte, nasChunkSize)
+	var written int64
+
+	for {
+		select {
+		case <-ctx.Done():
+			return written, ctx.Err()
+		default:
+		}
+
+		nr, readErr := io.ReadFull(src, buf)
+
+		if nr == 0 && readErr == io.EOF {
+			break
+		}
+
+		if readErr != nil && readErr != io.EOF && readErr != io.ErrUnexpectedEOF {
+			return written, readErr
+		}
+
+		writeResultCh := make(chan writeResult, 1)
+		go func() {
+			nw, writeErr := dst.Write(buf[0:nr])
+			writeResultCh <- writeResult{nw, writeErr}
+		}()
+
+		var nw int
+		var writeErr error
+
+		select {
+		case <-ctx.Done():
+			return written, ctx.Err()
+		case result := <-writeResultCh:
+			nw = result.bytesWritten
+			writeErr = result.writeErr
+		}
+
+		if nw < 0 || nr < nw {
+			nw = 0
+			if writeErr == nil {
+				writeErr = errors.New("invalid write result")
+			}
+		}
+
+		if writeErr != nil {
+			return written, writeErr
+		}
+
+		if nr != nw {
+			return written, io.ErrShortWrite
+		}
+
+		written += int64(nw)
+
+		if readErr == io.EOF || readErr == io.ErrUnexpectedEOF {
+			break
+		}
+	}
+
+	return written, nil
+}

backend/internal/features/storages/models/s3/model.go

@@ -3,10 +3,13 @@ package s3_storage
 import (
 	"bytes"
 	"context"
+	"crypto/tls"
 	"errors"
 	"fmt"
 	"io"
 	"log/slog"
+	"net"
+	"net/http"
 	"postgresus-backend/internal/util/encryption"
 	"strings"
 	"time"
@@ -16,6 +19,18 @@ import (
 	"github.com/minio/minio-go/v7/pkg/credentials"
 )
 
+const (
+	s3ConnectTimeout      = 30 * time.Second
+	s3ResponseTimeout     = 30 * time.Second
+	s3IdleConnTimeout     = 90 * time.Second
+	s3TLSHandshakeTimeout = 30 * time.Second
+
+	// Chunk size for multipart uploads - 16MB provides good balance between
+	// memory usage and upload efficiency. This creates backpressure to pg_dump
+	// by only reading one chunk at a time and waiting for S3 to confirm receipt.
+	multipartChunkSize = 16 * 1024 * 1024
+)
+
 type S3Storage struct {
 	StorageID   uuid.UUID `json:"storageId"   gorm:"primaryKey;type:uuid;column:storage_id"`
 	S3Bucket    string    `json:"s3Bucket"    gorm:"not null;type:text;column:s3_bucket"`
@@ -26,6 +41,7 @@ type S3Storage struct {
 
 	S3Prefix                string `json:"s3Prefix"                gorm:"type:text;column:s3_prefix"`
 	S3UseVirtualHostedStyle bool   `json:"s3UseVirtualHostedStyle" gorm:"default:false;column:s3_use_virtual_hosted_style"`
+	SkipTLSVerify           bool   `json:"skipTLSVerify"           gorm:"default:false;column:skip_tls_verify"`
 }
 
 func (s *S3Storage) TableName() string {
@@ -33,29 +49,123 @@ func (s *S3Storage) TableName() string {
 }
 
 func (s *S3Storage) SaveFile(
+	ctx context.Context,
 	encryptor encryption.FieldEncryptor,
 	logger *slog.Logger,
 	fileID uuid.UUID,
 	file io.Reader,
 ) error {
-	client, err := s.getClient(encryptor)
+	select {
+	case <-ctx.Done():
+		return fmt.Errorf("upload cancelled before start: %w", ctx.Err())
+	default:
+	}
+
+	coreClient, err := s.getCoreClient(encryptor)
 	if err != nil {
 		return err
 	}
 
 	objectKey := s.buildObjectKey(fileID.String())
 
-	// Upload the file using MinIO client with streaming (size = -1 for unknown size)
-	_, err = client.PutObject(
-		context.TODO(),
+	uploadID, err := coreClient.NewMultipartUpload(
+		ctx,
 		s.S3Bucket,
 		objectKey,
-		file,
-		-1,
 		minio.PutObjectOptions{},
 	)
 	if err != nil {
-		return fmt.Errorf("failed to upload file to S3: %w", err)
+		return fmt.Errorf("failed to initiate multipart upload: %w", err)
+	}
+
+	var parts []minio.CompletePart
+	partNumber := 1
+	buf := make([]byte, multipartChunkSize)
+
+	for {
+		select {
+		case <-ctx.Done():
+			_ = coreClient.AbortMultipartUpload(ctx, s.S3Bucket, objectKey, uploadID)
+			return fmt.Errorf("upload cancelled: %w", ctx.Err())
+		default:
+		}
+
+		n, readErr := io.ReadFull(file, buf)
+
+		if n == 0 && readErr == io.EOF {
+			break
+		}
+
+		if readErr != nil && readErr != io.EOF && readErr != io.ErrUnexpectedEOF {
+			_ = coreClient.AbortMultipartUpload(ctx, s.S3Bucket, objectKey, uploadID)
+			return fmt.Errorf("read error: %w", readErr)
+		}
+
+		part, err := coreClient.PutObjectPart(
+			ctx,
+			s.S3Bucket,
+			objectKey,
+			uploadID,
+			partNumber,
+			bytes.NewReader(buf[:n]),
+			int64(n),
+			minio.PutObjectPartOptions{},
+		)
+		if err != nil {
+			_ = coreClient.AbortMultipartUpload(ctx, s.S3Bucket, objectKey, uploadID)
+
+			select {
+			case <-ctx.Done():
+				return fmt.Errorf("upload cancelled: %w", ctx.Err())
+			default:
+				return fmt.Errorf("failed to upload part %d: %w", partNumber, err)
+			}
+		}
+
+		parts = append(parts, minio.CompletePart{
+			PartNumber: partNumber,
+			ETag:       part.ETag,
+		})
+
+		partNumber++
+
+		if readErr == io.EOF || readErr == io.ErrUnexpectedEOF {
+			break
+		}
+	}
+
+	if len(parts) == 0 {
+		_ = coreClient.AbortMultipartUpload(ctx, s.S3Bucket, objectKey, uploadID)
+
+		client, err := s.getClient(encryptor)
+		if err != nil {
+			return err
+		}
+		_, err = client.PutObject(
+			ctx,
+			s.S3Bucket,
+			objectKey,
+			bytes.NewReader([]byte{}),
+			0,
+			minio.PutObjectOptions{},
+		)
+		if err != nil {
+			return fmt.Errorf("failed to upload empty file: %w", err)
+		}
+		return nil
+	}
+
+	_, err = coreClient.CompleteMultipartUpload(
+		ctx,
+		s.S3Bucket,
+		objectKey,
+		uploadID,
+		parts,
+		minio.PutObjectOptions{},
+	)
+	if err != nil {
+		_ = coreClient.AbortMultipartUpload(ctx, s.S3Bucket, objectKey, uploadID)
+		return fmt.Errorf("failed to complete multipart upload: %w", err)
 	}
 
 	return nil
@@ -223,6 +333,7 @@ func (s *S3Storage) Update(incoming *S3Storage) {
 	s.S3Region = incoming.S3Region
 	s.S3Endpoint = incoming.S3Endpoint
 	s.S3UseVirtualHostedStyle = incoming.S3UseVirtualHostedStyle
+	s.SkipTLSVerify = incoming.SkipTLSVerify
 
 	if incoming.S3AccessKey != "" {
 		s.S3AccessKey = incoming.S3AccessKey
@@ -252,8 +363,54 @@ func (s *S3Storage) buildObjectKey(fileName string) string {
 }
 
 func (s *S3Storage) getClient(encryptor encryption.FieldEncryptor) (*minio.Client, error) {
-	endpoint := s.S3Endpoint
-	useSSL := true
+	endpoint, useSSL, accessKey, secretKey, bucketLookup, transport, err := s.getClientParams(
+		encryptor,
+	)
+	if err != nil {
+		return nil, err
+	}
+
+	minioClient, err := minio.New(endpoint, &minio.Options{
+		Creds:        credentials.NewStaticV4(accessKey, secretKey, ""),
+		Secure:       useSSL,
+		Region:       s.S3Region,
+		BucketLookup: bucketLookup,
+		Transport:    transport,
+	})
+	if err != nil {
+		return nil, fmt.Errorf("failed to initialize MinIO client: %w", err)
+	}
+
+	return minioClient, nil
+}
+
+func (s *S3Storage) getCoreClient(encryptor encryption.FieldEncryptor) (*minio.Core, error) {
+	endpoint, useSSL, accessKey, secretKey, bucketLookup, transport, err := s.getClientParams(
+		encryptor,
+	)
+	if err != nil {
+		return nil, err
+	}
+
+	coreClient, err := minio.NewCore(endpoint, &minio.Options{
+		Creds:        credentials.NewStaticV4(accessKey, secretKey, ""),
+		Secure:       useSSL,
+		Region:       s.S3Region,
+		BucketLookup: bucketLookup,
+		Transport:    transport,
+	})
+	if err != nil {
+		return nil, fmt.Errorf("failed to initialize MinIO Core client: %w", err)
+	}
+
+	return coreClient, nil
+}
+
+func (s *S3Storage) getClientParams(
+	encryptor encryption.FieldEncryptor,
+) (endpoint string, useSSL bool, accessKey string, secretKey string, bucketLookup minio.BucketLookupType, transport *http.Transport, err error) {
+	endpoint = s.S3Endpoint
+	useSSL = true
 
 	if strings.HasPrefix(endpoint, "http://") {
 		useSSL = false
@@ -262,38 +419,36 @@ func (s *S3Storage) getClient(encryptor encryption.FieldEncryptor) (*minio.Clien
 		endpoint = strings.TrimPrefix(endpoint, "https://")
 	}
 
-	// If no endpoint is provided, use the AWS S3 endpoint for the region
 	if endpoint == "" {
 		endpoint = fmt.Sprintf("s3.%s.amazonaws.com", s.S3Region)
 	}
 
-	// Decrypt credentials before use
-	accessKey, err := encryptor.Decrypt(s.StorageID, s.S3AccessKey)
+	accessKey, err = encryptor.Decrypt(s.StorageID, s.S3AccessKey)
 	if err != nil {
-		return nil, fmt.Errorf("failed to decrypt S3 access key: %w", err)
+		return "", false, "", "", 0, nil, fmt.Errorf("failed to decrypt S3 access key: %w", err)
 	}
 
-	secretKey, err := encryptor.Decrypt(s.StorageID, s.S3SecretKey)
+	secretKey, err = encryptor.Decrypt(s.StorageID, s.S3SecretKey)
 	if err != nil {
-		return nil, fmt.Errorf("failed to decrypt S3 secret key: %w", err)
+		return "", false, "", "", 0, nil, fmt.Errorf("failed to decrypt S3 secret key: %w", err)
 	}
 
-	// Configure bucket lookup strategy
-	bucketLookup := minio.BucketLookupAuto
+	bucketLookup = minio.BucketLookupAuto
 	if s.S3UseVirtualHostedStyle {
 		bucketLookup = minio.BucketLookupDNS
 	}
 
-	// Initialize the MinIO client
-	minioClient, err := minio.New(endpoint, &minio.Options{
-		Creds:        credentials.NewStaticV4(accessKey, secretKey, ""),
-		Secure:       useSSL,
-		Region:       s.S3Region,
-		BucketLookup: bucketLookup,
-	})
-	if err != nil {
-		return nil, fmt.Errorf("failed to initialize MinIO client: %w", err)
+	transport = &http.Transport{
+		DialContext: (&net.Dialer{
+			Timeout: s3ConnectTimeout,
+		}).DialContext,
+		TLSHandshakeTimeout:   s3TLSHandshakeTimeout,
+		ResponseHeaderTimeout: s3ResponseTimeout,
+		IdleConnTimeout:       s3IdleConnTimeout,
+		TLSClientConfig: &tls.Config{
+			InsecureSkipVerify: s.SkipTLSVerify,
+		},
 	}
 
-	return minioClient, nil
+	return endpoint, useSSL, accessKey, secretKey, bucketLookup, transport, nil
 }

backend/internal/features/tests/postgresql_backup_restore_test.go

@@ -30,7 +30,6 @@ import (
 	workspaces_controllers "postgresus-backend/internal/features/workspaces/controllers"
 	workspaces_testing "postgresus-backend/internal/features/workspaces/testing"
 	test_utils "postgresus-backend/internal/util/testing"
-	"postgresus-backend/internal/util/tools"
 )
 
 const createAndFillTableQuery = `
@@ -114,6 +113,382 @@ func Test_BackupAndRestorePostgresqlWithEncryption_RestoreIsSuccessful(t *testin
 	}
 }
 
+func Test_BackupAndRestoreSupabase_PublicSchemaOnly_RestoreIsSuccessful(t *testing.T) {
+	env := config.GetEnv()
+
+	if env.TestSupabaseHost == "" {
+		t.Skip("Skipping Supabase test: missing environment variables")
+	}
+
+	portInt, err := strconv.Atoi(env.TestSupabasePort)
+	assert.NoError(t, err)
+
+	dsn := fmt.Sprintf(
+		"host=%s port=%d user=%s password=%s dbname=%s sslmode=require",
+		env.TestSupabaseHost,
+		portInt,
+		env.TestSupabaseUsername,
+		env.TestSupabasePassword,
+		env.TestSupabaseDatabase,
+	)
+
+	supabaseDB, err := sqlx.Connect("postgres", dsn)
+	assert.NoError(t, err)
+	defer supabaseDB.Close()
+
+	tableName := fmt.Sprintf("backup_test_%s", uuid.New().String()[:8])
+	createTableQuery := fmt.Sprintf(`
+		DROP TABLE IF EXISTS public.%s;
+		CREATE TABLE public.%s (
+			id SERIAL PRIMARY KEY,
+			name TEXT NOT NULL,
+			value INTEGER NOT NULL,
+			created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+		);
+		INSERT INTO public.%s (name, value) VALUES
+			('test1', 100),
+			('test2', 200),
+			('test3', 300);
+	`, tableName, tableName, tableName)
+
+	_, err = supabaseDB.Exec(createTableQuery)
+	assert.NoError(t, err)
+
+	defer func() {
+		_, _ = supabaseDB.Exec(fmt.Sprintf(`DROP TABLE IF EXISTS public.%s`, tableName))
+	}()
+
+	router := createTestRouter()
+	user := users_testing.CreateTestUser(users_enums.UserRoleMember)
+	workspace := workspaces_testing.CreateTestWorkspace("Supabase Test Workspace", user, router)
+
+	storage := storages.CreateTestStorage(workspace.ID)
+
+	database := createSupabaseDatabaseViaAPI(
+		t, router, "Supabase Test Database", workspace.ID,
+		env.TestSupabaseHost, portInt,
+		env.TestSupabaseUsername, env.TestSupabasePassword, env.TestSupabaseDatabase,
+		[]string{"public"},
+		user.Token,
+	)
+
+	enableBackupsViaAPI(
+		t, router, database.ID, storage.ID,
+		backups_config.BackupEncryptionNone, user.Token,
+	)
+
+	createBackupViaAPI(t, router, database.ID, user.Token)
+
+	backup := waitForBackupCompletion(t, router, database.ID, user.Token, 5*time.Minute)
+	assert.Equal(t, backups.BackupStatusCompleted, backup.Status)
+
+	_, err = supabaseDB.Exec(fmt.Sprintf(`DELETE FROM public.%s`, tableName))
+	assert.NoError(t, err)
+
+	var countAfterDelete int
+	err = supabaseDB.Get(
+		&countAfterDelete,
+		fmt.Sprintf(`SELECT COUNT(*) FROM public.%s`, tableName),
+	)
+	assert.NoError(t, err)
+	assert.Equal(t, 0, countAfterDelete, "Table should be empty after delete")
+
+	createSupabaseRestoreViaAPI(
+		t, router, backup.ID,
+		env.TestSupabaseHost, portInt,
+		env.TestSupabaseUsername, env.TestSupabasePassword, env.TestSupabaseDatabase,
+		user.Token,
+	)
+
+	restore := waitForRestoreCompletion(t, router, backup.ID, user.Token, 5*time.Minute)
+	assert.Equal(t, restores_enums.RestoreStatusCompleted, restore.Status)
+
+	var countAfterRestore int
+	err = supabaseDB.Get(
+		&countAfterRestore,
+		fmt.Sprintf(`SELECT COUNT(*) FROM public.%s`, tableName),
+	)
+	assert.NoError(t, err)
+	assert.Equal(t, 3, countAfterRestore, "Table should have 3 rows after restore")
+
+	var restoredData []TestDataItem
+	err = supabaseDB.Select(
+		&restoredData,
+		fmt.Sprintf(`SELECT id, name, value, created_at FROM public.%s ORDER BY id`, tableName),
+	)
+	assert.NoError(t, err)
+	assert.Len(t, restoredData, 3)
+	assert.Equal(t, "test1", restoredData[0].Name)
+	assert.Equal(t, 100, restoredData[0].Value)
+	assert.Equal(t, "test2", restoredData[1].Name)
+	assert.Equal(t, 200, restoredData[1].Value)
+	assert.Equal(t, "test3", restoredData[2].Name)
+	assert.Equal(t, 300, restoredData[2].Value)
+
+	err = os.Remove(filepath.Join(config.GetEnv().DataFolder, backup.ID.String()))
+	if err != nil {
+		t.Logf("Warning: Failed to delete backup file: %v", err)
+	}
+
+	test_utils.MakeDeleteRequest(
+		t,
+		router,
+		"/api/v1/databases/"+database.ID.String(),
+		"Bearer "+user.Token,
+		http.StatusNoContent,
+	)
+	storages.RemoveTestStorage(storage.ID)
+	workspaces_testing.RemoveTestWorkspace(workspace, router)
+}
+
+func Test_BackupPostgresql_SchemaSelection_AllSchemasWhenNoneSpecified(t *testing.T) {
+	env := config.GetEnv()
+
+	container, err := connectToPostgresContainer("16", env.TestPostgres16Port)
+	assert.NoError(t, err)
+	defer container.DB.Close()
+
+	_, err = container.DB.Exec(`
+		DROP SCHEMA IF EXISTS schema_a CASCADE;
+		DROP SCHEMA IF EXISTS schema_b CASCADE;
+		CREATE SCHEMA schema_a;
+		CREATE SCHEMA schema_b;
+		
+		CREATE TABLE public.public_table (id SERIAL PRIMARY KEY, data TEXT);
+		CREATE TABLE schema_a.table_a (id SERIAL PRIMARY KEY, data TEXT);
+		CREATE TABLE schema_b.table_b (id SERIAL PRIMARY KEY, data TEXT);
+		
+		INSERT INTO public.public_table (data) VALUES ('public_data');
+		INSERT INTO schema_a.table_a (data) VALUES ('schema_a_data');
+		INSERT INTO schema_b.table_b (data) VALUES ('schema_b_data');
+	`)
+	assert.NoError(t, err)
+
+	defer func() {
+		_, _ = container.DB.Exec(`
+			DROP TABLE IF EXISTS public.public_table;
+			DROP SCHEMA IF EXISTS schema_a CASCADE;
+			DROP SCHEMA IF EXISTS schema_b CASCADE;
+		`)
+	}()
+
+	router := createTestRouter()
+	user := users_testing.CreateTestUser(users_enums.UserRoleMember)
+	workspace := workspaces_testing.CreateTestWorkspace("Schema Test Workspace", user, router)
+
+	storage := storages.CreateTestStorage(workspace.ID)
+
+	database := createDatabaseWithSchemasViaAPI(
+		t, router, "All Schemas Database", workspace.ID,
+		container.Host, container.Port,
+		container.Username, container.Password, container.Database,
+		nil,
+		user.Token,
+	)
+
+	enableBackupsViaAPI(
+		t, router, database.ID, storage.ID,
+		backups_config.BackupEncryptionNone, user.Token,
+	)
+
+	createBackupViaAPI(t, router, database.ID, user.Token)
+
+	backup := waitForBackupCompletion(t, router, database.ID, user.Token, 5*time.Minute)
+	assert.Equal(t, backups.BackupStatusCompleted, backup.Status)
+
+	newDBName := "restored_all_schemas"
+	_, err = container.DB.Exec(fmt.Sprintf("DROP DATABASE IF EXISTS %s;", newDBName))
+	assert.NoError(t, err)
+
+	_, err = container.DB.Exec(fmt.Sprintf("CREATE DATABASE %s;", newDBName))
+	assert.NoError(t, err)
+
+	newDSN := fmt.Sprintf("host=%s port=%d user=%s password=%s dbname=%s sslmode=disable",
+		container.Host, container.Port, container.Username, container.Password, newDBName)
+	newDB, err := sqlx.Connect("postgres", newDSN)
+	assert.NoError(t, err)
+	defer newDB.Close()
+
+	createRestoreViaAPI(
+		t, router, backup.ID,
+		container.Host, container.Port,
+		container.Username, container.Password, newDBName,
+		user.Token,
+	)
+
+	restore := waitForRestoreCompletion(t, router, backup.ID, user.Token, 5*time.Minute)
+	assert.Equal(t, restores_enums.RestoreStatusCompleted, restore.Status)
+
+	var publicTableExists bool
+	err = newDB.Get(&publicTableExists, `
+		SELECT EXISTS (
+			SELECT FROM information_schema.tables 
+			WHERE table_schema = 'public' AND table_name = 'public_table'
+		)
+	`)
+	assert.NoError(t, err)
+	assert.True(t, publicTableExists, "public.public_table should exist in restored database")
+
+	var schemaATableExists bool
+	err = newDB.Get(&schemaATableExists, `
+		SELECT EXISTS (
+			SELECT FROM information_schema.tables 
+			WHERE table_schema = 'schema_a' AND table_name = 'table_a'
+		)
+	`)
+	assert.NoError(t, err)
+	assert.True(t, schemaATableExists, "schema_a.table_a should exist in restored database")
+
+	var schemaBTableExists bool
+	err = newDB.Get(&schemaBTableExists, `
+		SELECT EXISTS (
+			SELECT FROM information_schema.tables 
+			WHERE table_schema = 'schema_b' AND table_name = 'table_b'
+		)
+	`)
+	assert.NoError(t, err)
+	assert.True(t, schemaBTableExists, "schema_b.table_b should exist in restored database")
+
+	err = os.Remove(filepath.Join(config.GetEnv().DataFolder, backup.ID.String()))
+	if err != nil {
+		t.Logf("Warning: Failed to delete backup file: %v", err)
+	}
+
+	test_utils.MakeDeleteRequest(
+		t,
+		router,
+		"/api/v1/databases/"+database.ID.String(),
+		"Bearer "+user.Token,
+		http.StatusNoContent,
+	)
+	storages.RemoveTestStorage(storage.ID)
+	workspaces_testing.RemoveTestWorkspace(workspace, router)
+}
+
+func Test_BackupPostgresql_SchemaSelection_OnlySpecifiedSchemas(t *testing.T) {
+	env := config.GetEnv()
+
+	container, err := connectToPostgresContainer("16", env.TestPostgres16Port)
+	assert.NoError(t, err)
+	defer container.DB.Close()
+
+	_, err = container.DB.Exec(`
+		DROP SCHEMA IF EXISTS schema_a CASCADE;
+		DROP SCHEMA IF EXISTS schema_b CASCADE;
+		CREATE SCHEMA schema_a;
+		CREATE SCHEMA schema_b;
+		
+		CREATE TABLE public.public_table (id SERIAL PRIMARY KEY, data TEXT);
+		CREATE TABLE schema_a.table_a (id SERIAL PRIMARY KEY, data TEXT);
+		CREATE TABLE schema_b.table_b (id SERIAL PRIMARY KEY, data TEXT);
+		
+		INSERT INTO public.public_table (data) VALUES ('public_data');
+		INSERT INTO schema_a.table_a (data) VALUES ('schema_a_data');
+		INSERT INTO schema_b.table_b (data) VALUES ('schema_b_data');
+	`)
+	assert.NoError(t, err)
+
+	defer func() {
+		_, _ = container.DB.Exec(`
+			DROP TABLE IF EXISTS public.public_table;
+			DROP SCHEMA IF EXISTS schema_a CASCADE;
+			DROP SCHEMA IF EXISTS schema_b CASCADE;
+		`)
+	}()
+
+	router := createTestRouter()
+	user := users_testing.CreateTestUser(users_enums.UserRoleMember)
+	workspace := workspaces_testing.CreateTestWorkspace("Schema Test Workspace", user, router)
+
+	storage := storages.CreateTestStorage(workspace.ID)
+
+	database := createDatabaseWithSchemasViaAPI(
+		t, router, "Specific Schemas Database", workspace.ID,
+		container.Host, container.Port,
+		container.Username, container.Password, container.Database,
+		[]string{"public", "schema_a"},
+		user.Token,
+	)
+
+	enableBackupsViaAPI(
+		t, router, database.ID, storage.ID,
+		backups_config.BackupEncryptionNone, user.Token,
+	)
+
+	createBackupViaAPI(t, router, database.ID, user.Token)
+
+	backup := waitForBackupCompletion(t, router, database.ID, user.Token, 5*time.Minute)
+	assert.Equal(t, backups.BackupStatusCompleted, backup.Status)
+
+	newDBName := "restored_specific_schemas"
+	_, err = container.DB.Exec(fmt.Sprintf("DROP DATABASE IF EXISTS %s;", newDBName))
+	assert.NoError(t, err)
+
+	_, err = container.DB.Exec(fmt.Sprintf("CREATE DATABASE %s;", newDBName))
+	assert.NoError(t, err)
+
+	newDSN := fmt.Sprintf("host=%s port=%d user=%s password=%s dbname=%s sslmode=disable",
+		container.Host, container.Port, container.Username, container.Password, newDBName)
+	newDB, err := sqlx.Connect("postgres", newDSN)
+	assert.NoError(t, err)
+	defer newDB.Close()
+
+	createRestoreViaAPI(
+		t, router, backup.ID,
+		container.Host, container.Port,
+		container.Username, container.Password, newDBName,
+		user.Token,
+	)
+
+	restore := waitForRestoreCompletion(t, router, backup.ID, user.Token, 5*time.Minute)
+	assert.Equal(t, restores_enums.RestoreStatusCompleted, restore.Status)
+
+	var publicTableExists bool
+	err = newDB.Get(&publicTableExists, `
+		SELECT EXISTS (
+			SELECT FROM information_schema.tables 
+			WHERE table_schema = 'public' AND table_name = 'public_table'
+		)
+	`)
+	assert.NoError(t, err)
+	assert.True(t, publicTableExists, "public.public_table should exist (was included)")
+
+	var schemaATableExists bool
+	err = newDB.Get(&schemaATableExists, `
+		SELECT EXISTS (
+			SELECT FROM information_schema.tables 
+			WHERE table_schema = 'schema_a' AND table_name = 'table_a'
+		)
+	`)
+	assert.NoError(t, err)
+	assert.True(t, schemaATableExists, "schema_a.table_a should exist (was included)")
+
+	var schemaBTableExists bool
+	err = newDB.Get(&schemaBTableExists, `
+		SELECT EXISTS (
+			SELECT FROM information_schema.tables 
+			WHERE table_schema = 'schema_b' AND table_name = 'table_b'
+		)
+	`)
+	assert.NoError(t, err)
+	assert.False(t, schemaBTableExists, "schema_b.table_b should NOT exist (was excluded)")
+
+	err = os.Remove(filepath.Join(config.GetEnv().DataFolder, backup.ID.String()))
+	if err != nil {
+		t.Logf("Warning: Failed to delete backup file: %v", err)
+	}
+
+	test_utils.MakeDeleteRequest(
+		t,
+		router,
+		"/api/v1/databases/"+database.ID.String(),
+		"Bearer "+user.Token,
+		http.StatusNoContent,
+	)
+	storages.RemoveTestStorage(storage.ID)
+	workspaces_testing.RemoveTestWorkspace(workspace, router)
+}
+
 func testBackupRestoreForVersion(t *testing.T, pgVersion string, port string) {
 	container, err := connectToPostgresContainer(pgVersion, port)
 	assert.NoError(t, err)
@@ -132,10 +507,9 @@ func testBackupRestoreForVersion(t *testing.T, pgVersion string, port string) {
 
 	storage := storages.CreateTestStorage(workspace.ID)
 
-	pgVersionEnum := tools.GetPostgresqlVersionEnum(pgVersion)
 	database := createDatabaseViaAPI(
 		t, router, "Test Database", workspace.ID,
-		pgVersionEnum, container.Host, container.Port,
+		container.Host, container.Port,
 		container.Username, container.Password, container.Database,
 		user.Token,
 	)
@@ -164,7 +538,7 @@ func testBackupRestoreForVersion(t *testing.T, pgVersion string, port string) {
 	defer newDB.Close()
 
 	createRestoreViaAPI(
-		t, router, backup.ID, pgVersionEnum,
+		t, router, backup.ID,
 		container.Host, container.Port,
 		container.Username, container.Password, newDBName,
 		user.Token,
@@ -217,10 +591,9 @@ func testBackupRestoreWithEncryptionForVersion(t *testing.T, pgVersion string, p
 
 	storage := storages.CreateTestStorage(workspace.ID)
 
-	pgVersionEnum := tools.GetPostgresqlVersionEnum(pgVersion)
 	database := createDatabaseViaAPI(
 		t, router, "Test Database", workspace.ID,
-		pgVersionEnum, container.Host, container.Port,
+		container.Host, container.Port,
 		container.Username, container.Password, container.Database,
 		user.Token,
 	)
@@ -250,7 +623,7 @@ func testBackupRestoreWithEncryptionForVersion(t *testing.T, pgVersion string, p
 	defer newDB.Close()
 
 	createRestoreViaAPI(
-		t, router, backup.ID, pgVersionEnum,
+		t, router, backup.ID,
 		container.Host, container.Port,
 		container.Username, container.Password, newDBName,
 		user.Token,
@@ -379,7 +752,6 @@ func createDatabaseViaAPI(
 	router *gin.Engine,
 	name string,
 	workspaceID uuid.UUID,
-	pgVersion tools.PostgresqlVersion,
 	host string,
 	port int,
 	username string,
@@ -392,7 +764,6 @@ func createDatabaseViaAPI(
 		WorkspaceID: &workspaceID,
 		Type:        databases.DatabaseTypePostgres,
 		Postgresql: &pgtypes.PostgresqlDatabase{
-			Version:  pgVersion,
 			Host:     host,
 			Port:     port,
 			Username: username,
@@ -475,7 +846,6 @@ func createRestoreViaAPI(
 	t *testing.T,
 	router *gin.Engine,
 	backupID uuid.UUID,
-	pgVersion tools.PostgresqlVersion,
 	host string,
 	port int,
 	username string,
@@ -485,7 +855,6 @@ func createRestoreViaAPI(
 ) {
 	request := restores.RestoreBackupRequest{
 		PostgresqlDatabase: &pgtypes.PostgresqlDatabase{
-			Version:  pgVersion,
 			Host:     host,
 			Port:     port,
 			Username: username,
@@ -504,6 +873,141 @@ func createRestoreViaAPI(
 	)
 }
 
+func createDatabaseWithSchemasViaAPI(
+	t *testing.T,
+	router *gin.Engine,
+	name string,
+	workspaceID uuid.UUID,
+	host string,
+	port int,
+	username string,
+	password string,
+	database string,
+	includeSchemas []string,
+	token string,
+) *databases.Database {
+	request := databases.Database{
+		Name:        name,
+		WorkspaceID: &workspaceID,
+		Type:        databases.DatabaseTypePostgres,
+		Postgresql: &pgtypes.PostgresqlDatabase{
+			Host:           host,
+			Port:           port,
+			Username:       username,
+			Password:       password,
+			Database:       &database,
+			IncludeSchemas: includeSchemas,
+		},
+	}
+
+	w := workspaces_testing.MakeAPIRequest(
+		router,
+		"POST",
+		"/api/v1/databases/create",
+		"Bearer "+token,
+		request,
+	)
+
+	if w.Code != http.StatusCreated {
+		t.Fatalf(
+			"Failed to create database with schemas. Status: %d, Body: %s",
+			w.Code,
+			w.Body.String(),
+		)
+	}
+
+	var createdDatabase databases.Database
+	if err := json.Unmarshal(w.Body.Bytes(), &createdDatabase); err != nil {
+		t.Fatalf("Failed to unmarshal database response: %v", err)
+	}
+
+	return &createdDatabase
+}
+
+func createSupabaseDatabaseViaAPI(
+	t *testing.T,
+	router *gin.Engine,
+	name string,
+	workspaceID uuid.UUID,
+	host string,
+	port int,
+	username string,
+	password string,
+	database string,
+	includeSchemas []string,
+	token string,
+) *databases.Database {
+	request := databases.Database{
+		Name:        name,
+		WorkspaceID: &workspaceID,
+		Type:        databases.DatabaseTypePostgres,
+		Postgresql: &pgtypes.PostgresqlDatabase{
+			Host:           host,
+			Port:           port,
+			Username:       username,
+			Password:       password,
+			Database:       &database,
+			IsHttps:        true,
+			IncludeSchemas: includeSchemas,
+		},
+	}
+
+	w := workspaces_testing.MakeAPIRequest(
+		router,
+		"POST",
+		"/api/v1/databases/create",
+		"Bearer "+token,
+		request,
+	)
+
+	if w.Code != http.StatusCreated {
+		t.Fatalf(
+			"Failed to create Supabase database. Status: %d, Body: %s",
+			w.Code,
+			w.Body.String(),
+		)
+	}
+
+	var createdDatabase databases.Database
+	if err := json.Unmarshal(w.Body.Bytes(), &createdDatabase); err != nil {
+		t.Fatalf("Failed to unmarshal database response: %v", err)
+	}
+
+	return &createdDatabase
+}
+
+func createSupabaseRestoreViaAPI(
+	t *testing.T,
+	router *gin.Engine,
+	backupID uuid.UUID,
+	host string,
+	port int,
+	username string,
+	password string,
+	database string,
+	token string,
+) {
+	request := restores.RestoreBackupRequest{
+		PostgresqlDatabase: &pgtypes.PostgresqlDatabase{
+			Host:     host,
+			Port:     port,
+			Username: username,
+			Password: password,
+			Database: &database,
+			IsHttps:  true,
+		},
+	}
+
+	test_utils.MakePostRequest(
+		t,
+		router,
+		fmt.Sprintf("/api/v1/restores/%s/restore", backupID.String()),
+		"Bearer "+token,
+		request,
+		http.StatusOK,
+	)
+}
+
 func verifyDataIntegrity(t *testing.T, originalDB *sqlx.DB, restoredDB *sqlx.DB) {
 	var originalData []TestDataItem
 	var restoredData []TestDataItem
@@ -550,7 +1054,6 @@ func connectToPostgresContainer(version string, port string) (*PostgresContainer
 		Username: username,
 		Password: password,
 		Database: dbName,
-		Version:  version,
 		DB:       db,
 	}, nil
 }

backend/internal/util/tools/postgresql.go

@@ -6,6 +6,7 @@ import (
 	"os"
 	"path/filepath"
 	"runtime"
+	"strings"
 
 	env_utils "postgresus-backend/internal/util/env"
 )
@@ -151,6 +152,24 @@ func VerifyPostgresesInstallation(
 	logger.Info("All PostgreSQL version-specific client tools verification completed successfully!")
 }
 
+// EscapePgpassField escapes special characters in a field value for .pgpass file format.
+// According to PostgreSQL documentation, the .pgpass file format requires:
+// - Backslash (\) must be escaped as \\
+// - Colon (:) must be escaped as \:
+// Additionally, newlines and carriage returns are removed to prevent format corruption.
+func EscapePgpassField(field string) string {
+	// Remove newlines and carriage returns that would break .pgpass format
+	field = strings.ReplaceAll(field, "\r", "")
+	field = strings.ReplaceAll(field, "\n", "")
+
+	// Escape backslashes first (order matters!)
+	// Then escape colons
+	field = strings.ReplaceAll(field, "\\", "\\\\")
+	field = strings.ReplaceAll(field, ":", "\\:")
+
+	return field
+}
+
 func getPostgresqlBasePath(
 	version PostgresqlVersion,
 	envMode env_utils.EnvMode,

backend/migrations/20251128120000_add_webhook_headers_and_body_template.sql

@@ -0,0 +1,18 @@
+-- +goose Up
+-- +goose StatementBegin
+
+ALTER TABLE webhook_notifiers
+    ADD COLUMN body_template TEXT,
+    ADD COLUMN headers       TEXT DEFAULT '[]';
+
+-- +goose StatementEnd
+
+-- +goose Down
+-- +goose StatementBegin
+
+ALTER TABLE webhook_notifiers
+    DROP COLUMN body_template,
+    DROP COLUMN headers;
+
+-- +goose StatementEnd
+

backend/migrations/20251211142507_add_include_schemas_to_postgresql_databases.sql

@@ -0,0 +1,11 @@
+-- +goose Up
+-- +goose StatementBegin
+ALTER TABLE postgresql_databases
+    ADD COLUMN include_schemas TEXT NOT NULL DEFAULT '';
+-- +goose StatementEnd
+
+-- +goose Down
+-- +goose StatementBegin
+ALTER TABLE postgresql_databases
+    DROP COLUMN include_schemas;
+-- +goose StatementEnd

backend/migrations/20251211164424_add_skip_tls_verify_to_s3.sql

@@ -0,0 +1,11 @@
+-- +goose Up
+-- +goose StatementBegin
+ALTER TABLE s3_storages
+    ADD COLUMN skip_tls_verify BOOLEAN NOT NULL DEFAULT FALSE;
+-- +goose StatementEnd
+
+-- +goose Down
+-- +goose StatementBegin
+ALTER TABLE s3_storages
+    DROP COLUMN skip_tls_verify;
+-- +goose StatementEnd

deploy/helm/.helmignore

@@ -0,0 +1,23 @@
+# Patterns to ignore when building packages.
+# This supports shell glob matching, relative path matching, and
+# negation (prefixed with !). Only one pattern per line.
+.DS_Store
+# Common VCS dirs
+.git/
+.gitignore
+.bzr/
+.bzrignore
+.hg/
+.hgignore
+.svn/
+# Common backup files
+*.swp
+*.bak
+*.tmp
+*.orig
+*~
+# Various IDEs
+.project
+.idea/
+*.tmproj
+.vscode/

deploy/helm/Chart.yaml

@@ -0,0 +1,22 @@
+apiVersion: v2
+name: postgresus
+description: A Helm chart for Postgresus - PostgreSQL backup and management system
+type: application
+version: 0.0.0
+appVersion: "latest"
+keywords:
+  - postgresql
+  - backup
+  - database
+  - restore
+home: https://github.com/RostislavDugin/postgresus
+
+sources:
+  - https://github.com/RostislavDugin/postgresus
+  - https://github.com/RostislavDugin/postgresus/tree/main/deploy/helm
+
+maintainers:
+  - name: Rostislav Dugin
+    url: https://github.com/RostislavDugin
+
+icon: https://raw.githubusercontent.com/RostislavDugin/postgresus/main/frontend/public/logo.svg

deploy/helm/README.md

@@ -0,0 +1,245 @@
+# Postgresus Helm Chart
+
+## Installation
+
+Install directly from the OCI registry (no need to clone the repository):
+
+```bash
+helm install postgresus oci://ghcr.io/rostislavdugin/charts/postgresus \
+  -n postgresus --create-namespace
+```
+
+The `-n postgresus --create-namespace` flags control which namespace the chart is installed into. You can use any namespace name you prefer.
+
+## Accessing Postgresus
+
+By default, the chart creates a ClusterIP service. Use port-forward to access:
+
+```bash
+kubectl port-forward svc/postgresus-service 4005:4005 -n postgresus
+```
+
+Then open `http://localhost:4005` in your browser.
+
+## Configuration
+
+### Main Parameters
+
+| Parameter          | Description        | Default Value               |
+| ------------------ | ------------------ | --------------------------- |
+| `image.repository` | Docker image       | `rostislavdugin/postgresus` |
+| `image.tag`        | Image tag          | `latest`                    |
+| `image.pullPolicy` | Image pull policy  | `Always`                    |
+| `replicaCount`     | Number of replicas | `1`                         |
+
+### Custom Root CA
+
+| Parameter      | Description                              | Default Value |
+| -------------- | ---------------------------------------- | ------------- |
+| `customRootCA` | Name of Secret containing CA certificate | `""`          |
+
+To trust a custom CA certificate (e.g., for internal services with self-signed certificates):
+
+1. Create a Secret with your CA certificate:
+
+```bash
+kubectl create secret generic my-root-ca \
+  --from-file=ca.crt=./path/to/ca-certificate.crt
+```
+
+2. Reference it in values:
+
+```yaml
+customRootCA: my-root-ca
+```
+
+The certificate will be mounted to `/etc/ssl/certs/custom-root-ca.crt` and the `SSL_CERT_FILE` environment variable will be set automatically.
+
+### Service
+
+| Parameter                  | Description             | Default Value |
+| -------------------------- | ----------------------- | ------------- |
+| `service.type`             | Service type            | `ClusterIP`   |
+| `service.port`             | Service port            | `4005`        |
+| `service.targetPort`       | Container port          | `4005`        |
+| `service.headless.enabled` | Enable headless service | `true`        |
+
+### Storage
+
+| Parameter                      | Description               | Default Value          |
+| ------------------------------ | ------------------------- | ---------------------- |
+| `persistence.enabled`          | Enable persistent storage | `true`                 |
+| `persistence.storageClassName` | Storage class             | `""` (cluster default) |
+| `persistence.accessMode`       | Access mode               | `ReadWriteOnce`        |
+| `persistence.size`             | Storage size              | `10Gi`                 |
+| `persistence.mountPath`        | Mount path                | `/postgresus-data`     |
+
+### Resources
+
+| Parameter                   | Description    | Default Value |
+| --------------------------- | -------------- | ------------- |
+| `resources.requests.memory` | Memory request | `1Gi`         |
+| `resources.requests.cpu`    | CPU request    | `500m`        |
+| `resources.limits.memory`   | Memory limit   | `1Gi`         |
+| `resources.limits.cpu`      | CPU limit      | `500m`        |
+
+## External Access Options
+
+### Option 1: Port Forward (Default)
+
+Best for development or quick access:
+
+```bash
+kubectl port-forward svc/postgresus-service 4005:4005 -n postgresus
+```
+
+Access at `http://localhost:4005`
+
+### Option 2: NodePort
+
+For direct access via node IP:
+
+```yaml
+# nodeport-values.yaml
+service:
+  type: NodePort
+  port: 4005
+  targetPort: 4005
+  nodePort: 30080
+```
+
+```bash
+helm install postgresus oci://ghcr.io/rostislavdugin/charts/postgresus \
+  -n postgresus --create-namespace \
+  -f nodeport-values.yaml
+```
+
+Access at `http://<NODE-IP>:30080`
+
+### Option 3: LoadBalancer
+
+For cloud environments with load balancer support:
+
+```yaml
+# loadbalancer-values.yaml
+service:
+  type: LoadBalancer
+  port: 80
+  targetPort: 4005
+```
+
+```bash
+helm install postgresus oci://ghcr.io/rostislavdugin/charts/postgresus \
+  -n postgresus --create-namespace \
+  -f loadbalancer-values.yaml
+```
+
+Get the external IP:
+
+```bash
+kubectl get svc -n postgresus
+```
+
+Access at `http://<EXTERNAL-IP>`
+
+### Option 4: Ingress
+
+For domain-based access with TLS:
+
+```yaml
+# ingress-values.yaml
+ingress:
+  enabled: true
+  className: nginx
+  annotations:
+    nginx.ingress.kubernetes.io/ssl-redirect: "true"
+    cert-manager.io/cluster-issuer: "letsencrypt-prod"
+  hosts:
+    - host: backup.example.com
+      paths:
+        - path: /
+          pathType: Prefix
+  tls:
+    - secretName: backup-example-com-tls
+      hosts:
+        - backup.example.com
+```
+
+```bash
+helm install postgresus oci://ghcr.io/rostislavdugin/charts/postgresus \
+  -n postgresus --create-namespace \
+  -f ingress-values.yaml
+```
+
+### Option 5: HTTPRoute (Gateway API)
+
+For clusters using Istio, Envoy Gateway, Cilium, or other Gateway API implementations:
+
+```yaml
+# httproute-values.yaml
+route:
+  enabled: true
+  hostnames:
+    - backup.example.com
+  parentRefs:
+    - name: my-gateway
+      namespace: istio-system
+```
+
+```bash
+helm install postgresus oci://ghcr.io/rostislavdugin/charts/postgresus \
+  -n postgresus --create-namespace \
+  -f httproute-values.yaml
+```
+
+## Ingress Configuration
+
+| Parameter               | Description       | Default Value            |
+| ----------------------- | ----------------- | ------------------------ |
+| `ingress.enabled`       | Enable Ingress    | `false`                  |
+| `ingress.className`     | Ingress class     | `nginx`                  |
+| `ingress.hosts[0].host` | Hostname          | `postgresus.example.com` |
+| `ingress.tls`           | TLS configuration | `[]`                     |
+
+## HTTPRoute Configuration
+
+| Parameter          | Description             | Default Value                  |
+| ------------------ | ----------------------- | ------------------------------ |
+| `route.enabled`    | Enable HTTPRoute        | `false`                        |
+| `route.apiVersion` | Gateway API version     | `gateway.networking.k8s.io/v1` |
+| `route.hostnames`  | Hostnames for the route | `["postgresus.example.com"]`   |
+| `route.parentRefs` | Gateway references      | `[]`                           |
+
+## Health Checks
+
+| Parameter                | Description            | Default Value |
+| ------------------------ | ---------------------- | ------------- |
+| `livenessProbe.enabled`  | Enable liveness probe  | `true`        |
+| `readinessProbe.enabled` | Enable readiness probe | `true`        |
+
+## Custom Storage Size
+
+```yaml
+# storage-values.yaml
+persistence:
+  size: 50Gi
+  storageClassName: "fast-ssd"
+```
+
+```bash
+helm install postgresus oci://ghcr.io/rostislavdugin/charts/postgresus \
+  -n postgresus --create-namespace \
+  -f storage-values.yaml
+```
+
+## Upgrade
+
+```bash
+helm upgrade postgresus oci://ghcr.io/rostislavdugin/charts/postgresus -n postgresus
+```
+
+## Uninstall
+
+```bash
+helm uninstall postgresus -n postgresus
+```

deploy/helm/templates/_helpers.tpl

@@ -0,0 +1,68 @@
+{{/*
+Expand the name of the chart.
+*/}}
+{{- define "postgresus.name" -}}
+{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Create a default fully qualified app name.
+*/}}
+{{- define "postgresus.fullname" -}}
+{{- if .Values.fullnameOverride }}
+{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- $name := default .Chart.Name .Values.nameOverride }}
+{{- if contains $name .Release.Name }}
+{{- .Release.Name | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
+{{- end }}
+{{- end }}
+{{- end }}
+
+{{/*
+Create chart name and version as used by the chart label.
+*/}}
+{{- define "postgresus.chart" -}}
+{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Common labels
+*/}}
+{{- define "postgresus.labels" -}}
+helm.sh/chart: {{ include "postgresus.chart" . }}
+{{ include "postgresus.selectorLabels" . }}
+{{- if .Chart.AppVersion }}
+app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
+{{- end }}
+app.kubernetes.io/managed-by: {{ .Release.Service }}
+{{- end }}
+
+{{/*
+Selector labels
+*/}}
+{{- define "postgresus.selectorLabels" -}}
+app.kubernetes.io/name: {{ include "postgresus.name" . }}
+app.kubernetes.io/instance: {{ .Release.Name }}
+app: postgresus
+{{- end }}
+
+{{/*
+Create the name of the service account to use
+*/}}
+{{- define "postgresus.serviceAccountName" -}}
+{{- if .Values.serviceAccount.create }}
+{{- default (include "postgresus.fullname" .) .Values.serviceAccount.name }}
+{{- else }}
+{{- default "default" .Values.serviceAccount.name }}
+{{- end }}
+{{- end }}
+
+{{/*
+Namespace - uses the release namespace from helm install -n <namespace>
+*/}}
+{{- define "postgresus.namespace" -}}
+{{- .Release.Namespace }}
+{{- end }}

deploy/helm/templates/httproute.yaml

@@ -0,0 +1,35 @@
+{{- if .Values.route.enabled -}}
+apiVersion: {{ .Values.route.apiVersion}}
+kind: {{ .Values.route.kind}}
+metadata:
+  name: {{ template "postgresus.fullname" . }}
+  annotations: {{ toYaml .Values.route.annotations | nindent 4 }}
+  labels:
+    app.kubernetes.io/component: "app"
+    {{- include "postgresus.labels" . | nindent 4 }}
+spec:
+  {{- with .Values.route.parentRefs }}
+  parentRefs:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+  {{- with .Values.route.hostnames }}
+  hostnames:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+  rules:
+    - backendRefs:
+        - name: {{ template "postgresus.fullname" . }}-service
+          port: {{ .Values.service.port }}
+      {{- with .Values.route.filters }}
+      filters:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.route.matches }}
+      matches:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.route.timeouts }}
+      timeouts:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+  {{- end }}

deploy/helm/templates/ingress.yaml

@@ -0,0 +1,42 @@
+{{- if .Values.ingress.enabled -}}
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: {{ include "postgresus.fullname" . }}-ingress
+  namespace: {{ include "postgresus.namespace" . }}
+  labels:
+    {{- include "postgresus.labels" . | nindent 4 }}
+  {{- with .Values.ingress.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+spec:
+  {{- if .Values.ingress.className }}
+  ingressClassName: {{ .Values.ingress.className }}
+  {{- end }}
+  {{- if .Values.ingress.tls }}
+  tls:
+    {{- range .Values.ingress.tls }}
+    - hosts:
+        {{- range .hosts }}
+        - {{ . | quote }}
+        {{- end }}
+      secretName: {{ .secretName }}
+    {{- end }}
+  {{- end }}
+  rules:
+    {{- range .Values.ingress.hosts }}
+    - host: {{ .host | quote }}
+      http:
+        paths:
+          {{- range .paths }}
+          - path: {{ .path }}
+            pathType: {{ .pathType }}
+            backend:
+              service:
+                name: {{ include "postgresus.fullname" $ }}-service
+                port:
+                  number: {{ $.Values.service.port }}
+          {{- end }}
+    {{- end }}
+{{- end }}

deploy/helm/templates/service.yaml

@@ -0,0 +1,36 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "postgresus.fullname" . }}-service
+  namespace: {{ include "postgresus.namespace" . }}
+  labels:
+    {{- include "postgresus.labels" . | nindent 4 }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+    - port: {{ .Values.service.port }}
+      targetPort: {{ .Values.service.targetPort }}
+      protocol: TCP
+      name: http
+  selector:
+    {{- include "postgresus.selectorLabels" . | nindent 4 }}
+---
+{{- if .Values.service.headless.enabled }}
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "postgresus.fullname" . }}-headless
+  namespace: {{ include "postgresus.namespace" . }}
+  labels:
+    {{- include "postgresus.labels" . | nindent 4 }}
+spec:
+  type: ClusterIP
+  clusterIP: None
+  ports:
+    - port: {{ .Values.service.port }}
+      targetPort: {{ .Values.service.targetPort }}
+      protocol: TCP
+      name: http
+  selector:
+    {{- include "postgresus.selectorLabels" . | nindent 4 }}
+{{- end }}

deploy/helm/templates/statefulset.yaml

@@ -0,0 +1,101 @@
+apiVersion: apps/v1
+kind: StatefulSet
+metadata:
+  name: {{ include "postgresus.fullname" . }}
+  namespace: {{ include "postgresus.namespace" . }}
+  labels:
+    {{- include "postgresus.labels" . | nindent 4 }}
+spec:
+  serviceName: {{ include "postgresus.fullname" . }}-headless
+  replicas: {{ .Values.replicaCount }}
+  selector:
+    matchLabels:
+      {{- include "postgresus.selectorLabels" . | nindent 6 }}
+  template:
+    metadata:
+      annotations:
+        {{- with .Values.podAnnotations }}
+        {{- toYaml . | nindent 8 }}
+        {{- end }}
+      labels:
+        {{- include "postgresus.selectorLabels" . | nindent 8 }}
+        {{- with .Values.podLabels }}
+        {{- toYaml . | nindent 8 }}
+        {{- end }}
+    spec:
+      {{- with .Values.nodeSelector }}
+      nodeSelector:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.affinity }}
+      affinity:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.tolerations }}
+      tolerations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      containers:
+        - name: {{ .Chart.Name }}
+          image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
+          imagePullPolicy: {{ .Values.image.pullPolicy }}
+          {{- if .Values.customRootCA }}
+          env:
+            - name: SSL_CERT_FILE
+              value: /etc/ssl/certs/custom-root-ca.crt
+          {{- end }}
+          ports:
+            - name: http
+              containerPort: {{ .Values.service.targetPort }}
+              protocol: TCP
+          volumeMounts:
+            - name: postgresus-storage
+              mountPath: {{ .Values.persistence.mountPath }}
+            {{- if .Values.customRootCA }}
+            - name: custom-root-ca
+              mountPath: /etc/ssl/certs/custom-root-ca.crt
+              subPath: ca.crt
+              readOnly: true
+            {{- end }}
+          resources:
+            {{- toYaml .Values.resources | nindent 12 }}
+          {{- if .Values.livenessProbe.enabled }}
+          livenessProbe:
+            httpGet:
+              {{- toYaml .Values.livenessProbe.httpGet | nindent 14 }}
+            initialDelaySeconds: {{ .Values.livenessProbe.initialDelaySeconds }}
+            periodSeconds: {{ .Values.livenessProbe.periodSeconds }}
+            timeoutSeconds: {{ .Values.livenessProbe.timeoutSeconds }}
+            failureThreshold: {{ .Values.livenessProbe.failureThreshold }}
+          {{- end }}
+          {{- if .Values.readinessProbe.enabled }}
+          readinessProbe:
+            httpGet:
+              {{- toYaml .Values.readinessProbe.httpGet | nindent 14 }}
+            initialDelaySeconds: {{ .Values.readinessProbe.initialDelaySeconds }}
+            periodSeconds: {{ .Values.readinessProbe.periodSeconds }}
+            timeoutSeconds: {{ .Values.readinessProbe.timeoutSeconds }}
+            failureThreshold: {{ .Values.readinessProbe.failureThreshold }}
+          {{- end }}
+      {{- if .Values.customRootCA }}
+      volumes:
+        - name: custom-root-ca
+          secret:
+            secretName: {{ .Values.customRootCA }}
+      {{- end }}
+  {{- if .Values.persistence.enabled }}
+  volumeClaimTemplates:
+    - metadata:
+        name: postgresus-storage
+      spec:
+        accessModes:
+          - {{ .Values.persistence.accessMode }}
+        {{- if .Values.persistence.storageClassName }}
+        storageClassName: {{ .Values.persistence.storageClassName }}
+        {{- end }}
+        resources:
+          requests:
+            storage: {{ .Values.persistence.size }}
+  {{- end }}
+  updateStrategy:
+    {{- toYaml .Values.updateStrategy | nindent 4 }}

deploy/helm/values.yaml

@@ -0,0 +1,104 @@
+# Default values for postgresus
+
+# Image configuration
+image:
+  repository: rostislavdugin/postgresus
+  tag: null
+  pullPolicy: Always
+
+# StatefulSet configuration
+replicaCount: 1
+
+# RootCA setup, need name of secret in same namespace
+customRootCA: ""
+
+# Service configuration
+service:
+  type: ClusterIP
+  port: 4005          # Service port
+  targetPort: 4005    # Internal container port
+  # Headless service for StatefulSet
+  headless:
+    enabled: true
+
+# Resource limits and requests
+resources:
+  requests:
+    memory: "1Gi"
+    cpu: "500m"
+  limits:
+    memory: "1Gi"
+    cpu: "500m"
+
+# Persistent storage configuration
+persistence:
+  enabled: true
+  # Storage class name. Leave empty to use cluster default.
+  # Examples: "longhorn", "standard", "gp2", etc.
+  storageClassName: ""
+  accessMode: ReadWriteOnce
+  size: 10Gi
+  # Mount path in container
+  mountPath: /postgresus-data
+
+# Ingress configuration (disabled by default - using LoadBalancer instead)
+ingress:
+  enabled: false
+  className: nginx
+  annotations: {}
+  hosts:
+    - host: postgresus.example.com
+      paths:
+        - path: /
+          pathType: Prefix
+  tls: []
+
+# HTTPRoute configuration for Gateway API
+route:
+  enabled: false
+  apiVersion: gateway.networking.k8s.io/v1
+  kind: HTTPRoute
+  annotations: {}
+  hostnames:
+  - postgresus.example.com
+  parentRefs: []
+  filters: []
+  matches: []
+  timeouts: {}
+
+# Health checks configuration
+# Note: The application only has /api/v1/system/health endpoint
+livenessProbe:
+  enabled: true
+  httpGet:
+    path: /api/v1/system/health
+    port: 4005
+  initialDelaySeconds: 30
+  periodSeconds: 10
+  timeoutSeconds: 5
+  failureThreshold: 3
+
+readinessProbe:
+  enabled: true
+  httpGet:
+    path: /api/v1/system/health
+    port: 4005
+  initialDelaySeconds: 10
+  periodSeconds: 5
+  timeoutSeconds: 3
+  failureThreshold: 3
+
+# StatefulSet update strategy
+updateStrategy:
+  type: RollingUpdate
+  rollingUpdate:
+    partition: 0
+
+# Pod labels and annotations
+podLabels: {}
+podAnnotations: {}
+
+# Node selector, tolerations and affinity
+nodeSelector: {}
+tolerations: []
+affinity: {}

frontend/index.html

@@ -3,7 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
     <meta name="robots" content="noindex" />
     <title>Postgresus - PostgreSQL backups</title>
 

frontend/package.json

@@ -8,7 +8,9 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.7",
@@ -22,6 +24,7 @@
     "tailwindcss": "^4.1.7"
   },
   "devDependencies": {
+    "@vitest/coverage-v8": "^3.2.4",
     "@eslint/js": "^9.25.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/react": "^19.1.2",
@@ -36,6 +39,7 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.5"
+    "vite": "^6.3.5",
+    "vitest": "^3.2.4"
   }
 }

frontend/public/favicon.svg

@@ -1,24 +1,12 @@
-<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_221_160)">
-<path d="M213 149H388L725.5 233.5L856.5 602.5L811.5 685L733 650L679.5 631.5L581 591.5L492.5 570.5L430.5 545.5L371.5 494.5L166.5 386.5L213 149Z" fill="#155DFC"/>
-<path d="M66.5436 450.256C242.608 569.316 275.646 627.237 321.721 606.141C333.899 600.56 366.664 580.46 376.871 491.549C373.963 491.413 368.225 491.432 361.922 493.872C322.424 509.249 323.556 596.384 303.865 596.481C303.553 596.481 302.87 596.481 301.992 596.228C300.06 595.876 297.679 595.135 294.108 593.476C283.667 588.597 278.437 586.138 270.514 581.357C270.514 581.357 262.415 576.537 255.039 571.385C244.149 563.774 237.924 554.602 225.708 543.635C215.482 534.463 215.345 536.863 191.478 519.339C183.263 513.308 177.233 508.547 165.504 499.258C146.243 484.016 132.934 473.478 121.576 463.662C107.369 451.387 88.1466 433.258 66.8558 408.103C47.4969 371.708 24.4303 333.868 12.7213 337.674C5.24705 340.113 4.09568 358.535 5.53979 370.888C10.36 412.553 50.6584 439.542 66.5436 450.275V450.256Z" fill="#003A86"/>
-<path d="M86.9766 439.249C181.683 457.672 276.369 476.113 371.076 494.535C382.082 511.572 393.752 522.169 401.734 528.394C401.734 528.394 448.823 565.101 520.326 562.369C523.761 562.233 532.289 561.569 543.881 562.818C555.785 564.106 557.853 565.375 576.763 568.79C596.2 572.302 598.386 571.756 606.153 574.761C615.188 578.255 621.589 582.626 626.078 585.729C633.513 590.861 635.269 593.359 649.496 605.654C657.38 612.464 661.322 615.879 664.932 618.611C671.567 623.627 682.203 631.608 697.327 638.048C705.933 641.698 714.402 644.196 722.443 646.557C726.853 647.845 730.561 648.84 733.195 649.504C734.522 662.227 735.459 680.337 733.195 701.823C730.834 724.285 729.195 739.936 719.75 757.636C715.554 765.501 700.313 792.978 667.43 804.979C660.795 807.399 640.441 814.503 616.106 807.965C607.929 805.78 592.746 801.467 580.725 787.045C568.391 772.233 567.084 756.016 566.772 751.177C566.167 741.868 565.328 729.008 574.246 718.294C581.291 709.844 593.039 704.38 604.143 705.336C617.433 706.487 621.101 716.128 630.371 713.708C634.801 712.557 634.762 710.156 646.978 697.374C657.985 685.86 660.541 685.158 660.931 681.138C661.849 671.497 648.383 662.93 642.997 659.495C638.977 656.939 629.142 651.299 611.598 649.035C601.586 647.747 582.169 645.464 559.785 654.519C532.484 665.545 518.804 686.114 514.452 692.885C503.016 710.605 500.245 727.212 498.508 738.219C497.552 744.327 494.937 763.666 500.011 788.04C507.114 822.231 524.756 844.595 530.396 851.328C554.868 880.522 584.335 891.314 598.152 896.173C662.766 918.908 720.959 895.061 732.181 890.201C793.848 863.524 821.325 811.575 834.829 786.069C860.492 737.575 863.75 693.959 867.224 647.552C868.395 632.018 871.03 586.314 861.253 527.964C854.286 486.476 844.138 457.086 833.346 425.823C810.826 360.585 786.022 313.944 778.041 299.269C778.041 299.269 746.075 240.548 692.838 177.69C682.456 165.435 671.996 153.901 654.979 144.3C644.129 138.192 624.614 129.469 574.265 128.356C548.798 127.79 512.735 129.098 469.626 137.821C471.792 141.139 473.939 144.456 476.105 147.793C464.24 141.568 446.969 133.333 425.288 125.878C403.9 118.521 387.702 115.164 362.001 109.934C321.82 101.757 291.572 98.2838 284.273 97.4837C251.644 93.8539 227.758 93.1318 203.559 94.9858C188.259 96.1567 174.267 98.2447 159.709 106.441C150.459 111.652 144.019 117.623 136.291 124.883C121.342 138.914 111.878 151.657 107.389 157.765C75.5994 201.011 59.7142 222.653 44.6096 247.944C44.6096 247.944 33.6227 266.347 15.22 306.743C12.2538 313.241 7.12134 324.775 5.87238 340.64C5.67723 343.08 5.05274 351.003 6.26267 358.574C9.32652 377.816 23.5724 390.911 38.1501 403.42C70.3693 431.073 92.9677 446.763 92.9677 446.763C96.617 449.202 131.92 473.908 162.226 497.58C211.697 536.239 236.422 555.578 251.566 569.219C251.566 569.219 264.192 580.596 289.757 592.13C297.367 595.564 303.261 597.594 310.189 596.482C320.22 594.862 326.523 587.544 332.631 580.284C334.836 577.65 339.383 571.893 353.922 539.381C357.532 531.321 359.328 527.281 361.513 521.817C363.328 517.29 367.778 505.893 372.656 489.325C376.501 476.308 384.112 450.51 388.424 421.823C392.347 395.77 398.026 358.028 387.917 310.704C387 306.45 376.95 261.117 348.731 218.359C334.036 196.093 319.712 182.53 316.668 179.661C307.457 171.055 298.851 164.674 292.255 160.224C298.675 160.537 307.476 161.395 317.663 163.718C325.176 165.415 345.374 170.626 367.485 185.145C389.107 199.332 402.065 215.549 407.842 223.511C428.254 251.632 433.66 279.539 436.997 296.751C440.9 316.91 441.915 337.752 442.735 354.047C443.691 373.64 443.008 379.592 445.232 393.916C446.755 403.752 449.409 420.164 458.015 439.249C470.953 467.936 489.531 485.402 496.537 491.569C509.007 502.517 520.131 508.157 542.378 519.475C560.995 528.94 573.134 532.98 586.716 534.424C592.668 535.048 597.683 535.048 601.157 534.931C597.722 526.794 595.576 519.515 594.19 513.758C593 508.84 591.165 501.034 590.697 490.593C590.326 482.358 590.951 475.372 591.692 470.161C593.156 476.504 595.342 484.719 598.659 494.086C600.259 498.594 606.036 514.441 618.096 534.951C627.053 550.212 637.904 563.618 655.955 582.294C673.167 600.072 698.517 623.959 733.176 649.562C623.326 589.359 513.496 529.155 403.646 468.951" fill="#155DFC"/>
-<path d="M562.652 325.145C573.171 318.588 582.07 313.885 588.568 310.704C594.501 307.777 597.565 306.645 601.194 305.728C603.712 305.084 611.811 303.249 622.29 304.674C626.642 305.279 632.77 306.177 639.736 310.041C648.069 314.666 652.577 320.774 653.69 322.335C655.017 324.209 657.905 328.326 659.661 334.298C660.754 337.947 660.52 339.313 661.984 342.611C663.525 346.065 665.223 347.9 667.955 351.256C670.16 353.949 673.166 357.852 676.6 362.887C674.785 361.872 665.594 356.896 656.012 357.072C651.68 357.15 647.367 358.243 647.367 358.243C643.893 359.121 641.571 360.214 640.732 360.565C632.984 363.785 615.284 359.511 608.181 347.939C603.692 340.64 606.834 335.918 601.507 331.156C599.536 329.4 596.94 328.092 585.27 326.687C579.748 326.023 572.039 325.321 562.691 325.184L562.652 325.145Z" fill="#003C8D"/>
-<path d="M820.797 391.692C811.059 390.95 795.467 391.009 777.572 396.726C763.833 401.117 753.373 407.343 746.348 412.338C752.319 411.031 760.086 409.509 769.258 408.182C771.444 407.87 778.489 406.874 788.363 406.016C797.906 405.196 810.552 404.435 825.715 404.513C824.076 400.239 822.437 395.965 820.797 391.672V391.692Z" fill="#0052C9"/>
-<path d="M841.795 450.627C830.925 450.256 815.625 450.997 798.218 456.032C786.177 459.506 776.283 464.15 768.711 468.405C774.019 467.624 780.693 466.765 788.401 466.043C790.977 465.809 798.549 465.107 808.834 464.677C818.455 464.267 831.12 464.033 846.244 464.599C844.761 459.955 843.278 455.291 841.814 450.646L841.795 450.627Z" fill="#0052C9"/>
-<path d="M855.848 500.39C845.895 499.824 829.952 500.331 812.583 507.65C805.694 510.557 799.938 513.953 795.273 517.231C798.415 516.607 802.748 515.846 807.919 515.143C818.808 513.699 827.141 513.445 835.494 513.231C841.524 513.075 849.369 513.016 858.6 513.328L855.848 500.37V500.39Z" fill="#0052C9"/>
-<path d="M570.282 597.028C599.399 605.985 630.096 616.016 657.475 624.934C674.434 630.457 688.289 635.043 697.344 638.048C665.281 603.663 633.238 569.297 601.174 534.912C596.471 534.853 589.095 534.502 580.254 532.824C573.971 531.633 559.627 528.394 529.769 512.157C516.031 504.683 509.161 500.956 502.526 496.038C469.975 471.917 457.427 437.142 453.836 426.799C450.656 417.607 448.47 397.116 444.235 356.525C438.732 303.893 439.552 300.537 435.766 285.276C432.819 273.392 426.203 245.329 407.859 219.511C401.81 210.983 378.099 178.607 333.858 164.927C315.378 159.209 299.141 158.565 288.271 158.956C297.034 165.298 309.016 174.86 321.662 188.111C327.926 194.668 354.408 223.16 373.493 269.859C379.465 284.457 389.866 310.489 392.423 346.085C394.316 372.371 391.154 392.94 390.432 397.409C385.671 426.877 376.264 444.87 371.854 486.436C371.483 489.91 371.23 492.759 371.093 494.555C377.318 504.059 383.368 511.142 387.973 516.06C392.442 520.822 396.092 523.964 397.224 525.076C397.224 525.076 403.605 530.716 410.923 535.614C444.43 558.095 570.282 597.028 570.282 597.028Z" fill="#0051C8"/>
-<path d="M591.456 468.893C590.109 479.079 589.289 494.594 593.427 512.626C595.495 521.602 598.013 527.886 600.881 534.912C607.555 551.304 615.908 571.619 634.018 591.915C647.424 606.941 661.007 616.035 671.916 623.393C676.56 626.515 682.786 630.691 691.47 635.16C708.175 643.786 723.24 648.001 733.759 650.226C732.139 643.434 730.5 636.663 728.88 629.872C712.097 621.968 691.86 610.435 671.155 593.476C663.622 587.29 658.177 582.157 655.64 579.718C646.019 570.448 627.792 552.729 612.512 524.881C600.53 503.044 594.597 483.021 591.456 468.854V468.893Z" fill="#00398B"/>
-<path d="M680.074 799.203C689.988 795.768 704.312 789.367 718.519 777.307C731.438 766.34 738.912 755.236 741.937 750.396C750.816 736.248 754.251 723.836 756.631 715.015C759.305 705.121 762.154 690.485 761.861 672.414C765.569 674.502 770.819 677.215 777.298 679.888C791.524 685.743 803.175 687.85 810.434 689.099C824.914 691.617 836.272 691.773 845.054 691.831C852.469 691.89 858.695 691.617 863.222 691.324C863.749 686.64 864.257 681.898 864.725 677.117C865.72 667.047 866.54 657.153 867.223 647.474C861.134 647.396 854.733 647.142 848.039 646.674C842.927 646.303 837.989 645.815 833.267 645.269C826.846 646.147 818.24 647.006 808.053 647.064C778.586 647.201 757.178 640.507 751.87 638.77C741.917 635.511 733.955 631.862 728.452 629.052C729.428 632.682 730.696 637.853 731.808 644.117C733.135 651.553 736.238 671.458 733.174 701.784C731.125 722.06 730.091 732.423 725.368 744.854C721.309 755.567 710.322 778.888 680.035 799.144L680.074 799.203Z" fill="#0050C8"/>
-<path d="M493.94 571.483C489.179 567.034 474.133 552.846 461.233 537.625C458.15 533.995 453.017 527.867 446.89 519.183C444.86 516.295 442.733 513.153 440.547 509.718C435.395 501.62 428.682 490.925 422.789 475.626C419.139 466.141 416.934 457.847 415.568 451.7C411.88 469.225 412.465 483.783 413.578 493.306C414.846 504.274 417.246 512.255 419.315 518.968C421.54 526.208 424.857 535.497 429.931 545.918C436.937 549.49 442.967 552.28 447.553 554.31C460.453 560.028 470.756 563.677 477.45 566.019C484.144 568.38 489.823 570.195 493.96 571.483H493.94Z" fill="#003C8D"/>
-<path d="M668.582 578.488C670.768 569.18 674.593 562.798 677.13 559.227C684.135 549.333 692.507 545.586 701.855 541.293C709.407 537.819 715.437 535.165 720.999 537.78C722.014 538.248 722.482 538.658 728.337 542.425C730.366 543.771 733.333 545.703 736.982 547.908C746.525 553.685 784.618 575.854 840.177 582.294C877.822 586.665 906.762 581.864 923.467 578.957C957.599 573.024 985.271 562.545 1005 553.392C994.15 582.001 979.26 598.999 970.186 607.8C935.371 641.58 892.731 644.976 865.839 647.591C859.79 648.176 838.518 649.757 809.344 645.269C745.822 635.511 697.503 602.824 668.582 578.508V578.488Z" fill="#8BC7FE"/>
-<path d="M664.369 591.27C671.004 599.311 678.791 607.839 687.826 616.425C700.764 628.72 713.391 638.38 724.631 645.912C724.475 642.595 723.89 638.341 722.172 633.794C721.665 632.467 721.119 631.257 720.572 630.144C726.017 633.15 732.008 636.018 738.487 638.536C769.477 650.537 798.183 649.386 817.874 646.225C791.353 642.653 756.792 634.262 720.143 614.318C707.361 607.351 695.964 599.877 685.953 592.441C685.484 592.09 681.874 589.202 676.8 585.221C673.404 582.567 670.614 580.381 668.779 578.957C667.296 583.074 665.813 587.172 664.33 591.29L664.369 591.27Z" fill="#00398B"/>
-<path d="M992.766 578.937C975.417 607.683 953.073 622.065 944.135 627.237C936.231 631.803 924.366 637.56 908.91 641.092C908.715 641.151 888.81 646.4 853.956 648.235C848.863 648.508 843.887 648.567 843.887 648.567C843.887 648.567 837.759 648.645 831.436 648.391C776.54 646.283 723.362 623.88 723.362 623.88C715.146 620.641 701.642 614.864 687.747 606.434C675.511 599.018 668.74 593.066 665.149 589.709C663.432 588.09 662.046 586.704 661.109 585.728C668.447 572.77 675.785 559.832 683.142 546.874C690.011 553.743 700.198 563.228 713.468 573.024C732.007 586.704 785.107 625.949 857.059 623.587C937.5 620.972 991.069 568.028 1005 553.333C1002.6 559.851 998.777 568.926 992.747 578.898L992.766 578.937Z" fill="#0087F7"/>
-<path d="M649.906 574.117C651.233 571.268 653.146 567.423 655.761 563.111C656.971 561.12 661.323 553.997 666.533 548.416C670.67 543.986 682.047 531.789 698.733 531.282C708.119 530.989 715.847 534.502 721.019 537.761C717.604 538.073 712.94 538.736 707.534 540.239C701.796 541.859 695.279 543.323 689.502 547.909C681.462 554.29 677.013 562.896 668.582 580.791C666.884 584.421 665.577 587.426 664.757 589.358C661.596 586.294 658.415 583.094 655.195 579.737C653.38 577.845 651.624 575.971 649.906 574.098V574.117Z" fill="#0051CB"/>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_286_152)">
+<path d="M12.5378 28.7972C12.5378 30.2972 14.2889 30.2982 14.7498 29.4999C15.0384 28.9999 15.2498 28.4999 15.2498 26.9999C15.2498 25.4999 14.5258 24.2384 13.8296 22.8794C13.6504 22.5296 13.4578 22.1537 13.253 21.7309C12.9016 21.0056 12.4714 20.3367 11.8469 19.8035C11.7511 19.7217 11.7231 19.5023 11.7404 19.3555C11.8085 18.7759 11.8827 18.1969 11.9568 17.6179C12.0794 16.6609 12.202 15.7039 12.2975 14.7442C12.3645 14.0718 12.3633 13.378 12.2786 12.7082C12.0956 11.2586 11.2821 10.1946 10.0335 9.47786C9.6702 9.26926 9.56307 9.03637 9.60844 8.64632C9.73481 7.56183 10.1635 6.58265 10.7083 5.66605C11.2087 4.82425 11.7757 4.02144 12.3417 3.2201C12.4142 3.11747 12.4866 3.01486 12.5589 2.9122C12.6515 2.78077 12.8805 2.68113 13.049 2.67687C15.103 2.62543 17.1573 2.59121 19.2117 2.56589C19.3528 2.56407 19.5394 2.62989 19.6303 2.73115C20.9118 4.1585 22.0569 5.678 22.7442 7.49459C22.7912 7.61894 22.8303 7.74673 22.8661 7.87492C23.1241 8.79206 23.1199 8.79508 22.3848 9.31247L22.3515 9.33589C20.9673 10.3108 20.4612 11.705 20.5228 13.3373C20.5933 15.2138 21.0153 17.0328 21.4965 18.8385C21.5943 19.2054 21.6577 19.4768 21.3049 19.8152C20.5985 20.4924 20.3047 21.4218 20.1641 22.3672C20.0179 23.352 19.8995 24.3409 19.7811 25.3299C19.7154 25.8788 19.7122 26.3421 19.5792 26.9759C19.0702 29.4029 17.7498 31.9999 15.7498 31.9999H12.5378C11.2498 31.9999 10.2498 30.7972 10.2498 28.7972H12.5378Z" fill="#155DFC"/>
+<path d="M11.5607 1.64008C10.8347 2.775 10.091 3.85078 9.44034 4.98022C8.85324 5.9991 8.46218 7.10566 8.27283 8.28027C8.02494 9.8182 8.4235 11.1797 9.51913 12.2444C10.4211 13.1209 10.6538 14.1118 10.538 15.2919C10.2857 17.8647 9.77936 20.385 9.05131 22.863C9.04422 22.8869 9.02214 22.9064 8.97435 22.9744C8.53792 22.8381 8.07901 22.7111 7.63165 22.5524C1.38253 20.3344 -3.18062 16.2382 -6.04606 10.2575C-6.29374 9.74063 -6.51975 9.21246 -6.73158 8.68004C-6.77189 8.57878 -6.74374 8.38234 -6.66961 8.31328C-4.28698 6.09307 -1.91002 3.86617 0.50117 1.67735C2.16142 0.170403 4.14529 -0.303895 6.31143 0.184986C7.98444 0.562481 9.62828 1.06959 11.2841 1.52262C11.3961 1.5532 11.5 1.61376 11.5607 1.64008Z" fill="#155DFC"/>
+<path d="M24.2397 22.3314C23.8972 21.1864 23.5199 20.1003 23.2528 18.9878C22.9016 17.5244 22.6171 16.0438 22.3435 14.5632C22.1888 13.7264 22.35 12.9544 22.9725 12.3027C24.5667 10.6339 24.5983 8.69929 23.8328 6.67592C23.1868 4.96849 22.1482 3.49759 20.9256 2.15226C20.7825 1.9947 20.6423 1.8341 20.4795 1.65123C20.5718 1.6006 20.6427 1.54693 20.7227 1.52C22.532 0.910212 24.3624 0.387106 26.2602 0.122211C28.1953 -0.147949 29.8448 0.454544 31.2612 1.74398C32.5042 2.87545 33.7011 4.05816 34.9529 5.17971C35.9556 6.07788 37.0032 6.92664 38.0476 7.77681C38.2361 7.93012 38.2841 8.05386 38.2282 8.27602C37.2646 12.1148 35.328 15.3721 32.3643 17.9969C30.0283 20.0657 27.3376 21.4946 24.2397 22.3316V22.3314Z" fill="#155DFC"/>
 </g>
 <defs>
-<clipPath id="clip0_221_160">
-<rect width="1000" height="1000" fill="white"/>
+<clipPath id="clip0_286_152">
+<rect width="32" height="32" rx="6" fill="white"/>
 </clipPath>
 </defs>
 </svg>

frontend/public/logo.svg

@@ -1,24 +1,12 @@
-<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_221_160)">
-<path d="M213 149H388L725.5 233.5L856.5 602.5L811.5 685L733 650L679.5 631.5L581 591.5L492.5 570.5L430.5 545.5L371.5 494.5L166.5 386.5L213 149Z" fill="#155DFC"/>
-<path d="M66.5436 450.256C242.608 569.316 275.646 627.237 321.721 606.141C333.899 600.56 366.664 580.46 376.871 491.549C373.963 491.413 368.225 491.432 361.922 493.872C322.424 509.249 323.556 596.384 303.865 596.481C303.553 596.481 302.87 596.481 301.992 596.228C300.06 595.876 297.679 595.135 294.108 593.476C283.667 588.597 278.437 586.138 270.514 581.357C270.514 581.357 262.415 576.537 255.039 571.385C244.149 563.774 237.924 554.602 225.708 543.635C215.482 534.463 215.345 536.863 191.478 519.339C183.263 513.308 177.233 508.547 165.504 499.258C146.243 484.016 132.934 473.478 121.576 463.662C107.369 451.387 88.1466 433.258 66.8558 408.103C47.4969 371.708 24.4303 333.868 12.7213 337.674C5.24705 340.113 4.09568 358.535 5.53979 370.888C10.36 412.553 50.6584 439.542 66.5436 450.275V450.256Z" fill="#003A86"/>
-<path d="M86.9766 439.249C181.683 457.672 276.369 476.113 371.076 494.535C382.082 511.572 393.752 522.169 401.734 528.394C401.734 528.394 448.823 565.101 520.326 562.369C523.761 562.233 532.289 561.569 543.881 562.818C555.785 564.106 557.853 565.375 576.763 568.79C596.2 572.302 598.386 571.756 606.153 574.761C615.188 578.255 621.589 582.626 626.078 585.729C633.513 590.861 635.269 593.359 649.496 605.654C657.38 612.464 661.322 615.879 664.932 618.611C671.567 623.627 682.203 631.608 697.327 638.048C705.933 641.698 714.402 644.196 722.443 646.557C726.853 647.845 730.561 648.84 733.195 649.504C734.522 662.227 735.459 680.337 733.195 701.823C730.834 724.285 729.195 739.936 719.75 757.636C715.554 765.501 700.313 792.978 667.43 804.979C660.795 807.399 640.441 814.503 616.106 807.965C607.929 805.78 592.746 801.467 580.725 787.045C568.391 772.233 567.084 756.016 566.772 751.177C566.167 741.868 565.328 729.008 574.246 718.294C581.291 709.844 593.039 704.38 604.143 705.336C617.433 706.487 621.101 716.128 630.371 713.708C634.801 712.557 634.762 710.156 646.978 697.374C657.985 685.86 660.541 685.158 660.931 681.138C661.849 671.497 648.383 662.93 642.997 659.495C638.977 656.939 629.142 651.299 611.598 649.035C601.586 647.747 582.169 645.464 559.785 654.519C532.484 665.545 518.804 686.114 514.452 692.885C503.016 710.605 500.245 727.212 498.508 738.219C497.552 744.327 494.937 763.666 500.011 788.04C507.114 822.231 524.756 844.595 530.396 851.328C554.868 880.522 584.335 891.314 598.152 896.173C662.766 918.908 720.959 895.061 732.181 890.201C793.848 863.524 821.325 811.575 834.829 786.069C860.492 737.575 863.75 693.959 867.224 647.552C868.395 632.018 871.03 586.314 861.253 527.964C854.286 486.476 844.138 457.086 833.346 425.823C810.826 360.585 786.022 313.944 778.041 299.269C778.041 299.269 746.075 240.548 692.838 177.69C682.456 165.435 671.996 153.901 654.979 144.3C644.129 138.192 624.614 129.469 574.265 128.356C548.798 127.79 512.735 129.098 469.626 137.821C471.792 141.139 473.939 144.456 476.105 147.793C464.24 141.568 446.969 133.333 425.288 125.878C403.9 118.521 387.702 115.164 362.001 109.934C321.82 101.757 291.572 98.2838 284.273 97.4837C251.644 93.8539 227.758 93.1318 203.559 94.9858C188.259 96.1567 174.267 98.2447 159.709 106.441C150.459 111.652 144.019 117.623 136.291 124.883C121.342 138.914 111.878 151.657 107.389 157.765C75.5994 201.011 59.7142 222.653 44.6096 247.944C44.6096 247.944 33.6227 266.347 15.22 306.743C12.2538 313.241 7.12134 324.775 5.87238 340.64C5.67723 343.08 5.05274 351.003 6.26267 358.574C9.32652 377.816 23.5724 390.911 38.1501 403.42C70.3693 431.073 92.9677 446.763 92.9677 446.763C96.617 449.202 131.92 473.908 162.226 497.58C211.697 536.239 236.422 555.578 251.566 569.219C251.566 569.219 264.192 580.596 289.757 592.13C297.367 595.564 303.261 597.594 310.189 596.482C320.22 594.862 326.523 587.544 332.631 580.284C334.836 577.65 339.383 571.893 353.922 539.381C357.532 531.321 359.328 527.281 361.513 521.817C363.328 517.29 367.778 505.893 372.656 489.325C376.501 476.308 384.112 450.51 388.424 421.823C392.347 395.77 398.026 358.028 387.917 310.704C387 306.45 376.95 261.117 348.731 218.359C334.036 196.093 319.712 182.53 316.668 179.661C307.457 171.055 298.851 164.674 292.255 160.224C298.675 160.537 307.476 161.395 317.663 163.718C325.176 165.415 345.374 170.626 367.485 185.145C389.107 199.332 402.065 215.549 407.842 223.511C428.254 251.632 433.66 279.539 436.997 296.751C440.9 316.91 441.915 337.752 442.735 354.047C443.691 373.64 443.008 379.592 445.232 393.916C446.755 403.752 449.409 420.164 458.015 439.249C470.953 467.936 489.531 485.402 496.537 491.569C509.007 502.517 520.131 508.157 542.378 519.475C560.995 528.94 573.134 532.98 586.716 534.424C592.668 535.048 597.683 535.048 601.157 534.931C597.722 526.794 595.576 519.515 594.19 513.758C593 508.84 591.165 501.034 590.697 490.593C590.326 482.358 590.951 475.372 591.692 470.161C593.156 476.504 595.342 484.719 598.659 494.086C600.259 498.594 606.036 514.441 618.096 534.951C627.053 550.212 637.904 563.618 655.955 582.294C673.167 600.072 698.517 623.959 733.176 649.562C623.326 589.359 513.496 529.155 403.646 468.951" fill="#155DFC"/>
-<path d="M562.652 325.145C573.171 318.588 582.07 313.885 588.568 310.704C594.501 307.777 597.565 306.645 601.194 305.728C603.712 305.084 611.811 303.249 622.29 304.674C626.642 305.279 632.77 306.177 639.736 310.041C648.069 314.666 652.577 320.774 653.69 322.335C655.017 324.209 657.905 328.326 659.661 334.298C660.754 337.947 660.52 339.313 661.984 342.611C663.525 346.065 665.223 347.9 667.955 351.256C670.16 353.949 673.166 357.852 676.6 362.887C674.785 361.872 665.594 356.896 656.012 357.072C651.68 357.15 647.367 358.243 647.367 358.243C643.893 359.121 641.571 360.214 640.732 360.565C632.984 363.785 615.284 359.511 608.181 347.939C603.692 340.64 606.834 335.918 601.507 331.156C599.536 329.4 596.94 328.092 585.27 326.687C579.748 326.023 572.039 325.321 562.691 325.184L562.652 325.145Z" fill="#003C8D"/>
-<path d="M820.797 391.692C811.059 390.95 795.467 391.009 777.572 396.726C763.833 401.117 753.373 407.343 746.348 412.338C752.319 411.031 760.086 409.509 769.258 408.182C771.444 407.87 778.489 406.874 788.363 406.016C797.906 405.196 810.552 404.435 825.715 404.513C824.076 400.239 822.437 395.965 820.797 391.672V391.692Z" fill="#0052C9"/>
-<path d="M841.795 450.627C830.925 450.256 815.625 450.997 798.218 456.032C786.177 459.506 776.283 464.15 768.711 468.405C774.019 467.624 780.693 466.765 788.401 466.043C790.977 465.809 798.549 465.107 808.834 464.677C818.455 464.267 831.12 464.033 846.244 464.599C844.761 459.955 843.278 455.291 841.814 450.646L841.795 450.627Z" fill="#0052C9"/>
-<path d="M855.848 500.39C845.895 499.824 829.952 500.331 812.583 507.65C805.694 510.557 799.938 513.953 795.273 517.231C798.415 516.607 802.748 515.846 807.919 515.143C818.808 513.699 827.141 513.445 835.494 513.231C841.524 513.075 849.369 513.016 858.6 513.328L855.848 500.37V500.39Z" fill="#0052C9"/>
-<path d="M570.282 597.028C599.399 605.985 630.096 616.016 657.475 624.934C674.434 630.457 688.289 635.043 697.344 638.048C665.281 603.663 633.238 569.297 601.174 534.912C596.471 534.853 589.095 534.502 580.254 532.824C573.971 531.633 559.627 528.394 529.769 512.157C516.031 504.683 509.161 500.956 502.526 496.038C469.975 471.917 457.427 437.142 453.836 426.799C450.656 417.607 448.47 397.116 444.235 356.525C438.732 303.893 439.552 300.537 435.766 285.276C432.819 273.392 426.203 245.329 407.859 219.511C401.81 210.983 378.099 178.607 333.858 164.927C315.378 159.209 299.141 158.565 288.271 158.956C297.034 165.298 309.016 174.86 321.662 188.111C327.926 194.668 354.408 223.16 373.493 269.859C379.465 284.457 389.866 310.489 392.423 346.085C394.316 372.371 391.154 392.94 390.432 397.409C385.671 426.877 376.264 444.87 371.854 486.436C371.483 489.91 371.23 492.759 371.093 494.555C377.318 504.059 383.368 511.142 387.973 516.06C392.442 520.822 396.092 523.964 397.224 525.076C397.224 525.076 403.605 530.716 410.923 535.614C444.43 558.095 570.282 597.028 570.282 597.028Z" fill="#0051C8"/>
-<path d="M591.456 468.893C590.109 479.079 589.289 494.594 593.427 512.626C595.495 521.602 598.013 527.886 600.881 534.912C607.555 551.304 615.908 571.619 634.018 591.915C647.424 606.941 661.007 616.035 671.916 623.393C676.56 626.515 682.786 630.691 691.47 635.16C708.175 643.786 723.24 648.001 733.759 650.226C732.139 643.434 730.5 636.663 728.88 629.872C712.097 621.968 691.86 610.435 671.155 593.476C663.622 587.29 658.177 582.157 655.64 579.718C646.019 570.448 627.792 552.729 612.512 524.881C600.53 503.044 594.597 483.021 591.456 468.854V468.893Z" fill="#00398B"/>
-<path d="M680.074 799.203C689.988 795.768 704.312 789.367 718.519 777.307C731.438 766.34 738.912 755.236 741.937 750.396C750.816 736.248 754.251 723.836 756.631 715.015C759.305 705.121 762.154 690.485 761.861 672.414C765.569 674.502 770.819 677.215 777.298 679.888C791.524 685.743 803.175 687.85 810.434 689.099C824.914 691.617 836.272 691.773 845.054 691.831C852.469 691.89 858.695 691.617 863.222 691.324C863.749 686.64 864.257 681.898 864.725 677.117C865.72 667.047 866.54 657.153 867.223 647.474C861.134 647.396 854.733 647.142 848.039 646.674C842.927 646.303 837.989 645.815 833.267 645.269C826.846 646.147 818.24 647.006 808.053 647.064C778.586 647.201 757.178 640.507 751.87 638.77C741.917 635.511 733.955 631.862 728.452 629.052C729.428 632.682 730.696 637.853 731.808 644.117C733.135 651.553 736.238 671.458 733.174 701.784C731.125 722.06 730.091 732.423 725.368 744.854C721.309 755.567 710.322 778.888 680.035 799.144L680.074 799.203Z" fill="#0050C8"/>
-<path d="M493.94 571.483C489.179 567.034 474.133 552.846 461.233 537.625C458.15 533.995 453.017 527.867 446.89 519.183C444.86 516.295 442.733 513.153 440.547 509.718C435.395 501.62 428.682 490.925 422.789 475.626C419.139 466.141 416.934 457.847 415.568 451.7C411.88 469.225 412.465 483.783 413.578 493.306C414.846 504.274 417.246 512.255 419.315 518.968C421.54 526.208 424.857 535.497 429.931 545.918C436.937 549.49 442.967 552.28 447.553 554.31C460.453 560.028 470.756 563.677 477.45 566.019C484.144 568.38 489.823 570.195 493.96 571.483H493.94Z" fill="#003C8D"/>
-<path d="M668.582 578.488C670.768 569.18 674.593 562.798 677.13 559.227C684.135 549.333 692.507 545.586 701.855 541.293C709.407 537.819 715.437 535.165 720.999 537.78C722.014 538.248 722.482 538.658 728.337 542.425C730.366 543.771 733.333 545.703 736.982 547.908C746.525 553.685 784.618 575.854 840.177 582.294C877.822 586.665 906.762 581.864 923.467 578.957C957.599 573.024 985.271 562.545 1005 553.392C994.15 582.001 979.26 598.999 970.186 607.8C935.371 641.58 892.731 644.976 865.839 647.591C859.79 648.176 838.518 649.757 809.344 645.269C745.822 635.511 697.503 602.824 668.582 578.508V578.488Z" fill="#8BC7FE"/>
-<path d="M664.369 591.27C671.004 599.311 678.791 607.839 687.826 616.425C700.764 628.72 713.391 638.38 724.631 645.912C724.475 642.595 723.89 638.341 722.172 633.794C721.665 632.467 721.119 631.257 720.572 630.144C726.017 633.15 732.008 636.018 738.487 638.536C769.477 650.537 798.183 649.386 817.874 646.225C791.353 642.653 756.792 634.262 720.143 614.318C707.361 607.351 695.964 599.877 685.953 592.441C685.484 592.09 681.874 589.202 676.8 585.221C673.404 582.567 670.614 580.381 668.779 578.957C667.296 583.074 665.813 587.172 664.33 591.29L664.369 591.27Z" fill="#00398B"/>
-<path d="M992.766 578.937C975.417 607.683 953.073 622.065 944.135 627.237C936.231 631.803 924.366 637.56 908.91 641.092C908.715 641.151 888.81 646.4 853.956 648.235C848.863 648.508 843.887 648.567 843.887 648.567C843.887 648.567 837.759 648.645 831.436 648.391C776.54 646.283 723.362 623.88 723.362 623.88C715.146 620.641 701.642 614.864 687.747 606.434C675.511 599.018 668.74 593.066 665.149 589.709C663.432 588.09 662.046 586.704 661.109 585.728C668.447 572.77 675.785 559.832 683.142 546.874C690.011 553.743 700.198 563.228 713.468 573.024C732.007 586.704 785.107 625.949 857.059 623.587C937.5 620.972 991.069 568.028 1005 553.333C1002.6 559.851 998.777 568.926 992.747 578.898L992.766 578.937Z" fill="#0087F7"/>
-<path d="M649.906 574.117C651.233 571.268 653.146 567.423 655.761 563.111C656.971 561.12 661.323 553.997 666.533 548.416C670.67 543.986 682.047 531.789 698.733 531.282C708.119 530.989 715.847 534.502 721.019 537.761C717.604 538.073 712.94 538.736 707.534 540.239C701.796 541.859 695.279 543.323 689.502 547.909C681.462 554.29 677.013 562.896 668.582 580.791C666.884 584.421 665.577 587.426 664.757 589.358C661.596 586.294 658.415 583.094 655.195 579.737C653.38 577.845 651.624 575.971 649.906 574.098V574.117Z" fill="#0051CB"/>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_286_152)">
+<path d="M12.5378 28.7972C12.5378 30.2972 14.2889 30.2982 14.7498 29.4999C15.0384 28.9999 15.2498 28.4999 15.2498 26.9999C15.2498 25.4999 14.5258 24.2384 13.8296 22.8794C13.6504 22.5296 13.4578 22.1537 13.253 21.7309C12.9016 21.0056 12.4714 20.3367 11.8469 19.8035C11.7511 19.7217 11.7231 19.5023 11.7404 19.3555C11.8085 18.7759 11.8827 18.1969 11.9568 17.6179C12.0794 16.6609 12.202 15.7039 12.2975 14.7442C12.3645 14.0718 12.3633 13.378 12.2786 12.7082C12.0956 11.2586 11.2821 10.1946 10.0335 9.47786C9.6702 9.26926 9.56307 9.03637 9.60844 8.64632C9.73481 7.56183 10.1635 6.58265 10.7083 5.66605C11.2087 4.82425 11.7757 4.02144 12.3417 3.2201C12.4142 3.11747 12.4866 3.01486 12.5589 2.9122C12.6515 2.78077 12.8805 2.68113 13.049 2.67687C15.103 2.62543 17.1573 2.59121 19.2117 2.56589C19.3528 2.56407 19.5394 2.62989 19.6303 2.73115C20.9118 4.1585 22.0569 5.678 22.7442 7.49459C22.7912 7.61894 22.8303 7.74673 22.8661 7.87492C23.1241 8.79206 23.1199 8.79508 22.3848 9.31247L22.3515 9.33589C20.9673 10.3108 20.4612 11.705 20.5228 13.3373C20.5933 15.2138 21.0153 17.0328 21.4965 18.8385C21.5943 19.2054 21.6577 19.4768 21.3049 19.8152C20.5985 20.4924 20.3047 21.4218 20.1641 22.3672C20.0179 23.352 19.8995 24.3409 19.7811 25.3299C19.7154 25.8788 19.7122 26.3421 19.5792 26.9759C19.0702 29.4029 17.7498 31.9999 15.7498 31.9999H12.5378C11.2498 31.9999 10.2498 30.7972 10.2498 28.7972H12.5378Z" fill="#155DFC"/>
+<path d="M11.5607 1.64008C10.8347 2.775 10.091 3.85078 9.44034 4.98022C8.85324 5.9991 8.46218 7.10566 8.27283 8.28027C8.02494 9.8182 8.4235 11.1797 9.51913 12.2444C10.4211 13.1209 10.6538 14.1118 10.538 15.2919C10.2857 17.8647 9.77936 20.385 9.05131 22.863C9.04422 22.8869 9.02214 22.9064 8.97435 22.9744C8.53792 22.8381 8.07901 22.7111 7.63165 22.5524C1.38253 20.3344 -3.18062 16.2382 -6.04606 10.2575C-6.29374 9.74063 -6.51975 9.21246 -6.73158 8.68004C-6.77189 8.57878 -6.74374 8.38234 -6.66961 8.31328C-4.28698 6.09307 -1.91002 3.86617 0.50117 1.67735C2.16142 0.170403 4.14529 -0.303895 6.31143 0.184986C7.98444 0.562481 9.62828 1.06959 11.2841 1.52262C11.3961 1.5532 11.5 1.61376 11.5607 1.64008Z" fill="#155DFC"/>
+<path d="M24.2397 22.3314C23.8972 21.1864 23.5199 20.1003 23.2528 18.9878C22.9016 17.5244 22.6171 16.0438 22.3435 14.5632C22.1888 13.7264 22.35 12.9544 22.9725 12.3027C24.5667 10.6339 24.5983 8.69929 23.8328 6.67592C23.1868 4.96849 22.1482 3.49759 20.9256 2.15226C20.7825 1.9947 20.6423 1.8341 20.4795 1.65123C20.5718 1.6006 20.6427 1.54693 20.7227 1.52C22.532 0.910212 24.3624 0.387106 26.2602 0.122211C28.1953 -0.147949 29.8448 0.454544 31.2612 1.74398C32.5042 2.87545 33.7011 4.05816 34.9529 5.17971C35.9556 6.07788 37.0032 6.92664 38.0476 7.77681C38.2361 7.93012 38.2841 8.05386 38.2282 8.27602C37.2646 12.1148 35.328 15.3721 32.3643 17.9969C30.0283 20.0657 27.3376 21.4946 24.2397 22.3316V22.3314Z" fill="#155DFC"/>
 </g>
 <defs>
-<clipPath id="clip0_221_160">
-<rect width="1000" height="1000" fill="white"/>
+<clipPath id="clip0_286_152">
+<rect width="32" height="32" rx="6" fill="white"/>
 </clipPath>
 </defs>
 </svg>

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { App as AntdApp, ConfigProvider } from 'antd';
+import { App as AntdApp, ConfigProvider, theme } from 'antd';
 import { useEffect, useState } from 'react';
 import { BrowserRouter, Route } from 'react-router';
 import { Routes } from 'react-router';
@@ -7,10 +7,12 @@ import { userApi } from './entity/users';
 import { AuthPageComponent } from './pages/AuthPageComponent';
 import { OAuthCallbackPage } from './pages/OAuthCallbackPage';
 import { OauthStorageComponent } from './pages/OauthStorageComponent';
+import { ThemeProvider, useTheme } from './shared/theme';
 import { MainScreenComponent } from './widgets/main/MainScreenComponent';
 
-function App() {
+function AppContent() {
   const [isAuthorized, setIsAuthorized] = useState(false);
+  const { resolvedTheme } = useTheme();
 
   useEffect(() => {
     const isAuthorized = userApi.isAuthorized();
@@ -24,6 +26,7 @@ function App() {
   return (
     <ConfigProvider
       theme={{
+        algorithm: resolvedTheme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
         token: {
           colorPrimary: '#155dfc', // Tailwind blue-600
         },
@@ -45,4 +48,12 @@ function App() {
   );
 }
 
+function App() {
+  return (
+    <ThemeProvider>
+      <AppContent />
+    </ThemeProvider>
+  );
+}
+
 export default App;

frontend/src/entity/databases/model/postgresql/ConnectionStringParser.test.ts

@@ -0,0 +1,528 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  ConnectionStringParser,
+  type ParseError,
+  type ParseResult,
+} from './ConnectionStringParser';
+
+describe('ConnectionStringParser', () => {
+  // Helper to assert successful parse
+  const expectSuccess = (result: ParseResult | ParseError): ParseResult => {
+    expect('error' in result).toBe(false);
+    return result as ParseResult;
+  };
+
+  // Helper to assert parse error
+  const expectError = (result: ParseResult | ParseError): ParseError => {
+    expect('error' in result).toBe(true);
+    return result as ParseError;
+  };
+
+  describe('Standard PostgreSQL URI (postgresql://)', () => {
+    it('should parse basic postgresql:// connection string', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse('postgresql://myuser:mypassword@localhost:5432/mydb'),
+      );
+
+      expect(result.host).toBe('localhost');
+      expect(result.port).toBe(5432);
+      expect(result.username).toBe('myuser');
+      expect(result.password).toBe('mypassword');
+      expect(result.database).toBe('mydb');
+      expect(result.isHttps).toBe(false);
+    });
+
+    it('should default port to 5432 when not specified', () => {
+      const result = expectSuccess(ConnectionStringParser.parse('postgresql://user:pass@host/db'));
+
+      expect(result.port).toBe(5432);
+    });
+
+    it('should handle URL-encoded passwords', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse('postgresql://user:p%40ss%23word@host:5432/db'),
+      );
+
+      expect(result.password).toBe('p@ss#word');
+    });
+
+    it('should handle URL-encoded usernames', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse('postgresql://user%40domain:password@host:5432/db'),
+      );
+
+      expect(result.username).toBe('user@domain');
+    });
+  });
+
+  describe('Postgres URI (postgres://)', () => {
+    it('should parse basic postgres:// connection string', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse('postgres://admin:secret@db.example.com:5432/production'),
+      );
+
+      expect(result.host).toBe('db.example.com');
+      expect(result.port).toBe(5432);
+      expect(result.username).toBe('admin');
+      expect(result.password).toBe('secret');
+      expect(result.database).toBe('production');
+    });
+  });
+
+  describe('Supabase Direct Connection', () => {
+    it('should parse Supabase direct connection string', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'postgresql://postgres:mySecretPassword@db.abcdefghijklmnop.supabase.co:5432/postgres',
+        ),
+      );
+
+      expect(result.host).toBe('db.abcdefghijklmnop.supabase.co');
+      expect(result.port).toBe(5432);
+      expect(result.username).toBe('postgres');
+      expect(result.password).toBe('mySecretPassword');
+      expect(result.database).toBe('postgres');
+    });
+  });
+
+  describe('Supabase Pooler Connection', () => {
+    it('should parse Supabase pooler session mode connection string (port 5432)', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'postgres://postgres.abcdefghijklmnop:myPassword@aws-0-us-east-1.pooler.supabase.com:5432/postgres',
+        ),
+      );
+
+      expect(result.host).toBe('aws-0-us-east-1.pooler.supabase.com');
+      expect(result.port).toBe(5432);
+      expect(result.username).toBe('postgres.abcdefghijklmnop');
+      expect(result.password).toBe('myPassword');
+      expect(result.database).toBe('postgres');
+    });
+
+    it('should parse Supabase pooler transaction mode connection string (port 6543)', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'postgres://postgres.projectref:myPassword@aws-0-eu-west-1.pooler.supabase.com:6543/postgres',
+        ),
+      );
+
+      expect(result.host).toBe('aws-0-eu-west-1.pooler.supabase.com');
+      expect(result.port).toBe(6543);
+      expect(result.username).toBe('postgres.projectref');
+    });
+  });
+
+  describe('JDBC Connection String', () => {
+    it('should parse JDBC connection string with user and password params', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'jdbc:postgresql://localhost:5432/mydb?user=admin&password=secret',
+        ),
+      );
+
+      expect(result.host).toBe('localhost');
+      expect(result.port).toBe(5432);
+      expect(result.username).toBe('admin');
+      expect(result.password).toBe('secret');
+      expect(result.database).toBe('mydb');
+    });
+
+    it('should parse JDBC connection string without port', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'jdbc:postgresql://db.example.com/mydb?user=admin&password=secret',
+        ),
+      );
+
+      expect(result.host).toBe('db.example.com');
+      expect(result.port).toBe(5432);
+    });
+
+    it('should parse JDBC with sslmode parameter', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'jdbc:postgresql://host:5432/db?user=u&password=p&sslmode=require',
+        ),
+      );
+
+      expect(result.isHttps).toBe(true);
+    });
+
+    it('should return error for JDBC without user parameter', () => {
+      const result = expectError(
+        ConnectionStringParser.parse('jdbc:postgresql://host:5432/db?password=secret'),
+      );
+
+      expect(result.error).toContain('user');
+      expect(result.format).toBe('JDBC');
+    });
+
+    it('should return error for JDBC without password parameter', () => {
+      const result = expectError(
+        ConnectionStringParser.parse('jdbc:postgresql://host:5432/db?user=admin'),
+      );
+
+      expect(result.error).toContain('Password');
+      expect(result.format).toBe('JDBC');
+    });
+  });
+
+  describe('Neon Connection String', () => {
+    it('should parse Neon connection string', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'postgresql://neonuser:password123@ep-cool-name-123456.us-east-2.aws.neon.tech/neondb',
+        ),
+      );
+
+      expect(result.host).toBe('ep-cool-name-123456.us-east-2.aws.neon.tech');
+      expect(result.username).toBe('neonuser');
+      expect(result.database).toBe('neondb');
+    });
+  });
+
+  describe('Railway Connection String', () => {
+    it('should parse Railway connection string', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'postgresql://postgres:railwaypass@containers-us-west-123.railway.app:5432/railway',
+        ),
+      );
+
+      expect(result.host).toBe('containers-us-west-123.railway.app');
+      expect(result.username).toBe('postgres');
+      expect(result.database).toBe('railway');
+    });
+  });
+
+  describe('Render Connection String', () => {
+    it('should parse Render connection string', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'postgresql://renderuser:renderpass@dpg-abc123.oregon-postgres.render.com/mydb',
+        ),
+      );
+
+      expect(result.host).toBe('dpg-abc123.oregon-postgres.render.com');
+      expect(result.username).toBe('renderuser');
+      expect(result.database).toBe('mydb');
+    });
+  });
+
+  describe('DigitalOcean Connection String', () => {
+    it('should parse DigitalOcean connection string with sslmode', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'postgresql://doadmin:dopassword@db-postgresql-nyc1-12345-do-user-123456-0.b.db.ondigitalocean.com:25060/defaultdb?sslmode=require',
+        ),
+      );
+
+      expect(result.host).toBe('db-postgresql-nyc1-12345-do-user-123456-0.b.db.ondigitalocean.com');
+      expect(result.port).toBe(25060);
+      expect(result.username).toBe('doadmin');
+      expect(result.database).toBe('defaultdb');
+      expect(result.isHttps).toBe(true);
+    });
+  });
+
+  describe('AWS RDS Connection String', () => {
+    it('should parse AWS RDS connection string', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'postgresql://rdsuser:rdspass@mydb.abc123xyz.us-east-1.rds.amazonaws.com:5432/mydb',
+        ),
+      );
+
+      expect(result.host).toBe('mydb.abc123xyz.us-east-1.rds.amazonaws.com');
+      expect(result.username).toBe('rdsuser');
+    });
+  });
+
+  describe('Azure Database for PostgreSQL Connection String', () => {
+    it('should parse Azure connection string with user@server format', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'postgresql://myuser@myserver:mypassword@myserver.postgres.database.azure.com:5432/mydb?sslmode=require',
+        ),
+      );
+
+      expect(result.host).toBe('myserver.postgres.database.azure.com');
+      expect(result.port).toBe(5432);
+      expect(result.username).toBe('myuser');
+      expect(result.password).toBe('mypassword');
+      expect(result.database).toBe('mydb');
+      expect(result.isHttps).toBe(true);
+    });
+  });
+
+  describe('Heroku Connection String', () => {
+    it('should parse Heroku connection string', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'postgres://herokuuser:herokupass@ec2-12-34-56-789.compute-1.amazonaws.com:5432/herokudb',
+        ),
+      );
+
+      expect(result.host).toBe('ec2-12-34-56-789.compute-1.amazonaws.com');
+      expect(result.username).toBe('herokuuser');
+      expect(result.database).toBe('herokudb');
+    });
+  });
+
+  describe('CockroachDB Connection String', () => {
+    it('should parse CockroachDB connection string with sslmode=verify-full', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'postgresql://crdbuser:crdbpass@free-tier.gcp-us-central1.cockroachlabs.cloud:26257/defaultdb?sslmode=verify-full',
+        ),
+      );
+
+      expect(result.host).toBe('free-tier.gcp-us-central1.cockroachlabs.cloud');
+      expect(result.port).toBe(26257);
+      expect(result.isHttps).toBe(true);
+    });
+  });
+
+  describe('SSL Mode Handling', () => {
+    it('should set isHttps=true for sslmode=require', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse('postgresql://u:p@host:5432/db?sslmode=require'),
+      );
+
+      expect(result.isHttps).toBe(true);
+    });
+
+    it('should set isHttps=true for sslmode=verify-ca', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse('postgresql://u:p@host:5432/db?sslmode=verify-ca'),
+      );
+
+      expect(result.isHttps).toBe(true);
+    });
+
+    it('should set isHttps=true for sslmode=verify-full', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse('postgresql://u:p@host:5432/db?sslmode=verify-full'),
+      );
+
+      expect(result.isHttps).toBe(true);
+    });
+
+    it('should set isHttps=false for sslmode=disable', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse('postgresql://u:p@host:5432/db?sslmode=disable'),
+      );
+
+      expect(result.isHttps).toBe(false);
+    });
+
+    it('should set isHttps=false when no sslmode specified', () => {
+      const result = expectSuccess(ConnectionStringParser.parse('postgresql://u:p@host:5432/db'));
+
+      expect(result.isHttps).toBe(false);
+    });
+  });
+
+  describe('libpq Key-Value Format', () => {
+    it('should parse libpq format connection string', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'host=localhost port=5432 dbname=mydb user=admin password=secret',
+        ),
+      );
+
+      expect(result.host).toBe('localhost');
+      expect(result.port).toBe(5432);
+      expect(result.username).toBe('admin');
+      expect(result.password).toBe('secret');
+      expect(result.database).toBe('mydb');
+    });
+
+    it('should parse libpq format with quoted password containing spaces', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          "host=localhost port=5432 dbname=mydb user=admin password='my secret pass'",
+        ),
+      );
+
+      expect(result.password).toBe('my secret pass');
+    });
+
+    it('should default port to 5432 when not specified in libpq format', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse('host=localhost dbname=mydb user=admin password=secret'),
+      );
+
+      expect(result.port).toBe(5432);
+    });
+
+    it('should handle hostaddr as alternative to host', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'hostaddr=192.168.1.1 port=5432 dbname=mydb user=admin password=secret',
+        ),
+      );
+
+      expect(result.host).toBe('192.168.1.1');
+    });
+
+    it('should handle database as alternative to dbname', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'host=localhost port=5432 database=mydb user=admin password=secret',
+        ),
+      );
+
+      expect(result.database).toBe('mydb');
+    });
+
+    it('should handle username as alternative to user', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'host=localhost port=5432 dbname=mydb username=admin password=secret',
+        ),
+      );
+
+      expect(result.username).toBe('admin');
+    });
+
+    it('should parse sslmode in libpq format', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'host=localhost dbname=mydb user=admin password=secret sslmode=require',
+        ),
+      );
+
+      expect(result.isHttps).toBe(true);
+    });
+
+    it('should return error for libpq format missing host', () => {
+      const result = expectError(
+        ConnectionStringParser.parse('port=5432 dbname=mydb user=admin password=secret'),
+      );
+
+      expect(result.error).toContain('Host');
+      expect(result.format).toBe('libpq');
+    });
+
+    it('should return error for libpq format missing user', () => {
+      const result = expectError(
+        ConnectionStringParser.parse('host=localhost dbname=mydb password=secret'),
+      );
+
+      expect(result.error).toContain('Username');
+      expect(result.format).toBe('libpq');
+    });
+
+    it('should return error for libpq format missing password', () => {
+      const result = expectError(
+        ConnectionStringParser.parse('host=localhost dbname=mydb user=admin'),
+      );
+
+      expect(result.error).toContain('Password');
+      expect(result.format).toBe('libpq');
+    });
+
+    it('should return error for libpq format missing dbname', () => {
+      const result = expectError(
+        ConnectionStringParser.parse('host=localhost user=admin password=secret'),
+      );
+
+      expect(result.error).toContain('Database');
+      expect(result.format).toBe('libpq');
+    });
+  });
+
+  describe('Error Cases', () => {
+    it('should return error for empty string', () => {
+      const result = expectError(ConnectionStringParser.parse(''));
+
+      expect(result.error).toContain('empty');
+    });
+
+    it('should return error for whitespace-only string', () => {
+      const result = expectError(ConnectionStringParser.parse('   '));
+
+      expect(result.error).toContain('empty');
+    });
+
+    it('should return error for unrecognized format', () => {
+      const result = expectError(ConnectionStringParser.parse('some random text'));
+
+      expect(result.error).toContain('Unrecognized');
+    });
+
+    it('should return error for missing username in URI', () => {
+      const result = expectError(
+        ConnectionStringParser.parse('postgresql://:password@host:5432/db'),
+      );
+
+      expect(result.error).toContain('Username');
+    });
+
+    it('should return error for missing password in URI', () => {
+      const result = expectError(ConnectionStringParser.parse('postgresql://user@host:5432/db'));
+
+      expect(result.error).toContain('Password');
+    });
+
+    it('should return error for missing database in URI', () => {
+      const result = expectError(ConnectionStringParser.parse('postgresql://user:pass@host:5432/'));
+
+      expect(result.error).toContain('Database');
+    });
+
+    it('should return error for invalid JDBC format', () => {
+      const result = expectError(ConnectionStringParser.parse('jdbc:postgresql://invalid'));
+
+      expect(result.format).toBe('JDBC');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle special characters in password', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse('postgresql://user:p%40ss%3Aw%2Ford@host:5432/db'),
+      );
+
+      expect(result.password).toBe('p@ss:w/ord');
+    });
+
+    it('should handle numeric database names', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse('postgresql://user:pass@host:5432/12345'),
+      );
+
+      expect(result.database).toBe('12345');
+    });
+
+    it('should handle hyphenated host names', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse('postgresql://user:pass@my-database-host.example.com:5432/db'),
+      );
+
+      expect(result.host).toBe('my-database-host.example.com');
+    });
+
+    it('should handle connection string with extra query parameters', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse(
+          'postgresql://user:pass@host:5432/db?sslmode=require&connect_timeout=10&application_name=myapp',
+        ),
+      );
+
+      expect(result.isHttps).toBe(true);
+      expect(result.database).toBe('db');
+    });
+
+    it('should trim whitespace from connection string', () => {
+      const result = expectSuccess(
+        ConnectionStringParser.parse('  postgresql://user:pass@host:5432/db  '),
+      );
+
+      expect(result.host).toBe('host');
+    });
+  });
+});

frontend/src/entity/databases/model/postgresql/ConnectionStringParser.ts

@@ -0,0 +1,284 @@
+export type ParseResult = {
+  host: string;
+  port: number;
+  username: string;
+  password: string;
+  database: string;
+  isHttps: boolean;
+};
+
+export type ParseError = {
+  error: string;
+  format?: string;
+};
+
+export class ConnectionStringParser {
+  /**
+   * Parses a PostgreSQL connection string in various formats.
+   *
+   * Supported formats:
+   * 1. Standard PostgreSQL URI: postgresql://user:pass@host:port/db
+   * 2. Postgres URI: postgres://user:pass@host:port/db
+   * 3. Supabase Direct: postgresql://postgres:pass@db.xxx.supabase.co:5432/postgres
+   * 4. Supabase Pooler Session: postgres://postgres.ref:pass@aws-0-region.pooler.supabase.com:5432/postgres
+   * 5. Supabase Pooler Transaction: same as above with port 6543
+   * 6. JDBC: jdbc:postgresql://host:port/db?user=x&password=y
+   * 7. Neon: postgresql://user:pass@ep-xxx.neon.tech/db
+   * 8. Railway: postgresql://postgres:pass@xxx.railway.app:port/railway
+   * 9. Render: postgresql://user:pass@xxx.render.com/db
+   * 10. DigitalOcean: postgresql://user:pass@xxx.ondigitalocean.com:port/db?sslmode=require
+   * 11. AWS RDS: postgresql://user:pass@xxx.rds.amazonaws.com:port/db
+   * 12. Azure: postgresql://user@server:pass@xxx.postgres.database.azure.com:port/db?sslmode=require
+   * 13. Heroku: postgres://user:pass@ec2-xxx.amazonaws.com:port/db
+   * 14. CockroachDB: postgresql://user:pass@xxx.cockroachlabs.cloud:port/db?sslmode=verify-full
+   * 15. With SSL params: postgresql://user:pass@host:port/db?sslmode=require
+   * 16. libpq key-value: host=x port=5432 dbname=db user=u password=p
+   */
+  static parse(connectionString: string): ParseResult | ParseError {
+    const trimmed = connectionString.trim();
+
+    if (!trimmed) {
+      return { error: 'Connection string is empty' };
+    }
+
+    // Try JDBC format first (starts with jdbc:)
+    if (trimmed.startsWith('jdbc:postgresql://')) {
+      return this.parseJdbc(trimmed);
+    }
+
+    // Try libpq key-value format (contains key=value pairs without ://)
+    if (this.isLibpqFormat(trimmed)) {
+      return this.parseLibpq(trimmed);
+    }
+
+    // Try URI format (postgresql:// or postgres://)
+    if (trimmed.startsWith('postgresql://') || trimmed.startsWith('postgres://')) {
+      return this.parseUri(trimmed);
+    }
+
+    return {
+      error: 'Unrecognized connection string format',
+    };
+  }
+
+  private static isLibpqFormat(str: string): boolean {
+    // libpq format has key=value pairs separated by spaces
+    // Must contain at least host= or dbname= to be considered libpq format
+    return (
+      !str.includes('://') &&
+      (str.includes('host=') || str.includes('dbname=')) &&
+      str.includes('=')
+    );
+  }
+
+  private static parseUri(connectionString: string): ParseResult | ParseError {
+    try {
+      // Handle Azure format where username contains @: user@server:pass
+      // Azure format: postgresql://user@servername:password@host:port/db
+      const azureMatch = connectionString.match(
+        /^postgres(?:ql)?:\/\/([^@:]+)@([^:]+):([^@]+)@([^:/?]+):?(\d+)?\/([^?]+)(?:\?(.*))?$/,
+      );
+
+      if (azureMatch) {
+        const [, user, , password, host, port, database, queryString] = azureMatch;
+        const isHttps = this.checkSslMode(queryString);
+
+        return {
+          host: host,
+          port: port ? parseInt(port, 10) : 5432,
+          username: decodeURIComponent(user),
+          password: decodeURIComponent(password),
+          database: decodeURIComponent(database),
+          isHttps,
+        };
+      }
+
+      // Standard URI parsing using URL API
+      const url = new URL(connectionString);
+
+      const host = url.hostname;
+      const port = url.port ? parseInt(url.port, 10) : 5432;
+      const username = decodeURIComponent(url.username);
+      const password = decodeURIComponent(url.password);
+      const database = decodeURIComponent(url.pathname.slice(1)); // Remove leading /
+      const isHttps = this.checkSslMode(url.search);
+
+      // Validate required fields
+      if (!host) {
+        return { error: 'Host is missing from connection string' };
+      }
+
+      if (!username) {
+        return { error: 'Username is missing from connection string' };
+      }
+
+      if (!password) {
+        return { error: 'Password is missing from connection string' };
+      }
+
+      if (!database) {
+        return { error: 'Database name is missing from connection string' };
+      }
+
+      return {
+        host,
+        port,
+        username,
+        password,
+        database,
+        isHttps,
+      };
+    } catch (e) {
+      return {
+        error: `Failed to parse connection string: ${(e as Error).message}`,
+        format: 'URI',
+      };
+    }
+  }
+
+  private static parseJdbc(connectionString: string): ParseResult | ParseError {
+    try {
+      // JDBC format: jdbc:postgresql://host:port/database?user=x&password=y
+      const jdbcRegex = /^jdbc:postgresql:\/\/([^:/?]+):?(\d+)?\/([^?]+)(?:\?(.*))?$/;
+      const match = connectionString.match(jdbcRegex);
+
+      if (!match) {
+        return {
+          error:
+            'Invalid JDBC connection string format. Expected: jdbc:postgresql://host:port/database?user=x&password=y',
+          format: 'JDBC',
+        };
+      }
+
+      const [, host, port, database, queryString] = match;
+
+      if (!queryString) {
+        return {
+          error: 'JDBC connection string is missing query parameters (user and password)',
+          format: 'JDBC',
+        };
+      }
+
+      const params = new URLSearchParams(queryString);
+      const username = params.get('user');
+      const password = params.get('password');
+      const isHttps = this.checkSslMode(queryString);
+
+      if (!username) {
+        return {
+          error: 'Username (user parameter) is missing from JDBC connection string',
+          format: 'JDBC',
+        };
+      }
+
+      if (!password) {
+        return {
+          error: 'Password parameter is missing from JDBC connection string',
+          format: 'JDBC',
+        };
+      }
+
+      return {
+        host,
+        port: port ? parseInt(port, 10) : 5432,
+        username: decodeURIComponent(username),
+        password: decodeURIComponent(password),
+        database: decodeURIComponent(database),
+        isHttps,
+      };
+    } catch (e) {
+      return {
+        error: `Failed to parse JDBC connection string: ${(e as Error).message}`,
+        format: 'JDBC',
+      };
+    }
+  }
+
+  private static parseLibpq(connectionString: string): ParseResult | ParseError {
+    try {
+      // libpq format: host=x port=5432 dbname=db user=u password=p
+      // Values can be quoted with single quotes: password='my pass'
+      const params: Record<string, string> = {};
+
+      // Match key=value or key='quoted value'
+      const regex = /(\w+)=(?:'([^']*)'|(\S+))/g;
+      let match;
+
+      while ((match = regex.exec(connectionString)) !== null) {
+        const key = match[1];
+        const value = match[2] !== undefined ? match[2] : match[3];
+        params[key] = value;
+      }
+
+      const host = params['host'] || params['hostaddr'];
+      const port = params['port'];
+      const database = params['dbname'] || params['database'];
+      const username = params['user'] || params['username'];
+      const password = params['password'];
+      const sslmode = params['sslmode'];
+
+      if (!host) {
+        return {
+          error: 'Host is missing from connection string. Use host=hostname',
+          format: 'libpq',
+        };
+      }
+
+      if (!username) {
+        return {
+          error: 'Username is missing from connection string. Use user=username',
+          format: 'libpq',
+        };
+      }
+
+      if (!password) {
+        return {
+          error: 'Password is missing from connection string. Use password=yourpassword',
+          format: 'libpq',
+        };
+      }
+
+      if (!database) {
+        return {
+          error: 'Database name is missing from connection string. Use dbname=database',
+          format: 'libpq',
+        };
+      }
+
+      const isHttps = this.isSslEnabled(sslmode);
+
+      return {
+        host,
+        port: port ? parseInt(port, 10) : 5432,
+        username,
+        password,
+        database,
+        isHttps,
+      };
+    } catch (e) {
+      return {
+        error: `Failed to parse libpq connection string: ${(e as Error).message}`,
+        format: 'libpq',
+      };
+    }
+  }
+
+  private static checkSslMode(queryString: string | undefined | null): boolean {
+    if (!queryString) return false;
+
+    const params = new URLSearchParams(
+      queryString.startsWith('?') ? queryString.slice(1) : queryString,
+    );
+    const sslmode = params.get('sslmode');
+
+    return this.isSslEnabled(sslmode);
+  }
+
+  private static isSslEnabled(sslmode: string | null | undefined): boolean {
+    if (!sslmode) return false;
+
+    // These modes require SSL
+    const sslModes = ['require', 'verify-ca', 'verify-full'];
+    return sslModes.includes(sslmode.toLowerCase());
+  }
+}

frontend/src/entity/databases/model/postgresql/PostgresqlDatabase.ts

@@ -11,4 +11,7 @@ export interface PostgresqlDatabase {
   password: string;
   database?: string;
   isHttps: boolean;
+
+  // backup settings
+  includeSchemas?: string[];
 }

frontend/src/entity/notifiers/index.ts

@@ -9,6 +9,7 @@ export type { TelegramNotifier } from './models/telegram/TelegramNotifier';
 export { validateTelegramNotifier } from './models/telegram/validateTelegramNotifier';
 
 export type { WebhookNotifier } from './models/webhook/WebhookNotifier';
+export type { WebhookHeader } from './models/webhook/WebhookHeader';
 export { validateWebhookNotifier } from './models/webhook/validateWebhookNotifier';
 export { WebhookMethod } from './models/webhook/WebhookMethod';
 

frontend/src/entity/notifiers/models/email/validateEmailNotifier.ts

@@ -1,6 +1,6 @@
 import type { EmailNotifier } from './EmailNotifier';
 
-export const validateEmailNotifier = (isCreate: boolean, notifier: EmailNotifier): boolean => {
+export const validateEmailNotifier = (notifier: EmailNotifier): boolean => {
   if (!notifier.targetEmail) {
     return false;
   }
@@ -13,9 +13,5 @@ export const validateEmailNotifier = (isCreate: boolean, notifier: EmailNotifier
     return false;
   }
 
-  if (isCreate && !notifier.smtpPassword) {
-    return false;
-  }
-
   return true;
 };

frontend/src/entity/notifiers/models/webhook/WebhookHeader.ts

@@ -0,0 +1,4 @@
+export interface WebhookHeader {
+  key: string;
+  value: string;
+}

frontend/src/entity/notifiers/models/webhook/WebhookNotifier.ts

@@ -1,6 +1,9 @@
+import type { WebhookHeader } from './WebhookHeader';
 import type { WebhookMethod } from './WebhookMethod';
 
 export interface WebhookNotifier {
   webhookUrl: string;
   webhookMethod: WebhookMethod;
+  bodyTemplate?: string;
+  headers?: WebhookHeader[];
 }

frontend/src/entity/storages/models/S3Storage.ts

@@ -6,4 +6,5 @@ export interface S3Storage {
   s3Endpoint?: string;
   s3Prefix?: string;
   s3UseVirtualHostedStyle?: boolean;
+  skipTLSVerify?: boolean;
 }

frontend/src/features/backups/ui/BackupsComponent.tsx

@@ -281,6 +281,163 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
     return () => container.removeEventListener('scroll', handleScroll);
   }, [hasMore, isLoadingMore, currentLimit, scrollContainerRef]);
 
+  const renderStatus = (status: BackupStatus, record: Backup) => {
+    if (status === BackupStatus.FAILED) {
+      return (
+        <Tooltip title="Click to see error details">
+          <div
+            className="flex cursor-pointer items-center text-red-600 underline"
+            onClick={() => setShowingBackupError(record)}
+          >
+            <ExclamationCircleOutlined className="mr-2" style={{ fontSize: 16 }} />
+            <div>Failed</div>
+          </div>
+        </Tooltip>
+      );
+    }
+
+    if (status === BackupStatus.COMPLETED) {
+      return (
+        <div className="flex items-center text-green-600">
+          <CheckCircleOutlined className="mr-2" style={{ fontSize: 16 }} />
+          <div>Successful</div>
+          {record.encryption === BackupEncryption.ENCRYPTED && (
+            <Tooltip title="Encrypted">
+              <LockOutlined className="ml-1" style={{ fontSize: 14 }} />
+            </Tooltip>
+          )}
+        </div>
+      );
+    }
+
+    if (status === BackupStatus.DELETED) {
+      return (
+        <div className="flex items-center text-gray-600">
+          <DeleteOutlined className="mr-2" style={{ fontSize: 16 }} />
+          <div>Deleted</div>
+        </div>
+      );
+    }
+
+    if (status === BackupStatus.IN_PROGRESS) {
+      return (
+        <div className="flex items-center font-bold text-blue-600">
+          <SyncOutlined spin />
+          <span className="ml-2">In progress</span>
+        </div>
+      );
+    }
+
+    if (status === BackupStatus.CANCELED) {
+      return (
+        <div className="flex items-center text-gray-600">
+          <CloseCircleOutlined className="mr-2" style={{ fontSize: 16 }} />
+          <div>Canceled</div>
+        </div>
+      );
+    }
+
+    return <span className="font-bold">{status}</span>;
+  };
+
+  const renderActions = (record: Backup) => {
+    return (
+      <div className="flex gap-2 text-lg">
+        {record.status === BackupStatus.IN_PROGRESS && isCanManageDBs && (
+          <div className="flex gap-2">
+            {cancellingBackupId === record.id ? (
+              <SyncOutlined spin />
+            ) : (
+              <Tooltip title="Cancel backup">
+                <CloseCircleOutlined
+                  className="cursor-pointer"
+                  onClick={() => {
+                    if (cancellingBackupId) return;
+                    cancelBackup(record.id);
+                  }}
+                  style={{ color: '#ff0000', opacity: cancellingBackupId ? 0.2 : 1 }}
+                />
+              </Tooltip>
+            )}
+          </div>
+        )}
+
+        {record.status === BackupStatus.COMPLETED && (
+          <div className="flex gap-2">
+            {deletingBackupId === record.id ? (
+              <SyncOutlined spin />
+            ) : (
+              <>
+                {isCanManageDBs && (
+                  <Tooltip title="Delete backup">
+                    <DeleteOutlined
+                      className="cursor-pointer"
+                      onClick={() => {
+                        if (deletingBackupId) return;
+                        setDeleteConfimationId(record.id);
+                      }}
+                      style={{ color: '#ff0000', opacity: deletingBackupId ? 0.2 : 1 }}
+                    />
+                  </Tooltip>
+                )}
+
+                <Tooltip title="Restore from backup">
+                  <CloudUploadOutlined
+                    className="cursor-pointer"
+                    onClick={() => {
+                      setShowingRestoresBackupId(record.id);
+                    }}
+                    style={{
+                      color: '#155dfc',
+                    }}
+                  />
+                </Tooltip>
+
+                <Tooltip title="Download backup file. It can be restored manually via pg_restore (from custom format)">
+                  {downloadingBackupId === record.id ? (
+                    <SyncOutlined spin style={{ color: '#155dfc' }} />
+                  ) : (
+                    <DownloadOutlined
+                      className="cursor-pointer"
+                      onClick={() => {
+                        if (downloadingBackupId) return;
+                        setDownloadingBackupId(record.id);
+                      }}
+                      style={{
+                        opacity: downloadingBackupId ? 0.2 : 1,
+                        color: '#155dfc',
+                      }}
+                    />
+                  )}
+                </Tooltip>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const formatSize = (sizeMb: number) => {
+    if (sizeMb >= 1024) {
+      const sizeGb = sizeMb / 1024;
+      return `${Number(sizeGb.toFixed(2)).toLocaleString()} GB`;
+    }
+    return `${Number(sizeMb?.toFixed(2)).toLocaleString()} MB`;
+  };
+
+  const formatDuration = (durationMs: number) => {
+    const hours = Math.floor(durationMs / 3600000);
+    const minutes = Math.floor((durationMs % 3600000) / 60000);
+    const seconds = Math.floor((durationMs % 60000) / 1000);
+
+    if (hours > 0) {
+      return `${hours}h ${minutes}m ${seconds}s`;
+    }
+
+    return `${minutes}m ${seconds}s`;
+  };
+
   const columns: ColumnsType<Backup> = [
     {
       title: 'Created at',
@@ -289,7 +446,9 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
       render: (createdAt: string) => (
         <div>
           {dayjs.utc(createdAt).local().format(getUserTimeFormat().format)} <br />
-          <span className="text-gray-500">({dayjs.utc(createdAt).local().fromNow()})</span>
+          <span className="text-gray-500 dark:text-gray-400">
+            ({dayjs.utc(createdAt).local().fromNow()})
+          </span>
         </div>
       ),
       sorter: (a, b) => dayjs(a.createdAt).unix() - dayjs(b.createdAt).unix(),
@@ -299,66 +458,7 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
       title: 'Status',
       dataIndex: 'status',
       key: 'status',
-      render: (status: BackupStatus, record: Backup) => {
-        if (status === BackupStatus.FAILED) {
-          return (
-            <Tooltip title="Click to see error details">
-              <div
-                className="flex cursor-pointer items-center text-red-600 underline"
-                onClick={() => setShowingBackupError(record)}
-              >
-                <ExclamationCircleOutlined className="mr-2" style={{ fontSize: 16 }} />
-
-                <div>Failed</div>
-              </div>
-            </Tooltip>
-          );
-        }
-
-        if (status === BackupStatus.COMPLETED) {
-          return (
-            <div className="flex items-center text-green-600">
-              <CheckCircleOutlined className="mr-2" style={{ fontSize: 16 }} />
-              <div>Successful</div>
-
-              {record.encryption === BackupEncryption.ENCRYPTED && (
-                <Tooltip title="Encrypted">
-                  <LockOutlined className="ml-1" style={{ fontSize: 14 }} />
-                </Tooltip>
-              )}
-            </div>
-          );
-        }
-
-        if (status === BackupStatus.DELETED) {
-          return (
-            <div className="flex items-center text-gray-600">
-              <DeleteOutlined className="mr-2" style={{ fontSize: 16 }} />
-              <div>Deleted</div>
-            </div>
-          );
-        }
-
-        if (status === BackupStatus.IN_PROGRESS) {
-          return (
-            <div className="flex items-center font-bold text-blue-600">
-              <SyncOutlined spin />
-              <span className="ml-2">In progress</span>
-            </div>
-          );
-        }
-
-        if (status === BackupStatus.CANCELED) {
-          return (
-            <div className="flex items-center text-gray-600">
-              <CloseCircleOutlined className="mr-2" style={{ fontSize: 16 }} />
-              <div>Canceled</div>
-            </div>
-          );
-        }
-
-        return <span className="font-bold">{status}</span>;
-      },
+      render: (status: BackupStatus, record: Backup) => renderStatus(status, record),
       filters: [
         {
           value: BackupStatus.IN_PROGRESS,
@@ -398,112 +498,20 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
       dataIndex: 'backupSizeMb',
       key: 'backupSizeMb',
       width: 150,
-      render: (sizeMb: number) => {
-        if (sizeMb >= 1024) {
-          const sizeGb = sizeMb / 1024;
-          return `${Number(sizeGb.toFixed(2)).toLocaleString()} GB`;
-        }
-        return `${Number(sizeMb?.toFixed(2)).toLocaleString()} MB`;
-      },
+      render: (sizeMb: number) => formatSize(sizeMb),
     },
     {
       title: 'Duration',
       dataIndex: 'backupDurationMs',
       key: 'backupDurationMs',
       width: 150,
-      render: (durationMs: number) => {
-        const hours = Math.floor(durationMs / 3600000);
-        const minutes = Math.floor((durationMs % 3600000) / 60000);
-        const seconds = Math.floor((durationMs % 60000) / 1000);
-
-        if (hours > 0) {
-          return `${hours}h ${minutes}m ${seconds}s`;
-        }
-
-        return `${minutes}m ${seconds}s`;
-      },
+      render: (durationMs: number) => formatDuration(durationMs),
     },
     {
       title: 'Actions',
       dataIndex: '',
       key: '',
-      render: (_, record: Backup) => {
-        return (
-          <div className="flex gap-2 text-lg">
-            {record.status === BackupStatus.IN_PROGRESS && isCanManageDBs && (
-              <div className="flex gap-2">
-                {cancellingBackupId === record.id ? (
-                  <SyncOutlined spin />
-                ) : (
-                  <Tooltip title="Cancel backup">
-                    <CloseCircleOutlined
-                      className="cursor-pointer"
-                      onClick={() => {
-                        if (cancellingBackupId) return;
-                        cancelBackup(record.id);
-                      }}
-                      style={{ color: '#ff0000', opacity: cancellingBackupId ? 0.2 : 1 }}
-                    />
-                  </Tooltip>
-                )}
-              </div>
-            )}
-
-            {record.status === BackupStatus.COMPLETED && (
-              <div className="flex gap-2">
-                {deletingBackupId === record.id ? (
-                  <SyncOutlined spin />
-                ) : (
-                  <>
-                    {isCanManageDBs && (
-                      <Tooltip title="Delete backup">
-                        <DeleteOutlined
-                          className="cursor-pointer"
-                          onClick={() => {
-                            if (deletingBackupId) return;
-                            setDeleteConfimationId(record.id);
-                          }}
-                          style={{ color: '#ff0000', opacity: deletingBackupId ? 0.2 : 1 }}
-                        />
-                      </Tooltip>
-                    )}
-
-                    <Tooltip title="Restore from backup">
-                      <CloudUploadOutlined
-                        className="cursor-pointer"
-                        onClick={() => {
-                          setShowingRestoresBackupId(record.id);
-                        }}
-                        style={{
-                          color: '#155dfc',
-                        }}
-                      />
-                    </Tooltip>
-
-                    <Tooltip title="Download backup file. It can be restored manually via pg_restore (from custom format)">
-                      {downloadingBackupId === record.id ? (
-                        <SyncOutlined spin style={{ color: '#155dfc' }} />
-                      ) : (
-                        <DownloadOutlined
-                          className="cursor-pointer"
-                          onClick={() => {
-                            if (downloadingBackupId) return;
-                            setDownloadingBackupId(record.id);
-                          }}
-                          style={{
-                            opacity: downloadingBackupId ? 0.2 : 1,
-                            color: '#155dfc',
-                          }}
-                        />
-                      )}
-                    </Tooltip>
-                  </>
-                )}
-              </div>
-            )}
-          </div>
-        );
-      },
+      render: (_, record: Backup) => renderActions(record),
     },
   ];
 
@@ -516,11 +524,11 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
   }
 
   return (
-    <div className="mt-5 w-full rounded-md bg-white p-5 shadow">
-      <h2 className="text-xl font-bold">Backups</h2>
+    <div className="mt-5 w-full rounded-md bg-white p-3 shadow md:p-5 dark:bg-gray-800">
+      <h2 className="text-lg font-bold md:text-xl dark:text-white">Backups</h2>
 
       {!isBackupConfigLoading && !backupConfig?.isBackupsEnabled && (
-        <div className="text-red-600">
+        <div className="text-sm text-red-600 md:text-base">
           Scheduled backups are disabled (you can enable it back in the backup configuration)
         </div>
       )}
@@ -535,30 +543,98 @@ export const BackupsComponent = ({ database, isCanManageDBs, scrollContainerRef
           disabled={isMakeBackupRequestLoading}
           loading={isMakeBackupRequestLoading}
         >
-          Make backup right now
+          <span className="md:hidden">Backup now</span>
+          <span className="hidden md:inline">Make backup right now</span>
         </Button>
       </div>
 
-      <div className="mt-5 max-w-[850px]">
-        <Table
-          bordered
-          columns={columns}
-          dataSource={backups}
-          rowKey="id"
-          loading={isBackupsLoading}
-          size="small"
-          pagination={false}
-        />
-        {isLoadingMore && (
-          <div className="mt-2 flex justify-center">
-            <Spin />
-          </div>
-        )}
-        {!hasMore && backups.length > 0 && (
-          <div className="mt-2 text-center text-gray-500">
-            All backups loaded ({totalBackups} total)
-          </div>
-        )}
+      <div className="mt-5 w-full md:max-w-[850px]">
+        {/* Mobile card view */}
+        <div className="md:hidden">
+          {isBackupsLoading ? (
+            <div className="flex justify-center py-8">
+              <Spin />
+            </div>
+          ) : (
+            <div>
+              {backups.map((backup) => (
+                <div
+                  key={backup.id}
+                  className="mb-2 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800"
+                >
+                  <div className="space-y-3">
+                    <div className="flex items-start justify-between">
+                      <div>
+                        <div className="text-xs text-gray-500 dark:text-gray-400">Created at</div>
+                        <div className="text-sm font-medium">
+                          {dayjs.utc(backup.createdAt).local().format(getUserTimeFormat().format)}
+                        </div>
+                        <div className="text-xs text-gray-500 dark:text-gray-400">
+                          ({dayjs.utc(backup.createdAt).local().fromNow()})
+                        </div>
+                      </div>
+                      <div>{renderStatus(backup.status, backup)}</div>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <div className="text-xs text-gray-500 dark:text-gray-400">Size</div>
+                        <div className="text-sm font-medium">{formatSize(backup.backupSizeMb)}</div>
+                      </div>
+                      <div>
+                        <div className="text-xs text-gray-500 dark:text-gray-400">Duration</div>
+                        <div className="text-sm font-medium">
+                          {formatDuration(backup.backupDurationMs)}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center justify-end border-t border-gray-200 pt-3">
+                      {renderActions(backup)}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {isLoadingMore && (
+            <div className="mt-3 flex justify-center">
+              <Spin />
+            </div>
+          )}
+          {!hasMore && backups.length > 0 && (
+            <div className="mt-3 text-center text-sm text-gray-500 dark:text-gray-400">
+              All backups loaded ({totalBackups} total)
+            </div>
+          )}
+          {!isBackupsLoading && backups.length === 0 && (
+            <div className="py-8 text-center text-gray-500 dark:text-gray-400">No backups yet</div>
+          )}
+        </div>
+
+        {/* Desktop table view */}
+        <div className="hidden md:block">
+          <Table
+            bordered
+            columns={columns}
+            dataSource={backups}
+            rowKey="id"
+            loading={isBackupsLoading}
+            size="small"
+            pagination={false}
+          />
+          {isLoadingMore && (
+            <div className="mt-2 flex justify-center">
+              <Spin />
+            </div>
+          )}
+          {!hasMore && backups.length > 0 && (
+            <div className="mt-2 text-center text-gray-500 dark:text-gray-400">
+              All backups loaded ({totalBackups} total)
+            </div>
+          )}
+        </div>
       </div>
 
       {deleteConfimationId && (

frontend/src/features/backups/ui/EditBackupConfigComponent.tsx

@@ -204,8 +204,8 @@ export const EditBackupConfigComponent = ({
 
   return (
     <div>
-      <div className="mb-1 flex w-full items-center">
-        <div className="min-w-[150px]">Backups enabled</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">Backups enabled</div>
         <Switch
           checked={backupConfig.isBackupsEnabled}
           onChange={(checked) => {
@@ -217,13 +217,13 @@ export const EditBackupConfigComponent = ({
 
       {backupConfig.isBackupsEnabled && (
         <>
-          <div className="mt-4 mb-1 flex w-full items-center">
-            <div className="min-w-[150px]">Backup interval</div>
+          <div className="mt-4 mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+            <div className="mb-1 min-w-[150px] sm:mb-0">Backup interval</div>
             <Select
               value={backupInterval?.interval}
               onChange={(v) => saveInterval({ interval: v })}
               size="small"
-              className="max-w-[200px] grow"
+              className="w-full max-w-[200px] grow"
               options={[
                 { label: 'Hourly', value: IntervalType.HOURLY },
                 { label: 'Daily', value: IntervalType.DAILY },
@@ -234,8 +234,8 @@ export const EditBackupConfigComponent = ({
           </div>
 
           {backupInterval?.interval === IntervalType.WEEKLY && (
-            <div className="mb-1 flex w-full items-center">
-              <div className="min-w-[150px]">Backup weekday</div>
+            <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+              <div className="mb-1 min-w-[150px] sm:mb-0">Backup weekday</div>
               <Select
                 value={displayedWeekday}
                 onChange={(localWeekday) => {
@@ -244,15 +244,15 @@ export const EditBackupConfigComponent = ({
                   saveInterval({ weekday: getUtcWeekday(localWeekday, ref) });
                 }}
                 size="small"
-                className="max-w-[200px] grow"
+                className="w-full max-w-[200px] grow"
                 options={weekdayOptions}
               />
             </div>
           )}
 
           {backupInterval?.interval === IntervalType.MONTHLY && (
-            <div className="mb-1 flex w-full items-center">
-              <div className="min-w-[150px]">Backup day of month</div>
+            <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+              <div className="mb-1 min-w-[150px] sm:mb-0">Backup day of month</div>
               <InputNumber
                 min={1}
                 max={31}
@@ -263,21 +263,21 @@ export const EditBackupConfigComponent = ({
                   saveInterval({ dayOfMonth: getUtcDayOfMonth(localDom, ref) });
                 }}
                 size="small"
-                className="max-w-[200px] grow"
+                className="w-full max-w-[200px] grow"
               />
             </div>
           )}
 
           {backupInterval?.interval !== IntervalType.HOURLY && (
-            <div className="mb-1 flex w-full items-center">
-              <div className="min-w-[150px]">Backup time of day</div>
+            <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+              <div className="mb-1 min-w-[150px] sm:mb-0">Backup time of day</div>
               <TimePicker
                 value={localTime}
                 format={timeFormat.format}
                 use12Hours={timeFormat.use12Hours}
                 allowClear={false}
                 size="small"
-                className="max-w-[200px] grow"
+                className="w-full max-w-[200px] grow"
                 onChange={(t) => {
                   if (!t) return;
                   const patch: Partial<Interval> = { timeOfDay: t.utc().format('HH:mm') };
@@ -295,156 +295,168 @@ export const EditBackupConfigComponent = ({
             </div>
           )}
 
-          <div className="mt-4 mb-1 flex w-full items-center">
-            <div className="min-w-[150px]">Retry backup if failed</div>
-            <Switch
-              size="small"
-              checked={backupConfig.isRetryIfFailed}
-              onChange={(checked) => updateBackupConfig({ isRetryIfFailed: checked })}
-            />
-
-            <Tooltip
-              className="cursor-pointer"
-              title="Automatically retry failed backups. Backups can fail due to network failures, storage issues or temporary database unavailability."
-            >
-              <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-            </Tooltip>
-          </div>
-
-          {backupConfig.isRetryIfFailed && (
-            <div className="mb-1 flex w-full items-center">
-              <div className="min-w-[150px]">Max failed tries count</div>
-              <InputNumber
-                min={1}
-                max={10}
-                value={backupConfig.maxFailedTriesCount}
-                onChange={(value) => updateBackupConfig({ maxFailedTriesCount: value || 1 })}
+          <div className="mt-4 mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+            <div className="mb-1 min-w-[150px] sm:mb-0">Retry backup if failed</div>
+            <div className="flex items-center">
+              <Switch
                 size="small"
-                className="max-w-[200px] grow"
+                checked={backupConfig.isRetryIfFailed}
+                onChange={(checked) => updateBackupConfig({ isRetryIfFailed: checked })}
               />
 
               <Tooltip
                 className="cursor-pointer"
-                title="Maximum number of retry attempts for failed backups. You will receive a notification when all tries have failed."
+                title="Automatically retry failed backups. Backups can fail due to network failures, storage issues or temporary database unavailability."
               >
                 <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
               </Tooltip>
             </div>
-          )}
-
-          <div className="mt-5 mb-1 flex w-full items-center">
-            <div className="min-w-[150px]">CPU count</div>
-            <InputNumber
-              min={1}
-              max={16}
-              value={backupConfig.cpuCount}
-              onChange={(value) => updateBackupConfig({ cpuCount: value || 1 })}
-              size="small"
-              className="max-w-[200px] grow"
-            />
-
-            <Tooltip
-              className="cursor-pointer"
-              title="Number of CPU cores to use for restore processing. Higher values may speed up restores, but use more resources."
-            >
-              <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-            </Tooltip>
           </div>
 
-          <div className="mb-1 flex w-full items-center">
-            <div className="min-w-[150px]">Store period</div>
-            <Select
-              value={backupConfig.storePeriod}
-              onChange={(v) => updateBackupConfig({ storePeriod: v })}
-              size="small"
-              className="max-w-[200px] grow"
-              options={[
-                { label: '1 day', value: Period.DAY },
-                { label: '1 week', value: Period.WEEK },
-                { label: '1 month', value: Period.MONTH },
-                { label: '3 months', value: Period.THREE_MONTH },
-                { label: '6 months', value: Period.SIX_MONTH },
-                { label: '1 year', value: Period.YEAR },
-                { label: '2 years', value: Period.TWO_YEARS },
-                { label: '3 years', value: Period.THREE_YEARS },
-                { label: '4 years', value: Period.FOUR_YEARS },
-                { label: '5 years', value: Period.FIVE_YEARS },
-                { label: 'Forever', value: Period.FOREVER },
-              ]}
-            />
+          {backupConfig.isRetryIfFailed && (
+            <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+              <div className="mb-1 min-w-[150px] sm:mb-0">Max failed tries count</div>
+              <div className="flex items-center">
+                <InputNumber
+                  min={1}
+                  max={10}
+                  value={backupConfig.maxFailedTriesCount}
+                  onChange={(value) => updateBackupConfig({ maxFailedTriesCount: value || 1 })}
+                  size="small"
+                  className="w-full max-w-[200px] grow"
+                />
 
-            <Tooltip
-              className="cursor-pointer"
-              title="How long to keep the backups? Make sure you have enough storage space."
-            >
-              <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-            </Tooltip>
+                <Tooltip
+                  className="cursor-pointer"
+                  title="Maximum number of retry attempts for failed backups. You will receive a notification when all tries have failed."
+                >
+                  <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+                </Tooltip>
+              </div>
+            </div>
+          )}
+
+          <div className="mt-5 mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+            <div className="mb-1 min-w-[150px] sm:mb-0">CPU count</div>
+            <div className="flex items-center">
+              <InputNumber
+                min={1}
+                max={16}
+                value={backupConfig.cpuCount}
+                onChange={(value) => updateBackupConfig({ cpuCount: value || 1 })}
+                size="small"
+                className="w-full max-w-[200px] grow"
+              />
+
+              <Tooltip
+                className="cursor-pointer"
+                title="Number of CPU cores to use for restore processing. Higher values may speed up restores, but use more resources."
+              >
+                <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+              </Tooltip>
+            </div>
+          </div>
+
+          <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+            <div className="mb-1 min-w-[150px] sm:mb-0">Store period</div>
+            <div className="flex items-center">
+              <Select
+                value={backupConfig.storePeriod}
+                onChange={(v) => updateBackupConfig({ storePeriod: v })}
+                size="small"
+                className="w-full max-w-[200px] grow"
+                options={[
+                  { label: '1 day', value: Period.DAY },
+                  { label: '1 week', value: Period.WEEK },
+                  { label: '1 month', value: Period.MONTH },
+                  { label: '3 months', value: Period.THREE_MONTH },
+                  { label: '6 months', value: Period.SIX_MONTH },
+                  { label: '1 year', value: Period.YEAR },
+                  { label: '2 years', value: Period.TWO_YEARS },
+                  { label: '3 years', value: Period.THREE_YEARS },
+                  { label: '4 years', value: Period.FOUR_YEARS },
+                  { label: '5 years', value: Period.FIVE_YEARS },
+                  { label: 'Forever', value: Period.FOREVER },
+                ]}
+              />
+
+              <Tooltip
+                className="cursor-pointer"
+                title="How long to keep the backups? Make sure you have enough storage space."
+              >
+                <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+              </Tooltip>
+            </div>
           </div>
 
           <div className="mb-3" />
         </>
       )}
 
-      <div className="mt-2 mb-1 flex w-full items-center">
-        <div className="min-w-[150px]">Storage</div>
-        <Select
-          value={backupConfig.storage?.id}
-          onChange={(storageId) => {
-            if (storageId.includes('create-new-storage')) {
-              setShowCreateStorage(true);
-              return;
-            }
+      <div className="mt-2 mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">Storage</div>
+        <div className="flex w-full items-center">
+          <Select
+            value={backupConfig.storage?.id}
+            onChange={(storageId) => {
+              if (storageId.includes('create-new-storage')) {
+                setShowCreateStorage(true);
+                return;
+              }
 
-            const selectedStorage = storages.find((s) => s.id === storageId);
-            updateBackupConfig({ storage: selectedStorage });
+              const selectedStorage = storages.find((s) => s.id === storageId);
+              updateBackupConfig({ storage: selectedStorage });
 
-            if (backupConfig.storage?.id) {
-              setIsShowWarn(true);
-            }
-          }}
-          size="small"
-          className="mr-2 max-w-[200px] grow"
-          options={[
-            ...storages.map((s) => ({ label: s.name, value: s.id })),
-            { label: 'Create new storage', value: 'create-new-storage' },
-          ]}
-          placeholder="Select storage"
-        />
-
-        {backupConfig.storage?.type && (
-          <img
-            src={getStorageLogoFromType(backupConfig.storage.type)}
-            alt="storageIcon"
-            className="ml-1 h-4 w-4"
+              if (backupConfig.storage?.id) {
+                setIsShowWarn(true);
+              }
+            }}
+            size="small"
+            className="mr-2 max-w-[200px] grow"
+            options={[
+              ...storages.map((s) => ({ label: s.name, value: s.id })),
+              { label: 'Create new storage', value: 'create-new-storage' },
+            ]}
+            placeholder="Select storage"
           />
-        )}
+
+          {backupConfig.storage?.type && (
+            <img
+              src={getStorageLogoFromType(backupConfig.storage.type)}
+              alt="storageIcon"
+              className="ml-1 h-4 w-4"
+            />
+          )}
+        </div>
       </div>
 
-      <div className="mb-1 flex w-full items-center">
-        <div className="min-w-[150px]">Encryption</div>
-        <Select
-          value={backupConfig.encryption}
-          onChange={(v) => updateBackupConfig({ encryption: v })}
-          size="small"
-          className="max-w-[200px] grow"
-          options={[
-            { label: 'None', value: BackupEncryption.NONE },
-            { label: 'Encrypt backup files', value: BackupEncryption.ENCRYPTED },
-          ]}
-        />
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">Encryption</div>
+        <div className="flex items-center">
+          <Select
+            value={backupConfig.encryption}
+            onChange={(v) => updateBackupConfig({ encryption: v })}
+            size="small"
+            className="w-full max-w-[200px] grow"
+            options={[
+              { label: 'None', value: BackupEncryption.NONE },
+              { label: 'Encrypt backup files', value: BackupEncryption.ENCRYPTED },
+            ]}
+          />
 
-        <Tooltip
-          className="cursor-pointer"
-          title="If backup is encrypted, backup files in your storage (S3, local, etc.) cannot be used directly. You can restore backups through Postgresus or download them unencrypted via the 'Download' button."
-        >
-          <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-        </Tooltip>
+          <Tooltip
+            className="cursor-pointer"
+            title="If backup is encrypted, backup files in your storage (S3, local, etc.) cannot be used directly. You can restore backups through Postgresus or download them unencrypted via the 'Download' button."
+          >
+            <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+          </Tooltip>
+        </div>
       </div>
 
       {backupConfig.isBackupsEnabled && (
         <>
-          <div className="mt-4 mb-1 flex w-full items-start">
-            <div className="mt-1 min-w-[150px]">Notifications</div>
+          <div className="mt-4 mb-1 flex w-full flex-col items-start sm:flex-row sm:items-start">
+            <div className="mt-0 mb-1 min-w-[150px] sm:mt-1 sm:mb-0">Notifications</div>
             <div className="flex flex-col space-y-2">
               <Checkbox
                 checked={backupConfig.sendNotificationsOn.includes(
@@ -517,7 +529,7 @@ export const EditBackupConfigComponent = ({
           open={isShowCreateStorage}
           onCancel={() => setShowCreateStorage(false)}
         >
-          <div className="my-3 max-w-[275px] text-gray-500">
+          <div className="my-3 max-w-[275px] text-gray-500 dark:text-gray-400">
             Storage - is a place where backups will be stored (local disk, S3, Google Drive, etc.)
           </div>
 

frontend/src/features/databases/ui/DatabaseCardComponent.tsx

@@ -29,7 +29,7 @@ export const DatabaseCardComponent = ({
 
   return (
     <div
-      className={`mb-3 cursor-pointer rounded p-3 shadow ${selectedDatabaseId === database.id ? 'bg-blue-100' : 'bg-white'}`}
+      className={`mb-3 cursor-pointer rounded p-3 shadow ${selectedDatabaseId === database.id ? 'bg-blue-100 dark:bg-blue-800' : 'bg-white dark:bg-gray-800'}`}
       onClick={() => setSelectedDatabaseId(database.id)}
     >
       <div className="flex">
@@ -49,7 +49,7 @@ export const DatabaseCardComponent = ({
       </div>
 
       {storage && (
-        <div className="text-sm text-gray-500">
+        <div className="text-sm text-gray-500 dark:text-gray-400">
           <span>Storage: </span>
           <span className="inline-flex items-center">
             {storage.name}{' '}
@@ -65,11 +65,13 @@ export const DatabaseCardComponent = ({
       )}
 
       {database.lastBackupTime && (
-        <div className="text-gray-500">Last backup {dayjs(database.lastBackupTime).fromNow()}</div>
+        <div className="text-gray-500 dark:text-gray-400">
+          Last backup {dayjs(database.lastBackupTime).fromNow()}
+        </div>
       )}
 
       {database.lastBackupErrorMessage && (
-        <div className="mt-1 flex items-center text-sm text-red-600 underline">
+        <div className="mt-1 flex items-center text-sm text-red-600 underline dark:text-red-400">
           <InfoCircleOutlined className="mr-1" style={{ color: 'red' }} />
           Has backup error
         </div>

frontend/src/features/databases/ui/DatabaseComponent.tsx

@@ -51,14 +51,14 @@ export const DatabaseComponent = ({
     >
       <div className="flex">
         <div
-          className={`mr-2 cursor-pointer rounded-tl-md rounded-tr-md px-6 py-2 ${currentTab === 'config' ? 'bg-white' : 'bg-gray-200'}`}
+          className={`mr-2 cursor-pointer rounded-tl-md rounded-tr-md px-6 py-2 ${currentTab === 'config' ? 'bg-white dark:bg-gray-800' : 'bg-gray-200 dark:bg-gray-700'}`}
           onClick={() => setCurrentTab('config')}
         >
           Config
         </div>
 
         <div
-          className={`mr-2 cursor-pointer rounded-tl-md rounded-tr-md px-6 py-2 ${currentTab === 'backups' ? 'bg-white' : 'bg-gray-200'}`}
+          className={`mr-2 cursor-pointer rounded-tl-md rounded-tr-md px-6 py-2 ${currentTab === 'backups' ? 'bg-white dark:bg-gray-800' : 'bg-gray-200 dark:bg-gray-700'}`}
           onClick={() => setCurrentTab('backups')}
         >
           Backups

frontend/src/features/databases/ui/DatabaseConfigComponent.tsx

@@ -147,9 +147,9 @@ export const DatabaseConfigComponent = ({
   };
 
   return (
-    <div className="w-full rounded-tr-md rounded-br-md rounded-bl-md bg-white p-5 shadow">
+    <div className="w-full rounded-tr-md rounded-br-md rounded-bl-md bg-white p-3 shadow sm:p-5 dark:bg-gray-800">
       {!isEditName ? (
-        <div className="mb-5 flex items-center text-2xl font-bold">
+        <div className="mb-5 flex items-center text-xl font-bold sm:text-2xl">
           {database.name}
 
           {isCanManageDBs && (
@@ -162,7 +162,7 @@ export const DatabaseConfigComponent = ({
         <div>
           <div className="flex items-center">
             <Input
-              className="max-w-[250px]"
+              className="max-w-full sm:max-w-[250px]"
               value={editDatabase?.name}
               onChange={(e) => {
                 if (!editDatabase) return;
@@ -174,7 +174,7 @@ export const DatabaseConfigComponent = ({
               size="large"
             />
 
-            <div className="ml-1 flex items-center">
+            <div className="ml-1 flex flex-shrink-0 items-center">
               <Button
                 type="text"
                 className="flex h-6 w-6 items-center justify-center p-0"
@@ -184,7 +184,7 @@ export const DatabaseConfigComponent = ({
                   setEditDatabase(undefined);
                 }}
               >
-                <CloseOutlined className="text-gray-500" />
+                <CloseOutlined className="text-gray-500 dark:text-gray-400" />
               </Button>
             </div>
           </div>
@@ -204,7 +204,7 @@ export const DatabaseConfigComponent = ({
       )}
 
       {database.lastBackupErrorMessage && (
-        <div className="max-w-[400px] rounded border border-red-600 px-3 py-3">
+        <div className="mb-4 max-w-full rounded border border-red-600 px-3 py-3 sm:max-w-[400px]">
           <div className="mt-1 flex items-center text-sm font-bold text-red-600">
             <InfoCircleOutlined className="mr-2" style={{ color: 'red' }} />
             Last backup error
@@ -216,7 +216,7 @@ export const DatabaseConfigComponent = ({
             {database.lastBackupErrorMessage}
           </div>
 
-          <div className="mt-3 text-sm text-gray-500">
+          <div className="mt-3 text-sm text-gray-500 dark:text-gray-400">
             To clean this error (choose any):
             <ul>
               <li>- test connection via button below (even if you updated settings);</li>
@@ -226,8 +226,8 @@ export const DatabaseConfigComponent = ({
         </div>
       )}
 
-      <div className="flex flex-wrap gap-10">
-        <div className="w-[400px]">
+      <div className="flex flex-col gap-6 lg:flex-row lg:flex-wrap lg:gap-10">
+        <div className="w-full lg:w-[400px]">
           <div className="mt-5 flex items-center font-bold">
             <div>Database settings</div>
 
@@ -260,7 +260,7 @@ export const DatabaseConfigComponent = ({
           </div>
         </div>
 
-        <div className="w-[400px]">
+        <div className="w-full lg:w-[400px]">
           <div className="mt-5 flex items-center font-bold">
             <div>Backup config</div>
 
@@ -299,8 +299,8 @@ export const DatabaseConfigComponent = ({
         </div>
       </div>
 
-      <div className="flex flex-wrap gap-10">
-        <div className="w-[400px]">
+      <div className="flex flex-col gap-6 lg:flex-row lg:flex-wrap lg:gap-10">
+        <div className="w-full lg:w-[400px]">
           <div className="mt-5 flex items-center font-bold">
             <div>Healthcheck settings</div>
 
@@ -328,7 +328,7 @@ export const DatabaseConfigComponent = ({
           </div>
         </div>
 
-        <div className="w-[400px]">
+        <div className="w-full lg:w-[400px]">
           <div className="mt-5 flex items-center font-bold">
             <div>Notifiers settings</div>
 
@@ -366,11 +366,10 @@ export const DatabaseConfigComponent = ({
       </div>
 
       {!isEditDatabaseSpecificDataSettings && (
-        <div className="mt-10">
+        <div className="mt-10 flex flex-col gap-2 sm:flex-row sm:gap-0">
           <Button
             type="primary"
-            className="mr-1"
-            ghost
+            className="w-full sm:mr-1 sm:w-auto"
             onClick={testConnection}
             loading={isTestingConnection}
             disabled={isTestingConnection}
@@ -380,8 +379,7 @@ export const DatabaseConfigComponent = ({
 
           <Button
             type="primary"
-            className="mr-1"
-            ghost
+            className="w-full sm:mr-1 sm:w-auto"
             onClick={copyDatabase}
             loading={isCopying}
             disabled={isCopying}
@@ -391,6 +389,7 @@ export const DatabaseConfigComponent = ({
 
           <Button
             type="primary"
+            className="w-full sm:w-auto"
             danger
             onClick={() => setIsShowRemoveConfirm(true)}
             ghost

frontend/src/features/databases/ui/DatabasesComponent.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { databaseApi } from '../../../entity/databases';
 import type { Database } from '../../../entity/databases';
 import type { WorkspaceResponse } from '../../../entity/workspaces';
+import { useIsMobile } from '../../../shared/hooks';
 import { CreateDatabaseComponent } from './CreateDatabaseComponent';
 import { DatabaseCardComponent } from './DatabaseCardComponent';
 import { DatabaseComponent } from './DatabaseComponent';
@@ -17,6 +18,7 @@ interface Props {
 const SELECTED_DATABASE_STORAGE_KEY = 'selectedDatabaseId';
 
 export const DatabasesComponent = ({ contentHeight, workspace, isCanManageDBs }: Props) => {
+  const isMobile = useIsMobile();
   const [isLoading, setIsLoading] = useState(true);
   const [databases, setDatabases] = useState<Database[]>([]);
   const [searchQuery, setSearchQuery] = useState('');
@@ -44,7 +46,8 @@ export const DatabasesComponent = ({ contentHeight, workspace, isCanManageDBs }:
         setDatabases(databases);
         if (selectDatabaseId) {
           updateSelectedDatabaseId(selectDatabaseId);
-        } else if (!selectedDatabaseId && !isSilent) {
+        } else if (!selectedDatabaseId && !isSilent && !isMobile) {
+          // On desktop, auto-select a database; on mobile, keep it unselected to show the list first
           const savedDatabaseId = localStorage.getItem(
             `${SELECTED_DATABASE_STORAGE_KEY}_${workspace.id}`,
           );
@@ -87,66 +90,86 @@ export const DatabasesComponent = ({ contentHeight, workspace, isCanManageDBs }:
     database.name.toLowerCase().includes(searchQuery.toLowerCase()),
   );
 
+  // On mobile, show either the list or the database details
+  const showDatabaseList = !isMobile || !selectedDatabaseId;
+  const showDatabaseDetails = selectedDatabaseId && (!isMobile || selectedDatabaseId);
+
   return (
     <>
       <div className="flex grow">
-        <div
-          className="mx-3 w-[250px] min-w-[250px] overflow-y-auto pr-2"
-          style={{ height: contentHeight }}
-        >
-          {databases.length >= 5 && (
-            <>
-              {isCanManageDBs && addDatabaseButton}
+        {showDatabaseList && (
+          <div
+            className="w-full overflow-y-auto md:mx-3 md:w-[250px] md:min-w-[250px] md:pr-2"
+            style={{ height: contentHeight }}
+          >
+            {databases.length >= 5 && (
+              <>
+                {isCanManageDBs && addDatabaseButton}
 
-              <div className="mb-2">
-                <input
-                  placeholder="Search database"
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full border-b border-gray-300 p-1 text-gray-500 outline-none"
-                />
-              </div>
-            </>
-          )}
-
-          {filteredDatabases.length > 0
-            ? filteredDatabases.map((database) => (
-                <DatabaseCardComponent
-                  key={database.id}
-                  database={database}
-                  selectedDatabaseId={selectedDatabaseId}
-                  setSelectedDatabaseId={updateSelectedDatabaseId}
-                />
-              ))
-            : searchQuery && (
-                <div className="mb-4 text-center text-sm text-gray-500">
-                  No databases found matching &quot;{searchQuery}&quot;
+                <div className="mb-2">
+                  <input
+                    placeholder="Search database"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="w-full border-b border-gray-300 p-1 text-gray-500 outline-none dark:text-gray-400"
+                  />
                 </div>
-              )}
+              </>
+            )}
 
-          {databases.length < 5 && isCanManageDBs && addDatabaseButton}
+            {filteredDatabases.length > 0
+              ? filteredDatabases.map((database) => (
+                  <DatabaseCardComponent
+                    key={database.id}
+                    database={database}
+                    selectedDatabaseId={selectedDatabaseId}
+                    setSelectedDatabaseId={updateSelectedDatabaseId}
+                  />
+                ))
+              : searchQuery && (
+                  <div className="mb-4 text-center text-sm text-gray-500 dark:text-gray-400">
+                    No databases found matching &quot;{searchQuery}&quot;
+                  </div>
+                )}
 
-          <div className="mx-3 text-center text-xs text-gray-500">
-            Database - is a thing we are backing up
+            {databases.length < 5 && isCanManageDBs && addDatabaseButton}
+
+            <div className="mx-3 text-center text-xs text-gray-500 dark:text-gray-400">
+              Database - is a thing we are backing up
+            </div>
           </div>
-        </div>
+        )}
 
-        {selectedDatabaseId && (
-          <DatabaseComponent
-            contentHeight={contentHeight}
-            databaseId={selectedDatabaseId}
-            onDatabaseChanged={() => {
-              loadDatabases();
-            }}
-            onDatabaseDeleted={() => {
-              const remainingDatabases = databases.filter(
-                (database) => database.id !== selectedDatabaseId,
-              );
-              updateSelectedDatabaseId(remainingDatabases[0]?.id);
-              loadDatabases();
-            }}
-            isCanManageDBs={isCanManageDBs}
-          />
+        {showDatabaseDetails && (
+          <div className="flex w-full flex-col md:flex-1">
+            {isMobile && (
+              <div className="mb-2">
+                <Button
+                  type="default"
+                  onClick={() => updateSelectedDatabaseId(undefined)}
+                  className="w-full"
+                >
+                  ← Back to databases
+                </Button>
+              </div>
+            )}
+
+            <DatabaseComponent
+              contentHeight={isMobile ? contentHeight - 50 : contentHeight}
+              databaseId={selectedDatabaseId}
+              onDatabaseChanged={() => {
+                loadDatabases();
+              }}
+              onDatabaseDeleted={() => {
+                const remainingDatabases = databases.filter(
+                  (database) => database.id !== selectedDatabaseId,
+                );
+                updateSelectedDatabaseId(remainingDatabases[0]?.id);
+                loadDatabases();
+              }}
+              isCanManageDBs={isCanManageDBs}
+            />
+          </div>
         )}
       </div>
 

frontend/src/features/databases/ui/edit/CreateReadOnlyComponent.tsx

@@ -98,7 +98,12 @@ export const CreateReadOnlyComponent = ({
 
         <p className="mb-2">
           Postgresus enforce enterprise-grade security (
-          <a href="https://postgresus.com/security" target="_blank" rel="noreferrer">
+          <a
+            href="https://postgresus.com/security"
+            target="_blank"
+            rel="noreferrer"
+            className="!text-blue-600 dark:!text-blue-400"
+          >
             read in details here
           </a>
           ). However, it is not possible to be covered from all possible risks.

frontend/src/features/databases/ui/edit/EditDatabaseNotifiersComponent.tsx

@@ -93,7 +93,7 @@ export const EditDatabaseNotifiersComponent = ({
 
   return (
     <div>
-      <div className="mb-5 max-w-[275px] text-gray-500">
+      <div className="mb-5 max-w-[275px] text-gray-500 dark:text-gray-400">
         Notifier - is a place where notifications will be sent (email, Slack, Telegram, etc.)
         <br />
         <br />
@@ -162,7 +162,7 @@ export const EditDatabaseNotifiersComponent = ({
           open={isShowCreateNotifier}
           onCancel={() => setShowCreateNotifier(false)}
         >
-          <div className="my-3 max-w-[275px] text-gray-500">
+          <div className="my-3 max-w-[275px] text-gray-500 dark:text-gray-400">
             Notifier - is a place where notifications will be sent (email, Slack, Telegram, etc.)
           </div>
 

frontend/src/features/databases/ui/edit/EditDatabaseSpecificDataComponent.tsx

@@ -1,13 +1,9 @@
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { Button, Input, InputNumber, Select, Switch, Tooltip } from 'antd';
+import { CopyOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
+import { App, Button, Input, InputNumber, Select, Switch } from 'antd';
 import { useEffect, useState } from 'react';
 
-import {
-  type Database,
-  DatabaseType,
-  PostgresqlVersion,
-  databaseApi,
-} from '../../../../entity/databases';
+import { type Database, DatabaseType, databaseApi } from '../../../../entity/databases';
+import { ConnectionStringParser } from '../../../../entity/databases/model/postgresql/ConnectionStringParser';
 import { ToastHelper } from '../../../../shared/toast';
 
 interface Props {
@@ -23,7 +19,6 @@ interface Props {
   isSaveToApi: boolean;
   onSaved: (database: Database) => void;
 
-  isShowDbVersionHint?: boolean;
   isShowDbName?: boolean;
 }
 
@@ -39,19 +34,91 @@ export const EditDatabaseSpecificDataComponent = ({
   saveButtonText,
   isSaveToApi,
   onSaved,
-
-  isShowDbVersionHint = true,
   isShowDbName = true,
 }: Props) => {
+  const { message } = App.useApp();
+
   const [editingDatabase, setEditingDatabase] = useState<Database>();
   const [isSaving, setIsSaving] = useState(false);
 
   const [isConnectionTested, setIsConnectionTested] = useState(false);
   const [isTestingConnection, setIsTestingConnection] = useState(false);
+  const [isConnectionFailed, setIsConnectionFailed] = useState(false);
+
+  const hasAdvancedValues = !!database.postgresql?.includeSchemas?.length;
+  const [isShowAdvanced, setShowAdvanced] = useState(hasAdvancedValues);
+
+  const [hasAutoAddedPublicSchema, setHasAutoAddedPublicSchema] = useState(false);
+
+  const parseFromClipboard = async () => {
+    try {
+      const text = await navigator.clipboard.readText();
+      const trimmedText = text.trim();
+
+      if (!trimmedText) {
+        message.error('Clipboard is empty');
+        return;
+      }
+
+      const result = ConnectionStringParser.parse(trimmedText);
+
+      if ('error' in result) {
+        message.error(result.error);
+        return;
+      }
+
+      if (!editingDatabase?.postgresql) return;
+
+      const updatedDatabase: Database = {
+        ...editingDatabase,
+        postgresql: {
+          ...editingDatabase.postgresql,
+          host: result.host,
+          port: result.port,
+          username: result.username,
+          password: result.password,
+          database: result.database,
+          isHttps: result.isHttps,
+        },
+      };
+
+      setEditingDatabase(autoAddPublicSchemaForSupabase(updatedDatabase));
+      setIsConnectionTested(false);
+      message.success('Connection string parsed successfully');
+    } catch {
+      message.error('Failed to read clipboard. Please check browser permissions.');
+    }
+  };
+
+  const autoAddPublicSchemaForSupabase = (updatedDatabase: Database): Database => {
+    if (hasAutoAddedPublicSchema) return updatedDatabase;
+
+    const host = updatedDatabase.postgresql?.host || '';
+    const username = updatedDatabase.postgresql?.username || '';
+    const isSupabase = host.includes('supabase') || username.includes('supabase');
+
+    if (isSupabase && updatedDatabase.postgresql) {
+      setHasAutoAddedPublicSchema(true);
+
+      const currentSchemas = updatedDatabase.postgresql.includeSchemas || [];
+      if (!currentSchemas.includes('public')) {
+        return {
+          ...updatedDatabase,
+          postgresql: {
+            ...updatedDatabase.postgresql,
+            includeSchemas: ['public', ...currentSchemas],
+          },
+        };
+      }
+    }
+
+    return updatedDatabase;
+  };
 
   const testConnection = async () => {
     if (!editingDatabase) return;
     setIsTestingConnection(true);
+    setIsConnectionFailed(false);
 
     try {
       await databaseApi.testDatabaseConnectionDirect(editingDatabase);
@@ -61,6 +128,7 @@ export const EditDatabaseSpecificDataComponent = ({
         description: 'You can continue with the next step',
       });
     } catch (e) {
+      setIsConnectionFailed(true);
       alert((e as Error).message);
     }
 
@@ -89,6 +157,7 @@ export const EditDatabaseSpecificDataComponent = ({
     setIsSaving(false);
     setIsConnectionTested(false);
     setIsTestingConnection(false);
+    setIsConnectionFailed(false);
 
     setEditingDatabase({ ...database });
   }, [database]);
@@ -96,7 +165,6 @@ export const EditDatabaseSpecificDataComponent = ({
   if (!editingDatabase) return null;
 
   let isAllFieldsFilled = true;
-  if (!editingDatabase.postgresql?.version) isAllFieldsFilled = false;
   if (!editingDatabase.postgresql?.host) isAllFieldsFilled = false;
   if (!editingDatabase.postgresql?.port) isAllFieldsFilled = false;
   if (!editingDatabase.postgresql?.username) isAllFieldsFilled = false;
@@ -107,49 +175,23 @@ export const EditDatabaseSpecificDataComponent = ({
     editingDatabase.postgresql?.host?.includes('localhost') ||
     editingDatabase.postgresql?.host?.includes('127.0.0.1');
 
+  const isSupabaseDb =
+    editingDatabase.postgresql?.host?.includes('supabase') ||
+    editingDatabase.postgresql?.username?.includes('supabase');
+
   return (
     <div>
       {editingDatabase.type === DatabaseType.POSTGRES && (
         <>
-          <div className="mb-1 flex w-full items-center">
-            <div className="min-w-[150px]">PG version</div>
-
-            <Select
-              value={editingDatabase.postgresql?.version}
-              onChange={(v) => {
-                if (!editingDatabase.postgresql) return;
-
-                setEditingDatabase({
-                  ...editingDatabase,
-                  postgresql: {
-                    ...editingDatabase.postgresql,
-                    version: v as PostgresqlVersion,
-                  },
-                });
-                setIsConnectionTested(false);
-              }}
-              size="small"
-              className="max-w-[200px] grow"
-              placeholder="Select PG version"
-              options={[
-                { label: '12', value: PostgresqlVersion.PostgresqlVersion12 },
-                { label: '13', value: PostgresqlVersion.PostgresqlVersion13 },
-                { label: '14', value: PostgresqlVersion.PostgresqlVersion14 },
-                { label: '15', value: PostgresqlVersion.PostgresqlVersion15 },
-                { label: '16', value: PostgresqlVersion.PostgresqlVersion16 },
-                { label: '17', value: PostgresqlVersion.PostgresqlVersion17 },
-                { label: '18', value: PostgresqlVersion.PostgresqlVersion18 },
-              ]}
-            />
-
-            {isShowDbVersionHint && (
-              <Tooltip
-                className="cursor-pointer"
-                title="Please select the version of PostgreSQL you are backing up now. You will be able to restore backup to the same version or higher"
-              >
-                <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-              </Tooltip>
-            )}
+          <div className="mb-3 flex">
+            <div className="min-w-[150px]" />
+            <div
+              className="cursor-pointer text-sm text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
+              onClick={parseFromClipboard}
+            >
+              <CopyOutlined className="mr-1" />
+              Parse from clipboard
+            </div>
           </div>
 
           <div className="mb-1 flex w-full items-center">
@@ -159,13 +201,14 @@ export const EditDatabaseSpecificDataComponent = ({
               onChange={(e) => {
                 if (!editingDatabase.postgresql) return;
 
-                setEditingDatabase({
+                const updatedDatabase = {
                   ...editingDatabase,
                   postgresql: {
                     ...editingDatabase.postgresql,
                     host: e.target.value.trim().replace('https://', '').replace('http://', ''),
                   },
-                });
+                };
+                setEditingDatabase(autoAddPublicSchemaForSupabase(updatedDatabase));
                 setIsConnectionTested(false);
               }}
               size="small"
@@ -177,12 +220,13 @@ export const EditDatabaseSpecificDataComponent = ({
           {isLocalhostDb && (
             <div className="mb-1 flex">
               <div className="min-w-[150px]" />
-              <div className="max-w-[200px] text-xs text-gray-500">
+              <div className="max-w-[200px] text-xs text-gray-500 dark:text-gray-400">
                 Please{' '}
                 <a
-                  href="https://postgresus.com/faq#how-to-backup-localhost"
+                  href="https://postgresus.com/faq/localhost"
                   target="_blank"
                   rel="noreferrer"
+                  className="!text-blue-600 dark:!text-blue-400"
                 >
                   read this document
                 </a>{' '}
@@ -191,6 +235,24 @@ export const EditDatabaseSpecificDataComponent = ({
             </div>
           )}
 
+          {isSupabaseDb && (
+            <div className="mb-1 flex">
+              <div className="min-w-[150px]" />
+              <div className="max-w-[200px] text-xs text-gray-500 dark:text-gray-400">
+                Please{' '}
+                <a
+                  href="https://postgresus.com/faq/supabase"
+                  target="_blank"
+                  rel="noreferrer"
+                  className="!text-blue-600 dark:!text-blue-400"
+                >
+                  read this document
+                </a>{' '}
+                to study how to backup Supabase database
+              </div>
+            </div>
+          )}
+
           <div className="mb-1 flex w-full items-center">
             <div className="min-w-[150px]">Port</div>
             <InputNumber
@@ -218,10 +280,11 @@ export const EditDatabaseSpecificDataComponent = ({
               onChange={(e) => {
                 if (!editingDatabase.postgresql) return;
 
-                setEditingDatabase({
+                const updatedDatabase = {
                   ...editingDatabase,
                   postgresql: { ...editingDatabase.postgresql, username: e.target.value.trim() },
-                });
+                };
+                setEditingDatabase(autoAddPublicSchemaForSupabase(updatedDatabase));
                 setIsConnectionTested(false);
               }}
               size="small"
@@ -286,6 +349,43 @@ export const EditDatabaseSpecificDataComponent = ({
               size="small"
             />
           </div>
+
+          <div className="mt-4 mb-3 flex items-center">
+            <div
+              className="flex cursor-pointer items-center text-sm text-blue-600 hover:text-blue-800"
+              onClick={() => setShowAdvanced(!isShowAdvanced)}
+            >
+              <span className="mr-2">Advanced settings</span>
+
+              {isShowAdvanced ? (
+                <UpOutlined style={{ fontSize: '12px' }} />
+              ) : (
+                <DownOutlined style={{ fontSize: '12px' }} />
+              )}
+            </div>
+          </div>
+
+          {isShowAdvanced && (
+            <div className="mb-1 flex w-full items-center">
+              <div className="min-w-[150px]">Include schemas</div>
+              <Select
+                mode="tags"
+                value={editingDatabase.postgresql?.includeSchemas || []}
+                onChange={(values) => {
+                  if (!editingDatabase.postgresql) return;
+
+                  setEditingDatabase({
+                    ...editingDatabase,
+                    postgresql: { ...editingDatabase.postgresql, includeSchemas: values },
+                  });
+                }}
+                size="small"
+                className="max-w-[200px] grow"
+                placeholder="All schemas (default)"
+                tokenSeparators={[',']}
+              />
+            </div>
+          )}
         </>
       )}
 
@@ -326,6 +426,13 @@ export const EditDatabaseSpecificDataComponent = ({
           </Button>
         )}
       </div>
+
+      {isConnectionFailed && (
+        <div className="mt-3 text-sm text-gray-500 dark:text-gray-400">
+          If your database uses IP whitelist, make sure Postgresus server IP is added to the allowed
+          list.
+        </div>
+      )}
     </div>
   );
 };

frontend/src/features/databases/ui/show/ShowDatabaseNotifiersComponent.tsx

@@ -23,7 +23,7 @@ export const ShowDatabaseNotifiersComponent = ({ database }: Props) => {
               </div>
             ))
           ) : (
-            <div className="text-gray-500">No notifiers configured</div>
+            <div className="text-gray-500 dark:text-gray-400">No notifiers configured</div>
           )}
         </div>
       </div>

frontend/src/features/databases/ui/show/ShowDatabaseSpecificDataComponent.tsx

@@ -57,6 +57,13 @@ export const ShowDatabaseSpecificDataComponent = ({ database }: Props) => {
             <div className="min-w-[150px]">Use HTTPS</div>
             <div>{database.postgresql?.isHttps ? 'Yes' : 'No'}</div>
           </div>
+
+          {!!database.postgresql?.includeSchemas?.length && (
+            <div className="mb-1 flex w-full items-center">
+              <div className="min-w-[150px]">Include schemas</div>
+              <div>{database.postgresql.includeSchemas.join(', ')}</div>
+            </div>
+          )}
         </>
       )}
     </div>

frontend/src/features/healthcheck/ui/HealthckeckAttemptsComponent.tsx

@@ -79,9 +79,12 @@ export const HealthckeckAttemptsComponent = ({ database }: Props) => {
 
   useEffect(() => {
     let interval: number | null = null;
+    let isCancelled = false;
 
     setIsHealthcheckConfigLoading(true);
     healthcheckConfigApi.getHealthcheckConfig(database.id).then((healthcheckConfig) => {
+      if (isCancelled) return;
+
       setIsHealthcheckConfigLoading(false);
 
       if (healthcheckConfig.isHealthcheckEnabled) {
@@ -93,17 +96,18 @@ export const HealthckeckAttemptsComponent = ({ database }: Props) => {
         if (period === 'today') {
           interval = setInterval(() => {
             loadHealthcheckAttempts(false);
-          }, 60_000); // 5 seconds
+          }, 60_000);
         }
       }
     });
 
     return () => {
+      isCancelled = true;
       if (interval) {
         clearInterval(interval);
       }
     };
-  }, [period]);
+  }, [database.id, period]);
 
   if (isHealthcheckConfigLoading) {
     return (
@@ -118,16 +122,16 @@ export const HealthckeckAttemptsComponent = ({ database }: Props) => {
   }
 
   return (
-    <div className="w-full rounded-tr-md rounded-br-md rounded-bl-md bg-white p-5 shadow">
-      <h2 className="text-xl font-bold">Healthcheck attempts</h2>
+    <div className="w-full rounded-tr-md rounded-br-md rounded-bl-md bg-white p-3 shadow sm:p-5 dark:bg-gray-800">
+      <h2 className="text-lg font-bold sm:text-xl">Healthcheck attempts</h2>
 
-      <div className="mt-4 flex items-center gap-2">
-        <span className="mr-2 text-sm font-medium">Period</span>
+      <div className="mt-3 flex flex-col gap-2 sm:mt-4 sm:flex-row sm:items-center">
+        <span className="text-sm font-medium sm:mr-2">Period</span>
         <Select
           size="small"
           value={period}
           onChange={(value) => setPeriod(value)}
-          style={{ width: 120 }}
+          className="w-full sm:w-[120px]"
           options={[
             { value: 'today', label: 'Today' },
             { value: '7d', label: '7 days' },
@@ -137,7 +141,7 @@ export const HealthckeckAttemptsComponent = ({ database }: Props) => {
         />
       </div>
 
-      <div className="mt-5" />
+      <div className="mt-4 sm:mt-5" />
 
       {isLoading ? (
         <div className="flex justify-center">

frontend/src/features/healthcheck/ui/ShowHealthcheckConfigComponent.tsx

@@ -41,31 +41,31 @@ export const ShowHealthcheckConfigComponent = ({ databaseId }: Props) => {
     <div className="space-y-4">
       <div className="mb-1 flex items-center">
         <div className="min-w-[180px]">Is health check enabled</div>
-        <div className="w-[250px]">{healthcheckConfig.isHealthcheckEnabled ? 'Yes' : 'No'}</div>
+        <div>{healthcheckConfig.isHealthcheckEnabled ? 'Yes' : 'No'}</div>
       </div>
 
       {healthcheckConfig.isHealthcheckEnabled && (
         <>
           <div className="mb-1 flex items-center">
             <div className="min-w-[180px]">Notify when unavailable</div>
-            <div className="w-[250px]">
+            <div className="lg:w-[200px]">
               {healthcheckConfig.isSentNotificationWhenUnavailable ? 'Yes' : 'No'}
             </div>
           </div>
 
           <div className="mb-1 flex items-center">
             <div className="min-w-[180px]">Check interval (minutes)</div>
-            <div className="w-[250px]">{healthcheckConfig.intervalMinutes}</div>
+            <div className="lg:w-[200px]">{healthcheckConfig.intervalMinutes}</div>
           </div>
 
           <div className="mb-1 flex items-center">
             <div className="min-w-[180px]">Attempts before down</div>
-            <div className="w-[250px]">{healthcheckConfig.attemptsBeforeConcideredAsDown}</div>
+            <div className="lg:w-[200px]">{healthcheckConfig.attemptsBeforeConcideredAsDown}</div>
           </div>
 
           <div className="mb-1 flex items-center">
             <div className="min-w-[180px]">Store attempts (days)</div>
-            <div className="w-[250px]">{healthcheckConfig.storeAttemptsDays}</div>
+            <div className="lg:w-[200px]">{healthcheckConfig.storeAttemptsDays}</div>
           </div>
         </>
       )}

frontend/src/features/notifiers/ui/NotifierCardComponent.tsx

@@ -17,13 +17,13 @@ export const NotifierCardComponent = ({
 }: Props) => {
   return (
     <div
-      className={`mb-3 cursor-pointer rounded p-3 shadow ${selectedNotifierId === notifier.id ? 'bg-blue-100' : 'bg-white'}`}
+      className={`mb-3 cursor-pointer rounded p-3 shadow ${selectedNotifierId === notifier.id ? 'bg-blue-100 dark:bg-blue-800' : 'bg-white dark:bg-gray-800'}`}
       onClick={() => setSelectedNotifierId(notifier.id)}
     >
       <div className="mb-1 font-bold">{notifier.name}</div>
 
       <div className="flex items-center">
-        <div className="text-sm text-gray-500">
+        <div className="text-sm text-gray-500 dark:text-gray-400">
           Notify to {getNotifierNameFromType(notifier.notifierType)}
         </div>
 
@@ -35,7 +35,7 @@ export const NotifierCardComponent = ({
       </div>
 
       {notifier.lastSendError && (
-        <div className="mt-1 flex items-center text-sm text-red-600 underline">
+        <div className="mt-1 flex items-center text-sm text-red-600 underline dark:text-red-400">
           <InfoCircleOutlined className="mr-1" style={{ color: 'red' }} />
           Has send error
         </div>

frontend/src/features/notifiers/ui/NotifierComponent.tsx

@@ -124,7 +124,7 @@ export const NotifierComponent = ({
 
   return (
     <div className="w-full">
-      <div className="grow overflow-y-auto rounded bg-white p-5 shadow">
+      <div className="grow overflow-y-auto rounded bg-white p-5 shadow dark:bg-gray-800">
         {!notifier ? (
           <div className="mt-10 flex justify-center">
             <Spin />
@@ -166,7 +166,7 @@ export const NotifierComponent = ({
                         setEditNotifier(undefined);
                       }}
                     >
-                      <CloseOutlined className="text-gray-500" />
+                      <CloseOutlined className="text-gray-500 dark:text-gray-400" />
                     </Button>
                   </div>
                 </div>
@@ -198,7 +198,7 @@ export const NotifierComponent = ({
                   {notifier.lastSendError}
                 </div>
 
-                <div className="mt-3 text-sm break-words whitespace-pre-wrap text-gray-500">
+                <div className="mt-3 text-sm break-words whitespace-pre-wrap text-gray-500 dark:text-gray-400">
                   To clean this error (choose any):
                   <ul>
                     <li>
@@ -246,7 +246,6 @@ export const NotifierComponent = ({
                 <Button
                   type="primary"
                   className="mr-1"
-                  ghost
                   onClick={sendTestNotification}
                   loading={isSendingTestNotification}
                   disabled={isSendingTestNotification}

frontend/src/features/notifiers/ui/NotifiersComponent.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { notifierApi } from '../../../entity/notifiers';
 import type { Notifier } from '../../../entity/notifiers';
 import type { WorkspaceResponse } from '../../../entity/workspaces';
+import { useIsMobile } from '../../../shared/hooks';
 import { NotifierCardComponent } from './NotifierCardComponent';
 import { NotifierComponent } from './NotifierComponent';
 import { EditNotifierComponent } from './edit/EditNotifierComponent';
@@ -14,21 +15,47 @@ interface Props {
   isCanManageNotifiers: boolean;
 }
 
+const SELECTED_NOTIFIER_STORAGE_KEY = 'selectedNotifierId';
+
 export const NotifiersComponent = ({ contentHeight, workspace, isCanManageNotifiers }: Props) => {
+  const isMobile = useIsMobile();
   const [isLoading, setIsLoading] = useState(true);
   const [notifiers, setNotifiers] = useState<Notifier[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
 
   const [isShowAddNotifier, setIsShowAddNotifier] = useState(false);
   const [selectedNotifierId, setSelectedNotifierId] = useState<string | undefined>(undefined);
-  const loadNotifiers = () => {
-    setIsLoading(true);
+
+  const updateSelectedNotifierId = (notifierId: string | undefined) => {
+    setSelectedNotifierId(notifierId);
+    if (notifierId) {
+      localStorage.setItem(`${SELECTED_NOTIFIER_STORAGE_KEY}_${workspace.id}`, notifierId);
+    } else {
+      localStorage.removeItem(`${SELECTED_NOTIFIER_STORAGE_KEY}_${workspace.id}`);
+    }
+  };
+
+  const loadNotifiers = (isSilent = false, selectNotifierId?: string) => {
+    if (!isSilent) {
+      setIsLoading(true);
+    }
 
     notifierApi
       .getNotifiers(workspace.id)
       .then((notifiers) => {
         setNotifiers(notifiers);
-        if (!selectedNotifierId) {
-          setSelectedNotifierId(notifiers[0]?.id);
+        if (selectNotifierId) {
+          updateSelectedNotifierId(selectNotifierId);
+        } else if (!selectedNotifierId && !isSilent && !isMobile) {
+          // On desktop, auto-select a notifier; on mobile, keep it unselected to show the list first
+          const savedNotifierId = localStorage.getItem(
+            `${SELECTED_NOTIFIER_STORAGE_KEY}_${workspace.id}`,
+          );
+          const notifierToSelect =
+            savedNotifierId && notifiers.some((n) => n.id === savedNotifierId)
+              ? savedNotifierId
+              : notifiers[0]?.id;
+          updateSelectedNotifierId(notifierToSelect);
         }
       })
       .catch((e) => alert(e.message))
@@ -37,6 +64,12 @@ export const NotifiersComponent = ({ contentHeight, workspace, isCanManageNotifi
 
   useEffect(() => {
     loadNotifiers();
+
+    const interval = setInterval(() => {
+      loadNotifiers(true);
+    }, 5 * 60_000);
+
+    return () => clearInterval(interval);
   }, []);
 
   if (isLoading) {
@@ -53,45 +86,89 @@ export const NotifiersComponent = ({ contentHeight, workspace, isCanManageNotifi
     </Button>
   );
 
+  const filteredNotifiers = notifiers.filter((notifier) =>
+    notifier.name.toLowerCase().includes(searchQuery.toLowerCase()),
+  );
+
+  // On mobile, show either the list or the notifier details
+  const showNotifierList = !isMobile || !selectedNotifierId;
+  const showNotifierDetails = selectedNotifierId && (!isMobile || selectedNotifierId);
+
   return (
     <>
       <div className="flex grow">
-        <div
-          className="mx-3 w-[250px] min-w-[250px] overflow-y-auto"
-          style={{ height: contentHeight }}
-        >
-          {notifiers.length >= 5 && isCanManageNotifiers && addNotifierButton}
+        {showNotifierList && (
+          <div
+            className="w-full overflow-y-auto md:mx-3 md:w-[250px] md:min-w-[250px] md:pr-2"
+            style={{ height: contentHeight }}
+          >
+            {notifiers.length >= 5 && (
+              <>
+                {isCanManageNotifiers && addNotifierButton}
 
-          {notifiers.map((notifier) => (
-            <NotifierCardComponent
-              key={notifier.id}
-              notifier={notifier}
-              selectedNotifierId={selectedNotifierId}
-              setSelectedNotifierId={setSelectedNotifierId}
-            />
-          ))}
+                <div className="mb-2">
+                  <input
+                    placeholder="Search notifier"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="w-full border-b border-gray-300 p-1 text-gray-500 outline-none dark:text-gray-400"
+                  />
+                </div>
+              </>
+            )}
 
-          {notifiers.length < 5 && isCanManageNotifiers && addNotifierButton}
+            {filteredNotifiers.length > 0
+              ? filteredNotifiers.map((notifier) => (
+                  <NotifierCardComponent
+                    key={notifier.id}
+                    notifier={notifier}
+                    selectedNotifierId={selectedNotifierId}
+                    setSelectedNotifierId={updateSelectedNotifierId}
+                  />
+                ))
+              : searchQuery && (
+                  <div className="mb-4 text-center text-sm text-gray-500 dark:text-gray-400">
+                    No notifiers found matching &quot;{searchQuery}&quot;
+                  </div>
+                )}
 
-          <div className="mx-3 text-center text-xs text-gray-500">
-            Notifier - is a place where notifications will be sent (email, Slack, Telegram, etc.)
+            {notifiers.length < 5 && isCanManageNotifiers && addNotifierButton}
+
+            <div className="mx-3 text-center text-xs text-gray-500 dark:text-gray-400">
+              Notifier - is a place where notifications will be sent (email, Slack, Telegram, etc.)
+            </div>
           </div>
-        </div>
+        )}
 
-        {selectedNotifierId && (
-          <NotifierComponent
-            notifierId={selectedNotifierId}
-            onNotifierChanged={() => {
-              loadNotifiers();
-            }}
-            onNotifierDeleted={() => {
-              loadNotifiers();
-              setSelectedNotifierId(
-                notifiers.filter((notifier) => notifier.id !== selectedNotifierId)[0]?.id,
-              );
-            }}
-            isCanManageNotifiers={isCanManageNotifiers}
-          />
+        {showNotifierDetails && (
+          <div className="flex w-full flex-col md:flex-1">
+            {isMobile && (
+              <div className="mb-2">
+                <Button
+                  type="default"
+                  onClick={() => updateSelectedNotifierId(undefined)}
+                  className="w-full"
+                >
+                  ← Back to notifiers
+                </Button>
+              </div>
+            )}
+
+            <NotifierComponent
+              notifierId={selectedNotifierId}
+              onNotifierChanged={() => {
+                loadNotifiers();
+              }}
+              onNotifierDeleted={() => {
+                const remainingNotifiers = notifiers.filter(
+                  (notifier) => notifier.id !== selectedNotifierId,
+                );
+                updateSelectedNotifierId(remainingNotifiers[0]?.id);
+                loadNotifiers();
+              }}
+              isCanManageNotifiers={isCanManageNotifiers}
+            />
+          </div>
         )}
       </div>
 
@@ -102,7 +179,7 @@ export const NotifiersComponent = ({ contentHeight, workspace, isCanManageNotifi
           open={isShowAddNotifier}
           onCancel={() => setIsShowAddNotifier(false)}
         >
-          <div className="my-3 max-w-[250px] text-gray-500">
+          <div className="my-3 max-w-[250px] text-gray-500 dark:text-gray-400">
             Notifier - is a place where notifications will be sent (email, Slack, Telegram, etc.)
           </div>
 
@@ -111,8 +188,8 @@ export const NotifiersComponent = ({ contentHeight, workspace, isCanManageNotifi
             isShowName
             isShowClose={false}
             onClose={() => setIsShowAddNotifier(false)}
-            onChanged={() => {
-              loadNotifiers();
+            onChanged={(notifier) => {
+              loadNotifiers(false, notifier.id);
               setIsShowAddNotifier(false);
             }}
           />

frontend/src/features/notifiers/ui/edit/EditNotifierComponent.tsx

@@ -119,6 +119,7 @@ export function EditNotifierComponent({
       notifier.webhookNotifier = {
         webhookUrl: '',
         webhookMethod: WebhookMethod.POST,
+        headers: [],
       };
     }
 
@@ -181,7 +182,7 @@ export function EditNotifierComponent({
     }
 
     if (notifier.notifierType === NotifierType.EMAIL && notifier.emailNotifier) {
-      return validateEmailNotifier(!notifier.id, notifier.emailNotifier);
+      return validateEmailNotifier(notifier.emailNotifier);
     }
 
     if (notifier.notifierType === NotifierType.WEBHOOK && notifier.webhookNotifier) {
@@ -208,8 +209,8 @@ export function EditNotifierComponent({
   return (
     <div>
       {isShowName && (
-        <div className="mb-1 flex items-center">
-          <div className="min-w-[130px]">Name</div>
+        <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+          <div className="mb-1 min-w-[150px] sm:mb-0">Name</div>
 
           <Input
             value={notifier?.name || ''}
@@ -224,28 +225,30 @@ export function EditNotifierComponent({
         </div>
       )}
 
-      <div className="mb-1 flex items-center">
-        <div className="w-[130px] min-w-[130px]">Type</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">Type</div>
 
-        <Select
-          value={notifier?.notifierType}
-          options={[
-            { label: 'Telegram', value: NotifierType.TELEGRAM },
-            { label: 'Email', value: NotifierType.EMAIL },
-            { label: 'Webhook', value: NotifierType.WEBHOOK },
-            { label: 'Slack', value: NotifierType.SLACK },
-            { label: 'Discord', value: NotifierType.DISCORD },
-            { label: 'Teams', value: NotifierType.TEAMS },
-          ]}
-          onChange={(value) => {
-            setNotifierType(value);
-            setIsUnsaved(true);
-          }}
-          size="small"
-          className="w-full max-w-[250px]"
-        />
+        <div className="flex items-center">
+          <Select
+            value={notifier?.notifierType}
+            options={[
+              { label: 'Telegram', value: NotifierType.TELEGRAM },
+              { label: 'Email', value: NotifierType.EMAIL },
+              { label: 'Webhook', value: NotifierType.WEBHOOK },
+              { label: 'Slack', value: NotifierType.SLACK },
+              { label: 'Discord', value: NotifierType.DISCORD },
+              { label: 'Teams', value: NotifierType.TEAMS },
+            ]}
+            onChange={(value) => {
+              setNotifierType(value);
+              setIsUnsaved(true);
+            }}
+            size="small"
+            className="w-[250px] max-w-[250px]"
+          />
 
-        <img src={getNotifierLogoFromType(notifier?.notifierType)} className="ml-2 h-4 w-4" />
+          <img src={getNotifierLogoFromType(notifier?.notifierType)} className="ml-2 h-4 w-4" />
+        </div>
       </div>
 
       <div className="mt-5" />

frontend/src/features/notifiers/ui/edit/notifiers/EditDiscordNotifierComponent.tsx

@@ -11,32 +11,29 @@ interface Props {
 export function EditDiscordNotifierComponent({ notifier, setNotifier, setUnsaved }: Props) {
   return (
     <>
-      <div className="flex">
-        <div className="w-[130px] max-w-[130px] min-w-[130px] pr-3">Channel webhook URL</div>
-
-        <div className="w-[250px]">
-          <Input
-            value={notifier?.discordNotifier?.channelWebhookUrl || ''}
-            onChange={(e) => {
-              if (!notifier?.discordNotifier) return;
-              setNotifier({
-                ...notifier,
-                discordNotifier: {
-                  ...notifier.discordNotifier,
-                  channelWebhookUrl: e.target.value.trim(),
-                },
-              });
-              setUnsaved();
-            }}
-            size="small"
-            className="w-full"
-            placeholder="1234567890:ABCDEFGHIJKLMNOPQRSTUVWXYZ"
-          />
-        </div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">Channel webhook URL</div>
+        <Input
+          value={notifier?.discordNotifier?.channelWebhookUrl || ''}
+          onChange={(e) => {
+            if (!notifier?.discordNotifier) return;
+            setNotifier({
+              ...notifier,
+              discordNotifier: {
+                ...notifier.discordNotifier,
+                channelWebhookUrl: e.target.value.trim(),
+              },
+            });
+            setUnsaved();
+          }}
+          size="small"
+          className="w-full max-w-[250px]"
+          placeholder="1234567890:ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+        />
       </div>
 
-      <div className="ml-[130px] max-w-[250px]">
-        <div className="mt-1 text-xs text-gray-500">
+      <div className="max-w-[250px] sm:ml-[150px]">
+        <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
           <strong>How to get Discord webhook URL:</strong>
           <br />
           <br />

frontend/src/features/notifiers/ui/edit/notifiers/EditEmailNotifierComponent.tsx

@@ -12,34 +12,39 @@ interface Props {
 export function EditEmailNotifierComponent({ notifier, setNotifier, setUnsaved }: Props) {
   return (
     <>
-      <div className="mb-1 flex items-center">
-        <div className="w-[130px] min-w-[130px]">Target email</div>
-        <Input
-          value={notifier?.emailNotifier?.targetEmail || ''}
-          onChange={(e) => {
-            if (!notifier?.emailNotifier) return;
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">Target email</div>
+        <div className="flex items-center">
+          <Input
+            value={notifier?.emailNotifier?.targetEmail || ''}
+            onChange={(e) => {
+              if (!notifier?.emailNotifier) return;
 
-            setNotifier({
-              ...notifier,
-              emailNotifier: {
-                ...notifier.emailNotifier,
-                targetEmail: e.target.value.trim(),
-              },
-            });
-            setUnsaved();
-          }}
-          size="small"
-          className="w-full max-w-[250px]"
-          placeholder="example@gmail.com"
-        />
+              setNotifier({
+                ...notifier,
+                emailNotifier: {
+                  ...notifier.emailNotifier,
+                  targetEmail: e.target.value.trim(),
+                },
+              });
+              setUnsaved();
+            }}
+            size="small"
+            className="w-full max-w-[250px]"
+            placeholder="example@gmail.com"
+          />
 
-        <Tooltip className="cursor-pointer" title="The email where you want to receive the message">
-          <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-        </Tooltip>
+          <Tooltip
+            className="cursor-pointer"
+            title="The email where you want to receive the message"
+          >
+            <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+          </Tooltip>
+        </div>
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="w-[130px] min-w-[130px]">SMTP host</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">SMTP host</div>
         <Input
           value={notifier?.emailNotifier?.smtpHost || ''}
           onChange={(e) => {
@@ -60,8 +65,8 @@ export function EditEmailNotifierComponent({ notifier, setNotifier, setUnsaved }
         />
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="w-[130px] min-w-[130px]">SMTP port</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">SMTP port</div>
         <Input
           type="number"
           value={notifier?.emailNotifier?.smtpPort || ''}
@@ -83,8 +88,8 @@ export function EditEmailNotifierComponent({ notifier, setNotifier, setUnsaved }
         />
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="w-[130px] min-w-[130px]">SMTP user</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">SMTP user</div>
         <Input
           value={notifier?.emailNotifier?.smtpUser || ''}
           onChange={(e) => {
@@ -105,8 +110,8 @@ export function EditEmailNotifierComponent({ notifier, setNotifier, setUnsaved }
         />
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="w-[130px] min-w-[130px]">SMTP password</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">SMTP password</div>
         <Input
           type="password"
           value={notifier?.emailNotifier?.smtpPassword || ''}
@@ -128,33 +133,35 @@ export function EditEmailNotifierComponent({ notifier, setNotifier, setUnsaved }
         />
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="w-[130px] min-w-[130px]">From</div>
-        <Input
-          value={notifier?.emailNotifier?.from || ''}
-          onChange={(e) => {
-            if (!notifier?.emailNotifier) return;
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">From</div>
+        <div className="flex items-center">
+          <Input
+            value={notifier?.emailNotifier?.from || ''}
+            onChange={(e) => {
+              if (!notifier?.emailNotifier) return;
 
-            setNotifier({
-              ...notifier,
-              emailNotifier: {
-                ...notifier.emailNotifier,
-                from: e.target.value.trim(),
-              },
-            });
-            setUnsaved();
-          }}
-          size="small"
-          className="w-full max-w-[250px]"
-          placeholder="example@example.com"
-        />
+              setNotifier({
+                ...notifier,
+                emailNotifier: {
+                  ...notifier.emailNotifier,
+                  from: e.target.value.trim(),
+                },
+              });
+              setUnsaved();
+            }}
+            size="small"
+            className="w-full max-w-[250px]"
+            placeholder="example@example.com"
+          />
 
-        <Tooltip
-          className="cursor-pointer"
-          title="Optional. Email address to use as sender. If empty, will use SMTP user or auto-generate from host"
-        >
-          <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-        </Tooltip>
+          <Tooltip
+            className="cursor-pointer"
+            title="Optional. Email address to use as sender. If empty, will use SMTP user or auto-generate from host"
+          >
+            <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+          </Tooltip>
+        </div>
       </div>
     </>
   );

frontend/src/features/notifiers/ui/edit/notifiers/EditSlackNotifierComponent.tsx

@@ -11,7 +11,7 @@ interface Props {
 export function EditSlackNotifierComponent({ notifier, setNotifier, setUnsaved }: Props) {
   return (
     <>
-      <div className="mb-1 ml-[130px] max-w-[200px]" style={{ lineHeight: 1 }}>
+      <div className="mb-1 max-w-[250px] sm:ml-[150px]" style={{ lineHeight: 1 }}>
         <a
           className="text-xs !text-blue-600"
           href="https://postgresus.com/notifiers/slack"
@@ -22,54 +22,48 @@ export function EditSlackNotifierComponent({ notifier, setNotifier, setUnsaved }
         </a>
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="w-[130px] min-w-[130px]">Bot token</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">Bot token</div>
+        <Input
+          value={notifier?.slackNotifier?.botToken || ''}
+          onChange={(e) => {
+            if (!notifier?.slackNotifier) return;
 
-        <div className="w-[250px]">
-          <Input
-            value={notifier?.slackNotifier?.botToken || ''}
-            onChange={(e) => {
-              if (!notifier?.slackNotifier) return;
-
-              setNotifier({
-                ...notifier,
-                slackNotifier: {
-                  ...notifier.slackNotifier,
-                  botToken: e.target.value.trim(),
-                },
-              });
-              setUnsaved();
-            }}
-            size="small"
-            className="w-full"
-            placeholder="xoxb-..."
-          />
-        </div>
+            setNotifier({
+              ...notifier,
+              slackNotifier: {
+                ...notifier.slackNotifier,
+                botToken: e.target.value.trim(),
+              },
+            });
+            setUnsaved();
+          }}
+          size="small"
+          className="w-full max-w-[250px]"
+          placeholder="xoxb-..."
+        />
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="w-[130px] min-w-[130px]">Target chat ID</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">Target chat ID</div>
+        <Input
+          value={notifier?.slackNotifier?.targetChatId || ''}
+          onChange={(e) => {
+            if (!notifier?.slackNotifier) return;
 
-        <div className="w-[250px]">
-          <Input
-            value={notifier?.slackNotifier?.targetChatId || ''}
-            onChange={(e) => {
-              if (!notifier?.slackNotifier) return;
-
-              setNotifier({
-                ...notifier,
-                slackNotifier: {
-                  ...notifier.slackNotifier,
-                  targetChatId: e.target.value.trim(),
-                },
-              });
-              setUnsaved();
-            }}
-            size="small"
-            className="w-full"
-            placeholder="C1234567890"
-          />
-        </div>
+            setNotifier({
+              ...notifier,
+              slackNotifier: {
+                ...notifier.slackNotifier,
+                targetChatId: e.target.value.trim(),
+              },
+            });
+            setUnsaved();
+          }}
+          size="small"
+          className="w-full max-w-[250px]"
+          placeholder="C1234567890"
+        />
       </div>
     </>
   );

frontend/src/features/notifiers/ui/edit/notifiers/EditTeamsNotifierComponent.tsx

@@ -27,7 +27,7 @@ export function EditTeamsNotifierComponent({ notifier, setNotifier, setUnsaved }
 
   return (
     <>
-      <div className="mb-1 ml-[130px] max-w-[200px]" style={{ lineHeight: 1 }}>
+      <div className="mb-1 max-w-[250px] sm:ml-[150px]" style={{ lineHeight: 1 }}>
         <a
           className="text-xs !text-blue-600"
           href="https://postgresus.com/notifiers/teams"
@@ -38,25 +38,24 @@ export function EditTeamsNotifierComponent({ notifier, setNotifier, setUnsaved }
         </a>
       </div>
 
-      <div className="flex items-center">
-        <div className="w-[130px] min-w-[130px]">Power Automate URL</div>
-
-        <div className="w-[250px]">
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">Power Automate URL</div>
+        <div className="flex items-center">
           <Input
             value={value}
             onChange={onChange}
             size="small"
-            className="w-full"
+            className="w-full max-w-[250px]"
             placeholder="https://prod-00.westeurope.logic.azure.com:443/workflows/....."
           />
-        </div>
 
-        <Tooltip
-          className="cursor-pointer"
-          title="HTTP endpoint from your Power Automate flow (When an HTTP request is received)"
-        >
-          <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-        </Tooltip>
+          <Tooltip
+            className="cursor-pointer"
+            title="HTTP endpoint from your Power Automate flow (When an HTTP request is received)"
+          >
+            <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+          </Tooltip>
+        </div>
       </div>
     </>
   );

frontend/src/features/notifiers/ui/edit/notifiers/EditTelegramNotifierComponent.tsx

@@ -27,31 +27,28 @@ export function EditTelegramNotifierComponent({ notifier, setNotifier, setUnsave
 
   return (
     <>
-      <div className="flex items-center">
-        <div className="w-[130px] min-w-[130px]">Bot token</div>
-
-        <div className="w-[250px]">
-          <Input
-            value={notifier?.telegramNotifier?.botToken || ''}
-            onChange={(e) => {
-              if (!notifier?.telegramNotifier) return;
-              setNotifier({
-                ...notifier,
-                telegramNotifier: {
-                  ...notifier.telegramNotifier,
-                  botToken: e.target.value.trim(),
-                },
-              });
-              setUnsaved();
-            }}
-            size="small"
-            className="w-full"
-            placeholder="1234567890:ABCDEFGHIJKLMNOPQRSTUVWXYZ"
-          />
-        </div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">Bot token</div>
+        <Input
+          value={notifier?.telegramNotifier?.botToken || ''}
+          onChange={(e) => {
+            if (!notifier?.telegramNotifier) return;
+            setNotifier({
+              ...notifier,
+              telegramNotifier: {
+                ...notifier.telegramNotifier,
+                botToken: e.target.value.trim(),
+              },
+            });
+            setUnsaved();
+          }}
+          size="small"
+          className="w-full max-w-[250px]"
+          placeholder="1234567890:ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+        />
       </div>
 
-      <div className="mb-1 ml-[130px]">
+      <div className="mb-1 sm:ml-[150px]">
         <a
           className="text-xs !text-blue-600"
           href="https://www.siteguarding.com/en/how-to-get-telegram-bot-api-token"
@@ -62,10 +59,9 @@ export function EditTelegramNotifierComponent({ notifier, setNotifier, setUnsave
         </a>
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="w-[130px] min-w-[130px]">Target chat ID</div>
-
-        <div className="w-[250px]">
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">Target chat ID</div>
+        <div className="flex items-center">
           <Input
             value={notifier?.telegramNotifier?.targetChatId || ''}
             onChange={(e) => {
@@ -81,20 +77,20 @@ export function EditTelegramNotifierComponent({ notifier, setNotifier, setUnsave
               setUnsaved();
             }}
             size="small"
-            className="w-full"
+            className="w-full max-w-[250px]"
             placeholder="-1001234567890"
           />
-        </div>
 
-        <Tooltip
-          className="cursor-pointer"
-          title="The chat where you want to receive the message (it can be your private chat or a group)"
-        >
-          <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-        </Tooltip>
+          <Tooltip
+            className="cursor-pointer"
+            title="The chat where you want to receive the message (it can be your private chat or a group)"
+          >
+            <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+          </Tooltip>
+        </div>
       </div>
 
-      <div className="ml-[130px] max-w-[250px]">
+      <div className="max-w-[250px] sm:ml-[150px]">
         {!isShowHowToGetChatId ? (
           <div
             className="mt-1 cursor-pointer text-xs text-blue-600"
@@ -103,7 +99,7 @@ export function EditTelegramNotifierComponent({ notifier, setNotifier, setUnsave
             How to get Telegram chat ID?
           </div>
         ) : (
-          <div className="mt-1 text-xs text-gray-500">
+          <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
             To get your chat ID, message{' '}
             <a href="https://t.me/getmyid_bot" target="_blank" rel="noreferrer">
               @getmyid_bot
@@ -120,42 +116,42 @@ export function EditTelegramNotifierComponent({ notifier, setNotifier, setUnsave
         )}
       </div>
 
-      <div className="mt-4 mb-1 flex items-center">
-        <div className="w-[130px] min-w-[130px] break-all">Send to group topic</div>
+      <div className="mt-4 mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">Send to group topic</div>
+        <div className="flex items-center">
+          <Switch
+            checked={notifier?.telegramNotifier?.isSendToThreadEnabled || false}
+            onChange={(checked) => {
+              if (!notifier?.telegramNotifier) return;
 
-        <Switch
-          checked={notifier?.telegramNotifier?.isSendToThreadEnabled || false}
-          onChange={(checked) => {
-            if (!notifier?.telegramNotifier) return;
+              setNotifier({
+                ...notifier,
+                telegramNotifier: {
+                  ...notifier.telegramNotifier,
+                  isSendToThreadEnabled: checked,
+                  // Clear thread ID if disabling
+                  threadId: checked ? notifier.telegramNotifier.threadId : undefined,
+                },
+              });
+              setUnsaved();
+            }}
+            size="small"
+          />
 
-            setNotifier({
-              ...notifier,
-              telegramNotifier: {
-                ...notifier.telegramNotifier,
-                isSendToThreadEnabled: checked,
-                // Clear thread ID if disabling
-                threadId: checked ? notifier.telegramNotifier.threadId : undefined,
-              },
-            });
-            setUnsaved();
-          }}
-          size="small"
-        />
-
-        <Tooltip
-          className="cursor-pointer"
-          title="Enable this to send messages to a specific thread in a group chat"
-        >
-          <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-        </Tooltip>
+          <Tooltip
+            className="cursor-pointer"
+            title="Enable this to send messages to a specific thread in a group chat"
+          >
+            <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+          </Tooltip>
+        </div>
       </div>
 
       {notifier?.telegramNotifier?.isSendToThreadEnabled && (
         <>
-          <div className="mb-1 flex items-center">
-            <div className="w-[130px] min-w-[130px]">Thread ID</div>
-
-            <div className="w-[250px]">
+          <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+            <div className="mb-1 min-w-[150px] sm:mb-0">Thread ID</div>
+            <div className="flex items-center">
               <Input
                 value={notifier?.telegramNotifier?.threadId?.toString() || ''}
                 onChange={(e) => {
@@ -174,23 +170,23 @@ export function EditTelegramNotifierComponent({ notifier, setNotifier, setUnsave
                   setUnsaved();
                 }}
                 size="small"
-                className="w-full"
+                className="w-full max-w-[250px]"
                 placeholder="3"
                 type="number"
                 min="1"
               />
-            </div>
 
-            <Tooltip
-              className="cursor-pointer"
-              title="The ID of the thread where messages should be sent"
-            >
-              <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-            </Tooltip>
+              <Tooltip
+                className="cursor-pointer"
+                title="The ID of the thread where messages should be sent"
+              >
+                <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+              </Tooltip>
+            </div>
           </div>
 
-          <div className="ml-[130px] max-w-[250px]">
-            <div className="mt-1 text-xs text-gray-500">
+          <div className="max-w-[250px] sm:ml-[150px]">
+            <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
               To get the thread ID, go to the thread in your Telegram group, tap on the thread name
               at the top, then tap &ldquo;Thread Info&rdquo;. Copy the thread link and take the last
               number from the URL.

frontend/src/features/notifiers/ui/edit/notifiers/EditWebhookNotifierComponent.tsx

@@ -1,7 +1,8 @@
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { Input, Select, Tooltip } from 'antd';
+import { DeleteOutlined, InfoCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { Button, Input, Select, Tooltip } from 'antd';
+import { useMemo } from 'react';
 
-import type { Notifier } from '../../../../../entity/notifiers';
+import type { Notifier, WebhookHeader } from '../../../../../entity/notifiers';
 import { WebhookMethod } from '../../../../../entity/notifiers/models/webhook/WebhookMethod';
 
 interface Props {
@@ -10,87 +11,241 @@ interface Props {
   setUnsaved: () => void;
 }
 
+const DEFAULT_BODY_TEMPLATE = `{
+  "heading": "{{heading}}",
+  "message": "{{message}}"
+}`;
+
+function validateJsonTemplate(template: string): string | null {
+  if (!template.trim()) {
+    return null; // Empty is valid (will use default)
+  }
+
+  // Replace placeholders with valid JSON strings before parsing
+  const testJson = template.replace(/\{\{heading\}\}/g, 'test').replace(/\{\{message\}\}/g, 'test');
+
+  try {
+    JSON.parse(testJson);
+    return null;
+  } catch (e) {
+    if (e instanceof SyntaxError) {
+      return 'Invalid JSON format';
+    }
+    return 'Invalid JSON';
+  }
+}
+
 export function EditWebhookNotifierComponent({ notifier, setNotifier, setUnsaved }: Props) {
+  const headers = notifier?.webhookNotifier?.headers || [];
+  const bodyTemplate = notifier?.webhookNotifier?.bodyTemplate || '';
+
+  const jsonError = useMemo(() => validateJsonTemplate(bodyTemplate), [bodyTemplate]);
+
+  const updateWebhookNotifier = (updates: Partial<typeof notifier.webhookNotifier>) => {
+    setNotifier({
+      ...notifier,
+      webhookNotifier: {
+        ...(notifier.webhookNotifier || { webhookUrl: '', webhookMethod: WebhookMethod.POST }),
+        ...updates,
+      },
+    });
+    setUnsaved();
+  };
+
+  const addHeader = () => {
+    updateWebhookNotifier({
+      headers: [...headers, { key: '', value: '' }],
+    });
+  };
+
+  const updateHeader = (index: number, field: 'key' | 'value', value: string) => {
+    const newHeaders = [...headers];
+    newHeaders[index] = { ...newHeaders[index], [field]: value };
+    updateWebhookNotifier({ headers: newHeaders });
+  };
+
+  const removeHeader = (index: number) => {
+    const newHeaders = headers.filter((_, i) => i !== index);
+    updateWebhookNotifier({ headers: newHeaders });
+  };
+
   return (
     <>
-      <div className="flex items-center">
-        <div className="w-[130px] min-w-[130px]">Webhook URL</div>
-
-        <div className="w-[250px]">
-          <Input
-            value={notifier?.webhookNotifier?.webhookUrl || ''}
-            onChange={(e) => {
-              setNotifier({
-                ...notifier,
-                webhookNotifier: {
-                  ...(notifier.webhookNotifier || { webhookMethod: WebhookMethod.POST }),
-                  webhookUrl: e.target.value.trim(),
-                },
-              });
-              setUnsaved();
-            }}
-            size="small"
-            className="w-full"
-            placeholder="https://example.com/webhook"
-          />
-        </div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">Webhook URL</div>
+        <Input
+          value={notifier?.webhookNotifier?.webhookUrl || ''}
+          onChange={(e) => {
+            updateWebhookNotifier({ webhookUrl: e.target.value.trim() });
+          }}
+          size="small"
+          className="w-full max-w-[250px]"
+          placeholder="https://example.com/webhook"
+        />
       </div>
 
-      <div className="mt-1 flex items-center">
-        <div className="w-[130px] min-w-[130px]">Method</div>
-
-        <div className="w-[250px]">
+      <div className="mt-1 mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[150px] sm:mb-0">Method</div>
+        <div className="flex items-center">
           <Select
             value={notifier?.webhookNotifier?.webhookMethod || WebhookMethod.POST}
             onChange={(value) => {
-              setNotifier({
-                ...notifier,
-                webhookNotifier: {
-                  ...(notifier.webhookNotifier || { webhookUrl: '' }),
-                  webhookMethod: value,
-                },
-              });
-              setUnsaved();
+              updateWebhookNotifier({ webhookMethod: value });
             }}
             size="small"
-            className="w-full"
+            className="w-[100px] max-w-[250px]"
             options={[
               { value: WebhookMethod.POST, label: 'POST' },
               { value: WebhookMethod.GET, label: 'GET' },
             ]}
           />
         </div>
-
-        <Tooltip
-          className="cursor-pointer"
-          title="The HTTP method that will be used to call the webhook"
-        >
-          <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-        </Tooltip>
       </div>
 
+      <div className="mt-3 mb-1 flex w-full flex-col items-start">
+        <div className="mb-1 flex items-center">
+          <span className="min-w-[150px]">
+            Custom headers{' '}
+            <Tooltip title="Add custom HTTP headers to the webhook request (e.g., Authorization, X-API-Key)">
+              <InfoCircleOutlined className="ml-1" style={{ color: 'gray' }} />
+            </Tooltip>
+          </span>
+        </div>
+
+        <div className="w-full max-w-[500px]">
+          {headers.map((header: WebhookHeader, index: number) => (
+            <div key={index} className="mb-1 flex items-center gap-2">
+              <Input
+                value={header.key}
+                onChange={(e) => updateHeader(index, 'key', e.target.value)}
+                size="small"
+                style={{ width: 150, flexShrink: 0 }}
+                placeholder="Header name"
+              />
+              <Input
+                value={header.value}
+                onChange={(e) => updateHeader(index, 'value', e.target.value)}
+                size="small"
+                style={{ flex: 1, minWidth: 0 }}
+                placeholder="Header value"
+              />
+              <Button
+                type="text"
+                danger
+                size="small"
+                icon={<DeleteOutlined />}
+                onClick={() => removeHeader(index)}
+              />
+            </div>
+          ))}
+
+          <Button
+            type="dashed"
+            size="small"
+            icon={<PlusOutlined />}
+            onClick={addHeader}
+            className="mt-1"
+          >
+            Add header
+          </Button>
+        </div>
+      </div>
+
+      {notifier?.webhookNotifier?.webhookMethod === WebhookMethod.POST && (
+        <div className="mt-3 mb-1 flex w-full flex-col items-start">
+          <div className="mb-1 flex items-center">
+            <span className="min-w-[150px]">Body template </span>
+          </div>
+
+          <div className="mb-2 text-xs text-gray-500 dark:text-gray-400">
+            <span className="mr-4">
+              <code className="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-700">
+                {'{{heading}}'}
+              </code>{' '}
+              — notification title
+            </span>
+            <span>
+              <code className="rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-700">
+                {'{{message}}'}
+              </code>{' '}
+              — notification message
+            </span>
+          </div>
+
+          <Input.TextArea
+            value={bodyTemplate}
+            onChange={(e) => {
+              updateWebhookNotifier({ bodyTemplate: e.target.value });
+            }}
+            className="w-full max-w-[500px] font-mono text-xs"
+            rows={6}
+            placeholder={DEFAULT_BODY_TEMPLATE}
+            status={jsonError ? 'error' : undefined}
+          />
+          {jsonError && <div className="mt-1 text-xs text-red-500">{jsonError}</div>}
+        </div>
+      )}
+
       {notifier?.webhookNotifier?.webhookUrl && (
-        <div className="mt-3">
-          <div className="mb-1">Example request</div>
+        <div className="mt-4">
+          <div className="mb-1 font-medium">Example request</div>
 
           {notifier?.webhookNotifier?.webhookMethod === WebhookMethod.GET && (
-            <div className="rounded bg-gray-100 p-2 px-3 text-sm break-all">
-              GET {notifier?.webhookNotifier?.webhookUrl}?heading=✅ Backup completed for
-              database&message=Backup completed successfully in 2m 17s.\nCompressed backup size:
-              1.7GB
+            <div className="rounded bg-gray-100 p-2 px-3 text-sm break-all dark:bg-gray-800">
+              <div className="font-semibold text-blue-600 dark:text-blue-400">GET</div>
+              <div className="mt-1">
+                {notifier?.webhookNotifier?.webhookUrl}
+                {
+                  '?heading=✅ Backup completed for database "my-database" (workspace "Production")&message=Backup completed successfully in 1m 23s.%0ACompressed backup size: 256.00 MB'
+                }
+              </div>
+              {headers.length > 0 && (
+                <div className="mt-2 border-t border-gray-200 pt-2 dark:border-gray-600">
+                  <div className="text-xs font-semibold text-gray-500 dark:text-gray-400">
+                    Headers:
+                  </div>
+                  {headers
+                    .filter((h) => h.key)
+                    .map((h, i) => (
+                      <div key={i} className="text-xs">
+                        {h.key}: {h.value || '(empty)'}
+                      </div>
+                    ))}
+                </div>
+              )}
             </div>
           )}
 
           {notifier?.webhookNotifier?.webhookMethod === WebhookMethod.POST && (
-            <div className="rounded bg-gray-100 p-2 px-3 font-mono text-sm break-all whitespace-pre-line">
-              {`POST ${notifier?.webhookNotifier?.webhookUrl}
-Content-Type: application/json
-
-{
-  "heading": "✅ Backup completed for database",
-  "message": "Backup completed successfully in 2m 17s.\\nCompressed backup size: 1.7GB"
-}
-`}
+            <div className="rounded bg-gray-100 p-2 px-3 font-mono text-sm break-words whitespace-pre-wrap dark:bg-gray-800">
+              <div className="font-semibold text-blue-600 dark:text-blue-400">
+                POST {notifier?.webhookNotifier?.webhookUrl}
+              </div>
+              <div className="mt-1 text-gray-600 dark:text-gray-400">
+                {headers.find((h) => h.key.toLowerCase() === 'content-type')
+                  ? ''
+                  : 'Content-Type: application/json'}
+                {headers
+                  .filter((h) => h.key)
+                  .map((h) => `\n${h.key}: ${h.value}`)
+                  .join('')}
+              </div>
+              <div className="mt-2 break-words whitespace-pre-wrap">
+                {notifier?.webhookNotifier?.bodyTemplate
+                  ? notifier.webhookNotifier.bodyTemplate
+                      .replace(
+                        '{{heading}}',
+                        '✅ Backup completed for database "my-database" (workspace "Production")',
+                      )
+                      .replace(
+                        '{{message}}',
+                        'Backup completed successfully in 1m 23s.\\nCompressed backup size: 256.00 MB',
+                      )
+                  : `{
+  "heading": "✅ Backup completed for database "my-database" (workspace "My workspace")",
+  "message": "Backup completed successfully in 1m 23s. Compressed backup size: 256.00 MB"
+}`}
+              </div>
             </div>
           )}
         </div>

frontend/src/features/notifiers/ui/show/notifier/ShowDiscordNotifierComponent.tsx

@@ -10,7 +10,7 @@ export function ShowDiscordNotifierComponent({ notifier }: Props) {
       <div className="flex">
         <div className="max-w-[110px] min-w-[110px] pr-3">Channel webhook URL</div>
 
-        <div className="w-[250px]">{notifier.webhookNotifier?.webhookUrl.slice(0, 10)}*******</div>
+        <div>{notifier.webhookNotifier?.webhookUrl.slice(0, 10)}*******</div>
       </div>
     </>
   );

frontend/src/features/notifiers/ui/show/notifier/ShowSlackNotifierComponent.tsx

@@ -10,7 +10,7 @@ export function ShowSlackNotifierComponent({ notifier }: Props) {
       <div className="flex items-center">
         <div className="min-w-[110px]">Bot token</div>
 
-        <div className="w-[250px]">*********</div>
+        <div>*********</div>
       </div>
 
       <div className="mb-1 flex items-center">

frontend/src/features/notifiers/ui/show/notifier/ShowTeamsNotifierComponent.tsx

@@ -18,7 +18,7 @@ export function ShowTeamsNotifierComponent({ notifier }: Props) {
     <>
       <div className="flex items-center">
         <div className="min-w-[110px]">Power Automate URL: </div>
-        <div className="w-[250px] break-all">
+        <div className="w-[50px] break-all md:w-[250px]">
           {url ? (
             <>
               <span title={url}>{display}</span>

frontend/src/features/notifiers/ui/show/notifier/ShowTelegramNotifierComponent.tsx

@@ -10,7 +10,7 @@ export function ShowTelegramNotifierComponent({ notifier }: Props) {
       <div className="flex items-center">
         <div className="min-w-[110px]">Bot token</div>
 
-        <div className="w-[250px]">*********</div>
+        <div>*********</div>
       </div>
 
       <div className="mb-1 flex items-center">

frontend/src/features/notifiers/ui/show/notifier/ShowWebhookNotifierComponent.tsx

@@ -1,22 +1,50 @@
-import type { Notifier } from '../../../../../entity/notifiers';
+import type { Notifier, WebhookHeader } from '../../../../../entity/notifiers';
+import { WebhookMethod } from '../../../../../entity/notifiers';
 
 interface Props {
   notifier: Notifier;
 }
 
 export function ShowWebhookNotifierComponent({ notifier }: Props) {
+  const headers = notifier?.webhookNotifier?.headers || [];
+  const hasHeaders = headers.filter((h: WebhookHeader) => h.key).length > 0;
+
   return (
     <>
       <div className="flex items-center">
         <div className="min-w-[110px]">Webhook URL</div>
-
-        <div className="w-[250px]">{notifier?.webhookNotifier?.webhookUrl || '-'}</div>
+        <div className="max-w-[350px] truncate">{notifier?.webhookNotifier?.webhookUrl || '-'}</div>
       </div>
 
       <div className="mt-1 mb-1 flex items-center">
         <div className="min-w-[110px]">Method</div>
         <div>{notifier?.webhookNotifier?.webhookMethod || '-'}</div>
       </div>
+
+      {hasHeaders && (
+        <div className="mt-1 mb-1 flex items-start">
+          <div className="min-w-[110px]">Headers</div>
+          <div className="flex flex-col text-sm">
+            {headers
+              .filter((h: WebhookHeader) => h.key)
+              .map((h: WebhookHeader, i: number) => (
+                <div key={i} className="text-gray-600">
+                  <span className="font-medium">{h.key}:</span> {h.value || '(empty)'}
+                </div>
+              ))}
+          </div>
+        </div>
+      )}
+
+      {notifier?.webhookNotifier?.webhookMethod === WebhookMethod.POST &&
+        notifier?.webhookNotifier?.bodyTemplate && (
+          <div className="mt-1 mb-1 flex items-start">
+            <div className="min-w-[110px]">Body Template</div>
+            <div className="max-w-[350px] rounded bg-gray-50 p-2 font-mono text-xs whitespace-pre-wrap">
+              {notifier.webhookNotifier.bodyTemplate}
+            </div>
+          </div>
+        )}
     </>
   );
 }

frontend/src/features/restores/ui/RestoresComponent.tsx

@@ -111,7 +111,6 @@ export const RestoresComponent = ({ database, backup }: Props) => {
               setEditingDatabase({ ...database });
               restore(database);
             }}
-            isShowDbVersionHint={false}
           />
         </>
       );
@@ -211,7 +210,7 @@ export const RestoresComponent = ({ database, backup }: Props) => {
                       <div className="w-[75px] min-w-[75px]">Duration</div>
                       <div>
                         <div>{duration}</div>
-                        <div className="mt-2 text-xs text-gray-500">
+                        <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
                           Expected restoration time usually 3x-5x longer than the backup duration
                           (sometimes less, sometimes more depending on data type)
                           <br />

frontend/src/features/settings/ui/AuditLogsComponent.tsx

@@ -7,6 +7,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { auditLogApi } from '../../../entity/audit-logs/api/auditLogApi';
 import type { AuditLog } from '../../../entity/audit-logs/model/AuditLog';
 import type { GetAuditLogsRequest } from '../../../entity/audit-logs/model/GetAuditLogsRequest';
+import { useIsMobile } from '../../../shared/hooks';
 import { getUserTimeFormat } from '../../../shared/time';
 
 interface Props {
@@ -15,6 +16,7 @@ interface Props {
 
 export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Props) {
   const { message } = App.useApp();
+  const isMobile = useIsMobile();
   const [auditLogs, setAuditLogs] = useState<AuditLog[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
@@ -103,7 +105,7 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
       render: (_, record: AuditLog) => {
         if (!record.userEmail && !record.userName) {
           return (
-            <span className="inline-block rounded-full bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-600">
+            <span className="inline-block rounded-full bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
               System
             </span>
           );
@@ -114,7 +116,7 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
           : record.userEmail;
 
         return (
-          <span className="inline-block rounded-full bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-800">
+          <span className="inline-block rounded-full bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">
             {displayText}
           </span>
         );
@@ -124,7 +126,9 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
       title: 'Message',
       dataIndex: 'message',
       key: 'message',
-      render: (message: string) => <span className="text-xs text-gray-900">{message}</span>,
+      render: (message: string) => (
+        <span className="text-xs text-gray-900 dark:text-gray-100">{message}</span>
+      ),
     },
     {
       title: 'Workspace',
@@ -134,7 +138,9 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
       render: (workspaceId: string | undefined) => (
         <span
           className={`inline-block rounded-full px-1.5 py-0.5 text-xs font-medium ${
-            workspaceId ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-600'
+            workspaceId
+              ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
+              : 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
           }`}
         >
           {workspaceId || '-'}
@@ -150,7 +156,7 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
         const date = dayjs(createdAt);
         const timeFormat = getUserTimeFormat();
         return (
-          <span className="text-xs text-gray-700">
+          <span className="text-xs text-gray-700 dark:text-gray-300">
             {`${date.format(timeFormat.format)} (${date.fromNow()})`}
           </span>
         );
@@ -158,11 +164,57 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
     },
   ];
 
+  const renderAuditLogCard = (log: AuditLog) => {
+    const date = dayjs(log.createdAt);
+    const timeFormat = getUserTimeFormat();
+
+    const getUserDisplay = () => {
+      if (!log.userEmail && !log.userName) {
+        return (
+          <span className="inline-block rounded-full bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
+            System
+          </span>
+        );
+      }
+
+      const displayText = log.userName ? `${log.userName} (${log.userEmail})` : log.userEmail;
+
+      return (
+        <span className="inline-block rounded-full bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+          {displayText}
+        </span>
+      );
+    };
+
+    return (
+      <div
+        key={log.id}
+        className="mb-3 rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-800"
+      >
+        <div className="flex items-start justify-between">
+          <div className="flex-1">{getUserDisplay()}</div>
+          <div className="text-right text-xs text-gray-500 dark:text-gray-400">
+            <div>{date.format(timeFormat.format)}</div>
+            <div className="text-gray-400 dark:text-gray-500">{date.fromNow()}</div>
+          </div>
+        </div>
+        <div className="mt-2 text-sm text-gray-900 dark:text-gray-100">{log.message}</div>
+        {log.workspaceName && (
+          <div className="mt-2">
+            <span className="inline-block rounded-full bg-blue-100 px-1.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+              {log.workspaceName}
+            </span>
+          </div>
+        )}
+      </div>
+    );
+  };
+
   return (
     <div className="max-w-[1200px]">
       <div className="mb-4 flex items-center justify-between">
-        <h2 className="text-xl font-bold">Audit Logs</h2>
-        <div className="text-sm text-gray-500">
+        <h2 className="text-xl font-bold dark:text-white">Audit Logs</h2>
+        <div className="text-sm text-gray-500 dark:text-gray-400">
           {isLoading ? (
             <Spin indicator={<LoadingOutlined spin />} />
           ) : (
@@ -175,27 +227,37 @@ export function AuditLogsComponent({ scrollContainerRef: externalScrollRef }: Pr
         <div className="flex h-64 items-center justify-center">
           <Spin indicator={<LoadingOutlined spin />} size="large" />
         </div>
+      ) : auditLogs.length === 0 ? (
+        <div className="flex h-32 items-center justify-center text-gray-500 dark:text-gray-400">
+          No audit logs found.
+        </div>
       ) : (
         <>
-          <Table
-            columns={columns}
-            dataSource={auditLogs}
-            pagination={false}
-            rowKey="id"
-            size="small"
-            className="mb-4"
-          />
+          {isMobile ? (
+            <div>{auditLogs.map(renderAuditLogCard)}</div>
+          ) : (
+            <Table
+              columns={columns}
+              dataSource={auditLogs}
+              pagination={false}
+              rowKey="id"
+              size="small"
+              className="mb-4"
+            />
+          )}
 
           {isLoadingMore && (
             <div className="flex justify-center py-4">
               <Spin indicator={<LoadingOutlined spin />} />
-              <span className="ml-2 text-sm text-gray-500">Loading more logs...</span>
+              <span className="ml-2 text-sm text-gray-500 dark:text-gray-400">
+                Loading more logs...
+              </span>
             </div>
           )}
 
           {!hasMore && auditLogs.length > 0 && (
-            <div className="py-4 text-center text-sm text-gray-500">
-              All logs loaded ({total} total)
+            <div className="py-4 text-center text-sm text-gray-500 dark:text-gray-400">
+              All logs loaded ({auditLogs.length} total)
             </div>
           )}
         </>

frontend/src/features/settings/ui/SettingsComponent.tsx

@@ -91,14 +91,14 @@ export function SettingsComponent({ contentHeight }: Props) {
   console.log(`isCloud = ${IS_CLOUD}`);
 
   return (
-    <div className="flex grow pl-3">
+    <div className="flex grow sm:pl-5">
       <div className="w-full">
         <div
           ref={scrollContainerRef}
-          className="grow overflow-y-auto rounded bg-white p-5 shadow"
+          className="grow overflow-y-auto rounded bg-white p-5 shadow dark:bg-gray-800"
           style={{ height: contentHeight }}
         >
-          <h1 className="text-2xl font-bold">Postgresus Settings</h1>
+          <h1 className="text-2xl font-bold dark:text-white">Postgresus settings</h1>
 
           <div className="mt-6">
             {isLoading ? (
@@ -109,10 +109,12 @@ export function SettingsComponent({ contentHeight }: Props) {
               <div className="max-w-lg text-sm">
                 <div className="space-y-6">
                   {/* External Registrations Setting */}
-                  <div className="flex items-start justify-between border-b border-gray-200 pb-4">
+                  <div className="flex items-start justify-between border-b border-gray-200 pb-4 dark:border-gray-700">
                     <div className="flex-1 pr-20">
-                      <div className="font-medium text-gray-900">Allow external registrations</div>
-                      <div className="mt-1 text-gray-500">
+                      <div className="font-medium text-gray-900 dark:text-white">
+                        Allow external registrations
+                      </div>
+                      <div className="mt-1 text-gray-500 dark:text-gray-400">
                         When enabled, new users can register accounts in Postgresus. If disabled,
                         new users can only register via invitation
                       </div>
@@ -135,11 +137,13 @@ export function SettingsComponent({ contentHeight }: Props) {
 
                   {/* Member Invitations Setting */}
                   {!formSettings.isAllowExternalRegistrations && (
-                    <div className="flex items-start justify-between border-b border-gray-200 pb-4">
+                    <div className="flex items-start justify-between border-b border-gray-200 pb-4 dark:border-gray-700">
                       <div className="flex-1 pr-20">
-                        <div className="font-medium text-gray-900">Allow member invitations</div>
+                        <div className="font-medium text-gray-900 dark:text-white">
+                          Allow member invitations
+                        </div>
 
-                        <div className="mt-1 text-gray-500">
+                        <div className="mt-1 text-gray-500 dark:text-gray-400">
                           When enabled, existing members can invite new users to join Postgresus. If
                           not - only admins can invite users.
                         </div>
@@ -162,11 +166,13 @@ export function SettingsComponent({ contentHeight }: Props) {
                   )}
 
                   {/* Member Workspace Creation Setting */}
-                  <div className="flex items-start justify-between border-b border-gray-200 pb-4">
+                  <div className="flex items-start justify-between border-b border-gray-200 pb-4 dark:border-gray-700">
                     <div className="flex-1 pr-20">
-                      <div className="font-medium text-gray-900">Members can create workspaces</div>
+                      <div className="font-medium text-gray-900 dark:text-white">
+                        Members can create workspaces
+                      </div>
 
-                      <div className="mt-1 text-gray-500">
+                      <div className="mt-1 text-gray-500 dark:text-gray-400">
                         When enabled, members (non-admin users) can create new workspaces. If not -
                         only admins can create workspaces.
                       </div>
@@ -209,7 +215,7 @@ export function SettingsComponent({ contentHeight }: Props) {
             )}
           </div>
 
-          <div className="mt-3 text-sm text-gray-500">
+          <div className="mt-3 text-sm text-gray-500 dark:text-gray-400">
             Read more about settings you can{' '}
             <a
               href="https://postgresus.com/access-management/#global-settings"
@@ -223,12 +229,12 @@ export function SettingsComponent({ contentHeight }: Props) {
 
           {/* Health-check Information */}
           <div className="my-8 max-w-2xl">
-            <h2 className="mb-3 text-xl font-bold">Health-check</h2>
+            <h2 className="mb-3 text-xl font-bold dark:text-white">Health-check</h2>
 
             <div className="group relative">
-              <div className="flex items-center rounded-md border border-gray-300 bg-gray-50 px-3 py-2 !font-mono text-sm text-gray-700">
+              <div className="flex items-center rounded-md border border-gray-300 bg-gray-50 px-3 py-2 !font-mono text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200">
                 <code
-                  className="flex-1 cursor-pointer transition-colors select-all hover:text-blue-600"
+                  className="flex-1 cursor-pointer break-all transition-colors select-all hover:text-blue-600"
                   onClick={() => {
                     window.open(`${getApplicationServer()}/api/v1/system/health`, '_blank');
                   }}
@@ -248,7 +254,7 @@ export function SettingsComponent({ contentHeight }: Props) {
                   📋
                 </Button>
               </div>
-              <div className="mt-1 text-xs text-gray-500">
+              <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                 Use this endpoint to monitor your Postgresus system&apos;s availability
               </div>
             </div>

frontend/src/features/storages/ui/StorageCardComponent.tsx

@@ -17,13 +17,15 @@ export const StorageCardComponent = ({
 }: Props) => {
   return (
     <div
-      className={`mb-3 cursor-pointer rounded p-3 shadow ${selectedStorageId === storage.id ? 'bg-blue-100' : 'bg-white'}`}
+      className={`mb-3 cursor-pointer rounded p-3 shadow ${selectedStorageId === storage.id ? 'bg-blue-100 dark:bg-blue-800' : 'bg-white dark:bg-gray-800'}`}
       onClick={() => setSelectedStorageId(storage.id)}
     >
       <div className="mb-1 font-bold">{storage.name}</div>
 
       <div className="flex items-center">
-        <div className="text-sm text-gray-500">Type: {getStorageNameFromType(storage.type)}</div>
+        <div className="text-sm text-gray-500 dark:text-gray-400">
+          Type: {getStorageNameFromType(storage.type)}
+        </div>
 
         <img
           src={getStorageLogoFromType(storage.type)}
@@ -33,7 +35,7 @@ export const StorageCardComponent = ({
       </div>
 
       {storage.lastSaveError && (
-        <div className="mt-1 flex items-center text-sm text-red-600 underline">
+        <div className="mt-1 flex items-center text-sm text-red-600 underline dark:text-red-400">
           <InfoCircleOutlined className="mr-1" style={{ color: 'red' }} />
           Has save error
         </div>

frontend/src/features/storages/ui/StorageComponent.tsx

@@ -122,7 +122,7 @@ export const StorageComponent = ({
 
   return (
     <div className="w-full">
-      <div className="grow overflow-y-auto rounded bg-white p-5 shadow">
+      <div className="grow overflow-y-auto rounded bg-white p-5 shadow dark:bg-gray-800">
         {!storage ? (
           <div className="mt-10 flex justify-center">
             <Spin />
@@ -164,7 +164,7 @@ export const StorageComponent = ({
                         setEditStorage(undefined);
                       }}
                     >
-                      <CloseOutlined className="text-gray-500" />
+                      <CloseOutlined className="text-gray-500 dark:text-gray-400" />
                     </Button>
                   </div>
                 </div>
@@ -196,7 +196,7 @@ export const StorageComponent = ({
                   {storage.lastSaveError}
                 </div>
 
-                <div className="mt-3 text-sm break-words whitespace-pre-wrap text-gray-500">
+                <div className="mt-3 text-sm break-words whitespace-pre-wrap text-gray-500 dark:text-gray-400">
                   To clean this error (choose any):
                   <ul>
                     <li>- test connection via button below (even if you updated settings);</li>
@@ -242,7 +242,6 @@ export const StorageComponent = ({
                 <Button
                   type="primary"
                   className="mr-1"
-                  ghost
                   onClick={testConnection}
                   loading={isTestingConnection}
                   disabled={isTestingConnection}

frontend/src/features/storages/ui/StoragesComponent.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { storageApi } from '../../../entity/storages';
 import type { Storage } from '../../../entity/storages';
 import type { WorkspaceResponse } from '../../../entity/workspaces';
+import { useIsMobile } from '../../../shared/hooks';
 import { StorageCardComponent } from './StorageCardComponent';
 import { StorageComponent } from './StorageComponent';
 import { EditStorageComponent } from './edit/EditStorageComponent';
@@ -14,22 +15,46 @@ interface Props {
   isCanManageStorages: boolean;
 }
 
+const SELECTED_STORAGE_STORAGE_KEY = 'selectedStorageId';
+
 export const StoragesComponent = ({ contentHeight, workspace, isCanManageStorages }: Props) => {
+  const isMobile = useIsMobile();
   const [isLoading, setIsLoading] = useState(true);
   const [storages, setStorages] = useState<Storage[]>([]);
 
   const [isShowAddStorage, setIsShowAddStorage] = useState(false);
   const [selectedStorageId, setSelectedStorageId] = useState<string | undefined>(undefined);
 
-  const loadStorages = () => {
-    setIsLoading(true);
+  const updateSelectedStorageId = (storageId: string | undefined) => {
+    setSelectedStorageId(storageId);
+    if (storageId) {
+      localStorage.setItem(`${SELECTED_STORAGE_STORAGE_KEY}_${workspace.id}`, storageId);
+    } else {
+      localStorage.removeItem(`${SELECTED_STORAGE_STORAGE_KEY}_${workspace.id}`);
+    }
+  };
+
+  const loadStorages = (isSilent = false, selectStorageId?: string) => {
+    if (!isSilent) {
+      setIsLoading(true);
+    }
 
     storageApi
       .getStorages(workspace.id)
       .then((storages: Storage[]) => {
         setStorages(storages);
-        if (!selectedStorageId) {
-          setSelectedStorageId(storages[0]?.id);
+        if (selectStorageId) {
+          updateSelectedStorageId(selectStorageId);
+        } else if (!selectedStorageId && !isSilent && !isMobile) {
+          // On desktop, auto-select a storage; on mobile, keep it unselected to show the list first
+          const savedStorageId = localStorage.getItem(
+            `${SELECTED_STORAGE_STORAGE_KEY}_${workspace.id}`,
+          );
+          const storageToSelect =
+            savedStorageId && storages.some((s) => s.id === savedStorageId)
+              ? savedStorageId
+              : storages[0]?.id;
+          updateSelectedStorageId(storageToSelect);
         }
       })
       .catch((e: Error) => alert(e.message))
@@ -54,45 +79,66 @@ export const StoragesComponent = ({ contentHeight, workspace, isCanManageStorage
     </Button>
   );
 
+  // On mobile, show either the list or the storage details
+  const showStorageList = !isMobile || !selectedStorageId;
+  const showStorageDetails = selectedStorageId && (!isMobile || selectedStorageId);
+
   return (
     <>
       <div className="flex grow">
-        <div
-          className="mx-3 w-[250px] min-w-[250px] overflow-y-auto"
-          style={{ height: contentHeight }}
-        >
-          {storages.length >= 5 && isCanManageStorages && addStorageButton}
+        {showStorageList && (
+          <div
+            className="w-full overflow-y-auto md:mx-3 md:w-[250px] md:min-w-[250px] md:pr-2"
+            style={{ height: contentHeight }}
+          >
+            {storages.length >= 5 && isCanManageStorages && addStorageButton}
 
-          {storages.map((storage) => (
-            <StorageCardComponent
-              key={storage.id}
-              storage={storage}
-              selectedStorageId={selectedStorageId}
-              setSelectedStorageId={setSelectedStorageId}
-            />
-          ))}
+            {storages.map((storage) => (
+              <StorageCardComponent
+                key={storage.id}
+                storage={storage}
+                selectedStorageId={selectedStorageId}
+                setSelectedStorageId={updateSelectedStorageId}
+              />
+            ))}
 
-          {storages.length < 5 && isCanManageStorages && addStorageButton}
+            {storages.length < 5 && isCanManageStorages && addStorageButton}
 
-          <div className="mx-3 text-center text-xs text-gray-500">
-            Storage - is a place where backups will be stored (local disk, S3, etc.)
+            <div className="mx-3 text-center text-xs text-gray-500 dark:text-gray-400">
+              Storage - is a place where backups will be stored (local disk, S3, etc.)
+            </div>
           </div>
-        </div>
+        )}
 
-        {selectedStorageId && (
-          <StorageComponent
-            storageId={selectedStorageId}
-            onStorageChanged={() => {
-              loadStorages();
-            }}
-            onStorageDeleted={() => {
-              loadStorages();
-              setSelectedStorageId(
-                storages.filter((storage) => storage.id !== selectedStorageId)[0]?.id,
-              );
-            }}
-            isCanManageStorages={isCanManageStorages}
-          />
+        {showStorageDetails && (
+          <div className="flex w-full flex-col md:flex-1">
+            {isMobile && (
+              <div className="mb-2">
+                <Button
+                  type="default"
+                  onClick={() => updateSelectedStorageId(undefined)}
+                  className="w-full"
+                >
+                  ← Back to storages
+                </Button>
+              </div>
+            )}
+
+            <StorageComponent
+              storageId={selectedStorageId}
+              onStorageChanged={() => {
+                loadStorages();
+              }}
+              onStorageDeleted={() => {
+                const remainingStorages = storages.filter(
+                  (storage) => storage.id !== selectedStorageId,
+                );
+                updateSelectedStorageId(remainingStorages[0]?.id);
+                loadStorages();
+              }}
+              isCanManageStorages={isCanManageStorages}
+            />
+          </div>
         )}
       </div>
 
@@ -103,7 +149,7 @@ export const StoragesComponent = ({ contentHeight, workspace, isCanManageStorage
           open={isShowAddStorage}
           onCancel={() => setIsShowAddStorage(false)}
         >
-          <div className="my-3 max-w-[250px] text-gray-500">
+          <div className="my-3 max-w-[250px] text-gray-500 dark:text-gray-400">
             Storage - is a place where backups will be stored (local disk, S3, etc.)
           </div>
 
@@ -112,8 +158,8 @@ export const StoragesComponent = ({ contentHeight, workspace, isCanManageStorage
             isShowName
             isShowClose={false}
             onClose={() => setIsShowAddStorage(false)}
-            onChanged={() => {
-              loadStorages();
+            onChanged={(storage) => {
+              loadStorages(false, storage.id);
               setIsShowAddStorage(false);
             }}
           />

frontend/src/features/storages/ui/edit/EditStorageComponent.tsx

@@ -39,6 +39,7 @@ export function EditStorageComponent({
 
   const [isTestingConnection, setIsTestingConnection] = useState(false);
   const [isTestConnectionSuccess, setIsTestConnectionSuccess] = useState(false);
+  const [connectionError, setConnectionError] = useState<string | undefined>();
 
   const save = async () => {
     if (!storage) return;
@@ -60,6 +61,7 @@ export function EditStorageComponent({
     if (!storage) return;
 
     setIsTestingConnection(true);
+    setConnectionError(undefined);
 
     try {
       await storageApi.testStorageConnectionDirect(storage);
@@ -69,7 +71,9 @@ export function EditStorageComponent({
         description: 'Storage connection tested successfully',
       });
     } catch (e) {
-      alert((e as Error).message);
+      const errorMessage = (e as Error).message;
+      setConnectionError(errorMessage);
+      alert(errorMessage);
     }
 
     setIsTestingConnection(false);
@@ -239,8 +243,8 @@ export function EditStorageComponent({
   return (
     <div>
       {isShowName && (
-        <div className="mb-1 flex items-center">
-          <div className="min-w-[110px]">Name</div>
+        <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+          <div className="mb-1 min-w-[110px] sm:mb-0">Name</div>
 
           <Input
             value={storage?.name || ''}
@@ -255,27 +259,29 @@ export function EditStorageComponent({
         </div>
       )}
 
-      <div className="mb-1 flex items-center">
-        <div className="min-w-[110px]">Type</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[110px] sm:mb-0">Type</div>
 
-        <Select
-          value={storage?.type}
-          options={[
-            { label: 'Local storage', value: StorageType.LOCAL },
-            { label: 'S3', value: StorageType.S3 },
-            { label: 'Google Drive', value: StorageType.GOOGLE_DRIVE },
-            { label: 'NAS', value: StorageType.NAS },
-            { label: 'Azure Blob Storage', value: StorageType.AZURE_BLOB },
-          ]}
-          onChange={(value) => {
-            setStorageType(value);
-            setIsUnsaved(true);
-          }}
-          size="small"
-          className="w-full max-w-[250px]"
-        />
+        <div className="flex items-center">
+          <Select
+            value={storage?.type}
+            options={[
+              { label: 'Local storage', value: StorageType.LOCAL },
+              { label: 'S3', value: StorageType.S3 },
+              { label: 'Google Drive', value: StorageType.GOOGLE_DRIVE },
+              { label: 'NAS', value: StorageType.NAS },
+              { label: 'Azure Blob Storage', value: StorageType.AZURE_BLOB },
+            ]}
+            onChange={(value) => {
+              setStorageType(value);
+              setIsUnsaved(true);
+            }}
+            size="small"
+            className="w-[250px] max-w-[250px]"
+          />
 
-        <img src={getStorageLogoFromType(storage?.type)} className="ml-2 h-4 w-4" />
+          <img src={getStorageLogoFromType(storage?.type)} className="ml-2 h-4 w-4" />
+        </div>
       </div>
 
       <div className="mt-5" />
@@ -288,7 +294,9 @@ export function EditStorageComponent({
             setUnsaved={() => {
               setIsUnsaved(true);
               setIsTestConnectionSuccess(false);
+              setConnectionError(undefined);
             }}
+            connectionError={connectionError}
           />
         )}
 

frontend/src/features/storages/ui/edit/storages/EditAzureBlobStorageComponent.tsx

@@ -17,8 +17,8 @@ export function EditAzureBlobStorageComponent({ storage, setStorage, setUnsaved
 
   return (
     <>
-      <div className="mb-1 flex items-center">
-        <div className="min-w-[110px]">Auth method</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[110px] sm:mb-0">Auth method</div>
         <Radio.Group
           value={storage?.azureBlobStorage?.authMethod || 'ACCOUNT_KEY'}
           onChange={(e) => {
@@ -41,40 +41,42 @@ export function EditAzureBlobStorageComponent({ storage, setStorage, setUnsaved
       </div>
 
       {storage?.azureBlobStorage?.authMethod === 'CONNECTION_STRING' && (
-        <div className="mb-1 flex items-center">
-          <div className="min-w-[110px]">Connection</div>
-          <Input.Password
-            value={storage?.azureBlobStorage?.connectionString || ''}
-            onChange={(e) => {
-              if (!storage?.azureBlobStorage) return;
+        <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+          <div className="mb-1 min-w-[110px] sm:mb-0">Connection</div>
+          <div className="flex items-center">
+            <Input.Password
+              value={storage?.azureBlobStorage?.connectionString || ''}
+              onChange={(e) => {
+                if (!storage?.azureBlobStorage) return;
 
-              setStorage({
-                ...storage,
-                azureBlobStorage: {
-                  ...storage.azureBlobStorage,
-                  connectionString: e.target.value.trim(),
-                },
-              });
-              setUnsaved();
-            }}
-            size="small"
-            className="w-full max-w-[250px]"
-            placeholder="DefaultEndpointsProtocol=https;AccountName=..."
-          />
+                setStorage({
+                  ...storage,
+                  azureBlobStorage: {
+                    ...storage.azureBlobStorage,
+                    connectionString: e.target.value.trim(),
+                  },
+                });
+                setUnsaved();
+              }}
+              size="small"
+              className="w-full max-w-[250px]"
+              placeholder="DefaultEndpointsProtocol=https;AccountName=..."
+            />
 
-          <Tooltip
-            className="cursor-pointer"
-            title="Azure Storage connection string from Azure Portal"
-          >
-            <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-          </Tooltip>
+            <Tooltip
+              className="cursor-pointer"
+              title="Azure Storage connection string from Azure Portal"
+            >
+              <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+            </Tooltip>
+          </div>
         </div>
       )}
 
       {storage?.azureBlobStorage?.authMethod === 'ACCOUNT_KEY' && (
         <>
-          <div className="mb-1 flex items-center">
-            <div className="min-w-[110px]">Account name</div>
+          <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+            <div className="mb-1 min-w-[110px] sm:mb-0">Account name</div>
             <Input
               value={storage?.azureBlobStorage?.accountName || ''}
               onChange={(e) => {
@@ -95,8 +97,8 @@ export function EditAzureBlobStorageComponent({ storage, setStorage, setUnsaved
             />
           </div>
 
-          <div className="mb-1 flex items-center">
-            <div className="min-w-[110px]">Account key</div>
+          <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+            <div className="mb-1 min-w-[110px] sm:mb-0">Account key</div>
             <Input.Password
               value={storage?.azureBlobStorage?.accountKey || ''}
               onChange={(e) => {
@@ -119,8 +121,8 @@ export function EditAzureBlobStorageComponent({ storage, setStorage, setUnsaved
         </>
       )}
 
-      <div className="mb-1 flex items-center">
-        <div className="min-w-[110px]">Container name</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[110px] sm:mb-0">Container name</div>
         <Input
           value={storage?.azureBlobStorage?.containerName || ''}
           onChange={(e) => {
@@ -159,10 +161,43 @@ export function EditAzureBlobStorageComponent({ storage, setStorage, setUnsaved
       {showAdvanced && (
         <>
           {storage?.azureBlobStorage?.authMethod === 'ACCOUNT_KEY' && (
-            <div className="mb-1 flex items-center">
-              <div className="min-w-[110px]">Endpoint</div>
+            <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+              <div className="mb-1 min-w-[110px] sm:mb-0">Endpoint</div>
+              <div className="flex items-center">
+                <Input
+                  value={storage?.azureBlobStorage?.endpoint || ''}
+                  onChange={(e) => {
+                    if (!storage?.azureBlobStorage) return;
+
+                    setStorage({
+                      ...storage,
+                      azureBlobStorage: {
+                        ...storage.azureBlobStorage,
+                        endpoint: e.target.value.trim(),
+                      },
+                    });
+                    setUnsaved();
+                  }}
+                  size="small"
+                  className="w-full max-w-[250px]"
+                  placeholder="https://myaccount.blob.core.windows.net (optional)"
+                />
+
+                <Tooltip
+                  className="cursor-pointer"
+                  title="Custom endpoint URL (optional, leave empty for standard Azure)"
+                >
+                  <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+                </Tooltip>
+              </div>
+            </div>
+          )}
+
+          <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+            <div className="mb-1 min-w-[110px] sm:mb-0">Blob prefix</div>
+            <div className="flex items-center">
               <Input
-                value={storage?.azureBlobStorage?.endpoint || ''}
+                value={storage?.azureBlobStorage?.prefix || ''}
                 onChange={(e) => {
                   if (!storage?.azureBlobStorage) return;
 
@@ -170,52 +205,23 @@ export function EditAzureBlobStorageComponent({ storage, setStorage, setUnsaved
                     ...storage,
                     azureBlobStorage: {
                       ...storage.azureBlobStorage,
-                      endpoint: e.target.value.trim(),
+                      prefix: e.target.value.trim(),
                     },
                   });
                   setUnsaved();
                 }}
                 size="small"
                 className="w-full max-w-[250px]"
-                placeholder="https://myaccount.blob.core.windows.net (optional)"
+                placeholder="my-prefix/ (optional)"
               />
 
               <Tooltip
                 className="cursor-pointer"
-                title="Custom endpoint URL (optional, leave empty for standard Azure)"
+                title="Optional prefix for all blob names (e.g., 'backups/' or 'my_team/')"
               >
                 <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
               </Tooltip>
             </div>
-          )}
-
-          <div className="mb-1 flex items-center">
-            <div className="min-w-[110px]">Blob prefix</div>
-            <Input
-              value={storage?.azureBlobStorage?.prefix || ''}
-              onChange={(e) => {
-                if (!storage?.azureBlobStorage) return;
-
-                setStorage({
-                  ...storage,
-                  azureBlobStorage: {
-                    ...storage.azureBlobStorage,
-                    prefix: e.target.value.trim(),
-                  },
-                });
-                setUnsaved();
-              }}
-              size="small"
-              className="w-full max-w-[250px]"
-              placeholder="my-prefix/ (optional)"
-            />
-
-            <Tooltip
-              className="cursor-pointer"
-              title="Optional prefix for all blob names (e.g., 'backups/' or 'my_team/')"
-            >
-              <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-            </Tooltip>
           </div>
         </>
       )}

frontend/src/features/storages/ui/edit/storages/EditGoogleDriveStorageComponent.tsx

@@ -37,7 +37,7 @@ export function EditGoogleDriveStorageComponent({ storage, setStorage, setUnsave
   return (
     <>
       <div className="mb-2 flex items-center">
-        <div className="min-w-[110px]" />
+        <div className="hidden min-w-[110px] sm:block" />
 
         <div className="text-xs text-blue-600">
           <a href="https://postgresus.com/storages/google-drive" target="_blank" rel="noreferrer">
@@ -46,8 +46,8 @@ export function EditGoogleDriveStorageComponent({ storage, setStorage, setUnsave
         </div>
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="min-w-[110px]">Client ID</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[110px] sm:mb-0">Client ID</div>
         <Input
           value={storage?.googleDriveStorage?.clientId || ''}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -69,8 +69,8 @@ export function EditGoogleDriveStorageComponent({ storage, setStorage, setUnsave
         />
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="min-w-[110px]">Client Secret</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[110px] sm:mb-0">Client Secret</div>
         <Input
           value={storage?.googleDriveStorage?.clientSecret || ''}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -94,8 +94,8 @@ export function EditGoogleDriveStorageComponent({ storage, setStorage, setUnsave
 
       {storage?.googleDriveStorage?.tokenJson && (
         <>
-          <div className="mb-1 flex items-center">
-            <div className="min-w-[110px]">User Token</div>
+          <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+            <div className="mb-1 min-w-[110px] sm:mb-0">User Token</div>
             <Input
               value={storage?.googleDriveStorage?.tokenJson || ''}
               disabled

frontend/src/features/storages/ui/edit/storages/EditNASStorageComponent.tsx

@@ -12,8 +12,8 @@ interface Props {
 export function EditNASStorageComponent({ storage, setStorage, setUnsaved }: Props) {
   return (
     <>
-      <div className="mb-1 flex items-center">
-        <div className="min-w-[110px]">Host</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[110px] sm:mb-0">Host</div>
         <Input
           value={storage?.nasStorage?.host || ''}
           onChange={(e) => {
@@ -34,8 +34,8 @@ export function EditNASStorageComponent({ storage, setStorage, setUnsaved }: Pro
         />
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="min-w-[110px]">Port</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[110px] sm:mb-0">Port</div>
         <InputNumber
           value={storage?.nasStorage?.port}
           onChange={(value) => {
@@ -58,8 +58,8 @@ export function EditNASStorageComponent({ storage, setStorage, setUnsaved }: Pro
         />
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="min-w-[110px]">Share</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[110px] sm:mb-0">Share</div>
         <Input
           value={storage?.nasStorage?.share || ''}
           onChange={(e) => {
@@ -80,8 +80,8 @@ export function EditNASStorageComponent({ storage, setStorage, setUnsaved }: Pro
         />
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="min-w-[110px]">Username</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[110px] sm:mb-0">Username</div>
         <Input
           value={storage?.nasStorage?.username || ''}
           onChange={(e) => {
@@ -102,8 +102,8 @@ export function EditNASStorageComponent({ storage, setStorage, setUnsaved }: Pro
         />
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="min-w-[110px]">Password</div>
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[110px] sm:mb-0">Password</div>
         <Input.Password
           value={storage?.nasStorage?.password || ''}
           onChange={(e) => {
@@ -124,89 +124,98 @@ export function EditNASStorageComponent({ storage, setStorage, setUnsaved }: Pro
         />
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="min-w-[110px]">Use SSL</div>
-        <Switch
-          checked={storage?.nasStorage?.useSsl || false}
-          onChange={(checked) => {
-            if (!storage?.nasStorage) return;
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[110px] sm:mb-0">Use SSL</div>
+        <div className="flex items-center">
+          <Switch
+            checked={storage?.nasStorage?.useSsl || false}
+            onChange={(checked) => {
+              if (!storage?.nasStorage) return;
 
-            setStorage({
-              ...storage,
-              nasStorage: {
-                ...storage.nasStorage,
-                useSsl: checked,
-              },
-            });
-            setUnsaved();
-          }}
-          size="small"
-        />
+              setStorage({
+                ...storage,
+                nasStorage: {
+                  ...storage.nasStorage,
+                  useSsl: checked,
+                },
+              });
+              setUnsaved();
+            }}
+            size="small"
+          />
 
-        <Tooltip className="cursor-pointer" title="Enable SSL/TLS encryption for secure connection">
-          <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-        </Tooltip>
+          <Tooltip
+            className="cursor-pointer"
+            title="Enable SSL/TLS encryption for secure connection"
+          >
+            <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+          </Tooltip>
+        </div>
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="min-w-[110px]">Domain</div>
-        <Input
-          value={storage?.nasStorage?.domain || ''}
-          onChange={(e) => {
-            if (!storage?.nasStorage) return;
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[110px] sm:mb-0">Domain</div>
+        <div className="flex items-center">
+          <Input
+            value={storage?.nasStorage?.domain || ''}
+            onChange={(e) => {
+              if (!storage?.nasStorage) return;
 
-            setStorage({
-              ...storage,
-              nasStorage: {
-                ...storage.nasStorage,
-                domain: e.target.value.trim() || undefined,
-              },
-            });
-            setUnsaved();
-          }}
-          size="small"
-          className="w-full max-w-[250px]"
-          placeholder="WORKGROUP (optional)"
-        />
+              setStorage({
+                ...storage,
+                nasStorage: {
+                  ...storage.nasStorage,
+                  domain: e.target.value.trim() || undefined,
+                },
+              });
+              setUnsaved();
+            }}
+            size="small"
+            className="w-full max-w-[250px]"
+            placeholder="WORKGROUP (optional)"
+          />
 
-        <Tooltip
-          className="cursor-pointer"
-          title="Windows domain name (optional, leave empty if not using domain authentication)"
-        >
-          <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-        </Tooltip>
+          <Tooltip
+            className="cursor-pointer"
+            title="Windows domain name (optional, leave empty if not using domain authentication)"
+          >
+            <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+          </Tooltip>
+        </div>
       </div>
 
-      <div className="mb-1 flex items-center">
-        <div className="min-w-[110px]">Path</div>
-        <Input
-          value={storage?.nasStorage?.path || ''}
-          onChange={(e) => {
-            if (!storage?.nasStorage) return;
+      <div className="mb-1 flex w-full flex-col items-start sm:flex-row sm:items-center">
+        <div className="mb-1 min-w-[110px] sm:mb-0">Path</div>
+        <div className="flex items-center">
+          <Input
+            value={storage?.nasStorage?.path || ''}
+            onChange={(e) => {
+              if (!storage?.nasStorage) return;
 
-            let pathValue = e.target.value.trim();
-            // Remove leading slash if present
-            if (pathValue.startsWith('/')) {
-              pathValue = pathValue.substring(1);
-            }
+              let pathValue = e.target.value.trim();
+              // Remove leading slash if present
+              if (pathValue.startsWith('/')) {
+                pathValue = pathValue.substring(1);
+              }
 
-            setStorage({
-              ...storage,
-              nasStorage: {
-                ...storage.nasStorage,
-                path: pathValue || undefined,
-              },
-            });
-            setUnsaved();
-          }}
-          size="small"
-          className="w-full max-w-[250px]"
-          placeholder="backups (optional, no leading slash)"
-        />
+              setStorage({
+                ...storage,
+                nasStorage: {
+                  ...storage.nasStorage,
+                  path: pathValue || undefined,
+                },
+              });
+              setUnsaved();
+            }}
+            size="small"
+            className="w-full max-w-[250px]"
+            placeholder="backups (optional, no leading slash)"
+          />
 
-        <Tooltip className="cursor-pointer" title="Subdirectory path within the share (optional)">
-          <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
-        </Tooltip>
+          <Tooltip className="cursor-pointer" title="Subdirectory path within the share (optional)">
+            <InfoCircleOutlined className="ml-2" style={{ color: 'gray' }} />
+          </Tooltip>
+        </div>
       </div>
     </>
   );