diff --git a/src/app/components/share-modal/share-modal.component.html b/src/app/components/share-modal/share-modal.component.html
index e208b65..0d384c6 100644
--- a/src/app/components/share-modal/share-modal.component.html
+++ b/src/app/components/share-modal/share-modal.component.html
@@ -108,9 +108,10 @@
                       />
                     </svg>
                   </button>
-                  <div
+                  <button
                     *ngIf="user.isShared"
-                    class="p-2 bg-gray-200 text-gray-600 rounded-full flex items-center"
+                    (click)="unsharePin(user.friend_user_id)"
+                    class="p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors"
                   >
                     <svg
                       class="w-6 h-6"
@@ -124,10 +125,10 @@
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="2"
-                        d="M5 13l4 4L19 7"
+                        d="M5 7h14m-9 3v8m4-8v8M10 3h4a1 1 0 0 1 1 1v3H9V4a1 1 0 0 1 1-1ZM6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7Z"
                       />
                     </svg>
-                  </div>
+                  </button>
                 </div>
               </div>
             </div>
diff --git a/src/app/components/share-modal/share-modal.component.ts b/src/app/components/share-modal/share-modal.component.ts
index 348bde5..18be98c 100644
--- a/src/app/components/share-modal/share-modal.component.ts
+++ b/src/app/components/share-modal/share-modal.component.ts
@@ -131,4 +131,16 @@ export class ShareModalComponent implements OnInit, OnDestroy {
       this.closeShareModal();
     });
   }
+
+  unsharePin(friendId: string) {
+    if (!this.pinId) {
+      console.error('No pin ID available');
+      return;
+    }
+
+    this.pinService.deletePinShare(this.pinId, friendId).subscribe(() => {
+      // Mettre à jour la liste des amis après la suppression
+      this.getFriend();
+    });
+  }
 }
diff --git a/src/app/components/timeline/timeline.component.html b/src/app/components/timeline/timeline.component.html
index f9b4e70..365ab4d 100644
--- a/src/app/components/timeline/timeline.component.html
+++ b/src/app/components/timeline/timeline.component.html
@@ -42,7 +42,7 @@
 
         <!-- Bulle centrale avec la date -->
         <div
-          class="z-20 flex items-center justify-center bg-white border-[6px] sm:border-blue-600 border-gray-800 sm:text-blue-700 text-gray-800 font-bold text-base sm:text-lg shadow-2xl sm:rounded-full rounded-t-3xl sm:w-32 sm:h-32 text-center leading-tight px-4 py-2 sm:px-10 sm:py-5 date-bubble"
+          class="z-20 flex items-center justify-center bg-white border-[6px] border-b-0 sm:border-b-[6px] sm:border-blue-600 border-gray-800 sm:text-blue-700 text-gray-800 font-bold text-base sm:text-lg shadow-2xl sm:rounded-full rounded-t-3xl sm:w-32 sm:h-32 text-center leading-tight px-4 py-2 sm:px-10 sm:py-5 date-bubble"
           [ngClass]="{
             'sm:order-2': i % 2 === 0,
             'sm:order-1': i % 2 !== 0
diff --git a/src/app/services/pin/pin.service.ts b/src/app/services/pin/pin.service.ts
index 8f69e83..eb68276 100644
--- a/src/app/services/pin/pin.service.ts
+++ b/src/app/services/pin/pin.service.ts
@@ -1,9 +1,9 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { map } from 'rxjs/operators';
 import { environment } from '../../../environment';
 import { Pin } from '../../model/Pin';
 import { AuthService } from '../auth/auth.service';
-import { map } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -82,4 +82,11 @@ export class PinService {
       map((response) => response.shares) // Ne garder que la liste d’utilisateurs
     );
   }
+
+  deletePinShare(pinId: string, friendId: string) {
+    const url = `${this.apiURL}/pin/${pinId}/share/${friendId}`;
+    const headers = this.authService.getAuthHeaders();
+    headers.set('Content-Type', 'application/json');
+    return this.http.delete<any>(url, { headers });
+  }
 }