diff --git a/src/app/issues/issue-detail/issue-detail.css b/src/app/issues/issue-detail/issue-detail.css
index c28b547..8f6cb2e 100644
--- a/src/app/issues/issue-detail/issue-detail.css
+++ b/src/app/issues/issue-detail/issue-detail.css
@@ -47,6 +47,20 @@
   background-color: #047857;
 }
 
+.cancel-button {
+  border: 1px solid #d1d5db;
+  border-radius: 0.5rem;
+  background-color: #ffffff;
+  color: #374151;
+  padding: 0.65rem 1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.cancel-button:hover {
+  background-color: #f3f4f6;
+}
+
 .detail-card {
   background-color: #ffffff;
   border: 1px solid #e5e7eb;
@@ -93,6 +107,13 @@ tr:last-child td {
   border-bottom: none;
 }
 
+.form-actions {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
 @media (max-width: 768px) {
   .page-header {
     flex-direction: column;
diff --git a/src/app/issues/issue-detail/issue-detail.html b/src/app/issues/issue-detail/issue-detail.html
index b6fc2f7..6b5ea43 100644
--- a/src/app/issues/issue-detail/issue-detail.html
+++ b/src/app/issues/issue-detail/issue-detail.html
@@ -3,11 +3,8 @@
     <h1>Detail de l'issue</h1>
     <p>Informations de creation et de suivi de l'issue.</p>
   </div>
-  <button type="button" class="edit-button" (click)="toggleEdit()">
-    {{ isEditing ? 'Fermer edition' : "Editer l'issue" }}
-  </button>
-  @if (isEditing) {
-    <button type="button" class="save-button" (click)="saveIssue()">Enregistrer</button>
+  @if (!isEditing) {
+    <button type="button" class="edit-button" (click)="startEdit()">Editer l'issue</button>
   }
 </header>
 
@@ -110,3 +107,11 @@
     </tbody>
   </table>
 </section>
+
+@if (isEditing) {
+  <div class="form-actions">
+    <button type="button" class="cancel-button" (click)="cancelEdit()">Annuler</button>
+    <button type="button" class="save-button" (click)="saveIssue()">Enregistrer</button>
+  </div>
+}
+
diff --git a/src/app/issues/issue-detail/issue-detail.ts b/src/app/issues/issue-detail/issue-detail.ts
index 755ca40..f56eaef 100644
--- a/src/app/issues/issue-detail/issue-detail.ts
+++ b/src/app/issues/issue-detail/issue-detail.ts
@@ -16,15 +16,35 @@ export class IssueDetail {
 
   protected issue: IssueEntity = this.buildIssue();
   protected isEditing = this.route.snapshot.queryParamMap.get('mode') === 'edit';
+  private issueBeforeEdit: IssueEntity | null = null;
 
-  protected toggleEdit(): void {
-    this.isEditing = !this.isEditing;
+  constructor() {
+    if (this.isEditing) {
+      this.issueBeforeEdit = this.cloneIssue(this.issue);
+    }
+  }
+
+  protected startEdit(): void {
+    this.issueBeforeEdit = this.cloneIssue(this.issue);
+    this.isEditing = true;
+  }
+
+  protected cancelEdit(): void {
+    if (this.issueBeforeEdit) {
+      this.issue = this.cloneIssue(this.issueBeforeEdit);
+    }
+    this.isEditing = false;
   }
 
   protected saveIssue(): void {
     this.issuesStore.upsert(this.issue);
+    this.issueBeforeEdit = this.cloneIssue(this.issue);
     this.isEditing = false;
-    this.router.navigate(['/issues']);
+    this.router.navigate(['/issues', this.issue.id]);
+  }
+
+  private cloneIssue(issue: IssueEntity): IssueEntity {
+    return { ...issue };
   }
 
   private buildIssue(): IssueEntity {