diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index af59eeb..937b102 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { SnapcastService } from './services/snapcast.service';
 
 @Component({
   selector: 'app-root',
@@ -9,9 +8,7 @@ import { SnapcastService } from './services/snapcast.service';
 })
 export class AppComponent {
   constructor(
-    private snapcastService: SnapcastService
   ) {
-    this.snapcastService.connect();
 
   }
 }
diff --git a/src/app/tabs/tabs.page.ts b/src/app/tabs/tabs.page.ts
index 9b044f1..d5796a1 100644
--- a/src/app/tabs/tabs.page.ts
+++ b/src/app/tabs/tabs.page.ts
@@ -1,5 +1,6 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { GestureController } from '@ionic/angular';
+import { SnapcastService } from '../services/snapcast.service';
 
 @Component({
   selector: 'app-tabs',
@@ -7,15 +8,18 @@ import { GestureController } from '@ionic/angular';
   styleUrls: ['tabs.page.scss'],
   standalone: false,
 })
-export class TabsPage {
+export class TabsPage implements OnInit, AfterViewInit {
 
   isModalOpen = true;
 
  
 
-  constructor(private gestureCtrl: GestureController) {}
+  constructor(private snapcastService: SnapcastService) {}
 
-  
+  ngOnInit(): void {
+    this.snapcastService.connect();
+    
+  }
 
   ngAfterViewInit() {
   }