diff --git a/controlpanel/cad/src/app/pages/list-decoy/list-decoy.component.html b/controlpanel/cad/src/app/pages/list-decoy/list-decoy.component.html
new file mode 100644
index 0000000..bfeadb9
--- /dev/null
+++ b/controlpanel/cad/src/app/pages/list-decoy/list-decoy.component.html
@@ -0,0 +1,58 @@
+<div>
+    <h1>Decoys list 🗒️</h1>
+    <!-- <div class="search">
+    </div> -->
+    <div class="wrapper">
+        <table class="list-container">
+            <thead>
+                <tr>
+                    <th class="decoy-head">Decoy</th>
+                    <th>inject</th>
+                    <th>Detect</th>
+                    <th>Action</th>
+                    <th class="row-options"></th>
+                </tr>
+                <tr class="tr-separator"><td class="row-separator" colspan="5"><hr class="head-separator"/></td></tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let decoy of decoys">
+                    <td>
+                        <p>{{ displayDecoy(decoy) }}</p>
+                        <p [ngClass]="{ 'sub-text': displayDecoy(decoy) }">{{ decoy.decoy.string && decoy.decoy.string }}</p>
+                    </td>
+                    <td>
+                        <ng-container *ngIf="decoy.inject; else noInject">
+                            <p>{{ decoy.inject.store.as }}</p>
+                            <p class="sub-text">{{ decoy.inject.store.inRequest || decoy.inject.store.inResponse }}</p>
+                        </ng-container>
+                        <ng-template #noInject>
+                            <p class="sub-text">/</p>
+                        </ng-template>
+                    </td>
+                    <td>
+                        <ng-container *ngIf="decoy.detect; else noDetect">
+                            <p>{{ decoy.detect.seek.in }}</p>
+                            <p class="sub-text">{{ decoy.detect.seek.inRequest || decoy.detect.seek.inResponse }}</p>
+                        </ng-container>
+                        <ng-template #noDetect>
+                            <p class="sub-text">/</p>
+                        </ng-template>
+                    </td>
+                    <td>
+                        <ng-container *ngIf="decoy.detect?.respond?.length; else noRespond">
+                            <p>{{ decoy.detect?.respond![0].behavior }}</p>
+                            <p class="sub-text">{{ decoy.detect?.respond![0].source }}</p>
+                        </ng-container>
+                        <ng-template #noRespond>
+                            <p class="sub-text">/</p>
+                        </ng-template>
+                    </td>
+                    <td class="options">
+                        <button class="option-btn"><img src="edit.svg" alt=""></button>
+                        <button class="option-btn"><img src="delete.svg" alt=""></button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
\ No newline at end of file
diff --git a/controlpanel/cad/src/app/pages/list-decoy/list-decoy.component.scss b/controlpanel/cad/src/app/pages/list-decoy/list-decoy.component.scss
new file mode 100644
index 0000000..e49e54f
--- /dev/null
+++ b/controlpanel/cad/src/app/pages/list-decoy/list-decoy.component.scss
@@ -0,0 +1,56 @@
+@import '../../../styles/variables.scss';
+.wrapper {
+    width: 100%;
+    padding: 0 4%;
+    .list-container {
+        width: 100%;
+        border-radius: 20px;
+        background-color: white;
+        box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px,
+                    rgba(0, 0, 0, 0.14) 0px 3px 4px 0px,
+                    rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
+        table-layout: fixed;
+        border-collapse: collapse;
+        thead {
+            .head-separator {
+                width: 100%;
+            }
+            th {
+                text-align: start;
+                padding: 1rem 1rem;
+                width: 20%;
+            }
+            .decoy-head {
+                width: 35%;
+            }
+            .row-options {
+                width: 15%;
+            }
+        }
+        tbody {
+            tr {
+                td {
+                    padding: 0.8rem 1rem;
+                    .sub-text {
+                        color: gray;
+                    }
+                }
+                .options {
+                    text-align: center;
+                    .option-btn {
+                        border: 0;
+                        background-color: transparent;
+                        margin: 0 0.5rem;
+                        cursor: pointer;
+                        img {
+                            width: 2rem;
+                        }
+                    }
+                }
+            }
+            tr:nth-child(odd){
+                background-color: #E8E8E8;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/controlpanel/cad/src/app/pages/list-decoy/list-decoy.component.spec.ts b/controlpanel/cad/src/app/pages/list-decoy/list-decoy.component.spec.ts
new file mode 100644
index 0000000..2630be0
--- /dev/null
+++ b/controlpanel/cad/src/app/pages/list-decoy/list-decoy.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListDecoyComponent } from './list-decoy.component';
+
+describe('ListDecoyComponent', () => {
+  let component: ListDecoyComponent;
+  let fixture: ComponentFixture<ListDecoyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ListDecoyComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ListDecoyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/controlpanel/cad/src/app/pages/list-decoy/list-decoy.component.ts b/controlpanel/cad/src/app/pages/list-decoy/list-decoy.component.ts
new file mode 100644
index 0000000..ac10809
--- /dev/null
+++ b/controlpanel/cad/src/app/pages/list-decoy/list-decoy.component.ts
@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Decoy } from '../../models/decoy';
+
+@Component({
+  selector: 'app-list-decoy',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './list-decoy.component.html',
+  styleUrl: './list-decoy.component.scss'
+})
+export class ListDecoyComponent {
+  decoys: Decoy[] = [{
+    "decoy": {
+      "key": "x-cloud-active-defense",
+      "separator": ":",
+      "value": "ACTIVE",
+      string: "qwertyuiop"
+    },
+    "inject": {
+      "store": {
+        "inResponse": ".*",
+        "as": "header"
+      }
+    }
+  },{
+    "decoy": {
+      "key": "x-cloud-active-defense",
+      "separator": "=",
+      "value": "ACTIVE",
+      string: "qwertyuiop"
+    },
+    "inject": {
+      "store": {
+        "inResponse": ".*",
+        "as": "header"
+      }
+    }
+  } ];
+
+  displayDecoy(decoy: Decoy): string {
+    let key = decoy.decoy.dynamicKey || decoy.decoy.key || '';
+    let value = decoy.decoy.dynamicValue || decoy.decoy.value || '';
+    return `${key}${value ? decoy.decoy.separator ? decoy.decoy.separator : '=' : ''}${value}`;
+  }
+}