diff --git a/assets/audio/sonar.mp3 b/assets/audio/sonar.mp3
new file mode 100644
index 0000000..3cc376a
Binary files /dev/null and b/assets/audio/sonar.mp3 differ
diff --git a/assets/audio/sonar.ogg b/assets/audio/sonar.ogg
new file mode 100644
index 0000000..77aadec
Binary files /dev/null and b/assets/audio/sonar.ogg differ
diff --git a/img/favicon.png b/assets/img/favicon.png
similarity index 100%
rename from img/favicon.png
rename to assets/img/favicon.png
diff --git a/img/glowing-bear.png b/assets/img/glowing-bear.png
similarity index 100%
rename from img/glowing-bear.png
rename to assets/img/glowing-bear.png
diff --git a/img/glowing_bear_128x128.png b/assets/img/glowing_bear_128x128.png
similarity index 100%
rename from img/glowing_bear_128x128.png
rename to assets/img/glowing_bear_128x128.png
diff --git a/img/glyphicons-halflings-white.png b/assets/img/glyphicons-halflings-white.png
similarity index 100%
rename from img/glyphicons-halflings-white.png
rename to assets/img/glyphicons-halflings-white.png
diff --git a/img/glyphicons-halflings.png b/assets/img/glyphicons-halflings.png
similarity index 100%
rename from img/glyphicons-halflings.png
rename to assets/img/glyphicons-halflings.png
diff --git a/img/weechat_logo_128x128.png b/assets/img/weechat_logo_128x128.png
similarity index 100%
rename from img/weechat_logo_128x128.png
rename to assets/img/weechat_logo_128x128.png
diff --git a/img/weechat_logo_60x60.png b/assets/img/weechat_logo_60x60.png
similarity index 100%
rename from img/weechat_logo_60x60.png
rename to assets/img/weechat_logo_60x60.png
diff --git a/img/weechat_logo_90x90.png b/assets/img/weechat_logo_90x90.png
similarity index 100%
rename from img/weechat_logo_90x90.png
rename to assets/img/weechat_logo_90x90.png
diff --git a/index.html b/index.html
index 889f8ee..6fbc06b 100644
--- a/index.html
+++ b/index.html
@@ -8,9 +8,9 @@
     <meta name="mobile-web-app-capable" content="yes">
     <title ng-bind-template="{{ notificationStatus }}WeeChat {{ pageTitle}}"></title>
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
-    <link rel="shortcut icon" sizes="128x128" href="img/glowing_bear_128x128.png">
-    <link rel="apple-touch-icon" sizes="128x128" href="img/glowing_bear_128x128.png">
-    <link rel="shortcut icon" type="image/png" href="img/favicon.png" >
+    <link rel="shortcut icon" sizes="128x128" href="assets/img/glowing_bear_128x128.png">
+    <link rel="apple-touch-icon" sizes="128x128" href="assets/img/glowing_bear_128x128.png">
+    <link rel="shortcut icon" type="image/png" href="assets/img/favicon.png" >
     <link href="css/style.css" rel="stylesheet" media="screen">
     <link href="css/glowingbear.css" rel="stylesheet" media="screen">
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
@@ -35,7 +35,7 @@
   <body ng-controller="WeechatCtrl" ng-keydown="handleKeyPress($event)">
     <div ng-hide="connected" class="container">
       <h2>
-        <img alt="logo" src="img/favicon.png">
+        <img alt="logo" src="assets/img/favicon.png">
         glowing bear
         <small>
           WeeChat web frontend
@@ -189,7 +189,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
       <div id="topbar">
         <div class="brand">
           <a href="#" ng-click="swipeSidebar()">
-            <img alt="brand" src="img/favicon.png" title="Connected to {{ host }}:{{ port}}">
+            <img alt="brand" src="assets/img/favicon.png" title="Connected to {{ host }}:{{ port}}">
           </a>
           <button ng-show="debugMode" ng-click="countWatchers()">Count<br />Watchers</button>
         </div>
@@ -266,6 +266,8 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
     <div id="footer" ng-show="connected">
       <div class="navbar navbar-inverse navbar-fixed-bottom" ng-class="{'withnicklist': showNicklist, 'withsidebar': showSidebar}">
         <div input-bar input-id="sendMessage"></div>
+      </div>
+      <div id="soundNotification"></div>
     </div>
     <div id="settingsModal" class="modal fade">
       <div class="modal-dialog">
@@ -347,6 +349,16 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
                   </div>
                 </form>
               </li>
+              <li>
+                <form class="form-inline" role="form">
+                  <div class="checkbox">
+                    <label>
+                      <input type="checkbox" ng-model="soundnotification">
+                      Play sound on notification
+                    </label>
+                  </div>
+                </form>
+              </li>
               <li>
                 <form class="form-inline" role="form">
                   <div class="checkbox">
diff --git a/js/glowingbear.js b/js/glowingbear.js
index 8203827..f78eb1c 100644
--- a/js/glowingbear.js
+++ b/js/glowingbear.js
@@ -685,6 +685,8 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
     $store.bind($scope, "useFavico", true);
     // Save setting for notimestamp
     $store.bind($scope, "notimestamp", notimestamp);
+    // Save setting for playing sound on notification
+    $store.bind($scope, "soundnotification", false);
 
     // Save setting for displaying embeds in rootScope so it can be used from service
     $rootScope.visible = $scope.noembed === false;
@@ -876,6 +878,13 @@ weechat.controller('WeechatCtrl', ['$rootScope', '$scope', '$store', '$timeout',
             window.focus();
             notification.close();
         };
+
+        if ($scope.soundnotification) {
+            // TODO fill in a sound file
+            var audioFile = "assets/audio/sonar";
+            var soundHTML = '<audio autoplay="autoplay"><source src="' + audioFile + '.ogg" type="audio/ogg" /><source src="' + audioFile + '.mp3" type="audio/mpeg" /></audio>';
+            document.getElementById("soundNotification").innerHTML = soundHTML;
+        }
     };
 
     $scope.hasUnread = function(buffer) {
