diff --git a/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.html b/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.html
index c5c79410..6ce1bd59 100644
--- a/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.html
+++ b/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.html
@@ -1,11 +1,13 @@
-<div class="episodes" id="episodes">
-  <div class="episode" *ngFor="let episode of this.episodes">
-    <div class="img" [style.background-image]="sanitize(episode.thumb)">
-      <button mat-icon-button id="playBtn"><i class="material-icons playIcon">play_circle_outline</i></button>
+<div class="root">
+  <div class="episodes" id="episodes">
+    <div class="episode" *ngFor="let episode of this.episodes" id="{{episode.episodeNumber}}">
+      <div class="img" [style.background-image]="sanitize(episode.thumb)">
+        <button mat-icon-button id="playBtn"><i class="material-icons playIcon">play_circle_outline</i></button>
+      </div>
+      <p class="title">S{{episode.seasonNumber}}E{{episode.episodeNumber}} - {{episode.title}}</p>
+      <p class="overview">{{episode.overview}}</p>
     </div>
-    <p class="title">S{{episode.seasonNumber}}E{{episode.episodeNumber}} - {{episode.title}}</p>
-    <p class="overview">{{episode.overview}}</p>
   </div>
-  <button mat-raised-button color="accent" class="scrollBtn" id="leftBtn"><mat-icon>arrow_left</mat-icon></button>
-  <button mat-raised-button color="accent" class="scrollBtn" id="rightBtn"><mat-icon>arrow_right</mat-icon></button>
+  <button mat-raised-button color="accent" class="scrollBtn d-none" id="leftBtn" (click)="scrollLeft()"><mat-icon>arrow_left</mat-icon></button>
+  <button mat-raised-button color="accent" class="scrollBtn" id="rightBtn" (click)="scrollRight()"><mat-icon>arrow_right</mat-icon></button>
 </div>
diff --git a/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.scss b/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.scss
index edc87ec3..ab088d1f 100644
--- a/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.scss
+++ b/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.scss
@@ -2,15 +2,8 @@
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss//mixins/breakpoints";
 
-.episodes
+.root
 {
-  display: flex;
-  padding-left: 15px;
-  padding-right: 15px;
-  overflow-x: auto;
-  min-width: 100%;
-  flex-shrink: 0;
-  flex-direction: row;
   position: relative;
 
   &:hover
@@ -22,10 +15,21 @@
   }
 }
 
+.episodes
+{
+  display: flex;
+  padding-left: 15px;
+  padding-right: 15px;
+  overflow-x: auto;
+  min-width: 100%;
+  flex-shrink: 0;
+  flex-direction: row;
+}
+
 .episode
 {
   display: inline-block;
-  margin: .25rem;
+  padding: .25rem;
   flex-shrink: 0;
   width: 55%;
   cursor: pointer;
diff --git a/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.ts b/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.ts
index 6fcf0c3b..7af8badc 100644
--- a/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.ts
+++ b/Kyoo/ClientApp/src/app/episodes-list/episodes-list.component.ts
@@ -17,11 +17,6 @@ export class EpisodesListComponent implements OnInit
   ngOnInit()
   {
     this.root = document.getElementById("episodes");
-
-    document.getElementById("leftBtn").onclick = function ()
-    {
-      console.log(this.root);
-    }
   }
 
   sanitize(url: string)
@@ -29,21 +24,35 @@ export class EpisodesListComponent implements OnInit
     return this.sanitizer.bypassSecurityTrustStyle("url(" + url + ")");
   }
 
-  /*document.getElementById("left-scroll").onclick = function()
-    {
-        slider.scrollBy({ top: 0, left: -slider.offsetWidth * 0.66, behavior: "smooth" });
-        document.getElementById("right-scroll").style.display = "inline-block";
+  scrollLeft()
+  {
+    let scroll: number = this.roundScroll(this.root.offsetWidth * 0.80);
+    this.root.scrollBy({ top: 0, left: -scroll, behavior: "smooth" });
 
-        if (slider.scrollLeft - slider.offsetWidth * 0.66 <= 0)
-            document.getElementById("left-scroll").style.display = "none";
-    }
+    document.getElementById("rightBtn").classList.remove("d-none");
 
-    document.getElementById("right-scroll").onclick = function()
-    {
-        slider.scrollBy({ top: 0, left: slider.offsetWidth * 0.66, behavior: "smooth" });
-        document.getElementById("left-scroll").style.display = "inline-block";
+    if (this.root.scrollLeft - scroll <= 0)
+      document.getElementById("leftBtn").classList.add("d-none");
+  }
 
-        if (slider.scrollLeft + slider.offsetWidth * 0.66 + 10 >= slider.scrollWidth - slider.clientWidth)
-            document.getElementById("right-scroll").style.display = "none";
-    }*/
+  scrollRight()
+  {
+    let scroll: number = this.roundScroll(this.root.offsetWidth * 0.80);
+    this.root.scrollBy({ top: 0, left: scroll, behavior: "smooth" });
+    document.getElementById("leftBtn").classList.remove("d-none");
+
+    if (this.root.scrollLeft + scroll >= this.root.scrollWidth - this.root.clientWidth)
+      document.getElementById("rightBtn").classList.add("d-none");
+  }
+
+  roundScroll(offset: number): number
+  {
+    let episodeSize: number = document.getElementById("1").scrollWidth;
+    offset = Math.round(offset / episodeSize) * episodeSize;
+
+    if (offset == 0)
+      offset = episodeSize;
+
+    return offset;
+  }
 }