diff --git a/webv4/root/index.xjs b/webv4/root/index.xjs
index f697c72465b7225c483a8d7fd1a6e485360dc662..b5d9cac0fc83b7a9bb8ffb0f995703fc4263ca17 100644
--- a/webv4/root/index.xjs
+++ b/webv4/root/index.xjs
@@ -26,6 +26,23 @@
 	}
 ?>
 
+<?xjs
+	function loadComponent(fn) {
+		return (function () {
+			const cdir = backslash(fullpath(settings.web_mods + 'components'));
+			if (file_isdir(cdir) && file_exists(cdir + fn)) {
+				load(xjs_compile(cdir + fn));
+				return true;
+			}
+			if (file_exists(settings.web_components + fn)) {
+				load(xjs_compile(settings.web_components + fn));
+				return true;
+			}
+			return false;
+		})();
+	}
+?>
+
 <!DOCTYPE html>
 <html lang="en">
 	<head>
@@ -49,19 +66,9 @@
 		<script src="./js/common.js"></script>
 
 		<?xjs
-			(function () {
-				load(xjs_compile(settings.web_components + 'modal.xjs'));
-			})();
-
-			if (file_exists(settings.web_components + 'header.xjs')) {
-				(function () {
-					load(xjs_compile(settings.web_components + 'header.xjs'));
-				})();
-			}
-
-			(function () {
-				load(xjs_compile(settings.web_components + 'navbar.xjs'));
-			})();
+			loadComponent('modal.xjs');
+			loadComponent('header.xjs');
+			loadComponent('navbar.xjs');
 		?>
 
 		<div class="container<?xjs if (settings.layout_full_width) write('-fluid'); ?>">
@@ -79,17 +86,9 @@
 			</div>
 		  	<hr>
 			<footer>
-				<?xjs
-					if (file_exists(settings.web_components + 'footer.xjs')) {
-						(function () {
-							load(xjs_compile(settings.web_components + 'footer.xjs'));
-						})();
-					} else {
-				?>
-						<p>&copy; <?xjs write(system.name + ", " + strftime("%Y")); ?></p>
-				<?xjs
-					}
-				?>
+				<?xjs if (!loadComponent('footer.xjs')) { ?>
+					<p>&copy; <?xjs write(system.name + ", " + strftime("%Y")); ?></p>
+				<?xjs } ?>
 			</footer>
 		</div>