diff --git a/app/components/presentation-container.hbs b/app/components/presentation-container.hbs
index 768d083..9cc66c2 100644
--- a/app/components/presentation-container.hbs
+++ b/app/components/presentation-container.hbs
@@ -8,9 +8,14 @@
     " as |slide|
   >
     {{#if @speaker}}
-      {{#unless @hasStarted}}
+      {{#unless this.presentation.hasStarted}}
         <div class="timer-overlay w-full md:w-3/4 md:h-full bottom-26 md:top-0">
-          <button class="underline" {{on "click" @startTicking}}>Start Presentation</button>
+          <button
+            class="underline"
+            {{on "click" this.presentation.startPresentation}}
+          >
+            Start Presentation
+          </button>
         </div>
       {{/unless}}
 
diff --git a/app/components/presentation-container.js b/app/components/presentation-container.js
new file mode 100644
index 0000000..40d00ca
--- /dev/null
+++ b/app/components/presentation-container.js
@@ -0,0 +1,6 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+
+export default class PresentationContainerComponent extends Component {
+  @service presentation;
+}
diff --git a/app/controllers/application.js b/app/controllers/application.js
index 0983427..0f5a74e 100644
--- a/app/controllers/application.js
+++ b/app/controllers/application.js
@@ -1,7 +1,5 @@
 import Controller from '@ember/controller';
 import { tracked } from '@glimmer/tracking';
-import { bind } from '@ember/runloop';
-import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 
 export default class ApplicationController extends Controller {
@@ -11,60 +9,9 @@ export default class ApplicationController extends Controller {
     'download'
   ];
 
-  @service socketManager;
   @service presentation;
-  @service router;
 
   @tracked speaker;
   @tracked slide;
   @tracked download;
-
-  init() {
-    super.init(...arguments);
-
-    this.set('keyPressHandler', bind(this, 'respondToKeyPress'));
-    document.addEventListener('keydown', this.keyPressHandler);
-
-    this.addSocketHandlers();
-  }
-
-  addSocketHandlers() {
-    this.socketManager.socket.on('transition-to', this.transitionSlides, this);
-    this.socketManager.socket.on('play-state', this.handlePlayStateChange, this);
-  }
-
-  respondToKeyPress({ keyCode }) {
-    let isLeft = [37, 65].includes(keyCode);
-    let isRight = [39, 68].includes(keyCode);
-
-    if (isLeft) {
-      this.presentation.goToPrevSlide();
-    }
-
-    if (isRight) {
-      this.presentation.goToNextSlide()
-    }
-  }
-
-  transitionSlides(targetSlide) {
-    this.presentation.goToSlide(targetSlide);
-  }
-
-  handlePlayStateChange(status) {
-    this.presentation.isRunning = status;
-  }
-
-  @action
-  startTicking() {
-    this.presentation.startPresentation();
-  }
-
-  willDestroy() {
-    document.addEventListener('keydown', this.keyPressHandler);
-
-    this.socketManager.socket.off('transition-to', this.transitionSlides);
-    this.socketManager.socket.off('play-state', this.handlePlayStateChange);
-
-    super.willDestroy(...arguments);
-  }
 }
diff --git a/app/services/presentation.js b/app/services/presentation.js
index 3d75c31..081df84 100644
--- a/app/services/presentation.js
+++ b/app/services/presentation.js
@@ -3,6 +3,8 @@ import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { later } from '@ember/runloop';
 import { getOwner } from '@ember/application';
+import { action } from '@ember/object';
+import { bind } from '@ember/runloop';
 
 export default class PresentationService extends Service {
   @service socketManager;
@@ -29,6 +31,9 @@ export default class PresentationService extends Service {
 
     // this is to reset the timer on all tabs of the speaker
     this.socketManager.socket.on('sync-time', this.syncTime, this);
+
+    this.set('keyPressHandler', bind(this, 'respondToKeyPress'));
+    document.addEventListener('keydown', this.keyPressHandler);
   }
 
   get isPaused() {
@@ -92,14 +97,6 @@ export default class PresentationService extends Service {
     this.startTime = new Date(newStartTime);
   }
 
-  startPresentation() {
-    this.hasStarted = true;
-    this.startTime = new Date();
-    this.startTicking();
-
-    this.socketManager.socket.emit('reset-time', this.startTime);
-  }
-
   // Need to check this for memory leaks
   startTicking() {
     this.elapsedTime = new Date() - this.startTime;
@@ -110,8 +107,33 @@ export default class PresentationService extends Service {
     this.canShowAdjacentSlides = !this.canShowAdjacentSlides;
   }
 
+  respondToKeyPress({ keyCode }) {
+    // left arrow or A key
+    let isLeft = [37, 65].includes(keyCode);
+    // right arrow or D key
+    let isRight = [39, 68].includes(keyCode);
+
+    if (isLeft) {
+      this.goToPrevSlide();
+    }
+
+    if (isRight) {
+      this.goToNextSlide()
+    }
+  }
+
+  @action
+  startPresentation() {
+    this.hasStarted = true;
+    this.startTime = new Date();
+    this.startTicking();
+
+    this.socketManager.socket.emit('reset-time', this.startTime);
+  }
+
   willDestroy() {
     this.socketManager.socket.off('sync-time', this.syncTime);
+    document.removeEventListener('keydown', this.keyPressHandler);
 
     super.willDestroy(...arguments);
   }
diff --git a/app/services/socket-manager.js b/app/services/socket-manager.js
index eb52543..82e03a1 100644
--- a/app/services/socket-manager.js
+++ b/app/services/socket-manager.js
@@ -3,9 +3,32 @@ import { inject as service } from '@ember/service';
 
 export default class SocketManagerService extends Service {
   @service('socket-io') socketIOService;
+  @service presentation;
 
   init() {
     super.init(...arguments);
     this.socket = this.socketIOService.socketFor(`http://${location.hostname}:1512/`);
+
+    this.addSocketHandlers();
+  }
+
+  addSocketHandlers() {
+    this.socket.on('transition-to', this.transitionToSlide, this);
+    this.socket.on('play-state', this.handlePlayStateChange, this);
+  }
+
+  transitionToSlide(targetSlide) {
+    this.presentation.goToSlide(targetSlide);
+  }
+
+  handlePlayStateChange(status) {
+    this.presentation.isRunning = status;
+  }
+
+  willDestroy() {
+    this.socket.off('transition-to', this.transitionToSlide);
+    this.socket.off('play-state', this.handlePlayStateChange);
+
+    super.willDestroy(...arguments);
   }
 }
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index b7edf1f..f1e2e77 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -4,16 +4,12 @@
       <PresentationContainer
         @slide={{slide}}
         @speaker={{this.speaker}}
-        @hasStarted={{this.presentation.hasStarted}}
-        @startTicking={{this.startTicking}}
         @isExport={{true}} />
     {{/each}}
   {{else}}
     <PresentationContainer
       @slide={{this.slide}}
-      @speaker={{this.speaker}}
-      @hasStarted={{this.presentation.hasStarted}}
-      @startTicking={{this.startTicking}} />
+      @speaker={{this.speaker}} />
   {{/if}}
 
   {{#unless this.speaker}}