diff --git a/web/package-lock.json b/web/package-lock.json
index 6dddfec..11508ee 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -13,6 +13,7 @@
         "@angular/compiler": "^19.1.3",
         "@angular/core": "^19.1.3",
         "@angular/forms": "^19.1.3",
+        "@angular/material": "^19.1.1",
         "@angular/platform-browser": "^19.1.3",
         "@angular/platform-browser-dynamic": "^19.1.3",
         "@angular/platform-server": "^19.1.3",
@@ -20,6 +21,7 @@
         "@angular/ssr": "^19.1.4",
         "@syncfusion/ej2-angular-diagrams": "^28.1.39",
         "bootstrap": "^5.3.3",
+        "bootstrap-icons": "^1.11.3",
         "express": "^4.18.2",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
@@ -590,6 +592,24 @@
         }
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-19.1.1.tgz",
+      "integrity": "sha512-MmfNB9iANuDN1TS+HL8uKqA3/7pdVeCRN+HdAcfqFrcqZmSUUSlYWy8PXqymmyeXxoSwt9p4I/6R0By03VoCMw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^7.1.2"
+      },
+      "peerDependencies": {
+        "@angular/common": "^19.0.0 || ^20.0.0",
+        "@angular/core": "^19.0.0 || ^20.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/cli": {
       "version": "19.1.4",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-19.1.4.tgz",
@@ -815,6 +835,24 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-19.1.1.tgz",
+      "integrity": "sha512-x/EwyBx3yCIYyu/hve19eecmufJzwltRWOO/3Y74jY4jSNNFrR9046t0ptw4fyEXjN8UQZI6Fp/melcZxl3IiA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^19.0.0 || ^20.0.0",
+        "@angular/cdk": "19.1.1",
+        "@angular/common": "^19.0.0 || ^20.0.0",
+        "@angular/core": "^19.0.0 || ^20.0.0",
+        "@angular/forms": "^19.0.0 || ^20.0.0",
+        "@angular/platform-browser": "^19.0.0 || ^20.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "19.1.3",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-19.1.3.tgz",
@@ -6255,6 +6293,22 @@
         "@popperjs/core": "^2.11.8"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
+      "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -7628,7 +7682,7 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -11405,7 +11459,7 @@
       "version": "7.2.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
       "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^4.5.0"
diff --git a/web/package.json b/web/package.json
index ecdca34..8e05f87 100644
--- a/web/package.json
+++ b/web/package.json
@@ -16,6 +16,7 @@
     "@angular/compiler": "^19.1.3",
     "@angular/core": "^19.1.3",
     "@angular/forms": "^19.1.3",
+    "@angular/material": "^19.1.1",
     "@angular/platform-browser": "^19.1.3",
     "@angular/platform-browser-dynamic": "^19.1.3",
     "@angular/platform-server": "^19.1.3",
@@ -23,6 +24,7 @@
     "@angular/ssr": "^19.1.4",
     "@syncfusion/ej2-angular-diagrams": "^28.1.39",
     "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
@@ -43,4 +45,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.5.2"
   }
-}
+}
\ No newline at end of file
diff --git a/web/src/app/diagram/diagram.component.html b/web/src/app/diagram/diagram.component.html
deleted file mode 100644
index daef2f6..0000000
--- a/web/src/app/diagram/diagram.component.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<ejs-diagram width="100%" height="850px" [getNodeDefaults]='nodeDefaults'>
-    <e-nodes>
-        <e-node id='node1' [offsetY]=100 [shape]='terminatorShape'>
-            <e-node-annotations>
-                <e-node-annotation content='Battery'></e-node-annotation>
-            </e-node-annotations>
-        </e-node>
-        <e-node id='node2' [offsetY]=200 [shape]='processShape'>
-            <e-node-annotations>
-                <e-node-annotation content='var i = 0;'></e-node-annotation>
-            </e-node-annotations>
-        </e-node>
-        <e-node id='node3' [offsetY]=300 [shape]='decisionShape'>
-            <e-node-annotations>
-                <e-node-annotation content='i > 10?'></e-node-annotation>
-            </e-node-annotations>
-        </e-node>
-        <e-node id='node4' [offsetY]=400 [shape]='preDefinedProcessShape'>
-            <e-node-annotations>
-                <e-node-annotation content='print(\"Syncfusion!!\");'>
-                </e-node-annotation>
-            </e-node-annotations>
-        </e-node>
-        <e-node id='node5' [offsetY]=500 [shape]='processShape'>
-            <e-node-annotations>
-                <e-node-annotation content='i++;'></e-node-annotation>
-            </e-node-annotations>
-        </e-node>
-        <e-node id='node6' [offsetY]=600 [shape]='terminatorShape'>
-            <e-node-annotations>
-                <e-node-annotation content='End'></e-node-annotation>
-            </e-node-annotations>
-        </e-node>    
-    </e-nodes>
-    <e-connectors>
-        <e-connector sourceID='node1' targetID='node2'></e-connector>
-        <e-connector sourceID='node2' targetID='node3'></e-connector>
-        <e-connector sourceID='node3' targetID='node6' type="Orthogonal"
-        [segments]='segment1'>
-        <e-connector-annotations>
-            <e-connector-annotation content='Yes'
-            [margin]="annotationMargin"></e-connector-annotation>
-        </e-connector-annotations>
-        </e-connector>
-        <e-connector sourceID='node3' targetID='node4'>
-            <e-connector-annotations>
-                <e-connector-annotation content='No'
-                [margin]="annotationMargin"></e-connector-annotation>
-            </e-connector-annotations>
-        </e-connector>
-        <e-connector sourceID='node4' targetID='node5'></e-connector>
-        <e-connector sourceID='node5' targetID='node3' type="Orthogonal"
-        [segments]='segment2'>
-        </e-connector>
-    </e-connectors>
-        
-</ejs-diagram>
\ No newline at end of file
diff --git a/web/src/app/diagram/diagram.component.scss b/web/src/app/diagram/diagram.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/web/src/app/diagram/diagram.component.spec.ts b/web/src/app/diagram/diagram.component.spec.ts
deleted file mode 100644
index 79c532e..0000000
--- a/web/src/app/diagram/diagram.component.spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DiagramComponent } from './diagram.component';
-
-describe('DiagramComponent', () => {
-  let component: DiagramComponent;
-  let fixture: ComponentFixture<DiagramComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DiagramComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(DiagramComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/web/src/app/diagram/diagram.component.ts b/web/src/app/diagram/diagram.component.ts
deleted file mode 100644
index f5932ef..0000000
--- a/web/src/app/diagram/diagram.component.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Component } from '@angular/core';
-import {
-  FlowShapeModel, MarginModel,
-  NodeModel, OrthogonalSegmentModel, DiagramModule
-} from "@syncfusion/ej2-angular-diagrams";
-
-@Component({
-    selector: 'app-diagram',
-    imports: [DiagramModule],
-    templateUrl: './diagram.component.html',
-    styleUrl: './diagram.component.scss'
-})
-export class DiagramComponent {
-  public nodeDefaults(node: NodeModel): NodeModel {
-    node.height = 50;
-    node.width = 200;
-    node.offsetX = 700;
-    return node;
-  }
-  public terminatorShape: FlowShapeModel = { type: 'Flow', shape: 'Terminator' };
-
-  public processShape: FlowShapeModel = { type: 'Flow', shape: 'Process' };
-
-  public decisionShape: FlowShapeModel = { type: 'Flow', shape: 'Decision' };
-
-  public preDefinedProcessShape: FlowShapeModel = {
-    type: 'Flow', shape: 'PreDefinedProcess'
-  };
-
-  public annotationMargin: MarginModel = { left: 15, right: 0, bottom: 0, top: 0 };
-
-  public segment1: OrthogonalSegmentModel = [
-    { direction: 'Right', length: 30 },
-    { direction: 'Bottom', length: 300 }];
-
-  public segment2: OrthogonalSegmentModel = [
-    { length: 30, direction: "Left" },
-    { length: 200, direction: "Top" }];
-}