diff --git a/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css
index d7512f3a1..e9343497c 100644
--- a/public/css/Cis4/Cis.css
+++ b/public/css/Cis4/Cis.css
@@ -238,6 +238,22 @@ html {
   background-color: var(--fhc-cis-menu-lvl-2-color-active) !important;
 }
 
+.fhc-seperator {
+  position: relative;
+}
+
+.fhc-seperator::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-left: 12.5%;
+  width: 75%; /* Full width of the parent element */
+  height: 1px; /* Height of the border */
+  background: linear-gradient(to right, #ffffff, var(--fhc-cis-primary), #ffffff);
+  opacity: 0.8; /* Adjust opacity for a subtle fade effect */
+}
+
 /* desktop */
 @media (min-width: 992px) {
   body {
diff --git a/public/js/components/Dashboard/Dashboard.js b/public/js/components/Dashboard/Dashboard.js
index 3a3f3626a..8bf1b9051 100644
--- a/public/js/components/Dashboard/Dashboard.js
+++ b/public/js/components/Dashboard/Dashboard.js
@@ -140,8 +140,9 @@ export default {
 			}
 		}).catch(err => console.error('ERROR:', err));
 	},
-	template: `<div class="core-dashboard">
-		<dashboard-section v-for="section in sections" :key="section.name" :name="section.name" :widgets="section.widgets" @widgetAdd="widgetAdd" @widgetUpdate="widgetUpdate" @widgetRemove="widgetRemove"></dashboard-section>
+	template: `
+	<div class="core-dashboard">
+		<dashboard-section v-for="(section, index) in sections" :key="section.name" :seperator="index" :name="section.name" :widgets="section.widgets" @widgetAdd="widgetAdd" @widgetUpdate="widgetUpdate" @widgetRemove="widgetRemove"></dashboard-section>
 		<dashboard-widget-picker ref="widgetpicker" :widgets="widgets"></dashboard-widget-picker>
 	</div>`
 }
\ No newline at end of file
diff --git a/public/js/components/Dashboard/Section.js b/public/js/components/Dashboard/Section.js
index ac11ddd2f..c6769a373 100644
--- a/public/js/components/Dashboard/Section.js
+++ b/public/js/components/Dashboard/Section.js
@@ -16,7 +16,8 @@ export default {
 	},
 	props: [
 		"name",
-		"widgets"
+		"widgets",
+		"seperator"
 	],
 	emits: [
 		"widgetAdd",
@@ -32,11 +33,7 @@ export default {
 	},
 	computed: {
 		getSectionStyle() {
-
-			const bgString = `background: 
-			  linear-gradient(0deg, rgba(128, 128, 128, 0.05) 0%, rgba(128, 128, 128, 0.1) 50%, rgba(128, 128, 128, 0.05) 100%)`
-
-			return 'margin-bottom: 8px;' + bgString;
+			return 'margin-bottom: 8px;';
 		},
 		items() {
 			return this.widgets.map(item => {
@@ -177,6 +174,7 @@ export default {
 		});
 	},
 	template: `
+	<div v-if="seperator" class="fhc-seperator"/>
 	<div class="dashboard-section" ref="container" :style="getSectionStyle">
 		<h3>
 			<span >{{$p.t('ui/section' + name)}}</span>