diff --git a/frontend/index.html b/frontend/index.html
index a04d40a..47a9e22 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" type="text/css" href="/node_modules/@picocss/pico/css/pico.min.css">
     <title>yellowjacket</title>
 </head>
-<script src="/index.js" type="module"></script>
+<script src="/index.ts" type="module"></script>
 
 <body>
     <header class="container">
@@ -42,7 +42,7 @@
     <main class="container">
     </main>
     <footer>
-        <player-controls></player-controls>
+        <audio-player></audio-player>
     </footer>
 </body>
 
diff --git a/frontend/index.js b/frontend/index.js
deleted file mode 100644
index 24d4c58..0000000
--- a/frontend/index.js
+++ /dev/null
@@ -1 +0,0 @@
-import '/src/components/audio-player/audio-player.js';
diff --git a/frontend/index.ts b/frontend/index.ts
new file mode 100644
index 0000000..01636ff
--- /dev/null
+++ b/frontend/index.ts
@@ -0,0 +1 @@
+import '@components/audio-player/audio-player.ts';
diff --git a/frontend/src/components/audio-player/audio-player.ts b/frontend/src/components/audio-player/audio-player.ts
index 956ad18..58f4271 100644
--- a/frontend/src/components/audio-player/audio-player.ts
+++ b/frontend/src/components/audio-player/audio-player.ts
@@ -2,20 +2,18 @@ import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { Play } from '@go/player/Player';
 
-const audioPlayer = (text: string, disabled: boolean) => html`
-    <p>Welcome to the Lit tutorial!</p>
-    <h
+const audioPlayer = () => html`
+<h1>Hello World</h1>
 `;
 
-
 @customElement('audio-player')
 export class AudioPlayer extends LitElement {
 
   render() {
-    return audioPlayer;
+    return audioPlayer();
   }
 
-  onPlayPauseButtonClick = function() {
+  onPlayPauseButtonClick()  {
     let playPauseButtonIcon = document.getElementById("playPauseButtonIcon");
     try {
       Play().then((result) => {
