diff --git a/frontend/index.html b/frontend/index.html
index 8958623..d037364 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -7,6 +7,7 @@
     <title>yellowjacket</title>
     <link rel="stylesheet" type="text/css" href="/src/assets/styles/pico.css">
 </head>
+<script type="module" src="/src/components/player.js"></script>
 <script src="/src/assets/scripts/main.js" type="module"></script>
 
 <body>
@@ -28,7 +29,7 @@
                         </summary>
                         <ul>
                             <li>
-                                <a href="#">
+                                <a href="/src/pages/config.html">
                                     <img src="/src/assets/images/icons/ui/settings.svg" />
                                 </a>
                             </li>
@@ -50,7 +51,9 @@
             </button>
         </section>
     </main>
-    <footer></footer>
+    <footer>
+        <player-controls></player-controls>
+    </footer>
 </body>
 
 </html>
diff --git a/frontend/src/components/player.js b/frontend/src/components/player.js
new file mode 100644
index 0000000..b82fadb
--- /dev/null
+++ b/frontend/src/components/player.js
@@ -0,0 +1,21 @@
+import {LitElement, html} from 'lit';
+
+export class Player extends LitElement {
+  static properties = {
+    version: {},
+  };
+
+  constructor() {
+    super();
+    this.version = 'STARTING';
+  }
+
+  render() {
+    return html`
+    <p>Welcome to the Lit tutorial!</p>
+    <p>This is the ${this.version} code.</p>
+    `;
+  }
+}
+customElements.define('player-controls', Player);
+
diff --git a/frontend/src/pages/config.html b/frontend/src/pages/config.html
new file mode 100644
index 0000000..e69de29
