diff --git a/assets/sass/framework.scss b/assets/sass/framework.scss
index 279273ba4..82d7a8355 100644
--- a/assets/sass/framework.scss
+++ b/assets/sass/framework.scss
@@ -34,3 +34,6 @@
 // Themes
 @use 'themes/classic';
 @use 'themes/modern';
+
+// Custom CSS
+@use '../../private/sass/custom';
diff --git a/docs/configuration/index.md b/docs/configuration/index.md
deleted file mode 100644
index cfc1d1b55..000000000
--- a/docs/configuration/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Configuration
-
-## [Sounds](sounds.md)
diff --git a/docs/customizing/index.md b/docs/customizing/index.md
new file mode 100644
index 000000000..44f190e13
--- /dev/null
+++ b/docs/customizing/index.md
@@ -0,0 +1,4 @@
+# Customizing
+
+## [Sounds](sounds.md)
+## [Customizing SCSS styles](styles.md)
diff --git a/docs/configuration/sounds.md b/docs/customizing/sounds.md
similarity index 100%
rename from docs/configuration/sounds.md
rename to docs/customizing/sounds.md
diff --git a/docs/customizing/styles.md b/docs/customizing/styles.md
new file mode 100644
index 000000000..bcef77e3c
--- /dev/null
+++ b/docs/customizing/styles.md
@@ -0,0 +1,23 @@
+# Customizing SCSS styles
+
+Photobooth uses a small SCSS build pipeline based on `gulp` and `sass`. You can add your own styles that will be compiled to CSS and loaded together with the default styles.
+
+## Recommended: `_custom.scss` (loaded automatically)
+
+This means:
+
+-   If `private/sass/_custom.scss` exists, it is automatically imported into `framework.scss`.
+-   No template changes are needed – your styles are bundled into `resources/css/framework.css`, which is already loaded by Photobooth.
+
+To use this:
+
+1. Create a new file called `_custom.scss` in `private/sass`.
+2. Add your overrides or additional styles to this file.
+
+## Building the CSS
+
+From the project root run:
+
+-   `npm install` (first time only, to install Node.js dependencies)
+-   `npm run build:sass` to only compile SCSS, or
+-   `npm run build` to run the full asset build (SCSS, JS, etc.).
diff --git a/gulpfile.mjs b/gulpfile.mjs
index aa03bddf3..a75ad755a 100644
--- a/gulpfile.mjs
+++ b/gulpfile.mjs
@@ -21,6 +21,20 @@ gulp.task('sass', async function () {
   try {
     const scssDir = './assets/sass';
     const outputDir = './resources/css';
+
+    const privateScssDir = './private/sass';
+
+    // Ensure the private sass directory exists
+    fs.mkdirSync(privateScssDir, { recursive: true });
+    // Create an optional _custom.scss file if it doesn't exist
+    const optionalCustomCss = path.join(privateScssDir, '_custom.scss');
+    if (!fs.existsSync(optionalCustomCss)) {
+      fs.writeFileSync(
+        optionalCustomCss,
+        '// auto-generated stub for optional custom overrides\n'
+      );
+    }
+
     const files = fs.readdirSync(scssDir);
 
     const scssFiles = files.filter(file => path.extname(file) === '.scss' && file !== 'tailwind.admin.scss');
diff --git a/mkdocs_remote.yml b/mkdocs_remote.yml
index 2904d1aac..e8311290c 100644
--- a/mkdocs_remote.yml
+++ b/mkdocs_remote.yml
@@ -39,6 +39,10 @@ nav:
     - gphoto2 Troubleshooting: faq/gphoto2-troubleshooting.md
     - GO2RTC Troubleshooting: faq/go2rtc-troubleshooting.md
     - Tutorials: faq/tutorials.md
+  - Customizing:
+    - Overview: customizing/index.md
+    - Sounds: customizing/sounds.md
+    - CSS styles: customizing/styles.md
   - Community & Contribution:
     - Chat on Telegram: https://t.me/PhotoboothGroup
     - Contributor Covenant Code of Conduct: code_of_conduct.md