diff --git a/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/alerts.js b/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/alerts.js
index ed5dfb9..f566d1a 100644
--- a/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/alerts.js
+++ b/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/alerts.js
@@ -7,6 +7,7 @@
 'require ui';
 'require client-guardian/api as API';
 'require client-guardian/nav as CgNav';
+'require secubox-portal/header as SbHeader';
 
 return view.extend({
 	load: function() {
@@ -20,6 +21,10 @@ return view.extend({
 		var alerts = data[0];
 		var logs = data[1].logs || [];
 
+		// Main wrapper with SecuBox header
+		var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
+		wrapper.appendChild(SbHeader.render());
+
 		var view = E('div', { 'class': 'client-guardian-dashboard' }, [
 			E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
 			E('link', { 'rel': 'stylesheet', 'href': L.resource('client-guardian/dashboard.css') }),
@@ -164,7 +169,8 @@ return view.extend({
 			])
 		]);
 
-		return view;
+		wrapper.appendChild(view);
+		return wrapper;
 	},
 
 	renderToggle: function(icon, label, desc, enabled) {
diff --git a/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/clients.js b/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/clients.js
index e96ce84..6c86fd6 100644
--- a/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/clients.js
+++ b/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/clients.js
@@ -5,6 +5,7 @@
 'require ui';
 'require rpc';
 'require client-guardian/nav as CgNav';
+'require secubox-portal/header as SbHeader';
 
 var callGetClients = rpc.declare({
 	object: 'luci.client-guardian',
@@ -76,6 +77,10 @@ return view.extend({
 		var zones = Array.isArray(data[1]) ? data[1] : (data[1].zones || []);
 		var self = this;
 
+		// Main wrapper with SecuBox header
+		var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
+		wrapper.appendChild(SbHeader.render());
+
 		var view = E('div', { 'class': 'client-guardian-dashboard' }, [
 			E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
 			E('link', { 'rel': 'stylesheet', 'href': L.resource('client-guardian/dashboard.css') }),
@@ -121,7 +126,8 @@ return view.extend({
 			])
 		]);
 
-		return view;
+		wrapper.appendChild(view);
+		return wrapper;
 	},
 
 	renderFilterTab: function(filter, label, count, active) {
diff --git a/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/logs.js b/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/logs.js
index 27e03bd..e2cca06 100644
--- a/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/logs.js
+++ b/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/logs.js
@@ -5,6 +5,7 @@
 'require ui';
 'require client-guardian/api as API';
 'require client-guardian/nav as CgNav';
+'require secubox-portal/header as SbHeader';
 
 return view.extend({
 	refreshInterval: 5000,
@@ -17,6 +18,10 @@ return view.extend({
 		var logs = data.logs || [];
 		var self = this;
 
+		// Main wrapper with SecuBox header
+		var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
+		wrapper.appendChild(SbHeader.render());
+
 		var view = E('div', { 'class': 'client-guardian-dashboard' }, [
 			E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
 			E('link', { 'rel': 'stylesheet', 'href': L.resource('client-guardian/dashboard.css') }),
@@ -119,7 +124,8 @@ return view.extend({
 		// Setup auto-refresh
 		poll.add(L.bind(this.pollLogs, this), this.refreshInterval);
 
-		return view;
+		wrapper.appendChild(view);
+		return wrapper;
 	},
 
 	renderLogs: function(logs) {
diff --git a/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/overview.js b/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/overview.js
index a4043ba..6e6c8ed 100644
--- a/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/overview.js
+++ b/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/overview.js
@@ -6,6 +6,7 @@
 'require ui';
 'require rpc';
 'require client-guardian/nav as CgNav';
+'require secubox-portal/header as SbHeader';
 
 var callGetStatus = rpc.declare({
 	object: 'luci.client-guardian',
@@ -77,6 +78,10 @@ return view.extend({
 		var quarantineClients = clients.filter(function(c) { return c.status === 'unknown' || c.zone === 'quarantine'; });
 		var bannedClients = clients.filter(function(c) { return c.status === 'banned'; });
 
+		// Main wrapper with SecuBox header
+		var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
+		wrapper.appendChild(SbHeader.render());
+
 		var view = E('div', { 'class': 'client-guardian-dashboard' }, [
 			E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
 			E('link', { 'rel': 'stylesheet', 'href': L.resource('client-guardian/dashboard.css') }),
@@ -150,7 +155,8 @@ return view.extend({
 			}, this), refreshInterval);
 		}
 
-		return view;
+		wrapper.appendChild(view);
+		return wrapper;
 	},
 
 	renderStatCard: function(icon, value, label) {
diff --git a/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/parental.js b/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/parental.js
index 4db950c..a378739 100644
--- a/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/parental.js
+++ b/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/parental.js
@@ -4,6 +4,7 @@
 'require ui';
 'require rpc';
 'require client-guardian/nav as CgNav';
+'require secubox-portal/header as SbHeader';
 
 var callGetParental = rpc.declare({
 	object: 'luci.client-guardian',
@@ -20,7 +21,11 @@ return view.extend({
 		var filters = data.filters || [];
 		var urlLists = data.url_lists || [];
 
-		return E('div', { 'class': 'client-guardian-dashboard' }, [
+		// Main wrapper with SecuBox header
+		var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
+		wrapper.appendChild(SbHeader.render());
+
+		var view = E('div', { 'class': 'client-guardian-dashboard' }, [
 			E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
 			E('link', { 'rel': 'stylesheet', 'href': L.resource('client-guardian/dashboard.css') }),
 			CgNav.renderTabs('parental'),
@@ -246,6 +251,9 @@ return view.extend({
 				])
 			])
 		]);
+
+		wrapper.appendChild(view);
+		return wrapper;
 	},
 
 	renderScheduleDay: function(name, active) {
diff --git a/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/settings.js b/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/settings.js
index f60becc..0da97dc 100644
--- a/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/settings.js
+++ b/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/settings.js
@@ -5,6 +5,7 @@
 'require uci';
 'require client-guardian/api as API';
 'require client-guardian/nav as CgNav';
+'require secubox-portal/header as SbHeader';
 
 return view.extend({
 	load: function() {
@@ -222,12 +223,19 @@ return view.extend({
 
 			rendered.insertBefore(infoBox, rendered.firstChild);
 
-			return E('div', { 'class': 'client-guardian-dashboard' }, [
+			// Main wrapper with SecuBox header
+			var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
+			wrapper.appendChild(SbHeader.render());
+
+			var view = E('div', { 'class': 'client-guardian-dashboard' }, [
 				E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
 				E('link', { 'rel': 'stylesheet', 'href': L.resource('client-guardian/dashboard.css') }),
 				CgNav.renderTabs('settings'),
 				rendered
 			]);
+
+			wrapper.appendChild(view);
+			return wrapper;
 		});
 	},
 
diff --git a/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/zones.js b/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/zones.js
index b09dc67..318e788 100644
--- a/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/zones.js
+++ b/package/secubox/luci-app-client-guardian/htdocs/luci-static/resources/view/client-guardian/zones.js
@@ -4,6 +4,7 @@
 'require ui';
 'require rpc';
 'require client-guardian/nav as CgNav';
+'require secubox-portal/header as SbHeader';
 
 var callGetZones = rpc.declare({
 	object: 'luci.client-guardian',
@@ -31,7 +32,11 @@ return view.extend({
 		var zones = Array.isArray(data) ? data : (data.zones || []);
 		var self = this;
 
-		return E('div', { 'class': 'client-guardian-dashboard' }, [
+		// Main wrapper with SecuBox header
+		var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
+		wrapper.appendChild(SbHeader.render());
+
+		var view = E('div', { 'class': 'client-guardian-dashboard' }, [
 			E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
 			E('link', { 'rel': 'stylesheet', 'href': L.resource('client-guardian/dashboard.css') }),
 			CgNav.renderTabs('zones'),
@@ -59,6 +64,9 @@ return view.extend({
 				zones.map(L.bind(this.renderZoneCard, this))
 			)
 		]);
+
+		wrapper.appendChild(view);
+		return wrapper;
 	},
 
 	renderZoneCard: function(zone) {
diff --git a/package/secubox/luci-app-media-flow/htdocs/luci-static/resources/view/media-flow/dashboard.js b/package/secubox/luci-app-media-flow/htdocs/luci-static/resources/view/media-flow/dashboard.js
index e5688eb..de16e4e 100644
--- a/package/secubox/luci-app-media-flow/htdocs/luci-static/resources/view/media-flow/dashboard.js
+++ b/package/secubox/luci-app-media-flow/htdocs/luci-static/resources/view/media-flow/dashboard.js
@@ -3,6 +3,7 @@
 'require poll';
 'require ui';
 'require media-flow/api as API';
+'require secubox-portal/header as SbHeader';
 
 return view.extend({
 	title: _('Media Flow Dashboard'),
@@ -36,6 +37,10 @@ return view.extend({
 		var streams = streamsData.streams || [];
 		var flowCount = streamsData.flow_count || status.active_flows || 0;
 
+		// Main wrapper with SecuBox header
+		var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
+		wrapper.appendChild(SbHeader.render());
+
 		// Inject CSS
 		var css = `
 .mf-dashboard { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #e4e4e7; }
@@ -241,7 +246,8 @@ return view.extend({
 			}, this));
 		}, this), this.pollInterval);
 
-		return view;
+		wrapper.appendChild(view);
+		return wrapper;
 	},
 
 	handleSaveApply: null,
diff --git a/package/secubox/luci-app-netdata-dashboard/htdocs/luci-static/resources/view/netdata-dashboard/dashboard.js b/package/secubox/luci-app-netdata-dashboard/htdocs/luci-static/resources/view/netdata-dashboard/dashboard.js
index e25c6b1..9a72850 100644
--- a/package/secubox/luci-app-netdata-dashboard/htdocs/luci-static/resources/view/netdata-dashboard/dashboard.js
+++ b/package/secubox/luci-app-netdata-dashboard/htdocs/luci-static/resources/view/netdata-dashboard/dashboard.js
@@ -5,6 +5,7 @@
 'require poll';
 'require netdata-dashboard/api as API';
 'require secubox-theme/theme as Theme';
+'require secubox-portal/header as SbHeader';
 
 var lang = (typeof L !== 'undefined' && L.env && L.env.lang) ||
 	(document.documentElement && document.documentElement.getAttribute('lang')) ||
@@ -33,6 +34,10 @@ return view.extend({
 		var netdataUrl = 'http://' + window.location.hostname + ':' + netdataPort;
 		var alarmCount = this.countAlarms(alarms);
 
+		// Main wrapper with SecuBox header
+		var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
+		wrapper.appendChild(SbHeader.render());
+
 		var view = E('div', { 'class': 'netdata-dashboard secubox-netdata' }, [
 			E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
 			E('link', { 'rel': 'stylesheet', 'href': L.resource('netdata-dashboard/dashboard.css') }),
@@ -55,7 +60,8 @@ return view.extend({
 			}, this));
 		}, this), 5);
 
-		return view;
+		wrapper.appendChild(view);
+		return wrapper;
 	},
 
 	countAlarms: function(alarms) {
diff --git a/package/secubox/luci-app-netdata-dashboard/htdocs/luci-static/resources/view/netdata-dashboard/settings.js b/package/secubox/luci-app-netdata-dashboard/htdocs/luci-static/resources/view/netdata-dashboard/settings.js
index cbbb5e5..0e02cef 100644
--- a/package/secubox/luci-app-netdata-dashboard/htdocs/luci-static/resources/view/netdata-dashboard/settings.js
+++ b/package/secubox/luci-app-netdata-dashboard/htdocs/luci-static/resources/view/netdata-dashboard/settings.js
@@ -3,6 +3,7 @@
 'require secubox-theme/theme as Theme';
 'require ui';
 'require netdata-dashboard/api as API';
+'require secubox-portal/header as SbHeader';
 
 return view.extend({
 	load: function() {
@@ -27,6 +28,10 @@ return view.extend({
 		var thStyle = 'padding: 0.75rem 1rem; text-align: left; font-weight: 600; width: 200px; background: #161b22; border-bottom: 1px solid #30363d;';
 		var tdStyle = 'padding: 0.75rem 1rem; border-bottom: 1px solid #30363d;';
 
+		// Main wrapper with SecuBox header
+		var wrapper = E('div', { 'class': 'secubox-page-wrapper' });
+		wrapper.appendChild(SbHeader.render());
+
 		var view = E('div', { 'class': 'cbi-map' }, [
 			E('link', { 'rel': 'stylesheet', 'href': L.resource('secubox-theme/secubox-theme.css') }),
 			E('h2', {}, _('Netdata Settings')),
@@ -227,7 +232,8 @@ return view.extend({
 			])
 		]);
 
-		return view;
+		wrapper.appendChild(view);
+		return wrapper;
 	},
 
 	handleSaveApply: null,