diff --git a/package.json b/package.json
index b0abb3d9..01d07950 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
   "directories": {},
   "scripts": {
     "compile-sass": "sass --update .:.",
-    "build-worker": "tsc -p shared/js/workers/tsconfig_worker_codec.json",
+    "build-worker-codec": "tsc -p shared/js/workers/tsconfig_worker_codec.json",
+    "build-worker-pow": "tsc -p shared/js/workers/tsconfig_worker_pow.json",
     "dtsgen": "node tools/dtsgen/index.js",
     "trgen": "node tools/trgen/index.js",
     "ttsc": "ttsc",
diff --git a/scripts/web_build.sh b/scripts/web_build.sh
index f06d1336..9fda09ea 100755
--- a/scripts/web_build.sh
+++ b/scripts/web_build.sh
@@ -28,9 +28,14 @@ if [[ $? -ne 0 ]]; then
 fi
 
 echo "Generating web workers"
-npm run build-worker
+npm run build-worker-codec
 if [[ $? -ne 0 ]]; then
-    echo "Failed to build web workers"
+    echo "Failed to build web worker codec"
+    exit 1
+fi
+npm run build-worker-pow
+if [[ $? -ne 0 ]]; then
+    echo "Failed to build web worker pow"
     exit 1
 fi
 
diff --git a/setup_windows.md b/setup_windows.md
new file mode 100644
index 00000000..e637c140
--- /dev/null
+++ b/setup_windows.md
@@ -0,0 +1,35 @@
+# Setup the develop environment on windows
+## 1.0 Requirements
+The following tools or applications are required to develop the web client:
+- [1.1 IDE](#11-ide)
+- [1.2 XAMPP (apache & php)](#12-xampp-with-a-web-server-and-php)
+- [1.3 NPM](#13-npm)
+- [1.4 Git bash](#14-git-bash)
+
+### 1.1 IDE
+For developing TeaWeb you require and IDE.  
+Preferable is PHPStorm from Jetbrains because the've already build in compiling on changes.  
+Else you've to run the compiler to compile the TS or SCSS files to js e.g. css files.
+
+### 1.2 XAMPP with a web server and PHP
+You require PHP (grater than 5) to setup and manage the project files.  
+PHP is required for the index page as well.
+The web server is required for browsing your final environment and watch your result.  
+The final environment will be found at `web/environemnt/development/`. More information about  
+the file structure could be found [here (TODO: link me!)]().
+
+### 1.3 NPM 
+NPM min 6.X is required to develop this project.  
+With NPM you could easily download all required dependencies by just typing `npm install`.  
+IMPORTANT: NPM must be available within the PATH environment variable!  
+
+### 1.4 Git bash
+For using the `.sh` build scripts you require Git Bash.  
+A minimum of 4.2 is recommend, but in general every version should work.  
+
+## 2.0 Development environment setup
+### 2.1 Native code (codecs) (Not required)
+If you dont want to develop the codec part or something related to the native
+webassembly part of TeaWeb you could skip this step and follow the steps in [2.1-b](#21-b-skip-native-code-setup)
+
+### 2.1-b Skip native code setup
diff --git a/shared/css/static/channel-tree.scss b/shared/css/static/channel-tree.scss
index 21c92257..5d92c8c7 100644
--- a/shared/css/static/channel-tree.scss
+++ b/shared/css/static/channel-tree.scss
@@ -37,6 +37,7 @@
             flex-direction: row;
             justify-content: stretch;
 
+            cursor: pointer;
             margin-left: 0;
 
             .server_type {
@@ -193,7 +194,15 @@
 }
 
 /* all icons related to basic_icons */
-.clicon {width:16px;height:16px;background:url('../../img/ts/basic_icons.png') no-repeat;background-size: 16px 608px;}
+.clicon {
+    width:16px;
+    height:16px;
+    background:url('../../img/ts/basic_icons.png') no-repeat;
+    background-size: 16px 608px;
+
+    flex-grow: 0;
+    flex-shrink: 0;
+}
 
 .host {background-position: 0 -448px}
 
diff --git a/shared/css/static/frame/SelectInfo.scss b/shared/css/static/frame/SelectInfo.scss
index bcf52dff..72ff32e3 100644
--- a/shared/css/static/frame/SelectInfo.scss
+++ b/shared/css/static/frame/SelectInfo.scss
@@ -1,11 +1,16 @@
 .select_info_table { }
 .select_info_table tr { }
-.select_info_table tr td { }
+.select_info_table tr td {
+	&:nth-child(1) {
+		font-weight: bold;
+		padding-right: 5px;
+		min-width: max(35%, 20px);
+	}
 
-.select_info_table tr td:nth-child(1) {
-    font-weight: bold;
-    padding-right: 5px;
-    min-width: 20%;
+	&:nth-child(2) {
+        min-width: max(75%, 40px);
+        word-break: break-word;
+	}
 }
 
 .select_server {
@@ -17,21 +22,18 @@
 
 	.button-update {
 		width: 100%;
-		height: 23px;
 
 		&:disabled {
-			color: red;
 			pointer-events: none;
 		}
-		&:not(:disabled) {
-			color: green;
-		}
 	}
 
 	.container {
 		max-height: 100%;
 		display: flex;
 		flex-direction: column;
+		padding-right: 0;
+		padding-left: 0;
 
 		.hostbanner {
 			overflow: hidden;
@@ -39,18 +41,20 @@
 	}
 }
 
-/*
-  <div id="select_info" class="select_info" style="width: 100%; max-width: 100%">
-                                <div class="container-banner"></div>
-                                <div class="container-info"></div>
-                            </div>
- */
 .select_info {
 	display: flex;
 	flex-direction: column;
 	justify-content: stretch;
 	width: 100%;
 
+	> .close {
+        z-index: 500;
+		display: none;
+		position: absolute;
+		right: 5px;
+		top: 5px;
+	}
+
 	> div {
 		width: 100%;
 	}
diff --git a/shared/css/static/general.scss b/shared/css/static/general.scss
index 8217371c..e59cbc80 100644
--- a/shared/css/static/general.scss
+++ b/shared/css/static/general.scss
@@ -228,8 +228,11 @@ footer .container {
 }
 
 $separator_thickness: 4px;
+$small_device: 500px;
+
 .app {
 	.container-app-main {
+		position: relative;
 		display: flex;
 		flex-direction: row;
 		justify-content: stretch;
@@ -303,6 +306,38 @@ $separator_thickness: 4px;
 	}
 }
 
+@media only screen and (max-width: $small_device) {
+    .container-app-main {
+        .container-info {
+            display: none;
+            position: absolute;
+
+            width: 100%!important; /* override the seperator property */
+            height: 100%;
+
+            z-index: 1000;
+
+            &.shown {
+                display: block;
+            }
+
+            .select_info {
+                > .close {
+                    display: block;
+                }
+            }
+        }
+
+        .container-channel-chat + .container-seperator {
+            display: none;
+        }
+
+        .container-channel-chat {
+            width: 100%!important; /* override the seperator property */
+        }
+    }
+}
+
 .container-seperator {
 	background: lightgray;
 	flex-grow: 0;
@@ -328,6 +363,7 @@ $separator_thickness: 4px;
 }
 
 .icon-container {
+	position: relative;
 	display: inline-block;
 	height: 16px;
 	width: 16px;
@@ -354,8 +390,6 @@ $separator_thickness: 4px;
 }
 
 html, body {
-	min-height: 500px;
-	min-width: 500px;
 	overflow: hidden;
 }
 
diff --git a/shared/css/static/ts/country.scss b/shared/css/static/ts/country.scss
index 6311ee1b..4515f67b 100644
--- a/shared/css/static/ts/country.scss
+++ b/shared/css/static/ts/country.scss
@@ -1,1005 +1,1008 @@
 .country {
-  width: 16px;
-  height: 11px;
-  background: url('../../../img/ts/country_icons.png'), url('../../img/ts/country_icons.png') no-repeat;
+    width: 16px;
+    height: 11px;
+    background: url('../../../img/ts/country_icons.png'), url('../../img/ts/country_icons.png') no-repeat;
+
+    flex-shrink: 0;
+    flex-grow: 0;
 }
 
 .country.flag-ad {
-  background-position: 0 -11px
+    background-position: 0 -11px
 }
 
 .country.flag-ae {
-  background-position: 0 -22px
+    background-position: 0 -22px
 }
 
 .country.flag-af {
-  background-position: 0 -33px
+    background-position: 0 -33px
 }
 
 .country.flag-ag {
-  background-position: 0 -44px
+    background-position: 0 -44px
 }
 
 .country.flag-ai {
-  background-position: 0 -55px
+    background-position: 0 -55px
 }
 
 .country.flag-al {
-  background-position: 0 -66px
+    background-position: 0 -66px
 }
 
 .country.flag-am {
-  background-position: 0 -77px
+    background-position: 0 -77px
 }
 
 .country.flag-an {
-  background-position: 0 -88px
+    background-position: 0 -88px
 }
 
 .country.flag-ao {
-  background-position: 0 -99px
+    background-position: 0 -99px
 }
 
 .country.flag-ar {
-  background-position: 0 -110px
+    background-position: 0 -110px
 }
 
 .country.flag-as {
-  background-position: 0 -121px
+    background-position: 0 -121px
 }
 
 .country.flag-at {
-  background-position: 0 -132px
+    background-position: 0 -132px
 }
 
 .country.flag-au {
-  background-position: 0 -143px
+    background-position: 0 -143px
 }
 
 .country.flag-aw {
-  background-position: 0 -154px
+    background-position: 0 -154px
 }
 
 .country.flag-ax {
-  background-position: 0 -165px
+    background-position: 0 -165px
 }
 
 .country.flag-az {
-  background-position: 0 -176px
+    background-position: 0 -176px
 }
 
 .country.flag-ba {
-  background-position: 0 -187px
+    background-position: 0 -187px
 }
 
 .country.flag-bb {
-  background-position: 0 -198px
+    background-position: 0 -198px
 }
 
 .country.flag-bd {
-  background-position: 0 -209px
+    background-position: 0 -209px
 }
 
 .country.flag-be {
-  background-position: 0 -220px
+    background-position: 0 -220px
 }
 
 .country.flag-bf {
-  background-position: 0 -231px
+    background-position: 0 -231px
 }
 
 .country.flag-bg {
-  background-position: 0 -242px
+    background-position: 0 -242px
 }
 
 .country.flag-bh {
-  background-position: 0 -253px
+    background-position: 0 -253px
 }
 
 .country.flag-bi {
-  background-position: 0 -264px
+    background-position: 0 -264px
 }
 
 .country.flag-bj {
-  background-position: 0 -275px
+    background-position: 0 -275px
 }
 
 .country.flag-bl {
-  background-position: 0 -286px
+    background-position: 0 -286px
 }
 
 .country.flag-bm {
-  background-position: 0 -297px
+    background-position: 0 -297px
 }
 
 .country.flag-bn {
-  background-position: 0 -308px
+    background-position: 0 -308px
 }
 
 .country.flag-bo {
-  background-position: 0 -319px
+    background-position: 0 -319px
 }
 
 .country.flag-br {
-  background-position: 0 -330px
+    background-position: 0 -330px
 }
 
 .country.flag-bs {
-  background-position: 0 -341px
+    background-position: 0 -341px
 }
 
 .country.flag-bt {
-  background-position: 0 -352px
+    background-position: 0 -352px
 }
 
 .country.flag-bv {
-  background-position: 0 -363px
+    background-position: 0 -363px
 }
 
 .country.flag-bw {
-  background-position: 0 -374px
+    background-position: 0 -374px
 }
 
 .country.flag-by {
-  background-position: 0 -385px
+    background-position: 0 -385px
 }
 
 .country.flag-bz {
-  background-position: 0 -396px
+    background-position: 0 -396px
 }
 
 .country.flag-ca {
-  background-position: 0 -407px
+    background-position: 0 -407px
 }
 
 .country.flag-cc {
-  background-position: 0 -418px
+    background-position: 0 -418px
 }
 
 .country.flag-cd {
-  background-position: 0 -429px
+    background-position: 0 -429px
 }
 
 .country.flag-cf {
-  background-position: 0 -440px
+    background-position: 0 -440px
 }
 
 .country.flag-cg {
-  background-position: 0 -451px
+    background-position: 0 -451px
 }
 
 .country.flag-ch {
-  background-position: 0 -462px
+    background-position: 0 -462px
 }
 
 .country.flag-ci {
-  background-position: 0 -473px
+    background-position: 0 -473px
 }
 
 .country.flag-ck {
-  background-position: 0 -484px
+    background-position: 0 -484px
 }
 
 .country.flag-cl {
-  background-position: 0 -495px
+    background-position: 0 -495px
 }
 
 .country.flag-cm {
-  background-position: 0 -506px
+    background-position: 0 -506px
 }
 
 .country.flag-cn {
-  background-position: 0 -517px
+    background-position: 0 -517px
 }
 
 .country.flag-co {
-  background-position: 0 -528px
+    background-position: 0 -528px
 }
 
 .country.flag-cr {
-  background-position: 0 -539px
+    background-position: 0 -539px
 }
 
 .country.flag-cs {
-  background-position: 0 -550px
+    background-position: 0 -550px
 }
 
 .country.flag-cu {
-  background-position: 0 -561px
+    background-position: 0 -561px
 }
 
 .country.flag-cv {
-  background-position: 0 -572px
+    background-position: 0 -572px
 }
 
 .country.flag-cx {
-  background-position: 0 -583px
+    background-position: 0 -583px
 }
 
 .country.flag-cy {
-  background-position: 0 -594px
+    background-position: 0 -594px
 }
 
 .country.flag-cz {
-  background-position: 0 -605px
+    background-position: 0 -605px
 }
 
 .country.flag-de {
-  background-position: 0 -616px
+    background-position: 0 -616px
 }
 
 .country.flag-dj {
-  background-position: 0 -627px
+    background-position: 0 -627px
 }
 
 .country.flag-dk {
-  background-position: 0 -638px
+    background-position: 0 -638px
 }
 
 .country.flag-dm {
-  background-position: 0 -649px
+    background-position: 0 -649px
 }
 
 .country.flag-do {
-  background-position: 0 -660px
+    background-position: 0 -660px
 }
 
 .country.flag-dz {
-  background-position: 0 -671px
+    background-position: 0 -671px
 }
 
 .country.flag-ec {
-  background-position: 0 -682px
+    background-position: 0 -682px
 }
 
 .country.flag-ee {
-  background-position: 0 -693px
+    background-position: 0 -693px
 }
 
 .country.flag-eg {
-  background-position: 0 -704px
+    background-position: 0 -704px
 }
 
 .country.flag-eh {
-  background-position: 0 -715px
+    background-position: 0 -715px
 }
 
 .country.flag-er {
-  background-position: 0 -726px
+    background-position: 0 -726px
 }
 
 .country.flag-es {
-  background-position: 0 -737px
+    background-position: 0 -737px
 }
 
 .country.flag-et {
-  background-position: 0 -748px
+    background-position: 0 -748px
 }
 
 .country.flag-fi {
-  background-position: 0 -759px
+    background-position: 0 -759px
 }
 
 .country.flag-fj {
-  background-position: 0 -770px
+    background-position: 0 -770px
 }
 
 .country.flag-fk {
-  background-position: 0 -781px
+    background-position: 0 -781px
 }
 
 .country.flag-fm {
-  background-position: 0 -792px
+    background-position: 0 -792px
 }
 
 .country.flag-fo {
-  background-position: 0 -803px
+    background-position: 0 -803px
 }
 
 .country.flag-fr {
-  background-position: 0 -814px
+    background-position: 0 -814px
 }
 
 .country.flag-ga {
-  background-position: 0 -825px
+    background-position: 0 -825px
 }
 
 .country.flag-gb {
-  background-position: 0 -836px
+    background-position: 0 -836px
 }
 
 .country.flag-gd {
-  background-position: 0 -847px
+    background-position: 0 -847px
 }
 
 .country.flag-ge {
-  background-position: 0 -858px
+    background-position: 0 -858px
 }
 
 .country.flag-gf {
-  background-position: 0 -869px
+    background-position: 0 -869px
 }
 
 .country.flag-gg {
-  background-position: 0 -880px
+    background-position: 0 -880px
 }
 
 .country.flag-gh {
-  background-position: 0 -891px
+    background-position: 0 -891px
 }
 
 .country.flag-gi {
-  background-position: 0 -902px
+    background-position: 0 -902px
 }
 
 .country.flag-gl {
-  background-position: 0 -913px
+    background-position: 0 -913px
 }
 
 .country.flag-gm {
-  background-position: 0 -924px
+    background-position: 0 -924px
 }
 
 .country.flag-gn {
-  background-position: 0 -935px
+    background-position: 0 -935px
 }
 
 .country.flag-gp {
-  background-position: 0 -946px
+    background-position: 0 -946px
 }
 
 .country.flag-gq {
-  background-position: 0 -957px
+    background-position: 0 -957px
 }
 
 .country.flag-gr {
-  background-position: 0 -968px
+    background-position: 0 -968px
 }
 
 .country.flag-gs {
-  background-position: 0 -979px
+    background-position: 0 -979px
 }
 
 .country.flag-gt {
-  background-position: 0 -990px
+    background-position: 0 -990px
 }
 
 .country.flag-gu {
-  background-position: 0 -1001px
+    background-position: 0 -1001px
 }
 
 .country.flag-gw {
-  background-position: 0 -1012px
+    background-position: 0 -1012px
 }
 
 .country.flag-gy {
-  background-position: 0 -1023px
+    background-position: 0 -1023px
 }
 
 .country.flag-hk {
-  background-position: 0 -1034px
+    background-position: 0 -1034px
 }
 
 .country.flag-hm {
-  background-position: 0 -1045px
+    background-position: 0 -1045px
 }
 
 .country.flag-hn {
-  background-position: 0 -1056px
+    background-position: 0 -1056px
 }
 
 .country.flag-hr {
-  background-position: 0 -1067px
+    background-position: 0 -1067px
 }
 
 .country.flag-ht {
-  background-position: 0 -1078px
+    background-position: 0 -1078px
 }
 
 .country.flag-hu {
-  background-position: 0 -1089px
+    background-position: 0 -1089px
 }
 
 .country.flag-id {
-  background-position: 0 -1100px
+    background-position: 0 -1100px
 }
 
 .country.flag-ie {
-  background-position: 0 -1111px
+    background-position: 0 -1111px
 }
 
 .country.flag-il {
-  background-position: 0 -1122px
+    background-position: 0 -1122px
 }
 
 .country.flag-im {
-  background-position: 0 -1133px
+    background-position: 0 -1133px
 }
 
 .country.flag-in {
-  background-position: 0 -1144px
+    background-position: 0 -1144px
 }
 
 .country.flag-io {
-  background-position: 0 -1155px
+    background-position: 0 -1155px
 }
 
 .country.flag-iq {
-  background-position: 0 -1166px
+    background-position: 0 -1166px
 }
 
 .country.flag-ir {
-  background-position: 0 -1177px
+    background-position: 0 -1177px
 }
 
 .country.flag-is {
-  background-position: 0 -1188px
+    background-position: 0 -1188px
 }
 
 .country.flag-it {
-  background-position: 0 -1199px
+    background-position: 0 -1199px
 }
 
 .country.flag-je {
-  background-position: 0 -1210px
+    background-position: 0 -1210px
 }
 
 .country.flag-jm {
-  background-position: 0 -1221px
+    background-position: 0 -1221px
 }
 
 .country.flag-jo {
-  background-position: 0 -1232px
+    background-position: 0 -1232px
 }
 
 .country.flag-jp {
-  background-position: 0 -1243px
+    background-position: 0 -1243px
 }
 
 .country.flag-ke {
-  background-position: 0 -1254px
+    background-position: 0 -1254px
 }
 
 .country.flag-kg {
-  background-position: 0 -1265px
+    background-position: 0 -1265px
 }
 
 .country.flag-kh {
-  background-position: 0 -1276px
+    background-position: 0 -1276px
 }
 
 .country.flag-ki {
-  background-position: 0 -1287px
+    background-position: 0 -1287px
 }
 
 .country.flag-km {
-  background-position: 0 -1298px
+    background-position: 0 -1298px
 }
 
 .country.flag-kn {
-  background-position: 0 -1309px
+    background-position: 0 -1309px
 }
 
 .country.flag-kp {
-  background-position: 0 -1320px
+    background-position: 0 -1320px
 }
 
 .country.flag-kr {
-  background-position: 0 -1331px
+    background-position: 0 -1331px
 }
 
 .country.flag-kw {
-  background-position: 0 -1342px
+    background-position: 0 -1342px
 }
 
 .country.flag-ky {
-  background-position: 0 -1353px
+    background-position: 0 -1353px
 }
 
 .country.flag-kz {
-  background-position: 0 -1364px
+    background-position: 0 -1364px
 }
 
 .country.flag-la {
-  background-position: 0 -1375px
+    background-position: 0 -1375px
 }
 
 .country.flag-lb {
-  background-position: 0 -1386px
+    background-position: 0 -1386px
 }
 
 .country.flag-lc {
-  background-position: 0 -1397px
+    background-position: 0 -1397px
 }
 
 .country.flag-li {
-  background-position: 0 -1408px
+    background-position: 0 -1408px
 }
 
 .country.flag-lk {
-  background-position: 0 -1419px
+    background-position: 0 -1419px
 }
 
 .country.flag-lr {
-  background-position: 0 -1430px
+    background-position: 0 -1430px
 }
 
 .country.flag-ls {
-  background-position: 0 -1441px
+    background-position: 0 -1441px
 }
 
 .country.flag-lt {
-  background-position: 0 -1452px
+    background-position: 0 -1452px
 }
 
 .country.flag-lu {
-  background-position: 0 -1463px
+    background-position: 0 -1463px
 }
 
 .country.flag-lv {
-  background-position: 0 -1474px
+    background-position: 0 -1474px
 }
 
 .country.flag-ly {
-  background-position: 0 -1485px
+    background-position: 0 -1485px
 }
 
 .country.flag-ma {
-  background-position: 0 -1496px
+    background-position: 0 -1496px
 }
 
 .country.flag-mc {
-  background-position: 0 -1507px
+    background-position: 0 -1507px
 }
 
 .country.flag-md {
-  background-position: 0 -1518px
+    background-position: 0 -1518px
 }
 
 .country.flag-me {
-  background-position: 0 -1529px
+    background-position: 0 -1529px
 }
 
 .country.flag-mg {
-  background-position: 0 -1540px
+    background-position: 0 -1540px
 }
 
 .country.flag-mh {
-  background-position: 0 -1551px
+    background-position: 0 -1551px
 }
 
 .country.flag-mk {
-  background-position: 0 -1562px
+    background-position: 0 -1562px
 }
 
 .country.flag-ml {
-  background-position: 0 -1573px
+    background-position: 0 -1573px
 }
 
 .country.flag-mm {
-  background-position: 0 -1584px
+    background-position: 0 -1584px
 }
 
 .country.flag-mn {
-  background-position: 0 -1595px
+    background-position: 0 -1595px
 }
 
 .country.flag-mo {
-  background-position: 0 -1606px
+    background-position: 0 -1606px
 }
 
 .country.flag-mp {
-  background-position: 0 -1617px
+    background-position: 0 -1617px
 }
 
 .country.flag-mq {
-  background-position: 0 -1628px
+    background-position: 0 -1628px
 }
 
 .country.flag-mr {
-  background-position: 0 -1639px
+    background-position: 0 -1639px
 }
 
 .country.flag-ms {
-  background-position: 0 -1650px
+    background-position: 0 -1650px
 }
 
 .country.flag-mt {
-  background-position: 0 -1661px
+    background-position: 0 -1661px
 }
 
 .country.flag-mu {
-  background-position: 0 -1672px
+    background-position: 0 -1672px
 }
 
 .country.flag-mv {
-  background-position: 0 -1683px
+    background-position: 0 -1683px
 }
 
 .country.flag-mw {
-  background-position: 0 -1694px
+    background-position: 0 -1694px
 }
 
 .country.flag-mx {
-  background-position: 0 -1705px
+    background-position: 0 -1705px
 }
 
 .country.flag-my {
-  background-position: 0 -1716px
+    background-position: 0 -1716px
 }
 
 .country.flag-mz {
-  background-position: 0 -1727px
+    background-position: 0 -1727px
 }
 
 .country.flag-na {
-  background-position: 0 -1738px
+    background-position: 0 -1738px
 }
 
 .country.flag-nc {
-  background-position: 0 -1749px
+    background-position: 0 -1749px
 }
 
 .country.flag-ne {
-  background-position: 0 -1760px
+    background-position: 0 -1760px
 }
 
 .country.flag-nf {
-  background-position: 0 -1771px
+    background-position: 0 -1771px
 }
 
 .country.flag-ng {
-  background-position: 0 -1782px
+    background-position: 0 -1782px
 }
 
 .country.flag-ni {
-  background-position: 0 -1793px
+    background-position: 0 -1793px
 }
 
 .country.flag-nl {
-  background-position: 0 -1804px
+    background-position: 0 -1804px
 }
 
 .country.flag-no {
-  background-position: 0 -1815px
+    background-position: 0 -1815px
 }
 
 .country.flag-np {
-  background-position: 0 -1826px
+    background-position: 0 -1826px
 }
 
 .country.flag-nr {
-  background-position: 0 -1837px
+    background-position: 0 -1837px
 }
 
 .country.flag-nu {
-  background-position: 0 -1848px
+    background-position: 0 -1848px
 }
 
 .country.flag-nz {
-  background-position: 0 -1859px
+    background-position: 0 -1859px
 }
 
 .country.flag-om {
-  background-position: 0 -1870px
+    background-position: 0 -1870px
 }
 
 .country.flag-pa {
-  background-position: 0 -1881px
+    background-position: 0 -1881px
 }
 
 .country.flag-pe {
-  background-position: 0 -1892px
+    background-position: 0 -1892px
 }
 
 .country.flag-pf {
-  background-position: 0 -1903px
+    background-position: 0 -1903px
 }
 
 .country.flag-pg {
-  background-position: 0 -1914px
+    background-position: 0 -1914px
 }
 
 .country.flag-ph {
-  background-position: 0 -1925px
+    background-position: 0 -1925px
 }
 
 .country.flag-pk {
-  background-position: 0 -1936px
+    background-position: 0 -1936px
 }
 
 .country.flag-pl {
-  background-position: 0 -1947px
+    background-position: 0 -1947px
 }
 
 .country.flag-pm {
-  background-position: 0 -1958px
+    background-position: 0 -1958px
 }
 
 .country.flag-pn {
-  background-position: 0 -1969px
+    background-position: 0 -1969px
 }
 
 .country.flag-pr {
-  background-position: 0 -1980px
+    background-position: 0 -1980px
 }
 
 .country.flag-ps {
-  background-position: 0 -1991px
+    background-position: 0 -1991px
 }
 
 .country.flag-pt {
-  background-position: 0 -2002px
+    background-position: 0 -2002px
 }
 
 .country.flag-pw {
-  background-position: 0 -2013px
+    background-position: 0 -2013px
 }
 
 .country.flag-py {
-  background-position: 0 -2024px
+    background-position: 0 -2024px
 }
 
 .country.flag-qa {
-  background-position: 0 -2035px
+    background-position: 0 -2035px
 }
 
 .country.flag-re {
-  background-position: 0 -2046px
+    background-position: 0 -2046px
 }
 
 .country.flag-ro {
-  background-position: 0 -2057px
+    background-position: 0 -2057px
 }
 
 .country.flag-rs {
-  background-position: 0 -2068px
+    background-position: 0 -2068px
 }
 
 .country.flag-ru {
-  background-position: 0 -2079px
+    background-position: 0 -2079px
 }
 
 .country.flag-rw {
-  background-position: 0 -2090px
+    background-position: 0 -2090px
 }
 
 .country.flag-sa {
-  background-position: 0 -2101px
+    background-position: 0 -2101px
 }
 
 .country.flag-sb {
-  background-position: 0 -2112px
+    background-position: 0 -2112px
 }
 
 .country.flag-sc {
-  background-position: 0 -2123px
+    background-position: 0 -2123px
 }
 
 .country.flag-sd {
-  background-position: 0 -2134px
+    background-position: 0 -2134px
 }
 
 .country.flag-se {
-  background-position: 0 -2145px
+    background-position: 0 -2145px
 }
 
 .country.flag-sg {
-  background-position: 0 -2156px
+    background-position: 0 -2156px
 }
 
 .country.flag-sh {
-  background-position: 0 -2167px
+    background-position: 0 -2167px
 }
 
 .country.flag-si {
-  background-position: 0 -2178px
+    background-position: 0 -2178px
 }
 
 .country.flag-sj {
-  background-position: 0 -2189px
+    background-position: 0 -2189px
 }
 
 .country.flag-sk {
-  background-position: 0 -2200px
+    background-position: 0 -2200px
 }
 
 .country.flag-sl {
-  background-position: 0 -2211px
+    background-position: 0 -2211px
 }
 
 .country.flag-sm {
-  background-position: 0 -2222px
+    background-position: 0 -2222px
 }
 
 .country.flag-sn {
-  background-position: 0 -2233px
+    background-position: 0 -2233px
 }
 
 .country.flag-so {
-  background-position: 0 -2244px
+    background-position: 0 -2244px
 }
 
 .country.flag-sr {
-  background-position: 0 -2255px
+    background-position: 0 -2255px
 }
 
 .country.flag-st {
-  background-position: 0 -2266px
+    background-position: 0 -2266px
 }
 
 .country.flag-sv {
-  background-position: 0 -2277px
+    background-position: 0 -2277px
 }
 
 .country.flag-sy {
-  background-position: 0 -2288px
+    background-position: 0 -2288px
 }
 
 .country.flag-sz {
-  background-position: 0 -2299px
+    background-position: 0 -2299px
 }
 
 .country.flag-tc {
-  background-position: 0 -2310px
+    background-position: 0 -2310px
 }
 
 .country.flag-td {
-  background-position: 0 -2321px
+    background-position: 0 -2321px
 }
 
 .country.flag-tf {
-  background-position: 0 -2332px
+    background-position: 0 -2332px
 }
 
 .country.flag-tg {
-  background-position: 0 -2343px
+    background-position: 0 -2343px
 }
 
 .country.flag-th {
-  background-position: 0 -2354px
+    background-position: 0 -2354px
 }
 
 .country.flag-tj {
-  background-position: 0 -2365px
+    background-position: 0 -2365px
 }
 
 .country.flag-tk {
-  background-position: 0 -2376px
+    background-position: 0 -2376px
 }
 
 .country.flag-tl {
-  background-position: 0 -2387px
+    background-position: 0 -2387px
 }
 
 .country.flag-tm {
-  background-position: 0 -2398px
+    background-position: 0 -2398px
 }
 
 .country.flag-tn {
-  background-position: 0 -2409px
+    background-position: 0 -2409px
 }
 
 .country.flag-to {
-  background-position: 0 -2420px
+    background-position: 0 -2420px
 }
 
 .country.flag-tr {
-  background-position: 0 -2431px
+    background-position: 0 -2431px
 }
 
 .country.flag-tt {
-  background-position: 0 -2442px
+    background-position: 0 -2442px
 }
 
 .country.flag-tv {
-  background-position: 0 -2453px
+    background-position: 0 -2453px
 }
 
 .country.flag-tw {
-  background-position: 0 -2464px
+    background-position: 0 -2464px
 }
 
 .country.flag-tz {
-  background-position: 0 -2475px
+    background-position: 0 -2475px
 }
 
 .country.flag-ua {
-  background-position: 0 -2486px
+    background-position: 0 -2486px
 }
 
 .country.flag-ug {
-  background-position: 0 -2497px
+    background-position: 0 -2497px
 }
 
 .country.flag-uk {
-  background-position: 0 -2508px
+    background-position: 0 -2508px
 }
 
 .country.flag-um {
-  background-position: 0 -2519px
+    background-position: 0 -2519px
 }
 
 .country.flag-us {
-  background-position: 0 -2530px
+    background-position: 0 -2530px
 }
 
 .country.flag-uy {
-  background-position: 0 -2541px
+    background-position: 0 -2541px
 }
 
 .country.flag-uz {
-  background-position: 0 -2552px
+    background-position: 0 -2552px
 }
 
 .country.flag-va {
-  background-position: 0 -2563px
+    background-position: 0 -2563px
 }
 
 .country.flag-vc {
-  background-position: 0 -2574px
+    background-position: 0 -2574px
 }
 
 .country.flag-ve {
-  background-position: 0 -2585px
+    background-position: 0 -2585px
 }
 
 .country.flag-vg {
-  background-position: 0 -2596px
+    background-position: 0 -2596px
 }
 
 .country.flag-vi {
-  background-position: 0 -2607px
+    background-position: 0 -2607px
 }
 
 .country.flag-vn {
-  background-position: 0 -2618px
+    background-position: 0 -2618px
 }
 
 .country.flag-vu {
-  background-position: 0 -2629px
+    background-position: 0 -2629px
 }
 
 .country.flag-wf {
-  background-position: 0 -2640px
+    background-position: 0 -2640px
 }
 
 .country.flag-ws {
-  background-position: 0 -2651px
+    background-position: 0 -2651px
 }
 
 .country.flag-ye {
-  background-position: 0 -2662px
+    background-position: 0 -2662px
 }
 
 .country.flag-yt {
-  background-position: 0 -2673px
+    background-position: 0 -2673px
 }
 
 .country.flag-za {
-  background-position: 0 -2684px
+    background-position: 0 -2684px
 }
 
 .country.flag-zm {
-  background-position: 0 -2695px
+    background-position: 0 -2695px
 }
 
 .country.flag-zw {
-  background-position: 0 -2706px
+    background-position: 0 -2706px
 }
 
 .country.flag-en {
-  background-position: 0 -2717px
+    background-position: 0 -2717px
 }
 
 .country.flag-eu {
-  background-position: 0 -2728px
+    background-position: 0 -2728px
 }
 
 .country.flag-uk {
-  background-position: 0 -2739px
+    background-position: 0 -2739px
 }
 
 .country.flag-unknown {
-  background-position: 0 -2750px
+    background-position: 0 -2750px
 }
diff --git a/shared/css/static/ts/icons.scss b/shared/css/static/ts/icons.scss
index 58c69698..dc739f35 100644
--- a/shared/css/static/ts/icons.scss
+++ b/shared/css/static/ts/icons.scss
@@ -8,6 +8,9 @@
     width: 16px;
     height: 16px;
 
+    flex-shrink: 0;
+    flex-grow: 0;
+
     background: url('../../../img/client_icon_sprite.svg'), url('../../img/client_icon_sprite.svg') no-repeat;
 }
 
diff --git a/shared/html/index.php b/shared/html/index.php
index 8a0d60c3..91f5c861 100644
--- a/shared/html/index.php
+++ b/shared/html/index.php
@@ -37,6 +37,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <meta name="description" content="TeaSpeak Web Client, connect to any TeaSpeak server without installing anything." />
+        <link rel="icon" href="img/favicon/teacup.png">
 
         <?php
             if(!$WEB_CLIENT) {
@@ -190,7 +191,7 @@
     <footer style="<?php echo $footer_style; ?>">
         <div class="container" style="display: flex; flex-direction: row; align-content: space-between;">
             <div style="align-self: center; position: fixed; left: 5px;">Open source on <a href="https://github.com/TeaSpeak/TeaSpeak-Web" style="display: inline-block; position: relative">github.com</a></div>
-            <div style="align-self: center;">TeaSpeak Web client (<?php echo $version; ?>) by WolverinDEV</div>
+            <div style="align-self: center;">TeaSpeak Web (<?php echo $version; ?>) by WolverinDEV</div>
             <div style="align-self: center; position: fixed; right: 5px;"><?php echo $footer_forum; ?></div>
         </div>
     </footer>
diff --git a/shared/html/templates.html b/shared/html/templates.html
index e6eb1ce9..9d4d5ac7 100644
--- a/shared/html/templates.html
+++ b/shared/html/templates.html
@@ -133,8 +133,11 @@
                             </div>
                         </div>
                         <div class="container-seperator vertical" seperator-id="seperator-main-info"></div>
-                        <div class="main_container container-info">
-                            <div id="select_info" class="select_info" style="width: 100%; max-width: 100%">
+                        <div id="select_info" class="main_container container-info">
+                            <div class="select_info" style="width: 100%; max-width: 100%">
+                                <button type="button" class="close" aria-label="Close">
+                                    <span aria-hidden="true">×</span>
+                                </button>
                                 <div class="container-banner"></div>
                                 <!-- <div class="container-seperator horizontal" seperator-id="seperator-hostbanner-info"></div> -->
                                 <div class="container-select-info"></div>
@@ -1029,7 +1032,8 @@
 
                             <div class="group_box">
                                 <div class="header">{{tr "Microphone" /}}</div>
-                                <div class="content settings-microphone">
+                                <div class="content settings-microphone {{if !voice_available}}disabled{{/if}}">
+                                    {{if voice_available}}
                                     <div class="form-row settings-device settings-device-microphone">
                                         <div class="form-group settings-device-select">
                                             <label for="select-settings-microphone-device" class="bmd-label-static">{{tr "Device:" /}}</label>
@@ -1088,6 +1092,9 @@
                                             </div>
                                         </div>
                                     </div>
+                                    {{else}}
+                                    <div>{{tr "Voice had been disabled" /}}</div>
+                                    {{/if}}
                                 </div>
                             </div>
                             <div class="group_box">
@@ -2058,7 +2065,7 @@
                 <tr>
                     <td>{{tr "Name:" /}}</td>
                     <td style="display: flex; flex-direction: row">
-                        <div style="margin-right: 3px" class="country flag-{{*:(data.property_client_country || 'xx').toLowerCase()}}"></div>
+                        <div style="margin-right: 3px" class="country flag-{{*:(data.property_client_country || 'xx').toLowerCase()}}" title="{{*:i18n.country_name(data.property_client_country || 'XX')}}"></div>
                         <node key="client_name"/>
                     </td>
                 </tr>
@@ -2315,7 +2322,7 @@
                     </table>
                 </div>
 
-                <button class="button-update btn_update">{{tr "Update info"/}}</button>
+                <button class="button-update btn btn-success">{{tr "Update info"/}}</button>
             </div>
         </script>
         <script class="jsrender-template" id="tmpl_selected_channel" type="text/html">
diff --git a/shared/img/favicon/speaking.png b/shared/img/favicon/speaking.png
new file mode 100644
index 00000000..832c9752
Binary files /dev/null and b/shared/img/favicon/speaking.png differ
diff --git a/shared/img/favicon/teacup.png b/shared/img/favicon/teacup.png
new file mode 100644
index 00000000..4f895bcf
Binary files /dev/null and b/shared/img/favicon/teacup.png differ
diff --git a/shared/img/ts/flags b/shared/img/ts/flags
deleted file mode 100644
index 724b9f48..00000000
Binary files a/shared/img/ts/flags and /dev/null differ
diff --git a/shared/js/client.ts b/shared/js/client.ts
index ef02b4a1..2353684c 100644
--- a/shared/js/client.ts
+++ b/shared/js/client.ts
@@ -50,7 +50,7 @@ enum ViewReasonId {
 class TSClient {
     channelTree: ChannelTree;
     serverConnection: connection.ServerConnection;
-    voiceConnection: VoiceConnection;
+    voiceConnection: VoiceConnection | undefined;
     fileManager: FileManager;
     selectInfo: InfoBar;
     permissions: PermissionManager;
@@ -69,10 +69,12 @@ class TSClient {
         this.fileManager = new FileManager(this);
         this.permissions = new PermissionManager(this);
         this.groups = new GroupManager(this);
-        this.voiceConnection = new VoiceConnection(this);
         this._ownEntry = new LocalClientEntry(this);
         this.controlBar = new ControlBar(this, $("#control_bar"));
         this.channelTree.registerClient(this._ownEntry);
+
+        if(!settings.static_global(Settings.KEY_DISABLE_VOICE, false))
+            this.voiceConnection = new VoiceConnection(this);
     }
 
     setup() {
@@ -140,7 +142,8 @@ class TSClient {
         if(this.groups.serverGroups.length == 0)
             this.groups.requestGroups();
         this.controlBar.updateProperties();
-        if(!this.voiceConnection.current_encoding_supported())
+
+        if(this.voiceConnection && !this.voiceConnection.current_encoding_supported())
             createErrorModal(tr("Codec encode type not supported!"), tr("Codec encode type " + VoiceConnectionType[this.voiceConnection.type] + " not supported by this browser!<br>Choose another one!")).open(); //TODO tr
     }
 
@@ -270,7 +273,8 @@ class TSClient {
         }
 
         this.channelTree.reset();
-        this.voiceConnection.dropSession();
+        if(this.voiceConnection)
+            this.voiceConnection.dropSession();
         if(this.serverConnection) this.serverConnection.disconnect();
         this.controlBar.update_connection_state();
         this.selectInfo.setCurrentSelected(null);
diff --git a/shared/js/connection/CommandHandler.ts b/shared/js/connection/CommandHandler.ts
index 5fc46d82..77ae4c60 100644
--- a/shared/js/connection/CommandHandler.ts
+++ b/shared/js/connection/CommandHandler.ts
@@ -81,8 +81,12 @@ namespace connection {
 
         handleCommandServerInit(json){
             //We could setup the voice channel
-            console.log(tr("Setting up voice"));
-            this.connection.client.voiceConnection.createSession();
+            if( this.connection.client.voiceConnection) {
+                console.log(tr("Setting up voice"));
+                this.connection.client.voiceConnection.createSession();
+            } else {
+                console.log(tr("Skipping voice setup (No voice bridge available)"));
+            }
 
 
             json = json[0]; //Only one bulk
diff --git a/shared/js/connection/ConnectionBase.ts b/shared/js/connection/ConnectionBase.ts
index eb82a4b0..0fab16ca 100644
--- a/shared/js/connection/ConnectionBase.ts
+++ b/shared/js/connection/ConnectionBase.ts
@@ -28,20 +28,37 @@ namespace connection {
         abstract disconnect(reason?: string) : Promise<void>;
 
         abstract support_voice() : boolean;
-        abstract voice_connection() : AbstractVoiceConnection | undefined;
+        abstract voice_connection() : voice.AbstractVoiceConnection | undefined;
 
         abstract command_handler_boss() : AbstractCommandHandlerBoss;
         abstract send_command(command: string, data?: any | any[], options?: CommandOptions) : Promise<CommandResult>;
     }
 
-    export abstract class AbstractVoiceConnection {
-        readonly connection: AbstractServerConnection;
+    export namespace voice {
+        export interface VoiceClient {
+            client_id: number;
 
-        protected constructor(connection: AbstractServerConnection) {
-            this.connection = connection;
+            callback_playback: () => any;
+            callback_timeout: () => any;
+            callback_stopped: () => any;
+
+            get_volume() : number;
+            set_volume(volume: number) : Promise<void>;
         }
 
-        abstract connected() : boolean;
+        export abstract class AbstractVoiceConnection {
+            readonly connection: AbstractServerConnection;
+
+            protected constructor(connection: AbstractServerConnection) {
+                this.connection = connection;
+            }
+
+            abstract connected() : boolean;
+
+            abstract register_client(client_id: number) : VoiceClient;
+            abstract availible_clients() : VoiceClient[];
+            abstract unregister_client(client: VoiceClient) : Promise<void>;
+        }
     }
 
     export class ServerCommand {
diff --git a/shared/js/connection/ServerConnection.ts b/shared/js/connection/ServerConnection.ts
index a28610e9..9f8be712 100644
--- a/shared/js/connection/ServerConnection.ts
+++ b/shared/js/connection/ServerConnection.ts
@@ -202,7 +202,12 @@ namespace connection {
                         arguments: json["data"]
                     });
                     group.end();
-                } else if(json["type"] === "WebRTC") this.client.voiceConnection.handleControlPacket(json);
+                } else if(json["type"] === "WebRTC") {
+                    if(this.client.voiceConnection)
+                        this.client.voiceConnection.handleControlPacket(json);
+                    else
+                        console.log(tr("Dropping WebRTC command packet, because we havent a bridge."))
+                }
                 else {
                     console.log(tr("Unknown command type %o"), json["type"]);
                 }
@@ -299,7 +304,7 @@ namespace connection {
             return false;
         }
 
-        voice_connection(): connection.AbstractVoiceConnection | undefined {
+        voice_connection(): connection.voice.AbstractVoiceConnection | undefined {
             return undefined;
         }
 
diff --git a/shared/js/contextMenu.ts b/shared/js/contextMenu.ts
index 0688dac7..0df30449 100644
--- a/shared/js/contextMenu.ts
+++ b/shared/js/contextMenu.ts
@@ -52,8 +52,9 @@ interface ContextMenuEntry {
     name:       (() => string) | string;
     icon?:       (() => string) | string | JQuery;
     disabled?:  boolean;
-    invalidPermission?:  boolean;
+    visible?: boolean;
 
+    invalidPermission?:  boolean;
     sub_menu?: ContextMenuEntry[];
 }
 
@@ -96,8 +97,11 @@ function generate_tag(entry: ContextMenuEntry) : JQuery {
         if(entry.disabled || entry.invalidPermission) tag.addClass("disabled");
         else {
             let menu = $.spawn("div").addClass("sub-menu").addClass("context-menu");
-            for(let e of entry.sub_menu)
+            for(const e of entry.sub_menu) {
+                if(typeof(entry.visible) === 'boolean' && !entry.visible)
+                    continue;
                 menu.append(generate_tag(e));
+            }
             menu.appendTo(tag);
         }
         return tag;
@@ -111,7 +115,10 @@ function spawn_context_menu(x, y, ...entries: ContextMenuEntry[]) {
 
     contextMenuCloseFn = undefined;
 
-    for(let entry of entries){
+    for(const entry of entries){
+        if(typeof(entry.visible) === 'boolean' && !entry.visible)
+            continue;
+
         if(entry.type == MenuEntryType.CLOSE) {
             contextMenuCloseFn = entry.callback;
         } else
diff --git a/shared/js/load.ts b/shared/js/load.ts
index 89db4d6f..2ca4f9c6 100644
--- a/shared/js/load.ts
+++ b/shared/js/load.ts
@@ -53,7 +53,7 @@ namespace loader {
         DONE
     }
 
-    export let allow_cached_files: boolean = false;
+    export let cache_tag: string | undefined;
     let current_stage: Stage = Stage.INITIALIZING;
     const tasks: {[key:number]:Task[]} = {};
 
@@ -206,7 +206,7 @@ namespace loader {
 
                 document.getElementById("scripts").appendChild(tag);
 
-                tag.src = path + (allow_cached_files ? "" : "?_ts=" + Date.now());
+                tag.src = path + (cache_tag || "");
             });
         }
     }
@@ -315,7 +315,7 @@ namespace loader {
                 };
 
                 document.getElementById("style").appendChild(tag);
-                tag.href = path + (allow_cached_files ? "" : "?_ts=" + Date.now());
+                tag.href = path + (cache_tag || "");
             });
         }
     }
@@ -708,12 +708,11 @@ async function check_updates() {
 
     if(!app_version) {
         /* TODO add warning */
-        loader.allow_cached_files = false;
+        loader.cache_tag = "?_ts=" + Date.now();
         return;
     }
     const cached_version = localStorage.getItem("cached_version");
     if(!cached_version || cached_version != app_version) {
-        loader.allow_cached_files = false;
         loader.register_task(loader.Stage.LOADED, {
             priority: 0,
             name: "cached version updater",
@@ -721,11 +720,8 @@ async function check_updates() {
                 localStorage.setItem("cached_version", app_version);
             }
         });
-        /* loading screen */
-        return;
     }
-
-    loader.allow_cached_files = true;
+    loader.cache_tag = "?_version=" + app_version;
 }
 
 interface Window {
diff --git a/shared/js/main.ts b/shared/js/main.ts
index d3d825ad..b4fe771b 100644
--- a/shared/js/main.ts
+++ b/shared/js/main.ts
@@ -270,6 +270,7 @@ function main() {
             clearTimeout(_resize_timeout);
         _resize_timeout = setTimeout(() => {
             globalClient.channelTree.handle_resized();
+            globalClient.selectInfo.handle_resize();
         }, 1000);
     });
 
diff --git a/shared/js/settings.ts b/shared/js/settings.ts
index 6d224c36..d61e8101 100644
--- a/shared/js/settings.ts
+++ b/shared/js/settings.ts
@@ -78,6 +78,7 @@ class StaticSettings {
 class Settings extends StaticSettings {
     static readonly KEY_DISABLE_CONTEXT_MENU = "disableContextMenu";
     static readonly KEY_DISABLE_UNLOAD_DIALOG = "disableUnloadDialog";
+    static readonly KEY_DISABLE_VOICE = "disableVoice";
 
     private static readonly UPDATE_DIRECT: boolean = true;
     private cacheGlobal = {};
diff --git a/shared/js/ui/channel.ts b/shared/js/ui/channel.ts
index 93ca28bc..81bd1b56 100644
--- a/shared/js/ui/channel.ts
+++ b/shared/js/ui/channel.ts
@@ -442,7 +442,21 @@ class ChannelEntry {
                 flagDelete = this.channelTree.client.permissions.neededPermission(PermissionType.B_CHANNEL_DELETE_TEMPORARY).granted(1);
         }
 
+        let trigger_close = true;
         spawn_context_menu(x, y, {
+                type: MenuEntryType.ENTRY,
+                name: tr("Show channel info"),
+                callback: () => {
+                    trigger_close = false;
+                    this.channelTree.client.selectInfo.open_popover()
+                },
+                icon: "client-about",
+                visible: this.channelTree.client.selectInfo.is_popover()
+            }, {
+                type: MenuEntryType.HR,
+                visible: this.channelTree.client.selectInfo.is_popover(),
+                name: ''
+            }, {
                 type: MenuEntryType.ENTRY,
                 icon: "client-channel_switch",
                 name: tr("<b>Switch to channel</b>"),
@@ -525,7 +539,7 @@ class ChannelEntry {
                 invalidPermission: !channelCreate,
                 callback: () => this.channelTree.spawnCreateChannel()
             },
-            MenuEntry.CLOSE(on_close)
+            MenuEntry.CLOSE(() => (trigger_close ? on_close : () => {})())
         );
     }
 
@@ -639,7 +653,10 @@ class ChannelEntry {
                 }
             } else if(key == "channel_codec") {
                 (this.properties.channel_codec == 5 || this.properties.channel_codec == 3 ? $.fn.show : $.fn.hide).apply(this.channelTag().find(".icons .icon_music"));
-                (this.channelTree.client.voiceConnection.codecSupported(this.properties.channel_codec) ? $.fn.hide : $.fn.show).apply(this.channelTag().find(".icons .icon_no_sound"));
+                this.channelTag().find(".icons .icon_no_sound").toggle(!(
+                    this.channelTree.client.voiceConnection &&
+                    this.channelTree.client.voiceConnection.codecSupported(this.properties.channel_codec)
+                ));
             } else if(key == "channel_flag_default") {
                 (this.properties.channel_flag_default ? $.fn.show : $.fn.hide).apply(this.channelTag().find(".icons .icon_default"));
             } else if(key == "channel_flag_password")
diff --git a/shared/js/ui/client.ts b/shared/js/ui/client.ts
index 43460497..c8bcfda4 100644
--- a/shared/js/ui/client.ts
+++ b/shared/js/ui/client.ts
@@ -266,28 +266,40 @@ class ClientEntry {
     }
 
     showContextMenu(x: number, y: number, on_close: () => void = undefined) {
-        const _this = this;
-
+        let trigger_close = true;
         spawn_context_menu(x, y,
             {
+                type: MenuEntryType.ENTRY,
+                name: tr("Show client info"),
+                callback: () => {
+                    trigger_close = false;
+                    this.channelTree.client.selectInfo.open_popover()
+                },
+                icon: "client-about",
+                visible: this.channelTree.client.selectInfo.is_popover()
+            }, {
+                type: MenuEntryType.HR,
+                visible: this.channelTree.client.selectInfo.is_popover(),
+                name: ''
+            }, {
                 type: MenuEntryType.ENTRY,
                 icon: "client-change_nickname",
                 name: tr("<b>Open text chat</b>"),
-                callback: function () {
-                    chat.activeChat = _this.chat(true);
+                callback: () => {
+                    chat.activeChat = this.chat(true);
                     chat.focus();
                 }
             }, {
                 type: MenuEntryType.ENTRY,
                 icon: "client-poke",
                 name: tr("Poke client"),
-                callback: function () {
+                callback: () => {
                     createInputModal(tr("Poke client"), tr("Poke message:<br>"), text => true, result => {
                         if(typeof(result) === "string") {
                             //TODO tr
-                            console.log("Poking client " + _this.clientNickName() + " with message " + result);
-                            _this.channelTree.client.serverConnection.send_command("clientpoke", {
-                                clid: _this.clientId(),
+                            console.log("Poking client " + this.clientNickName() + " with message " + result);
+                            this.channelTree.client.serverConnection.send_command("clientpoke", {
+                                clid: this.clientId(),
                                 msg: result
                             });
 
@@ -298,13 +310,13 @@ class ClientEntry {
                 type: MenuEntryType.ENTRY,
                 icon: "client-edit",
                 name: tr("Change description"),
-                callback: function () {
+                callback: () => {
                     createInputModal(tr("Change client description"), tr("New description:<br>"), text => true, result => {
                         if(typeof(result) === "string") {
                             //TODO tr
-                            console.log("Changing " + _this.clientNickName() + "'s description to " + result);
-                            _this.channelTree.client.serverConnection.send_command("clientedit", {
-                                clid: _this.clientId(),
+                            console.log("Changing " + this.clientNickName() + "'s description to " + result);
+                            this.channelTree.client.serverConnection.send_command("clientedit", {
+                                clid: this.clientId(),
                                 client_description: result
                             });
 
@@ -332,9 +344,9 @@ class ClientEntry {
                     createInputModal(tr("Kick client from channel"), tr("Kick reason:<br>"), text => true, result => {
                         if(result) {
                             //TODO tr
-                            console.log("Kicking client " + _this.clientNickName() + " from channel with reason " + result);
-                            _this.channelTree.client.serverConnection.send_command("clientkick", {
-                                clid: _this.clientId(),
+                            console.log("Kicking client " + this.clientNickName() + " from channel with reason " + result);
+                            this.channelTree.client.serverConnection.send_command("clientkick", {
+                                clid: this.clientId(),
                                 reasonid: ViewReasonId.VREASON_CHANNEL_KICK,
                                 reasonmsg: result
                             });
@@ -350,9 +362,9 @@ class ClientEntry {
                     createInputModal(tr("Kick client from server"), tr("Kick reason:<br>"), text => true, result => {
                         if(result) {
                             //TODO tr
-                            console.log("Kicking client " + _this.clientNickName() + " from server with reason " + result);
-                            _this.channelTree.client.serverConnection.send_command("clientkick", {
-                                clid: _this.clientId(),
+                            console.log("Kicking client " + this.clientNickName() + " from server with reason " + result);
+                            this.channelTree.client.serverConnection.send_command("clientkick", {
+                                clid: this.clientId(),
                                 reasonid: ViewReasonId.VREASON_SERVER_KICK,
                                 reasonmsg: result
                             });
@@ -411,7 +423,7 @@ class ClientEntry {
                     });
                 }
             },
-            MenuEntry.CLOSE(on_close)
+            MenuEntry.CLOSE(() => (trigger_close ? on_close : () => {})())
         );
     }
 
@@ -908,8 +920,22 @@ class MusicClientEntry extends ClientEntry {
     }
 
     showContextMenu(x: number, y: number, on_close: () => void = undefined): void {
+        let trigger_close = true;
         spawn_context_menu(x, y,
             {
+                type: MenuEntryType.ENTRY,
+                name: tr("Show bot info"),
+                callback: () => {
+                    trigger_close = false;
+                    this.channelTree.client.selectInfo.open_popover()
+                },
+                icon: "client-about",
+                visible: this.channelTree.client.selectInfo.is_popover()
+            }, {
+                type: MenuEntryType.HR,
+                visible: this.channelTree.client.selectInfo.is_popover(),
+                name: ''
+            }, {
                 name: tr("<b>Change bot name</b>"),
                 icon: "client-change_nickname",
                 disabled: false,
@@ -1073,7 +1099,7 @@ class MusicClientEntry extends ClientEntry {
                 },
                 type: MenuEntryType.ENTRY
             },
-            MenuEntry.CLOSE(on_close)
+            MenuEntry.CLOSE(() => (trigger_close ? on_close : () => {})())
         );
     }
 
diff --git a/shared/js/ui/frames/ControlBar.ts b/shared/js/ui/frames/ControlBar.ts
index 59e5a8a9..05097fcb 100644
--- a/shared/js/ui/frames/ControlBar.ts
+++ b/shared/js/ui/frames/ControlBar.ts
@@ -196,7 +196,8 @@ class ControlBar {
 
     private updateMicrophoneRecordState() {
         let enabled = !this._muteInput && !this._muteOutput && !this._away;
-        this.handle.voiceConnection.voiceRecorder.update(enabled);
+        if(this.handle.voiceConnection)
+            this.handle.voiceConnection.voiceRecorder.update(enabled);
     }
 
     updateProperties() {
@@ -212,12 +213,13 @@ class ControlBar {
     }
 
     updateVoice(targetChannel?: ChannelEntry) {
-        if(!targetChannel) targetChannel = this.handle.getClient().currentChannel();
+        if(!targetChannel)
+            targetChannel = this.handle.getClient().currentChannel();
         let client = this.handle.getClient();
 
-        this.codec_supported = targetChannel ? this.handle.voiceConnection.codecSupported(targetChannel.properties.channel_codec) : true;
-        this.support_record = this.handle.voiceConnection.voice_send_support();
-        this.support_playback = this.handle.voiceConnection.voice_playback_support();
+        this.codec_supported = targetChannel ? this.handle.voiceConnection && this.handle.voiceConnection.codecSupported(targetChannel.properties.channel_codec) : true;
+        this.support_record = this.handle.voiceConnection && this.handle.voiceConnection.voice_send_support();
+        this.support_playback = this.handle.voiceConnection && this.handle.voiceConnection.voice_playback_support();
 
         this.htmlTag.find(".btn_mute_input").prop("disabled", !this.codec_supported|| !this.support_playback || !this.support_record);
         this.htmlTag.find(".btn_mute_output").prop("disabled", !this.codec_supported || !this.support_playback);
diff --git a/shared/js/ui/frames/SelectedItemInfo.ts b/shared/js/ui/frames/SelectedItemInfo.ts
index 1cd0f980..f2058b51 100644
--- a/shared/js/ui/frames/SelectedItemInfo.ts
+++ b/shared/js/ui/frames/SelectedItemInfo.ts
@@ -53,7 +53,8 @@ class InfoBar<AvailableTypes = ServerEntry | ChannelEntry | ClientEntry | undefi
     readonly handle: TSClient;
 
     private current_selected?: AvailableTypes;
-    private _htmlTag: JQuery<HTMLElement>;
+    private _tag: JQuery<HTMLElement>;
+    private _tag_content: JQuery<HTMLElement>;
     private _tag_info: JQuery<HTMLElement>;
     private _tag_banner: JQuery<HTMLElement>;
 
@@ -63,9 +64,10 @@ class InfoBar<AvailableTypes = ServerEntry | ChannelEntry | ClientEntry | undefi
 
     constructor(client: TSClient, htmlTag: JQuery<HTMLElement>) {
         this.handle = client;
-        this._htmlTag = htmlTag;
-        this._tag_info = htmlTag.find(".container-select-info");
-        this._tag_banner = htmlTag.find(".container-banner");
+        this._tag = htmlTag;
+        this._tag_content = htmlTag.find("> .select_info");
+        this._tag_info = this._tag_content.find(".container-select-info");
+        this._tag_banner = this._tag_content.find(".container-banner");
 
         this.managers.push(new MusicInfoManager());
         this.managers.push(new ClientInfoManager());
@@ -73,10 +75,24 @@ class InfoBar<AvailableTypes = ServerEntry | ChannelEntry | ClientEntry | undefi
         this.managers.push(new ServerInfoManager());
 
         this.banner_manager = new Hostbanner(client, this._tag_banner);
+
+        this._tag.find("button.close").on('click', () => {
+            this._tag.toggleClass('shown', false);
+        });
+    }
+
+    handle_resize() {
+        /* test if the popover isn't a popover anymore */
+        if(this._tag.hasClass('shown')) {
+            this._tag.removeClass('shown');
+            if(this.is_popover())
+                this._tag.addClass('shown');
+        }
     }
 
     setCurrentSelected(entry: AvailableTypes) {
         if(this.current_selected == entry) return;
+
         if(this._current_manager) {
             (this._current_manager as InfoManager<AvailableTypes>).finalizeFrame(this.current_selected, this._tag_info);
             this._current_manager = null;
@@ -112,7 +128,15 @@ class InfoBar<AvailableTypes = ServerEntry | ChannelEntry | ClientEntry | undefi
 
     current_manager() { return this._current_manager; }
 
-    html_tag() { return this._htmlTag; }
+    html_tag() { return this._tag_content; }
+
+    is_popover() : boolean {
+        return !this._tag.is(':visible') || this._tag.hasClass('shown');
+    }
+
+    open_popover() {
+        this._tag.toggleClass('shown', true);
+    }
 }
 
 class Hostbanner {
@@ -299,8 +323,12 @@ class ServerInfoManager extends InfoManager<ServerEntry> {
 
 
         {
-            let requestUpdate = rendered.find(".btn_update");
-            requestUpdate.prop("disabled", !server.shouldUpdateProperties());
+            const disabled = !server.shouldUpdateProperties();
+            let requestUpdate = rendered.find(".button-update");
+            requestUpdate
+                .prop("disabled", disabled)
+                .toggleClass('btn-success', !disabled)
+                .toggleClass('btn-danger', disabled);
 
             requestUpdate.click(() => {
                 server.updateProperties();
@@ -308,7 +336,10 @@ class ServerInfoManager extends InfoManager<ServerEntry> {
             });
 
             this.registerTimer(setTimeout(function () {
-                requestUpdate.prop("disabled", false);
+                requestUpdate
+                    .prop("disabled", false)
+                    .toggleClass('btn-success', true)
+                    .toggleClass('btn-danger', false);
             }, server.nextInfoRequest - Date.now()));
         }
 
diff --git a/shared/js/ui/modal/ModalSettings.ts b/shared/js/ui/modal/ModalSettings.ts
index 12ee7f8c..2e8e5675 100644
--- a/shared/js/ui/modal/ModalSettings.ts
+++ b/shared/js/ui/modal/ModalSettings.ts
@@ -5,7 +5,7 @@
 /// <reference path="../../profiles/Identity.ts" />
 
 namespace Modals {
-    function spawnTeamSpeakIdentityImprove(identity: profiles.identities.TeaSpeakIdentity) : Modal {
+    function spawnTeamSpeakIdentityImprove(identity: profiles.identities.TeaSpeakIdentity): Modal {
         let modal: Modal;
         let elapsed_timer: NodeJS.Timer;
 
@@ -25,10 +25,10 @@ namespace Modals {
                 const input_elapsed = template.find(".time-elapsed input");
 
                 button_close.on('click', event => {
-                    if(active)
+                    if (active)
                         button_start_stop.trigger('click');
 
-                    if(modal.shown)
+                    if (modal.shown)
                         modal.close();
                 });
 
@@ -40,7 +40,7 @@ namespace Modals {
 
                     input_threads.prop("disabled", !active);
                     input_target_level.prop("disabled", !active);
-                    if(active) {
+                    if (active) {
                         input_hash_rate.val(0);
                         clearInterval(elapsed_timer);
                         active = false;
@@ -51,7 +51,7 @@ namespace Modals {
 
                     const threads = parseInt(input_threads.val() as string);
                     const target_level = parseInt(input_target_level.val() as string);
-                    if(target_level == 0) {
+                    if (target_level == 0) {
                         identity.improve_level(-1, threads, () => active, current_level => {
                             input_current_level.val(current_level);
                         }, hash_rate => {
@@ -59,7 +59,7 @@ namespace Modals {
                         }).catch(error => {
                             console.error(error);
                             createErrorModal(tr("Failed to improve identity"), tr("Failed to improve identity.<br>Error:") + error).open();
-                            if(active)
+                            if (active)
                                 button_start_stop.trigger('click');
                         });
                     } else {
@@ -68,7 +68,7 @@ namespace Modals {
                         }, hash_rate => {
                             input_hash_rate.val(hash_rate);
                         }).then(success => {
-                            if(success) {
+                            if (success) {
                                 identity.level().then(level => {
                                     input_current_level.val(level);
                                     createInfoModal(tr("Identity successfully improved"), MessageHelper.formatMessage(tr("Identity successfully improved to level {}"), level)).open();
@@ -76,12 +76,12 @@ namespace Modals {
                                     input_current_level.val("error: " + error);
                                 });
                             }
-                            if(active)
+                            if (active)
                                 button_start_stop.trigger('click');
                         }).catch(error => {
                             console.error(error);
                             createErrorModal(tr("Failed to improve identity"), tr("Failed to improve identity.<br>Error:") + error).open();
-                            if(active)
+                            if (active)
                                 button_start_stop.trigger('click');
                         });
                     }
@@ -92,10 +92,10 @@ namespace Modals {
                         let seconds = Math.floor(time % 60).toString();
                         let minutes = Math.floor(time / 60).toString();
 
-                        if(seconds.length < 2)
+                        if (seconds.length < 2)
                             seconds = "0" + seconds;
 
-                        if(minutes.length < 2)
+                        if (minutes.length < 2)
                             minutes = "0" + minutes;
 
                         input_elapsed.val(minutes + ":" + seconds);
@@ -119,7 +119,7 @@ namespace Modals {
         return modal;
     }
 
-    function spawnTeamSpeakIdentityImport(callback: (identity: profiles.identities.TeaSpeakIdentity) => any) : Modal {
+    function spawnTeamSpeakIdentityImport(callback: (identity: profiles.identities.TeaSpeakIdentity) => any): Modal {
         let modal: Modal;
         let loaded_identity: profiles.identities.TeaSpeakIdentity;
 
@@ -134,7 +134,7 @@ namespace Modals {
                 const button_import = template.find(".button-import");
                 const set_error = message => {
                     template.find(".success").hide();
-                    if(message) {
+                    if (message) {
                         template.find(".error").text(message).show();
                         button_import.prop("disabled", true);
                     } else
@@ -157,7 +157,7 @@ namespace Modals {
                         const element = event.target as HTMLInputElement;
                         const file_reader = new FileReader();
 
-                        file_reader.onload = function() {
+                        file_reader.onload = function () {
                             import_identity(file_reader.result as string, true);
                         };
 
@@ -167,7 +167,7 @@ namespace Modals {
                             return;
                         };
 
-                        if(element.files && element.files.length > 0)
+                        if (element.files && element.files.length > 0)
                             file_reader.readAsText(element.files[0]);
                     });
                 }
@@ -175,7 +175,7 @@ namespace Modals {
                 { /* text input */
                     template.find(".button-load-text").on('click', event => {
                         createInputModal("Import identity from text", "Please paste your idenity bellow<br>", text => text.length > 0 && text.indexOf('V') != -1, result => {
-                            if(result)
+                            if (result)
                                 import_identity(result as string, false);
                         }).open();
                     });
@@ -197,7 +197,7 @@ namespace Modals {
         return modal;
     }
 
-    export function spawnSettingsModal() : Modal {
+    export function spawnSettingsModal(): Modal {
         let modal: Modal;
         modal = createModal({
             header: tr("Settings"),
@@ -206,6 +206,7 @@ namespace Modals {
                     client: native_client,
                     valid_forum_identity: profiles.identities.valid_static_forum_identity(),
                     forum_path: settings.static("forum_path"),
+                    voice_available: !!globalClient.voiceConnection
                 });
 
                 initialiseVoiceListeners(modal, (template = template.tabify()).find(".settings_audio"));
@@ -226,12 +227,12 @@ namespace Modals {
         console.log(tag);
         {/* setup the forum */
             const identity = profiles.identities.static_forum_identity();
-            if(identity && identity.valid()) {
+            if (identity && identity.valid()) {
                 tag.find(".not-connected").hide();
 
                 tag.find(".property.username .value").text(identity.name());
                 const premium_tag = tag.find(".property.premium .value").text("");
-                if(identity.is_stuff() || identity.is_premium())
+                if (identity.is_stuff() || identity.is_premium())
                     premium_tag.append($.spawn("div").addClass("premium").text(tr("yes")));
                 else
                     premium_tag.append($.spawn("div").addClass("non-premium").text(tr("no")));
@@ -250,114 +251,6 @@ namespace Modals {
     function initialiseVoiceListeners(modal: Modal, tag: JQuery) {
         let currentVAD = settings.global("vad_type", "vad");
 
-        { //Initialized voice activation detection
-            const vad_tag = tag.find(".settings-vad-container");
-
-            vad_tag.find('input[type=radio]').on('change', event => {
-                const select = event.currentTarget as HTMLSelectElement;
-                {
-                    vad_tag.find(".settings-vad-impl-entry").hide();
-                    vad_tag.find(".setting-vad-" + select.value).show();
-                }
-                {
-                    settings.changeGlobal("vad_type", select.value);
-                    globalClient.voiceConnection.voiceRecorder.reinitialiseVAD();
-                }
-
-                switch (select.value) {
-                    case "ppt":
-                        let ppt_settings: PPTKeySettings = settings.global('vad_ppt_settings', undefined);
-                        ppt_settings = ppt_settings ? JSON.parse(ppt_settings as any as string) : {};
-
-                        vad_tag.find(".vat_ppt_key").text(ppt.key_description(ppt_settings));
-                        vad_tag.find(".ppt-delay input").val(ppt_settings.delay === undefined ? 300 : ppt_settings.delay);
-
-                        break;
-                    case "vad":
-                        let slider = vad_tag.find(".vad_vad_slider");
-                        let vad: VoiceActivityDetectorVAD = globalClient.voiceConnection.voiceRecorder.getVADHandler() as VoiceActivityDetectorVAD;
-                        slider.val(vad.percentageThreshold);
-                        slider.trigger("change");
-                        globalClient.voiceConnection.voiceRecorder.update(true);
-                        vad.percentage_listener = per => {
-                            vad_tag.find(".vad_vad_bar_filler")
-                                .css("width", (100 - per) + "%");
-                        };
-                        break;
-                }
-            });
-
-            { //Initialized push to talk
-                vad_tag.find(".vat_ppt_key").click(function () {
-                    let modal = createModal({
-                        body: "",
-                        header: () => {
-                            let head = $.spawn("div");
-                            head.text(tr("Type the key you wish"));
-                            head.css("background-color", "blue");
-                            return head;
-                        },
-                        footer: ""
-                    });
-
-                    let listener = (event: ppt.KeyEvent) => {
-                        if(event.type == ppt.EventType.KEY_TYPED) {
-                            settings.changeGlobal('vad_ppt_key', undefined); //TODO remove that because its legacy shit
-                            console.log(tr("Got key %o"), event);
-
-                            let ppt_settings: PPTKeySettings = settings.global('vad_ppt_settings', undefined);
-                            ppt_settings = ppt_settings ? JSON.parse(ppt_settings as any as string) : {};
-                            Object.assign(ppt_settings, event);
-                            settings.changeGlobal('vad_ppt_settings', ppt_settings);
-
-                            globalClient.voiceConnection.voiceRecorder.reinitialiseVAD();
-
-                            ppt.unregister_key_listener(listener);
-                            modal.close();
-                            vad_tag.find(".vat_ppt_key").text(ppt.key_description(event));
-                        }
-                    };
-                    ppt.register_key_listener(listener);
-                    modal.open();
-                });
-
-                vad_tag.find(".ppt-delay input").on('change', event => {
-                    let ppt_settings: PPTKeySettings = settings.global('vad_ppt_settings', undefined);
-                    ppt_settings = ppt_settings ? JSON.parse(ppt_settings as any as string) : {};
-                    ppt_settings.delay = (<HTMLInputElement>event.target).valueAsNumber;
-                    settings.changeGlobal('vad_ppt_settings', ppt_settings);
-
-                    globalClient.voiceConnection.voiceRecorder.reinitialiseVAD();
-                });
-            }
-
-            { //Initialized voice activation detection
-                let slider = vad_tag.find(".vad_vad_slider");
-                slider.on("input change", () => {
-                    settings.changeGlobal("vad_threshold", slider.val().toString());
-                    let vad = globalClient.voiceConnection.voiceRecorder.getVADHandler();
-                    if(vad instanceof  VoiceActivityDetectorVAD)
-                        vad.percentageThreshold = slider.val() as number;
-                    vad_tag.find(".vad_vad_slider_value").text(slider.val().toString());
-                });
-                modal.properties.registerCloseListener(() => {
-                    let vad = globalClient.voiceConnection.voiceRecorder.getVADHandler();
-                    if(vad instanceof  VoiceActivityDetectorVAD)
-                        vad.percentage_listener = undefined;
-
-                });
-            }
-
-            let target_tag = vad_tag.find('input[type=radio][name="vad_type"][value="' + currentVAD + '"]');
-            if(target_tag.length == 0) {
-                //TODO tr
-                console.warn("Failed to find tag for " + currentVAD + ". Using latest tag!");
-                target_tag = vad_tag.find('input[type=radio][name="vad_type"]').last();
-            }
-            target_tag.prop("checked", true);
-            setTimeout(() => target_tag.trigger('change'), 0);
-        }
-
         const display_error = (message: string) => {
             const alert = tag.find(".settings-device-error").first();
             alert.clone()
@@ -368,57 +261,167 @@ namespace Modals {
                 .text(message);
         };
 
-        { //Initialize microphone
+        if (globalClient.voiceConnection) {
+            { //Initialized voice activation detection
+                const vad_tag = tag.find(".settings-vad-container");
 
-            const setting_tag = tag.find(".settings-microphone");
-            const tag_select = setting_tag.find(".audio-select-microphone");
-
-            const update_devices = () => { //List devices
-                tag_select.empty();
-
-                $.spawn("option")
-                    .attr("device-id", "")
-                    .attr("device-group", "")
-                    .text(tr("No device"))
-                    .appendTo(tag_select);
-
-                navigator.mediaDevices.enumerateDevices().then(devices => {
-                    const active_device = globalClient.voiceConnection.voiceRecorder.device_id();
-
-                    for(const device of devices) {
-                        console.debug(tr("Got device %s (%s): %s (%o)"), device.deviceId, device.kind, device.label);
-                        if(device.kind !== 'audioinput') continue;
-
-                        $.spawn("option")
-                            .attr("device-id", device.deviceId)
-                            .attr("device-group", device.groupId)
-                            .text(device.label)
-                            .prop("selected", device.deviceId == active_device)
-                            .appendTo(tag_select);
+                vad_tag.find('input[type=radio]').on('change', event => {
+                    const select = event.currentTarget as HTMLSelectElement;
+                    {
+                        vad_tag.find(".settings-vad-impl-entry").hide();
+                        vad_tag.find(".setting-vad-" + select.value).show();
+                    }
+                    {
+                        settings.changeGlobal("vad_type", select.value);
+                        globalClient.voiceConnection.voiceRecorder.reinitialiseVAD();
+                    }
+
+                    switch (select.value) {
+                        case "ppt":
+                            let ppt_settings: PPTKeySettings = settings.global('vad_ppt_settings', undefined);
+                            ppt_settings = ppt_settings ? JSON.parse(ppt_settings as any as string) : {};
+
+                            vad_tag.find(".vat_ppt_key").text(ppt.key_description(ppt_settings));
+                            vad_tag.find(".ppt-delay input").val(ppt_settings.delay === undefined ? 300 : ppt_settings.delay);
+
+                            break;
+                        case "vad":
+                            let slider = vad_tag.find(".vad_vad_slider");
+                            let vad: VoiceActivityDetectorVAD = globalClient.voiceConnection.voiceRecorder.getVADHandler() as VoiceActivityDetectorVAD;
+                            slider.val(vad.percentageThreshold);
+                            slider.trigger("change");
+                            globalClient.voiceConnection.voiceRecorder.update(true);
+                            vad.percentage_listener = per => {
+                                vad_tag.find(".vad_vad_bar_filler")
+                                    .css("width", (100 - per) + "%");
+                            };
+                            break;
                     }
-                }).catch(error => {
-                    console.error(tr("Could not enumerate over devices!"));
-                    console.error(error);
-                    display_error(tr("Could not get microphone device list!"));
                 });
 
-                if(tag_select.find("option:selected").length == 0)
-                    tag_select.find("option").prop("selected", true);
+                { //Initialized push to talk
+                    vad_tag.find(".vat_ppt_key").click(function () {
+                        let modal = createModal({
+                            body: "",
+                            header: () => {
+                                let head = $.spawn("div");
+                                head.text(tr("Type the key you wish"));
+                                head.css("background-color", "blue");
+                                return head;
+                            },
+                            footer: ""
+                        });
 
-            };
+                        let listener = (event: ppt.KeyEvent) => {
+                            if (event.type == ppt.EventType.KEY_TYPED) {
+                                settings.changeGlobal('vad_ppt_key', undefined); //TODO remove that because its legacy shit
+                                console.log(tr("Got key %o"), event);
 
-            {
-                tag_select.on('change', event => {
-                    let selected_tag = tag_select.find("option:selected");
-                    let deviceId = selected_tag.attr("device-id");
-                    let groupId = selected_tag.attr("device-group");
-                    console.log(tr("Selected microphone device: id: %o group: %o"), deviceId, groupId);
-                    globalClient.voiceConnection.voiceRecorder.change_device(deviceId, groupId);
-                });
+                                let ppt_settings: PPTKeySettings = settings.global('vad_ppt_settings', undefined);
+                                ppt_settings = ppt_settings ? JSON.parse(ppt_settings as any as string) : {};
+                                Object.assign(ppt_settings, event);
+                                settings.changeGlobal('vad_ppt_settings', ppt_settings);
+
+                                globalClient.voiceConnection.voiceRecorder.reinitialiseVAD();
+
+                                ppt.unregister_key_listener(listener);
+                                modal.close();
+                                vad_tag.find(".vat_ppt_key").text(ppt.key_description(event));
+                            }
+                        };
+                        ppt.register_key_listener(listener);
+                        modal.open();
+                    });
+
+                    vad_tag.find(".ppt-delay input").on('change', event => {
+                        let ppt_settings: PPTKeySettings = settings.global('vad_ppt_settings', undefined);
+                        ppt_settings = ppt_settings ? JSON.parse(ppt_settings as any as string) : {};
+                        ppt_settings.delay = (<HTMLInputElement>event.target).valueAsNumber;
+                        settings.changeGlobal('vad_ppt_settings', ppt_settings);
+
+                        globalClient.voiceConnection.voiceRecorder.reinitialiseVAD();
+                    });
+                }
+
+                { //Initialized voice activation detection
+                    let slider = vad_tag.find(".vad_vad_slider");
+                    slider.on("input change", () => {
+                        settings.changeGlobal("vad_threshold", slider.val().toString());
+                        let vad = globalClient.voiceConnection.voiceRecorder.getVADHandler();
+                        if (vad instanceof VoiceActivityDetectorVAD)
+                            vad.percentageThreshold = slider.val() as number;
+                        vad_tag.find(".vad_vad_slider_value").text(slider.val().toString());
+                    });
+                    modal.properties.registerCloseListener(() => {
+                        let vad = globalClient.voiceConnection.voiceRecorder.getVADHandler();
+                        if (vad instanceof VoiceActivityDetectorVAD)
+                            vad.percentage_listener = undefined;
+
+                    });
+                }
+
+                let target_tag = vad_tag.find('input[type=radio][name="vad_type"][value="' + currentVAD + '"]');
+                if (target_tag.length == 0) {
+                    //TODO tr
+                    console.warn("Failed to find tag for " + currentVAD + ". Using latest tag!");
+                    target_tag = vad_tag.find('input[type=radio][name="vad_type"]').last();
+                }
+                target_tag.prop("checked", true);
+                setTimeout(() => target_tag.trigger('change'), 0);
             }
 
-            update_devices();
-            setting_tag.find(".button-device-update").on('click', event => update_devices());
+            { //Initialize microphone
+
+                const setting_tag = tag.find(".settings-microphone");
+                const tag_select = setting_tag.find(".audio-select-microphone");
+
+                const update_devices = () => { //List devices
+                    tag_select.empty();
+
+                    $.spawn("option")
+                        .attr("device-id", "")
+                        .attr("device-group", "")
+                        .text(tr("No device"))
+                        .appendTo(tag_select);
+
+                    navigator.mediaDevices.enumerateDevices().then(devices => {
+                        const active_device = globalClient.voiceConnection.voiceRecorder.device_id();
+
+                        for (const device of devices) {
+                            console.debug(tr("Got device %s (%s): %s (%o)"), device.deviceId, device.kind, device.label);
+                            if (device.kind !== 'audioinput') continue;
+
+                            $.spawn("option")
+                                .attr("device-id", device.deviceId)
+                                .attr("device-group", device.groupId)
+                                .text(device.label)
+                                .prop("selected", device.deviceId == active_device)
+                                .appendTo(tag_select);
+                        }
+                    }).catch(error => {
+                        console.error(tr("Could not enumerate over devices!"));
+                        console.error(error);
+                        display_error(tr("Could not get microphone device list!"));
+                    });
+
+                    if (tag_select.find("option:selected").length == 0)
+                        tag_select.find("option").prop("selected", true);
+
+                };
+
+                {
+                    tag_select.on('change', event => {
+                        let selected_tag = tag_select.find("option:selected");
+                        let deviceId = selected_tag.attr("device-id");
+                        let groupId = selected_tag.attr("device-group");
+                        console.log(tr("Selected microphone device: id: %o group: %o"), deviceId, groupId);
+                        globalClient.voiceConnection.voiceRecorder.change_device(deviceId, groupId);
+                    });
+                }
+
+                update_devices();
+                setting_tag.find(".button-device-update").on('click', event => update_devices());
+            }
         }
 
         { //Initialize speaker
@@ -431,7 +434,7 @@ namespace Modals {
 
                 const active_device = audio.player.current_device();
                 audio.player.available_devices().then(devices => {
-                    for(const device of devices) {
+                    for (const device of devices) {
                         $.spawn("option")
                             .attr("device-id", device.device_id)
                             .text(device.name)
@@ -445,7 +448,7 @@ namespace Modals {
                 });
 
 
-                if(tag_select.find("option:selected").length == 0)
+                if (tag_select.find("option:selected").length == 0)
                     tag_select.find("option").prop("selected", true);
             }
 
@@ -498,7 +501,7 @@ namespace Modals {
                 const template_tag = $("#tmpl_settings-sound_entry");
                 const entry_tag = sound_tag.find(".sound-list-entries");
 
-                for(const _sound in Sound) {
+                for (const _sound in Sound) {
                     const sound_name = Sound[_sound];
 
                     console.log(sound.get_sound_volume(sound_name as Sound));
@@ -523,7 +526,7 @@ namespace Modals {
 
                 setTimeout(() => {
                     const entry_container = sound_tag.find(".sound-list-entries-container");
-                    if(entry_container.hasScrollBar())
+                    if (entry_container.hasScrollBar())
                         entry_container.addClass("scrollbar");
                 }, 100);
 
@@ -531,12 +534,12 @@ namespace Modals {
                 const filter_tag = sound_tag.find(".sound-list-filter input");
                 filter_tag.on('change keyup', event => {
                     const filter = ((<HTMLInputElement>event.target).value || "").toLowerCase();
-                    if(!filter)
+                    if (!filter)
                         entry_tag.find(".entry").show();
                     else {
                         entry_tag.find(".entry").each((_, _entry) => {
                             const entry = $(_entry);
-                            if(entry.text().toLowerCase().indexOf(filter) == -1)
+                            if (entry.text().toLowerCase().indexOf(filter) == -1)
                                 entry.hide();
                             else
                                 entry.show();
@@ -547,213 +550,175 @@ namespace Modals {
 
             modal.close_listener.push(sound.save);
         }
-
-        //Initialise microphones
-        /*
-        let select_microphone = tag.find(".voice_microphone_select");
-        let select_error = tag.find(".voice_microphone_select_error");
-
-        navigator.mediaDevices.enumerateDevices().then(devices => {
-            let recoder = globalClient.voiceConnection.voiceRecorder;
-
-            console.log("Got " + devices.length + " devices:");
-            for(let device of devices) {
-                console.log(" - Type: %s Name %s ID: %s Group: %s", device.kind, device.label, device.deviceId, device.groupId);
-                if(device.kind == "audioinput") {
-                    let dtag = $.spawn("option");
-                    dtag.attr("device-id", device.deviceId);
-                    dtag.attr("device-group", device.groupId);
-                    dtag.text(device.label);
-                    select_microphone.append(dtag);
-
-                    if(recoder) dtag.prop("selected", device.deviceId == recoder.device_id());
-                }
-            }
-        }).catch(error => {
-            console.error("Could not enumerate over devices!");
-            console.error(error);
-            select_error.text("Could not get device list!").show();
-        });
-
-        select_microphone.change(event => {
-            let deviceSelected = select_microphone.find("option:selected");
-            let deviceId = deviceSelected.attr("device-id");
-            let groupId = deviceSelected.attr("device-group");
-            console.log("Selected microphone device: id: %o group: %o", deviceId, groupId);
-            globalClient.voiceConnection.voiceRecorder.change_device(deviceId, groupId);
-        });
-        */
-        //Initialise speakers
-
-   }
+    }
 
     function initialise_translations(tag: JQuery) {
-    { //Initialize the list
-       const tag_list = tag.find(".setting-list .list");
-       const tag_loading = tag.find(".setting-list .loading");
-       const template = $("#settings-translations-list-entry");
-       const restart_hint = tag.find(".setting-list .restart-note");
-       restart_hint.hide();
+        { //Initialize the list
+            const tag_list = tag.find(".setting-list .list");
+            const tag_loading = tag.find(".setting-list .loading");
+            const template = $("#settings-translations-list-entry");
+            const restart_hint = tag.find(".setting-list .restart-note");
+            restart_hint.hide();
 
-       const update_list = () => {
-           tag_list.empty();
+            const update_list = () => {
+                tag_list.empty();
 
-           const currently_selected = i18n.config.translation_config().current_translation_url;
-           { //Default translation
-               const tag = template.renderTag({
-                   type: "default",
-                   selected: !currently_selected || currently_selected == "default"
-               });
-               tag.on('click', () => {
-                   i18n.select_translation(undefined, undefined);
-                   tag_list.find(".selected").removeClass("selected");
-                   tag.addClass("selected");
-
-                   restart_hint.show();
-               });
-               tag.appendTo(tag_list);
-           }
-
-           {
-                const display_repository_info = (repository: i18n.TranslationRepository) => {
-                    const info_modal = createModal({
-                        header: tr("Repository info"),
-                        body: () => {
-                            return $("#settings-translations-list-entry-info").renderTag({
-                                type: "repository",
-                                name: repository.name,
-                                url: repository.url,
-                                contact: repository.contact,
-                                translations: repository.translations || []
-                            });
-                        },
-                        footer: () => {
-                            let footer = $.spawn("div");
-                            footer.addClass("modal-button-group");
-                            footer.css("margin-top", "5px");
-                            footer.css("margin-bottom", "5px");
-                            footer.css("text-align", "right");
-
-                            let buttonOk = $.spawn("button");
-                            buttonOk.text(tr("Close"));
-                            buttonOk.click(() => info_modal.close());
-                            footer.append(buttonOk);
-
-                            return footer;
-                        }
+                const currently_selected = i18n.config.translation_config().current_translation_url;
+                { //Default translation
+                    const tag = template.renderTag({
+                        type: "default",
+                        selected: !currently_selected || currently_selected == "default"
                     });
-                    info_modal.open()
-                };
-
-               tag_loading.show();
-               i18n.iterate_translations((repo, entry) => {
-                   let repo_tag = tag_list.find("[repository=\"" + repo.unique_id + "\"]");
-                   if(repo_tag.length == 0) {
-                       repo_tag = template.renderTag({
-                           type: "repository",
-                           name: repo.name || repo.url,
-                           id: repo.unique_id
-                       });
-
-                       repo_tag.find(".button-delete").on('click', e => {
-                           e.preventDefault();
-
-                           Modals.spawnYesNo(tr("Are you sure?"), tr("Do you really want to delete this repository?"), answer => {
-                                if(answer) {
-                                    i18n.delete_repository(repo);
-                                    update_list();
-                                }
-                           });
-                       });
-                       repo_tag.find(".button-info").on('click', e => {
-                           e.preventDefault();
-
-                           display_repository_info(repo);
-                       });
-
-                       tag_list.append(repo_tag);
-                   }
-
-                   const tag = template.renderTag({
-                       type: "translation",
-                       name: entry.info.name || entry.url,
-                       id: repo.unique_id,
-                       selected: i18n.config.translation_config().current_translation_url == entry.url
-                   });
-                   tag.find(".button-info").on('click', e => {
-                       e.preventDefault();
-
-                       const info_modal = createModal({
-                           header: tr("Translation info"),
-                           body: () => {
-                               const tag = $("#settings-translations-list-entry-info").renderTag({
-                                   type: "translation",
-                                   name: entry.info.name,
-                                   url: entry.url,
-                                   repository_name: repo.name,
-                                   contributors: entry.info.contributors || []
-                               });
-
-                               tag.find(".button-info").on('click', () => display_repository_info(repo));
-
-                               return tag;
-                           },
-                           footer: () => {
-                               let footer = $.spawn("div");
-                               footer.addClass("modal-button-group");
-                               footer.css("margin-top", "5px");
-                               footer.css("margin-bottom", "5px");
-                               footer.css("text-align", "right");
-
-                               let buttonOk = $.spawn("button");
-                               buttonOk.text(tr("Close"));
-                               buttonOk.click(() => info_modal.close());
-                               footer.append(buttonOk);
-
-                               return footer;
-                           }
-                       });
-                       info_modal.open()
-                   });
-                   tag.on('click', e => {
-                        if(e.isDefaultPrevented()) return;
-                        i18n.select_translation(repo, entry);
+                    tag.on('click', () => {
+                        i18n.select_translation(undefined, undefined);
                         tag_list.find(".selected").removeClass("selected");
                         tag.addClass("selected");
 
-                       restart_hint.show();
-                   });
-                   tag.insertAfter(repo_tag)
-               }, () => {
-                   tag_loading.hide();
-               });
-           }
+                        restart_hint.show();
+                    });
+                    tag.appendTo(tag_list);
+                }
 
-       };
+                {
+                    const display_repository_info = (repository: i18n.TranslationRepository) => {
+                        const info_modal = createModal({
+                            header: tr("Repository info"),
+                            body: () => {
+                                return $("#settings-translations-list-entry-info").renderTag({
+                                    type: "repository",
+                                    name: repository.name,
+                                    url: repository.url,
+                                    contact: repository.contact,
+                                    translations: repository.translations || []
+                                });
+                            },
+                            footer: () => {
+                                let footer = $.spawn("div");
+                                footer.addClass("modal-button-group");
+                                footer.css("margin-top", "5px");
+                                footer.css("margin-bottom", "5px");
+                                footer.css("text-align", "right");
 
-       {
-           tag.find(".button-add-repository").on('click', () => {
-               createInputModal("Enter URL", tr("Enter repository URL:<br>"), text => true, url => { //FIXME test valid url
-                   if(!url) return;
+                                let buttonOk = $.spawn("button");
+                                buttonOk.text(tr("Close"));
+                                buttonOk.click(() => info_modal.close());
+                                footer.append(buttonOk);
 
-                   tag_loading.show();
-                   i18n.load_repository(url as string).then(repository => {
-                       i18n.register_repository(repository);
-                       update_list();
-                   }).catch(error => {
-                       tag_loading.hide();
-                       createErrorModal("Failed to load repository", tr("Failed to query repository.<br>Ensure that this repository is valid and reachable.<br>Error: ") + error).open();
-                   })
-               }).open();
-           });
-       }
+                                return footer;
+                            }
+                        });
+                        info_modal.open()
+                    };
 
-       restart_hint.find(".button-reload").on('click', () => {
-           location.reload();
-       });
+                    tag_loading.show();
+                    i18n.iterate_translations((repo, entry) => {
+                        let repo_tag = tag_list.find("[repository=\"" + repo.unique_id + "\"]");
+                        if (repo_tag.length == 0) {
+                            repo_tag = template.renderTag({
+                                type: "repository",
+                                name: repo.name || repo.url,
+                                id: repo.unique_id
+                            });
 
-       update_list();
-    }
+                            repo_tag.find(".button-delete").on('click', e => {
+                                e.preventDefault();
+
+                                Modals.spawnYesNo(tr("Are you sure?"), tr("Do you really want to delete this repository?"), answer => {
+                                    if (answer) {
+                                        i18n.delete_repository(repo);
+                                        update_list();
+                                    }
+                                });
+                            });
+                            repo_tag.find(".button-info").on('click', e => {
+                                e.preventDefault();
+
+                                display_repository_info(repo);
+                            });
+
+                            tag_list.append(repo_tag);
+                        }
+
+                        const tag = template.renderTag({
+                            type: "translation",
+                            name: entry.info.name || entry.url,
+                            id: repo.unique_id,
+                            selected: i18n.config.translation_config().current_translation_url == entry.url
+                        });
+                        tag.find(".button-info").on('click', e => {
+                            e.preventDefault();
+
+                            const info_modal = createModal({
+                                header: tr("Translation info"),
+                                body: () => {
+                                    const tag = $("#settings-translations-list-entry-info").renderTag({
+                                        type: "translation",
+                                        name: entry.info.name,
+                                        url: entry.url,
+                                        repository_name: repo.name,
+                                        contributors: entry.info.contributors || []
+                                    });
+
+                                    tag.find(".button-info").on('click', () => display_repository_info(repo));
+
+                                    return tag;
+                                },
+                                footer: () => {
+                                    let footer = $.spawn("div");
+                                    footer.addClass("modal-button-group");
+                                    footer.css("margin-top", "5px");
+                                    footer.css("margin-bottom", "5px");
+                                    footer.css("text-align", "right");
+
+                                    let buttonOk = $.spawn("button");
+                                    buttonOk.text(tr("Close"));
+                                    buttonOk.click(() => info_modal.close());
+                                    footer.append(buttonOk);
+
+                                    return footer;
+                                }
+                            });
+                            info_modal.open()
+                        });
+                        tag.on('click', e => {
+                            if (e.isDefaultPrevented()) return;
+                            i18n.select_translation(repo, entry);
+                            tag_list.find(".selected").removeClass("selected");
+                            tag.addClass("selected");
+
+                            restart_hint.show();
+                        });
+                        tag.insertAfter(repo_tag)
+                    }, () => {
+                        tag_loading.hide();
+                    });
+                }
+
+            };
+
+            {
+                tag.find(".button-add-repository").on('click', () => {
+                    createInputModal("Enter URL", tr("Enter repository URL:<br>"), text => true, url => { //FIXME test valid url
+                        if (!url) return;
+
+                        tag_loading.show();
+                        i18n.load_repository(url as string).then(repository => {
+                            i18n.register_repository(repository);
+                            update_list();
+                        }).catch(error => {
+                            tag_loading.hide();
+                            createErrorModal("Failed to load repository", tr("Failed to query repository.<br>Ensure that this repository is valid and reachable.<br>Error: ") + error).open();
+                        })
+                    }).open();
+                });
+            }
+
+            restart_hint.find(".button-reload").on('click', () => {
+                location.reload();
+            });
+
+            update_list();
+        }
     }
 
     function initialise_profiles(modal: Modal, tag: JQuery) {
@@ -786,30 +751,30 @@ namespace Modals {
                     profiles.mark_need_save();
 
                     let tag: JQuery;
-                    if(selected_type == profiles.identities.IdentitifyType.TEAFORO) {
+                    if (selected_type == profiles.identities.IdentitifyType.TEAFORO) {
                         const forum_tag = tag = settings_tag.find(".identity-settings-teaforo");
 
                         forum_tag.find(".connected, .disconnected").hide();
-                        if(identity && identity.valid()) {
+                        if (identity && identity.valid()) {
                             forum_tag.find(".connected").show();
                         } else {
                             forum_tag.find(".disconnected").show();
                         }
-                    } else if(selected_type == profiles.identities.IdentitifyType.TEAMSPEAK) {
+                    } else if (selected_type == profiles.identities.IdentitifyType.TEAMSPEAK) {
                         console.log("Set: " + identity);
                         const teamspeak_tag = tag = settings_tag.find(".identity-settings-teamspeak");
                         teamspeak_tag.find(".identity_string").val("");
-                        if(identity)
+                        if (identity)
                             (identity as profiles.identities.TeaSpeakIdentity).export_ts().then(e => teamspeak_tag.find(".identity_string").val(e));
-                    } else if(selected_type == profiles.identities.IdentitifyType.NICKNAME) {
+                    } else if (selected_type == profiles.identities.IdentitifyType.NICKNAME) {
                         const name_tag = tag = settings_tag.find(".identity-settings-nickname");
-                        if(identity)
+                        if (identity)
                             name_tag.find("input").val(identity.name());
                         else
                             name_tag.find("input").val("");
                     }
 
-                    if(tag)
+                    if (tag)
                         tag.trigger('show');
                 };
 
@@ -821,7 +786,7 @@ namespace Modals {
         const update_profile_list = () => {
             const profile_list = tag.find(".profile-list .list").empty();
             const profile_template = $("#settings-profile-list-entry");
-            for(const profile of profiles.profiles()) {
+            for (const profile of profiles.profiles()) {
                 const list_tag = profile_template.renderTag({
                     profile_name: profile.profile_name,
                     id: profile.id
@@ -829,7 +794,7 @@ namespace Modals {
 
                 const profile_status_update = () => {
                     list_tag.find(".status").hide();
-                    if(profile.valid())
+                    if (profile.valid())
                         list_tag.find(".status-valid").show();
                     else
                         list_tag.find(".status-invalid").show();
@@ -839,7 +804,7 @@ namespace Modals {
                     profile_list.find(".selected").removeClass("selected");
                     list_tag.addClass("selected");
 
-                    if(profile == selected_profile) return;
+                    if (profile == selected_profile) return;
                     nickname_listener = () => list_tag.find(".name").text(profile.profile_name);
                     status_listener = profile_status_update;
 
@@ -848,14 +813,14 @@ namespace Modals {
 
 
                 profile_list.append(list_tag);
-                if((!selected_profile && profile.id == "default") || selected_profile == profile)
+                if ((!selected_profile && profile.id == "default") || selected_profile == profile)
                     setTimeout(() => list_tag.trigger('click'), 1);
                 profile_status_update();
             }
         };
 
         const display_error = (error?: string) => {
-            if(error){
+            if (error) {
                 settings_tag.find(".settings-profile-error").show().find(".message").html(error);
             } else
                 settings_tag.find(".settings-profile-error").hide();
@@ -881,9 +846,9 @@ namespace Modals {
                         createInfoModal(tr("Identity imported"), tr("Your identity has been successfully imported!")).open();
                     };
 
-                    if(profile && profile.valid()) {
+                    if (profile && profile.valid()) {
                         spawnYesNo(tr("Are you sure"), tr("Do you really want to import a new identity and override the old identity?"), result => {
-                            if(result)
+                            if (result)
                                 spawnTeamSpeakIdentityImport(set_identity);
                         });
                     } else
@@ -891,10 +856,10 @@ namespace Modals {
                 });
                 button_export.on('click', event => {
                     const profile = selected_profile.selected_identity(profiles.identities.IdentitifyType.TEAMSPEAK) as profiles.identities.TeaSpeakIdentity;
-                    if(!profile) return;
+                    if (!profile) return;
 
                     createInputModal(tr("File name"), tr("Please enter the file name"), text => !!text, name => {
-                        if(name) {
+                        if (name) {
                             profile.export_ts(true).then(data => {
                                 const element = $.spawn("a")
                                     .text("donwload")
@@ -925,9 +890,9 @@ namespace Modals {
                         });
                     };
 
-                    if(profile && profile.valid()) {
+                    if (profile && profile.valid()) {
                         spawnYesNo(tr("Are you sure"), tr("Do you really want to generate a new identity and override the old identity?"), result => {
-                            if(result)
+                            if (result)
                                 generate_identity();
                         });
                     } else
@@ -936,7 +901,7 @@ namespace Modals {
 
                 button_improve.on('click', event => {
                     const profile = selected_profile.selected_identity(profiles.identities.IdentitifyType.TEAMSPEAK) as profiles.identities.TeaSpeakIdentity;
-                    if(!profile) return;
+                    if (!profile) return;
 
                     spawnTeamSpeakIdentityImprove(profile).close_listener.push(() => teamspeak_tag.trigger('show'));
                 });
@@ -945,7 +910,7 @@ namespace Modals {
                 teamspeak_tag.on('show', event => {
                     const profile = selected_profile.selected_identity(profiles.identities.IdentitifyType.TEAMSPEAK) as profiles.identities.TeaSpeakIdentity;
 
-                    if(!profile || !profile.valid()) {
+                    if (!profile || !profile.valid()) {
                         identity_info_tag.hide();
                         teamspeak_tag.find(".identity-undefined").show();
                         button_export.prop("disabled", true);
@@ -964,12 +929,12 @@ namespace Modals {
 
             { //The forum
                 const teaforo_tag = settings_tag.find(".identity-settings-teaforo");
-                if(native_client) {
+                if (native_client) {
                     teaforo_tag.find(".native-teaforo-login").on('click', event => {
                         setTimeout(() => {
                             const forum = require("teaforo.js");
                             const call = () => {
-                                if(modal.shown) {
+                                if (modal.shown) {
                                     display_settings(selected_profile);
                                     status_listener();
                                 }
@@ -981,7 +946,8 @@ namespace Modals {
                 }
 
                 teaforo_tag.on('show', event => {
-                    display_error(); /* clear error */
+                    display_error();
+                    /* clear error */
                 });
             }
 
@@ -992,7 +958,7 @@ namespace Modals {
                     selected_profile.set_identity(profiles.identities.IdentitifyType.NICKNAME, new profiles.identities.NameIdentity(name));
                     profiles.mark_need_save();
 
-                    if(name.length < 3) {
+                    if (name.length < 3) {
                         display_error("Name must be at least 3 characters long!");
                         return;
                     }
@@ -1001,9 +967,9 @@ namespace Modals {
 
                 name_tag.on('show', event => {
                     const profile = selected_profile.selected_identity(profiles.identities.IdentitifyType.NICKNAME);
-                    if(!profile)
+                    if (!profile)
                         display_error("invalid profile");
-                    else if(!profile.valid())
+                    else if (!profile.valid())
                         display_error("Name must be at least 3 characters long!");
                     else
                         display_error();
@@ -1015,9 +981,9 @@ namespace Modals {
         {
             settings_tag.find(".setting-name").on('change', event => {
                 const value = settings_tag.find(".setting-name").val() as string;
-                if(value && selected_profile) {
+                if (value && selected_profile) {
                     selected_profile.profile_name = value;
-                    if(nickname_listener)
+                    if (nickname_listener)
                         nickname_listener();
                     profiles.mark_need_save();
                     status_listener();
@@ -1025,7 +991,7 @@ namespace Modals {
             });
             settings_tag.find(".setting-default-nickname").on('change', event => {
                 const value = settings_tag.find(".setting-default-nickname").val() as string;
-                if(value && selected_profile) {
+                if (value && selected_profile) {
                     selected_profile.default_username = value;
                     profiles.mark_need_save();
                     status_listener();
@@ -1033,7 +999,7 @@ namespace Modals {
             });
             settings_tag.find(".setting-default-password").on('change', event => {
                 const value = settings_tag.find(".setting-default-password").val() as string;
-                if(value && selected_profile) {
+                if (value && selected_profile) {
                     selected_profile.default_username = value;
                     profiles.mark_need_save();
                     status_listener();
@@ -1045,7 +1011,7 @@ namespace Modals {
         {
             tag.find(".button-add-profile").on('click', event => {
                 createInputModal(tr("Please enter a name"), tr("Please enter a name for the new profile:<br>"), text => text.length > 0 && !profiles.find_profile_by_name(text), value => {
-                    if(value) {
+                    if (value) {
                         display_settings(profiles.create_new_profile(value as string));
                         update_profile_list();
                         profiles.mark_need_save();
@@ -1054,7 +1020,7 @@ namespace Modals {
             });
 
             tag.find(".button-set-default").on('click', event => {
-                if(selected_profile && selected_profile.id != 'default') {
+                if (selected_profile && selected_profile.id != 'default') {
                     profiles.set_default_profile(selected_profile);
                     update_profile_list();
                     profiles.mark_need_save();
@@ -1062,10 +1028,10 @@ namespace Modals {
             });
 
             tag.find(".button-delete").on('click', event => {
-                if(selected_profile && selected_profile.id != 'default') {
+                if (selected_profile && selected_profile.id != 'default') {
                     event.preventDefault();
-                    spawnYesNo(tr("Are you sure?"), tr ("Do you really want to delete this profile?"), result => {
-                        if(result) {
+                    spawnYesNo(tr("Are you sure?"), tr("Do you really want to delete this profile?"), result => {
+                        if (result) {
                             profiles.delete_profile(selected_profile);
                             update_profile_list();
                         }
@@ -1075,7 +1041,7 @@ namespace Modals {
         }
 
         modal.close_listener.push(() => {
-            if(profiles.requires_save())
+            if (profiles.requires_save())
                 profiles.save();
         });
         update_profile_list();
diff --git a/shared/js/ui/server.ts b/shared/js/ui/server.ts
index cf9d9dac..96ae2dcb 100644
--- a/shared/js/ui/server.ts
+++ b/shared/js/ui/server.ts
@@ -135,7 +135,21 @@ class ServerEntry {
     }
 
     spawnContextMenu(x: number, y: number, on_close: () => void = () => {}) {
+        let trigger_close = true;
         spawn_context_menu(x, y, {
+                type: MenuEntryType.ENTRY,
+                name: tr("Show server info"),
+                callback: () => {
+                    trigger_close = false;
+                    this.channelTree.client.selectInfo.open_popover()
+                },
+                icon: "client-about",
+                visible: this.channelTree.client.selectInfo.is_popover()
+            }, {
+                type: MenuEntryType.HR,
+                visible: this.channelTree.client.selectInfo.is_popover(),
+                name: ''
+            }, {
                 type: MenuEntryType.ENTRY,
                 icon: "client-virtualserver_edit",
                 name: tr("Edit"),
@@ -162,7 +176,7 @@ class ServerEntry {
                     createInfoModal(tr("Buddy invite URL"), tr("Your buddy invite URL:<br>") + url + tr("<bt>This has been copied to your clipboard.")).open();
                 }
             },
-            MenuEntry.CLOSE(on_close)
+            MenuEntry.CLOSE(() => (trigger_close ? on_close : () => {})())
         );
     }
 
diff --git a/shared/js/voice/VoiceHandler.ts b/shared/js/voice/VoiceHandler.ts
index 774cb86b..f4d37b82 100644
--- a/shared/js/voice/VoiceHandler.ts
+++ b/shared/js/voice/VoiceHandler.ts
@@ -144,6 +144,7 @@ class VoiceConnection {
     private vpacketId: number = 0;
     private chunkVPacketId: number = 0;
     private send_task: NodeJS.Timer;
+    private _tag_favicon: JQuery;
 
     constructor(client) {
         this.client = client;
@@ -171,6 +172,7 @@ class VoiceConnection {
         });
 
         this.send_task = setInterval(this.sendNextVoicePacket.bind(this), 20);
+        this._tag_favicon = $("head link[rel='icon']");
     }
 
     native_encoding_supported() : boolean {
@@ -463,6 +465,8 @@ class VoiceConnection {
 
         if(this.dataChannel)
             this.sendVoicePacket(new Uint8Array(0), this.current_channel_codec()); //TODO Use channel codec!
+
+        this._tag_favicon.attr('href', "img/favicon/teacup.png");
     }
 
     private handleVoiceStarted() {
@@ -470,5 +474,6 @@ class VoiceConnection {
 
         if(this.client && this.client.getClient())
             this.client.getClient().speaking = true;
+        this._tag_favicon.attr('href', "img/favicon/speaking.png");
     }
 }
\ No newline at end of file
diff --git a/shared/js/workers/pow/POWWorker.ts b/shared/js/workers/pow/POWWorker.ts
index 4800440b..77621dcd 100644
--- a/shared/js/workers/pow/POWWorker.ts
+++ b/shared/js/workers/pow/POWWorker.ts
@@ -1,6 +1,7 @@
 declare namespace WebAssembly {
     export function instantiateStreaming(stream: Promise<Response>, imports?: any) : Promise<ResultObject>;
 }
+declare function postMessage(message: any): void;
 
 const prefix = "[POWWorker] ";
 
diff --git a/vendor/bbcode b/vendor/bbcode
index 9a1c31f2..23f9aca6 160000
--- a/vendor/bbcode
+++ b/vendor/bbcode
@@ -1 +1 @@
-Subproject commit 9a1c31f27fcac129fa3503c2c1d2096c126d3fd2
+Subproject commit 23f9aca6b6dc1ffccd20d6da04953776a1882f2b
diff --git a/web/css/static/main.scss b/web/css/static/main.scss
index 3047fc79..a3b6a99e 100644
--- a/web/css/static/main.scss
+++ b/web/css/static/main.scss
@@ -1,17 +1,27 @@
 html, body {
-	height: 100%;
 	overflow-y: hidden;
+
+    height: 100%;
+    width: 100%;
+    position: fixed;
+
+    min-height: 250px;
+    min-width: 250px;
 }
 
 .app-container {
-	width: 100%;
-	height: 100%;
 	display: flex;
 	justify-content: center;
+	position: absolute;
+
+    right: 10px;
+    left: 10px;
+    bottom: 40px;
+    top: 10px;
 
 	.app {
 		width: 100%;
-		height: calc(100% - 50px);
+		height: 100%;
 		margin: 0;
 
 		display: flex; flex-direction: column; resize: both;