diff --git a/addon/components/o-s-s/scrollable-panel.hbs b/addon/components/o-s-s/scrollable-panel.hbs
index 00f737f8b..e435e1591 100644
--- a/addon/components/o-s-s/scrollable-panel.hbs
+++ b/addon/components/o-s-s/scrollable-panel.hbs
@@ -15,9 +15,15 @@
     {{on-bottom-reached this.onBottomReached}}
     {{did-insert this.initScrollListener}}
   >
+    {{#if (and @displayScrollArrows this.shadowLeftVisible)}}
+      <OSS::Button @square={{true}} @icon="fa-chevron-left" class="scroll-arrow-left" {{on "click" this.scrollToStart}} />
+    {{/if}}
     <div {{did-insert this.initResizeObserver}}>
       {{yield}}
     </div>
+    {{#if (and @displayScrollArrows this.shadowRightVisible)}}
+      <OSS::Button @square={{true}} @icon="fa-chevron-right" class="scroll-arrow-right" {{on "click" this.scrollToEnd}} />
+    {{/if}}
   </div>
   {{#if (and this.shadowBottomVisible (not @disableShadows))}}
     <div class="oss-scrollable-panel--shadow oss-scrollable-panel--shadow__bottom"></div>
@@ -25,4 +31,5 @@
   {{#if (and this.shadowRightVisible (not @disableShadows))}}
     <div class="oss-scrollable-panel--shadow oss-scrollable-panel--shadow__right"></div>
   {{/if}}
+
 </div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/scrollable-panel.ts b/addon/components/o-s-s/scrollable-panel.ts
index 7dd2187e3..1d1655ff3 100644
--- a/addon/components/o-s-s/scrollable-panel.ts
+++ b/addon/components/o-s-s/scrollable-panel.ts
@@ -8,6 +8,7 @@ interface OSSScrollablePanelComponentSignature {
   horizontal?: boolean;
   hideScrollbar?: boolean;
   offset?: number;
+  displayScrollArrows?: boolean;
   onBottomReached?: () => void;
 }
 
@@ -19,6 +20,7 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
   @tracked shadowRightVisible: boolean = false;
 
   resizeObserver = new ResizeObserver(this.resizeObserverCallback.bind(this));
+  mutationObserver = new MutationObserver(this.resizeObserverCallback.bind(this));
 
   get offset(): number {
     return this.args.offset ?? 0;
@@ -39,6 +41,7 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
   @action
   initResizeObserver(element: HTMLElement): void {
     this.resizeObserver.observe(element);
+    this.mutationObserver.observe(element, { childList: true, subtree: true });
   }
 
   @action
@@ -58,6 +61,22 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
     this.args.onBottomReached?.();
   }
 
+  @action
+  scrollToStart(): void {
+    this.parentElement.scrollTo({
+      left: this.parentElement.scrollLeft - this.parentElement.clientWidth,
+      behavior: 'smooth'
+    });
+  }
+
+  @action
+  scrollToEnd(): void {
+    this.parentElement.scrollTo({
+      left: this.parentElement.scrollLeft + this.parentElement.clientWidth,
+      behavior: 'smooth'
+    });
+  }
+
   private scrollListener(): void {
     if (this.parentElement.scrollTop - this.offset > 0) {
       this.shadowTopVisible = true;
@@ -98,7 +117,7 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
     }
   }
 
-  private resizeObserverCallback(_: ResizeObserverEntry[]): void {
+  private resizeObserverCallback(_: (ResizeObserverEntry | MutationRecord)[]): void {
     if (this.args.horizontal) {
       this.horizontalScrollListener();
     } else {
diff --git a/app/styles/organisms/scrollable-panel.less b/app/styles/organisms/scrollable-panel.less
index db9a59938..1fc49bb3b 100644
--- a/app/styles/organisms/scrollable-panel.less
+++ b/app/styles/organisms/scrollable-panel.less
@@ -72,4 +72,27 @@
       }
     }
   }
+
+  .scroll-arrow-right {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 20;
+    align-items: center;
+    align-content: center;
+    cursor: pointer;
+  }
+
+  .scroll-arrow-left {
+    position: absolute;
+    left: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    // border-radius: 50%;
+    align-items: center;
+    align-content: center;
+    cursor: pointer;
+  }
 }
diff --git a/tests/dummy/app/controllers/data.ts b/tests/dummy/app/controllers/data.ts
index 7987eb181..319e9d287 100644
--- a/tests/dummy/app/controllers/data.ts
+++ b/tests/dummy/app/controllers/data.ts
@@ -18,7 +18,7 @@ export default class Data extends Controller {
   @tracked revealed: boolean = false;
   @tracked starRatingValue: number = 3;
 
-  loop: null[] = Array(15);
+  @tracked loop: null[] = Array(15);
 
   subdomainRegex: RegExp = /^[a-zA-Z0-9]+[a-zA-Z0-9-._]*[a-zA-Z0-9]+$/;
 
@@ -99,4 +99,9 @@ export default class Data extends Controller {
       }, 1000);
     });
   }
+
+  @action
+  addToLoop(): void {
+    this.loop = [...this.loop, null];
+  }
 }
diff --git a/tests/dummy/app/templates/data.hbs b/tests/dummy/app/templates/data.hbs
index 32a664a3c..2952120c2 100644
--- a/tests/dummy/app/templates/data.hbs
+++ b/tests/dummy/app/templates/data.hbs
@@ -65,7 +65,7 @@
       Scrollable panel
     </div>
     <div class="fx-row fx-gap-px-24 fx-xalign-start">
-      <div class="fx-row fx-gap-px-24 fx-xalign-start" style="height: 300px; width: 500px;">
+      {{!-- <div class="fx-row fx-gap-px-24 fx-xalign-start" style="height: 300px; width: 500px;">
         <OSS::ScrollablePanel>
           <div class="fx-col fx-gap-px-6">
             {{#each this.loop}}
@@ -82,17 +82,20 @@
             {{/each}}
           </div>
         </OSS::ScrollablePanel>
-      </div>
+      </div> --}}
       <div class="fx-row fx-gap-px-24 fx-xalign-start" style="width: 500px;">
-        <OSS::ScrollablePanel @plain={{true}} @horizontal={{true}} @hideScrollbar={{true}}>
+        <OSS::ScrollablePanel @plain={{true}} @horizontal={{true}} @hideScrollbar={{true}} @disableScrollShadows={{true}} @displayScrollArrows={{true}}>
           <div class="fx-row fx-gap-px-6" style="width: fit-content;">
-            {{#each this.loop}}
-              <OSS::Tag @label="toto" />
+            {{#each this.loop as |item index|}}
+              {{!-- <OSS::Tag @label={{concat "nb:" index}} /> --}}
+              <OSS::Button @label={{concat "nb:" index}} />
             {{/each}}
           </div>
         </OSS::ScrollablePanel>
       </div>
     </div>
+    <OSS::Button {{on "click" this.addToLoop}} @label="Add item to loop" />
+    loop count: {{this.loop.length}}
   </div>
 
   <div