diff --git a/source/app/blueprints/pages/alerts/alerts_routes.py b/source/app/blueprints/pages/alerts/alerts_routes.py
index 00d7e1005..3324b5bc7 100644
--- a/source/app/blueprints/pages/alerts/alerts_routes.py
+++ b/source/app/blueprints/pages/alerts/alerts_routes.py
@@ -31,6 +31,16 @@
 from app.blueprints.responses import response_error
 from app.blueprints.access_controls import ac_requires
 
+
+from app.datamgmt.client.client_db import get_clients_sla
+from app.blueprints.responses import response_success
+
+from app.blueprints.access_controls import ac_api_requires
+
+from app.datamgmt.alerts.alerts_db import get_elapsed_sla
+
+from app.datamgmt.alerts.alerts_db import set_elapsed_sla
+
 alerts_blueprint = Blueprint(
     'alerts',
     __name__,
@@ -57,6 +67,39 @@ def alerts_list_view_route(caseid, url_redir) -> Union[str, Response]:
 
     return render_template('alerts.html', caseid=caseid, form=form)
 
+#later move this to source/app/blueprints/rest/alerts_routes.py
+@alerts_blueprint.route('/alerts/api/set_elapsed_sla_api/<int:alert_id>/<int:new_elapsed_sla>', methods=['GET'])
+@ac_api_requires(Permissions.alerts_write)
+def set_elapsed_sla_api(alert_id: int, new_elapsed_sla: int):
+    updated_alert = set_elapsed_sla(alert_id, new_elapsed_sla)
+    return response_success(data=updated_alert)
+
+
+@alerts_blueprint.route('/alerts/api/get_clients_sla_api', methods=['GET'])
+@ac_api_requires()
+def get_clients_sla_api():
+    rows= get_clients_sla()
+    customers = [dict(row._mapping) for row in rows]
+    output = {
+        "customers_sla": customers
+    }
+
+    return response_success(data=output)
+
+#later move this to source/app/blueprints/rest/alerts_routes.py
+@alerts_blueprint.route('/alerts/api/get_elapsed_sla_api/<int:alert_id>', methods=['GET'])
+@ac_api_requires()
+def get_elapsed_sla_api(alert_id: int):
+    elapsed_sla = get_elapsed_sla(alert_id)
+    #output = {
+     #   "elapsed_sla": elapsed_sla
+    #}
+
+    return response_success(data=elapsed_sla)
+
+
+
+
 
 @alerts_blueprint.route('/alerts/<int:cur_id>/comments/modal', methods=['GET'])
 @ac_requires(Permissions.alerts_read, no_cid_required=True)
diff --git a/source/app/blueprints/pages/alerts/templates/alerts.html b/source/app/blueprints/pages/alerts/templates/alerts.html
index b2532cf7c..ecb135872 100644
--- a/source/app/blueprints/pages/alerts/templates/alerts.html
+++ b/source/app/blueprints/pages/alerts/templates/alerts.html
@@ -368,6 +368,7 @@ <h5 class="modal-title" id="closeAlertModalLabel"></h5>
     <script src="/static/assets/js/plugin/vis/vis.min.js"></script>
     <script src="/static/assets/js/plugin/vis/vis-network.min.js"></script>
     <script src="/static/assets/js/iris/alerts.js"></script>
+    <script type="module" src="/static/assets/js/iris/SLA.js" defer></script>
     <script src="/static/assets/js/iris/comments.js"></script>
     <script src="/static/assets/js/core/socket.io.js"></script>
 {% endblock javascripts %}
diff --git a/source/app/datamgmt/alerts/alerts_db.py b/source/app/datamgmt/alerts/alerts_db.py
index d78792409..0d4e27a4f 100644
--- a/source/app/datamgmt/alerts/alerts_db.py
+++ b/source/app/datamgmt/alerts/alerts_db.py
@@ -1566,3 +1566,20 @@ def get_alert_status_by_name(name: str) -> AlertStatus:
     """
     return AlertStatus.query.filter(AlertStatus.status_name == name).first()
 
+
+def get_elapsed_sla(alert_id: int) -> Alert:
+    elapsed_sla = Alert.query.filter(Alert.alert_id == alert_id).first()
+    return elapsed_sla
+
+def set_elapsed_sla(alert_id: int, new_elapsed_sla: int):
+    alert = Alert.query.filter(Alert.alert_id == alert_id).first()
+    if alert:
+        # Update the column with the new value
+        alert.alert_elapsed_sla = new_elapsed_sla
+        # Commit the changes to the database
+        db.session.commit()
+        return alert
+    else:
+        # Optionally handle the case where no alert is found
+        return None
+
diff --git a/source/app/datamgmt/client/client_db.py b/source/app/datamgmt/client/client_db.py
index 42437dbc5..ed9ca8627 100644
--- a/source/app/datamgmt/client/client_db.py
+++ b/source/app/datamgmt/client/client_db.py
@@ -55,6 +55,10 @@ def get_client_list(current_user_id: int = None,
 
     return output
 
+def get_clients_sla():
+    client_data = Client.query.with_entities(Client.sla, Client.client_id).all()
+    return client_data
+
 
 def get_client(client_id: int) -> Client:
     client = Client.query.filter(Client.client_id == client_id).first()
diff --git a/source/app/models/alerts.py b/source/app/models/alerts.py
index 884e56467..859252b0f 100644
--- a/source/app/models/alerts.py
+++ b/source/app/models/alerts.py
@@ -67,6 +67,7 @@ class Alert(db.Model):
     alert_customer_id = Column(ForeignKey('client.client_id'), nullable=False)
     alert_classification_id = Column(ForeignKey('case_classification.id'))
     alert_resolution_status_id = Column(ForeignKey('alert_resolution_status.resolution_status_id'), nullable=True)
+    alert_elapsed_sla = Column(Integer, default=-1)
 
     owner = relationship('User', foreign_keys=[alert_owner_id])
     severity = relationship('Severity')
diff --git a/ui/src/pages/ProgressBar.svelte b/ui/src/pages/ProgressBar.svelte
new file mode 100644
index 000000000..e1949ec77
--- /dev/null
+++ b/ui/src/pages/ProgressBar.svelte
@@ -0,0 +1,247 @@
+<script lang="ts">
+	import {onDestroy, onMount} from 'svelte';
+
+  	export let alertStatusID;
+	export let alertID;
+
+	let dbElapsedSla;
+	let currstate;
+
+	onMount(async () => {
+		console.log("I JUST MOUNTED AGAIN MOTHERFUCKER");
+        dbElapsedSla = await fetchAlertSla();
+        console.log("DB_Data: ", dbElapsedSla);
+
+		currstate = MyState.RUNNING;
+
+      	start();
+
+	   cleanupEffect = () => clearInterval(interval);
+	});
+
+  	const MyState ={
+		NEW: 0,
+	  	RUNNING: 1,
+	    PAUSED: 2,
+  	};
+
+
+  	//let { startDateTime = "01/02/2025 14:30", endDateTime = "01/02/2025 14:31" } = $props();
+  	export let startDateTime = "01/02/2025 14:30";
+  	export let endDateTime = "01/02/2025 14:30";
+  	let timecomputed = calculateDuration(); //calculate duration betwwen two timestamps in seconds
+  	$: elapsed = 0;
+  	$: duration = timecomputed;
+  	let interval: number
+  	let oldElapsedTime = 0;
+  	let currTimeEpoch = 0;
+  	let startTimeEpoch = getSecondsSinceEpoch(startDateTime);
+  	$: SLAbreached = false;
+
+	function start() {
+	  interval = setInterval(() => {
+		  if(currstate === MyState.RUNNING) {
+			  //calculate curr time
+			  currTimeEpoch = Math.floor((Date.now()) / (1000 * 60)) * 60;
+			  if(dbElapsedSla < 0){ //SLA not yet completed
+				  elapsed = currTimeEpoch - startTimeEpoch + oldElapsedTime;
+				  console.log("elapsed: "+elapsed);
+			  }
+			  else { //SLA is not -1 therefore was completed sometime before
+				  elapsed = dbElapsedSla;
+				  clearInterval(interval)
+				  currstate = MyState.PAUSED;
+			  }
+
+			  if (elapsed > duration) {
+				  elapsed = duration
+				  clearInterval(interval)
+				  SLAbreached = true;
+			  }
+			  if (alertStatusID === 4){
+		  		complete();
+			  }
+		  }
+	  }, 1000)
+    }
+
+	function getSecondsSinceEpoch(dateString) {
+		// Split the input string into date and time parts
+		const [datePart, timePart] = dateString.split(' ');
+		// Split the date part into day, month, and year
+		const [day, month, year] = datePart.split('/');
+		// Split the time part into hours and minutes
+		const [hours, minutes] = timePart.split(':');
+		// Create a Date object (note: months are 0-based in JavaScript)
+		const date = new Date(year, month - 1, day, hours, minutes);
+		// Get the number of seconds since the Unix epoch
+		const secondsSinceEpoch = Math.floor(date.getTime() / 1000);
+		return secondsSinceEpoch;
+	}
+
+
+  	//this should actually fetch for column "alert_elapsed_sla"
+  	// it will either have -1 or other int value for SLA completed seconds
+  	async function fetchAlertSla() {
+        try {
+            const response = await fetch(`alerts/api/get_elapsed_sla_api/${alertID}`);
+            const data = await response.json();
+
+            // Declare the variable properly
+            const elapsedSla = data.data.alert_elapsed_sla;
+
+            return elapsedSla;
+        }
+        catch (error) {
+            console.error('Error fetching data:', error);
+            throw error;
+        }
+    }
+
+	async function writeSlaData() {
+        try {
+            const response = await fetch(`alerts/api/set_elapsed_sla_api/${alertID}/${elapsed}`);
+
+            const result = await response.json();
+        	console.log('Update result:', result);
+        }
+        catch (error) {
+            console.error('Error fetching data:', error);
+            throw error;
+        }
+    }
+
+
+  	function complete() {
+	  	clearInterval(interval)
+	  	currstate = MyState.PAUSED;
+	  	if (elapsed < 0){
+		  	elapsed = 0;
+	  	}
+	  	console.log("elapsedFromComplete "+elapsed);
+	  	writeSlaData();
+  	}
+
+	function pause() {
+		currstate = MyState.PAUSED;
+		console.log("Paused!");
+		oldElapsedTime = elapsed;
+	}
+
+	function resume() {
+		currstate = MyState.RUNNING;
+		startTimeEpoch = (Math.floor((Date.now()) / (1000 * 60)) * 60);
+		console.log("Runing!");
+	}
+
+	let cleanupEffect;
+
+	onDestroy(() => {
+		if (cleanupEffect) cleanupEffect();
+	});
+
+	function calculateDuration() {
+		try {
+			// Extract date and time components
+			let [date1, time1] = startDateTime.split(" ");
+			let [date2, time2] = endDateTime.split(" ");
+			let [d1, m1, y1] = date1.split("/").map(Number);
+			let [d2, m2, y2] = date2.split("/").map(Number);
+			let [h1, min1] = time1 ? time1.split(":").map(Number) : [0, 0];
+			let [h2, min2] = time2 ? time2.split(":").map(Number) : [0, 0];
+			// Convert to JS Date objects (JS months are 0-based)
+			let start = new Date(y1, m1 - 1, d1, h1, min1);
+			let end = new Date(y2, m2 - 1, d2, h2, min2);
+			let totalTime = 0;
+			// Calculate the difference in milliseconds
+			let diffMs = end - start;
+			if (diffMs < 0) {
+				totalTime = 0;
+				return;
+			}
+			// Convert milliseconds to days, hours, minutes, and seconds
+			let totalSeconds = Math.floor(diffMs / 1000);
+			//let days = Math.floor(totalSeconds / 86400);
+			//let hours = Math.floor((totalSeconds % 86400) / 3600);
+			//let minutes = Math.floor((totalSeconds % 3600) / 60);
+			//let seconds = totalSeconds % 60;
+			totalTime = totalSeconds;
+			return totalTime;
+		} catch (error) {
+			console.error("Invalid date format:", error);
+		}
+	}
+    console.log(calculateDuration());
+</script>
+
+<div class="grid-gap">
+	<div class="progress-container col-md-12" style="display: flex;justify-content: center;">
+		<div class="col-md-12" style="padding-top: 5px;">
+			<div class="row col-md-12" style="display: flex;justify-content: center;">
+      			<p>{startDateTime} - {endDateTime}</p>
+			</div>
+
+			<div class="row col-md-12" style="display: flex;justify-content: center; padding-bottom: 5px;">
+				<span>Elapsed time:</span>
+			</div>
+
+			<label class="row col-md-12" style="display: flex;justify-content: center;">
+				<progress class:completed={currstate === MyState.PAUSED} class:breached={SLAbreached} max={duration} value={elapsed}></progress>
+			</label>
+
+			<div class="row col-md-12" style="display: flex;justify-content: center;">
+				<p>{elapsed.toFixed(1)}s</p>
+			</div>
+		</div>
+	</div>
+
+    {#if duration === elapsed}
+        <p class="row col-md-12" style="display: flex;justify-content: center;"><strong>SLA breached!</strong></p>
+	{/if}
+</div>
+
+
+<style>
+	.progress-container {
+    width: 100%;
+    padding: 5px;
+    border: 2px solid grey;
+    border-radius: 10px;
+    background-color: #f3f3f3;
+  }
+
+  progress {
+    width: 90%;
+    height: 10px;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  p {
+	   height: 10px;
+  }
+
+  progress::-webkit-progress-bar {
+    background-color: #ffffff;
+    border-radius: 10px;
+  }
+
+  progress::-webkit-progress-value {
+    background-color: #00b5f1;
+    border-radius: 10px;
+  }
+
+  /* When complete, change the progress bar's value color */
+  .completed::-webkit-progress-value {
+    background-color: green;
+  }
+
+  .breached::-webkit-progress-value {
+    background-color: red;
+  }
+
+  progress::-moz-progress-bar {
+    background-color: lightblue;
+    border-radius: 10px;
+  }
+</style>
\ No newline at end of file
diff --git a/ui/src/pages/SLA.js b/ui/src/pages/SLA.js
new file mode 100644
index 000000000..0eadaadd1
--- /dev/null
+++ b/ui/src/pages/SLA.js
@@ -0,0 +1,33 @@
+import App from './SLAcontainer.svelte';
+
+export let app; // Declare at the top level
+
+document.addEventListener('alertRendered', (event) => {
+  const containers = document.querySelectorAll('.SLAcontainer');
+  if (containers) {
+    containers.forEach((container) => {
+      // Check if the container already has the "mounted" class
+      if (container.classList.contains("mounted")) {
+        console.log('SLA component already mounted on this container');
+        return;
+      }
+      app = new App({
+        target: container,
+        props: {
+          IRIStime: event.detail.IRIStime,
+          alertStatusID: event.detail.alertStatusID,
+          alertSevID: event.detail.alertSevID,
+          alertCustomerID: event.detail.alertCustomerID,
+          SLA: event.detail.SLA,
+          alertID: event.detail.alertID
+        }
+      });
+      console.log('Svelte component mounted:', app);
+      // Mark the container by adding a "mounted" class so we don't mount again.
+      container.classList.add("mounted");
+    });
+  }
+});
+
+
+
diff --git a/ui/src/pages/SLAbar.svelte b/ui/src/pages/SLAbar.svelte
new file mode 100644
index 000000000..095a0ac9d
--- /dev/null
+++ b/ui/src/pages/SLAbar.svelte
@@ -0,0 +1,256 @@
+<script lang="ts">
+    import ProgressBar from "./ProgressBar.svelte";
+
+
+	//setting up startDateTime value
+	let startDateTime = "01/02/2025 14:30";//defalut value
+    let UTCstartDateTime = "01/02/2025 14:30";//defalut value
+    export let IRIStime;
+
+    const date = new Date(IRIStime);
+    const UTCdate = new Date(IRIStime);
+
+    date.setHours(date.getHours() + 2); //date.getHours() + current Timezone offset
+    UTCdate.setHours(UTCdate.getHours());
+
+    // Get day, month, year, hours, and minutes with proper padding
+    const day = String(date.getDate()).padStart(2, '0');
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
+    const year = date.getFullYear();
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+
+
+    // Get day, month, year, hours, and minutes with proper padding
+    const UTCday = String(UTCdate.getDate()).padStart(2, '0');
+    const UTCmonth = String(UTCdate.getMonth() + 1).padStart(2, '0'); // Months are 0-based
+    const UTCyear = UTCdate.getFullYear();
+    const UTChours = String(UTCdate.getHours()).padStart(2, '0');
+    const UTCminutes = String(UTCdate.getMinutes()).padStart(2, '0');
+
+    startDateTime = `${day}/${month}/${year} ${hours}:${minutes}`;
+
+
+
+    UTCstartDateTime = `${UTCday}/${UTCmonth}/${UTCyear} ${UTChours}:${UTCminutes}`;
+
+
+    export let alertStatusID;
+    export let alertSevID;
+    export let SLA;
+    export let alertCustomerID;
+    export let alertID;
+
+
+    console.log(`MUJ START DATE TIME JE ${startDateTime}\nMUJ SLA IG TYVOLE ${SLA} MUJ ALERT ID ${alertID}`);
+    console.log(`MUJ UTC START DATE TIME JE ${UTCstartDateTime}\nMUJ SLA IG TYVOLE`);
+
+
+    let workingDays = [];
+	let startHour = 8;
+    let endHour = 20;
+
+    //parsing SLA string
+    const clients = JSON.parse(SLA);
+    const myClient = clients.find(client => client.client_id === alertCustomerID)?.sla;
+
+    // Split the SLA into components
+    if (myClient.includes(':')) {
+  		const [days, startTime, endTime] = myClient.split(':');
+
+  		// Process working days
+  		workingDays = days.split(', ').map(day => day.trim());
+
+  		// Convert times to numbers
+  		startHour = parseInt(startTime, 10);
+  		endHour = parseInt(endTime, 10);
+	} else {
+  		// Handle case with no times (just days)
+  		workingDays = myClient.split(', ').map(day => day.trim());
+	}
+
+    const workingHours = {
+    	start: startHour, // 8:00 AM
+    	end: endHour // 8:00 PM
+  	};
+
+	//setting up severity
+	const SEVERITY ={
+		LOW: 12,
+	  	INFORMATIONAL: 24,
+		MEDIUM: 6,
+		HIGH: 1
+  	};
+
+	//setting up endDateTime value
+	let endDateTime = "01/02/2025 22:31"; //default value
+	endDateTime = calculateEndDateTime(startDateTime, alertSevID);
+    let UTCendDateTime = calculateEndDateTime(UTCstartDateTime, alertSevID);
+	console.log("EndTimeeeee:"+endDateTime);
+    console.log("EndTIME UTC VOLE:"+UTCendDateTime);
+
+	//const workingDays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday'];
+
+	let result;
+    let resultUTC;
+	result = getClosestWorkingTime(startDateTime);
+    resultUTC = getClosestWorkingTime(UTCstartDateTime);
+	console.log("startDateTime: "+startDateTime);
+    console.log("UTCstartDateTime: "+UTCstartDateTime);
+	result = formatDateTime(result);
+    result = formatDateTime(resultUTC);
+	console.log("result: "+result);
+    console.log("resultUTC: "+resultUTC);
+	let computedValue;
+    let computedValueUTC;
+	if(result !== true  ){
+		computedValue = calculateEndDateTime(result, alertSevID);
+		console.log("computed value: "+computedValue);
+	}
+    if(resultUTC !== true){
+        computedValueUTC = calculateEndDateTime(resultUTC, alertSevID);
+        console.log("computed value: "+computedValueUTC)
+    }
+
+	//input in formated timestamp
+    //returns formated timestamp
+    function calculateEndDateTime(startDateTime, severity) {
+  		let secondsEpoch = getSecondsSinceEpoch(startDateTime);
+  		// Add the appropriate time in seconds based on severity
+        //1 - Medium
+        //2 - Unspecified
+        //3 - Informational
+        //4 - Low
+        //5 - High
+        //6 - Critical
+  		if (severity === 4) { //Low
+    		secondsEpoch += SEVERITY.LOW * 3600;
+  		}
+		else if (severity === 3) {
+    		secondsEpoch += 24 * 3600;
+  		}
+		else if (severity === 1) { //medium
+    		secondsEpoch += SEVERITY.MEDIUM * 3600;
+  		}
+		else if (severity === 5) {
+    		secondsEpoch = secondsEpoch+600;
+  		}
+        else {
+            secondsEpoch += 12 * 3600;
+        }
+  		// Return the formatted date-time string
+  		return getFormattedDateFromTimestamp(secondsEpoch);
+	}
+
+    //inputs formated timestamp
+    //returns num of seconds
+    function getSecondsSinceEpoch(dateString) {
+        // Split the input string into date and time parts
+        const [datePart, timePart] = dateString.split(' ');
+        // Split the date part into day, month, and year
+        const [day, month, year] = datePart.split('/');
+        // Split the time part into hours and minutes
+        const [hours, minutes] = timePart.split(':');
+        // Create a Date object (note: months are 0-based in JavaScript)
+        const date = new Date(year, month - 1, day, hours, minutes);
+        // Get the number of seconds since the Unix epoch
+        const secondsSinceEpoch = Math.floor(date.getTime() / 1000);
+        return secondsSinceEpoch;
+    }
+
+	//input num of seconds
+    //returns formated timestamp
+    function getFormattedDateFromTimestamp(timestamp) {
+        // Create a Date object from the timestamp (multiply by 1000 to convert seconds to milliseconds)
+        const date = new Date(timestamp * 1000);
+        // Extract day, month, year, hours, and minutes
+        const day = String(date.getDate()).padStart(2, '0'); // Ensure 2 digits
+        const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
+        const year = date.getFullYear();
+        const hours = String(date.getHours()).padStart(2, '0'); // Ensure 2 digits
+        const minutes = String(date.getMinutes()).padStart(2, '0'); // Ensure 2 digits
+        // Format the date and time as DD/MM/YYYY HH:MM
+        const formattedDate = `${day}/${month}/${year} ${hours}:${minutes}`;
+        return formattedDate;
+    }
+
+    //converts the formated timestamp to Date object - easier to work with
+	function parseDateTime(dateTime) {
+    	const [date, time] = dateTime.split(' ');
+    	const [day, month, year] = date.split('/').map(Number);
+    	const [hours, minutes] = time.split(':').map(Number);
+   	    return new Date(year, month - 1, day, hours, minutes);
+    }
+
+    //inputs Date object and
+    // returns formated timestamp string
+    //if not Date object inputted return true - indicates we are in current working hours
+    function formatDateTime(date) {
+		if (!(date instanceof Date)) {
+      		return true;
+    	}
+    	const day = String(date.getDate()).padStart(2, '0');
+    	const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
+    	const year = date.getFullYear();
+   	 	const hours = String(date.getHours()).padStart(2, '0');
+    	const minutes = String(date.getMinutes()).padStart(2, '0');
+    	return `${day}/${month}/${year} ${hours}:${minutes}`;
+  	}
+
+    // Check if it's a working day and within working hours - if yes return true else return next working time
+    //generated by deepSeek (R1) on 7th of March 2025 base on input:
+    // "generate a JS function that will take input date in form
+    // DD/MM/YYYY HH:MM and return true for input is current working time
+    // else return nextWorkingTime based on array WorkingDays and int StartHour
+    // and int EndHour"
+    function getClosestWorkingTime(inputDateTime) {
+    	const inputDate = parseDateTime(inputDateTime);
+    	const currentDayIndex = inputDate.getDay(); // 0 for Sunday, 1 for Monday, etc.
+   	 	const currentHour = inputDate.getHours();
+    	// Convert day index to a string name
+    	const dayName = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    	// Check if it's a working day and within working hours
+    	if (
+      	workingDays.includes(dayName[currentDayIndex]) &&
+      	currentHour >= workingHours.start &&
+      	currentHour < workingHours.end
+    	) {
+      		return true;
+    	}
+    	// Calculate the closest working time
+    	const closestTime = new Date(inputDate);
+    	// If it's outside working hours but on a working day
+    	if (workingDays.includes(dayName[currentDayIndex])) {
+      		if (currentHour < workingHours.start) {
+        		closestTime.setHours(workingHours.start, 0, 0, 0);
+        		return closestTime;
+      		}
+      		if (currentHour >= workingHours.end) {
+        		let daysToAdd = 1;
+            	while (!workingDays.includes(dayName[(currentDayIndex + daysToAdd) % 7])) {
+          			daysToAdd++;
+        		}
+        		closestTime.setDate(closestTime.getDate() + daysToAdd);
+      		}
+    	}
+        else {
+      		// If it's not a working day, find the next working day
+      		let daysToAdd = 1;
+      		while (!workingDays.includes(dayName[(currentDayIndex + daysToAdd) % 7])) {
+        		daysToAdd++;
+      		}
+      		closestTime.setDate(closestTime.getDate() + daysToAdd);
+    	}
+    	// Set the time to the start of working hours
+    	closestTime.setHours(workingHours.start, 0, 0, 0);
+    	return closestTime;
+  	}
+</script>
+
+<div class="grid-gap">
+  {#if result === true} <!-- if within working hours -->
+	  <ProgressBar startDateTime={startDateTime} {endDateTime} {alertStatusID} {alertID}/>
+  {:else} <!-- if not within working hours - recompute endDateTime-->
+	  <ProgressBar startDateTime={result} endDateTime={computedValue} {alertStatusID} {alertID}/>
+  {/if}
+</div>
\ No newline at end of file
diff --git a/ui/src/pages/SLAcontainer.svelte b/ui/src/pages/SLAcontainer.svelte
new file mode 100644
index 000000000..e818437a7
--- /dev/null
+++ b/ui/src/pages/SLAcontainer.svelte
@@ -0,0 +1,18 @@
+<script>
+	import SLAbar from "./SLAbar.svelte";
+    let isVisible = true;
+	export let IRIStime;
+	export let alertStatusID;
+	export let alertSevID;
+	export let alertCustomerID;
+	export let SLA;
+	export let alertID;
+
+
+</script>
+
+<div class="grid-gap">
+		<div style:display={isVisible ? 'block' : 'none'}>
+			<SLAbar {IRIStime} {alertStatusID} {alertSevID} {SLA} {alertCustomerID} {alertID}/>
+		</div>
+</div>
\ No newline at end of file
diff --git a/ui/src/pages/alerts.js b/ui/src/pages/alerts.js
index e7f7c7926..7db61c7b8 100644
--- a/ui/src/pages/alerts.js
+++ b/ui/src/pages/alerts.js
@@ -1037,6 +1037,14 @@ function renderAlert(alert, expanded=false, modulesOptionsAlertReq,
                       </div>` : ''}
                     
                     <div class="separator-solid"></div>
+                    
+                    <h3 class="title mt-3 mb-3"><strong>SLA</strong></h3>
+                    <div class="container">
+                        <div class="SLAcontainer"></div>
+                    </div>
+                    
+                     <div class="separator-solid"></div>
+                    
                     <h3 class="title mb-3"><strong>Alert note</strong></h3>
                     <pre id=alertNote-${alert.alert_id}>${alert.alert_note}</pre>
                     
@@ -1307,6 +1315,7 @@ async function refreshAlert(alertId, alertData, expanded=false) {
         }
         alertData = alertDataReq.data;
     }
+    const SLAdata = await fetchSLAdata();
 
       if (modulesOptionsAlertReq === null) {
     modulesOptionsAlertReq = await fetchModulesOptionsAlert();
@@ -1324,8 +1333,47 @@ async function refreshAlert(alertId, alertData, expanded=false) {
     const alertElement = $(`#alertCard-${alertId}`);
     const alertHtml = renderAlert(alertData, expanded, modulesOptionsAlertReq.data, modulesOptionsIocReq.data);
     alertElement.replaceWith(alertHtml);
+
+    //const SLAelement = $(`#SLAelement`).text();
+    console.log("SLA ELEMENT IS HERE! ");
+    console.log(alertData.alert_customer_id);
+    //document.dispatchEvent(new CustomEvent('alertRendered', { detail: { IRIStime: alertData.alert_creation_time, alertStatusID: alertData.alert_status_id }}));
+
+    document.dispatchEvent(new CustomEvent('alertRendered', {
+        detail: {
+            IRIStime: alertData.alert_creation_time,
+            alertStatusID: alertData.alert_status_id,
+            alertSevID: alertData.severity.severity_id,
+            alertCustomerID: alertData.alert_customer_id,
+            SLA: SLAdata,
+            alertID: alertData.alert_id
+        }
+    }));
 }
 
+async function fetchSLAdata() {
+
+    try {
+        const response = await fetch('alerts/api/get_clients_sla_api');
+        const data = await response.json();
+
+        // Declare the variable properly
+        const customersSla = data.data.customers_sla;
+        console.log('Customers SLA:', customersSla);
+
+        // Convert the entire array to a single JSON string
+        const jsonString = JSON.stringify(customersSla);
+        console.log("JSON string:", jsonString);
+
+        return jsonString;
+    } catch (error) {
+        console.error('Error fetching data:', error);
+        throw error; // Optionally re-throw the error after logging it
+    }
+
+    }
+
+
 async function fetchModulesOptionsAlert() {
     const response = get_request_api('/dim/hooks/options/alert/list');
 
@@ -1379,6 +1427,10 @@ async function updateAlerts(page, per_page, filters = {}, paging=false){
     }
   }
 
+
+  const SLAdata = await fetchSLAdata();
+
+
   // Check if the selection mode is active
    const selectionModeActive = $('body').hasClass('selection-mode');
    selectionModeActive ? $('body').removeClass('selection-mode') : '';
@@ -1405,6 +1457,19 @@ async function updateAlerts(page, per_page, filters = {}, paging=false){
                                                modulesOptionsIocReq.data);
           alertElement.html(alertHtml);
           alertsContainer.append(alertElement);
+          console.log(alert);
+          const jsonString = "";
+
+          document.dispatchEvent(new CustomEvent('alertRendered', {
+                detail: {
+                    IRIStime: alert.alert_creation_time,
+                    alertStatusID: alert.alert_status_id,
+                    alertSevID: alert.severity.severity_id,
+                    alertCustomerID: alert.alert_customer_id,
+                    SLA: SLAdata,
+                    alertID: alert.alert_id
+                }
+          }));
       });
   }
 
diff --git a/ui/src/pages/persistentStore.js b/ui/src/pages/persistentStore.js
new file mode 100644
index 000000000..41c85483d
--- /dev/null
+++ b/ui/src/pages/persistentStore.js
@@ -0,0 +1,15 @@
+import { writable } from 'svelte/store';
+
+export function createPersistentStore(key, initialValue) {
+  // Try to read from localStorage; if none exists, use the initial value
+  const storedValue = localStorage.getItem(key);
+  const data = storedValue ? JSON.parse(storedValue) : initialValue;
+  const store = writable(data);
+
+  // Subscribe to store changes and write to localStorage
+  store.subscribe(value => {
+    localStorage.setItem(key, JSON.stringify(value));
+  });
+
+  return store;
+}