diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e69de29
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..222861c
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}
diff --git a/config.js b/config.js
index bb8baed..c987d87 100644
--- a/config.js
+++ b/config.js
@@ -1,11 +1,11 @@
 const CONFIG = {
-	apiKey: "9811add4-5ee3-436d-ae9d-d98ff53a1f12",
-	remoteAppPort: 5899,
-	style: {
-		fontBackground: "rgba(19, 20, 33, 0.5)",
-		fontColor: "#ffffff",
-		fontSize: "70pt",
-		fontStrokeSize: "3px",
-		fontStrokeColor: "#000000",
-	},
+  apiKey: "9811add4-5ee3-436d-ae9d-d98ff53a1f12",
+  remoteAppPort: 5899,
+  style: {
+    fontBackground: "rgba(19, 20, 33, 0.5)",
+    fontColor: "#ffffff",
+    fontSize: "70pt",
+    fontStrokeSize: "3px",
+    fontStrokeColor: "#000000",
+  },
 };
diff --git a/css/style.css b/css/style.css
index 82d200d..0cb65c2 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,27 +1,27 @@
 * {
-	font-family: Arial, Helvetica, sans-serif;
-	font-weight: bold;
-	padding: 0;
-	margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  padding: 0;
+  margin: 0;
 }
 #content div {
-	margin-top: 5px;
+  margin-top: 5px;
 }
 .content-img {
-	float: left;
-	width: 100px;
+  float: left;
+  width: 100px;
 }
 
 .content-img img {
-	display: block;
+  display: block;
 }
 
 .content-text {
-	margin-left: 130px;
+  margin-left: 130px;
 }
 
 .content-text p {
-	display: inline;
-	padding-left: 20px;
-	padding-right: 20px;
+  display: inline;
+  padding-left: 20px;
+  padding-right: 20px;
 }
diff --git a/js/app.js b/js/app.js
index 787fad9..acf6cc0 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,70 +1,70 @@
 function main() {
-	const ws = new WebSocket(`ws://localhost:${CONFIG.remoteAppPort}`);
-	const paylaod = {
-		type: "auth",
-		payload: {
-			identifier: "de.tealfire.obs",
-			version: "0.0.1",
-			name: "TS5 OBS Overlay",
-			description: "A simple OBS overlay for TS5 by DerTyp876",
-			content: {
-				apiKey: CONFIG.apiKey,
-			},
-		},
-	};
+  const ws = new WebSocket(`ws://localhost:${CONFIG.remoteAppPort}`);
+  const paylaod = {
+    type: "auth",
+    payload: {
+      identifier: "de.tealfire.obs",
+      version: "0.0.1",
+      name: "TS5 OBS Overlay",
+      description: "A simple OBS overlay for TS5 by DerTyp876",
+      content: {
+        apiKey: CONFIG.apiKey,
+      },
+    },
+  };
 
-	clientList.clear();
-	channelList.clear();
+  clientList.clear();
+  channelList.clear();
 
-	ws.onopen = (event) => {
-		// Send payload to TS5 client
-		ws.send(JSON.stringify(paylaod));
-	};
+  ws.onopen = (event) => {
+    // Send payload to TS5 client
+    ws.send(JSON.stringify(paylaod));
+  };
 
-	ws.onmessage = (event) => {
-		let data = JSON.parse(event.data);
-		// console.log(data);
-		switch (data.type) {
-			case "auth":
-				handleAuthMessage(data);
-				console.log(
-					"%c --> API-KEY: %s ",
-					"color:red;font-weight:bold;",
-					` ${data.payload.apiKey}`
-				);
-				break;
-			case "clientMoved":
-				handleClientMoved(data);
-				break;
-			case "clientPropertiesUpdated":
-				handleClientPropertiesUpdate(data);
-				break;
-			case "talkStatusChanged":
-				handleTalkStatusChanged(data);
-				break;
-			case "serverPropertiesUpdated":
-				ws.close();
-			default:
-				console.log(`No handler for event type: ${data.type}`);
-				break;
-		}
+  ws.onmessage = (event) => {
+    let data = JSON.parse(event.data);
+    // console.log(data);
+    switch (data.type) {
+      case "auth":
+        handleAuthMessage(data);
+        console.log(
+          "%c --> API-KEY: %s ",
+          "color:red;font-weight:bold;",
+          ` ${data.payload.apiKey}`
+        );
+        break;
+      case "clientMoved":
+        handleClientMoved(data);
+        break;
+      case "clientPropertiesUpdated":
+        handleClientPropertiesUpdate(data);
+        break;
+      case "talkStatusChanged":
+        handleTalkStatusChanged(data);
+        break;
+      case "serverPropertiesUpdated":
+        ws.close();
+      default:
+        console.log(`No handler for event type: ${data.type}`);
+        break;
+    }
 
-		// Draw clientList in HTML object
-		drawClients();
-	};
+    // Draw clientList in HTML object
+    drawClients();
+  };
 
-	ws.onerror = (err) => {
-		console.error(err);
-		ws.close();
-		return;
-	};
+  ws.onerror = (err) => {
+    console.error(err);
+    ws.close();
+    return;
+  };
 
-	ws.onclose = (event) => {
-		console.log("Disconnected: " + event.reason);
-		clientList.clear();
-		channelList.clear();
-		drawClients();
-		main(); // Reconnected
-	};
+  ws.onclose = (event) => {
+    console.log("Disconnected: " + event.reason);
+    clientList.clear();
+    channelList.clear();
+    drawClients();
+    main(); // Reconnected
+  };
 }
 main();
diff --git a/js/display_content.js b/js/display_content.js
index 4fdbf6d..c42dcc3 100644
--- a/js/display_content.js
+++ b/js/display_content.js
@@ -1,23 +1,23 @@
 function drawClients() {
-	let elem = document.getElementById("content");
+  let elem = document.getElementById("content");
 
-	result = "";
-	getClientsInChannel(thisClient.channel).forEach((c) => {
-		result += `<div style="color:${CONFIG.style.fontColor}; font-size:${CONFIG.style.fontSize}">`;
-		result += '<div class="content-img">';
-		if (c.outputMuted) {
-			result += '	<img src="img/muted_output.svg" />';
-		} else if (c.inputMuted) {
-			result += '	<img src="img/muted_input.svg" />';
-		} else if (c.talkStatus == 1) {
-			result += '	<img src="img/on.svg" />';
-		} else {
-			result += '	<img src="img/off.svg" />';
-		}
-		result += "</div>";
-		result += `<div class="content-text"
+  result = "";
+  getClientsInChannel(thisClient.channel).forEach((c) => {
+    result += `<div style="color:${CONFIG.style.fontColor}; font-size:${CONFIG.style.fontSize}">`;
+    result += '<div class="content-img">';
+    if (c.outputMuted) {
+      result += '	<img src="img/muted_output.svg" />';
+    } else if (c.inputMuted) {
+      result += '	<img src="img/muted_input.svg" />';
+    } else if (c.talkStatus == 1) {
+      result += '	<img src="img/on.svg" />';
+    } else {
+      result += '	<img src="img/off.svg" />';
+    }
+    result += "</div>";
+    result += `<div class="content-text"
 		 style="-webkit-text-stroke:${CONFIG.style.fontStrokeSize} ${CONFIG.style.fontStrokeColor};
 		"><p style="background:${CONFIG.style.fontBackground};">${c.name}</p></div></div>`;
-	});
-	elem.innerHTML = result;
+  });
+  elem.innerHTML = result;
 }
diff --git a/js/event_handlers.js b/js/event_handlers.js
index 3dfda80..4ef3fde 100644
--- a/js/event_handlers.js
+++ b/js/event_handlers.js
@@ -1,80 +1,80 @@
 function handleAuthMessage(data) {
-	channelList.setItems(
-		parseChannelInfos(data.payload.connections[0].channelInfos)
-	);
-	clientList.setItems(
-		parseClientInfos(data.payload.connections[0].clientInfos)
-	);
-	thisClient = clientList.getById(data.payload.connections[0].clientId);
+  channelList.setItems(
+    parseChannelInfos(data.payload.connections[0].channelInfos)
+  );
+  clientList.setItems(
+    parseClientInfos(data.payload.connections[0].clientInfos)
+  );
+  thisClient = clientList.getById(data.payload.connections[0].clientId);
 }
 
 function handleClientMoved(data) {
-	const client = clientList.getById(data.payload.clientId);
+  const client = clientList.getById(data.payload.clientId);
 
-	if (data.payload.newChannelId == 0) {
-		// User disconnected
-		if (client) {
-			console.log(`${client.name} disconnected`);
-			clientList.remove(client);
-		}
-		if (data.payload.clientId == thisClient.id) {
-			console.log("You disconnected");
-			clientList.clear();
-		}
-	} else {
-		// User moved channel
-		if (client) {
-			// Client already exists in list
-			clientList.getById(data.payload.clientId).channel = channelList.getById(
-				data.payload.newChannelId
-			);
-		} else {
-			// New Client has to be created
-			clientList.add(
-				new Client(
-					data.payload.clientId,
-					channelList.getById(data.payload.newChannelId),
-					data.payload.properties.nickname
-				)
-			);
-		}
-	}
+  if (data.payload.newChannelId == 0) {
+    // User disconnected
+    if (client) {
+      console.log(`${client.name} disconnected`);
+      clientList.remove(client);
+    }
+    if (data.payload.clientId == thisClient.id) {
+      console.log("You disconnected");
+      clientList.clear();
+    }
+  } else {
+    // User moved channel
+    if (client) {
+      // Client already exists in list
+      clientList.getById(data.payload.clientId).channel = channelList.getById(
+        data.payload.newChannelId
+      );
+    } else {
+      // New Client has to be created
+      clientList.add(
+        new Client(
+          data.payload.clientId,
+          channelList.getById(data.payload.newChannelId),
+          data.payload.properties.nickname
+        )
+      );
+    }
+  }
 }
 
 function handleClientPropertiesUpdate(data) {
-	let client = clientList.getById(data.payload.clientId);
-	if (data.payload.properties.channelGroupInheritedChannelId == 0) {
-		if (client) {
-			clientList.remove(client);
-		}
-	} else {
-		if (client) {
-			client.channel = channelList.getById(
-				data.payload.properties.channelGroupInheritedChannelId
-			);
+  let client = clientList.getById(data.payload.clientId);
+  if (data.payload.properties.channelGroupInheritedChannelId == 0) {
+    if (client) {
+      clientList.remove(client);
+    }
+  } else {
+    if (client) {
+      client.channel = channelList.getById(
+        data.payload.properties.channelGroupInheritedChannelId
+      );
 
-			client.name = data.payload.properties.nickname;
-			client.inputMuted = data.payload.properties.inputMuted;
-			client.outputMuted = data.payload.properties.outputMuted;
-		} else {
-			clientList.add(
-				new Client(
-					data.payload.clientId,
-					channelList.getById(
-						data.payload.properties.channelGroupInheritedChannelId
-					),
-					data.payload.properties.nickname,
-					data.payload.properies.inputMuted,
-					data.payload.properies.outputMuted
-				)
-			);
-		}
-	}
+      client.name = data.payload.properties.nickname;
+      client.inputMuted = data.payload.properties.inputMuted;
+      client.outputMuted = data.payload.properties.outputMuted;
+    } else {
+      clientList.add(
+        new Client(
+          data.payload.clientId,
+          channelList.getById(
+            data.payload.properties.channelGroupInheritedChannelId
+          ),
+          data.payload.properties.nickname,
+          data.payload.properies.inputMuted,
+          data.payload.properies.outputMuted
+        )
+      );
+    }
+  }
 }
 
 function handleTalkStatusChanged(data) {
-	let client = clientList.getById(data.payload.clientId);
-	if (client) {
-		client.talkStatus = data.payload.status;
-	}
+  let client = clientList.getById(data.payload.clientId);
+  if (client) {
+    client.talkStatus = data.payload.status;
+  }
 }
diff --git a/js/objects.js b/js/objects.js
index c8eae4f..850267f 100644
--- a/js/objects.js
+++ b/js/objects.js
@@ -1,68 +1,68 @@
 class Channel {
-	constructor(id, name) {
-		this.id = id;
-		this.name = name;
-	}
+  constructor(id, name) {
+    this.id = id;
+    this.name = name;
+  }
 }
 
 class Client {
-	constructor(
-		id,
-		channel,
-		name,
-		inputMuted = false,
-		outputMuted = false,
-		talkStatus = 0
-	) {
-		this.id = id;
-		this.channel = channel;
-		this.name = name;
-		this.inputMuted = inputMuted;
-		this.outputMuted = outputMuted;
-		this.talkStatus = talkStatus;
-		console.log(`Client created: ${this.id} - ${this.name}`);
-	}
+  constructor(
+    id,
+    channel,
+    name,
+    inputMuted = false,
+    outputMuted = false,
+    talkStatus = 0
+  ) {
+    this.id = id;
+    this.channel = channel;
+    this.name = name;
+    this.inputMuted = inputMuted;
+    this.outputMuted = outputMuted;
+    this.talkStatus = talkStatus;
+    console.log(`Client created: ${this.id} - ${this.name}`);
+  }
 }
 
 class List {
-	constructor(items = []) {
-		this.items = items;
-	}
+  constructor(items = []) {
+    this.items = items;
+  }
 
-	getById(id) {
-		return this.items.filter((obj) => {
-			return obj.id === id;
-		})[0];
-	}
+  getById(id) {
+    return this.items.filter((obj) => {
+      return obj.id === id;
+    })[0];
+  }
 
-	add(item) {
-		if (!this.getById(item.id)) {
-			this.items.push(item);
-		} else {
-			console.error(`An item with id ${item.id} already exists in list`);
-		}
-	}
+  add(item) {
+    if (!this.getById(item.id)) {
+      this.items.push(item);
+    } else {
+      console.error(`An item with id ${item.id} already exists in list`);
+    }
+  }
 
-	remove(item) {
-		this.items.splice(this.items.indexOf(item), 1);
-	}
+  remove(item) {
+    this.items.splice(this.items.indexOf(item), 1);
+  }
 
-	clear() {
-		this.items = [];
-	}
+  clear() {
+    this.items = [];
+  }
 
-	setItems(items) {
-		// Never tested
-		let duplicateFound = false;
-		items.forEach((e1, i) => {
-			items.forEach((e2, j) => {
-				if (e1.id === e2.id && i != j) {
-					duplicateFound = true;
-				}
-			});
-		});
-		if (!duplicateFound) {
-			this.items = items;
-		}
-	}
+  setItems(items) {
+    // Never tested
+    let duplicateFound = false;
+    items.forEach((e1, i) => {
+      items.forEach((e2, j) => {
+        if (e1.id === e2.id && i != j) {
+          duplicateFound = true;
+        }
+      });
+    });
+    if (!duplicateFound) {
+      this.items = items;
+    }
+  }
 }
diff --git a/js/parser.js b/js/parser.js
index 77e69f6..442a0bf 100644
--- a/js/parser.js
+++ b/js/parser.js
@@ -1,32 +1,32 @@
 function parseChannelInfos(channelInfos) {
-	let result = [];
-	let rootChannels = channelInfos.rootChannels;
-	let subChannels = channelInfos.subChannels;
+  let result = [];
+  let rootChannels = channelInfos.rootChannels;
+  let subChannels = channelInfos.subChannels;
 
-	rootChannels.forEach((rc) => {
-		result.push(new Channel(rc.id, rc.properties.name));
+  rootChannels.forEach((rc) => {
+    result.push(new Channel(rc.id, rc.properties.name));
 
-		if (rc.id in subChannels) {
-			subChannels[rc.id].forEach((sc) => {
-				result.push(new Channel(sc.id, sc.properties.name));
-			});
-		}
-	});
-	return result;
+    if (rc.id in subChannels) {
+      subChannels[rc.id].forEach((sc) => {
+        result.push(new Channel(sc.id, sc.properties.name));
+      });
+    }
+  });
+  return result;
 }
 
 function parseClientInfos(clientInfos) {
-	let result = [];
-	clientInfos.forEach((e) => {
-		result.push(
-			new Client(
-				e.id,
-				channelList.getById(e.channelId),
-				e.properties.nickname,
-				e.properties.inputMuted,
-				e.properties.outputMuted
-			)
-		);
-	});
-	return result;
+  let result = [];
+  clientInfos.forEach((e) => {
+    result.push(
+      new Client(
+        e.id,
+        channelList.getById(e.channelId),
+        e.properties.nickname,
+        e.properties.inputMuted,
+        e.properties.outputMuted
+      )
+    );
+  });
+  return result;
 }
diff --git a/js/utils.js b/js/utils.js
index 361e6aa..e8dee7c 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -1,10 +1,10 @@
 function getClientsInChannel(channel) {
-	let result = [];
+  let result = [];
 
-	clientList.items.forEach((e) => {
-		if (e.channel.id == channel.id) {
-			result.push(e);
-		}
-	});
-	return result;
+  clientList.items.forEach((e) => {
+    if (e.channel.id == channel.id) {
+      result.push(e);
+    }
+  });
+  return result;
 }
diff --git a/overlay.html b/overlay.html
index 38cd3f0..34ebb47 100644
--- a/overlay.html
+++ b/overlay.html
@@ -1,27 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<link rel="stylesheet" href="css/style.css" />
-		<title>TS5 - OBS Overlay</title>
-	</head>
-	<body>
-		<script src="config.js"></script>
-		<script src="js/objects.js"></script>
-		<script>
-			let clientList = new List();
-			let channelList = new List();
-			let thisClient;
-		</script>
-		<div id="content"></div>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="css/style.css" />
+    <title>TS5 - OBS Overlay</title>
+  </head>
+  <body>
+    <script src="config.js"></script>
+    <script src="js/objects.js"></script>
+    <script>
+      let clientList = new List();
+      let channelList = new List();
+      let thisClient;
+    </script>
+    <div id="content"></div>
 
-		<!--Scripts-->
-		<script src="js/utils.js"></script>
-		<script src="js/display_content.js"></script>
-		<script src="js/parser.js"></script>
-		<script src="js/event_handlers.js"></script>
-		<script src="js/app.js"></script>
-	</body>
+    <!--Scripts-->
+    <script src="js/utils.js"></script>
+    <script src="js/display_content.js"></script>
+    <script src="js/parser.js"></script>
+    <script src="js/event_handlers.js"></script>
+    <script src="js/app.js"></script>
+  </body>
 </html>