diff --git a/frontend/src/app/selenium/test-selenium.component.html b/frontend/src/app/selenium/test-selenium.component.html
index cd98717..9ceed0e 100644
--- a/frontend/src/app/selenium/test-selenium.component.html
+++ b/frontend/src/app/selenium/test-selenium.component.html
@@ -1,11 +1,12 @@
 <br><br>
-<div class="modal fade" tabindex="-1" id="addCase" aria-labelledby="Add new Case" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
+<div class="modal fade" tabindex="-1" id="addAction" aria-labelledby="Add new Action" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
     <div class="modal-dialog modal-dialog-centered modal-xl">
         <div class="modal-content">
         <div class="modal-header">
             <h5 class="modal-title">New Action</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         </div>
+        <form>
         <div class="modal-body">
             <div class="input-group mb-3">
                 <select class="form-select" id="action" (change)="actionChose();" required>
@@ -24,44 +25,69 @@ <h5 class="modal-title">New Action</h5>
             </div>
         </div>
         <div class="modal-footer">
-            <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-            <button type="submit" class="btn btn-primary" (click)="submitAction()">Add Action</button>
+            <button class="btn btn-secondary" data-bs-dismiss="modal" id="close">Close</button>
+            <input type="submit" class="btn btn-primary" (click)="submitAction()" value="Add Action"/>
+        </div>
+        </form>
+        </div>
+    </div>
+</div>
+<div class="modal fade" tabindex="-1" id="addCase" aria-labelledby="Add new Case" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+        <div class="modal-header">
+            <h5 class="modal-title">New Case</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <form>
+            <div class="modal-body">
+            <input type="text" class="form-control" placeholder="Case Name" id="caseName"/>
+        </div>
+        <div class="modal-footer">
+            <button class="btn btn-secondary" data-bs-dismiss="modal" id="close2">Close</button>
+            <input type="submit" class="btn btn-primary" (click)="submitCase()" value="Add Case"/>
         </div>
+        </form>
         </div>
     </div>
 </div>
 <div class="container">
     <div class="btn-group" role="group" aria-label="Basic outlined example">
         <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addCase">
+            Add New Case
+        </button>
+        <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addAction" id="addActionButton" disabled>
             Add New Action
         </button>
-        <button type="button" class="btn btn-outline-primary">Add New Case</button>
         <button type="button" class="btn btn-success">Run</button>
     </div><br><br>
-    <h4>Case #1</h4>
-    <table class="table table-hover">
-        <thead>
-            <tr>
-                <th scope="col">Action</th>
-                <th scope="col">Object</th>
-                <th scope="col">Input</th>
-                <th scope="col">Target</th>
-                <th scope="col" style="width: 70px !important;"></th>
-            </tr>
-        </thead>
-        <tbody class="table-group-divider">
-            <tr *ngFor="let action of actions">
-                <td>{{action.action}}</td>
-                <td>{{action.object}}</td>
-                <td>{{action.input}}</td>
-                <td>{{action.target}}</td>
-                <td>
-                    <button type="button" class="btn btn-danger" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
-                    Delete
-                    </button>
-                </td>
-            </tr>
-            
-        </tbody>
-    </table><br><br>
+    <div class="container" *ngFor="let case of cases">
+
+        <h4>Case #{{case.id}} : {{case.caseName}}</h4>
+        <table class="table table-hover">
+            <thead>
+                <tr>
+                    <th scope="col">Action</th>
+                    <th scope="col">Object</th>
+                    <th scope="col">Input</th>
+                    <th scope="col">Target</th>
+                    <th scope="col" style="width: 70px !important;"></th>
+                </tr>
+            </thead>
+            <tbody class="table-group-divider">
+                <tr *ngFor="let action of case.actions">
+                    <td>{{action.action}}</td>
+                    <td>{{action.object}}</td>
+                    <td>{{action.input}}</td>
+                    <td>{{action.target}}</td>
+                    <td>
+                        <button type="button" class="btn btn-danger" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;" (click)="deleteAction(case.id,action.id)">
+                        Delete
+                        </button>
+                    </td>
+                </tr>
+                
+            </tbody>
+        </table><br><br>
+    </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/selenium/test-selenium.component.ts b/frontend/src/app/selenium/test-selenium.component.ts
index a5a3828..fea464c 100644
--- a/frontend/src/app/selenium/test-selenium.component.ts
+++ b/frontend/src/app/selenium/test-selenium.component.ts
@@ -6,15 +6,21 @@ import { Component } from '@angular/core';
   styleUrls: ['./test-selenium.component.css']
 })
 export class TestSeleniumComponent {
-    counter: number=1;
-    actions: {
+    counterAction: number=1;
+    counterCase: number=0;
+    cases : {
         id: number;
-        action: string;
-        object: string;
-        input: string;
-        target: string;
+        caseName: string;
+        actions: {
+            id: number;
+            action: string;
+            object: string;
+            input: string;
+            target: string;
+        }[] ;
     }[] = [];
 
+
     
     actionChose(): void {
         const action = (document.getElementById('action') as HTMLSelectElement).value;
@@ -38,21 +44,58 @@ export class TestSeleniumComponent {
             object.disabled = false;
         }
     }
+    submitCase(){
+        this.counterCase++;
+        let caseName = (document.getElementById('caseName') as HTMLSelectElement).value;
+        this.addCase({ id: this.counterCase, caseName: caseName, actions: [] });
+        (document.getElementById('caseName') as HTMLInputElement).value = '';
+        (document.getElementById('close2') as HTMLButtonElement).click();
+        this.counterAction=1;
+        const addActionButton = document.getElementById('addActionButton') as HTMLInputElement;
+        addActionButton.disabled = false;
+    }
+    
+    
+    public getCase(id: number) {
+        return this.cases.find(obj => obj.id === id);
+    }
+    deleteCase(id: number) {
+        this.cases = this.cases.filter(item => item.id !== id);
+    }
+
+    public addCase(obj: { id: number, caseName: string, actions: { id: number, action: string, object: string, input: string, target: string }[] }) {
+        this.cases.push(obj);
+    }
+
     submitAction(){
         let action = (document.getElementById('action') as HTMLSelectElement).value;
         let object = (document.getElementById('object') as HTMLInputElement).value;
         let input = (document.getElementById('input') as HTMLInputElement).value;
         let target = (document.getElementById('target') as HTMLInputElement).value;
-        this.addJsonObject({ id: this.counter, action: action, object: object, input: input, target: target, });
-        console.log(this.getJsonObjectById(this.counter));
-        this.counter++;
+        this.addAction({ id: this.counterAction, action: action, object: object, input: input, target: target, });
+        console.log(this.getAction(this.counterAction));
+        this.counterAction++;
+        
+        // Clear the input fields
+        (document.getElementById('object') as HTMLInputElement).value = '';
+        (document.getElementById('input') as HTMLInputElement).value = '';
+        (document.getElementById('target') as HTMLInputElement).value = '';
+        (document.getElementById('close') as HTMLButtonElement).click();
     }
-    public addJsonObject(obj: { id: number,action: string,object: string,input: string,target: string }) {
-        this.actions.push(obj);
+    public addAction(obj: { id: number,action: string,object: string,input: string,target: string }) {
+        this.getCase(this.counterCase)?.actions.push(obj);
     }
     
-    public getJsonObjectById(id: number) {
-        return this.actions.find(obj => obj.id === id);
+    public getAction(id: number) {
+        return this.getCase(this.counterCase)?.actions.find(obj => obj.id === id);
+    }
+    deleteAction(caseId: number,actionId:number) {
+        const currentCase = this.getCase(caseId);
+
+        if (currentCase && currentCase.actions) {
+            currentCase.actions = currentCase.actions.filter(item => item.id !== actionId);
+        }
     }
     
+    
 }