diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 94bf70cd..e68a7a54 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -20,6 +20,7 @@
         "css-hot-loader": "1.4.4",
         "css-loader": "^6.10.0",
         "cytoscape": "^3.30.2",
+        "cytoscape-klay": "^3.1.4",
         "dotenv-webpack": "^8.0.1",
         "file-loader": "^6.2.0",
         "flexlayout-react": "0.7.15",
@@ -49,6 +50,7 @@
         "@emotion/styled": "^11.11.0",
         "@mui/material": "^5.15.14",
         "@types/cytoscape": "^3.21.7",
+        "@types/cytoscape-klay": "^3.1.4",
         "@types/jsonpath": "^0.2.4",
         "@types/node": "^20.12.7",
         "@types/react": "^18.2.67",
@@ -1310,6 +1312,16 @@
       "integrity": "sha512-dP4UByJtfu5GjMJuv58yCIRxjCp4cP0Wp+Qd46L3Gom0hcV4OPmSOLqt83vArNcYRZLFCAyAk+lcC8oqQtcsqw==",
       "dev": true
     },
+    "node_modules/@types/cytoscape-klay": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@types/cytoscape-klay/-/cytoscape-klay-3.1.4.tgz",
+      "integrity": "sha512-H+tIadpcVjmDGWKFUfibwzIpH/kddfwAFsuhPparjiC+bWBm+MeNqIwwY+19ofkJZWcqWqZL6Jp8lkp+sP8Aig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/cytoscape": "*"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "8.56.10",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz",
@@ -3433,6 +3445,18 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/cytoscape-klay": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/cytoscape-klay/-/cytoscape-klay-3.1.4.tgz",
+      "integrity": "sha512-VwPj0VR25GPfy6qXVQRi/MYlZM/zkdvRhHlgqbM//lSvstgM6fhp3ik/uM8Wr8nlhskfqz/M1fIDmR6UckbS2A==",
+      "license": "MIT",
+      "dependencies": {
+        "klayjs": "^0.4.1"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
     "node_modules/data-view-buffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
@@ -6982,6 +7006,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/klayjs": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/klayjs/-/klayjs-0.4.1.tgz",
+      "integrity": "sha512-WUNxuO7O79TEkxCj6OIaK5TJBkaWaR/IKNTakgV9PwDn+mrr63MLHed34AcE2yTaDntgO6l0zGFIzhcoTeroTA==",
+      "license": "EPL-1.0"
+    },
     "node_modules/known-css-properties": {
       "version": "0.31.0",
       "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.31.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d43167ed..7719d978 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,6 +30,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.14",
     "@types/cytoscape": "^3.21.7",
+    "@types/cytoscape-klay": "^3.1.4",
     "@types/jsonpath": "^0.2.4",
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.67",
@@ -76,6 +77,7 @@
     "css-hot-loader": "1.4.4",
     "css-loader": "^6.10.0",
     "cytoscape": "^3.30.2",
+    "cytoscape-klay": "^3.1.4",
     "dotenv-webpack": "^8.0.1",
     "file-loader": "^6.2.0",
     "flexlayout-react": "0.7.15",
diff --git a/frontend/src/modules/GraphLibrary/components/CytoscapeGraph/CytoscapeGraph.tsx b/frontend/src/modules/GraphLibrary/components/CytoscapeGraph/CytoscapeGraph.tsx
index aae94c6e..d29f0332 100644
--- a/frontend/src/modules/GraphLibrary/components/CytoscapeGraph/CytoscapeGraph.tsx
+++ b/frontend/src/modules/GraphLibrary/components/CytoscapeGraph/CytoscapeGraph.tsx
@@ -4,7 +4,9 @@ import { CytoscapeLayout } from "./config/Cytoscape";
 
 import styles from "./CytoscapeGraph.module.scss";
 import { useGraphContext } from "../../context/GraphContext";
+import klay from "cytoscape-klay";
 
+cytoscape.use(klay);
 cytoscape.warnings(false);
 
 interface IProps {
@@ -43,7 +45,7 @@ export default function CytoscapeGraph({ elements, onNodeClick }: IProps) {
     {
       selector: "edge",
       style: {
-        width: 3,
+        width: 5,
         "line-color": "#cbc4c4",
         "target-arrow-color": "#cbc4c4",
         "target-arrow-shape": "triangle",
diff --git a/frontend/src/modules/GraphLibrary/components/CytoscapeGraph/config/Cytoscape.ts b/frontend/src/modules/GraphLibrary/components/CytoscapeGraph/config/Cytoscape.ts
index d0cca7fd..6f521b00 100644
--- a/frontend/src/modules/GraphLibrary/components/CytoscapeGraph/config/Cytoscape.ts
+++ b/frontend/src/modules/GraphLibrary/components/CytoscapeGraph/config/Cytoscape.ts
@@ -1,7 +1,10 @@
 export const CytoscapeLayout = {
-  name: "breadthfirst",
-  fit: true,
-  directed: true,
-  padding: 30,
-  spacingFactor: 2.4,
+    name: "cose",
+    fit: true,
+    padding: 30,
+    spacingFactor: 1.5,
+    animate: true,
+    klay: {
+        direction: "RIGHT",
+    },
 };