release: 0.8.0

feat: add location based on ip to the audit log
release: 0.7.1
2025-12-06 09:13:19 +03:00 · 2024-10-04 12:11:43 +02:00 · 2024-10-04 12:11:10 +02:00 · 2024-10-03 22:20:37 +02:00 · 2024-10-03 22:20:22 +02:00 · 2024-10-03 11:31:11 +02:00
124 changed files with 3242 additions and 298 deletions
--- a/.env.example
+++ b/.env.example
@@ -1 +1,2 @@
 PUBLIC_APP_URL=http://localhost
+TRUST_PROXY=false
--- a/.github/workflows/build-and-push-docker-image.yml
+++ b/.github/workflows/build-and-push-docker-image.yml
@@ -23,6 +23,9 @@ jobs:
          username: ${{ secrets.DOCKER_REGISTRY_USERNAME }}
          password: ${{ secrets.DOCKER_REGISTRY_PASSWORD }}

+      - name: Download GeoLite2 City database
+        run: MAXMIND_LICENSE_KEY=${{ secrets.MAXMIND_LICENSE_KEY }} sh scripts/download-ip-database.sh
+    
      - name: Build and push
        uses: docker/build-push-action@v4
        with:
--- a/.gitignore
+++ b/.gitignore
@@ -34,4 +34,5 @@ vite.config.ts.timestamp-*
 # Application specific
 data
 /frontend/tests/.auth
-pocket-id-backend
+pocket-id-backend
+/backend/GeoLite2-City.mmdb
--- a/.version
+++ b/.version
@@ -1 +1 @@
-0.4.1
+0.8.0
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,76 @@
+## [](https://github.com/stonith404/pocket-id/compare/v0.7.1...v) (2024-10-04)
+
+
+### Features
+
+* add location based on ip to the audit log ([025378d](https://github.com/stonith404/pocket-id/commit/025378d14edd2d72da76e90799a0ccdd42cf672c))
+
+## [](https://github.com/stonith404/pocket-id/compare/v0.7.0...v) (2024-10-03)
+
+
+### Bug Fixes
+
+* initials don't get displayed if Gravatar avatar doesn't exist ([e095628](https://github.com/stonith404/pocket-id/commit/e09562824a794bc7d240e9d229709d4b389db7d5))
+
+## [](https://github.com/stonith404/pocket-id/compare/v0.6.0...v) (2024-10-03)
+
+
+### ⚠ BREAKING CHANGES
+
+* add ability to set light and dark mode logo
+
+### Features
+
+* add ability to set light and dark mode logo ([be45eed](https://github.com/stonith404/pocket-id/commit/be45eed125e33e9930572660a034d5f12dc310ce))
+
+## [](https://github.com/stonith404/pocket-id/compare/v0.5.3...v) (2024-10-02)
+
+
+### Features
+
+* add copy to clipboard option for OIDC client information ([f82020c](https://github.com/stonith404/pocket-id/commit/f82020ccfb0d4fbaa1dd98182188149d8085252a))
+* add gravatar profile picture integration ([365734e](https://github.com/stonith404/pocket-id/commit/365734ec5d8966c2ab877c60cfb176b9cdc36880))
+* add user groups ([24c948e](https://github.com/stonith404/pocket-id/commit/24c948e6a66f283866f6c8369c16fa6cbcfa626c))
+
+
+### Bug Fixes
+
+* only return user groups if it is explicitly requested ([a4a90a1](https://github.com/stonith404/pocket-id/commit/a4a90a16a9726569a22e42560184319b25fd7ca6))
+
+## [](https://github.com/stonith404/pocket-id/compare/v0.5.2...v) (2024-09-26)
+
+
+### Bug Fixes
+
+* add space to "Firstname" and "Lastname" label ([#31](https://github.com/stonith404/pocket-id/issues/31)) ([d6a9bb4](https://github.com/stonith404/pocket-id/commit/d6a9bb4c09efb8102da172e49c36c070b341f0fc))
+* port environment variables get ignored in caddyfile ([3c67765](https://github.com/stonith404/pocket-id/commit/3c67765992d7369a79812bc8cd216c9ba12fd96e))
+
+## [](https://github.com/stonith404/pocket-id/compare/v0.5.1...v) (2024-09-19)
+
+
+### Bug Fixes
+
+* updated application name doesn't apply to webauthn credential ([924bb14](https://github.com/stonith404/pocket-id/commit/924bb1468bbd8e42fa6a530ef740be73ce3b3914))
+
+## [](https://github.com/stonith404/pocket-id/compare/v0.5.0...v) (2024-09-16)
+
+
+### Features
+
+* **email:** improve email templating ([#27](https://github.com/stonith404/pocket-id/issues/27)) ([64cf562](https://github.com/stonith404/pocket-id/commit/64cf56276a07169bc601a11be905c1eea67c4750))
+
+
+### Bug Fixes
+
+* debounce oidc client and user search ([9c2848d](https://github.com/stonith404/pocket-id/commit/9c2848db1d93c230afc6c5f64e498e9f6df8c8a7))
+
+## [](https://github.com/stonith404/pocket-id/compare/v0.4.1...v) (2024-09-09)
+
+
+### Features
+
+* add audit log with email notification ([#26](https://github.com/stonith404/pocket-id/issues/26)) ([9121239](https://github.com/stonith404/pocket-id/commit/9121239dd7c14a2107a984f9f94f54227489a63a))
+
 ## [](https://github.com/stonith404/pocket-id/compare/v0.4.0...v) (2024-09-06)


--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -61,7 +61,7 @@ You're all set!
 We use [Caddy](https://caddyserver.com) as a reverse proxy. You can use any other reverse proxy if you want but you have to configure it yourself.

 #### Setup
-Run `caddy run --config Caddyfile` in the root folder.
+Run `caddy run --config reverse-proxy/Caddyfile` in the root folder.

 ### Testing

--- a/10
+++ b/10
@@ -1,10 +0,0 @@
-:80 {
-    reverse_proxy /api/* http://localhost:8080
-    reverse_proxy /.well-known/* http://localhost:8080
-    reverse_proxy /* http://localhost:3000
-
-    log {
-        output file /var/log/caddy/access.log
-        level WARN
-    }
-}
--- a/4
+++ b/4
@@ -22,7 +22,7 @@ RUN CGO_ENABLED=1 GOOS=linux go build -o /app/backend/pocket-id-backend .
 # Stage 3: Production Image
 FROM node:20-alpine
 RUN apk add --no-cache caddy
-COPY ./Caddyfile /etc/caddy/Caddyfile
+COPY ./reverse-proxy /etc/caddy/

 WORKDIR /app
 COPY --from=frontend-builder /app/frontend/build ./frontend/build
@@ -31,6 +31,8 @@ COPY --from=frontend-builder /app/frontend/package.json ./frontend/package.json

 COPY --from=backend-builder /app/backend/pocket-id-backend ./backend/pocket-id-backend
 COPY --from=backend-builder /app/backend/migrations ./backend/migrations
+COPY --from=backend-builder /app/backend/GeoLite2-City.mmdb ./backend/GeoLite2-City.mmdb
+COPY --from=backend-builder /app/backend/email-templates ./backend/email-templates
 COPY --from=backend-builder /app/backend/images ./backend/images

 COPY ./scripts ./scripts
--- a/README.md
+++ b/README.md
@@ -68,6 +68,10 @@ Required tools:
   cd ..
   pm2 start pocket-id-backend --name pocket-id-backend

+   # Optional: Download the GeoLite2 city database. 
+   # If not downloaded the ip location in the audit log will be empty.
+   MAXMIND_LICENSE_KEY=<your-key> sh scripts/download-ip-database.sh
+
   # Start the frontend
   cd ../frontend
   npm install
@@ -94,7 +98,7 @@ You may need the following information:
 - **Userinfo URL**: `https://<your-domain>/api/oidc/userinfo`
 - **Certificate URL**: `https://<your-domain>/.well-known/jwks.json`
 - **OIDC Discovery URL**: `https://<your-domain>/.well-known/openid-configuration`
- **PKCE**: `false` as this is not supported yet.
+- **Scopes**: At least `openid email`. Optionally you can add `profile` and `groups`.

 ### Proxy Services with Pocket ID

@@ -131,6 +135,9 @@ docker compose up -d
   cd ..
   pm2 start pocket-id-backend --name pocket-id-backend

+   # Optional: Update the GeoLite2 city database
+   MAXMIND_LICENSE_KEY=<your-key> sh scripts/download-ip-database.sh
+
   # Start the frontend
   cd ../frontend
   npm install
@@ -147,6 +154,7 @@ docker compose up -d
 | Variable               | Default Value           | Recommended to change | Description                                   |
 | ---------------------- | ----------------------- | --------------------- | --------------------------------------------- |
 | `PUBLIC_APP_URL`       | `http://localhost`      | yes                   | The URL where you will access the app.        |
+| `TRUST_PROXY`          | `false`                 | yes                   | Whether the app is behind a reverse proxy.    |
 | `DB_PATH`              | `data/pocket-id.db`     | no                    | The path to the SQLite database.              |
 | `UPLOAD_PATH`          | `data/uploads`          | no                    | The path where the uploaded files are stored. |
 | `INTERNAL_BACKEND_URL` | `http://localhost:8080` | no                    | The URL where the backend is accessible.      |
--- a/backend/email-templates/components/email_html.tmpl
+++ b/backend/email-templates/components/email_html.tmpl
@@ -0,0 +1,14 @@
+{{ define "root" }}
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    {{ template "style" . }}
+</head>
+<body>
+    <div class="container">
+        {{ template "base" . }}
+    </div>
+</body>
+</html>
+{{ end }}
--- a/backend/email-templates/components/email_text.tmpl
+++ b/backend/email-templates/components/email_text.tmpl
@@ -0,0 +1,7 @@
+{{- define "root" -}}
+{{- template "base" . -}}
+{{- end }}
+
+
+--
+This is automatically sent email from {{.AppName}}.
--- a/backend/email-templates/components/style_html.tmpl
+++ b/backend/email-templates/components/style_html.tmpl
@@ -0,0 +1,80 @@
+{{ define "style" }}
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    color: #333;
+    margin: 0;
+    padding: 0;
+  }
+  .container {
+    background-color: #fff;
+    color: #333;
+    padding: 32px;
+    border-radius: 10px;
+    max-width: 600px;
+    margin: 40px auto;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+  }
+  .header .logo {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .header .logo img {
+    width: 32px;
+    height: 32px;
+    object-fit: cover;
+  }
+  .header h1 {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+  .warning {
+    background-color: #ffd966;
+    color: #7f6000;
+    padding: 4px 12px;
+    border-radius: 50px;
+    font-size: 0.875rem;
+  }
+  .content {
+    background-color: #fafafa;
+    color: #333;
+    padding: 24px;
+    border-radius: 10px;
+  }
+  .content h2 {
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin-bottom: 16px;
+  }
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+  .grid div {
+    display: flex;
+    flex-direction: column;
+  }
+  .grid p {
+    margin: 0;
+  }
+  .label {
+    color: #888;
+    font-size: 0.875rem;
+    margin-bottom: 4px;
+  }
+  .message {
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+</style>
+{{ end }}
--- a/backend/email-templates/login-with-new-device_html.tmpl
+++ b/backend/email-templates/login-with-new-device_html.tmpl
@@ -0,0 +1,36 @@
+{{ define "base" }}
+    <div class="header">
+        <div class="logo">
+            <img src="{{ .LogoURL }}" alt="Pocket ID"/>
+            <h1>{{ .AppName }}</h1>
+        </div>
+        <div class="warning">Warning</div>
+    </div>
+    <div class="content">
+        <h2>New Sign-In Detected</h2>
+        <div class="grid">
+            {{ if and .Data.City .Data.Country }}
+            <div>
+                <p class="label">Approximate Location</p>
+                <p>{{ .Data.City }}, {{ .Data.Country }}</p>
+            </div>
+            {{ end }}
+            <div>
+                <p class="label">IP Address</p>
+                <p>{{ .Data.IPAddress }}</p>
+            </div>
+            <div>
+                <p class="label">Device</p>
+                <p>{{ .Data.Device }}</p>
+            </div>
+            <div>
+                <p class="label">Sign-In Time</p>
+                <p>{{ .Data.DateTime.Format "2006-01-02 15:04:05 UTC" }}</p>
+            </div>
+        </div>
+        <p class="message">
+            This sign-in was detected from a new device or location. If you recognize this activity, you can
+            safely ignore this message. If not, please review your account and security settings.
+        </p>
+    </div>
+{{ end -}}
--- a/backend/email-templates/login-with-new-device_text.tmpl
+++ b/backend/email-templates/login-with-new-device_text.tmpl
@@ -0,0 +1,15 @@
+{{ define "base" -}}
+New Sign-In Detected
+====================
+
+{{ if and .Data.City .Data.Country }}
+Approximate Location: {{ .Data.City }}, {{ .Data.Country }}
+{{ end }}
+IP Address: {{ .Data.IPAddress }}
+Device:     {{ .Data.Device }}
+Time:       {{ .Data.DateTime.Format "2006-01-02 15:04:05 UTC"}}
+
+This sign-in was detected from a new device or location. If you recognize
+this activity, you can safely ignore this message. If not, please review
+your account and security settings.
+{{ end -}}
--- a/backend/go.mod
+++ b/backend/go.mod
@@ -1,6 +1,6 @@
 module github.com/stonith404/pocket-id/backend

-go 1.23
+go 1.23.1

 require (
 	github.com/caarlos0/env/v11 v11.2.2
@@ -14,6 +14,8 @@ require (
 	github.com/golang-migrate/migrate/v4 v4.17.1
 	github.com/google/uuid v1.6.0
 	github.com/joho/godotenv v1.5.1
+	github.com/mileusna/useragent v1.3.4
+	github.com/oschwald/maxminddb-golang/v2 v2.0.0-beta.1
 	golang.org/x/crypto v0.26.0
 	golang.org/x/time v0.6.0
 	gorm.io/driver/sqlite v1.5.6
--- a/backend/go.sum
+++ b/backend/go.sum
@@ -81,6 +81,8 @@ github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWE
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
 github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
+github.com/mileusna/useragent v1.3.4 h1:MiuRRuvGjEie1+yZHO88UBYg8YBC/ddF6T7F56i3PCk=
+github.com/mileusna/useragent v1.3.4/go.mod h1:3d8TOmwL/5I8pJjyVDteHtgDGcefrFUX4ccGOMKNYYc=
 github.com/mitchellh/mapstructure v1.5.0 h1:jeMsZIYE/09sWLaz43PL7Gy6RuMjD2eJVyuac5Z2hdY=
 github.com/mitchellh/mapstructure v1.5.0/go.mod h1:bFUtVrKA4DC2yAKiSyO/QUcy7e+RRV2QTWOzhPopBRo=
 github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
@@ -88,6 +90,8 @@ github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd h1:TRLaZ9cD/w
 github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
 github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9Gz0M=
 github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
+github.com/oschwald/maxminddb-golang/v2 v2.0.0-beta.1 h1:UihPOz+oIJ5X0JsO7wEkL50fheCODsoZ9r86mJWfNMc=
+github.com/oschwald/maxminddb-golang/v2 v2.0.0-beta.1/go.mod h1:vPpFrres6g9B5+meBwAd9xnp335KFcLEFW7EqJxBHy0=
 github.com/pelletier/go-toml/v2 v2.2.2 h1:aYUidT7k73Pcl9nb2gScu7NSrKCSHIDE89b3+6Wq+LM=
 github.com/pelletier/go-toml/v2 v2.2.2/go.mod h1:1t835xjRzz80PqgE6HHgN2JOsmgYu/h4qDAS4n929Rs=
 github.com/pkg/diff v0.0.0-20210226163009-20ebb0f2a09e/go.mod h1:pJLUxLENpZxwdsKMEsNbx1VGcRFpLqf3715MtcvvzbA=
--- a/backend/images/logoDark.svg
+++ b/backend/images/logoDark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="a" viewBox="0 0 1015 1015">
+    <path fill="white" d="M506.6,0c209.52,0,379.98,170.45,379.98,379.96,0,82.33-25.9,160.68-74.91,226.54-48.04,64.59-113.78,111.51-190.13,135.71l-21.1,6.7-50.29-248.04,13.91-6.73c45.41-21.95,74.76-68.71,74.76-119.11,0-72.91-59.31-132.23-132.21-132.23s-132.23,59.32-132.23,132.23c0,50.4,29.36,97.16,74.77,119.11l13.65,6.61-81.01,499.24h-226.36V0h351.18Z"/>
+</svg>
--- a/backend/images/logoLight.svg
+++ b/backend/images/logoLight.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="a" viewBox="0 0 1015 1015">
+    <path fill="black" d="M506.6,0c209.52,0,379.98,170.45,379.98,379.96,0,82.33-25.9,160.68-74.91,226.54-48.04,64.59-113.78,111.51-190.13,135.71l-21.1,6.7-50.29-248.04,13.91-6.73c45.41-21.95,74.76-68.71,74.76-119.11,0-72.91-59.31-132.23-132.21-132.23s-132.23,59.32-132.23,132.23c0,50.4,29.36,97.16,74.77,119.11l13.65,6.61-81.01,499.24h-226.36V0h351.18Z"/>
+</svg>
--- a/backend/internal/bootstrap/application_images_bootstrap.go
+++ b/backend/internal/bootstrap/application_images_bootstrap.go
@@ -5,24 +5,53 @@ import (
 	"github.com/stonith404/pocket-id/backend/internal/utils"
 	"log"
 	"os"
+	"strings"
 )

+// initApplicationImages copies the images from the images directory to the application-images directory
 func initApplicationImages() {
 	dirPath := common.EnvConfig.UploadPath + "/application-images"

-	files, err := os.ReadDir(dirPath)
+	sourceFiles, err := os.ReadDir("./images")
 	if err != nil && !os.IsNotExist(err) {
 		log.Fatalf("Error reading directory: %v", err)
 	}

-	// Skip if files already exist
-	if len(files) > 1 {
-		return
+	destinationFiles, err := os.ReadDir(dirPath)
+	if err != nil && !os.IsNotExist(err) {
+		log.Fatalf("Error reading directory: %v", err)
 	}

-	// Copy files from source to destination
-	err = utils.CopyDirectory("./images", dirPath)
-	if err != nil {
-		log.Fatalf("Error copying directory: %v", err)
+	// Copy images from the images directory to the application-images directory if they don't already exist
+	for _, sourceFile := range sourceFiles {
+		if sourceFile.IsDir() || imageAlreadyExists(sourceFile.Name(), destinationFiles) {
+			continue
+		}
+		srcFilePath := "./images/" + sourceFile.Name()
+		destFilePath := dirPath + "/" + sourceFile.Name()
+
+		err := utils.CopyFile(srcFilePath, destFilePath)
+		if err != nil {
+			log.Fatalf("Error copying file: %v", err)
+		}
 	}
+
+}
+
+func imageAlreadyExists(fileName string, destinationFiles []os.DirEntry) bool {
+	for _, destinationFile := range destinationFiles {
+		sourceFileWithoutExtension := getImageNameWithoutExtension(fileName)
+		destinationFileWithoutExtension := getImageNameWithoutExtension(destinationFile.Name())
+
+		if sourceFileWithoutExtension == destinationFileWithoutExtension {
+			return true
+		}
+	}
+
+	return false
+}
+
+func getImageNameWithoutExtension(fileName string) string {
+	splitted := strings.Split(fileName, ".")
+	return strings.Join(splitted[:len(splitted)-1], ".")
 }
--- a/backend/internal/bootstrap/router_bootstrap.go
+++ b/backend/internal/bootstrap/router_bootstrap.go
@@ -2,6 +2,7 @@ package bootstrap

 import (
 	"log"
+	"os"
 	"time"

 	"github.com/gin-gonic/gin"
@@ -28,13 +29,20 @@ func initRouter(db *gorm.DB, appConfigService *service.AppConfigService) {
 	r.Use(gin.Logger())

 	// Initialize services
-	webauthnService := service.NewWebAuthnService(db, appConfigService)
-	jwtService := service.NewJwtService(appConfigService)
-	userService := service.NewUserService(db, jwtService)
-	oidcService := service.NewOidcService(db, jwtService)
-	testService := service.NewTestService(db, appConfigService)
+	templateDir := os.DirFS(common.EnvConfig.EmailTemplatesPath)
+	emailService, err := service.NewEmailService(appConfigService, templateDir)
+	if err != nil {
+		log.Fatalf("Unable to create email service: %s", err)
+	}
+
+	auditLogService := service.NewAuditLogService(db, appConfigService, emailService)
+	jwtService := service.NewJwtService(appConfigService)
+	webauthnService := service.NewWebAuthnService(db, jwtService, auditLogService, appConfigService)
+	userService := service.NewUserService(db, jwtService)
+	oidcService := service.NewOidcService(db, jwtService, appConfigService, auditLogService)
+	testService := service.NewTestService(db, appConfigService)
+	userGroupService := service.NewUserGroupService(db)

-	// Add global middleware
 	r.Use(middleware.NewCorsMiddleware().Add())
 	r.Use(middleware.NewRateLimitMiddleware().Add(rate.Every(time.Second), 60))
 	r.Use(middleware.NewJwtAuthMiddleware(jwtService, true).Add(false))
@@ -45,10 +53,12 @@ func initRouter(db *gorm.DB, appConfigService *service.AppConfigService) {

 	// Set up API routes
 	apiGroup := r.Group("/api")
-	controller.NewWebauthnController(apiGroup, jwtAuthMiddleware, middleware.NewRateLimitMiddleware(), webauthnService, jwtService)
+	controller.NewWebauthnController(apiGroup, jwtAuthMiddleware, middleware.NewRateLimitMiddleware(), webauthnService)
 	controller.NewOidcController(apiGroup, jwtAuthMiddleware, fileSizeLimitMiddleware, oidcService, jwtService)
 	controller.NewUserController(apiGroup, jwtAuthMiddleware, middleware.NewRateLimitMiddleware(), userService)
 	controller.NewAppConfigController(apiGroup, jwtAuthMiddleware, appConfigService)
+	controller.NewAuditLogController(apiGroup, auditLogService, jwtAuthMiddleware)
+	controller.NewUserGroupController(apiGroup, jwtAuthMiddleware, userGroupService)

 	// Add test controller in non-production environments
 	if common.EnvConfig.AppEnv != "production" {
--- a/backend/internal/common/env_config.go
+++ b/backend/internal/common/env_config.go
@@ -7,21 +7,23 @@ import (
 )

 type EnvConfigSchema struct {
-	AppEnv     string `env:"APP_ENV"`
-	AppURL     string `env:"PUBLIC_APP_URL"`
-	DBPath     string `env:"DB_PATH"`
-	UploadPath string `env:"UPLOAD_PATH"`
-	Port       string `env:"BACKEND_PORT"`
-	Host       string `env:"HOST"`
+	AppEnv             string `env:"APP_ENV"`
+	AppURL             string `env:"PUBLIC_APP_URL"`
+	DBPath             string `env:"DB_PATH"`
+	UploadPath         string `env:"UPLOAD_PATH"`
+	Port               string `env:"BACKEND_PORT"`
+	Host               string `env:"HOST"`
+	EmailTemplatesPath string `env:"EMAIL_TEMPLATES_PATH"`
 }

 var EnvConfig = &EnvConfigSchema{
-	AppEnv:     "production",
-	DBPath:     "data/pocket-id.db",
-	UploadPath: "data/uploads",
-	AppURL:     "http://localhost",
-	Port:       "8080",
-	Host:       "localhost",
+	AppEnv:             "production",
+	DBPath:             "data/pocket-id.db",
+	UploadPath:         "data/uploads",
+	AppURL:             "http://localhost",
+	Port:               "8080",
+	Host:               "localhost",
+	EmailTemplatesPath: "./email-templates",
 }

 func init() {
--- a/backend/internal/common/errors.go
+++ b/backend/internal/common/errors.go
@@ -15,4 +15,5 @@ var (
 	ErrOidcInvalidCallbackURL       = errors.New("invalid callback URL")
 	ErrFileTypeNotSupported         = errors.New("file type not supported")
 	ErrInvalidCredentials           = errors.New("no user found with provided credentials")
+	ErrNameAlreadyInUse             = errors.New("name is already in use")
 )
--- a/backend/internal/controller/app_config_controller.go
+++ b/backend/internal/controller/app_config_controller.go
@@ -20,9 +20,9 @@ func NewAppConfigController(
 	acc := &AppConfigController{
 		appConfigService: appConfigService,
 	}
-	group.GET("/application-configuration", acc.listApplicationConfigurationHandler)
-	group.GET("/application-configuration/all", jwtAuthMiddleware.Add(true), acc.listAllApplicationConfigurationHandler)
-	group.PUT("/application-configuration", acc.updateApplicationConfigurationHandler)
+	group.GET("/application-configuration", acc.listAppConfigHandler)
+	group.GET("/application-configuration/all", jwtAuthMiddleware.Add(true), acc.listAllAppConfigHandler)
+	group.PUT("/application-configuration", acc.updateAppConfigHandler)

 	group.GET("/application-configuration/logo", acc.getLogoHandler)
 	group.GET("/application-configuration/background-image", acc.getBackgroundImageHandler)
@@ -36,8 +36,8 @@ type AppConfigController struct {
 	appConfigService *service.AppConfigService
 }

-func (acc *AppConfigController) listApplicationConfigurationHandler(c *gin.Context) {
-	configuration, err := acc.appConfigService.ListApplicationConfiguration(false)
+func (acc *AppConfigController) listAppConfigHandler(c *gin.Context) {
+	configuration, err := acc.appConfigService.ListAppConfig(false)
 	if err != nil {
 		utils.ControllerError(c, err)
 		return
@@ -52,8 +52,8 @@ func (acc *AppConfigController) listApplicationConfigurationHandler(c *gin.Conte
 	c.JSON(200, configVariablesDto)
 }

-func (acc *AppConfigController) listAllApplicationConfigurationHandler(c *gin.Context) {
-	configuration, err := acc.appConfigService.ListApplicationConfiguration(true)
+func (acc *AppConfigController) listAllAppConfigHandler(c *gin.Context) {
+	configuration, err := acc.appConfigService.ListAppConfig(true)
 	if err != nil {
 		utils.ControllerError(c, err)
 		return
@@ -68,14 +68,14 @@ func (acc *AppConfigController) listAllApplicationConfigurationHandler(c *gin.Co
 	c.JSON(200, configVariablesDto)
 }

-func (acc *AppConfigController) updateApplicationConfigurationHandler(c *gin.Context) {
+func (acc *AppConfigController) updateAppConfigHandler(c *gin.Context) {
 	var input dto.AppConfigUpdateDto
 	if err := c.ShouldBindJSON(&input); err != nil {
 		utils.ControllerError(c, err)
 		return
 	}

-	savedConfigVariables, err := acc.appConfigService.UpdateApplicationConfiguration(input)
+	savedConfigVariables, err := acc.appConfigService.UpdateAppConfig(input)
 	if err != nil {
 		utils.ControllerError(c, err)
 		return
@@ -91,8 +91,20 @@ func (acc *AppConfigController) updateApplicationConfigurationHandler(c *gin.Con
 }

 func (acc *AppConfigController) getLogoHandler(c *gin.Context) {
-	imageType := acc.appConfigService.DbConfig.LogoImageType.Value
-	acc.getImage(c, "logo", imageType)
+	lightLogo := c.DefaultQuery("light", "true") == "true"
+
+	var imageName string
+	var imageType string
+
+	if lightLogo {
+		imageName = "logoLight"
+		imageType = acc.appConfigService.DbConfig.LogoLightImageType.Value
+	} else {
+		imageName = "logoDark"
+		imageType = acc.appConfigService.DbConfig.LogoDarkImageType.Value
+	}
+
+	acc.getImage(c, imageName, imageType)
 }

 func (acc *AppConfigController) getFaviconHandler(c *gin.Context) {
@@ -105,8 +117,20 @@ func (acc *AppConfigController) getBackgroundImageHandler(c *gin.Context) {
 }

 func (acc *AppConfigController) updateLogoHandler(c *gin.Context) {
-	imageType := acc.appConfigService.DbConfig.LogoImageType.Value
-	acc.updateImage(c, "logo", imageType)
+	lightLogo := c.DefaultQuery("light", "true") == "true"
+
+	var imageName string
+	var imageType string
+
+	if lightLogo {
+		imageName = "logoLight"
+		imageType = acc.appConfigService.DbConfig.LogoLightImageType.Value
+	} else {
+		imageName = "logoDark"
+		imageType = acc.appConfigService.DbConfig.LogoDarkImageType.Value
+	}
+
+	acc.updateImage(c, imageName, imageType)
 }

 func (acc *AppConfigController) updateFaviconHandler(c *gin.Context) {
--- a/backend/internal/controller/audit_log_controller.go
+++ b/backend/internal/controller/audit_log_controller.go
@@ -0,0 +1,56 @@
+package controller
+
+import (
+	"github.com/stonith404/pocket-id/backend/internal/dto"
+	"github.com/stonith404/pocket-id/backend/internal/middleware"
+	"net/http"
+	"strconv"
+
+	"github.com/gin-gonic/gin"
+	"github.com/stonith404/pocket-id/backend/internal/service"
+	"github.com/stonith404/pocket-id/backend/internal/utils"
+)
+
+func NewAuditLogController(group *gin.RouterGroup, auditLogService *service.AuditLogService, jwtAuthMiddleware *middleware.JwtAuthMiddleware) {
+	alc := AuditLogController{
+		auditLogService: auditLogService,
+	}
+
+	group.GET("/audit-logs", jwtAuthMiddleware.Add(false), alc.listAuditLogsForUserHandler)
+}
+
+type AuditLogController struct {
+	auditLogService *service.AuditLogService
+}
+
+func (alc *AuditLogController) listAuditLogsForUserHandler(c *gin.Context) {
+	userID := c.GetString("userID")
+	page, _ := strconv.Atoi(c.DefaultQuery("page", "1"))
+	pageSize, _ := strconv.Atoi(c.DefaultQuery("limit", "10"))
+
+	// Fetch audit logs for the user
+	logs, pagination, err := alc.auditLogService.ListAuditLogsForUser(userID, page, pageSize)
+	if err != nil {
+		utils.ControllerError(c, err)
+		return
+	}
+
+	// Map the audit logs to DTOs
+	var logsDtos []dto.AuditLogDto
+	err = dto.MapStructList(logs, &logsDtos)
+	if err != nil {
+		utils.ControllerError(c, err)
+		return
+	}
+
+	// Add device information to the logs
+	for i, logsDto := range logsDtos {
+		logsDto.Device = alc.auditLogService.DeviceStringFromUserAgent(logs[i].UserAgent)
+		logsDtos[i] = logsDto
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"data":       logsDtos,
+		"pagination": pagination,
+	})
+}
--- a/backend/internal/controller/oidc_controller.go
+++ b/backend/internal/controller/oidc_controller.go
@@ -46,7 +46,7 @@ func (oc *OidcController) authorizeHandler(c *gin.Context) {
 		return
 	}

-	code, callbackURL, err := oc.oidcService.Authorize(input, c.GetString("userID"))
+	code, callbackURL, err := oc.oidcService.Authorize(input, c.GetString("userID"), c.ClientIP(), c.Request.UserAgent())
 	if err != nil {
 		if errors.Is(err, common.ErrOidcMissingAuthorization) {
 			utils.CustomControllerError(c, http.StatusForbidden, err.Error())
@@ -73,7 +73,7 @@ func (oc *OidcController) authorizeNewClientHandler(c *gin.Context) {
 		return
 	}

-	code, callbackURL, err := oc.oidcService.AuthorizeNewClient(input, c.GetString("userID"))
+	code, callbackURL, err := oc.oidcService.AuthorizeNewClient(input, c.GetString("userID"), c.ClientIP(), c.Request.UserAgent())
 	if err != nil {
 		if errors.Is(err, common.ErrOidcInvalidCallbackURL) {
 			utils.CustomControllerError(c, http.StatusBadRequest, err.Error())
--- a/backend/internal/controller/user_group_controller.go
+++ b/backend/internal/controller/user_group_controller.go
@@ -0,0 +1,162 @@
+package controller
+
+import (
+	"errors"
+	"net/http"
+	"strconv"
+
+	"github.com/gin-gonic/gin"
+	"github.com/stonith404/pocket-id/backend/internal/common"
+	"github.com/stonith404/pocket-id/backend/internal/dto"
+	"github.com/stonith404/pocket-id/backend/internal/middleware"
+	"github.com/stonith404/pocket-id/backend/internal/service"
+	"github.com/stonith404/pocket-id/backend/internal/utils"
+)
+
+func NewUserGroupController(group *gin.RouterGroup, jwtAuthMiddleware *middleware.JwtAuthMiddleware, userGroupService *service.UserGroupService) {
+	ugc := UserGroupController{
+		UserGroupService: userGroupService,
+	}
+
+	group.GET("/user-groups", jwtAuthMiddleware.Add(true), ugc.list)
+	group.GET("/user-groups/:id", jwtAuthMiddleware.Add(true), ugc.get)
+	group.POST("/user-groups", jwtAuthMiddleware.Add(true), ugc.create)
+	group.PUT("/user-groups/:id", jwtAuthMiddleware.Add(true), ugc.update)
+	group.DELETE("/user-groups/:id", jwtAuthMiddleware.Add(true), ugc.delete)
+	group.PUT("/user-groups/:id/users", jwtAuthMiddleware.Add(true), ugc.updateUsers)
+}
+
+type UserGroupController struct {
+	UserGroupService *service.UserGroupService
+}
+
+func (ugc *UserGroupController) list(c *gin.Context) {
+	page, _ := strconv.Atoi(c.DefaultQuery("page", "1"))
+	pageSize, _ := strconv.Atoi(c.DefaultQuery("limit", "10"))
+	searchTerm := c.Query("search")
+
+	groups, pagination, err := ugc.UserGroupService.List(searchTerm, page, pageSize)
+	if err != nil {
+		utils.ControllerError(c, err)
+		return
+	}
+
+	var groupsDto = make([]dto.UserGroupDtoWithUserCount, len(groups))
+	for i, group := range groups {
+		var groupDto dto.UserGroupDtoWithUserCount
+		if err := dto.MapStruct(group, &groupDto); err != nil {
+			utils.ControllerError(c, err)
+			return
+		}
+		groupDto.UserCount, err = ugc.UserGroupService.GetUserCountOfGroup(group.ID)
+		if err != nil {
+			utils.ControllerError(c, err)
+			return
+		}
+		groupsDto[i] = groupDto
+	}
+
+	c.JSON(http.StatusOK, gin.H{
+		"data":       groupsDto,
+		"pagination": pagination,
+	})
+}
+
+func (ugc *UserGroupController) get(c *gin.Context) {
+	group, err := ugc.UserGroupService.Get(c.Param("id"))
+	if err != nil {
+		utils.ControllerError(c, err)
+		return
+	}
+
+	var groupDto dto.UserGroupDtoWithUsers
+	if err := dto.MapStruct(group, &groupDto); err != nil {
+		utils.ControllerError(c, err)
+		return
+	}
+
+	c.JSON(http.StatusOK, groupDto)
+}
+
+func (ugc *UserGroupController) create(c *gin.Context) {
+	var input dto.UserGroupCreateDto
+	if err := c.ShouldBindJSON(&input); err != nil {
+		utils.ControllerError(c, err)
+		return
+	}
+
+	group, err := ugc.UserGroupService.Create(input)
+	if err != nil {
+		if errors.Is(err, common.ErrNameAlreadyInUse) {
+			utils.CustomControllerError(c, http.StatusConflict, err.Error())
+		} else {
+			utils.ControllerError(c, err)
+		}
+		return
+	}
+
+	var groupDto dto.UserGroupDtoWithUsers
+	if err := dto.MapStruct(group, &groupDto); err != nil {
+		utils.ControllerError(c, err)
+		return
+	}
+
+	c.JSON(http.StatusCreated, groupDto)
+}
+
+func (ugc *UserGroupController) update(c *gin.Context) {
+	var input dto.UserGroupCreateDto
+	if err := c.ShouldBindJSON(&input); err != nil {
+		utils.ControllerError(c, err)
+		return
+	}
+
+	group, err := ugc.UserGroupService.Update(c.Param("id"), input)
+	if err != nil {
+		if errors.Is(err, common.ErrNameAlreadyInUse) {
+			utils.CustomControllerError(c, http.StatusConflict, err.Error())
+		} else {
+			utils.ControllerError(c, err)
+		}
+		return
+	}
+
+	var groupDto dto.UserGroupDtoWithUsers
+	if err := dto.MapStruct(group, &groupDto); err != nil {
+		utils.ControllerError(c, err)
+		return
+	}
+
+	c.JSON(http.StatusOK, groupDto)
+}
+
+func (ugc *UserGroupController) delete(c *gin.Context) {
+	if err := ugc.UserGroupService.Delete(c.Param("id")); err != nil {
+		utils.ControllerError(c, err)
+		return
+	}
+
+	c.Status(http.StatusNoContent)
+}
+
+func (ugc *UserGroupController) updateUsers(c *gin.Context) {
+	var input dto.UserGroupUpdateUsersDto
+	if err := c.ShouldBindJSON(&input); err != nil {
+		utils.ControllerError(c, err)
+		return
+	}
+
+	group, err := ugc.UserGroupService.UpdateUsers(c.Param("id"), input)
+	if err != nil {
+		utils.ControllerError(c, err)
+		return
+	}
+
+	var groupDto dto.UserGroupDtoWithUsers
+	if err := dto.MapStruct(group, &groupDto); err != nil {
+		utils.ControllerError(c, err)
+		return
+	}
+
+	c.JSON(http.StatusOK, groupDto)
+}
--- a/backend/internal/controller/webauthn_controller.go
+++ b/backend/internal/controller/webauthn_controller.go
@@ -15,8 +15,8 @@ import (
 	"golang.org/x/time/rate"
 )

-func NewWebauthnController(group *gin.RouterGroup, jwtAuthMiddleware *middleware.JwtAuthMiddleware, rateLimitMiddleware *middleware.RateLimitMiddleware, webauthnService *service.WebAuthnService, jwtService *service.JwtService) {
-	wc := &WebauthnController{webAuthnService: webauthnService, jwtService: jwtService}
+func NewWebauthnController(group *gin.RouterGroup, jwtAuthMiddleware *middleware.JwtAuthMiddleware, rateLimitMiddleware *middleware.RateLimitMiddleware, webauthnService *service.WebAuthnService) {
+	wc := &WebauthnController{webAuthnService: webauthnService}
 	group.GET("/webauthn/register/start", jwtAuthMiddleware.Add(false), wc.beginRegistrationHandler)
 	group.POST("/webauthn/register/finish", jwtAuthMiddleware.Add(false), wc.verifyRegistrationHandler)

@@ -32,7 +32,6 @@ func NewWebauthnController(group *gin.RouterGroup, jwtAuthMiddleware *middleware

 type WebauthnController struct {
 	webAuthnService *service.WebAuthnService
-	jwtService      *service.JwtService
 }

 func (wc *WebauthnController) beginRegistrationHandler(c *gin.Context) {
@@ -95,7 +94,8 @@ func (wc *WebauthnController) verifyLoginHandler(c *gin.Context) {
 	}

 	userID := c.GetString("userID")
-	user, err := wc.webAuthnService.VerifyLogin(sessionID, userID, credentialAssertionData)
+
+	user, token, err := wc.webAuthnService.VerifyLogin(sessionID, userID, credentialAssertionData, c.ClientIP(), c.Request.UserAgent())
 	if err != nil {
 		if errors.Is(err, common.ErrInvalidCredentials) {
 			utils.CustomControllerError(c, http.StatusUnauthorized, err.Error())
@@ -105,12 +105,6 @@ func (wc *WebauthnController) verifyLoginHandler(c *gin.Context) {
 		return
 	}

-	token, err := wc.jwtService.GenerateAccessToken(user)
-	if err != nil {
-		utils.ControllerError(c, err)
-		return
-	}
-
 	var userDto dto.UserDto
 	if err := dto.MapStruct(user, &userDto); err != nil {
 		utils.ControllerError(c, err)
--- a/backend/internal/dto/app_config_dto.go
+++ b/backend/internal/dto/app_config_dto.go
@@ -14,4 +14,10 @@ type AppConfigVariableDto struct {
 type AppConfigUpdateDto struct {
 	AppName         string `json:"appName" binding:"required,min=1,max=30"`
 	SessionDuration string `json:"sessionDuration" binding:"required"`
+	EmailEnabled    string `json:"emailEnabled" binding:"required"`
+	SmtHost         string `json:"smtpHost"`
+	SmtpPort        string `json:"smtpPort"`
+	SmtpFrom        string `json:"smtpFrom" binding:"omitempty,email"`
+	SmtpUser        string `json:"smtpUser"`
+	SmtpPassword    string `json:"smtpPassword"`
 }
--- a/backend/internal/dto/audit_log_dto.go
+++ b/backend/internal/dto/audit_log_dto.go
@@ -0,0 +1,19 @@
+package dto
+
+import (
+	"github.com/stonith404/pocket-id/backend/internal/model"
+	"time"
+)
+
+type AuditLogDto struct {
+	ID        string    `json:"id"`
+	CreatedAt time.Time `json:"createdAt"`
+
+	Event     model.AuditLogEvent `json:"event"`
+	IpAddress string              `json:"ipAddress"`
+	Country   string              `json:"country"`
+	City      string              `json:"city"`
+	Device    string              `json:"device"`
+	UserID    string              `json:"userID"`
+	Data      model.AuditLogData  `json:"data"`
+}
--- a/backend/internal/dto/dto_mapper.go
+++ b/backend/internal/dto/dto_mapper.go
@@ -57,15 +57,37 @@ func mapStructInternal(sourceVal reflect.Value, destVal reflect.Value) error {
 			// Handle direct assignment for simple types
 			if sourceField.Type() == destField.Type() {
 				destField.Set(sourceField)
+
 			} else if sourceField.Kind() == reflect.Slice && destField.Kind() == reflect.Slice {
 				// Handle slices
 				if sourceField.Type().Elem() == destField.Type().Elem() {
+					// Direct assignment for slices of primitive types or non-struct elements
 					newSlice := reflect.MakeSlice(destField.Type(), sourceField.Len(), sourceField.Cap())

 					for j := 0; j < sourceField.Len(); j++ {
 						newSlice.Index(j).Set(sourceField.Index(j))
 					}

+					destField.Set(newSlice)
+
+				} else if sourceField.Type().Elem().Kind() == reflect.Struct && destField.Type().Elem().Kind() == reflect.Struct {
+					// Recursively map slices of structs
+					newSlice := reflect.MakeSlice(destField.Type(), sourceField.Len(), sourceField.Cap())
+
+					for j := 0; j < sourceField.Len(); j++ {
+						// Get the element from both source and destination slice
+						sourceElem := sourceField.Index(j)
+						destElem := reflect.New(destField.Type().Elem()).Elem()
+
+						// Recursively map the struct elements
+						if err := mapStructInternal(sourceElem, destElem); err != nil {
+							return err
+						}
+
+						// Set the mapped element in the new slice
+						newSlice.Index(j).Set(destElem)
+					}
+
 					destField.Set(newSlice)
 				}
 			} else if sourceField.Kind() == reflect.Struct && destField.Kind() == reflect.Struct {
--- a/backend/internal/dto/user_group_dto.go
+++ b/backend/internal/dto/user_group_dto.go
@@ -0,0 +1,32 @@
+package dto
+
+import "time"
+
+type UserGroupDtoWithUsers struct {
+	ID           string    `json:"id"`
+	FriendlyName string    `json:"friendlyName"`
+	Name         string    `json:"name"`
+	Users        []UserDto `json:"users"`
+	CreatedAt    time.Time `json:"createdAt"`
+}
+
+type UserGroupDtoWithUserCount struct {
+	ID           string    `json:"id"`
+	FriendlyName string    `json:"friendlyName"`
+	Name         string    `json:"name"`
+	UserCount    int64     `json:"userCount"`
+	CreatedAt    time.Time `json:"createdAt"`
+}
+
+type UserGroupCreateDto struct {
+	FriendlyName string `json:"friendlyName" binding:"required,min=3,max=30"`
+	Name         string `json:"name" binding:"required,min=3,max=30,userGroupName"`
+}
+
+type UserGroupUpdateUsersDto struct {
+	UserIDs []string `json:"userIds" binding:"required"`
+}
+
+type AssignUserToGroupDto struct {
+	UserID string `json:"userId" binding:"required"`
+}
--- a/backend/internal/dto/validations.go
+++ b/backend/internal/dto/validations.go
@@ -28,6 +28,13 @@ var validateUsername validator.Func = func(fl validator.FieldLevel) bool {
 	return matched
 }

+var validateUserGroupName validator.Func = func(fl validator.FieldLevel) bool {
+	// [a-z0-9_] : The group name can only contain lowercase letters, numbers, and underscores
+	regex := "^[a-z0-9_]+$"
+	matched, _ := regexp.MatchString(regex, fl.Field().String())
+	return matched
+}
+
 func init() {
 	if v, ok := binding.Validator.Engine().(*validator.Validate); ok {
 		if err := v.RegisterValidation("urlList", validateUrlList); err != nil {
@@ -39,4 +46,10 @@ func init() {
 			log.Fatalf("Failed to register custom validation: %v", err)
 		}
 	}
+
+	if v, ok := binding.Validator.Engine().(*validator.Validate); ok {
+		if err := v.RegisterValidation("userGroupName", validateUserGroupName); err != nil {
+			log.Fatalf("Failed to register custom validation: %v", err)
+		}
+	}
 }
--- a/backend/internal/job/db_cleanup.go
+++ b/backend/internal/job/db_cleanup.go
@@ -21,7 +21,6 @@ func RegisterJobs(db *gorm.DB) {
 	registerJob(scheduler, "ClearWebauthnSessions", "0 3 * * *", jobs.clearWebauthnSessions)
 	registerJob(scheduler, "ClearOneTimeAccessTokens", "0 3 * * *", jobs.clearOneTimeAccessTokens)
 	registerJob(scheduler, "ClearOidcAuthorizationCodes", "0 3 * * *", jobs.clearOidcAuthorizationCodes)
-
 	scheduler.Start()
 }

@@ -29,17 +28,24 @@ type Jobs struct {
 	db *gorm.DB
 }

+// ClearWebauthnSessions deletes WebAuthn sessions that have expired
 func (j *Jobs) clearWebauthnSessions() error {
 	return j.db.Delete(&model.WebauthnSession{}, "expires_at < ?", utils.FormatDateForDb(time.Now())).Error
 }

+// ClearOneTimeAccessTokens deletes one-time access tokens that have expired
 func (j *Jobs) clearOneTimeAccessTokens() error {
 	return j.db.Debug().Delete(&model.OneTimeAccessToken{}, "expires_at < ?", utils.FormatDateForDb(time.Now())).Error
 }

+// ClearOidcAuthorizationCodes deletes OIDC authorization codes that have expired
 func (j *Jobs) clearOidcAuthorizationCodes() error {
 	return j.db.Delete(&model.OidcAuthorizationCode{}, "expires_at < ?", utils.FormatDateForDb(time.Now())).Error
+}

+// ClearAuditLogs deletes audit logs older than 90 days
+func (j *Jobs) clearAuditLogs() error {
+	return j.db.Delete(&model.AuditLog{}, "created_at < ?", utils.FormatDateForDb(time.Now().AddDate(0, 0, -90))).Error
 }

 func registerJob(scheduler gocron.Scheduler, name string, interval string, job func() error) {
--- a/backend/internal/model/app_config.go
+++ b/backend/internal/model/app_config.go
@@ -11,6 +11,14 @@ type AppConfigVariable struct {
 type AppConfig struct {
 	AppName             AppConfigVariable
 	BackgroundImageType AppConfigVariable
-	LogoImageType       AppConfigVariable
+	LogoLightImageType  AppConfigVariable
+	LogoDarkImageType   AppConfigVariable
 	SessionDuration     AppConfigVariable
+
+	EmailEnabled AppConfigVariable
+	SmtpHost     AppConfigVariable
+	SmtpPort     AppConfigVariable
+	SmtpFrom     AppConfigVariable
+	SmtpUser     AppConfigVariable
+	SmtpPassword AppConfigVariable
 }
--- a/backend/internal/model/audit_log.go
+++ b/backend/internal/model/audit_log.go
@@ -0,0 +1,52 @@
+package model
+
+import (
+	"database/sql/driver"
+	"encoding/json"
+	"errors"
+)
+
+type AuditLog struct {
+	Base
+
+	Event     AuditLogEvent
+	IpAddress string
+	Country   string
+	City      string
+	UserAgent string
+	UserID    string
+	Data      AuditLogData
+}
+
+type AuditLogData map[string]string
+
+type AuditLogEvent string
+
+const (
+	AuditLogEventSignIn                 AuditLogEvent = "SIGN_IN"
+	AuditLogEventClientAuthorization    AuditLogEvent = "CLIENT_AUTHORIZATION"
+	AuditLogEventNewClientAuthorization AuditLogEvent = "NEW_CLIENT_AUTHORIZATION"
+)
+
+// Scan and Value methods for GORM to handle the custom type
+
+func (e *AuditLogEvent) Scan(value interface{}) error {
+	*e = AuditLogEvent(value.(string))
+	return nil
+}
+
+func (e AuditLogEvent) Value() (driver.Value, error) {
+	return string(e), nil
+}
+
+func (d *AuditLogData) Scan(value interface{}) error {
+	if v, ok := value.([]byte); ok {
+		return json.Unmarshal(v, d)
+	} else {
+		return errors.New("type assertion to []byte failed")
+	}
+}
+
+func (d AuditLogData) Value() (driver.Value, error) {
+	return json.Marshal(d)
+}
--- a/backend/internal/model/user.go
+++ b/backend/internal/model/user.go
@@ -15,6 +15,7 @@ type User struct {
 	LastName  string
 	IsAdmin   bool

+	UserGroups  []UserGroup `gorm:"many2many:user_groups_users;"`
 	Credentials []WebauthnCredential
 }

--- a/backend/internal/model/user_group.go
+++ b/backend/internal/model/user_group.go
@@ -0,0 +1,8 @@
+package model
+
+type UserGroup struct {
+	Base
+	FriendlyName string
+	Name         string `gorm:"unique"`
+	Users        []User `gorm:"many2many:user_groups_users;"`
+}
--- a/backend/internal/service/app_config_service.go
+++ b/backend/internal/service/app_config_service.go
@@ -47,15 +47,46 @@ var defaultDbConfig = model.AppConfig{
 		IsInternal: true,
 		Value:      "jpg",
 	},
-	LogoImageType: model.AppConfigVariable{
-		Key:        "logoImageType",
+	LogoLightImageType: model.AppConfigVariable{
+		Key:        "logoLightImageType",
 		Type:       "string",
 		IsInternal: true,
 		Value:      "svg",
 	},
+	LogoDarkImageType: model.AppConfigVariable{
+		Key:        "logoDarkImageType",
+		Type:       "string",
+		IsInternal: true,
+		Value:      "svg",
+	},
+	EmailEnabled: model.AppConfigVariable{
+		Key:   "emailEnabled",
+		Type:  "bool",
+		Value: "false",
+	},
+	SmtpHost: model.AppConfigVariable{
+		Key:  "smtpHost",
+		Type: "string",
+	},
+	SmtpPort: model.AppConfigVariable{
+		Key:  "smtpPort",
+		Type: "number",
+	},
+	SmtpFrom: model.AppConfigVariable{
+		Key:  "smtpFrom",
+		Type: "string",
+	},
+	SmtpUser: model.AppConfigVariable{
+		Key:  "smtpUser",
+		Type: "string",
+	},
+	SmtpPassword: model.AppConfigVariable{
+		Key:  "smtpPassword",
+		Type: "string",
+	},
 }

-func (s *AppConfigService) UpdateApplicationConfiguration(input dto.AppConfigUpdateDto) ([]model.AppConfigVariable, error) {
+func (s *AppConfigService) UpdateAppConfig(input dto.AppConfigUpdateDto) ([]model.AppConfigVariable, error) {
 	var savedConfigVariables []model.AppConfigVariable

 	tx := s.db.Begin()
@@ -67,19 +98,19 @@ func (s *AppConfigService) UpdateApplicationConfiguration(input dto.AppConfigUpd
 		key := field.Tag.Get("json")
 		value := rv.FieldByName(field.Name).String()

-		var applicationConfigurationVariable model.AppConfigVariable
-		if err := tx.First(&applicationConfigurationVariable, "key = ? AND is_internal = false", key).Error; err != nil {
+		var appConfigVariable model.AppConfigVariable
+		if err := tx.First(&appConfigVariable, "key = ? AND is_internal = false", key).Error; err != nil {
 			tx.Rollback()
 			return nil, err
 		}

-		applicationConfigurationVariable.Value = value
-		if err := tx.Save(&applicationConfigurationVariable).Error; err != nil {
+		appConfigVariable.Value = value
+		if err := tx.Save(&appConfigVariable).Error; err != nil {
 			tx.Rollback()
 			return nil, err
 		}

-		savedConfigVariables = append(savedConfigVariables, applicationConfigurationVariable)
+		savedConfigVariables = append(savedConfigVariables, appConfigVariable)
 	}

 	tx.Commit()
@@ -101,7 +132,7 @@ func (s *AppConfigService) UpdateImageType(imageName string, fileType string) er
 	return s.loadDbConfigFromDb()
 }

-func (s *AppConfigService) ListApplicationConfiguration(showAll bool) ([]model.AppConfigVariable, error) {
+func (s *AppConfigService) ListAppConfig(showAll bool) ([]model.AppConfigVariable, error) {
 	var configuration []model.AppConfigVariable
 	var err error

--- a/backend/internal/service/audit_log_service.go
+++ b/backend/internal/service/audit_log_service.go
@@ -0,0 +1,125 @@
+package service
+
+import (
+	userAgentParser "github.com/mileusna/useragent"
+	"github.com/oschwald/maxminddb-golang/v2"
+	"github.com/stonith404/pocket-id/backend/internal/model"
+	"github.com/stonith404/pocket-id/backend/internal/utils"
+	"github.com/stonith404/pocket-id/backend/internal/utils/email"
+	"gorm.io/gorm"
+	"log"
+	"net/netip"
+)
+
+type AuditLogService struct {
+	db               *gorm.DB
+	appConfigService *AppConfigService
+	emailService     *EmailService
+}
+
+func NewAuditLogService(db *gorm.DB, appConfigService *AppConfigService, emailService *EmailService) *AuditLogService {
+	return &AuditLogService{db: db, appConfigService: appConfigService, emailService: emailService}
+}
+
+// Create creates a new audit log entry in the database
+func (s *AuditLogService) Create(event model.AuditLogEvent, ipAddress, userAgent, userID string, data model.AuditLogData) model.AuditLog {
+	country, city, err := s.GetIpLocation(ipAddress)
+	if err != nil {
+		log.Printf("Failed to get IP location: %v\n", err)
+	}
+
+	auditLog := model.AuditLog{
+		Event:     event,
+		IpAddress: ipAddress,
+		Country:   country,
+		City:      city,
+		UserAgent: userAgent,
+		UserID:    userID,
+		Data:      data,
+	}
+
+	// Save the audit log in the database
+	if err := s.db.Create(&auditLog).Error; err != nil {
+		log.Printf("Failed to create audit log: %v\n", err)
+		return model.AuditLog{}
+	}
+
+	return auditLog
+}
+
+// CreateNewSignInWithEmail creates a new audit log entry in the database and sends an email if the device hasn't been used before
+func (s *AuditLogService) CreateNewSignInWithEmail(ipAddress, userAgent, userID string, data model.AuditLogData) model.AuditLog {
+	createdAuditLog := s.Create(model.AuditLogEventSignIn, ipAddress, userAgent, userID, data)
+
+	// Count the number of times the user has logged in from the same device
+	var count int64
+	err := s.db.Model(&model.AuditLog{}).Where("user_id = ? AND ip_address = ? AND user_agent = ?", userID, ipAddress, userAgent).Count(&count).Error
+	if err != nil {
+		log.Printf("Failed to count audit logs: %v\n", err)
+		return createdAuditLog
+	}
+
+	// If the user hasn't logged in from the same device before, send an email
+	if count <= 1 {
+		go func() {
+			var user model.User
+			s.db.Where("id = ?", userID).First(&user)
+
+			err := SendEmail(s.emailService, email.Address{
+				Name:  user.Username,
+				Email: user.Email,
+			}, NewLoginTemplate, &NewLoginTemplateData{
+				IPAddress: ipAddress,
+				Country:   createdAuditLog.Country,
+				City:      createdAuditLog.City,
+				Device:    s.DeviceStringFromUserAgent(userAgent),
+				DateTime:  createdAuditLog.CreatedAt.UTC(),
+			})
+			if err != nil {
+				log.Printf("Failed to send email to '%s': %v\n", user.Email, err)
+			}
+		}()
+	}
+
+	return createdAuditLog
+}
+
+// ListAuditLogsForUser retrieves all audit logs for a given user ID
+func (s *AuditLogService) ListAuditLogsForUser(userID string, page int, pageSize int) ([]model.AuditLog, utils.PaginationResponse, error) {
+	var logs []model.AuditLog
+	query := s.db.Model(&model.AuditLog{}).Where("user_id = ?", userID).Order("created_at desc")
+
+	pagination, err := utils.Paginate(page, pageSize, query, &logs)
+	return logs, pagination, err
+}
+
+func (s *AuditLogService) DeviceStringFromUserAgent(userAgent string) string {
+	ua := userAgentParser.Parse(userAgent)
+	return ua.Name + " on " + ua.OS + " " + ua.OSVersion
+}
+
+func (s *AuditLogService) GetIpLocation(ipAddress string) (country, city string, err error) {
+	db, err := maxminddb.Open("GeoLite2-City.mmdb")
+	if err != nil {
+		return "", "", err
+	}
+	defer db.Close()
+
+	addr := netip.MustParseAddr(ipAddress)
+
+	var record struct {
+		City struct {
+			Names map[string]string `maxminddb:"names"`
+		} `maxminddb:"city"`
+		Country struct {
+			Names map[string]string `maxminddb:"names"`
+		} `maxminddb:"country"`
+	}
+
+	err = db.Lookup(addr).Decode(&record)
+	if err != nil {
+		return "", "", err
+	}
+
+	return record.Country.Names["en"], record.City.Names["en"], nil
+}
--- a/backend/internal/service/email_service.go
+++ b/backend/internal/service/email_service.go
@@ -0,0 +1,137 @@
+package service
+
+import (
+	"bytes"
+	"errors"
+	"fmt"
+	"github.com/stonith404/pocket-id/backend/internal/common"
+	"github.com/stonith404/pocket-id/backend/internal/utils/email"
+	htemplate "html/template"
+	"io/fs"
+	"mime/multipart"
+	"mime/quotedprintable"
+	"net/smtp"
+	"net/textproto"
+	ttemplate "text/template"
+)
+
+type EmailService struct {
+	appConfigService *AppConfigService
+	htmlTemplates    map[string]*htemplate.Template
+	textTemplates    map[string]*ttemplate.Template
+}
+
+func NewEmailService(appConfigService *AppConfigService, templateDir fs.FS) (*EmailService, error) {
+	htmlTemplates, err := email.PrepareHTMLTemplates(templateDir, emailTemplatesPaths)
+	if err != nil {
+		return nil, fmt.Errorf("prepare html templates: %w", err)
+	}
+
+	textTemplates, err := email.PrepareTextTemplates(templateDir, emailTemplatesPaths)
+	if err != nil {
+		return nil, fmt.Errorf("prepare html templates: %w", err)
+	}
+
+	return &EmailService{
+		appConfigService: appConfigService,
+		htmlTemplates:    htmlTemplates,
+		textTemplates:    textTemplates,
+	}, nil
+}
+
+func SendEmail[V any](srv *EmailService, toEmail email.Address, template email.Template[V], tData *V) error {
+	// Check if SMTP settings are set
+	if srv.appConfigService.DbConfig.EmailEnabled.Value != "true" {
+		return errors.New("email not enabled")
+	}
+
+	data := &email.TemplateData[V]{
+		AppName: srv.appConfigService.DbConfig.AppName.Value,
+		LogoURL: common.EnvConfig.AppURL + "/api/application-configuration/logo",
+		Data:    tData,
+	}
+
+	body, boundary, err := prepareBody(srv, template, data)
+	if err != nil {
+		return fmt.Errorf("prepare email body for '%s': %w", template.Path, err)
+	}
+
+	// Construct the email message
+	c := email.NewComposer()
+	c.AddHeader("Subject", template.Title(data))
+	c.AddAddressHeader("From", []email.Address{
+		{
+			Email: srv.appConfigService.DbConfig.SmtpFrom.Value,
+			Name:  srv.appConfigService.DbConfig.AppName.Value,
+		},
+	})
+	c.AddAddressHeader("To", []email.Address{toEmail})
+	c.AddHeaderRaw("Content-Type",
+		fmt.Sprintf("multipart/alternative;\n boundary=%s;\n charset=UTF-8", boundary),
+	)
+	c.Body(body)
+
+	// Set up the authentication information.
+	auth := smtp.PlainAuth("",
+		srv.appConfigService.DbConfig.SmtpUser.Value,
+		srv.appConfigService.DbConfig.SmtpPassword.Value,
+		srv.appConfigService.DbConfig.SmtpHost.Value,
+	)
+
+	// Send the email
+	err = smtp.SendMail(
+		srv.appConfigService.DbConfig.SmtpHost.Value+":"+srv.appConfigService.DbConfig.SmtpPort.Value,
+		auth,
+		srv.appConfigService.DbConfig.SmtpFrom.Value,
+		[]string{toEmail.Email},
+		[]byte(c.String()),
+	)
+
+	if err != nil {
+		return fmt.Errorf("failed to send email: %w", err)
+	}
+
+	return nil
+}
+
+func prepareBody[V any](srv *EmailService, template email.Template[V], data *email.TemplateData[V]) (string, string, error) {
+	body := bytes.NewBuffer(nil)
+	mpart := multipart.NewWriter(body)
+
+	// prepare text part
+	var textHeader = textproto.MIMEHeader{}
+	textHeader.Add("Content-Type", "text/plain;\n charset=UTF-8")
+	textHeader.Add("Content-Transfer-Encoding", "quoted-printable")
+	textPart, err := mpart.CreatePart(textHeader)
+	if err != nil {
+		return "", "", fmt.Errorf("create text part: %w", err)
+	}
+
+	textQp := quotedprintable.NewWriter(textPart)
+	err = email.GetTemplate(srv.textTemplates, template).ExecuteTemplate(textQp, "root", data)
+	if err != nil {
+		return "", "", fmt.Errorf("execute text template: %w", err)
+	}
+
+	// prepare html part
+	var htmlHeader = textproto.MIMEHeader{}
+	htmlHeader.Add("Content-Type", "text/html;\n charset=UTF-8")
+	htmlHeader.Add("Content-Transfer-Encoding", "quoted-printable")
+	htmlPart, err := mpart.CreatePart(htmlHeader)
+	if err != nil {
+		return "", "", fmt.Errorf("create html part: %w", err)
+	}
+
+	htmlQp := quotedprintable.NewWriter(htmlPart)
+	err = email.GetTemplate(srv.htmlTemplates, template).ExecuteTemplate(htmlQp, "root", data)
+	if err != nil {
+		return "", "", fmt.Errorf("execute html template: %w", err)
+	}
+
+	err = mpart.Close()
+	if err != nil {
+		return "", "", fmt.Errorf("close multipart: %w", err)
+	}
+
+	return body.String(), mpart.Boundary(), nil
+}
--- a/backend/internal/service/email_service_templates.go
+++ b/backend/internal/service/email_service_templates.go
@@ -0,0 +1,39 @@
+package service
+
+import (
+	"fmt"
+	"github.com/stonith404/pocket-id/backend/internal/utils/email"
+	"time"
+)
+
+/**
+How to add new template:
+- pick unique and descriptive template ${name} (for example "login-with-new-device")
+- in backend/email-templates/ create "${name}_html.tmpl" and "${name}_text.tmpl"
+- create xxxxTemplate and xxxxTemplateData (for example NewLoginTemplate and NewLoginTemplateData)
+  - Path *must* be ${name}
+- add xxxTemplate.Path to "emailTemplatePaths" at the end
+
+Notes:
+- backend app must be restarted to reread all the template files
+- root "." object in templates is `email.TemplateData`
+- xxxxTemplateData structure is visible under .Data in templates
+*/
+
+var NewLoginTemplate = email.Template[NewLoginTemplateData]{
+	Path: "login-with-new-device",
+	Title: func(data *email.TemplateData[NewLoginTemplateData]) string {
+		return fmt.Sprintf("New device login with %s", data.AppName)
+	},
+}
+
+type NewLoginTemplateData struct {
+	IPAddress string
+	Country   string
+	City      string
+	Device    string
+	DateTime  time.Time
+}
+
+// this is list of all template paths used for preloading templates
+var emailTemplatesPaths = []string{NewLoginTemplate.Path}
--- a/backend/internal/service/oidc_service.go
+++ b/backend/internal/service/oidc_service.go
@@ -17,18 +17,22 @@ import (
 )

 type OidcService struct {
-	db         *gorm.DB
-	jwtService *JwtService
+	db               *gorm.DB
+	jwtService       *JwtService
+	appConfigService *AppConfigService
+	auditLogService  *AuditLogService
 }

-func NewOidcService(db *gorm.DB, jwtService *JwtService) *OidcService {
+func NewOidcService(db *gorm.DB, jwtService *JwtService, appConfigService *AppConfigService, auditLogService *AuditLogService) *OidcService {
 	return &OidcService{
-		db:         db,
-		jwtService: jwtService,
+		db:               db,
+		jwtService:       jwtService,
+		appConfigService: appConfigService,
+		auditLogService:  auditLogService,
 	}
 }

-func (s *OidcService) Authorize(input dto.AuthorizeOidcClientRequestDto, userID string) (string, string, error) {
+func (s *OidcService) Authorize(input dto.AuthorizeOidcClientRequestDto, userID, ipAddress, userAgent string) (string, string, error) {
 	var userAuthorizedOIDCClient model.UserAuthorizedOidcClient
 	s.db.Preload("Client").First(&userAuthorizedOIDCClient, "client_id = ? AND user_id = ?", input.ClientID, userID)

@@ -42,10 +46,16 @@ func (s *OidcService) Authorize(input dto.AuthorizeOidcClientRequestDto, userID
 	}

 	code, err := s.createAuthorizationCode(input.ClientID, userID, input.Scope, input.Nonce)
-	return code, callbackURL, err
+	if err != nil {
+		return "", "", err
+	}
+
+	s.auditLogService.Create(model.AuditLogEventClientAuthorization, ipAddress, userAgent, userID, model.AuditLogData{"clientName": userAuthorizedOIDCClient.Client.Name})
+
+	return code, callbackURL, nil
 }

-func (s *OidcService) AuthorizeNewClient(input dto.AuthorizeOidcClientRequestDto, userID string) (string, string, error) {
+func (s *OidcService) AuthorizeNewClient(input dto.AuthorizeOidcClientRequestDto, userID, ipAddress, userAgent string) (string, string, error) {
 	var client model.OidcClient
 	if err := s.db.First(&client, "id = ?", input.ClientID).Error; err != nil {
 		return "", "", err
@@ -71,7 +81,13 @@ func (s *OidcService) AuthorizeNewClient(input dto.AuthorizeOidcClientRequestDto
 	}

 	code, err := s.createAuthorizationCode(input.ClientID, userID, input.Scope, input.Nonce)
-	return code, callbackURL, err
+	if err != nil {
+		return "", "", err
+	}
+
+	s.auditLogService.Create(model.AuditLogEventNewClientAuthorization, ipAddress, userAgent, userID, model.AuditLogData{"clientName": client.Name})
+
+	return code, callbackURL, nil
 }

 func (s *OidcService) CreateTokens(code, grantType, clientID, clientSecret string) (string, string, error) {
@@ -285,7 +301,7 @@ func (s *OidcService) DeleteClientLogo(clientID string) error {

 func (s *OidcService) GetUserClaimsForClient(userID string, clientID string) (map[string]interface{}, error) {
 	var authorizedOidcClient model.UserAuthorizedOidcClient
-	if err := s.db.Preload("User").First(&authorizedOidcClient, "user_id = ? AND client_id = ?", userID, clientID).Error; err != nil {
+	if err := s.db.Preload("User.UserGroups").First(&authorizedOidcClient, "user_id = ? AND client_id = ?", userID, clientID).Error; err != nil {
 		return nil, err
 	}

@@ -300,6 +316,14 @@ func (s *OidcService) GetUserClaimsForClient(userID string, clientID string) (ma
 		claims["email"] = user.Email
 	}

+	if strings.Contains(scope, "groups") {
+		userGroups := make([]string, len(user.UserGroups))
+		for i, group := range user.UserGroups {
+			userGroups[i] = group.Name
+		}
+		claims["groups"] = userGroups
+	}
+
 	profileClaims := map[string]interface{}{
 		"given_name":         user.FirstName,
 		"family_name":        user.LastName,
--- a/backend/internal/service/test_service.go
+++ b/backend/internal/service/test_service.go
@@ -56,6 +56,30 @@ func (s *TestService) SeedDatabase() error {
 			}
 		}

+		userGroups := []model.UserGroup{
+			{
+				Base: model.Base{
+					ID: "4110f814-56f1-4b28-8998-752b69bc97c0e",
+				},
+				Name:         "developers",
+				FriendlyName: "Developers",
+				Users:        []model.User{users[0], users[1]},
+			},
+			{
+				Base: model.Base{
+					ID: "adab18bf-f89d-4087-9ee1-70ff15b48211",
+				},
+				Name:         "designers",
+				FriendlyName: "Designers",
+				Users:        []model.User{users[0]},
+			},
+		}
+		for _, group := range userGroups {
+			if err := tx.Create(&group).Error; err != nil {
+				return err
+			}
+		}
+
 		oidcClients := []model.OidcClient{
 			{
 				Base: model.Base{
--- a/backend/internal/service/user_group_service.go
+++ b/backend/internal/service/user_group_service.go
@@ -0,0 +1,111 @@
+package service
+
+import (
+	"errors"
+	"github.com/stonith404/pocket-id/backend/internal/common"
+	"github.com/stonith404/pocket-id/backend/internal/dto"
+	"github.com/stonith404/pocket-id/backend/internal/model"
+	"github.com/stonith404/pocket-id/backend/internal/utils"
+	"gorm.io/gorm"
+)
+
+type UserGroupService struct {
+	db *gorm.DB
+}
+
+func NewUserGroupService(db *gorm.DB) *UserGroupService {
+	return &UserGroupService{db: db}
+}
+
+func (s *UserGroupService) List(name string, page int, pageSize int) (groups []model.UserGroup, response utils.PaginationResponse, err error) {
+	query := s.db.Model(&model.UserGroup{})
+
+	if name != "" {
+		query = query.Where("name LIKE ?", "%"+name+"%")
+	}
+
+	response, err = utils.Paginate(page, pageSize, query, &groups)
+	return groups, response, err
+}
+
+func (s *UserGroupService) Get(id string) (group model.UserGroup, err error) {
+	err = s.db.Where("id = ?", id).Preload("Users").First(&group).Error
+	return group, err
+}
+
+func (s *UserGroupService) Delete(id string) error {
+	var group model.UserGroup
+	if err := s.db.Where("id = ?", id).First(&group).Error; err != nil {
+		return err
+	}
+
+	return s.db.Delete(&group).Error
+}
+
+func (s *UserGroupService) Create(input dto.UserGroupCreateDto) (group model.UserGroup, err error) {
+	group = model.UserGroup{
+		FriendlyName: input.FriendlyName,
+		Name:         input.Name,
+	}
+
+	if err := s.db.Preload("Users").Create(&group).Error; err != nil {
+		if errors.Is(err, gorm.ErrDuplicatedKey) {
+			return model.UserGroup{}, common.ErrNameAlreadyInUse
+		}
+		return model.UserGroup{}, err
+	}
+	return group, nil
+}
+
+func (s *UserGroupService) Update(id string, input dto.UserGroupCreateDto) (group model.UserGroup, err error) {
+	group, err = s.Get(id)
+	if err != nil {
+		return model.UserGroup{}, err
+	}
+
+	group.Name = input.Name
+	group.FriendlyName = input.FriendlyName
+
+	if err := s.db.Preload("Users").Save(&group).Error; err != nil {
+		if errors.Is(err, gorm.ErrDuplicatedKey) {
+			return model.UserGroup{}, common.ErrNameAlreadyInUse
+		}
+		return model.UserGroup{}, err
+	}
+	return group, nil
+}
+
+func (s *UserGroupService) UpdateUsers(id string, input dto.UserGroupUpdateUsersDto) (group model.UserGroup, err error) {
+	group, err = s.Get(id)
+	if err != nil {
+		return model.UserGroup{}, err
+	}
+
+	// Fetch the users based on UserIDs in input
+	var users []model.User
+	if len(input.UserIDs) > 0 {
+		if err := s.db.Where("id IN (?)", input.UserIDs).Find(&users).Error; err != nil {
+			return model.UserGroup{}, err
+		}
+	}
+
+	// Replace the current users with the new set of users
+	if err := s.db.Model(&group).Association("Users").Replace(users); err != nil {
+		return model.UserGroup{}, err
+	}
+
+	// Save the updated group
+	if err := s.db.Save(&group).Error; err != nil {
+		return model.UserGroup{}, err
+	}
+
+	return group, nil
+}
+
+func (s *UserGroupService) GetUserCountOfGroup(id string) (int64, error) {
+	var group model.UserGroup
+	if err := s.db.Preload("Users").Where("id = ?", id).First(&group).Error; err != nil {
+		return 0, err
+	}
+	return s.db.Model(&group).Association("Users").Count(), nil
+}
--- a/backend/internal/service/webauthn_service.go
+++ b/backend/internal/service/webauthn_service.go
@@ -12,11 +12,14 @@ import (
 )

 type WebAuthnService struct {
-	db       *gorm.DB
-	webAuthn *webauthn.WebAuthn
+	db               *gorm.DB
+	webAuthn         *webauthn.WebAuthn
+	jwtService       *JwtService
+	auditLogService  *AuditLogService
+	appConfigService *AppConfigService
 }

-func NewWebAuthnService(db *gorm.DB, appConfigService *AppConfigService) *WebAuthnService {
+func NewWebAuthnService(db *gorm.DB, jwtService *JwtService, auditLogService *AuditLogService, appConfigService *AppConfigService) *WebAuthnService {
 	webauthnConfig := &webauthn.Config{
 		RPDisplayName: appConfigService.DbConfig.AppName.Value,
 		RPID:          utils.GetHostFromURL(common.EnvConfig.AppURL),
@@ -34,12 +37,13 @@ func NewWebAuthnService(db *gorm.DB, appConfigService *AppConfigService) *WebAut
 			},
 		},
 	}
-
 	wa, _ := webauthn.New(webauthnConfig)
-	return &WebAuthnService{db: db, webAuthn: wa}
+	return &WebAuthnService{db: db, webAuthn: wa, jwtService: jwtService, auditLogService: auditLogService, appConfigService: appConfigService}
 }

 func (s *WebAuthnService) BeginRegistration(userID string) (*model.PublicKeyCredentialCreationOptions, error) {
+	s.updateWebAuthnConfig()
+
 	var user model.User
 	if err := s.db.Preload("Credentials").Find(&user, "id = ?", userID).Error; err != nil {
 		return nil, err
@@ -129,10 +133,10 @@ func (s *WebAuthnService) BeginLogin() (*model.PublicKeyCredentialRequestOptions
 	}, nil
 }

-func (s *WebAuthnService) VerifyLogin(sessionID, userID string, credentialAssertionData *protocol.ParsedCredentialAssertionData) (model.User, error) {
+func (s *WebAuthnService) VerifyLogin(sessionID, userID string, credentialAssertionData *protocol.ParsedCredentialAssertionData, ipAddress, userAgent string) (model.User, string, error) {
 	var storedSession model.WebauthnSession
 	if err := s.db.First(&storedSession, "id = ?", sessionID).Error; err != nil {
-		return model.User{}, err
+		return model.User{}, "", err
 	}

 	session := webauthn.SessionData{
@@ -149,14 +153,21 @@ func (s *WebAuthnService) VerifyLogin(sessionID, userID string, credentialAssert
 	}, session, credentialAssertionData)

 	if err != nil {
-		return model.User{}, err
+		return model.User{}, "", err
 	}

 	if err := s.db.Find(&user, "id = ?", userID).Error; err != nil {
-		return model.User{}, err
+		return model.User{}, "", err
 	}

-	return *user, nil
+	token, err := s.jwtService.GenerateAccessToken(*user)
+	if err != nil {
+		return model.User{}, "", err
+	}
+
+	s.auditLogService.CreateNewSignInWithEmail(ipAddress, userAgent, user.ID, model.AuditLogData{})
+
+	return *user, token, nil
 }

 func (s *WebAuthnService) ListCredentials(userID string) ([]model.WebauthnCredential, error) {
@@ -194,3 +205,8 @@ func (s *WebAuthnService) UpdateCredential(userID, credentialID, name string) (m

 	return credential, nil
 }
+
+// updateWebAuthnConfig updates the WebAuthn configuration with the app name as it can change during runtime
+func (s *WebAuthnService) updateWebAuthnConfig() {
+	s.webAuthn.Config.RPDisplayName = s.appConfigService.DbConfig.AppName.Value
+}
--- a/backend/internal/utils/email/composer.go
+++ b/backend/internal/utils/email/composer.go
@@ -0,0 +1,213 @@
+package email
+
+import (
+	"fmt"
+	"strings"
+	"unicode"
+)
+
+const maxLineLength = 78
+const continuePrefix = "    "
+const addressSeparator = ", "
+
+type Composer struct {
+	isClosed bool
+	content  strings.Builder
+}
+
+func NewComposer() *Composer {
+	return &Composer{}
+}
+
+type Address struct {
+	Name  string
+	Email string
+}
+
+func (c *Composer) AddAddressHeader(name string, addresses []Address) {
+	c.content.WriteString(genAddressHeader(name, addresses, maxLineLength))
+	c.content.WriteString("\n")
+}
+
+func genAddressHeader(name string, addresses []Address, maxLength int) string {
+	hl := &headerLine{
+		maxLineLength:  maxLength,
+		continuePrefix: continuePrefix,
+	}
+
+	hl.Write(name)
+	hl.Write(": ")
+
+	for i, addr := range addresses {
+		var email string
+		if i < len(addresses)-1 {
+			email = fmt.Sprintf("<%s>%s", addr.Email, addressSeparator)
+		} else {
+			email = fmt.Sprintf("<%s>", addr.Email)
+		}
+		writeHeaderQ(hl, addr.Name)
+		writeHeaderAtom(hl, " ")
+		writeHeaderAtom(hl, email)
+	}
+	hl.EndLine()
+	return hl.String()
+}
+
+func (c *Composer) AddHeader(name, value string) {
+	if isPrintableASCII(value) && len(value)+len(name)+len(": ") < maxLineLength {
+		c.AddHeaderRaw(name, value)
+		return
+	}
+
+	c.content.WriteString(genHeader(name, value, maxLineLength))
+	c.content.WriteString("\n")
+}
+
+func genHeader(name, value string, maxLength int) string {
+	// add content as raw header when it is printable ASCII and shorter than maxLineLength
+	hl := &headerLine{
+		maxLineLength:  maxLength,
+		continuePrefix: continuePrefix,
+	}
+
+	hl.Write(name)
+	hl.Write(": ")
+	writeHeaderQ(hl, value)
+	hl.EndLine()
+	return hl.String()
+}
+
+const qEncStart = "=?utf-8?q?"
+const qEncEnd = "?="
+
+type headerLine struct {
+	buffer         strings.Builder
+	line           strings.Builder
+	maxLineLength  int
+	continuePrefix string
+}
+
+func (h *headerLine) FitsLine(length int) bool {
+	return h.line.Len()+len(h.continuePrefix)+length+2 < h.maxLineLength
+}
+
+func (h *headerLine) Write(str string) {
+	h.line.WriteString(str)
+}
+
+func (h *headerLine) EndLineWith(str string) {
+	h.line.WriteString(str)
+	h.EndLine()
+}
+
+func (h *headerLine) EndLine() {
+	if h.line.Len() == 0 {
+		return
+	}
+
+	if h.buffer.Len() != 0 {
+		h.buffer.WriteString("\n")
+		h.buffer.WriteString(h.continuePrefix)
+	}
+	h.buffer.WriteString(h.line.String())
+	h.line.Reset()
+}
+
+func (h *headerLine) String() string {
+	return h.buffer.String()
+}
+
+func writeHeaderQ(header *headerLine, value string) {
+
+	// current line does not fit event the first character - do \n
+	if !header.FitsLine(len(qEncStart) + len(convertRunes(value[0:1])[0]) + len(qEncEnd)) {
+		header.EndLineWith("")
+	}
+
+	header.Write(qEncStart)
+
+	for _, token := range convertRunes(value) {
+		if header.FitsLine(len(token) + len(qEncEnd)) {
+			header.Write(token)
+		} else {
+			header.EndLineWith(qEncEnd)
+			header.Write(qEncStart)
+			header.Write(token)
+		}
+	}
+
+	header.Write(qEncEnd)
+}
+
+func writeHeaderAtom(header *headerLine, value string) {
+	if !header.FitsLine(len(value)) {
+		header.EndLine()
+	}
+	header.Write(value)
+}
+
+func (c *Composer) AddHeaderRaw(name, value string) {
+	if c.isClosed {
+		panic("composer had already written body!")
+	}
+	header := fmt.Sprintf("%s: %s\n", name, value)
+	c.content.WriteString(header)
+}
+
+func (c *Composer) Body(body string) {
+	c.content.WriteString("\n")
+	c.content.WriteString(body)
+	c.isClosed = true
+}
+
+func (c *Composer) String() string {
+	return c.content.String()
+}
+
+func convertRunes(str string) []string {
+	var enc = make([]string, 0, len(str))
+	for _, r := range []rune(str) {
+		if r == ' ' {
+			enc = append(enc, "_")
+		} else if isPrintableASCIIRune(r) &&
+			r != '=' &&
+			r != '?' &&
+			r != '_' {
+			enc = append(enc, string(r))
+		} else {
+			enc = append(enc, string(toHex([]byte(string(r)))))
+		}
+	}
+	return enc
+}
+
+func toHex(in []byte) []byte {
+	enc := make([]byte, 0, len(in)*2)
+	for _, b := range in {
+		enc = append(enc, '=')
+		enc = append(enc, hex(b/16))
+		enc = append(enc, hex(b%16))
+	}
+	return enc
+}
+
+func hex(n byte) byte {
+	if n > 9 {
+		return n + (65 - 10)
+	} else {
+		return n + 48
+	}
+}
+
+func isPrintableASCII(str string) bool {
+	for _, r := range []rune(str) {
+		if !unicode.IsPrint(r) || r >= unicode.MaxASCII {
+			return false
+		}
+	}
+	return true
+}
+
+func isPrintableASCIIRune(r rune) bool {
+	return r > 31 && r < 127
+}
--- a/backend/internal/utils/email/composer_test.go
+++ b/backend/internal/utils/email/composer_test.go
@@ -0,0 +1,92 @@
+package email
+
+import (
+	"strings"
+	"testing"
+)
+
+func TestConvertRunes(t *testing.T) {
+	var testData = map[string]string{
+		"=??=_.": "=3D=3F=3F=3D=5F.",
+		"Příšerně žluťoučký kůn úpěl ďábelské ódy 🐎": "P=C5=99=C3=AD=C5=A1ern=C4=9B_=C5=BElu=C5=A5ou=C4=8Dk=C3=BD_k=C5=AFn_=C3=BAp=C4=9Bl_=C4=8F=C3=A1belsk=C3=A9_=C3=B3dy_=F0=9F=90=8E",
+	}
+	for input, expected := range testData {
+		got := strings.Join(convertRunes(input), "")
+		if got != expected {
+			t.Errorf("Input: '%s', expected '%s', got: '%s'", input, expected, got)
+		}
+	}
+}
+
+type genHeaderTestData struct {
+	name     string
+	value    string
+	expected string
+	maxWidth int
+}
+
+func TestGenHeaderQ(t *testing.T) {
+	var testData = []genHeaderTestData{
+		{
+			name:  "Subject",
+			value: "Příšerně žluťoučký kůn úpěl ďábelské ódy 🐎",
+			expected: "Subject: =?utf-8?q?P=C5=99=C3=AD=C5=A1ern=C4=9B_=C5=BElu=C5=A5ou=C4=8Dk?=\n" +
+				"    =?utf-8?q?=C3=BD_k=C5=AFn_=C3=BAp=C4=9Bl_=C4=8F=C3=A1belsk=C3=A9_=C3=B3?=\n" +
+				"    =?utf-8?q?dy_=F0=9F=90=8E?=",
+			maxWidth: 80,
+		},
+	}
+	for _, data := range testData {
+		got := genHeader(data.name, data.value, data.maxWidth)
+		if got != data.expected {
+			t.Errorf("Input: '%s', expected \n===\n%s\n===, got: \n===\n%s\n==='", data.value, data.expected, got)
+		}
+
+	}
+}
+
+type genAddressHeaderTestData struct {
+	name      string
+	addresses []Address
+	expected  string
+	maxLength int
+}
+
+func TestGenAddressHeader(t *testing.T) {
+	var testData = []genAddressHeaderTestData{
+		{
+			name: "To",
+			addresses: []Address{
+				{
+					Name:  "Oldřich Jánský",
+					Email: "olrd@example.com",
+				},
+			},
+			expected:  "To: =?utf-8?q?Old=C5=99ich_J=C3=A1nsk=C3=BD?= <olrd@example.com>",
+			maxLength: 80,
+		},
+		{
+			name: "Subject",
+			addresses: []Address{
+				{
+					Name:  "Oldřich Jánský",
+					Email: "olrd@example.com",
+				},
+				{
+					Name:  "Jan Novák",
+					Email: "novak@example.com",
+				},
+			},
+			expected: "Subject: =?utf-8?q?Old=C5=99ich_J=C3=A1nsk=C3=BD?= <olrd@example.com>, \n" +
+				"    =?utf-8?q?Jan_Nov=C3=A1k?= <novak@example.com>",
+			maxLength: 80,
+		},
+	}
+	for _, data := range testData {
+		got := genAddressHeader(data.name, data.addresses, data.maxLength)
+		if got != data.expected {
+			t.Errorf("Test: '%s', expected \n===\n%s\n===, got: \n===\n%s\n==='", data.name, data.expected, got)
+		}
+
+	}
+}
--- a/backend/internal/utils/email/email_service_templates.go
+++ b/backend/internal/utils/email/email_service_templates.go
@@ -0,0 +1,97 @@
+package email
+
+import (
+	"fmt"
+	htemplate "html/template"
+	"io/fs"
+	"path"
+	ttemplate "text/template"
+)
+
+const templateComponentsDir = "components"
+
+type Template[V any] struct {
+	Path  string
+	Title func(data *TemplateData[V]) string
+}
+
+type TemplateData[V any] struct {
+	AppName string
+	LogoURL string
+	Data    *V
+}
+
+type TemplateMap[V any] map[string]*V
+
+func GetTemplate[U any, V any](templateMap TemplateMap[U], template Template[V]) *U {
+	return templateMap[template.Path]
+}
+
+type clonable[V pareseable[V]] interface {
+	Clone() (V, error)
+}
+
+type pareseable[V any] interface {
+	ParseFS(fs.FS, ...string) (V, error)
+}
+
+func prepareTemplate[V pareseable[V]](template string, rootTemplate clonable[V], templateDir fs.FS, suffix string) (V, error) {
+	tmpl, err := rootTemplate.Clone()
+	if err != nil {
+		return *new(V), fmt.Errorf("clone root html template: %w", err)
+	}
+
+	filename := fmt.Sprintf("%s%s", template, suffix)
+	_, err = tmpl.ParseFS(templateDir, filename)
+	if err != nil {
+		return *new(V), fmt.Errorf("parsing html template '%s': %w", template, err)
+	}
+
+	return tmpl, nil
+}
+
+func PrepareTextTemplates(templateDir fs.FS, templates []string) (map[string]*ttemplate.Template, error) {
+	components := path.Join(templateComponentsDir, "*_text.tmpl")
+	rootTmpl, err := ttemplate.ParseFS(templateDir, components)
+	if err != nil {
+		return nil, fmt.Errorf("unable to parse templates '%s': %w", components, err)
+	}
+
+	var textTemplates = make(map[string]*ttemplate.Template, len(templates))
+	for _, tmpl := range templates {
+		rootTmplClone, err := rootTmpl.Clone()
+		if err != nil {
+			return nil, fmt.Errorf("clone root template: %w", err)
+		}
+
+		textTemplates[tmpl], err = prepareTemplate[*ttemplate.Template](tmpl, rootTmplClone, templateDir, "_text.tmpl")
+		if err != nil {
+			return nil, fmt.Errorf("parse '%s': %w", tmpl, err)
+		}
+	}
+
+	return textTemplates, nil
+}
+
+func PrepareHTMLTemplates(templateDir fs.FS, templates []string) (map[string]*htemplate.Template, error) {
+	components := path.Join(templateComponentsDir, "*_html.tmpl")
+	rootTmpl, err := htemplate.ParseFS(templateDir, components)
+	if err != nil {
+		return nil, fmt.Errorf("unable to parse templates '%s': %w", components, err)
+	}
+
+	var htmlTemplates = make(map[string]*htemplate.Template, len(templates))
+	for _, tmpl := range templates {
+		rootTmplClone, err := rootTmpl.Clone()
+		if err != nil {
+			return nil, fmt.Errorf("clone root template: %w", err)
+		}
+
+		htmlTemplates[tmpl], err = prepareTemplate[*htemplate.Template](tmpl, rootTmplClone, templateDir, "_html.tmpl")
+		if err != nil {
+			return nil, fmt.Errorf("parse '%s': %w", tmpl, err)
+		}
+	}
+
+	return htmlTemplates, nil
+}
--- a/backend/internal/utils/file_util.go
+++ b/backend/internal/utils/file_util.go
@@ -38,7 +38,7 @@ func CopyDirectory(srcDir, destDir string) error {
 		srcFilePath := filepath.Join(srcDir, file.Name())
 		destFilePath := filepath.Join(destDir, file.Name())

-		err := copyFile(srcFilePath, destFilePath)
+		err := CopyFile(srcFilePath, destFilePath)
 		if err != nil {
 			return err
 		}
@@ -47,7 +47,7 @@ func CopyDirectory(srcDir, destDir string) error {
 	return nil
 }

-func copyFile(srcFilePath, destFilePath string) error {
+func CopyFile(srcFilePath, destFilePath string) error {
 	srcFile, err := os.Open(srcFilePath)
 	if err != nil {
 		return err
--- a/backend/internal/utils/paging_util.go
+++ b/backend/internal/utils/paging_util.go
@@ -5,9 +5,10 @@ import (
 )

 type PaginationResponse struct {
-	TotalPages  int64 `json:"totalPages"`
-	TotalItems  int64 `json:"totalItems"`
-	CurrentPage int   `json:"currentPage"`
+	TotalPages   int64 `json:"totalPages"`
+	TotalItems   int64 `json:"totalItems"`
+	CurrentPage  int   `json:"currentPage"`
+	ItemsPerPage int   `json:"itemsPerPage"`
 }

 func Paginate(page int, pageSize int, db *gorm.DB, result interface{}) (PaginationResponse, error) {
@@ -33,8 +34,9 @@ func Paginate(page int, pageSize int, db *gorm.DB, result interface{}) (Paginati
 	}

 	return PaginationResponse{
-		TotalPages:  (totalItems + int64(pageSize) - 1) / int64(pageSize),
-		TotalItems:  totalItems,
-		CurrentPage: page,
+		TotalPages:   (totalItems + int64(pageSize) - 1) / int64(pageSize),
+		TotalItems:   totalItems,
+		CurrentPage:  page,
+		ItemsPerPage: pageSize,
 	}, nil
 }
--- a/backend/migrations/20240908123031_audit_log.down.sql
+++ b/backend/migrations/20240908123031_audit_log.down.sql
@@ -0,0 +1 @@
+DROP TABLE audit_logs;
--- a/backend/migrations/20240908123031_audit_log.up.sql
+++ b/backend/migrations/20240908123031_audit_log.up.sql
@@ -0,0 +1,10 @@
+CREATE TABLE audit_logs
+(
+    id               TEXT NOT NULL PRIMARY KEY,
+    created_at       DATETIME,
+    event            TEXT NOT NULL,
+    ip_address       TEXT NOT NULL,
+    user_agent       TEXT NOT NULL,
+    data             BLOB NOT NULL,
+    user_id          TEXT REFERENCES users
+);
--- a/backend/migrations/20240924202721_user_groups.down.sql
+++ b/backend/migrations/20240924202721_user_groups.down.sql
@@ -0,0 +1,2 @@
+DROP TABLE user_groups;
+DROP TABLE user_groups_users;
--- a/backend/migrations/20240924202721_user_groups.up.sql
+++ b/backend/migrations/20240924202721_user_groups.up.sql
@@ -0,0 +1,16 @@
+CREATE TABLE user_groups
+(
+    id           TEXT NOT NULL PRIMARY KEY,
+    created_at   DATETIME,
+    friendly_name TEXT NOT NULL,
+    name        TEXT NOT NULL UNIQUE
+);
+
+CREATE TABLE user_groups_users
+(
+    user_id  TEXT NOT NULL,
+    user_group_id TEXT NOT NULL,
+    PRIMARY KEY (user_id, user_group_id),
+    FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE,
+    FOREIGN KEY (user_group_id) REFERENCES user_groups (id) ON DELETE CASCADE
+);
--- a/backend/migrations/20241004092030_audit_log_location.down.sql
+++ b/backend/migrations/20241004092030_audit_log_location.down.sql
@@ -0,0 +1,2 @@
+ALTER TABLE audit_logs DROP COLUMN country;
+ALTER TABLE audit_logs DROP COLUMN city;
--- a/backend/migrations/20241004092030_audit_log_location.up.sql
+++ b/backend/migrations/20241004092030_audit_log_location.up.sql
@@ -0,0 +1,2 @@
+ALTER TABLE audit_logs ADD COLUMN country TEXT;
+ALTER TABLE audit_logs ADD COLUMN city TEXT;
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,7 +10,7 @@
      "dependencies": {
        "@simplewebauthn/browser": "^10.0.0",
        "axios": "^1.7.5",
-        "bits-ui": "^0.21.13",
+        "bits-ui": "^0.21.15",
        "clsx": "^2.1.1",
        "crypto": "^1.0.1",
        "formsnap": "^1.0.1",
@@ -1806,9 +1806,9 @@
      }
    },
    "node_modules/bits-ui": {
-      "version": "0.21.13",
-      "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.13.tgz",
-      "integrity": "sha512-7nmOh6Ig7ND4DXZHv1FhNsY9yUGrad0+mf3tc4YN//3MgnJT1LnHtk4HZAKgmxCOe7txSX7/39LtYHbkrXokAQ==",
+      "version": "0.21.15",
+      "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.15.tgz",
+      "integrity": "sha512-+m5WSpJnFdCcNdXSTIVC1WYBozipO03qRh03GFWgrdxoHiolCfwW71EYG4LPCWYPG6KcTZV0Cj6iHSiZ7cdKdg==",
      "dependencies": {
        "@internationalized/date": "^3.5.1",
        "@melt-ui/svelte": "0.76.2",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -42,7 +42,7 @@
  "dependencies": {
    "@simplewebauthn/browser": "^10.0.0",
    "axios": "^1.7.5",
-    "bits-ui": "^0.21.13",
+    "bits-ui": "^0.21.15",
    "clsx": "^2.1.1",
    "crypto": "^1.0.1",
    "formsnap": "^1.0.1",
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -97,16 +97,4 @@
 		font-weight: 700;
 		src: url('/fonts/PlayfairDisplay-Bold.woff') format('woff');
 	}
-}
-@layer components {
-	.application-images-grid {
-		@apply flex flex-wrap justify-between gap-x-5 gap-y-8;
-	}
-
-	@media (max-width: 1127px) {
-		.application-images-grid {
-			justify-content: flex-start;
-			@apply gap-x-20;
-		}
-	}
-}
+}
--- a/frontend/src/lib/components/advanced-table.svelte
+++ b/frontend/src/lib/components/advanced-table.svelte
@@ -0,0 +1,154 @@
+<script lang="ts" generics="T extends {id:string}">
+	import Checkbox from '$lib/components/ui/checkbox/checkbox.svelte';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import * as Pagination from '$lib/components/ui/pagination';
+	import * as Select from '$lib/components/ui/select';
+	import * as Table from '$lib/components/ui/table/index.js';
+	import type { Paginated } from '$lib/types/pagination.type';
+	import { debounced } from '$lib/utils/debounce-util';
+	import type { Snippet } from 'svelte';
+
+	let {
+		items,
+		selectedIds = $bindable(),
+		fetchItems,
+		columns,
+		rows
+	}: {
+		items: Paginated<T>;
+		selectedIds?: string[];
+		fetchItems: (search: string, page: number, limit: number) => Promise<Paginated<T>>;
+		columns: (string | { label: string; hidden?: boolean })[];
+		rows: Snippet<[{ item: T }]>;
+	} = $props();
+
+	let availablePageSizes: number[] = [10, 20, 50, 100];
+
+	let allChecked = $derived.by(() => {
+		if (!selectedIds || items.data.length === 0) return false;
+		for (const item of items.data) {
+			if (!selectedIds.includes(item.id)) {
+				return false;
+			}
+		}
+		return true;
+	});
+
+	const onSearch = debounced(async (searchValue: string) => {
+		items = await fetchItems(searchValue, 1, items.pagination.itemsPerPage);
+	}, 300);
+
+	async function onAllCheck(checked: boolean) {
+		if (checked) {
+			selectedIds = items.data.map((item) => item.id);
+		} else {
+			selectedIds = [];
+		}
+	}
+
+	async function onCheck(checked: boolean, id: string) {
+		if (!selectedIds) return;
+		if (checked) {
+			selectedIds = [...selectedIds, id];
+		} else {
+			selectedIds = selectedIds.filter((selectedId) => selectedId !== id);
+		}
+	}
+
+	async function onPageChange(page: number) {
+		items = await fetchItems('', page, items.pagination.itemsPerPage);
+	}
+
+	async function onPageSizeChange(size: number) {
+		items = await fetchItems('', 1, size);
+	}
+</script>
+
+<div class="w-full">
+	<Input
+		class="mb-4 max-w-sm"
+		placeholder={'Search...'}
+		type="text"
+		oninput={(e) => onSearch((e.target as HTMLInputElement).value)}
+	/>
+	<Table.Root>
+		<Table.Header>
+			<Table.Row>
+				{#if selectedIds}
+					<Table.Head>
+						<Checkbox checked={allChecked} onCheckedChange={(c) => onAllCheck(c as boolean)} />
+					</Table.Head>
+				{/if}
+				{#each columns as column}
+					{#if typeof column === 'string'}
+						<Table.Head>{column}</Table.Head>
+					{:else}
+						<Table.Head class={column.hidden ? 'sr-only' : ''}>{column.label}</Table.Head>
+					{/if}
+				{/each}
+			</Table.Row>
+		</Table.Header>
+		<Table.Body>
+			{#each items.data as item}
+				<Table.Row class={selectedIds?.includes(item.id) ? 'bg-muted/20' : ''}>
+					{#if selectedIds}
+						<Table.Cell>
+							<Checkbox
+								checked={selectedIds.includes(item.id)}
+								onCheckedChange={(c) => onCheck(c as boolean, item.id)}
+							/>
+						</Table.Cell>
+					{/if}
+					{@render rows({ item })}
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+	<div class="mt-5 flex items-center justify-between space-x-2">
+		<div class="flex items-center space-x-2">
+			<p class="text-sm font-medium">Items per page</p>
+			<Select.Root
+				selected={{
+					label: items.pagination.itemsPerPage.toString(),
+					value: items.pagination.itemsPerPage
+				}}
+				onSelectedChange={(v) => onPageSizeChange(v?.value as number)}
+			>
+				<Select.Trigger class="h-9 w-[80px]">
+					<Select.Value>{items.pagination.itemsPerPage}</Select.Value>
+				</Select.Trigger>
+				<Select.Content>
+					{#each availablePageSizes as size}
+						<Select.Item value={size}>{size}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</div>
+		<Pagination.Root
+			class="mx-0 w-auto"
+			count={items.pagination.totalItems}
+			perPage={items.pagination.itemsPerPage}
+			{onPageChange}
+			page={items.pagination.currentPage}
+			let:pages
+		>
+			<Pagination.Content class="flex justify-end">
+				<Pagination.Item>
+					<Pagination.PrevButton />
+				</Pagination.Item>
+				{#each pages as page (page.key)}
+					{#if page.type !== 'ellipsis'}
+						<Pagination.Item>
+							<Pagination.Link {page} isActive={items.pagination.currentPage === page.value}>
+								{page.value}
+							</Pagination.Link>
+						</Pagination.Item>
+					{/if}
+				{/each}
+				<Pagination.Item>
+					<Pagination.NextButton />
+				</Pagination.Item>
+			</Pagination.Content>
+		</Pagination.Root>
+	</div>
+</div>
--- a/frontend/src/lib/components/copy-to-clipboard.svelte
+++ b/frontend/src/lib/components/copy-to-clipboard.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { LucideCheck } from 'lucide-svelte';
+	import type { Snippet } from 'svelte';
+
+	let { value, children }: { value: string; children: Snippet } = $props();
+
+	let open = $state(false);
+	let copied = $state(false);
+
+	function onClick() {
+		open = true;
+		copyToClipboard();
+	}
+
+	function onOpenChange(state: boolean) {
+		open = state;
+		if (!state) {
+			copied = false;
+		}
+	}
+
+	function copyToClipboard() {
+		navigator.clipboard.writeText(value);
+		copied = true;
+		setTimeout(() => onOpenChange(false), 1000);
+	}
+</script>
+
+<button onclick={onClick}>
+	<Tooltip.Root closeOnPointerDown={false} {onOpenChange} {open}>
+		<Tooltip.Trigger>{@render children()}</Tooltip.Trigger>
+		<Tooltip.Content onclick={copyToClipboard}>
+			{#if copied}
+				<span class="flex items-center"><LucideCheck class="mr-1 h-4 w-4" /> Copied</span>
+			{:else}
+				<span>Click to copy</span>
+			{/if}
+		</Tooltip.Content>
+	</Tooltip.Root>
+</button>
--- a/frontend/src/lib/components/form-input.svelte
+++ b/frontend/src/lib/components/form-input.svelte
@@ -3,18 +3,24 @@
 	import type { FormInput } from '$lib/utils/form-util';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { Input } from './ui/input';
+	import { Input, type FormInputEvent } from './ui/input';

 	let {
 		input = $bindable(),
 		label,
 		description,
+		disabled = false,
+		type = 'text',
 		children,
+		onInput,
 		...restProps
 	}: HTMLAttributes<HTMLDivElement> & {
 		input?: FormInput<string | boolean | number>;
 		label: string;
 		description?: string;
+		disabled?: boolean;
+		type?: 'text' | 'password' | 'email' | 'number' | 'checkbox';
+		onInput?: (e: FormInputEvent) => void;
 		children?: Snippet;
 	} = $props();

@@ -30,7 +36,7 @@
 		{#if children}
 			{@render children()}
 		{:else if input}
-			<Input {id} bind:value={input.value} />
+			<Input {id} {type} bind:value={input.value} {disabled} on:input={(e) => onInput?.(e)} />
 		{/if}
 		{#if input?.error}
 			<p class="mt-1 text-sm text-red-500">{input.error}</p>
--- a/frontend/src/lib/components/header/header-avatar.svelte
+++ b/frontend/src/lib/components/header/header-avatar.svelte
@@ -3,6 +3,7 @@
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
 	import WebAuthnService from '$lib/services/webauthn-service';
 	import userStore from '$lib/stores/user-store';
+	import { createSHA256hash } from '$lib/utils/crypto-util';
 	import { LucideLogOut, LucideUser } from 'lucide-svelte';

 	const webauthnService = new WebAuthnService();
@@ -11,6 +12,13 @@
 		($userStore!.firstName.charAt(0) + $userStore!.lastName?.charAt(0)).toUpperCase()
 	);

+	let gravatarURL: string | undefined = $state();
+	if ($userStore) {
+		createSHA256hash($userStore.email).then((email) => {
+			gravatarURL = `https://www.gravatar.com/avatar/${email}?d=404`;
+		});
+	}
+
 	async function logout() {
 		await webauthnService.logout();
 		window.location.reload();
@@ -19,7 +27,8 @@

 <DropdownMenu.Root>
 	<DropdownMenu.Trigger
-		><Avatar.Root>
+		><Avatar.Root class="h-9 w-9">
+			<Avatar.Image src={gravatarURL} />
 			<Avatar.Fallback>{initials}</Avatar.Fallback>
 		</Avatar.Root></DropdownMenu.Trigger
 	>
--- a/frontend/src/lib/components/header/header.svelte
+++ b/frontend/src/lib/components/header/header.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import applicationConfigurationStore from '$lib/stores/application-configuration-store';
+	import appConfigStore from '$lib/stores/application-configuration-store';
 	import userStore from '$lib/stores/user-store';
 	import Logo from '../logo.svelte';
 	import HeaderAvatar from './header-avatar.svelte';
@@ -12,12 +12,16 @@
 </script>

 <div class=" w-full {isAuthPage ? 'absolute top-0 z-10 mt-4' : 'border-b'}">
-	<div class="mx-auto flex w-full max-w-[1640px] items-center justify-between px-4 md:px-10">
+	<div
+		class="{!isAuthPage
+			? 'max-w-[1640px]'
+			: ''} mx-auto flex w-full items-center justify-between px-4 md:px-10"
+	>
 		<div class="flex h-16 items-center">
 			{#if !isAuthPage}
 				<Logo class="mr-3 h-10 w-10" />
 				<h1 class="text-lg font-medium" data-testid="application-name">
-					{$applicationConfigurationStore.appName}
+					{$appConfigStore.appName}
 				</h1>
 			{/if}
 		</div>
--- a/frontend/src/lib/components/logo.svelte
+++ b/frontend/src/lib/components/logo.svelte
@@ -1 +1,10 @@
-<img class={$$restProps.class} src="/api/application-configuration/logo" alt="Logo" />
+<script lang="ts">
+	import { mode } from 'mode-watcher';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { ...props }: HTMLAttributes<HTMLImageElement> = $props();
+
+	const isDarkMode = $derived($mode === 'dark');
+</script>
+
+<img {...props} src="/api/application-configuration/logo?light={!isDarkMode}" alt="Logo" />
--- a/frontend/src/lib/components/ui/select/index.ts
+++ b/frontend/src/lib/components/ui/select/index.ts
@@ -0,0 +1,34 @@
+import { Select as SelectPrimitive } from "bits-ui";
+
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+const Input = SelectPrimitive.Input;
+const Value = SelectPrimitive.Value;
+
+export {
+	Root,
+	Group,
+	Input,
+	Label,
+	Item,
+	Value,
+	Content,
+	Trigger,
+	Separator,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Input as SelectInput,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Value as SelectValue,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+};
--- a/frontend/src/lib/components/ui/select/select-content.svelte
+++ b/frontend/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { scale } from "svelte/transition";
+	import { cn, flyAndScale } from "$lib/utils/style.js";
+
+	type $$Props = SelectPrimitive.ContentProps;
+	type $$Events = SelectPrimitive.ContentEvents;
+
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let inTransition: $$Props["inTransition"] = flyAndScale;
+	export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
+	export let outTransition: $$Props["outTransition"] = scale;
+	export let outTransitionConfig: $$Props["outTransitionConfig"] = {
+		start: 0.95,
+		opacity: 0,
+		duration: 50,
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Content
+	{inTransition}
+	{inTransitionConfig}
+	{outTransition}
+	{outTransitionConfig}
+	{sideOffset}
+	class={cn(
+		"bg-popover text-popover-foreground relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md outline-none",
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<div class="w-full p-1">
+		<slot />
+	</div>
+</SelectPrimitive.Content>
--- a/frontend/src/lib/components/ui/select/select-item.svelte
+++ b/frontend/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import Check from "lucide-svelte/icons/check";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = SelectPrimitive.ItemProps;
+	type $$Events = SelectPrimitive.ItemEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export let label: $$Props["label"] = undefined;
+	export let disabled: $$Props["disabled"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Item
+	{value}
+	{disabled}
+	{label}
+	class={cn(
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<SelectPrimitive.ItemIndicator>
+			<Check class="h-4 w-4" />
+		</SelectPrimitive.ItemIndicator>
+	</span>
+	<slot>
+		{label || value}
+	</slot>
+</SelectPrimitive.Item>
--- a/frontend/src/lib/components/ui/select/select-label.svelte
+++ b/frontend/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = SelectPrimitive.LabelProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Label
+	class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+	{...$$restProps}
+>
+	<slot />
+</SelectPrimitive.Label>
--- a/frontend/src/lib/components/ui/select/select-separator.svelte
+++ b/frontend/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = SelectPrimitive.SeparatorProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Separator class={cn("bg-muted -mx-1 my-1 h-px", className)} {...$$restProps} />
--- a/frontend/src/lib/components/ui/select/select-trigger.svelte
+++ b/frontend/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import { cn } from "$lib/utils/style.js";
+
+	type $$Props = SelectPrimitive.TriggerProps;
+	type $$Events = SelectPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<SelectPrimitive.Trigger
+	class={cn(
+		"border-input bg-background ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		className
+	)}
+	{...$$restProps}
+	let:builder
+	on:click
+	on:keydown
+>
+	<slot {builder} />
+	<div>
+		<ChevronDown class="h-4 w-4 opacity-50" />
+	</div>
+</SelectPrimitive.Trigger>
--- a/frontend/src/lib/components/ui/table/table-row.svelte
+++ b/frontend/src/lib/components/ui/table/table-row.svelte
@@ -12,7 +12,7 @@

 <tr
 	class={cn(
-		"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+		"border-b transition-colors data-[state=selected]:bg-muted",
 		className
 	)}
 	{...$$restProps}
--- a/frontend/src/lib/components/ui/tooltip/index.ts
+++ b/frontend/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,15 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Trigger = TooltipPrimitive.Trigger;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+};
--- a/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn, flyAndScale } from "$lib/utils/style.js";
+
+	type $$Props = TooltipPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let sideOffset: $$Props["sideOffset"] = 4;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		y: 8,
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<TooltipPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		"bg-popover text-popover-foreground z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</TooltipPrimitive.Content>
--- a/frontend/src/lib/services/api-service.ts
+++ b/frontend/src/lib/services/api-service.ts
@@ -13,7 +13,7 @@ abstract class APIService {
 		if (browser) {
 			this.api.defaults.baseURL = '/api';
 		} else {
-			this.api.defaults.baseURL = process?.env?.INTERNAL_BACKEND_URL + '/api';
+			this.api.defaults.baseURL = process!.env!.INTERNAL_BACKEND_URL + '/api';
 		}
 	}
 }
--- a/frontend/src/lib/services/application-configuration-service.ts
+++ b/frontend/src/lib/services/application-configuration-service.ts
@@ -1,29 +1,26 @@
-import type {
-	AllApplicationConfiguration,
-	ApplicationConfigurationRawResponse
-} from '$lib/types/application-configuration';
+import type { AllAppConfig, AppConfigRawResponse } from '$lib/types/application-configuration';
 import APIService from './api-service';

-export default class ApplicationConfigurationService extends APIService {
+export default class AppConfigService extends APIService {
 	async list(showAll = false) {
 		let url = '/application-configuration';
 		if (showAll) {
 			url += '/all';
 		}

-		const { data } = await this.api.get<ApplicationConfigurationRawResponse>(url);
+		const { data } = await this.api.get<AppConfigRawResponse>(url);

-		const applicationConfiguration: Partial<AllApplicationConfiguration> = {};
+		const appConfig: Partial<AllAppConfig> = {};
 		data.forEach(({ key, value }) => {
-			(applicationConfiguration as any)[key] = value;
+			(appConfig as any)[key] = value;
 		});

-		return applicationConfiguration as AllApplicationConfiguration;
+		return appConfig as AllAppConfig;
 	}

-	async update(applicationConfiguration: AllApplicationConfiguration) {
-		const res = await this.api.put('/application-configuration', applicationConfiguration);
-		return res.data as AllApplicationConfiguration;
+	async update(appConfig: AllAppConfig) {
+		const res = await this.api.put('/application-configuration', appConfig);
+		return res.data as AllAppConfig;
 	}

 	async updateFavicon(favicon: File) {
@@ -33,11 +30,13 @@ export default class ApplicationConfigurationService extends APIService {
 		await this.api.put(`/application-configuration/favicon`, formData);
 	}

-	async updateLogo(logo: File) {
+	async updateLogo(logo: File, light = true) {
 		const formData = new FormData();
 		formData.append('file', logo!);

-		await this.api.put(`/application-configuration/logo`, formData);
+		await this.api.put(`/application-configuration/logo`, formData, {
+			params: { light }
+		});
 	}

 	async updateBackgroundImage(backgroundImage: File) {
--- a/frontend/src/lib/services/audit-log-service.ts
+++ b/frontend/src/lib/services/audit-log-service.ts
@@ -0,0 +1,14 @@
+import type { AuditLog } from '$lib/types/audit-log.type';
+import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
+import APIService from './api-service';
+
+class AuditLogService extends APIService {
+	async list(pagination?: PaginationRequest) {
+		const res = await this.api.get('/audit-logs', {
+			params: pagination
+		});
+		return res.data as Paginated<AuditLog>;
+	}
+}
+
+export default AuditLogService;
--- a/frontend/src/lib/services/oidc-service.ts
+++ b/frontend/src/lib/services/oidc-service.ts
@@ -3,7 +3,7 @@ import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
 import APIService from './api-service';

 class OidcService extends APIService {
-	async authorize(clientId: string, scope: string, callbackURL : string, nonce?: string) {
+	async authorize(clientId: string, scope: string, callbackURL: string, nonce?: string) {
 		const res = await this.api.post('/oidc/authorize', {
 			scope,
 			nonce,
@@ -26,14 +26,10 @@ class OidcService extends APIService {
 	}

 	async listClients(search?: string, pagination?: PaginationRequest) {
-		const page = pagination?.page || 1;
-		const limit = pagination?.limit || 10;
-
 		const res = await this.api.get('/oidc/clients', {
 			params: {
 				search,
-				page,
-				limit
+				...pagination
 			}
 		});
 		return res.data as Paginated<OidcClient>;
--- a/frontend/src/lib/services/user-group-service.ts
+++ b/frontend/src/lib/services/user-group-service.ts
@@ -0,0 +1,43 @@
+import type { Paginated, PaginationRequest } from '$lib/types/pagination.type';
+import type {
+	UserGroupCreate,
+	UserGroupWithUserCount,
+	UserGroupWithUsers
+} from '$lib/types/user-group.type';
+import APIService from './api-service';
+
+export default class UserGroupService extends APIService {
+	async list(search?: string, pagination?: PaginationRequest) {
+		const res = await this.api.get('/user-groups', {
+			params: {
+				search,
+				...pagination
+			}
+		});
+		return res.data as Paginated<UserGroupWithUserCount>;
+	}
+
+	async get(id: string) {
+		const res = await this.api.get(`/user-groups/${id}`);
+		return res.data as UserGroupWithUsers;
+	}
+
+	async create(user: UserGroupCreate) {
+		const res = await this.api.post('/user-groups', user);
+		return res.data as UserGroupWithUsers;
+	}
+
+	async update(id: string, user: UserGroupCreate) {
+		const res = await this.api.put(`/user-groups/${id}`, user);
+		return res.data as UserGroupWithUsers;
+	}
+
+	async remove(id: string) {
+		await this.api.delete(`/user-groups/${id}`);
+	}
+
+	async updateUsers(id: string, userIds: string[]) {
+		const res = await this.api.put(`/user-groups/${id}/users`, { userIds });
+		return res.data as UserGroupWithUsers;
+	}
+}
--- a/frontend/src/lib/services/user-service.ts
+++ b/frontend/src/lib/services/user-service.ts
@@ -4,14 +4,10 @@ import APIService from './api-service';

 export default class UserService extends APIService {
 	async list(search?: string, pagination?: PaginationRequest) {
-		const page = pagination?.page || 1;
-		const limit = pagination?.limit || 10;
-
 		const res = await this.api.get('/users', {
 			params: {
 				search,
-				page,
-				limit
+				...pagination
 			}
 		});
 		return res.data as Paginated<User>;
--- a/frontend/src/lib/stores/application-configuration-store.ts
+++ b/frontend/src/lib/stores/application-configuration-store.ts
@@ -1,22 +1,22 @@
-import ApplicationConfigurationService from '$lib/services/application-configuration-service';
-import type { ApplicationConfiguration } from '$lib/types/application-configuration';
+import AppConfigService from '$lib/services/app-config-service';
+import type { AppConfig } from '$lib/types/application-configuration';
 import { writable } from 'svelte/store';

-const applicationConfigurationStore = writable<ApplicationConfiguration>();
+const appConfigStore = writable<AppConfig>();

-const applicationConfigurationService = new ApplicationConfigurationService();
+const appConfigService = new AppConfigService();

 const reload = async () => {
-	const applicationConfiguration = await applicationConfigurationService.list();
-	applicationConfigurationStore.set(applicationConfiguration);
+	const appConfig = await appConfigService.list();
+	appConfigStore.set(appConfig);
 };

-const set = (applicationConfiguration: ApplicationConfiguration) => {
-	applicationConfigurationStore.set(applicationConfiguration);
-}
+const set = (appConfig: AppConfig) => {
+	appConfigStore.set(appConfig);
+};

 export default {
-	subscribe: applicationConfigurationStore.subscribe,
+	subscribe: appConfigStore.subscribe,
 	reload,
 	set
 };
--- a/frontend/src/lib/types/application-configuration.ts
+++ b/frontend/src/lib/types/application-configuration.ts
@@ -1,13 +1,18 @@
-
-export type AllApplicationConfiguration = {
+export type AllAppConfig = {
 	appName: string;
-    sessionDuration: string;
+	sessionDuration: string;
+	emailEnabled: string;
+	smtpHost: string;
+	smtpPort: string;
+	smtpFrom: string;
+	smtpUser: string;
+	smtpPassword: string;
 };

-export type ApplicationConfiguration = AllApplicationConfiguration;
+export type AppConfig = AllAppConfig;

-export type ApplicationConfigurationRawResponse = {
+export type AppConfigRawResponse = {
 	key: string;
-    type: string;
-    value: string;
-}[];
+	type: string;
+	value: string;
+}[];
--- a/frontend/src/lib/types/audit-log.type.ts
+++ b/frontend/src/lib/types/audit-log.type.ts
@@ -0,0 +1,10 @@
+export type AuditLog = {
+	id: string;
+	event: string;
+	ipAddress: string;
+	country?: string;
+	city?: string;
+	device: string;
+	createdAt: string;
+	data: any;
+};
--- a/frontend/src/lib/types/pagination.type.ts
+++ b/frontend/src/lib/types/pagination.type.ts
@@ -7,6 +7,7 @@ export type PaginationResponse = {
 	totalPages: number;
 	totalItems: number;
 	currentPage: number;
+	itemsPerPage: number;
 };

 export type Paginated<T> = {
--- a/frontend/src/lib/types/user-group.type.ts
+++ b/frontend/src/lib/types/user-group.type.ts
@@ -0,0 +1,18 @@
+import type { User } from './user.type';
+
+export type UserGroup = {
+	id: string;
+	friendlyName: string;
+	name: string;
+	createdAt: string;
+};
+
+export type UserGroupWithUsers = UserGroup & {
+	users: User[];
+};
+
+export type UserGroupWithUserCount = UserGroup & {
+	userCount: number;
+};
+
+export type UserGroupCreate = Pick<UserGroup, 'friendlyName' | 'name'>;
--- a/frontend/src/lib/utils/crypto-util.ts
+++ b/frontend/src/lib/utils/crypto-util.ts
@@ -0,0 +1,7 @@
+export async function createSHA256hash(input: string) {
+	const msgUint8 = new TextEncoder().encode(input); // encode as (utf-8) Uint8Array
+	const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8); // hash the message
+	const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
+	const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
+	return hashHex;
+}
--- a/frontend/src/routes/+layout.server.ts
+++ b/frontend/src/routes/+layout.server.ts
@@ -1,19 +1,17 @@
-import ApplicationConfigurationService from '$lib/services/application-configuration-service';
+import AppConfigService from '$lib/services/app-config-service';
 import UserService from '$lib/services/user-service';
 import type { LayoutServerLoad } from './$types';

 export const load: LayoutServerLoad = async ({ cookies }) => {
 	const userService = new UserService(cookies.get('access_token'));
-	const applicationConfigurationService = new ApplicationConfigurationService(
-		cookies.get('access_token')
-	);
+	const appConfigService = new AppConfigService(cookies.get('access_token'));

 	const user = await userService
 		.getCurrent()
 		.then((user) => user)
 		.catch(() => null);

-	const applicationConfiguration = await applicationConfigurationService
+	const appConfig = await appConfigService
 		.list()
 		.then((config) => config)
 		.catch((e) => {
@@ -24,6 +22,6 @@ export const load: LayoutServerLoad = async ({ cookies }) => {
 		});
 	return {
 		user,
-		applicationConfiguration
+		appConfig
 	};
 };
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -4,7 +4,7 @@
 	import Error from '$lib/components/error.svelte';
 	import Header from '$lib/components/header/header.svelte';
 	import { Toaster } from '$lib/components/ui/sonner';
-	import applicationConfigurationStore from '$lib/stores/application-configuration-store';
+	import appConfigStore from '$lib/stores/application-configuration-store';
 	import userStore from '$lib/stores/user-store';
 	import { ModeWatcher } from 'mode-watcher';
 	import type { Snippet } from 'svelte';
@@ -19,17 +19,17 @@
 		children: Snippet;
 	} = $props();

-	const { user, applicationConfiguration } = data;
+	const { user, appConfig } = data;

 	if (browser && user) {
 		userStore.setUser(user);
 	}
-	if (applicationConfiguration) {
-		applicationConfigurationStore.set(applicationConfiguration);
+	if (appConfig) {
+		appConfigStore.set(appConfig);
 	}
 </script>

-{#if !applicationConfiguration}
+{#if !appConfig}
 	<Error
 		message="A critical error occured. Please contact your administrator."
 		showButton={false}
--- a/frontend/src/routes/authorize/+page.svelte
+++ b/frontend/src/routes/authorize/+page.svelte
@@ -4,12 +4,12 @@
 	import * as Card from '$lib/components/ui/card';
 	import OidcService from '$lib/services/oidc-service';
 	import WebAuthnService from '$lib/services/webauthn-service';
-	import applicationConfigurationStore from '$lib/stores/application-configuration-store';
+	import appConfigStore from '$lib/stores/application-configuration-store';
 	import userStore from '$lib/stores/user-store';
 	import { getWebauthnErrorMessage } from '$lib/utils/error-util';
 	import { startAuthentication } from '@simplewebauthn/browser';
 	import { AxiosError } from 'axios';
-	import { LucideMail, LucideUser } from 'lucide-svelte';
+	import { LucideMail, LucideUser, LucideUsers } from 'lucide-svelte';
 	import { slide } from 'svelte/transition';
 	import type { PageData } from './$types';
 	import ClientProviderImages from './components/client-provider-images.svelte';
@@ -91,7 +91,7 @@
 		{#if !authorizationRequired && !errorMessage}
 			<p class="text-muted-foreground mb-10 mt-2">
 				Do you want to sign in to <b>{client.name}</b> with your
-				<b>{$applicationConfigurationStore.appName}</b> account?
+				<b>{$appConfigStore.appName}</b> account?
 			</p>
 		{:else if authorizationRequired}
 			<div transition:slide={{ duration: 300 }}>
@@ -113,6 +113,13 @@
 									description="View your profile information"
 								/>
 							{/if}
+							{#if scope!.includes('groups')}
+								<ScopeItem
+									icon={LucideUsers}
+									name="Groups"
+									description="View the groups you are a member of"
+								/>
+							{/if}
 						</div>
 					</Card.Content>
 				</Card.Root>
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -4,7 +4,7 @@
 	import Logo from '$lib/components/logo.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import WebAuthnService from '$lib/services/webauthn-service';
-	import applicationConfigurationStore from '$lib/stores/application-configuration-store';
+	import appConfigStore from '$lib/stores/application-configuration-store';
 	import userStore from '$lib/stores/user-store';
 	import { getWebauthnErrorMessage } from '$lib/utils/error-util';
 	import { startAuthentication } from '@simplewebauthn/browser';
@@ -40,7 +40,7 @@
 		</div>
 	</div>
 	<h1 class="font-playfair mt-5 text-3xl font-bold sm:text-4xl">
-		Sign in to {$applicationConfigurationStore.appName}
+		Sign in to {$appConfigStore.appName}
 	</h1>
 	<p class="text-muted-foreground mt-2">
 		Authenticate yourself with your passkey to access the admin panel
--- a/frontend/src/routes/login/[token]/+page.svelte
+++ b/frontend/src/routes/login/[token]/+page.svelte
@@ -4,7 +4,7 @@
 	import Logo from '$lib/components/logo.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import UserService from '$lib/services/user-service';
-	import applicationConfigurationStore from '$lib/stores/application-configuration-store.js';
+	import appConfigStore from '$lib/stores/application-configuration-store.js';
 	import userStore from '$lib/stores/user-store.js';
 	import type { User } from '$lib/types/user.type.js';
 	import { axiosErrorToast } from '$lib/utils/error-util';
@@ -18,9 +18,9 @@
 		isLoading = true;
 		userService
 			.exchangeOneTimeAccessToken(data.token)
-			.then((user :User) => {
+			.then((user: User) => {
 				userStore.setUser(user);
-				goto('/settings')
+				goto('/settings');
 			})
 			.catch(axiosErrorToast);
 		isLoading = false;
@@ -29,15 +29,15 @@

 <SignInWrapper>
 	<div class="flex justify-center">
-		<div class="rounded-2xl bg-muted p-3">
+		<div class="bg-muted rounded-2xl p-3">
 			<Logo class="h-10 w-10" />
 		</div>
 	</div>
-	<h1 class="mt-5 font-playfair text-4xl font-bold">One Time Access</h1>
-	<p class="mt-2 text-muted-foreground">
-		You've been granted one-time access to your {$applicationConfigurationStore.appName} account. Please note that if you continue,
-		this link will become invalid. To avoid this, make sure to add a passkey. Otherwise, you'll need
-		to request a new link.
+	<h1 class="font-playfair mt-5 text-4xl font-bold">One Time Access</h1>
+	<p class="text-muted-foreground mt-2">
+		You've been granted one-time access to your {$appConfigStore.appName} account. Please note that if
+		you continue, this link will become invalid. To avoid this, make sure to add a passkey. Otherwise,
+		you'll need to request a new link.
 	</p>
 	<Button class="mt-5" {isLoading} on:click={authenticate}>Continue</Button>
 </SignInWrapper>
--- a/frontend/src/routes/settings/+layout.svelte
+++ b/frontend/src/routes/settings/+layout.svelte
@@ -9,12 +9,16 @@
 		children: Snippet;
 	} = $props();

-	let links = $state([{ href: '/settings/account', label: 'My Account' }]);
+	let links = $state([
+		{ href: '/settings/account', label: 'My Account' },
+		{ href: '/settings/audit-log', label: 'Audit Log' }
+	]);

 	if ($userStore?.isAdmin) {
 		links = [
 			...links,
 			{ href: '/settings/admin/users', label: 'Users' },
+			{ href: '/settings/admin/user-groups', label: 'User Groups' },
 			{ href: '/settings/admin/oidc-clients', label: 'OIDC Clients' },
 			{ href: '/settings/admin/application-configuration', label: 'Application Configuration' }
 		];
@@ -22,10 +26,8 @@
 </script>

 <section>
-	<div class="bg-muted/40 h-screen w-full">
-		<main
-			class="mx-auto flex min-h-screen max-w-[1640px] flex-col gap-x-4 gap-y-10 p-4 md:p-10 lg:flex-row"
-		>
+	<div class="bg-muted/40 min-h-screen w-full">
+		<main class="mx-auto flex max-w-[1640px] flex-col gap-x-4 gap-y-10 p-4 md:p-10 lg:flex-row">
 			<div>
 				<div class="mx-auto grid w-full gap-2">
 					<h1 class="mb-5 text-3xl font-semibold">Settings</h1>
--- a/frontend/src/routes/settings/account/account-form.svelte
+++ b/frontend/src/routes/settings/account/account-form.svelte
@@ -38,10 +38,10 @@
 <form onsubmit={onSubmit}>
 	<div class="flex flex-col gap-3 sm:flex-row">
 		<div class="w-full">
-			<FormInput label="Firstname" bind:input={$inputs.firstName} />
+			<FormInput label="First name" bind:input={$inputs.firstName} />
 		</div>
 		<div class="w-full">
-			<FormInput label="Lastname" bind:input={$inputs.lastName} />
+			<FormInput label="Last name" bind:input={$inputs.lastName} />
 		</div>
 	</div>
 	<div class="mt-3 flex flex-col gap-3 sm:flex-row">
--- a/frontend/src/routes/settings/admin/application-configuration/+page.server.ts
+++ b/frontend/src/routes/settings/admin/application-configuration/+page.server.ts
@@ -1,10 +1,8 @@
-import ApplicationConfigurationService from '$lib/services/application-configuration-service';
+import AppConfigService from '$lib/services/app-config-service';
 import type { PageServerLoad } from './$types';

 export const load: PageServerLoad = async ({ cookies }) => {
-	const applicationConfigurationService = new ApplicationConfigurationService(
-		cookies.get('access_token')
-	);
-	const applicationConfiguration = await applicationConfigurationService.list(true);
-	return { applicationConfiguration };
+	const appConfigService = new AppConfigService(cookies.get('access_token'));
+	const appConfig = await appConfigService.list(true);
+	return { appConfig };
 };
--- a/frontend/src/routes/settings/admin/application-configuration/+page.svelte
+++ b/frontend/src/routes/settings/admin/application-configuration/+page.svelte
@@ -1,40 +1,46 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
-	import ApplicationConfigurationService from '$lib/services/application-configuration-service';
-	import applicationConfigurationStore from '$lib/stores/application-configuration-store';
-	import type { AllApplicationConfiguration } from '$lib/types/application-configuration';
+	import AppConfigService from '$lib/services/app-config-service';
+	import appConfigStore from '$lib/stores/application-configuration-store';
+	import type { AllAppConfig } from '$lib/types/application-configuration';
 	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { toast } from 'svelte-sonner';
-	import ApplicationConfigurationForm from './application-configuration-form.svelte';
+	import AppConfigEmailForm from './forms/app-config-email-form.svelte';
+	import AppConfigGeneralForm from './forms/app-config-general-form.svelte';
 	import UpdateApplicationImages from './update-application-images.svelte';

 	let { data } = $props();
-	let applicationConfiguration = $state(data.applicationConfiguration);
+	let appConfig = $state(data.appConfig);

-	const applicationConfigurationService = new ApplicationConfigurationService();
+	const appConfigService = new AppConfigService();

-	async function updateConfiguration(configuration: AllApplicationConfiguration) {
-		await applicationConfigurationService
-			.update(configuration)
-			.then(() => toast.success('Application configuration updated successfully'))
-			.catch(axiosErrorToast);
-		await applicationConfigurationStore.reload();
+	async function updateAppConfig(updatedAppConfig: Partial<AllAppConfig>) {
+		await appConfigService
+			.update({
+				...appConfig,
+				...updatedAppConfig
+			})
+			.catch((e) => {
+				axiosErrorToast(e);
+				throw e;
+			});
+		await appConfigStore.reload();
 	}

 	async function updateImages(
-		logo: File | null,
+		logoLight: File | null,
+		logoDark: File | null,
 		backgroundImage: File | null,
 		favicon: File | null
 	) {
-		const faviconPromise = favicon
-			? applicationConfigurationService.updateFavicon(favicon)
-			: Promise.resolve();
-		const logoPromise = logo ? applicationConfigurationService.updateLogo(logo) : Promise.resolve();
+		const faviconPromise = favicon ? appConfigService.updateFavicon(favicon) : Promise.resolve();
+		const lightLogoPromise = logoLight ? appConfigService.updateLogo(logoLight, true) : Promise.resolve();
+		const darkLogoPromise = logoDark ? appConfigService.updateLogo(logoDark, false) : Promise.resolve();
 		const backgroundImagePromise = backgroundImage
-			? applicationConfigurationService.updateBackgroundImage(backgroundImage)
+			? appConfigService.updateBackgroundImage(backgroundImage)
 			: Promise.resolve();

-		await Promise.all([logoPromise, backgroundImagePromise, faviconPromise])
+		await Promise.all([lightLogoPromise, darkLogoPromise, backgroundImagePromise, faviconPromise])
 			.then(() => toast.success('Images updated successfully'))
 			.catch(axiosErrorToast);
 	}
@@ -49,7 +55,20 @@
 		<Card.Title>General</Card.Title>
 	</Card.Header>
 	<Card.Content>
-		<ApplicationConfigurationForm {applicationConfiguration} callback={updateConfiguration} />
+		<AppConfigGeneralForm {appConfig} callback={updateAppConfig} />
+	</Card.Content>
+</Card.Root>
+
+<Card.Root>
+	<Card.Header>
+		<Card.Title>Email</Card.Title>
+		<Card.Description>
+			Enable email notifications to alert users when a login is detected from a new device or
+			location.
+		</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<AppConfigEmailForm {appConfig} callback={updateAppConfig} />
 	</Card.Content>
 </Card.Root>

--- a/frontend/src/routes/settings/admin/application-configuration/application-image.svelte
+++ b/frontend/src/routes/settings/admin/application-configuration/application-image.svelte
@@ -8,9 +8,10 @@
 		id,
 		imageClass,
 		label,
-		image = $bindable<File | null>(null),
+		image = $bindable(),
 		imageURL,
 		accept = 'image/png, image/jpeg, image/svg+xml',
+		forceColorScheme,
 		...restProps
 	}: HTMLAttributes<HTMLDivElement> & {
 		id: string;
@@ -18,6 +19,7 @@
 		label: string;
 		image: File | null;
 		imageURL: string;
+		forceColorScheme?: 'light' | 'dark';
 		accept?: string;
 	} = $props();

@@ -37,10 +39,16 @@
 	}
 </script>

-<div {...restProps}>
-	<Label for={id}>{label}</Label>
+<div class="flex flex-col items-start md:flex-row md:items-center" {...restProps}>
+	<Label class="w-52" for={id}>{label}</Label>
 	<FileInput {id} variant="secondary" {accept} onchange={onImageChange}>
-		<div class="bg-muted group relative flex items-center rounded">
+		<div
+			class="{forceColorScheme === 'light'
+				? 'bg-[#F1F1F5]'
+				: forceColorScheme === 'dark'
+					? 'bg-[#27272A]'
+					: 'bg-muted'} group relative flex items-center rounded"
+		>
 			<img
 				class={cn(
 					'h-full w-full rounded object-cover p-3 transition-opacity duration-200 group-hover:opacity-10',
--- a/frontend/src/routes/settings/admin/application-configuration/forms/app-config-email-form.svelte
+++ b/frontend/src/routes/settings/admin/application-configuration/forms/app-config-email-form.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import FormInput from '$lib/components/form-input.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import type { AllAppConfig } from '$lib/types/application-configuration';
+	import { createForm } from '$lib/utils/form-util';
+	import { toast } from 'svelte-sonner';
+	import { z } from 'zod';
+
+	let {
+		callback,
+		appConfig
+	}: {
+		appConfig: AllAppConfig;
+		callback: (appConfig: Partial<AllAppConfig>) => Promise<void>;
+	} = $props();
+
+	let isLoading = $state(false);
+	let emailEnabled = $state(appConfig.emailEnabled == 'true');
+
+	const updatedAppConfig = {
+		emailEnabled: emailEnabled.toString(),
+		smtpHost: appConfig.smtpHost,
+		smtpPort: appConfig.smtpPort,
+		smtpUser: appConfig.smtpUser,
+		smtpPassword: appConfig.smtpPassword,
+		smtpFrom: appConfig.smtpFrom
+	};
+
+	const formSchema = z.object({
+		smtpHost: z.string().min(1),
+		smtpPort: z.string().min(1),
+		smtpUser: z.string().min(1),
+		smtpPassword: z.string().min(1),
+		smtpFrom: z.string().email()
+	});
+
+	const { inputs, ...form } = createForm< typeof formSchema>(formSchema, updatedAppConfig);
+
+	async function onSubmit() {
+		const data = form.validate();
+		if (!data) return false;
+		isLoading = true;
+		await callback({
+			...data,
+			emailEnabled: 'true'
+		}).finally(() => (isLoading = false));
+		toast.success('Email configuration updated successfully');
+		return true;
+	}
+
+	async function onDisable() {
+		await callback({ emailEnabled: 'false' });
+		emailEnabled = false;
+		toast.success('Email disabled successfully');
+	}
+
+	async function onEnable() {
+		if (await onSubmit()) {
+			emailEnabled = true;
+		}
+	}
+</script>
+
+<form onsubmit={onSubmit}>
+	<div class="mt-5 grid grid-cols-2 gap-5">
+		<FormInput label="SMTP Host" bind:input={$inputs.smtpHost} />
+		<FormInput label="SMTP Port" bind:input={$inputs.smtpPort} />
+		<FormInput label="SMTP User" bind:input={$inputs.smtpUser} />
+		<FormInput label="SMTP Password" type="password" bind:input={$inputs.smtpPassword} />
+		<FormInput label="SMTP From" bind:input={$inputs.smtpFrom} />
+	</div>
+	<div class="mt-5 flex justify-end gap-3">
+		{#if emailEnabled}
+			<Button variant="secondary" onclick={onDisable}>Disable</Button>
+			<Button {isLoading} onclick={onSubmit} type="submit">Save</Button>
+		{:else}
+			<Button {isLoading} onclick={onEnable} type="submit">Enable</Button>
+		{/if}
+	</div>
+</form>
--- a/frontend/src/routes/settings/admin/application-configuration/application-configuration-form.svelte
+++ b/frontend/src/routes/settings/admin/application-configuration/application-configuration-form.svelte
@@ -1,23 +1,24 @@
 <script lang="ts">
 	import FormInput from '$lib/components/form-input.svelte';
 	import { Button } from '$lib/components/ui/button';
-	import type { AllApplicationConfiguration } from '$lib/types/application-configuration';
+	import type { AllAppConfig } from '$lib/types/application-configuration';
 	import { createForm } from '$lib/utils/form-util';
+	import { toast } from 'svelte-sonner';
 	import { z } from 'zod';

 	let {
 		callback,
-		applicationConfiguration
+		appConfig
 	}: {
-		applicationConfiguration: AllApplicationConfiguration;
-		callback: (user: AllApplicationConfiguration) => Promise<void>;
+		appConfig: AllAppConfig;
+		callback: (appConfig: Partial<AllAppConfig>) => Promise<void>;
 	} = $props();

 	let isLoading = $state(false);

-	const updatedApplicationConfiguration: AllApplicationConfiguration = {
-		appName: applicationConfiguration.appName,
-		sessionDuration: applicationConfiguration.sessionDuration
+	const updatedAppConfig = {
+		appName: appConfig.appName,
+		sessionDuration: appConfig.sessionDuration
 	};

 	const formSchema = z.object({
@@ -32,15 +33,14 @@
 			}
 		)
 	});
-	type FormSchema = typeof formSchema;

-	const { inputs, ...form } = createForm<FormSchema>(formSchema, updatedApplicationConfiguration);
+	const { inputs, ...form } = createForm<typeof formSchema>(formSchema, updatedAppConfig);
 	async function onSubmit() {
 		const data = form.validate();
 		if (!data) return;
 		isLoading = true;
-		await callback(data);
-		isLoading = false;
+		await callback(data).finally(() => (isLoading = false));
+		toast.success('Application configuration updated successfully');
 	}
 </script>

--- a/frontend/src/routes/settings/admin/application-configuration/update-application-images.svelte
+++ b/frontend/src/routes/settings/admin/application-configuration/update-application-images.svelte
@@ -5,15 +5,21 @@
 	let {
 		callback
 	}: {
-		callback: (logo: File | null, backgroundImage: File | null, favicon: File | null) => void;
+		callback: (
+			logoLight: File | null,
+			logoDark: File | null,
+			backgroundImage: File | null,
+			favicon: File | null
+		) => void;
 	} = $props();

-	let logo = $state<File | null>(null);
+	let logoLight = $state<File | null>(null);
+	let logoDark = $state<File | null>(null);
 	let backgroundImage = $state<File | null>(null);
 	let favicon = $state<File | null>(null);
 </script>

-<div class="application-images-grid">
+<div class="flex flex-col gap-8">
 	<ApplicationImage
 		id="favicon"
 		imageClass="h-14 w-14 p-2"
@@ -23,15 +29,23 @@
 		accept="image/x-icon"
 	/>
 	<ApplicationImage
-		id="logo"
+		id="logo-light"
 		imageClass="h-32 w-32"
-		label="Logo"
-		bind:image={logo}
-		imageURL="/api/application-configuration/logo"
+		label="Light Mode Logo"
+		bind:image={logoLight}
+		imageURL="/api/application-configuration/logo?light=true"
+		forceColorScheme="light"
+	/>
+	<ApplicationImage
+		id="logo-dark"
+		imageClass="h-32 w-32"
+		label="Dark Mode Logo"
+		bind:image={logoDark}
+		imageURL="/api/application-configuration/logo?light=false"
+		forceColorScheme="dark"
 	/>
 	<ApplicationImage
 		id="background-image"
-		class="basis-full lg:basis-auto"
 		imageClass="h-[350px] max-w-[500px]"
 		label="Background Image"
 		bind:image={backgroundImage}
@@ -39,5 +53,7 @@
 	/>
 </div>
 <div class="flex justify-end">
-	<Button class="mt-5" onclick={() => callback(logo, backgroundImage, favicon)}>Save</Button>
+	<Button class="mt-5" onclick={() => callback(logoLight, logoDark, backgroundImage, favicon)}
+		>Save</Button
+	>
 </div>
--- a/frontend/src/routes/settings/admin/oidc-clients/+page.svelte
+++ b/frontend/src/routes/settings/admin/oidc-clients/+page.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 	import OIDCService from '$lib/services/oidc-service';
+	import appConfigStore from '$lib/stores/application-configuration-store';
+	import clientSecretStore from '$lib/stores/client-secret-store';
 	import type { OidcClientCreateWithLogo } from '$lib/types/oidc.type';
+	import { axiosErrorToast } from '$lib/utils/error-util';
 	import { LucideMinus } from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import { slide } from 'svelte/transition';
 	import OIDCClientForm from './oidc-client-form.svelte';
 	import OIDCClientList from './oidc-client-list.svelte';
-	import { axiosErrorToast } from '$lib/utils/error-util';
-	import clientSecretStore from '$lib/stores/client-secret-store';
-	import { goto } from '$app/navigation';
-	import applicationConfigurationStore from '$lib/stores/application-configuration-store';

 	let { data } = $props();
 	let clients = $state(data);
@@ -22,7 +22,7 @@
 	async function createOIDCClient(client: OidcClientCreateWithLogo) {
 		try {
 			const createdClient = await oidcService.createClient(client);
-			if(client.logo){
+			if (client.logo) {
 				await oidcService.updateClientLogo(createdClient, client.logo);
 			}
 			const clientSecret = await oidcService.createClientSecret(createdClient.id);
@@ -31,7 +31,7 @@
 			toast.success('OIDC client created successfully');
 			return true;
 		} catch (e) {
-			axiosErrorToast(e)
+			axiosErrorToast(e);
 			return false;
 		}
 	}
@@ -46,7 +46,7 @@
 		<div class="flex items-center justify-between">
 			<div>
 				<Card.Title>Create OIDC Client</Card.Title>
-				<Card.Description>Add a new OIDC client to {$applicationConfigurationStore.appName}.</Card.Description>
+				<Card.Description>Add a new OIDC client to {$appConfigStore.appName}.</Card.Description>
 			</div>
 			{#if !expandAddClient}
 				<Button on:click={() => (expandAddClient = true)}>Add OIDC Client</Button>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Elias Schneider	d2b3b7647d	release: 0.8.0	2024-10-04 12:11:43 +02:00
Elias Schneider	025378d14e	feat: add location based on ip to the audit log	2024-10-04 12:11:10 +02:00
Elias Schneider	e033ba6d45	release: 0.7.1	2024-10-03 22:20:37 +02:00
Elias Schneider	e09562824a	fix: initials don't get displayed if Gravatar avatar doesn't exist	2024-10-03 22:20:22 +02:00
Elias Schneider	08f7fd16a9	release: 0.7.0	2024-10-03 11:31:11 +02:00
Elias Schneider	be45eed125	feat!: add ability to set light and dark mode logo	2024-10-03 11:27:31 +02:00
Elias Schneider	9e94a436cc	release: 0.6.0	2024-10-02 11:13:46 +02:00
Elias Schneider	f82020ccfb	feat: add copy to clipboard option for OIDC client information	2024-10-02 11:03:30 +02:00
Elias Schneider	a4a90a16a9	fix: only return user groups if it is explicitly requested	2024-10-02 10:41:10 +02:00
Elias Schneider	365734ec5d	feat: add gravatar profile picture integration	2024-10-02 10:02:28 +02:00
Elias Schneider	d02d8931a0	tests: add user group tests	2024-10-02 09:38:57 +02:00
Elias Schneider	24c948e6a6	feat: add user groups	2024-10-02 08:43:44 +02:00
Elias Schneider	7a54d3ae20	refactor: format caddyfiles	2024-09-27 11:10:33 +02:00
Elias Schneider	5e1d19e0a4	release: 0.5.3	2024-09-26 09:36:33 +02:00
edbourque0	d6a9bb4c09	fix: add space to "Firstname" and "Lastname" label (#31 ) Co-authored-by: Elias Schneider <login@eliasschneider.com>	2024-09-26 09:33:02 +02:00
Elias Schneider	3c67765992	fix: port environment variables get ignored in caddyfile	2024-09-26 09:08:59 +02:00
Elias Schneider	6bb613e0e7	chore: set the go version to `1.23.1`	2024-09-19 08:56:30 +02:00
Elias Schneider	7be115f7da	release: 0.5.2	2024-09-19 08:52:16 +02:00
Elias Schneider	924bb1468b	fix: updated application name doesn't apply to webauthn credential	2024-09-19 08:51:45 +02:00
Elias Schneider	4553458939	release: 0.5.1	2024-09-16 23:19:13 +02:00
Elias Schneider	9c2848db1d	fix: debounce oidc client and user search	2024-09-16 23:18:55 +02:00
oidq	64cf56276a	feat(email): improve email templating (#27 )	2024-09-16 23:10:08 +02:00
Elias Schneider	1f0ec08290	release: 0.5.0	2024-09-09 10:30:12 +02:00
Elias Schneider	9121239dd7	feat: add audit log with email notification (#26 )	2024-09-09 10:29:41 +02:00
@@ -1 +1 @@
 .4.1
 .8.0