diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
index 78067f5..90d7ee6 100644
--- a/frontend/src/app/home/home.component.html
+++ b/frontend/src/app/home/home.component.html
@@ -6,7 +6,7 @@
       <h2 style="color: white;"><span class="player-count">Loading...</span></h2>
       <h2 style="color: white;">Server IP: play.alttd.com</h2>
 <!--      TODO make copy be angular not js-->
-      <button type="button" style="margin-top: 50px;" class="button-outer" onclick="copyToClipboard()">
+      <button type="button" style="margin-top: 50px;" class="button-outer" onclick="copyToClipboard('play.alttd.com')">
         <span class="button-inner" id="copybutton">Copy IP</span>
       </button>
     </section>
@@ -85,15 +85,14 @@
         </div>
       </div>
     </section>
-<!--    TODO make section below use angular not js-->
     <section class="removemobile darkmodeSection">
       <div class="customcontainer">
         <div id="slider-wrapper">
-          <div  class="slider-content">
+          <div class="slider-content">
             <div class="indexslider">
-              <div id="go-left" onclick="changeSlide(-1)" class="circleBehind go-left"></div><!-- show prev image -->
-              <div id="go-right" onclick="changeSlide(1)" class="circleBehind go-right"></div><!-- show  next image -->
-              <!-- display/slides here from js-->
+              <div id="go-left" onclick="previousSlide()" class="circleBehind go-left"></div><!-- show prev image -->
+              <div id="go-right" onclick="nextSlide()" class="circleBehind go-right"></div><!-- show  next image -->
+              <span class="slide" [style.background-image]="'url(' + slide + ')'" [style.display]="'block'"></span>
             </div>
             <!-- dots/indicators controls here from js-->
           </div>
@@ -112,7 +111,7 @@
              width="120">
         <h2 style="margin: 20px 0; font-size: 1.8em;">play.alttd.com</h2>
 <!--        TODO make this use angular not js-->
-        <button type="button" class="button-outer" onclick="copyToClipboard()">
+        <button type="button" class="button-outer" onclick="copyToClipboard('play.alttd.com')">
           <span class="button-inner" id="copybutton2">Copy IP</span>
         </button>
       </div>
diff --git a/frontend/src/app/home/home.component.ts b/frontend/src/app/home/home.component.ts
index ba1597a..a13ce67 100644
--- a/frontend/src/app/home/home.component.ts
+++ b/frontend/src/app/home/home.component.ts
@@ -15,5 +15,34 @@ export class HomeComponent implements OnInit {
     this.titleService.setTitle('Survival Minecraft Server on ' + ALTITUDE_VERSION + ' | Altitude Community');
   }
 
+  private slides: string[] = ["/public/img/backgrounds/caruselimage2.png",
+    "/public/img/backgrounds/caruselimage4.png",
+    "/public/img/backgrounds/caruselimage1.png",
+    "/public/img/backgrounds/caruselimage5.png",
+    "/public/img/backgrounds/caruselimage3.png"
+  ];
+
+  private slideIndex = 0;
+  get slide(): string {
+    return this.slides[this.slideIndex];
+  }
+
+  public previousSlide() {
+    if (this.slideIndex > 0) {
+      this.slideIndex--;
+    } else {
+      this.slideIndex = this.slides.length - 1;
+    }
+  }
+
+  public nextSlide() {
+    this.slideIndex = (this.slideIndex + 1) % this.slides.length;
+  }
+
+  public copyToClipboard(text: string) {
+    navigator.clipboard.writeText(text);
+  }
+
+
   protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION;
 }