diff --git a/capabilities.h b/capabilities.h
new file mode 100644
index 0000000..06ffcab
--- /dev/null
+++ b/capabilities.h
@@ -0,0 +1,21 @@
+const char capabilities[] PROGMEM = R"=====(
+const amp = [{ cmd: 'down', name: 'Decrease volume', icon: '' },
+  { cmd: 'up', name: 'Increase volume', icon: '' },
+  { cmd: 'audio1', name: 'Audio 1', icon: '' },
+  { cmd: 'audio2', name: 'Audio 2', icon: '' },
+  { cmd: 'av1', name: 'AV 1', icon: '' },
+  { cmd: 'av2', name: 'AV 2', icon: '' },
+  { cmd: 'av3', name: 'AV 3', icon: '' },
+  { cmd: 'av4', name: 'AV 4', icon: '' },
+  { cmd: 'hdmi1', name: 'HDMI 1', icon: '' },
+  { cmd: 'hdmi2', name: 'HDMI 2', icon: '' },
+  { cmd: 'pwrAmp', name: 'Toggle Amp', icon: '' }];
+
+const tv = [{ cmd: 'pwrTv', name: 'Toggle TV' },
+  { cmd: 'input1', name: 'Switch' },
+  { cmd: 'input2', name: 'Xbone' } ,
+  { cmd: 'input3', name: 'Chromecast' },
+  { cmd: 'enter', name: 'Enter' }]
+
+const capabilities = { 'amp': amp, 'tv': tv }
+)=====";
diff --git a/index.h b/index.h
new file mode 100644
index 0000000..a158c81
--- /dev/null
+++ b/index.h
@@ -0,0 +1,43 @@
+const char html[] PROGMEM = R"=====(
+<!DOCTYPE html><html>
+<head>
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>ESP Media controller</h1>
+</body>
+<script src='capabilities.js'></script>
+<script type='application/javascript'>
+function draw() {
+  const { body } = document;
+
+  Object.keys(capabilities).forEach(key => {
+    const heading = document.createElement('h2');
+    const container = document.createElement('div');
+    container.className = 'container';
+
+    heading.innerText = key;
+    container.appendChild(heading)
+
+    capabilities[key].forEach(action => {
+      const button = document.createElement('button');
+      button.innerText = action.name;
+      button.setAttribute('onClick', `toggle('${action.cmd}')`);
+
+      container.appendChild(button);
+    })
+
+    container.appendChild(document.createElement('hr'));
+    body.appendChild(container)
+  });
+}
+
+draw();
+
+function toggle(value) {
+  window.fetch('http://10.0.0.100/' + value, { method: 'POST' })
+  .then(console.log, console.error)
+}
+</script></html>
+)=====";
diff --git a/style.h b/style.h
new file mode 100644
index 0000000..2677e5e
--- /dev/null
+++ b/style.h
@@ -0,0 +1,47 @@
+const char css[] PROGMEM = R"=====(
+body { 
+  font-family: Helvetica Neue;
+  background-color: black;
+  color: white;
+}
+h2 {
+  text-transform: uppercase;
+  width: 100%;
+}
+hr {
+  width: 100%;
+  border: 1px solid #323136;
+  margin-top: 1.5rem;
+}
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 95%;
+  max-width: 1000px;
+  margin: 0 auto;
+  justify-content: space-between;
+}
+.container button {
+  -webkit-apperance: unset;
+  touch-action: manipulation;
+  width: 8rem;
+  height: 2rem;
+  border-radius: 16px;
+  border: unset;
+  background-color: white;
+  color: black;
+  font-weight: 600;
+  margin: 0.3rem 0;
+  padding: 0.9rem;
+  font-size: 1.2rem;
+  line-height: 1.2rem;
+  box-sizing: unset;
+
+  @media (min-width: 768px) {
+    margin: 0.3rem;
+  }
+}
+.container button i::before {
+  content: '';
+}
+)=====";
\ No newline at end of file
