diff --git a/pkgs/ui/_document.js b/pkgs/ui/_document.js
index 99eaf88..78d3628 100644
--- a/pkgs/ui/_document.js
+++ b/pkgs/ui/_document.js
@@ -1 +1 @@
-          <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>;
diff --git a/pkgs/ui/nix/pdefs.nix b/pkgs/ui/nix/pdefs.nix
index 8d0cb74..66787a9 100644
--- a/pkgs/ui/nix/pdefs.nix
+++ b/pkgs/ui/nix/pdefs.nix
@@ -20832,4 +20832,4 @@
       };
     };
   };
-}
\ No newline at end of file
+}
diff --git a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
index 2b8a4b1..6f84e08 100644
--- a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
+++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
@@ -8,7 +8,6 @@ import { useGetAllResolutions } from "@/api/resolution/resolution";
 import { mutate } from "swr";
 
 export default function DLG() {
-
   const {
     data: resolutionData,
     isLoading: loadingResolutions,
diff --git a/pkgs/ui/src/app/home/page.tsx b/pkgs/ui/src/app/home/page.tsx
index cb36a50..a458011 100644
--- a/pkgs/ui/src/app/home/page.tsx
+++ b/pkgs/ui/src/app/home/page.tsx
@@ -8,8 +8,10 @@ import dynamic from "next/dynamic";
 import { useEffect } from "react";
 import { mutate } from "swr";
 
-const NoSSRSequenceDiagram = dynamic(() => import('../../components/sequence_diagram'), { ssr: false })
-
+const NoSSRSequenceDiagram = dynamic(
+  () => import("../../components/sequence_diagram"),
+  { ssr: false },
+);
 
 export default function Home() {
   const { data } = useAppState();
diff --git a/pkgs/ui/src/app/layout.tsx b/pkgs/ui/src/app/layout.tsx
index c8c34c3..30ee67a 100644
--- a/pkgs/ui/src/app/layout.tsx
+++ b/pkgs/ui/src/app/layout.tsx
@@ -51,7 +51,8 @@ export default function RootLayout({
         <meta name="description" content="Service Aware Networks" />
         <link rel="icon" href="tub-favicon.ico" sizes="any" />
         <script type="module">
-          import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+          import mermaid from
+          'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
         </script>
         <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
         <script
@@ -81,8 +82,9 @@ export default function RootLayout({
                           onClose={() => setShowSidebar(false)}
                         />
                         <div
-                          className={tw`${!showSidebarDerived && translate
-                            } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
+                          className={tw`${
+                            !showSidebarDerived && translate
+                          } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
                         >
                           <div className="grid grid-cols-3">
                             <div className="col-span-1">
diff --git a/pkgs/ui/src/components/sequence_diagram/helpers.ts b/pkgs/ui/src/components/sequence_diagram/helpers.ts
index dcc513a..2b06be7 100644
--- a/pkgs/ui/src/components/sequence_diagram/helpers.ts
+++ b/pkgs/ui/src/components/sequence_diagram/helpers.ts
@@ -1,23 +1,33 @@
 export const generateMermaidString = (data: any) => {
-
-  if (!data || data.length === 0)
-    return '';
+  if (!data || data.length === 0) return "";
 
   // Extract unique participants
-  const participants = Array.from(new Set(data.map((item: any) => item.src_did).concat(data.map((item: any) => item.des_did))));
+  const participants = Array.from(
+    new Set(
+      data
+        .map((item: any) => item.src_did)
+        .concat(data.map((item: any) => item.des_did)),
+    ),
+  );
 
   // Begin the sequence diagram definition
   let mermaidString = "sequenceDiagram\n";
 
   // Add participants to the diagram
   participants.forEach((participant, index) => {
-    mermaidString += `  participant ${String.fromCharCode(65 + index)} as ${participant}\n`;
+    mermaidString += `  participant ${String.fromCharCode(
+      65 + index,
+    )} as ${participant}\n`;
   });
 
   // Add messages to the diagram
   data.forEach((item: any, index: number) => {
-    const srcParticipant = String.fromCharCode(65 + participants.indexOf(item.src_did));
-    const desParticipant = String.fromCharCode(65 + participants.indexOf(item.des_did));
+    const srcParticipant = String.fromCharCode(
+      65 + participants.indexOf(item.src_did),
+    );
+    const desParticipant = String.fromCharCode(
+      65 + participants.indexOf(item.des_did),
+    );
     const timestamp = new Date(item.timestamp * 1000).toLocaleString(); // Convert Unix timestamp to readable date
     const message = item.msg.text || `Event message ${index + 1}`;
 
@@ -40,94 +50,92 @@ export const generateMermaidString = (data: any) => {
   return mermaidString;
 };
 
-
-
 // Dummy Data
 
 export const dataFromBE = [
   {
-    "id": 12,
-    "timestamp": 1704892813,
-    "group": 0,
-    "group_id": 12,
+    id: 12,
+    timestamp: 1704892813,
+    group: 0,
+    group_id: 12,
     // "group_name": "Data",
-    "msg_type": 4,
-    "src_did": "did:sov:test:121",
+    msg_type: 4,
+    src_did: "did:sov:test:121",
     // "src_name": "Entity A",
-    "des_did": "did:sov:test:120",
+    des_did: "did:sov:test:120",
     // "des_name": "Entity B",
-    "msg": {
-      text: 'Hello World'
-    }
+    msg: {
+      text: "Hello World",
+    },
   },
   {
-    "id": 60,
-    "timestamp": 1704892823,
-    "group": 1,
-    "group_id": 19,
-    "msg_type": 4,
-    "src_did": "did:sov:test:122",
-    "des_did": "did:sov:test:121",
-    "msg": {}
+    id: 60,
+    timestamp: 1704892823,
+    group: 1,
+    group_id: 19,
+    msg_type: 4,
+    src_did: "did:sov:test:122",
+    des_did: "did:sov:test:121",
+    msg: {},
   },
   {
-    "id": 30162,
-    "timestamp": 1704892817,
-    "group": 1,
-    "group_id": 53,
-    "msg_type": 2,
-    "src_did": "did:sov:test:121",
-    "des_did": "did:sov:test:122",
-    "msg": {}
+    id: 30162,
+    timestamp: 1704892817,
+    group: 1,
+    group_id: 53,
+    msg_type: 2,
+    src_did: "did:sov:test:121",
+    des_did: "did:sov:test:122",
+    msg: {},
   },
   {
-    "id": 63043,
-    "timestamp": 1704892809,
-    "group": 0,
-    "group_id": 12,
-    "msg_type": 3,
-    "src_did": "did:sov:test:121",
-    "des_did": "did:sov:test:120",
-    "msg": {}
+    id: 63043,
+    timestamp: 1704892809,
+    group: 0,
+    group_id: 12,
+    msg_type: 3,
+    src_did: "did:sov:test:121",
+    des_did: "did:sov:test:120",
+    msg: {},
   },
   {
-    "id": 66251,
-    "timestamp": 1704892805,
-    "group": 0,
-    "group_id": 51,
-    "msg_type": 1,
-    "src_did": "did:sov:test:120",
-    "des_did": "did:sov:test:121",
-    "msg": {}
+    id: 66251,
+    timestamp: 1704892805,
+    group: 0,
+    group_id: 51,
+    msg_type: 1,
+    src_did: "did:sov:test:120",
+    des_did: "did:sov:test:121",
+    msg: {},
   },
   {
-    "id": 85434,
-    "timestamp": 1704892807,
-    "group": 0,
-    "group_id": 51,
-    "msg_type": 2,
-    "src_did": "did:sov:test:120",
-    "des_did": "did:sov:test:121",
-    "msg": {}
+    id: 85434,
+    timestamp: 1704892807,
+    group: 0,
+    group_id: 51,
+    msg_type: 2,
+    src_did: "did:sov:test:120",
+    des_did: "did:sov:test:121",
+    msg: {},
   },
   {
-    "id": 124842,
-    "timestamp": 1704892819,
-    "group": 1,
-    "group_id": 19,
-    "msg_type": 3,
-    "src_did": "did:sov:test:122",
-    "des_did": "did:sov:test:121",
-    "msg": {}
+    id: 124842,
+    timestamp: 1704892819,
+    group: 1,
+    group_id: 19,
+    msg_type: 3,
+    src_did: "did:sov:test:122",
+    des_did: "did:sov:test:121",
+    msg: {},
   },
   {
-    "id": 246326,
-    "timestamp": 1704892815,
-    "group": 1,
-    "group_id": 53,
-    "msg_type": 1,
-    "src_did": "did:sov:test:121",
-    "des_did": "did:sov:test:122",
-    "msg": {}
-  }
-]
\ No newline at end of file
+    id: 246326,
+    timestamp: 1704892815,
+    group: 1,
+    group_id: 53,
+    msg_type: 1,
+    src_did: "did:sov:test:121",
+    des_did: "did:sov:test:122",
+    msg: {},
+  },
+];
diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx
index ab90d89..1badf34 100644
--- a/pkgs/ui/src/components/sequence_diagram/index.tsx
+++ b/pkgs/ui/src/components/sequence_diagram/index.tsx
@@ -1,23 +1,22 @@
-'use client';
+"use client";
 
-import { useRef, useEffect, useState } from 'react';
-import mermaid from 'mermaid';
-import { IconButton } from '@mui/material';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import ZoomInIcon from '@mui/icons-material/ZoomIn';
-import ZoomOutIcon from '@mui/icons-material/ZoomOut';
-import FullscreenIcon from '@mui/icons-material/Fullscreen';
-import DownloadIcon from '@mui/icons-material/Download';
-import ResetIcon from '@mui/icons-material/Autorenew';
-import Tooltip from '@mui/material/Tooltip';
-import { NoDataOverlay } from '../noDataOverlay';
-import { useGetAllEventmessages } from '@/api/eventmessages/eventmessages';
-import { mutate } from 'swr';
-import { LoadingOverlay } from '../join/loadingOverlay';
-import { generateMermaidString, dataFromBE } from './helpers';
+import { useRef, useEffect, useState } from "react";
+import mermaid from "mermaid";
+import { IconButton } from "@mui/material";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import ZoomOutIcon from "@mui/icons-material/ZoomOut";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import DownloadIcon from "@mui/icons-material/Download";
+import ResetIcon from "@mui/icons-material/Autorenew";
+import Tooltip from "@mui/material/Tooltip";
+import { NoDataOverlay } from "../noDataOverlay";
+import { useGetAllEventmessages } from "@/api/eventmessages/eventmessages";
+import { mutate } from "swr";
+import { LoadingOverlay } from "../join/loadingOverlay";
+import { generateMermaidString, dataFromBE } from "./helpers";
 
 const SequenceDiagram = () => {
-
   const {
     data: eventMessagesData,
     isLoading: loadingEventMessages,
@@ -31,11 +30,10 @@ const SequenceDiagram = () => {
   const mermaidString = generateMermaidString(eventMessagesData?.data);
 
   useEffect(() => {
-
     if (!loadingEventMessages && hasData)
       mermaid.initialize({
         startOnLoad: false,
-        securityLevel: 'loose',
+        securityLevel: "loose",
         sequence: {
           mirrorActors: false,
         },
@@ -49,17 +47,20 @@ const SequenceDiagram = () => {
 
   useEffect(() => {
     if (mermaidRef.current) {
-      const svg = mermaidRef.current.querySelector('svg');
+      const svg = mermaidRef.current.querySelector("svg");
       if (svg) {
         svg.style.transform = `scale(${scale})`;
-        svg.style.transformOrigin = 'top left'; // Set transform origin to top left
-        mermaidRef.current.style.width = `${svg.getBoundingClientRect().width * scale}px`;
-        mermaidRef.current.style.height = `${svg.getBoundingClientRect().height * scale}px`;
+        svg.style.transformOrigin = "top left"; // Set transform origin to top left
+        mermaidRef.current.style.width = `${
+          svg.getBoundingClientRect().width * scale
+        }px`;
+        mermaidRef.current.style.height = `${
+          svg.getBoundingClientRect().height * scale
+        }px`;
       }
     }
   }, [scale]);
 
-
   const onRefresh = () => {
     const eventMessagesKey =
       typeof eventMessagesKeyFunc === "function"
@@ -85,94 +86,96 @@ const SequenceDiagram = () => {
 
   const viewInFullScreen = () => {
     if (mermaidRef.current) {
-      const svg = mermaidRef.current.querySelector('svg');
+      const svg = mermaidRef.current.querySelector("svg");
       const serializer = new XMLSerializer();
       const svgBlob = new Blob([serializer.serializeToString(svg)], {
-        type: 'image/svg+xml',
+        type: "image/svg+xml",
       });
       const url = URL.createObjectURL(svgBlob);
-      window.open(url, '_blank');
+      window.open(url, "_blank");
     }
   };
 
   const downloadAsPng = () => {
     if (mermaidRef.current) {
-      const svg = mermaidRef.current.querySelector('svg');
+      const svg = mermaidRef.current.querySelector("svg");
       const svgData = new XMLSerializer().serializeToString(svg);
 
       // Create a canvas element to convert SVG to PNG
-      const canvas = document.createElement('canvas');
+      const canvas = document.createElement("canvas");
       const svgSize = svg.getBoundingClientRect();
       canvas.width = svgSize.width;
       canvas.height = svgSize.height;
-      const ctx = canvas.getContext('2d');
-      const img = document.createElement('img');
+      const ctx = canvas.getContext("2d");
+      const img = document.createElement("img");
 
       img.onload = () => {
         ctx?.drawImage(img, 0, 0);
-        const pngData = canvas.toDataURL('image/png');
+        const pngData = canvas.toDataURL("image/png");
 
         // Trigger download
-        const link = document.createElement('a');
-        link.download = 'sequence-diagram.png';
+        const link = document.createElement("a");
+        link.download = "sequence-diagram.png";
         link.href = pngData;
         link.click();
       };
 
       img.src =
-        'data:image/svg+xml;base64,' +
+        "data:image/svg+xml;base64," +
         btoa(unescape(encodeURIComponent(svgData)));
     }
   };
 
   if (loadingEventMessages)
-    return <LoadingOverlay title="Loading Diagram" subtitle="Please wait..." />
+    return <LoadingOverlay title="Loading Diagram" subtitle="Please wait..." />;
 
   return (
     <div className="flex flex-col items-end w-full">
-      {
-        hasData ? <>
-          <div className='flex justify-end gap-2.5 mb-5 w-full'>
-            <Tooltip placement='top' title='Refresh Diagram'>
+      {hasData ? (
+        <>
+          <div className="flex justify-end gap-2.5 mb-5 w-full">
+            <Tooltip placement="top" title="Refresh Diagram">
               <IconButton color="default" onClick={onRefresh}>
                 <RefreshIcon />
               </IconButton>
             </Tooltip>
-            <Tooltip title="Zoom In" placement='top'>
+            <Tooltip title="Zoom In" placement="top">
               <IconButton color="primary" onClick={zoomIn}>
                 <ZoomInIcon />
               </IconButton>
             </Tooltip>
-            <Tooltip title="Zoom Out" placement='top'>
+            <Tooltip title="Zoom Out" placement="top">
               <IconButton color="primary" onClick={zoomOut}>
                 <ZoomOutIcon />
               </IconButton>
             </Tooltip>
-            <Tooltip title="Reset" placement='top'>
+            <Tooltip title="Reset" placement="top">
               <IconButton color="primary" onClick={resetZoom}>
                 <ResetIcon />
               </IconButton>
             </Tooltip>
-            <Tooltip title="View in Fullscreen" placement='top'>
+            <Tooltip title="View in Fullscreen" placement="top">
               <IconButton color="primary" onClick={viewInFullScreen}>
                 <FullscreenIcon />
               </IconButton>
             </Tooltip>
-            <Tooltip title="Download as PNG" placement='top'>
+            <Tooltip title="Download as PNG" placement="top">
               <IconButton color="primary" onClick={downloadAsPng}>
                 <DownloadIcon />
               </IconButton>
             </Tooltip>
           </div>
           <div className="w-full h-500 overflow-auto p-2.5 box-border h-full">
-            <div className='mermaid' ref={mermaidRef}></div>
+            <div className="mermaid" ref={mermaidRef}></div>
           </div>
-        </> : <div className="flex justify-center items-center w-full h-500">
+        </>
+      ) : (
+        <div className="flex justify-center items-center w-full h-500">
           <NoDataOverlay label="No Activity yet" />
         </div>
-      }
+      )}
     </div>
-  )
-}
+  );
+};
 
-export default SequenceDiagram;
\ No newline at end of file
+export default SequenceDiagram;
diff --git a/pkgs/ui/src/components/sequence_diagram/style.css b/pkgs/ui/src/components/sequence_diagram/style.css
deleted file mode 100644
index d4d837e..0000000
--- a/pkgs/ui/src/components/sequence_diagram/style.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.buttons-container {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  margin-bottom: 20px;
-}
-
-.diagram-container {
-  width: 100%; 
-  height: 500px; 
-  overflow: auto; 
-  border: 1px solid #ddd; 
-  padding: 10px;
-  box-sizing: border-box;
-}