diff --git a/src/CiPipelineProvider.ts b/src/CiPipelineProvider.ts
index c3eb537..80f373c 100644
--- a/src/CiPipelineProvider.ts
+++ b/src/CiPipelineProvider.ts
@@ -4,10 +4,16 @@ import * as wsLib from 'ws';
 const { setupWs, 
         request,  
         getUaSocket,
+        getDsSocket,
+        getWsSocket,
         checkCiPipelineStructure,
         checkCiPipelineState,
+        checkMSDCiPipelineState,
         ciStepHandler,
+        ciStepHandlerMSD,
         ciStageStatusHandler, 
+        ciStageStatusHandlerMSD,
+        landscapeShape,
     } = require('./ts/wsService');
 
 export class CiPipelineProvider implements vscode.WebviewViewProvider {
@@ -39,13 +45,14 @@ export class CiPipelineProvider implements vscode.WebviewViewProvider {
 
       webviewView.webview.html = this._getHtmlWebview(webviewView.webview);
 
-      webviewView.webview.onDidReceiveMessage(async (data) => {
-        let socket: any;
-        let uaSocket = getUaSocket();
-        let instanceURL: string = cache.get("codesphere.instanceURL") as string;
-        instanceURL = instanceURL.replace(/^https?:\/\//, '');
-        instanceURL = instanceURL.replace(/\/$/, '');
+      let socket: any;
+      let uaSocket = getUaSocket();
+      let instanceURL: string = cache.get("codesphere.instanceURL") as string;
+      instanceURL = instanceURL.replace(/^https?:\/\//, '');
+      instanceURL = instanceURL.replace(/\/$/, '');
+
 
+      webviewView.webview.onDidReceiveMessage(async (data) => {
         switch (data.type) {
             case "getCiPipelineStages": {
                 const socketURL = `wss://${data.value.dataCenterId}.${instanceURL}/workspace-proxy`;
@@ -59,17 +66,33 @@ export class CiPipelineProvider implements vscode.WebviewViewProvider {
                 ciPipelineCheck.then((ci: any) => {
                     ciStructure = ci;
                     console.log("ciStructure: ", JSON.stringify(ciStructure));
-                    this._view?.webview.postMessage({ 
-                        type: "CIPipelineStages", 
-                        value: {   
-                            'CIArray': `${JSON.stringify(ciStructure)}`
+                    if (ciStructure.schemaVersion !== "v0.2") {
+                        console.log("ciPipeline schema version is not v0.2");
+                        this._view?.webview.postMessage({ 
+                          type: "CIPipelineStages", 
+                          value: {   
+                              'CIArray': `${JSON.stringify(ciStructure)}`
+                          }
+                      });
+                    } else {
+                        console.log("ciPipeline schema version is v0.2");
+                        console.log(data.value.origin);
+                        if (data.value.origin === "msd") {
+
+                          this._view?.webview.postMessage({ 
+                            type: "CIPipelineStages", 
+                            value: {   
+                                'CIArray': `${JSON.stringify(ciStructure)}`
+                            }
+                        });
+                        } else {
+                          webviewView.webview.html = this._getHtmlWebviewMSD(webviewView.webview);
                         }
-                    });
+                    }
                   }
                 ); 
 
                 await request(uaSocket, "pipelineStream", { workspaceId: workspaceID}, "workspace-proxy", 324);
-
                 break;
                 }
             
@@ -114,39 +137,124 @@ export class CiPipelineProvider implements vscode.WebviewViewProvider {
               const accessToken = cache.get("codesphere.accessTokenCache");
               socket = await setupWs(new wsLib.WebSocket(socketURL), "workspace-proxy", accessToken, cache, workspaceId);
               let uaSocketconnect2 = getUaSocket();
+
+              const runStageServices = data.value.runStageServices;
+
+
     
               let prepare;
               let test;
               let run;
-    
+              
               const prepareCheck = checkCiPipelineState(uaSocketconnect2, 35);
               const testCheck = checkCiPipelineState(uaSocketconnect2, 136);
-              const runCheck = checkCiPipelineState(uaSocketconnect2, 237);
-    
-              testCheck.then((resultTest: any) => {
-                test = resultTest;
-              }
-              );
-    
-              runCheck.then((resultRun: any) => {
-                run = resultRun;
-              });
-    
+              
               prepareCheck.then((result: any) => {
                 prepare = result;
                 
               });
+
+              testCheck.then((resultTest: any) => {
+                test = resultTest;
+              }
+              );              
               
-              await request(uaSocketconnect2, "executionInfo", { workspaceId: workspaceId, stage: 'test' }, "workspace-proxy", 136);
+              if (data.value.origin === "msd") {
+
+                const socketURLWs = `wss://${data.value.datacenterId}.${instanceURL}/workspace-service`;
+                socket = await setupWs(new wsLib.WebSocket(socketURLWs), "workspace-service", accessToken, cache, workspaceId);
+                let wsSocket = getWsSocket();
+                let landscapeStructure;
+
+                const landscapeShapeData = landscapeShape(wsSocket, 56);
+
+                landscapeShapeData.then(async (result: any) => {
+                  console.log("landscapeShape: ", result);
+                  landscapeStructure = result.map(({ workspaceId, ...rest }) => rest);
+                  console.log("landscapeShape: ", result);
+
+                  const waitForLandscapeUpdate = landscapeShape(wsSocket, 57);
+                  // TODO: instead of just updating the Landscape this should check wether its synced or not
+                  // if not synced a message needs to be sent to the webview, so the snyc button can be showed to the user (and break this code block)
+                  // after the user clicks on the sync button the landscape should be updated with this case, but we need an additional key-value pair
+                  // which indicates, that the user wants to update the landscape
+                  await request(wsSocket, "updateLandscape", { servers: landscapeStructure, workspaceId: workspaceId }, "workspace-service", 57);
+
+                  await waitForLandscapeUpdate.then(async (result: any) => {
+                    console.log("waited for update: ", result);
+                  });
+
+                });
+
+                await request(wsSocket, "landscapeStream", { workspaceId: workspaceId }, "landscapeStream", 56);
+
+                delay(400);
+
+                console.log("runStageServices: ", runStageServices);
+                let uaSocketDeploymentService = getDsSocket();
+
+                const MSDrunCheck = checkMSDCiPipelineState(uaSocketDeploymentService, 50, data.value.replicaCount, runStageServices);
+
+                await request(uaSocketDeploymentService, "info", { workspaceId: workspaceId }, "info", 50);
+
+                await MSDrunCheck.then(async (resultRun: any) => {
+                  run = resultRun;
+                  console.log("runstructure: ", run);
+                });
               
-              await delay(200);
-              await request(uaSocketconnect2, "executionInfo", { workspaceId: workspaceId, stage: 'run' }, "workspace-proxy", 237);
+                let endpoint = 237;
+                let runCheck;
+                Object.entries(run).forEach(async ([serviceName, service]: [string, any]) => {
+                  console.log("service: ", serviceName);
+                
+                  const replicas = service.replicas;
+                  for (const replicaKey of Object.keys(replicas)) {
+                    console.log("Replica: ", replicaKey);
+
+                    runCheck = checkCiPipelineState(uaSocketconnect2, endpoint);
+                    runCheck.then((resultRun: any) => {
+                      console.log("resultRun: ", resultRun, "\nrun: ", run);
+                      run[serviceName].replicas[replicaKey] = resultRun;
+                      console.log("resultRun2: ", run);
+                      
+                    });
+                
+                    await request(
+                      uaSocketconnect2,
+                      "executionInfo",
+                      {
+                        replica: replicaKey,
+                        server: serviceName,
+                        stage: "run",
+                        workspaceId: workspaceId,
+                      },
+                      "workspace-proxy",
+                      endpoint
+                    );
+                
+                    endpoint++;
+                  }
+                });
+
+               } else if (!data.value.origin) {
+                const runCheck = checkCiPipelineState(uaSocketconnect2, 237);
+
+                runCheck.then((resultRun: any) => {
+                  run = resultRun;
+                });
+
+                await request(uaSocketconnect2, "executionInfo", { workspaceId: workspaceId, stage: 'run' }, "workspace-proxy", 237);
+                await delay(200);
+
+              }
+              
+              await request(uaSocketconnect2, "executionInfo", { workspaceId: workspaceId, stage: 'test' }, "workspace-proxy", 136);
               
               await delay(200);
     
               await request(uaSocketconnect2, "executionInfo", { workspaceId: workspaceId, stage: 'prepare' }, "workspace-proxy", 35);
               
-              await delay(200);
+              await delay(500);
               
               this._view?.webview.postMessage({
                 type: "ciPipelineStatus",
@@ -170,13 +278,14 @@ export class CiPipelineProvider implements vscode.WebviewViewProvider {
               const delay = (ms: any) => new Promise(resolve => setTimeout(resolve, ms));
               const workspaceId = parseInt(data.value.workspaceId);
               const stage = data.value.stage;
-              let endpoint: number = 0;
+              let endpoint: number = 777;
               const socketURL = `wss://${data.value.dataCenterId}.${instanceURL}/workspace-proxy`;
               const accessToken = await this.extensionContext.secrets.get("codesphere.accessToken") as string;
               socket = await setupWs(new wsLib.WebSocket(socketURL), "workspace-proxy", accessToken, cache, workspaceId);
               let uaSocket = getUaSocket();
               let ciStageFinished = false; 
               let ciPipelineStatus;
+              let runStageServices = data.value.msd;
 
               if (stage === "prepare") {
                 endpoint = 36;
@@ -188,36 +297,144 @@ export class CiPipelineProvider implements vscode.WebviewViewProvider {
                 endpoint = 238;
               }
 
-              await request(uaSocket, "executionInfo", { workspaceId: workspaceId, stage: stage }, "workspace-proxy", endpoint);
+              if ((stage === "prepare" || stage === "test" || stage === "run" && !runStageServices )) {
+                await request(uaSocket, "executionInfo", { workspaceId: workspaceId, stage: stage }, "workspace-proxy", endpoint);
 
-              const endpointArray = Array.from({length: data.value.stepcount}, (_, i) => 400 + i);     
-    
-              await request(uaSocket, "startPipeline", { workspaceId: workspaceId, stage: stage }, "workspace-proxy", 32);
+                const endpointArray = Array.from({length: data.value.stepcount}, (_, i) => 400 + i);     
+      
+                await request(uaSocket, "startPipeline", { workspaceId: workspaceId, stage: stage }, "workspace-proxy", 32);
+                
+                for (let i = 0; i < data.value.stepcount; i++) {
+                  request(uaSocket, "logs", { workspaceId: workspaceId, stage: stage, step:i }, "workspace-proxy", (400+i));
+                }
+                
+                ciStageStatusHandler(uaSocket, endpoint, this.postMessageToWebview, stage).then((status: any) => {
+                  ciPipelineStatus = status;
+                });
+
+                let log = ciStepHandler(uaSocket, endpoint, endpointArray, this.postMessageToWebview, stage);
+
+                
+                while (!ciStageFinished) {
+                    await delay(1000);
+
+                    if (ciPipelineStatus === 'success') {
+                      ciStageFinished = true;
+                    }
+
+                    if (ciPipelineStatus === 'failure') {
+                      ciStageFinished = true;
+                    }
+                }
+                
+                break;
+              } else if (stage === "run" && runStageServices) {
+                const generateReplicaEndpoints = (services: any) => {
+                  let endpointCounter = 401;
+                  const replicaEndpoints: Record<string, number> = {};
               
-              for (let i = 0; i < data.value.stepcount; i++) {
-                request(uaSocket, "logs", { workspaceId: workspaceId, stage: stage, step:i }, "workspace-proxy", (400+i));
-              }
+                  for (const serviceKey in services) {
+                      const service = services[serviceKey];
+                      if (service.replicas) {
+                          for (const replicaKey in service.replicas) {
+                              replicaEndpoints[replicaKey] = endpointCounter++;
+                          }
+                      }
+                  }
               
-              ciStageStatusHandler(uaSocket, endpoint, this.postMessageToWebview, stage).then((status: any) => {
-                ciPipelineStatus = status;
-              });
+                  return replicaEndpoints;
+              };
+                
+                const endpointArrayReplica = generateReplicaEndpoints(runStageServices);
+                console.log("endpointArrayReplica: ", endpointArrayReplica);
 
-              let log = ciStepHandler(uaSocket, endpoint, endpointArray, this.postMessageToWebview, stage);
+                let status = ciStageStatusHandlerMSD(uaSocket, endpointArrayReplica, this.postMessageToWebview, stage);
 
-              
-              while (!ciStageFinished) {
-                  await delay(1000);
+                Object.entries(runStageServices).forEach(async ([serviceName, service]: [string, any]) => {
+                  console.log("service: ", serviceName);
+                
+                  const replicas = service.replicas;
+
+                  for (const replicaKey of Object.keys(replicas)) {
+                    console.log("Replica: ", replicaKey);
 
-                  if (ciPipelineStatus === 'success') {
-                    ciStageFinished = true;
+                    let endpointReplica = endpointArrayReplica[replicaKey];
+
+                    console.log("endpointReplica: ", endpointReplica);
+
+                    await request(
+                      uaSocket,
+                      "executionInfo",
+                      {
+                        replica: replicaKey,
+                        server: serviceName,
+                        stage: "run",
+                        workspaceId: workspaceId,
+                      },
+                      "workspace-proxy",
+                      endpointReplica
+                    );
                   }
+                }
+                );
+
+                await request(uaSocket, "startPipeline", { workspaceId: workspaceId, stage: stage }, "workspace-proxy", 32);
 
-                  if (ciPipelineStatus === 'failure') {
-                    ciStageFinished = true;
+                const generateReplicaStepEndpoints = (services: any) => {
+                  let endpointCounter = 501;
+                  const replicaStepEndpoints: Record<string, { steps: Record<number, number> }> = {};
+              
+                  for (const serviceKey in services) {
+                      const service = services[serviceKey];
+                      if (service.replicas) {
+                          for (const replicaKey in service.replicas) {
+                              const replica = service.replicas[replicaKey];
+                              
+                              // Initialisiere die steps für das aktuelle Replica
+                              replicaStepEndpoints[replicaKey] = { steps: {} };
+              
+                              // Gehe alle Steps des Replicas durch und weise jedem Step eine eigene EndpointId zu
+                              replica.steps.forEach((step: any, index: number) => {
+                                  replicaStepEndpoints[replicaKey].steps[index] = endpointCounter++;
+                              });
+                          }
+                      }
                   }
-              }
               
-              break;
+                  return replicaStepEndpoints;
+              };
+
+              const replicaStepEndpoints = generateReplicaStepEndpoints(runStageServices);
+
+              console.log("Replica Step Endpoints", replicaStepEndpoints);
+
+              let log = ciStepHandlerMSD(uaSocket, replicaStepEndpoints, this.postMessageToWebview, stage);
+                Object.entries(runStageServices).forEach(async ([serviceName, service]: [string, any]) => {
+                  console.log("service: ", serviceName);
+              
+                  const replicas = service.replicas;
+                  for (const replicaKey of Object.keys(replicas)) {
+                      console.log("Replica: ", replicaKey);
+              
+                      const steps = replicas[replicaKey].steps;
+                      for (const stepIndex in steps) {
+                          const endpointId = replicaStepEndpoints[replicaKey].steps[stepIndex];
+                          console.log(`Sending request for step ${stepIndex} with endpointId ${endpointId}`);
+              
+                          request(
+                              uaSocket,
+                              "logs",
+                              { workspaceId: workspaceId, stage: stage, step: parseInt(stepIndex), replica: replicaKey, server: serviceName },
+                              "workspace-proxy",
+                              endpointId
+                          );
+                      }
+                  }
+              });
+
+
+              }
+
             }
           };
       }
@@ -276,4 +493,46 @@ export class CiPipelineProvider implements vscode.WebviewViewProvider {
         </body>
         </html>`;
     }
+
+    private _getHtmlWebviewMSD(webview: vscode.Webview) {
+      const styleResetUri = webview.asWebviewUri(
+        vscode.Uri.joinPath(this._extensionUri, "media", "reset.css")
+      );
+      const scriptUri = webview.asWebviewUri(
+        vscode.Uri.joinPath(this._extensionUri, "out", "compiled/msdcipipeline.js")
+      );
+      const styleMainUri = webview.asWebviewUri(
+        vscode.Uri.joinPath(this._extensionUri, "out", "compiled/msdcipipeline.css")
+      );
+      const styleVSCodeUri = webview.asWebviewUri(
+        vscode.Uri.joinPath(this._extensionUri, "media", "vscode.css")
+      );
+    
+      // Use a nonce to only allow a specific script to be run.
+      const nonce = getNonce();
+    
+      return `<!DOCTYPE html>
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <!--
+            Use a content security policy to only allow loading images from https or from our extension directory,
+            and only allow scripts that have a specific nonce.
+          -->
+          <meta http-equiv="Content-Security-Policy" content="img-src https: data:; style-src 'unsafe-inline' ${
+            webview.cspSource
+          }; script-src 'nonce-${nonce}';">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <link href="${styleResetUri}" rel="stylesheet">
+          <link href="${styleVSCodeUri}" rel="stylesheet">
+          <link href="${styleMainUri}" rel="stylesheet">
+          <script nonce="${nonce}">
+            const vscode = acquireVsCodeApi();
+          </script>
+        </head>
+        <body>
+          <script nonce="${nonce}" src="${scriptUri}"></script>
+        </body>
+        </html>`;
+    }
 }
\ No newline at end of file
diff --git a/src/SidebarProvider.ts b/src/SidebarProvider.ts
index 323bf80..a4f96b9 100644
--- a/src/SidebarProvider.ts
+++ b/src/SidebarProvider.ts
@@ -7,6 +7,7 @@ const { setupWs,
         request, 
         waitForWorkspaceRunning, 
         getUaSocket, 
+        getDsSocket,
         giveWorkspaceName,
         afterTunnelInit,
         tunnelIsReady,
@@ -686,7 +687,7 @@ export class SidebarProvider implements vscode.WebviewViewProvider {
           const socketURL = `wss://${data.value.datacenterId}.${instanceURL}/deployment-service`;
           const accessToken = await this.extensionContext.secrets.get("codesphere.accessToken") as string;
           socket = await setupWs(new wsLib.WebSocket(socketURL), "deployment-service", accessToken, cache, workspaceId);
-          uaSocket2 = getUaSocket();
+          uaSocket2 = getDsSocket();
 
           const codePromise = wakeUpWorkspace(uaSocket2);
           
diff --git a/src/ts/wsService.ts b/src/ts/wsService.ts
index d80c95a..33618d7 100644
--- a/src/ts/wsService.ts
+++ b/src/ts/wsService.ts
@@ -6,6 +6,7 @@ const fs = require('fs');
 let wsSeq = 1;
 let dsSocket: any;
 let uaSocket: any;
+let wsSocket: any;
 
 
 const setupWs = (ws: any, name: string, accessToken: undefined, cache?:any, workspaceID?: string) => {
@@ -39,39 +40,19 @@ const setupWs = (ws: any, name: string, accessToken: undefined, cache?:any, work
 
         if (name === "workspace-proxy") {
             uaSocket = ws;  
-          }
-
-        ws.send(JSON.stringify({
-            method: "setClientContext",
-            endpointId: 1,
-            args: {
-                requestHeaders: {
-                    Authorization: `Bearer ${accessToken}`
-                },
-                responseHeaders: {},
-                httpStatusCode: 200
-            }
-        }));
-
+        }
+        
         if (name === "deployment-service") {
-            uaSocket = ws;  
-          }
-
-        ws.send(JSON.stringify({
-            method: "setClientContext",
-            endpointId: 1,
-            args: {
-                requestHeaders: {
-                    Authorization: `Bearer ${accessToken}`
-                },
-                responseHeaders: {},
-                httpStatusCode: 200
-            }
-        }));
+        dsSocket = ws;  
+        }
 
         if (name === "ide-service") {
             uaSocket = ws;  
-          }
+        }
+
+        if (name === "workspace-service") {
+            wsSocket = ws;
+        }
 
         ws.send(JSON.stringify({
             method: "setClientContext",
@@ -84,7 +65,6 @@ const setupWs = (ws: any, name: string, accessToken: undefined, cache?:any, work
                 httpStatusCode: 200
             }
         }));
-
     });
 
     ws.on("message", (data: { toString: () => any; }) => {
@@ -94,7 +74,7 @@ const setupWs = (ws: any, name: string, accessToken: undefined, cache?:any, work
         
     });
 
-
+    ws.setMaxListeners(200);
 
     return new Promise(resolve => {
         ws.on('open', () => resolve(ws));
@@ -382,7 +362,8 @@ const checkCiPipelineState = async (deploymentSocket: any, endpointId: number) =
             try {
                 let msgTest = msg.toString();
                 let parsedMsg = JSON.parse(msgTest);
-
+                
+                console.log("runstage state: ", parsedMsg);
                 if (msgTest.includes(`"endpointId":${endpointId}`)) {
                     deploymentSocket.off("message", nexLogHandler);
                     deploymentSocket.off("error", errorHandler);
@@ -404,6 +385,71 @@ const checkCiPipelineState = async (deploymentSocket: any, endpointId: number) =
     });
 };
 
+const checkMSDCiPipelineState = async (deploymentSocket: any, endpointId: number, replicaCount: number, runStageServices: any) => {
+    return new Promise((resolve, reject) => {
+
+        let count = 0;
+
+        // all replicas are placed into the empty Array
+        Object.values(runStageServices).forEach((service: any) => {
+            service.replicas = [];
+        });
+        const nexLogHandler = (msg: any) => {
+            try {
+                let msgTest = msg.toString();
+                let parsedMsg = JSON.parse(msgTest);
+            
+                if (msgTest.includes(`"endpointId":${endpointId}`)) {
+                    if (parsedMsg.reply.server !== "codesphere-ide") {
+                        const serverName = parsedMsg.reply.server; 
+                        const hostname = parsedMsg.reply.hostname; 
+            
+                        if (runStageServices[serverName]) {
+                            if (typeof runStageServices[serverName].replicas !== "object" || Array.isArray(runStageServices[serverName].replicas)) {
+                                runStageServices[serverName].replicas = {};
+                            }
+            
+                            if (!runStageServices[serverName].replicas[hostname]) {
+                                runStageServices[serverName].replicas[hostname] = {}; 
+                            }
+            
+                            console.log(
+                                `Hostname ${hostname} wurde zu ${serverName}.replicas hinzugefügt.`
+                            );
+                            count++;
+                        } else {
+                            console.log(`Server ${serverName} existiert nicht in runStageServices.`);
+                        }
+                    }
+                }
+            
+                if (parsedMsg.reply.server === "codesphere-ide") {
+                    count++;
+                }
+            
+                if (count === replicaCount) {
+                    deploymentSocket.off("message", nexLogHandler);
+                    deploymentSocket.off("error", errorHandler);
+                    console.log("Alle Hostnamen wurden erfolgreich in runStageServices eingetragen.");
+                    console.log("gtt ", runStageServices);
+                    resolve(runStageServices);
+                }
+            } catch (error) {
+                console.error("Error parsing message:", error);
+                reject(error);
+            }
+        };
+
+        const errorHandler = (err: any) => {
+            console.log("Socket exited with error:" + err);
+            reject(err);
+        };
+
+        deploymentSocket.on("message", nexLogHandler);
+        deploymentSocket.on("error", errorHandler);
+    });
+};
+
 const getRemoteURL = async (deploymentSocket: any) => {
     return new Promise((resolve, reject) => {
         const nexLogHandler = (msg: any) => {
@@ -568,6 +614,60 @@ const ciStepHandler = async (deploymentSocket: any, endpointId: number, endpoint
     });
 };
 
+const ciStepHandlerMSD = async (deploymentSocket: any, replicaStepEndpoints: Record<string, { steps: Record<number, number> }>, postMessage: Function, stage: string) => {
+    return new Promise((resolve, reject) => {
+        const ciStageStatus = (msg: any) => {
+            try {
+                let msgTest = msg.toString();
+                let parsedMsg = JSON.parse(msgTest);
+
+                console.log("CiStepHandlerMSD: ", parsedMsg);
+                // Iteriere über alle ReplicaKeys
+                for (const replicaKey in replicaStepEndpoints) {
+                    const steps = replicaStepEndpoints[replicaKey].steps;
+
+                    // Überprüfe alle Schritte für das aktuelle Replica
+                    for (const stepIndex in steps) {
+                        const endpointId = steps[stepIndex];  // EndpointId für diesen Step und Replica
+
+                        // Überprüfe, ob die msg die richtige endpointId enthält
+                        if (msgTest.includes(`"endpointId":${endpointId}`)) {
+                            if (parsedMsg.reply) {
+                                console.log("parsedMsg LOGS: ", parsedMsg.reply[0].data, "\nreplicaKey", replicaKey, "\nstepIndex", stepIndex, "\nendpointId", endpointId);
+                                
+                                postMessage('updateCiPipelineLogsMSD', 
+                                    {
+                                        log: parsedMsg.reply[0].data, 
+                                        stepIndex: stepIndex, 
+                                        replicaKey: replicaKey
+                                    } 
+                                );
+                            }
+                        }
+                    }
+                }
+            } catch (error) {
+                console.error("Error parsing message:", error);
+                reject(error);
+            }
+        };
+
+        const errorHandler = (err: any) => {
+            console.log("Socket exited with error:" + err);
+            reject(err);
+        };
+        
+        
+        deploymentSocket.on("message", ciStageStatus);
+        deploymentSocket.on("error", errorHandler);
+
+        const cleanup = () => {
+            deploymentSocket.off("message", ciStageStatus);
+            deploymentSocket.off("error", errorHandler);
+        };
+    });
+};
+
 const ciStageStatusHandler = async (deploymentSocket: any, endpointId: number, postMessage: Function, stage: string) => {
     return new Promise((resolve, reject) => {
         const ciStageStatus = (msg: any) => {
@@ -615,7 +715,7 @@ const ciStageStatusHandler = async (deploymentSocket: any, endpointId: number, p
                     if (parsedMsg.reply.state === "running") {
                         
                         postMessage('updateCiStageStatus', {status: parsedMsg.reply.steps, stage: stage, state: parsedMsg.reply.state} );
-                        
+                        // FIXME
                     }
                 }
             } catch (error) {
@@ -635,6 +735,58 @@ const ciStageStatusHandler = async (deploymentSocket: any, endpointId: number, p
     });
 };
 
+const ciStageStatusHandlerMSD = async (deploymentSocket: any, endpointArrayReplica: Record<string, number>, postMessage: Function, stage: string) => {
+    return new Promise((resolve, reject) => {
+        const ciStageStatus = (msg: any) => {
+            try {
+                let msgTest = msg.toString();
+                let parsedMsg = JSON.parse(msgTest);
+                console.log('loooool', parsedMsg);
+                console.log('loooool', endpointArrayReplica);
+
+                if (Object.values(endpointArrayReplica).includes(parsedMsg.endpointId)) {
+                    // Zugehörigen replicaKey finden
+                    const replicaKey = Object.entries(endpointArrayReplica).find(
+                        ([key, value]) => value === parsedMsg.endpointId
+                    )?.[0]; // Der Key wird hier extrahiert
+
+                    if (parsedMsg.reply) {
+                        console.log(
+                            'parsedMsg.reply: ',
+                            parsedMsg.reply,
+                            '\nreplicaKey: ',
+                            replicaKey,
+                            '\nendpointId',
+                            parsedMsg.endpointId // Ausgabe des replicaKeys
+                        );
+                        //TODO: use postMessage to send data to webview, so that the run Stage status can be updated
+                        postMessage('updateCiStageStatusMSD', 
+                            {
+                                stateReplica: parsedMsg.reply.state, 
+                                stepsReplica: parsedMsg.reply.steps, 
+                                replicaKey: replicaKey
+                            } 
+                        );
+                    }
+                }
+            } catch (error) {
+                console.error("Error parsing message:", error);
+                reject(error);
+            }
+        };
+
+        const errorHandler = (err: any) => {
+            console.log("Socket exited with error:" + err);
+            reject(err);
+        };
+        
+        
+        deploymentSocket.on("message", ciStageStatus);
+        deploymentSocket.on("error", errorHandler);
+    });
+};
+
+
 const getSubdomainStructure = async (deploymentSocket: any, endpointId: any) => {
     return new Promise((resolve, reject) => {
         const nexLogHandler = (msg: any) => {
@@ -664,6 +816,33 @@ const getSubdomainStructure = async (deploymentSocket: any, endpointId: any) =>
 };
 
 
+const landscapeShape = async (deploymentSocket: any, endpointId: any) => {
+    return new Promise((resolve, reject) => {
+        const nexLogHandler = (msg: any) => {
+            try {
+                let msgTest = msg.toString();
+                let parsedMsg = JSON.parse(msgTest);
+                if (msgTest.includes(`"endpointId":${endpointId}`)) {
+                    deploymentSocket.off("message", nexLogHandler);
+                    resolve(parsedMsg.reply);
+                }
+                
+            } catch (error) {
+                console.error("Error parsing message:", error);
+                reject(error);
+            }
+        };
+
+        const errorHandler = (err: any) => {
+            console.log("Socket exited with error:" + err);
+            reject(err);
+        };
+        
+        deploymentSocket.on("message", nexLogHandler);
+        deploymentSocket.on("error", errorHandler);
+    });
+};
+
 
                 
 module.exports = {
@@ -681,13 +860,18 @@ module.exports = {
     waitForTerminal,
     waitForCiPipeline,
     checkCiPipelineState,
+    checkMSDCiPipelineState,
     getRemoteURL,
     getGitHubToken,
     isVSIX,
     checkCiPipelineStructure,
     ciStepHandler,
+    ciStepHandlerMSD,
     ciStageStatusHandler,
+    ciStageStatusHandlerMSD,
     getSubdomainStructure,
+    landscapeShape,
     getUaSocket: () => uaSocket,
-    getDsSocket: () => dsSocket
+    getDsSocket: () => dsSocket,
+    getWsSocket: () => wsSocket
 };
\ No newline at end of file
diff --git a/webviews/components/CiPipeline.svelte b/webviews/components/CiPipeline.svelte
index 5f9034c..36d7fe2 100644
--- a/webviews/components/CiPipeline.svelte
+++ b/webviews/components/CiPipeline.svelte
@@ -451,7 +451,19 @@
     .circle-container {
         position: relative;
         width: 20px; 
-        height: 20px; 
+        height: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center; 
+    }
+
+    .circle-container-stages {
+        position: relative;
+        width: 40px; 
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center; 
     }
 
     .inner-circle {
@@ -518,6 +530,26 @@
         }
     }
 
+    .loader {
+    width: 70%;
+    height: 70%;
+    border: 2px solid rgba(128, 128, 128, 0.2);
+    border-bottom-color: #814BF6;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 2s linear infinite;
+    }
+
+    @keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+    } 
+
     .animation-container {
         display: flex;
         flex-direction: row;
@@ -549,7 +581,7 @@
         flex-direction: column;
         justify-content: space-between;
         margin-top: 10px;
-        width: 33%;
+        width: 300px;
     }
 
     .pipelineStageTitle {
@@ -623,6 +655,7 @@
         display: flex;
         gap: 12px;
         align-items: center;
+        height: 40px;
     }
 
     .ci-pipeline-container {
@@ -794,9 +827,8 @@
             {#key prepareStageSate}
                 {#if prepareStageSate}
                     <div class="animation-container">
-                        <div class="circle-container">
-                            <div class="inner-circle" class:animate={animateCircles}></div>
-                            <div class="outer-circle" class:animate={animateCircles}></div>
+                        <div class="circle-container-stages">
+                            <span class="loader"></span>
                         </div>
                     </div>
                     {#if animateCircles} 
@@ -820,9 +852,8 @@
             {#key testStageSate}
                 {#if testStageSate}
                     <div class="animation-container">
-                        <div class="circle-container">
-                            <div class="inner-circle" class:animate={animateCircles}></div>
-                            <div class="outer-circle" class:animate={animateCircles}></div>
+                        <div class="circle-container-stages">
+                            <span class="loader"></span>
                         </div>
                     </div>
                     {#if animateCircles} 
@@ -843,9 +874,8 @@
             {#key runStageSate}
                 {#if runStageSate}
                     <div class="animation-container" style="padding-left: 5px; padding-right:5px;">
-                        <div class="circle-container">
-                            <div class="inner-circle" class:animate={animateCircles}></div>
-                            <div class="outer-circle" class:animate={animateCircles}></div>
+                        <div class="circle-container-stages">
+                            <span class="loader"></span>
                         </div>
                     </div>
                     {#if animateCircles} 
@@ -898,8 +928,7 @@
                             {:else if step.state == 'running'}
                                 <div class="animation-container">
                                     <div class="circle-container">
-                                        <div class="inner-circle" class:animate={animateCircles}></div>
-                                        <div class="outer-circle" class:animate={animateCircles}></div>
+                                        <span class="loader"></span>
                                     </div>
                                 </div>
                                 {#if animateCircles} 
@@ -961,8 +990,7 @@
                             {:else if step.state == 'running'}
                                 <div class="animation-container">
                                     <div class="circle-container">
-                                        <div class="inner-circle" class:animate={animateCircles}></div>
-                                        <div class="outer-circle" class:animate={animateCircles}></div>
+                                        <span class="loader"></span>
                                     </div>
                                 </div>
                                 {#if animateCircles} 
@@ -1024,8 +1052,7 @@
                             {:else if step.state == 'running'}
                                 <div class="animation-container">
                                     <div class="circle-container">
-                                        <div class="inner-circle" class:animate={animateCircles}></div>
-                                        <div class="outer-circle" class:animate={animateCircles}></div>
+                                        <span class="loader"></span>
                                     </div>
                                 </div>
                                 {#if animateCircles} 
diff --git a/webviews/components/MSDCiPipeline.svelte b/webviews/components/MSDCiPipeline.svelte
new file mode 100644
index 0000000..4ceb63a
--- /dev/null
+++ b/webviews/components/MSDCiPipeline.svelte
@@ -0,0 +1,1556 @@
+<!-- TODO: open log stream on Mount so that those steams only opens once -->
+<!-- advantage:  the state and the of the Ci-Pipeline is hooked even if we open the ci-Pipeline mid execution (no need to restart for logs and changing state)-->
+
+<!-- IDEA: when a step of a replica changes from successful to running, delete its log content. Problem: is the log stream still open or is it closed when successfull? does it need to reopened again on restart? -->
+<!-- TODO: fix known issues that msd set ups cant load if the MSD is too huge (too many websocket connections at the same time?)-->
+
+<!-- TODO: manage the open steps during ci-pipeline execution: close the steps which were successfull. open the current running step. close all steps when failure. on service restart, open the first step again. on service restart, delete logs of service-->
+
+<!-- TODO: add seperator lines like codesphere cloud -->
+
+<!-- TODO: change grey to codesphere purple when hovering/selecting over waiting ci-pipeline steps (like codespjhere cloud)-->
+
+<!-- TODO: adjust terminal log window size. no overflow horizontally. if terminal log is too wide, then add scoll bar -->
+<script>
+    import { onMount } from "svelte";
+    import * as vscode from "vscode";
+    import AnsiToHtml from 'ansi-to-html';
+    import "vscode-webview";
+
+
+    let CIArray = {};
+    let prepareStageSteps = [];
+    let testStageSteps = [];
+    $: runStageServices = [];
+    let currentWorkspace;
+    let teamId;
+    let dcId;
+    let selectedStage = 'prepare';
+    let showPrepare = false;
+    let showTest = false;
+    let showRun = false;
+    let animateCircles = false; 
+    $: prepareStageSate = false;
+    let prepareStageSuccess = ''; 
+    $: testStageSate = false;
+    let testStageSuccess = '';
+    $: runStageSate = false;
+    let runStageSuccess = '';
+    let isActiveprepare = true;
+    let isActivetest = false;
+    let isActiveRun = false;
+    let stagelength;
+    let stageRunning = [];
+    let showService;
+
+    let optionsMSD = {
+                        fg: '#FFF',
+                        bg: '#000',
+                        newline: false,
+                        escapeXML: false,
+                        stream: false
+                    };
+    let ansiConverterMSD = new AnsiToHtml(optionsMSD);
+
+    onMount(() => {
+        window.addEventListener('message', event => {
+            const message = event.data; 
+            switch (message.type) {
+                case 'currentWorkspace':
+                    currentWorkspace = message.value.currentWorkspace;
+                    teamId = message.value.teamId;
+                    dcId = message.value.dcId;
+
+                    console.log("currentWorkspace", currentWorkspace);
+                    console.log("teamId", teamId);
+                    console.log("dcId", dcId);
+                    
+                    vscode.postMessage({
+                        type: 'getCiPipelineStages',
+                        value: {
+                            dataCenterId: dcId,
+                            workspaceId: currentWorkspace,
+                            origin: 'msd',
+                            teamId: teamId
+                        }
+                    });
+
+                    break;
+                
+                case 'setActionButtion':
+                    stageRunning = stageRunning.filter(item => item !== message.value.stage)
+                    if (message.value.stage === 'prepare') {
+                        prepareStageSate = false
+                    }
+                    if (message.value.stage === 'test') {
+                        testStageSate = false
+                    }
+                    if (message.value.stage === 'run') {
+                        runStageSate = false
+                    }
+                    break;
+
+                case 'CIPipelineStages':
+                    CIArray = JSON.parse(message.value.CIArray);
+                    prepareStageSteps = CIArray.prepare.steps;
+                    testStageSteps = CIArray.test.steps;
+                    // count replica in CIArray.run.foreach(service => service.replicas)
+                    let replicaCount = 1;  // bc ide is always deployed
+                    for (const service of Object.values(CIArray.run)) {
+                        let replicas = service.replicas;
+                        console.log("replicas", replicas);
+                        replicaCount += replicas;
+                    }
+                    
+                    console.log("replicaCount", replicaCount);
+                    runStageServices = CIArray.run;
+
+                    console.log("runstage", runStageServices);
+
+                    vscode.postMessage({
+                        type: 'getCiStageStatus',
+                        value: {
+                            workspaceId: currentWorkspace,
+                            datacenterId: dcId,
+                            runStageServices: runStageServices,
+                            origin: 'msd',
+                            replicaCount: replicaCount
+                        }
+                    });
+
+                    break;
+                
+                case 'ciPipelineFinished':
+                    if (message.value.stage === 'prepare') {
+                        prepareStageSate = false;
+                        prepareStageSuccess = message.value.result;
+                    } else if (message.value.stage === 'test') {
+                        testStageSate = false;
+                        testStageSuccess = message.value.result;
+                    } else if (message.value.stage === 'run') {
+                        runStageSate = false;
+                        // runStageSuccess = message.value.result;
+                    }
+                    break;
+                case 'ciPipelineStatus':
+                    if (message.value.dynamic) {
+                        console.log("dynamic: ", message.value.dynamic);
+                        switch (message.value.dynamic) {
+                            case 'prepare':
+                                prepareStageSuccess = message.value.prepare.state;
+                                prepareStageSteps.forEach(( step, index) => {
+                                    Object.assign(step, message.value.prepare.steps[index]);
+                                });
+                                if (prepareStageSuccess === 'running') {
+                                    prepareStageSate = true;
+                                    stageRunning = [...stageRunning, 'prepare']
+
+                                }
+                                if (prepareStageSuccess === 'success' || prepareStageSuccess === 'failure') {
+                                    prepareStageSate = false;
+                                }
+                                break;
+                            case 'test':
+                                testStageSuccess = message.value.test.state;
+                                testStageSteps.forEach(( step, index) => {
+                                    Object.assign(step, message.value.test.steps[index]);
+                                });
+                                if (testStageSuccess === 'running') {
+                                    testStageSate = true;
+                                    stageRunning = [...stageRunning, 'test']
+
+                                }
+                                if (testStageSuccess === 'success' || testStageSuccess === 'failure') {
+                                    testStageSate = false;
+                                }
+                                break;
+                            case 'run':
+                                // runStageSuccess = message.value.run.state;
+                                console.log("runStageState", runStageSuccess);
+                                runStageSteps.forEach(( step, index) => {
+                                    Object.assign(step, message.value.run.steps[index]);
+                                });
+                                if (runStageSuccess === 'running') {
+                                    runStageSate = true;
+                                    stageRunning = [...stageRunning, 'run']
+                                }
+                                if (runStageSuccess === 'success' || runStageSuccess === 'failure') {
+                                    runStageSate = false;
+                                }
+                                break;
+                        }
+                        break;
+                    }
+                    
+                    if (message.value.dynamic === false && message.value.prepare.state){
+                        console.log("prepare dynamic false", message.value.prepare.state);
+                        prepareStageSuccess = message.value.prepare.state;
+                        prepareStageSteps.forEach(( step, index) => {
+                            Object.assign(step, message.value.prepare.steps[index]);
+                        });
+                        if (prepareStageSuccess === 'running') {
+                            prepareStageSate = true;
+                            stageRunning = [...stageRunning, 'prepare']
+
+                        }
+                        if (prepareStageSuccess === 'success' || prepareStageSuccess === 'failure') {
+                            prepareStageSate = false;
+                        }
+                    }
+
+                    if (message.value.dynamic === false && message.value.test.state){
+                        console.log("test dynamic false", message.value.test.state);
+                        testStageSuccess = message.value.test.state;
+                        testStageSteps.forEach(( step, index) => {
+                            Object.assign(step, message.value.test.steps[index]);
+                        });
+                        if (testStageSuccess === 'running') {
+                            testStageSate = true;
+                            stageRunning = [...stageRunning, 'test']
+
+                        }
+                        if (testStageSuccess === 'success' || testStageSuccess === 'failure') {
+                            testStageSate = false;
+                        }
+                    }
+
+                    if (message.value.dynamic === false && message.value.run){
+                        // TODO: change to msd run stage properties
+                        console.log("run dynamic false", message.value.run);
+                        runStageServices = message.value.run;
+                        console.log("runStageServices111", runStageServices);
+
+
+                         // Standardwert
+                        let hasFailure = false; // Überprüfen, ob ein Replica fehlschlägt
+
+                        for (const serviceName in runStageServices) {
+                            if (runStageServices.hasOwnProperty(serviceName)) {
+                                const service = runStageServices[serviceName];
+                                // Überprüfe, ob replicas existieren
+                                if (service.replicas) {
+                                for (const replicaKey in service.replicas) {
+                                    if (service.replicas.hasOwnProperty(replicaKey)) {
+                                    const replica = service.replicas[replicaKey];
+                                    console.log(replica.state)
+
+                                    // Prüfe den Status des Replicas
+                                    if (replica.state === "running") {
+                                        runStageSuccess = "running";
+                                        break; // Beende die Iteration über replicas
+                                    } else if (replica.state === "failure" || replica.state === "aborted") {
+                                        hasFailure = true;
+                                        console.log("hasFailure: ", hasFailure);
+                                    }
+                                    }
+                                }
+                                }
+
+                                if (runStageSuccess === "running") {
+                                break; // Beende die Iteration über services
+                                }
+                            }
+                        }
+
+                        // Falls kein "running"-State gefunden wurde, überprüfe auf Fehler
+                        if (hasFailure) {
+                        runStageSuccess = "failure";
+                        console.log("runStageSuccess: ", runStageSuccess);
+                        }
+                        
+                        if (runStageSuccess === 'running') {
+                            runStageSate = true;
+                            stageRunning = [...stageRunning, 'run']
+                        }
+                        if (runStageSuccess === 'failure') {
+                            runStageSate = false;
+                            console.log("runStageSate", runStageSate); 
+                            console.log("runStageSuccess", runStageSuccess);   
+                        }
+                        if (!runStageSuccess) {
+                            runStageSate = false;
+                            runStageSuccess = 'success'
+                        }
+                    }
+                    
+                    showPrepare = true;
+                    selectedStage = 'prepare';
+                    showService = Object.entries(runStageServices)[0][0];
+                    console.log("showService", showService);
+                    runStageSate = runStageSate;
+                    runStageSuccess = runStageSuccess;
+                    let i = 112;
+                    let isFirstService = true;
+                    // add an open field to indicate to the ui that this step is closed in the accordion
+                    Object.keys(runStageServices).forEach((key) => {
+                        if (runStageServices[key]?.steps) {
+                            runStageServices[key].steps = runStageServices[key].steps.map((step) => ({
+                                ...step,
+                                open: false
+                            }));
+                        }
+
+                        if (runStageServices[key]?.replicas) {
+                            let isFirstReplica = true; 
+                            Object.keys(runStageServices[key].replicas).forEach(replicaKey => {
+                                let replica = runStageServices[key].replicas[replicaKey];
+
+                                // Set the `show` property for the replica
+                                replica = {
+                                    ...replica,
+                                    show: isFirstReplica
+                                };
+                                isFirstReplica = false;
+
+                                // Add `log` to each step within the replica
+                                if (replica.steps) {
+                                    replica.steps = replica.steps.map(step => {
+                                        const updatedStep = {
+                                            ...step,
+                                            log: ``
+                                        };
+                                        return updatedStep;
+                                    });
+                                    
+                                }
+
+                                // Update the replica in the data structure
+                                runStageServices[key].replicas[replicaKey] = replica;
+                            });
+                        }
+
+                        // Neues `show`-Feld für den aktuellen Service
+                        runStageServices[key].show = isFirstService;
+                        isFirstService = false; // Nach dem ersten Service wird das Flag auf false gesetzt
+                    });
+
+                    console.log("runStageServices111", runStageServices);
+
+                    // add selectedReplica to hightlight the first replica in the run stage
+
+                    break;
+                
+                case 'updateCiStageStatusMSD':
+                    //TODO: manage open/show attribute of steps as well
+                    let stateReplica = message.value.stateReplica;
+                    let stepsReplica = message.value.stepsReplica;
+                    let replicaKey = message.value.replicaKey;
+
+                    console.log("stateReplica", stateReplica);
+                    console.log("stepsReplica", stepsReplica);
+                    console.log("replicaKey", replicaKey);
+                    console.log("runStageServices", runStageServices);
+                    for (const serviceKey in runStageServices) {
+                        const service = runStageServices[serviceKey];
+
+                        if (service.replicas && service.replicas[replicaKey]) {
+                            const replica = service.replicas[replicaKey];
+
+                            if (replica.steps) {
+                                replica.steps.forEach((step, index) => {
+                                    if (stepsReplica[index] && stepsReplica[index].state) {
+                                        step.state = stepsReplica[index].state;
+                                        console.log("step ahaha: ", step);
+                                        if (stepsReplica[index].state === 'running') {
+                                            console.log("step ahaha1: ", step);
+                                            service.steps[index].open = true;
+                                        } else {
+                                            console.log("step ahaha2: ", step);
+                                            service.steps[index].open = false;
+                                        }
+                                        console.log("step ahaha2: ", step);
+
+                                        runStageServices = { ...runStageServices };  
+                                    }
+                                });
+                            }
+
+                            replica.state = stateReplica;
+                            console.log(`Updated replica ${replicaKey}:`, replica);
+
+                            runStageServices[serviceKey] = service;
+                            runStageServices = { ...runStageServices };
+                        }
+                    }
+
+                    
+                    break;
+                case 'updateCiStageStatus':
+                    let stage = message.value.stage;
+                    let status = message.value.status;
+                    let state = message.value.state; // running, success, failure
+                    if (stage === 'prepare') {
+                        let foundWaiting = false;
+                        let openIndex;
+                        let closeIndex;
+                        prepareStageSteps.forEach((step, index) => {
+                            let statusFields = status[index];
+                            
+                            for (let key in statusFields) {
+                                if (statusFields.hasOwnProperty(key) && step.hasOwnProperty(key)) {
+                                    step[key] = statusFields[key];
+                                }
+                            }
+
+                            if (!foundWaiting && step.state === "running") {
+                                openIndex = index
+                                closeIndex = index - 1
+                                foundWaiting = true; ;
+                                prepareStageSteps[closeIndex].open = false;
+                                prepareStageSteps[closeIndex + 1].open = true
+                            }
+                        });
+                        
+                        prepareStageSteps = [...prepareStageSteps];
+                    } else if (stage === 'test') {
+                        let foundWaiting = false;
+                        let openIndex;
+                        let closeIndex;
+                        testStageSteps.forEach((step, index) => {
+                            let statusFields = status[index];
+                            
+                            for (let key in statusFields) {
+                                if (statusFields.hasOwnProperty(key) && step.hasOwnProperty(key)) {
+                                    step[key] = statusFields[key];
+                                }
+                            }
+
+                           
+                            if (!foundWaiting && step.state === "running") {
+                                openIndex = index
+                                closeIndex = index - 1
+                                foundWaiting = true; 
+                                testStageSteps[closeIndex].open = false;
+                                testStageSteps[closeIndex + 1].open = true;
+                            }
+                        });
+                        testStageSteps = [...testStageSteps];
+                    } else if (stage === 'run') {
+                        let foundWaiting = false;
+                        let openIndex;
+                        let closeIndex;
+                        runStageSteps.forEach((step, index) => {
+                            let statusFields = status[index];
+                            
+                            for (let key in statusFields) {
+                                if (statusFields.hasOwnProperty(key) && step.hasOwnProperty(key)) {
+                                    step[key] = statusFields[key];
+                                }
+                            }
+
+                            if (!foundWaiting && step.state === "running") {
+                                openIndex = index
+                                closeIndex = index - 1
+                                foundWaiting = true; 
+                                runStageSteps[closeIndex].open = false;
+                                runStageSteps[closeIndex + 1].open = true;
+                            }
+                        });
+                        runStageSteps = [...runStageSteps];
+                    }
+
+                    break;
+                case 'updateCiPipelineLogsMSD':
+                    console.log("hiii");
+
+                    console.log("stepIndexMSD: ", message.value.stepIndex);
+                    console.log("logTextMSD: ", message.value.log);
+                    console.log("replicaKeyMSD: ", message.value.replicaKey);
+
+                    message.value.log = parseLogs(message.value.log);
+                    message.value.log = ansiConverterMSD.toHtml(message.value.log);
+
+                    for (const serviceKey in runStageServices) {
+                        const service = runStageServices[serviceKey];
+
+                        if (service.replicas && service.replicas[message.value.replicaKey]) {
+                            const replica = service.replicas[message.value.replicaKey];
+
+                            if (replica.steps && replica.steps[message.value.stepIndex]) {
+                                // if (!replica.steps[message.value.stepIndex].log) {
+                                //     replica.steps[message.value.stepIndex].log = ""; 
+                                // }
+                                replica.steps[message.value.stepIndex].log += message.value.log;
+                            }
+                        }
+                    }
+
+                    runStageServices = {...runStageServices};
+
+                    break;
+                case 'updateCiPipelineLogs':
+                    let stepIndex = message.value.step;
+                    let logText = message.value.log;
+                    let stages = message.value.stage;
+
+                    const options = {
+                        fg: '#FFF',
+                        bg: '#000',
+                        newline: false,
+                        escapeXML: false,
+                        stream: false
+                    };
+                    const ansiConverter = new AnsiToHtml(options);
+
+                    if (stages === 'prepare') {
+                        if (!prepareStageSteps[stepIndex].log) {
+                            prepareStageSteps[stepIndex].log = ""; 
+                        }
+                        logText = parseLogs(logText);
+                        let testLog = ansiConverter.toHtml(logText);
+                        prepareStageSteps[stepIndex].log += testLog;
+                        prepareStageSteps = [...prepareStageSteps];
+                    } else if (stages === 'test') {
+                        if (!testStageSteps[stepIndex].log) {
+                            testStageSteps[stepIndex].log = ""; 
+                        }
+                        testStageSteps[stepIndex].log += ansiConverter.toHtml(logText);
+                        testStageSteps = [...testStageSteps];
+                    } else if (stages === 'run') {
+                        if (!runStageSteps[stepIndex].log) {
+                            runStageSteps[stepIndex].log = ""; // Initialisierung des Arrays, falls es noch nicht existiert
+                        }
+                        runStageSteps[stepIndex].log += ansiConverter.toHtml(logText);
+                        runStageSteps = [...runStageSteps];
+                    }
+            
+                };
+        });
+    });
+
+    onMount(console.log("v2 msd set up"));
+    onMount(getCurrentWorkspace());
+
+    function startCiStage(workspaceId, dataCenterId, stage, msd=msd) {
+        // FIXME: prepare and test soesnt work anymore
+        if (stage == "prepare") {
+            stageRunning = [...stageRunning, stage]
+            prepareStageSate = true;
+            prepareStageSuccess = '';
+            stagelength = prepareStageSteps.length
+            prepareStageSteps.forEach((step, index) => {
+                if (step.log) {
+                    step.log = '';
+                }
+                step.open = false
+            });
+
+            if (stagelength > 0) {
+                prepareStageSteps[0].open = true
+            }
+        }
+        if (stage == "test") {
+            stageRunning = [...stageRunning, stage]
+            testStageSate = true;
+            testStageSuccess = '';
+            stagelength = testStageSteps.length
+
+            if (stagelength > 0) {
+                testStageSteps[0].open = true
+            }
+        }
+        if (stage == "run") {
+            stageRunning = [...stageRunning, stage]
+            runStageSate = true;
+            runStageSuccess = '';
+            console.log("runStageServices", msd);
+
+            for (const serviceKey in runStageServices) {
+                const service = runStageServices[serviceKey];
+                
+                if (service.steps && service.steps.length > 0) {
+                    service.steps[0].open = true; 
+                }
+
+                if (service.replicas) {
+                    for (const replicaKey in service.replicas) {
+                        const replica = service.replicas[replicaKey];
+
+                        if (replica.steps) {
+                            replica.steps = replica.steps.map(step => ({
+                                ...step,
+                                log: ' ' 
+                            }));
+                        }
+                    }
+                }
+
+            }
+
+            runStageServices = { ...runStageServices };
+            console.log("test!!!!", runStageServices)
+        }
+        vscode.postMessage({
+            type: 'startCiStage',
+            value: {
+                workspaceId: workspaceId,
+                stage: stage,
+                dataCenterId: dataCenterId,
+                stepcount: stagelength,
+                ...(msd && { msd: msd })
+            }
+        });
+    }
+
+    function stopCiStage(workspaceId, dataCenterId, stage) {
+        vscode.postMessage({
+            type: 'stopCiStage',
+            value: {
+                workspaceId: workspaceId,
+                stage: stage,
+                dataCenterId: dataCenterId
+            }
+        });
+        stageRunning = stageRunning.filter(item => item !== stage)
+    };
+
+    function toggleActive(stage) {
+        if (stage === 'prepare') {
+            isActiveprepare = true;
+            isActivetest = false;
+            isActiveRun = false;
+            selectedStage = 'prepare';
+            showPrepare = true;
+            showTest = false;
+            showRun = false;
+        } else if (stage === 'test') {
+            isActiveprepare = false;
+            isActivetest = true;
+            isActiveRun = false;
+            selectedStage = 'test';
+            showPrepare = false;
+            showTest = true;
+            showRun = false;
+        } else if (stage === 'run') {
+            isActiveprepare = false;
+            isActivetest = false;
+            isActiveRun = true;
+            selectedStage = 'run';
+            showPrepare = false;
+            showTest = false;
+            showRun = true;
+        }
+    }
+
+    function toggleServices(service) {
+        showService = service;
+        Object.entries(runStageServices).forEach(serviceData => {
+            console.log("serviceData", serviceData);
+            console.log("service", service);
+
+            if (serviceData[0] !== service && serviceData[1].show === true) {
+                serviceData[1].show = false;
+                console.log("currentReplica.show2", serviceData);
+            }
+            
+            if (serviceData[0] === service && serviceData[1].show === false) {
+                serviceData[1].show = true; // Aktivieren
+                console.log("currentReplica.show", serviceData[1]);
+            }
+            
+        });
+        runStageServices = { ...runStageServices };
+
+    }
+
+    function toggleReplica(service, replica) {
+        Object.entries(runStageServices[service].replicas).forEach(replicaKey => {
+            console.log("replicaKey", replicaKey);
+            console.log("currentReplicarep", replica);
+
+            if (replicaKey[0] !== replica && replicaKey[1].show === true) {
+                replicaKey[1].show = false;
+                console.log("currentReplica.show2", replicaKey);
+            }
+            
+            if (replicaKey[0] === replica && replicaKey[1].show === false) {
+                replicaKey[1].show = true; // Aktivieren
+                console.log("currentReplica.show", replicaKey[1]);
+            }
+            
+        });
+        runStageServices = { ...runStageServices };
+    }
+
+    
+
+    function toggleAccordion(index, stage, service = null) {
+        if (stage == 'prepare') {
+            if (index >= -1 && index < prepareStageSteps.length +1) {
+                prepareStageSteps[index].open = !prepareStageSteps[index].open;
+            }
+        }
+
+        if (stage == 'test') {
+            if (index >= 0 && index < testStageSteps.length +1) {
+                testStageSteps[index].open = !testStageSteps[index].open;
+            }
+        }
+
+        if (stage == 'run' && service) {
+            if (index >= 0 && index < runStageServices[service].steps.length +1) {
+                runStageServices[service].steps[index].open = !runStageServices[service].steps[index].open;
+            }
+        }
+    }
+
+
+
+    function getCurrentWorkspace() {
+        console.log("getCurrentWorkspace task");
+        vscode.postMessage({
+            type: 'currentWorkspace',
+            value: {
+            }
+        });
+    }
+
+    function parseLogs(logs) {
+        logs = logs.replace(/\n/g, '<br>');
+        return logs;
+    }
+
+</script>
+
+<style>
+    .log {
+        font-size: 12px;
+        margin: 0 0 0 0;
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+    }
+
+    .log br {
+        overflow-x: auto;
+    }
+
+    .circle-container {
+        position: relative;
+        width: 20px; 
+        height: 20px; 
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .circle-container-stages {
+        position: relative;
+        width: 40px; 
+        height: 40px; 
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .inner-circle {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+        background-color: #00BCFF;
+        animation-duration: 1500ms;
+        animation-timing-function: ease-out;
+        animation-fill-mode: both;
+        opacity: calc(1 - 0.1);
+    }
+
+    .outer-circle {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+        background-color: #814BF6;
+        animation-duration: 1500ms;
+        animation-timing-function: ease-in;
+        animation-fill-mode: both;
+        opacity: calc(1 - 0.1);
+    }
+
+    .inner-circle {
+        width: 10px; 
+        height: 10px; 
+        z-index: 1;
+        animation-name: inner-bounce;
+        animation-iteration-count: infinite;
+    }
+
+    .outer-circle {
+        width: 10px; 
+        height: 10px; 
+        z-index: 0;
+        animation-name: outer-bounce;
+        animation-iteration-count: infinite;
+    }
+
+    @keyframes inner-bounce {
+        0%, 100% {
+        width: 10px; 
+        height: 10px; 
+        }
+        50% {
+        width: 5px; 
+        height: 5px; 
+        }
+    }
+
+    @keyframes outer-bounce {
+        0%, 100% {
+        width: 10px; 
+        height: 10px; 
+        }
+        50% {
+        width: 20px; 
+        height: 20px; 
+        }
+    }
+
+    .loader {
+    width: 70%;
+    height: 70%;
+    border: 2px solid rgba(128, 128, 128, 0.2);
+    border-bottom-color: #814BF6;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 2s linear infinite;
+    }
+
+    @keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+    } 
+
+    .animation-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: start;
+        gap: 2px;
+    }
+
+
+    .title-container {
+        display: flex;
+        margin-bottom: 10px;
+        align-items: center;
+        justify-content: start;
+        gap: 10px;
+    }
+
+    .codesphere {
+        max-width: 45px;    
+    }
+
+    .title {
+        font-size: 1.8rem;
+        font-weight: 700;
+        color: white;
+    }
+
+    .ci-pipelineBox {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        margin-top: 10px;
+        width: 300px;
+    }
+
+    .pipelineStageTitle {
+        font-size: 15px;
+        font-weight: bold;
+    }
+
+    .pipelineStage::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        right: 2px; /* Adjust as needed */
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 5px 0 5px 5px;
+        border-color: transparent transparent transparent white;
+        opacity: 0;
+        transform: translateY(-50%);
+    }
+
+    .pipelineStage:hover::before,
+    .pipelineStage.active::before {
+        opacity: 1;
+    }
+
+    .pipelineStage {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        gap: 8px;
+        align-items: center;
+        padding: 16px;
+        border: 1px solid #808080;
+        border-radius: 5px;
+        margin-bottom: 10px;
+        cursor: pointer;
+        transition: background-color 0.3s;
+    }
+
+    .pipelineStage::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 10px;
+        height: 100%;
+        opacity: 0;
+        
+    }
+
+    .pipelineStage:hover::after,
+    .pipelineStage.active::after {
+        opacity: 1;
+    }
+
+    .success::after {
+        background-color: rgba(0, 128, 0, 0.6);
+    }
+
+    .failure::after {
+        background-color: rgba(255, 0, 0, 0.6);
+    }
+
+    .inherit::after {
+        background-color: rgba(128, 128, 128, 0.6);
+    }
+
+    .inherit::after {
+        background-color: rgba(128, 128, 128, 0.6);
+    }
+
+    .pipeline-info {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        height: 40px;
+    }
+
+    .ci-pipeline-container {
+        display: flex;
+        flex-direction: row;
+        gap: 20px;
+        height: full;
+        align-items: start;
+    }
+
+    .ci-pipeline-steps {
+        display: flex;
+        flex-direction: column;
+        width: 66%;
+        margin-top: 10px;
+    }
+
+    .ciPipelineTitle {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: white;
+        margin-bottom: 10px;
+        justify-self:normal;
+    }
+
+    .ciStagesHeadline {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+    }
+
+    .ciStageTitle {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: white;
+        margin-bottom: 10px;
+        justify-self:normal;
+    }
+
+    .accordion-content {
+        display: none;
+    }
+    .accordion-content.show {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        
+    }
+
+    .stepList {
+        position: relative;
+        white-space: nowrap;
+        padding-left: 16px;
+        background-color: black;
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+        width: 100%;
+    }
+
+    .stepList:nth-child(2) {
+        padding-top:8px
+    }
+
+    .stepBox {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        margin-bottom: 5px;
+        overflow-x: auto;
+        white-space: nowrap;
+        padding: 20px;
+    }
+
+    .stepBox pre {
+        overflow-x: auto;
+    }
+    
+    .accordion{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: start;
+        cursor: pointer;
+        font-weight: 600;
+        align-self: start;
+        width: 100%;
+
+    }
+
+    .stepTree {
+        display: flex;
+        flex-direction: column;
+        height: fit-content;
+        gap: 10px;
+    }
+
+    .stepContainer{
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+        gap: 5px;
+        align-items: center;
+        border: 1px solid #80808026;
+        border-width: 1px;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        padding: 10px;
+    }
+
+    .runButton {
+        height: 100%;
+        width: fit-content;
+        display: flex;
+        padding: .25rem .75rem;
+        border: 1px solid rgba(0, 0, 0, 0);
+        transition: all .3s;
+        border-radius: 3px;
+        background-color: #814BF6;
+        border-color: rgba(0, 0, 0, 0);
+    }
+
+    .running {
+        display: none;
+    }
+
+    .stopButton {
+        height: 100%;
+        width: fit-content;
+        display: flex;
+        padding: .25rem .75rem;
+        border: 1px solid rgba(0, 0, 0, 0);
+        transition: all .3s;
+        border-radius: 3px;
+        background-color: #FF5353;
+        border-color: rgba(0, 0, 0, 0);
+    }
+
+    .stop {
+        display: none;
+    }
+
+    .runstage-msd {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+    }
+
+    .runstage-msd > .step-container-msd:last-child {
+        flex-grow: 1;
+    }
+
+    .replica-container {
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+    }
+
+    .step-container-msd {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        
+    }
+
+    .service-container {
+        display: flex;
+        flex-direction: row;
+        gap: 5px;
+        align-items: center;
+        padding: 7px;
+        cursor: pointer;
+    }
+
+    .service-container:hover, .service-container.active:hover{
+        background-color: #e7e7e726;
+        transition: 0.3s; 
+    }
+
+    .service-container.active  {
+        background-color: #a1a1a126;
+        transition: 0.3s; 
+    }
+
+    .replica-steps-container {
+        display: flex;
+        flex-direction: row;
+        padding: 5px;
+        border: 1px solid #80808026;
+        margin-right: 16px;
+        gap: 5px;
+    }
+
+    .replica-step {
+        display: flex;
+        flex-direction: row;
+        gap: 5px;
+        align-items: center;
+        padding: 7px;
+        width: fit-content;
+        border-radius: 2px;
+    }
+
+    .replica-step:hover, .replica-step.active:hover{
+        background-color: #e7e7e726;
+        transition: 0.3s; 
+    }
+
+    .replica-step.active {
+        background-color: #a1a1a126;
+    }
+
+</style>
+
+<div class="title-container">
+    
+    <svg class='codesphere' viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M40 7.86885C22.2545 7.86885 7.86885 22.2545 7.86885 40C7.86885 57.7455 22.2545 72.1311 40 72.1311C57.7455 72.1311 72.1311 57.7455 72.1311 40C72.1311 22.2545 57.7455 7.86885 40 7.86885ZM0 40C0 17.9086 17.9086 0 40 0C62.0914 0 80 17.9086 80 40C80 62.0914 62.0914 80 40 80C17.9086 80 0 62.0914 0 40Z" fill="#814BF6"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M40 25.9016C32.2137 25.9016 25.9016 32.2137 25.9016 40C25.9016 47.7863 32.2137 54.0984 40 54.0984C47.7863 54.0984 54.0984 47.7863 54.0984 40C54.0984 32.2137 47.7863 25.9016 40 25.9016ZM18.0328 40C18.0328 27.8678 27.8678 18.0328 40 18.0328C52.1322 18.0328 61.9672 27.8678 61.9672 40C61.9672 52.1322 52.1322 61.9672 40 61.9672C27.8678 61.9672 18.0328 52.1322 18.0328 40Z" fill="#00BCFF"/>
+    </svg>
+    
+    <h1 class='title'>CI Pipeline</h1>
+</div>
+
+<div class="ci-pipeline-container">
+    <div class="ci-pipelineBox">
+        <h2 class="ciPipelineTitle">
+            Stages
+        </h2>
+        <div class="pipelineStage {prepareStageSuccess === 'success' ? 'success' : (prepareStageSuccess === 'failure' || prepareStageSuccess === 'aborted' ? 'failure' : 'inherit')} {isActiveprepare ? 'active' : ''}" on:click={() => { toggleActive("prepare") }} role="presentation" style="background-color: {prepareStageSuccess === 'success' ? 'rgba(0, 128, 0, 0.6)' : (prepareStageSuccess === 'failure' || prepareStageSuccess === 'aborted' ? 'rgba(255, 0, 0, 0.6)' : 'inherit')}">
+            <div class="pipeline-info">
+                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 66 66" style="enable-background:new 0 0 66 66;" xml:space="preserve" width="24" height="24">
+                    <g>
+                        <path fill="white" d="M43,40H23c-1.7,0-3,1.3-3,3v20c0,1.7,1.3,3,3,3h20c1.7,0,3-1.3,3-3V43C46,41.3,44.7,40,43,40z M40,60H26V46h14V60z M24,40
+                            H1.9C0.9,40,0,40.9,0,41.9V64c0,1.1,0.9,2,2,2h22c1.1,0,2-0.9,2-2V42C26,40.9,25.1,40,24,40z M20,60H6V46h14V60z M46,20H24
+                            c-2.2,0-4,1.8-4,4v22h26V20z M40,40H26V26h14V40z M63,40H43c-1.7,0-3,1.3-3,3v20c0,1.7,1.3,3,3,3h20.9c1.2,0,2.1-0.9,2.1-2.1V43
+                            C66,41.3,64.7,40,63,40z M60,60H46V46h14V60z M66,20H44c-2.2,0-4,1.8-4,4v22h26V20z M60,40H46V26h14V40z M64,0H44c-2.2,0-4,1.8-4,4
+                            v22h26V2C66,0.9,65.1,0,64,0z M60,20H46V6h14V20z"></path>
+                    </g>
+                    </svg>
+                <div class="pipelineStageTitle">Prepare</div>
+            </div>
+            {#key prepareStageSate}
+                {#if prepareStageSate}
+                    <div class="animation-container">
+                        <div class="circle-container-stages">
+                            <span class="loader"></span>
+                        </div>
+                    </div>
+                    {#if animateCircles} 
+                        <script>
+                            startAnimation(); 
+                        </script>
+                    {/if}
+                {/if}
+            {/key}
+        </div>
+        <div class="pipelineStage {testStageSuccess === 'success' ? 'success' : (testStageSuccess === 'failure' || testStageSuccess === 'aborted' ? 'failure' : 'inherit')} {isActivetest ? 'active' : ''}" on:click={() => { toggleActive("test")  }} role="presentation" style="background-color: {testStageSuccess === 'success' ? 'rgba(0, 128, 0, 0.6)' : (testStageSuccess === 'failure' || testStageSuccess === 'aborted' ? 'rgba(255, 0, 0, 0.6)' : 'inherit')}">
+            <div class="pipeline-info">
+                <svg width="24" height="24" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M2.8957 3.93327V5.96872H4.98318V3.93327H2.8957ZM2.5957 2.63327C2.04342 2.63327 1.5957 3.08098 1.5957 3.63327V6.26872C1.5957 6.821 2.04342 7.26872 2.5957 7.26872H5.28318C5.83547 7.26872 6.28318 6.821 6.28318 6.26872V3.63327C6.28318 3.08099 5.83547 2.63327 5.28318 2.63327H2.5957Z"></path>
+                    <path fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M7.56638 8.99432C7.83524 9.2322 7.86034 9.64299 7.62246 9.91185L4.39101 13.564C4.27195 13.6986 4.10251 13.7778 3.92293 13.783C3.74334 13.7882 3.56962 13.7188 3.44301 13.5913L1.79428 11.9313C1.54131 11.6765 1.54272 11.265 1.79743 11.012C2.05214 10.7591 2.46369 10.7605 2.71666 11.0152L3.87683 12.1833L6.64886 9.0504C6.88674 8.78155 7.29753 8.75644 7.56638 8.99432Z"></path>
+                    <path fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M7.1958 4.95096C7.1958 4.59198 7.48682 4.30096 7.8458 4.30096H14.0958C14.4548 4.30096 14.7458 4.59198 14.7458 4.95096C14.7458 5.30995 14.4548 5.60096 14.0958 5.60096H7.8458C7.48682 5.60096 7.1958 5.30995 7.1958 4.95096Z"></path>
+                    <path fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M7.1958 12.0447C7.1958 11.6857 7.48682 11.3947 7.8458 11.3947H14.0958C14.4548 11.3947 14.7458 11.6857 14.7458 12.0447C14.7458 12.4036 14.4548 12.6947 14.0958 12.6947H7.8458C7.48682 12.6947 7.1958 12.4036 7.1958 12.0447Z"></path>
+                </svg>
+                <div class="pipelineStageTitle">Test</div>
+            </div>
+            {#key testStageSate}
+                {#if testStageSate}
+                    <div class="animation-container">
+                        <div class="circle-container-stages">
+                            <span class="loader"></span>
+                        </div>
+                    </div>
+                    {#if animateCircles} 
+                        <script>
+                            startAnimation(); 
+                        </script>
+                    {/if}
+                {/if}
+            {/key}
+        </div>
+        <div class="pipelineStage {runStageSuccess === 'success' ? 'success' : (runStageSuccess === 'failure' || runStageSuccess === 'aborted' ? 'failure' : 'inherit')} {isActiveRun ? 'active' : ''}" on:click={() => { toggleActive("run") }} role="presentation" style="background-color: {runStageSuccess === 'success' ? 'rgba(0, 128, 0, 0.6)' : (runStageSuccess === 'failure' || runStageSuccess === 'aborted' ? 'rgba(255, 0, 0, 0.6)' : 'inherit')}">
+            <div class="pipeline-info">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.50194 4.13286C6.81243 3.95452 7.19458 3.9558 7.50387 4.13622L20.5039 11.7196C20.8218 11.905 21.0122 12.2502 20.9994 12.6181C20.9866 12.986 20.7727 13.3171 20.4426 13.48L7.44261 19.8967C7.13265 20.0497 6.76565 20.0318 6.47208 19.8493C6.17851 19.6668 6 19.3457 6 19V5C6 4.64193 6.19145 4.3112 6.50194 4.13286ZM8 6.74104V17.3912L17.8895 12.5099L8 6.74104Z" fill="white"></path>
+                </svg>
+                <div class="pipelineStageTitle">Run</div>
+            </div>
+            {#key runStageSate}
+                {#if runStageSate}
+                    <div class="animation-container" style="padding-left: 5px; padding-right:5px;">
+                        <div class="circle-container-stages">
+                            <span class="loader"></span>
+                        </div>
+                    </div>
+                    {#if animateCircles} 
+                        <script>
+                            startAnimation(); 
+                        </script>
+                    {/if}
+                {/if}
+            {/key}
+        </div>
+    </div>
+
+    <!-- TODO: add here div which contains each service when run stage is selected-->
+   
+    <div class="ci-pipeline-steps">
+        <div class="ciStagesHeadline">
+            <h2 class="ciStageTitle">{selectedStage.charAt(0).toUpperCase() + selectedStage.slice(1)}</h2>
+            <button class="runButton" class:running={stageRunning.includes(selectedStage)} on:click={() => startCiStage(currentWorkspace, dcId, selectedStage, selectedStage === 'run' ? runStageServices : {})}>Run</button>
+            <button class="stopButton" class:stop={!stageRunning.includes(selectedStage)} on:click={() => stopCiStage(currentWorkspace, dcId, selectedStage)}>Stop</button>
+            <div style="display: flex; justify-content: end; align-content: end;">
+                {#if selectedStage == "run"}
+                    Note: This stage restarts if any step fails.
+                {/if}
+            </div>
+        </div>
+        <div class="stepTree">
+            {#if showPrepare}
+                {#each prepareStageSteps as step, index}
+                    <div class="accordion" on:click={() => toggleAccordion(index, 'prepare')} role="presentation">
+                        
+                        <div class="stepContainer" style="background-color: {(step.state === 'failure' || step.state === 'aborted' ? 'rgba(255, 0, 0, 0.3)' : 'inherit')}; border-color: {(step.state === 'failure' ? 'rgba(255, 0, 0, 0.6)' : '#80808026')}">
+                            <!-- Toggle arrow icon -->
+                            {#if step.open}
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" width="16px" height="16px">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                            </svg>                   
+                            {:else}
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" width="16px" height="16px">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                            </svg>                 
+                            {/if}
+                            {#if step.state === 'success'}
+                                <svg width="15" height="15" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 11.1624C8.8995 11.1624 11.25 8.81185 11.25 5.91235C11.25 3.01286 8.8995 0.662354 6 0.662354C3.10051 0.662354 0.75 3.01286 0.75 5.91235C0.75 8.81185 3.10051 11.1624 6 11.1624ZM3.37436 5.2561L4.81811 6.89673L8.62436 3.61548L9.60873 4.59985L4.81811 8.86548L2.38998 6.24048L3.37436 5.2561Z" fill="currentColor"></path>
+                                </svg>
+                            {:else if step.state == 'failure' || step.state == 'aborted'}
+                                <svg width="15" height="15" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 10.1875C8.36102 10.1875 10.275 8.27349 10.275 5.91248C10.275 3.55146 8.36102 1.63748 6 1.63748C3.63898 1.63748 1.725 3.55146 1.725 5.91248C1.725 8.27349 3.63898 10.1875 6 10.1875ZM6 11.1625C8.8995 11.1625 11.25 8.81197 11.25 5.91248C11.25 3.01298 8.8995 0.662476 6 0.662476C3.10051 0.662476 0.75 3.01298 0.75 5.91248C0.75 8.81197 3.10051 11.1625 6 11.1625Z" fill="currentColor"></path>
+                                    <path d="M6.65625 7.88123C6.65625 8.24366 6.36244 8.53748 6 8.53748C5.63756 8.53748 5.34375 8.24366 5.34375 7.88123C5.34375 7.51879 5.63756 7.22498 6 7.22498C6.36244 7.22498 6.65625 7.51879 6.65625 7.88123Z" fill="currentColor"></path>
+                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.99922 3.45618C6.26846 3.45618 6.48672 3.67444 6.48672 3.94368V5.91243C6.48672 6.18167 6.26846 6.39993 5.99922 6.39993C5.72998 6.39993 5.51172 6.18167 5.51172 5.91243V3.94368C5.51172 3.67444 5.72998 3.45618 5.99922 3.45618Z" fill="currentColor"></path>
+                                </svg>
+                            {:else if step.state == 'running'}
+                                <div class="animation-container">
+                                    <div class="circle-container">
+                                        <span class="loader"></span>
+                                    </div>
+                                </div>
+                                {#if animateCircles} 
+                                    <script>
+                                        startAnimation(); 
+                                    </script>
+                                {/if}
+                            {:else if step.state == 'waiting'}
+                                <svg width="15" height="15" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.00122 13.5833C11.1492 13.5833 13.7012 11.0313 13.7012 7.88327C13.7012 4.73525 11.1492 2.18327 8.00122 2.18327C4.8532 2.18327 2.30122 4.73525 2.30122 7.88327C2.30122 11.0313 4.8532 13.5833 8.00122 13.5833ZM8.00122 14.8833C11.8672 14.8833 15.0012 11.7493 15.0012 7.88327C15.0012 4.01728 11.8672 0.88327 8.00122 0.88327C4.13523 0.88327 1.00122 4.01728 1.00122 7.88327C1.00122 11.7493 4.13523 14.8833 8.00122 14.8833Z" fill="currentColor"></path>
+                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.85156 5.7237C5.85156 4.62442 6.74271 3.73328 7.84199 3.73328H8.29067C9.59456 3.73328 10.6516 4.79028 10.6516 6.09417C10.6516 6.89174 10.2387 7.63248 9.56035 8.05196L9.24535 8.24675C8.87621 8.47503 8.65152 8.87812 8.6515 9.31214L8.65149 9.38332C8.65147 9.7423 8.36044 10.0333 8.00145 10.0333C7.64247 10.0333 7.35147 9.74222 7.35149 9.38324L7.3515 9.31206C7.35155 8.42763 7.8094 7.60625 8.56162 7.14108L8.87661 6.94629C9.17186 6.76371 9.35156 6.44131 9.35156 6.09417C9.35156 5.50825 8.87659 5.03328 8.29067 5.03328H7.84199C7.46068 5.03328 7.15156 5.34239 7.15156 5.7237V5.88328C7.15156 6.24226 6.86055 6.53328 6.50156 6.53328C6.14258 6.53328 5.85156 6.24226 5.85156 5.88328V5.7237Z" fill="currentColor"></path>
+                                    <path d="M8.87622 11.2583C8.87622 11.7415 8.48447 12.1333 8.00122 12.1333C7.51797 12.1333 7.12622 11.7415 7.12622 11.2583C7.12622 10.775 7.51797 10.3833 8.00122 10.3833C8.48447 10.3833 8.87622 10.775 8.87622 11.2583Z" fill="currentColor"></path>
+                                </svg>
+                            {/if}
+                            {#if step.name == undefined}
+                                <span class="">{step.command}</span>
+                            {:else}
+                                <span class="">{step.name}</span>
+                            {/if}
+                        </div>
+                        <div class="stepList accordion-content" class:show={step.open}>
+                            <div class="stepBox">
+                                {#if step.log}
+                                <pre class="log">
+                                    {@html step.log}
+                                </pre>
+                                {/if}
+                            </div>
+                        </div>
+                    </div>
+                {/each}
+            {/if}
+
+            {#if showTest }
+                {#each testStageSteps as step, index}
+                    <div class="accordion" on:click={() => toggleAccordion(index, 'test')} role="presentation">
+                        
+                        <div class="stepContainer" style="background-color: {(step.state === 'failure' ? 'rgba(255, 0, 0, 0.6)' : 'inherit')}; border-color: {(step.state === 'failure' ? 'rgba(255, 0, 0, 0.6)' : '#80808026')}">
+                            <!-- Toggle arrow icon -->
+                            {#if step.open}
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" width="16px" height="16px">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                            </svg>                   
+                            {:else}
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" width="16px" height="16px">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                            </svg>                 
+                            {/if}
+                            {#if step.state === 'success'}
+                                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 11.1624C8.8995 11.1624 11.25 8.81185 11.25 5.91235C11.25 3.01286 8.8995 0.662354 6 0.662354C3.10051 0.662354 0.75 3.01286 0.75 5.91235C0.75 8.81185 3.10051 11.1624 6 11.1624ZM3.37436 5.2561L4.81811 6.89673L8.62436 3.61548L9.60873 4.59985L4.81811 8.86548L2.38998 6.24048L3.37436 5.2561Z" fill="currentColor"></path>
+                                </svg>
+                            {:else if step.state == 'failure'}
+                                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 10.1875C8.36102 10.1875 10.275 8.27349 10.275 5.91248C10.275 3.55146 8.36102 1.63748 6 1.63748C3.63898 1.63748 1.725 3.55146 1.725 5.91248C1.725 8.27349 3.63898 10.1875 6 10.1875ZM6 11.1625C8.8995 11.1625 11.25 8.81197 11.25 5.91248C11.25 3.01298 8.8995 0.662476 6 0.662476C3.10051 0.662476 0.75 3.01298 0.75 5.91248C0.75 8.81197 3.10051 11.1625 6 11.1625Z" fill="currentColor"></path>
+                                    <path d="M6.65625 7.88123C6.65625 8.24366 6.36244 8.53748 6 8.53748C5.63756 8.53748 5.34375 8.24366 5.34375 7.88123C5.34375 7.51879 5.63756 7.22498 6 7.22498C6.36244 7.22498 6.65625 7.51879 6.65625 7.88123Z" fill="currentColor"></path>
+                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.99922 3.45618C6.26846 3.45618 6.48672 3.67444 6.48672 3.94368V5.91243C6.48672 6.18167 6.26846 6.39993 5.99922 6.39993C5.72998 6.39993 5.51172 6.18167 5.51172 5.91243V3.94368C5.51172 3.67444 5.72998 3.45618 5.99922 3.45618Z" fill="currentColor"></path>
+                                </svg>
+                            {:else if step.state == 'running'}
+                                <div class="animation-container">
+                                    <div class="circle-container">
+                                        <span class="loader"></span>
+                                    </div>
+                                </div>
+                                {#if animateCircles} 
+                                    <script>
+                                        startAnimation(); 
+                                    </script>
+                                {/if}
+                            {:else if step.state == 'waiting'}
+                                <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.00122 13.5833C11.1492 13.5833 13.7012 11.0313 13.7012 7.88327C13.7012 4.73525 11.1492 2.18327 8.00122 2.18327C4.8532 2.18327 2.30122 4.73525 2.30122 7.88327C2.30122 11.0313 4.8532 13.5833 8.00122 13.5833ZM8.00122 14.8833C11.8672 14.8833 15.0012 11.7493 15.0012 7.88327C15.0012 4.01728 11.8672 0.88327 8.00122 0.88327C4.13523 0.88327 1.00122 4.01728 1.00122 7.88327C1.00122 11.7493 4.13523 14.8833 8.00122 14.8833Z" fill="currentColor"></path>
+                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.85156 5.7237C5.85156 4.62442 6.74271 3.73328 7.84199 3.73328H8.29067C9.59456 3.73328 10.6516 4.79028 10.6516 6.09417C10.6516 6.89174 10.2387 7.63248 9.56035 8.05196L9.24535 8.24675C8.87621 8.47503 8.65152 8.87812 8.6515 9.31214L8.65149 9.38332C8.65147 9.7423 8.36044 10.0333 8.00145 10.0333C7.64247 10.0333 7.35147 9.74222 7.35149 9.38324L7.3515 9.31206C7.35155 8.42763 7.8094 7.60625 8.56162 7.14108L8.87661 6.94629C9.17186 6.76371 9.35156 6.44131 9.35156 6.09417C9.35156 5.50825 8.87659 5.03328 8.29067 5.03328H7.84199C7.46068 5.03328 7.15156 5.34239 7.15156 5.7237V5.88328C7.15156 6.24226 6.86055 6.53328 6.50156 6.53328C6.14258 6.53328 5.85156 6.24226 5.85156 5.88328V5.7237Z" fill="currentColor"></path>
+                                    <path d="M8.87622 11.2583C8.87622 11.7415 8.48447 12.1333 8.00122 12.1333C7.51797 12.1333 7.12622 11.7415 7.12622 11.2583C7.12622 10.775 7.51797 10.3833 8.00122 10.3833C8.48447 10.3833 8.87622 10.775 8.87622 11.2583Z" fill="currentColor"></path>
+                                </svg>
+                            {/if}
+                            {#if step.name == undefined}
+                                <span class="">{step.command}</span>
+                            {:else}
+                                <span class="">{step.name}</span>
+                            {/if}
+                        </div>
+                        <div class="stepList accordion-content" class:show={step.open}>
+                            <div class="stepBox">
+                                {#if step.log}
+                                <pre class='log'>
+                                    {@html step.log}
+                                </pre>
+                                {/if}
+                            </div>
+                        </div>
+                    </div>
+                {/each}
+            {/if}
+
+            {#if showRun }
+                <div class="runstage-msd">
+                    <!-- TODO: add color depending on failure -->
+
+                    <div class="replica-container">
+                        {#each Object.entries(runStageServices) as service, index}
+                                <div class="service-container {service[1].show ? 'active' : ''}" on:click={() => toggleServices(service[0])} role="presentation">
+                                        {#if !Object.values(service[1].replicas).some(replica => replica.state === 'aborted' || replica.state === 'failure')}
+                                            {#if Object.values(service[1].replicas).every(replica => replica.state === "success")}
+                                                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 11.1624C8.8995 11.1624 11.25 8.81185 11.25 5.91235C11.25 3.01286 8.8995 0.662354 6 0.662354C3.10051 0.662354 0.75 3.01286 0.75 5.91235C0.75 8.81185 3.10051 11.1624 6 11.1624ZM3.37436 5.2561L4.81811 6.89673L8.62436 3.61548L9.60873 4.59985L4.81811 8.86548L2.38998 6.24048L3.37436 5.2561Z" fill="currentColor"></path>
+                                                </svg>
+                                            {:else if Object.values(service[1].replicas).every(replica => replica.state === 'waiting')}
+                                                <svg width="16" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.00122 13.5833C11.1492 13.5833 13.7012 11.0313 13.7012 7.88327C13.7012 4.73525 11.1492 2.18327 8.00122 2.18327C4.8532 2.18327 2.30122 4.73525 2.30122 7.88327C2.30122 11.0313 4.8532 13.5833 8.00122 13.5833ZM8.00122 14.8833C11.8672 14.8833 15.0012 11.7493 15.0012 7.88327C15.0012 4.01728 11.8672 0.88327 8.00122 0.88327C4.13523 0.88327 1.00122 4.01728 1.00122 7.88327C1.00122 11.7493 4.13523 14.8833 8.00122 14.8833Z" fill="currentColor"></path>
+                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.85156 5.7237C5.85156 4.62442 6.74271 3.73328 7.84199 3.73328H8.29067C9.59456 3.73328 10.6516 4.79028 10.6516 6.09417C10.6516 6.89174 10.2387 7.63248 9.56035 8.05196L9.24535 8.24675C8.87621 8.47503 8.65152 8.87812 8.6515 9.31214L8.65149 9.38332C8.65147 9.7423 8.36044 10.0333 8.00145 10.0333C7.64247 10.0333 7.35147 9.74222 7.35149 9.38324L7.3515 9.31206C7.35155 8.42763 7.8094 7.60625 8.56162 7.14108L8.87661 6.94629C9.17186 6.76371 9.35156 6.44131 9.35156 6.09417C9.35156 5.50825 8.87659 5.03328 8.29067 5.03328H7.84199C7.46068 5.03328 7.15156 5.34239 7.15156 5.7237V5.88328C7.15156 6.24226 6.86055 6.53328 6.50156 6.53328C6.14258 6.53328 5.85156 6.24226 5.85156 5.88328V5.7237Z" fill="currentColor"></path>
+                                                    <path d="M8.87622 11.2583C8.87622 11.7415 8.48447 12.1333 8.00122 12.1333C7.51797 12.1333 7.12622 11.7415 7.12622 11.2583C7.12622 10.775 7.51797 10.3833 8.00122 10.3833C8.48447 10.3833 8.87622 10.775 8.87622 11.2583Z" fill="currentColor"></path>
+                                                </svg>
+                                            {:else}
+                                                <div class="animation-container" style="padding-left: 5px; padding-right:5px;">
+                                                    <div class="circle-container">
+                                                        <span class="loader"></span>
+                                                    </div>
+                                                </div>
+                                                {#if animateCircles} 
+                                                    <script>
+                                                        startAnimation(); 
+                                                    </script>
+                                                {/if}
+                                            {/if} 
+                                        {:else}
+                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                <path d="M5.50507 5.50503C5.77844 5.23166 6.22166 5.23166 6.49502 5.50503L8.00005 7.01005L9.50507 5.50503C9.77844 5.23166 10.2217 5.23166 10.495 5.50503C10.7684 5.7784 10.7684 6.22161 10.495 6.49498L8.99 8L10.495 9.50503C10.7684 9.7784 10.7684 10.2216 10.495 10.495C10.2217 10.7683 9.77844 10.7683 9.50507 10.495L8.00005 8.98995L6.49502 10.495C6.22166 10.7683 5.77844 10.7683 5.50507 10.495C5.23171 10.2216 5.23171 9.7784 5.50507 9.50503L7.0101 8L5.50507 6.49498C5.23171 6.22161 5.23171 5.7784 5.50507 5.50503Z" fill="currentColor"></path>
+                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM13.8 8C13.8 11.2033 11.2033 13.8 8 13.8C4.79675 13.8 2.2 11.2033 2.2 8C2.2 4.79675 4.79675 2.2 8 2.2C11.2033 2.2 13.8 4.79675 13.8 8Z" fill="currentColor"></path>
+                                            </svg>
+                                        {/if}
+                                    <span>{service[0]}</span>
+                                </div>
+                        {/each}
+                    </div>
+                    
+                    <!-- TODO: add color depending on failure -->
+                    
+                    <div class="step-container-msd">
+                        {#each Object.entries(runStageServices) as service, index}
+                            {#if service[0] === showService}    
+                                {#each service[1].steps as step, indexStep}
+                                    <div class="accordion">
+                                            <div class="stepContainer" on:click={() => toggleAccordion(indexStep, 'run', service = service[0])} role="presentation">
+                                                <!-- Toggle arrow icon -->
+                                                
+                                                 {#if step.open}
+                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" width="16px" height="16px">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                                                </svg>                   
+                                                {:else}
+                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" width="16px" height="16px">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                                                </svg>                 
+                                                {/if}
+                                                {#if Object.values(service[1].replicas).every(replica =>
+                                                    replica.steps[indexStep].state === 'success')
+                                                }
+                                                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6 11.1624C8.8995 11.1624 11.25 8.81185 11.25 5.91235C11.25 3.01286 8.8995 0.662354 6 0.662354C3.10051 0.662354 0.75 3.01286 0.75 5.91235C0.75 8.81185 3.10051 11.1624 6 11.1624ZM3.37436 5.2561L4.81811 6.89673L8.62436 3.61548L9.60873 4.59985L4.81811 8.86548L2.38998 6.24048L3.37436 5.2561Z" fill="currentColor"></path>
+                                                    </svg>
+                                                {:else if Object.values(service[1].replicas).some(replica =>
+                                                    replica.steps[indexStep].state === 'failure' ||
+                                                    replica.steps[indexStep].state === 'aborted')
+                                                }
+                                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                        <path d="M5.50507 5.50503C5.77844 5.23166 6.22166 5.23166 6.49502 5.50503L8.00005 7.01005L9.50507 5.50503C9.77844 5.23166 10.2217 5.23166 10.495 5.50503C10.7684 5.7784 10.7684 6.22161 10.495 6.49498L8.99 8L10.495 9.50503C10.7684 9.7784 10.7684 10.2216 10.495 10.495C10.2217 10.7683 9.77844 10.7683 9.50507 10.495L8.00005 8.98995L6.49502 10.495C6.22166 10.7683 5.77844 10.7683 5.50507 10.495C5.23171 10.2216 5.23171 9.7784 5.50507 9.50503L7.0101 8L5.50507 6.49498C5.23171 6.22161 5.23171 5.7784 5.50507 5.50503Z" fill="currentColor"></path>
+                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM13.8 8C13.8 11.2033 11.2033 13.8 8 13.8C4.79675 13.8 2.2 11.2033 2.2 8C2.2 4.79675 4.79675 2.2 8 2.2C11.2033 2.2 13.8 4.79675 13.8 8Z" fill="currentColor"></path>
+                                                    </svg>
+                                                {:else if Object.values(service[1].replicas).some(replica =>
+                                                    replica.steps[indexStep].state === 'running')
+                                                }
+                                                    <div class="animation-container">
+                                                        <div class="circle-container">
+                                                            <span class="loader"></span>
+                                                        </div>
+                                                    </div>
+                                                    {#if animateCircles} 
+                                                        <script>
+                                                            startAnimation(); 
+                                                        </script>
+                                                    {/if}
+                                                {:else if Object.values(service[1].replicas).some(replica =>
+                                                    replica.steps[indexStep].state === 'waiting')
+                                                }
+                                                    <svg width="16" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.00122 13.5833C11.1492 13.5833 13.7012 11.0313 13.7012 7.88327C13.7012 4.73525 11.1492 2.18327 8.00122 2.18327C4.8532 2.18327 2.30122 4.73525 2.30122 7.88327C2.30122 11.0313 4.8532 13.5833 8.00122 13.5833ZM8.00122 14.8833C11.8672 14.8833 15.0012 11.7493 15.0012 7.88327C15.0012 4.01728 11.8672 0.88327 8.00122 0.88327C4.13523 0.88327 1.00122 4.01728 1.00122 7.88327C1.00122 11.7493 4.13523 14.8833 8.00122 14.8833Z" fill="currentColor"></path>
+                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.85156 5.7237C5.85156 4.62442 6.74271 3.73328 7.84199 3.73328H8.29067C9.59456 3.73328 10.6516 4.79028 10.6516 6.09417C10.6516 6.89174 10.2387 7.63248 9.56035 8.05196L9.24535 8.24675C8.87621 8.47503 8.65152 8.87812 8.6515 9.31214L8.65149 9.38332C8.65147 9.7423 8.36044 10.0333 8.00145 10.0333C7.64247 10.0333 7.35147 9.74222 7.35149 9.38324L7.3515 9.31206C7.35155 8.42763 7.8094 7.60625 8.56162 7.14108L8.87661 6.94629C9.17186 6.76371 9.35156 6.44131 9.35156 6.09417C9.35156 5.50825 8.87659 5.03328 8.29067 5.03328H7.84199C7.46068 5.03328 7.15156 5.34239 7.15156 5.7237V5.88328C7.15156 6.24226 6.86055 6.53328 6.50156 6.53328C6.14258 6.53328 5.85156 6.24226 5.85156 5.88328V5.7237Z" fill="currentColor"></path>
+                                                        <path d="M8.87622 11.2583C8.87622 11.7415 8.48447 12.1333 8.00122 12.1333C7.51797 12.1333 7.12622 11.7415 7.12622 11.2583C7.12622 10.775 7.51797 10.3833 8.00122 10.3833C8.48447 10.3833 8.87622 10.775 8.87622 11.2583Z" fill="currentColor"></path>
+                                                    </svg>
+                                                {/if} 
+                                                {#if step.name == undefined}
+                                                    <span class="">{step.command}</span>
+                                                {:else}
+                                                    <span class="">{step.name}</span>
+                                                {/if}
+                                            </div>
+                                            <div class="stepList accordion-content" class:show={step.open}> 
+                                                <div class="replica-steps-container">
+                                                    {#each Object.entries(service[1].replicas) as replica, index}
+                                                        <!-- {console.log('lol', replica)}
+                                                        {console.log('lol2', indexStep)}
+                                                        {console.log('lol3', replica[1].steps)}
+                                                        {console.log('lol33', replica[1].steps[indexStep])} -->
+
+                                                        
+                                                        <div class="replica-step {replica[1].show ? 'active' : ''}" on:click={() => toggleReplica(service[0], replica[0])} role="presentation">
+                                                            {#if replica[1].steps[indexStep].state === "running"}
+                                                                <div class="animation-container" style="padding-left: 5px; padding-right:5px;">
+                                                                    <div class="circle-container">
+                                                                        <span class="loader"></span>
+                                                                    </div>
+                                                                </div>
+                                                                {#if animateCircles} 
+                                                                    <script>
+                                                                        startAnimation(); 
+                                                                    </script>
+                                                                {/if}
+                                                            {:else if replica[1].steps[indexStep].state === "success"}
+                                                                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 11.1624C8.8995 11.1624 11.25 8.81185 11.25 5.91235C11.25 3.01286 8.8995 0.662354 6 0.662354C3.10051 0.662354 0.75 3.01286 0.75 5.91235C0.75 8.81185 3.10051 11.1624 6 11.1624ZM3.37436 5.2561L4.81811 6.89673L8.62436 3.61548L9.60873 4.59985L4.81811 8.86548L2.38998 6.24048L3.37436 5.2561Z" fill="currentColor"></path>
+                                                                </svg>
+                                                            {:else if replica[1].steps[indexStep].state === "failure" || replica[1].steps[indexStep].state === "aborted"}
+                                                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                                    <path d="M5.50507 5.50503C5.77844 5.23166 6.22166 5.23166 6.49502 5.50503L8.00005 7.01005L9.50507 5.50503C9.77844 5.23166 10.2217 5.23166 10.495 5.50503C10.7684 5.7784 10.7684 6.22161 10.495 6.49498L8.99 8L10.495 9.50503C10.7684 9.7784 10.7684 10.2216 10.495 10.495C10.2217 10.7683 9.77844 10.7683 9.50507 10.495L8.00005 8.98995L6.49502 10.495C6.22166 10.7683 5.77844 10.7683 5.50507 10.495C5.23171 10.2216 5.23171 9.7784 5.50507 9.50503L7.0101 8L5.50507 6.49498C5.23171 6.22161 5.23171 5.7784 5.50507 5.50503Z" fill="currentColor"></path>
+                                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM13.8 8C13.8 11.2033 11.2033 13.8 8 13.8C4.79675 13.8 2.2 11.2033 2.2 8C2.2 4.79675 4.79675 2.2 8 2.2C11.2033 2.2 13.8 4.79675 13.8 8Z" fill="currentColor"></path>
+                                                                </svg>
+                                                            {:else if replica[1].steps[indexStep].state === "waiting"}
+                                                                <svg width="16" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.00122 13.5833C11.1492 13.5833 13.7012 11.0313 13.7012 7.88327C13.7012 4.73525 11.1492 2.18327 8.00122 2.18327C4.8532 2.18327 2.30122 4.73525 2.30122 7.88327C2.30122 11.0313 4.8532 13.5833 8.00122 13.5833ZM8.00122 14.8833C11.8672 14.8833 15.0012 11.7493 15.0012 7.88327C15.0012 4.01728 11.8672 0.88327 8.00122 0.88327C4.13523 0.88327 1.00122 4.01728 1.00122 7.88327C1.00122 11.7493 4.13523 14.8833 8.00122 14.8833Z" fill="currentColor"></path>
+                                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.85156 5.7237C5.85156 4.62442 6.74271 3.73328 7.84199 3.73328H8.29067C9.59456 3.73328 10.6516 4.79028 10.6516 6.09417C10.6516 6.89174 10.2387 7.63248 9.56035 8.05196L9.24535 8.24675C8.87621 8.47503 8.65152 8.87812 8.6515 9.31214L8.65149 9.38332C8.65147 9.7423 8.36044 10.0333 8.00145 10.0333C7.64247 10.0333 7.35147 9.74222 7.35149 9.38324L7.3515 9.31206C7.35155 8.42763 7.8094 7.60625 8.56162 7.14108L8.87661 6.94629C9.17186 6.76371 9.35156 6.44131 9.35156 6.09417C9.35156 5.50825 8.87659 5.03328 8.29067 5.03328H7.84199C7.46068 5.03328 7.15156 5.34239 7.15156 5.7237V5.88328C7.15156 6.24226 6.86055 6.53328 6.50156 6.53328C6.14258 6.53328 5.85156 6.24226 5.85156 5.88328V5.7237Z" fill="currentColor"></path>
+                                                                    <path d="M8.87622 11.2583C8.87622 11.7415 8.48447 12.1333 8.00122 12.1333C7.51797 12.1333 7.12622 11.7415 7.12622 11.2583C7.12622 10.775 7.51797 10.3833 8.00122 10.3833C8.48447 10.3833 8.87622 10.775 8.87622 11.2583Z" fill="currentColor"></path>
+                                                                </svg>
+                                                            {/if}
+                                                            <span>{replica[0].slice(-5)}</span>
+                                                        </div>
+                                                    {/each}
+                                                </div>
+                                                <div class="stepBox">
+                                                    <!-- TODO: add to replicas a log field where logs are placed replicas.[workspace].steps[int].log-->
+                                                    
+                                                    {#each Object.entries(service[1].replicas) as replica, index}
+                                                        {#if replica[1].show}
+                                                            {#if replica[1].steps[indexStep].log}
+                                                                <pre class='log'>
+                                                                    {@html replica[1].steps[indexStep].log}
+                                                                </pre>
+                                                            {/if}
+                                                        {/if}
+                                                    {/each}
+                                                    <!-- {#if step.log}
+                                                        <pre class='log'>
+                                                            {@html step.log}
+                                                        </pre>
+                                                    {/if} -->
+                                                </div>
+                                            </div>
+                                        
+                                    </div>
+                                {/each}
+                            {/if}
+                        {/each}
+                    </div>
+                </div>
+            {/if}
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/webviews/pages/msdcipipeline.ts b/webviews/pages/msdcipipeline.ts
new file mode 100644
index 0000000..391fbca
--- /dev/null
+++ b/webviews/pages/msdcipipeline.ts
@@ -0,0 +1,7 @@
+import App from "../components/MSDCiPipeline.svelte";
+
+const app = new App({
+    target: document.body,
+});
+
+export default app;
\ No newline at end of file