diff --git a/app/index.html b/app/index.html
index 6cbf002..2447c8a 100644
--- a/app/index.html
+++ b/app/index.html
@@ -20,8 +20,8 @@
       <div class="loading-circle" data-bind="css: { loaded: true }"></div>
     </div>
     <div id="container" style="display: none" data-bind="visible: true">
-      <!-- ko with: connectDialog -->
-        <div class="connect-dialog" data-bind="visible: visible">
+      <!-- ko with: connectDialog --> 
+      <div class="connect-dialog" data-bind="visible: visible"> 
           <div class="dialog-header">
             Connect to Server
           </div>
@@ -43,6 +43,10 @@
                   <td>Username</td>
                   <td><input id="username" type="text" data-bind="value: username"></td>
                 </tr>
+		<tr>
+                  <td>Password</td>
+                  <td><input id="password" type="password" data-bind="value: password"></td>
+                </tr>
             </table>
             <div class="dialog-footer">
               <input class="dialog-close" type="button" data-bind="click: hide" value="Cancel">
diff --git a/app/index.js b/app/index.js
index a6d39d4..b1fd339 100644
--- a/app/index.js
+++ b/app/index.js
@@ -27,12 +27,13 @@ function ConnectDialog () {
   self.port = ko.observable('443')
   self.token = ko.observable('')
   self.username = ko.observable('')
+  self.password = ko.observable('')
   self.visible = ko.observable(true)
   self.show = self.visible.bind(self.visible, true)
   self.hide = self.visible.bind(self.visible, false)
   self.connect = function () {
     self.hide()
-    ui.connect(self.username(), self.address(), self.port(), self.token())
+    ui.connect(self.username(), self.address(), self.port(), self.token(), self.password())
   }
 }
 
@@ -81,7 +82,7 @@ class GlobalBindings {
       return '[' + new Date().toLocaleTimeString('en-US') + ']'
     }
 
-    this.connect = (username, host, port, token) => {
+    this.connect = (username, host, port, token, password) => {
       this.resetClient()
 
       log('Connecting to server ', host)
@@ -89,12 +90,12 @@ class GlobalBindings {
       // TODO: token
       mumbleConnect(`wss://${host}:${port}`, {
         username: username,
+        password: password,
         codecs: CodecsBrowser
       }).done(client => {
         log('Connected!')
 
         this.client = client
-
         // Prepare for connection errors
         client.on('error', function (err) {
           log('Connection error:', err)
@@ -139,7 +140,11 @@ class GlobalBindings {
           })
         }
       }, err => {
-        log('Connection error:', err)
+	  if (err.type == 4) {
+	      log('Connection error: invalid server password')
+	  } else {
+              log('Connection error:', err)
+	  }
       })
     }
 
@@ -434,6 +439,9 @@ window.onload = function () {
   if (queryParams.username) {
     ui.connectDialog.username(queryParams.username)
   }
+  if (queryParams.password) {
+    ui.connectDialog.password(queryParams.password)
+  }
   ko.applyBindings(ui)
 }
 
diff --git a/themes/MetroMumbleLight/main.css b/themes/MetroMumbleLight/main.css
index c3ad28f..2845e03 100644
--- a/themes/MetroMumbleLight/main.css
+++ b/themes/MetroMumbleLight/main.css
@@ -233,7 +233,7 @@ form {
 .connect-dialog {
   position: absolute;
   width: 300px;
-  height: 197px;
+  height: 227px;
   top: calc(50% - 100px);
   left: calc(50% - 150px);
   background-color: #eee;
@@ -250,3 +250,12 @@ form {
   padding: 2px;
   width: calc(100% - 8px);
 }
+.connect-dialog input[type=password] {
+  font-size: 15px;
+  border: 1px gray solid;
+  border-radius: 3px;
+  background-color: white;
+  color: black;
+  padding: 2px;
+  width: calc(100% - 8px);
+}