diff --git a/README.md b/README.md
index 828f69c..b437e66 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,8 @@ Docker:<br/>
 >       - DB_URL=jdbc:mysql://database/botdiscord 
 >       - DB_USER=root 
 >       - DB_PWD=ogahxu1eigohN2Eok0xoawae #CHANGE ME!
+>       - OAUTH_URL= #discord generated, change "response_type=code" to "response_type=token"
+>       - LOG_LEVEL=info
 >     labels:
 >       - "traefik.frontend.rule=Host:exemple.com" #CHANGE ME!
 >       - "traefik.docker.network=proxy"
diff --git a/src/main/java/net/Broken/Commands/Preference.java b/src/main/java/net/Broken/Commands/Preference.java
index 18559fd..6a3233d 100644
--- a/src/main/java/net/Broken/Commands/Preference.java
+++ b/src/main/java/net/Broken/Commands/Preference.java
@@ -57,14 +57,13 @@ public class Preference implements Commande {
 
                         MessageEmbed msg = EmbedMessageUtils.buildStandar(EmbedMessageUtils.getError("Missing argument.\n:arrow_right: Please use `//help preference`"));
                         Message sended = event.getTextChannel().sendMessage(msg).complete();
-                        new MessageTimeOut(MainBot.messageTimeOut, sended, event.getMessage()).start();
                     }
                     break;
 
                 default:
                     MessageEmbed msg = EmbedMessageUtils.buildStandar(EmbedMessageUtils.getError("\nUnknown argument`\n\nMore info with `//help preference`"));
                     Message sended = event.getTextChannel().sendMessage(msg).complete();
-                    new MessageTimeOut(MainBot.messageTimeOut, sended, event.getMessage()).start();
+
                     break;
 
             }
@@ -115,11 +114,9 @@ public class Preference implements Commande {
                     pref = guildPreferenceRepository.save(pref);
                     EmbedBuilder eb = new EmbedBuilder().addField(":ok: Ok :ok:","",false).addField("> Anti Spam", "```java\n" + String.valueOf(pref.isAntiSpam()) + "```", false).setColor(Color.green);
                     Message sended = event.getTextChannel().sendMessage(EmbedMessageUtils.buildStandar(eb)).complete();
-                    new MessageTimeOut(MainBot.messageTimeOut, sended, event.getMessage()).start();
                 }else{
                     MessageEmbed msg = EmbedMessageUtils.buildStandar(EmbedMessageUtils.getError("\nWrong value, expect `true` or `false`\n\nMore info with `//help preference`"));
                     Message sended = event.getTextChannel().sendMessage(msg).complete();
-                    new MessageTimeOut(MainBot.messageTimeOut, sended, event.getMessage()).start();
                 }
 
                 break;
@@ -133,11 +130,9 @@ public class Preference implements Commande {
                     pref = guildPreferenceRepository.save(pref);
                     EmbedBuilder eb = new EmbedBuilder().addField(":ok: Ok :ok:","",false).addField("> Default Role", "```java\n" + String.valueOf(pref.isDefaultRole()) + "```", false).setColor(Color.green);
                     Message sended = event.getTextChannel().sendMessage(EmbedMessageUtils.buildStandar(eb)).complete();
-                    new MessageTimeOut(MainBot.messageTimeOut, sended, event.getMessage()).start();
                 }else{
                     MessageEmbed msg = EmbedMessageUtils.buildStandar(EmbedMessageUtils.getError("\nWrong value, expect `true` or `false`\n\nMore info with `//help preference`"));
                     Message sended = event.getTextChannel().sendMessage(msg).complete();
-                    new MessageTimeOut(MainBot.messageTimeOut, sended, event.getMessage()).start();
                 }
                 break;
             case "default_role_id":
@@ -150,7 +145,6 @@ public class Preference implements Commande {
                         pref = guildPreferenceRepository.save(pref);
                         EmbedBuilder eb = new EmbedBuilder().addField(":ok: Ok :ok:","",false).addField("> Default Role ID", "```java\n" + pref.getDefaultRoleId()+ "```", false).setColor(Color.green);
                         Message sended = event.getTextChannel().sendMessage(EmbedMessageUtils.buildStandar(eb)).complete();
-                        new MessageTimeOut(MainBot.messageTimeOut, sended, event.getMessage()).start();
 
                     }
                     else
@@ -160,7 +154,6 @@ public class Preference implements Commande {
                 }catch (NumberFormatException e){
                     MessageEmbed msg = EmbedMessageUtils.buildStandar(EmbedMessageUtils.getError("\nRole not found!\n\nUse `//listroles` to get roles id"));
                     Message sended = event.getTextChannel().sendMessage(msg).complete();
-                    new MessageTimeOut(MainBot.messageTimeOut, sended, event.getMessage()).start();
                 }
 
                 break;
@@ -172,11 +165,9 @@ public class Preference implements Commande {
                     pref = guildPreferenceRepository.save(pref);
                     EmbedBuilder eb = new EmbedBuilder().addField(":ok: Ok :ok:","",false).addField("> Welcome", "```java\n" + String.valueOf(pref.isWelcome()) + "```", false).setColor(Color.green);
                     Message sended = event.getTextChannel().sendMessage(EmbedMessageUtils.buildStandar(eb)).complete();
-                    new MessageTimeOut(MainBot.messageTimeOut, sended, event.getMessage()).start();
                 }else{
                     MessageEmbed msg = EmbedMessageUtils.buildStandar(EmbedMessageUtils.getError("\nWrong value, expect `true` or `false`\n\nMore info with `//help preference`"));
                     Message sended = event.getTextChannel().sendMessage(msg).complete();
-                    new MessageTimeOut(MainBot.messageTimeOut, sended, event.getMessage()).start();
                 }
                 break;
             case  "welcome_chanel_id":
@@ -189,7 +180,6 @@ public class Preference implements Commande {
                         pref = guildPreferenceRepository.save(pref);
                         EmbedBuilder eb = new EmbedBuilder().addField(":ok: Ok :ok:","",false).addField("> Welcome chanel ID", "```java\n" + pref.getWelcomeChanelID() + "```", false).setColor(Color.green);
                         Message sended = event.getTextChannel().sendMessage(EmbedMessageUtils.buildStandar(eb)).complete();
-                        new MessageTimeOut(MainBot.messageTimeOut, sended, event.getMessage()).start();
 
                     }
                     else
@@ -199,7 +189,6 @@ public class Preference implements Commande {
                 }catch (NumberFormatException e){
                     MessageEmbed msg = EmbedMessageUtils.buildStandar(EmbedMessageUtils.getError("\nText channel not found!\n\nUse `//listroles` to get roles id"));
                     Message sended = event.getTextChannel().sendMessage(msg).complete();
-                    new MessageTimeOut(MainBot.messageTimeOut, sended, event.getMessage()).start();
                 }
                 break;
             case "welcome_message":
@@ -207,7 +196,6 @@ public class Preference implements Commande {
                 pref = guildPreferenceRepository.save(pref);
                 EmbedBuilder eb = new EmbedBuilder().addField(":ok: Ok :ok:","",false).addField("> Welcome message", "```java\n" + pref.getWelcomeMessage() + "```", false).setColor(Color.green);
                 Message sended = event.getTextChannel().sendMessage(EmbedMessageUtils.buildStandar(eb)).complete();
-                new MessageTimeOut(MainBot.messageTimeOut, sended, event.getMessage()).start();
                 break;
 
             case "daily_madame":
@@ -218,18 +206,15 @@ public class Preference implements Commande {
                     pref = guildPreferenceRepository.save(pref);
                     EmbedBuilder ebd = new EmbedBuilder().addField(":ok: Ok :ok:","",false).addField("> Daily Madame", "Activate daily madame message\n```java\n" + String.valueOf(value) + "```", false).setColor(Color.green);
                     Message sendedm = event.getTextChannel().sendMessage(EmbedMessageUtils.buildStandar(ebd)).complete();
-                    new MessageTimeOut(MainBot.messageTimeOut, sendedm, event.getMessage()).start();
                 }else{
                     MessageEmbed msg = EmbedMessageUtils.buildStandar(EmbedMessageUtils.getError("\nWrong value, expect `true` or `false`\n\nMore info with `//help preference`"));
                     Message sendedm = event.getTextChannel().sendMessage(msg).complete();
-                    new MessageTimeOut(MainBot.messageTimeOut, sendedm, event.getMessage()).start();
                 }
                 break;
 
             default:
                 MessageEmbed msg2 = EmbedMessageUtils.buildStandar(EmbedMessageUtils.getError("\nUnknown id.\n\nUse `//preference` to see list"));
                 Message sended2 = event.getTextChannel().sendMessage(msg2).complete();
-                new MessageTimeOut(MainBot.messageTimeOut, sended2, event.getMessage()).start();
                 break;
         }
 
diff --git a/src/main/resources/log4j2.xml b/src/main/resources/log4j2.xml
index 16b037f..c463ef0 100644
--- a/src/main/resources/log4j2.xml
+++ b/src/main/resources/log4j2.xml
@@ -25,7 +25,7 @@
         </File>
     </Appenders>
     <Loggers>
-        <Logger name="net.Broken" level="info" additivity="false">
+        <Logger name="net.Broken" level="${env:LOG_LEVEL}" additivity="false">
             <AppenderRef ref="Console"/>
             <AppenderRef ref="current"/>
             <AppenderRef ref="RollingFile"/>
diff --git a/src/main/resources/static/img/icon_192.png b/src/main/resources/static/img/icon_192.png
new file mode 100644
index 0000000..94d335d
Binary files /dev/null and b/src/main/resources/static/img/icon_192.png differ
diff --git a/src/main/resources/static/img/icon_512.png b/src/main/resources/static/img/icon_512.png
new file mode 100644
index 0000000..62605a8
Binary files /dev/null and b/src/main/resources/static/img/icon_512.png differ
diff --git a/src/main/resources/static/js/music.js b/src/main/resources/static/js/music.js
index d4c3a4a..b3e2526 100644
--- a/src/main/resources/static/js/music.js
+++ b/src/main/resources/static/js/music.js
@@ -165,7 +165,7 @@ function getCurentMusic() {
     })
     .fail(function (data) {
         if(!error){
-            alert("Connection lost, I keep trying to refresh!");
+            console.error("Connection lost, I keep trying to refresh!");
             error = true;
         }
 
@@ -250,6 +250,7 @@ function getChannels(){
 
             $('#channelForm').append(template);
         });
+        $('#btn_ok_channel').addClass("disabled");
         $('#modalChanels').modal('open');
 
     }).fail(function (data) {
@@ -312,7 +313,7 @@ function updateControl(data){
 
 function sendCommand(command){
     modal_loading.modal('open');
-    console.log(command)
+    console.log(command);
     $.ajax({
         type: "POST",
         dataType: 'json',
@@ -371,6 +372,8 @@ function msToTime(duration) {
 }
 
 function listeners() {
+
+
     $('#btn_play').click(function () {
         switch (state){
             case "PLAYING":
diff --git a/src/main/resources/static/js/navabar.js b/src/main/resources/static/js/navabar.js
index 98d4b10..0358232 100644
--- a/src/main/resources/static/js/navabar.js
+++ b/src/main/resources/static/js/navabar.js
@@ -13,7 +13,7 @@ var nav_name;
 $(document).ready(function() {
     $('#nav-mobile').sidenav({
         menuWidth: 400, // Default is 300
-        edge: 'right', // Choose the horizontal origin
+        edge: 'left', // Choose the horizontal origin
         closeOnClick: false, // Closes side-nav on <a> clicks, useful for Angular/Meteor
         draggable: true // Choose whether you can drag to open on touch screens,
     });
@@ -22,6 +22,13 @@ $(document).ready(function() {
         dismissible: false // Modal can be dismissed by clicking outside of the modal
     });
 
+    $('#modal_internet').modal({
+        dismissible: false // Modal can be dismissed by clicking outside of the modal
+    });
+
+
+
+
 
     nav_bar_account_link = $("#nav-bar-account");
     input_name = $("#user_input");
@@ -37,6 +44,8 @@ $(document).ready(function() {
         connected();
     }
 
+    checkConnection();
+
 
 });
 
@@ -198,5 +207,21 @@ function getGuild(){
             error = true;
         }
 
+    });
+}
+
+
+function checkConnection() {
+    $.ajax({
+        type: "GET",
+        url: "/api/isReady",
+        success: function (data) {
+            console.log("Connection Ok");
+        }
+
+    }).fail(function (data) {
+        console.error("Connection fail!");
+        $('#modal_internet').modal('open');
+
     });
 }
\ No newline at end of file
diff --git a/src/main/resources/static/js/workerRegister.js b/src/main/resources/static/js/workerRegister.js
new file mode 100644
index 0000000..9907be1
--- /dev/null
+++ b/src/main/resources/static/js/workerRegister.js
@@ -0,0 +1,11 @@
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function() {
+        navigator.serviceWorker.register('/sw.js').then(function(registration) {
+            // Registration was successful
+            console.log('ServiceWorker registration successful with scope: ', registration.scope);
+        }, function(err) {
+            // registration failed :(
+            console.log('ServiceWorker registration failed: ', err);
+        });
+    });
+}
\ No newline at end of file
diff --git a/src/main/resources/static/manifest.json b/src/main/resources/static/manifest.json
new file mode 100644
index 0000000..9f5c407
--- /dev/null
+++ b/src/main/resources/static/manifest.json
@@ -0,0 +1,20 @@
+{
+  "short_name": "Claptrap",
+  "name": "Claptrap Bot",
+  "icons": [
+    {
+      "src": "/img/icon_192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/img/icon_512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#263238",
+  "background_color": "#263238"
+}
\ No newline at end of file
diff --git a/src/main/resources/static/sw.js b/src/main/resources/static/sw.js
new file mode 100644
index 0000000..2a09125
--- /dev/null
+++ b/src/main/resources/static/sw.js
@@ -0,0 +1,80 @@
+var CACHE_NAME = 'Clap-Trap-Bot-V0.1';
+var urlsToCache = [
+    '/',
+    '/music',
+    '/register',
+    '/oauthCallback',
+    '/css/materialize.css',
+    '/js/navabar.js',
+    '/manifest.json'
+
+];
+
+
+self.addEventListener('install', function (event) {
+    // Perform install steps
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then(function (cache) {
+                console.log('Opened cache');
+                return cache.addAll(urlsToCache);
+            })
+    );
+});
+
+self.addEventListener('fetch', function (event) {
+    console.log("fetch");
+    event.respondWith(
+        caches.match(event.request)
+            .then(function (response) {
+                    // Cache hit - return response
+                    if (response) {
+                        return response;
+                    }
+                    return fetch(event.request);
+                }
+            )
+    );
+
+    event.waitUntil(
+        update(event.request)
+            .then(refresh)
+    );
+
+    function update(request) {
+        console.log(request);
+        console.log(caches.match(request));
+        return caches.match(request).then(
+            function (response) {
+                if (response) {
+                    return caches.open(CACHE_NAME).then(function (cache) {
+                        return fetch(request).then(function (response) {
+                            return cache.put(request, response.clone()).then(function () {
+                                return response;
+                            });
+                        });
+                    });
+                }
+            }
+        );
+    }
+
+    function refresh(response) {
+        if(response){
+            console.log("refresh");
+            return self.clients.matchAll().then(function (clients) {
+                clients.forEach(function (client) {
+                    var message = {
+                        type: 'refresh',
+                        url: response.url,
+                        eTag: response.headers.get('eTag')
+                    };
+                    client.postMessage(JSON.stringify(message));
+                });
+            });
+        }
+
+    }
+
+
+});
\ No newline at end of file
diff --git a/src/main/resources/templates/header.html b/src/main/resources/templates/header.html
index e73f31d..dad8103 100644
--- a/src/main/resources/templates/header.html
+++ b/src/main/resources/templates/header.html
@@ -109,7 +109,7 @@
             <div class="row center" style="margin-bottom: 0px">
                 <form name="login_form" id="login_form" action="javascript:void(0);" onsubmit="tryConnection()">
                     <div class="row" style="margin-bottom: 0px">
-                        <div class="input-field col s6 offset-s3">
+                        <div class="input-field col l6 offset-l3 m10 offset-m1 s10 offset-s1">
                             <i class="material-icons prefix">account_box</i>
                             <input name="username" id="user_input" type="text" class="validate"/>
                             <label for="user_input" >User Name</label>
@@ -117,7 +117,7 @@
                         </div>
                     </div>
                     <div class="row">
-                        <div class="input-field col s6 offset-s3">
+                        <div class="input-field col l6 offset-l3 m10 offset-m1 s10 offset-s1">
                             <i class="material-icons prefix">security</i>
                             <input name="password" id="password_input" type="password" class="validate"/>
                             <label for="password_input">Password</label>
@@ -162,6 +162,24 @@
         </div>
     </div>
 
+
+
+    <div id="modal_internet" class="modal">
+        <div class="modal-content" style="padding-bottom: 0px">
+            <div class="row" style="margin-bottom: 0px">
+                <h3 class="col l12 m 12 s12 center red-text">Can't connect to server!</h3>
+                <div class="col l6 offset-l3 offset-m1 m10 offset-s1 s10 center">
+                    <p> Please check your connection and reload the app!</p>
+                </div>
+            </div>
+        </div>
+        <div class="modal-footer">
+        </div>
+    </div>
+
+
+
+
     <p id="radioTemplateGuild" class="" style="visibility: hidden; display: none ">
         <label>
             <input name="guildRadio" class="with-gap" type="radio" value="@id" id="@id"/>
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 4053048..afd3386 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -12,6 +12,8 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
     <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
     <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+    <link rel="manifest" href="/manifest.json"/>
+    <meta name="theme-color" content="#263238"/>
 
 
 </head>
@@ -37,6 +39,7 @@
 <script th:src="@{/js/navabar.js}"></script>
 <script th:src="@{/js/js.cookie.js}"></script>
 <script src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" crossorigin="anonymous"></script>
+<script th:src="@{/js/workerRegister.js}"></script>
 
 
 </body>
diff --git a/src/main/resources/templates/loading.html b/src/main/resources/templates/loading.html
index 90c97c6..c912ace 100644
--- a/src/main/resources/templates/loading.html
+++ b/src/main/resources/templates/loading.html
@@ -12,6 +12,7 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
     <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
     <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+    <meta name="theme-color" content="#263238"/>
 </head>
 
 <body class="blue-grey lighten-5" >
diff --git a/src/main/resources/templates/music.html b/src/main/resources/templates/music.html
index 878e567..7706f4a 100644
--- a/src/main/resources/templates/music.html
+++ b/src/main/resources/templates/music.html
@@ -12,6 +12,9 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
     <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
     <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+    <link rel="manifest" href="/manifest.json"/>
+    <meta name="theme-color" content="#263238"/>
+
 </head>
 
 <body class="blue-grey lighten-5" >
@@ -20,32 +23,32 @@
 
 <div class="section no-pad-bot main" id="index-banner">
     <div class="row">
-        <div class="col s8">
+        <div class="col l8 s12 m12">
             <div class="row center" >
                 <img class="responsive-img z-depth-3" id="music_img" style="max-width: 30%" src=""/>
             </div>
             <h4 class="center" id="music_text"></h4>
             <div class="row center" style="margin-bottom: 0px">
-                <div class="progress col s6 offset-s3 z-depth-3">
+                <div class="progress col l6 offset-l3 m10 offset-m1 s10 offset-s1 z-depth-3">
                     <div class="determinate" id="music_progress" style="width: 0%"></div>
                 </div>
             </div>
             <div class="row center">
-                <div class="col s2 offset-s3 left-align" style="padding: 0px" id="current_time">0:00</div>
-                <div class="col s2 offset-s2 right-align " style="padding: 0px" id="total_time">0:00</div>
+                <div class="col l2 offset-l3 m2 offset-m1 s2 offset-s1 left-align" style="padding: 0px" id="current_time">0:00</div>
+                <div class="col l2 offset-l2 m2 offset-m6 s2 offset-s6 right-align " style="padding: 0px" id="total_time">0:00</div>
             </div>
             <div class="row center">
-                <div class="col s2 offset-s3 center">
+                <div class="col l2 offset-l3 m4 s4 center">
                     <a class="btn-large red darken-4 z-depth-3 waves-effect waves-light" id="btn_stop">
                         <i class="material-icons medium">stop</i>
                     </a>
                 </div>
-                <div class="col s2 center">
+                <div class="col l2 m4 s4 center">
                     <a class="btn-large green darken-4 z-depth-3 waves-effect waves-light" id="btn_play">
                         <i class="material-icons medium">play_arrow</i>
                     </a>
                 </div>
-                <div class="col s2 center">
+                <div class="col l2 m4 s4 center">
                     <a class="btn-large light-blue darken-4 z-depth-3 waves-effect waves-light" id="btn_next">
                         <i class="material-icons">skip_next</i>
                     </a>
@@ -53,7 +56,7 @@
             </div>
             <div class="row center">
 
-                <div class="col offset-s5 s2 center">
+                <div class="col offset-l5 l2 m2 offset-m5 s2 offset-s5 center">
                     <a class="btn black z-depth-3 waves-effect waves-light modal-trigger" href="#modal_current_info" id="btn_info">
                         <i class="material-icons">info</i>
                     </a>
@@ -62,7 +65,7 @@
 
             </div>
             <div class="row center">
-                <div class="col offset-s5 s2 center">
+                <div class="col offset-l5 l2 m4 offset-m4 s4 offset-s4 center">
                     <a class="btn-large red accent-4 z-depth-3 waves-effect waves-light" id="btn_disconnect">
                         <i class="material-icons">call_end</i>
                     </a>
@@ -70,17 +73,17 @@
             </div>
 
         </div>
-        <div class="col s4" >
+        <div class="col l4 m12 s12" >
             <table>
                 <thead>
                 <tr>
                     <th style="padding: 0px;">
                         <div class="row center valign-wrapper" style="margin: 0px">
-                            <div class="col s3 center blue-grey-text text-darken-3"><h5><b>Playlist</b></h5></div>
-                            <div class="col s3 center" style="padding-right: 0px; padding-left: 0px">
+                            <div class="col l3 m5 s5 center blue-grey-text text-darken-3"><h5><b>Playlist</b></h5></div>
+                            <div class="col l3 m2 s2 center" style="padding-right: 0px; padding-left: 0px">
                                 <a class="waves-effect waves-light btn modal-trigger red darken-4" id="flush_btn"><i class="material-icons">delete_sweep</i></a>
                             </div>
-                            <div class="col s3 center" style="padding-right: 0px; padding-left: 0px">
+                            <div class="col l3 m2 s2 center" style="padding-right: 0px; padding-left: 0px">
                                 <!-- Modal Trigger -->
                                 <a class="waves-effect waves-light btn modal-trigger green darken-4" id="add_btn" href="#modalAdd"><i class="material-icons">add_circle_outline</i></a>
 
@@ -88,17 +91,17 @@
                                 <div id="modalAdd" class="modal disabled">
                                     <div class="modal-content" style="padding-bottom: 0px">
                                         <div class="row" style="margin-bottom: 0px">
-                                            <h3 class="col s12"> Add Music</h3>
-                                            <form class="col s12">
+                                            <h3 class="col l12 m12 s12"> Add Music</h3>
+                                            <form class="col l12 m12 s12">
                                                 <div class="row" style="margin-bottom: 0px">
-                                                    <div class="input-field col s12" style="padding-left: 0px; padding-right: 0px">
+                                                    <div class="input-field col l12 m12 s12" style="padding-left: 0px; padding-right: 0px">
                                                         <!--<i class="material-icons prefix">link</i>-->
                                                         <input id="input_link" type="text" class="validate"/>
                                                         <label for="input_link">Link</label>
                                                     </div>
                                                 </div>
                                                 <div class="row" style="margin-bottom: 0px">
-                                                    <div class="col s12 center">
+                                                    <div class="col l12 m12 s12 center">
                                                         Playlist Limit
                                                     </div>
                                                 </div>
@@ -117,7 +120,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col s3 center " style="padding-left: 0px">
+                            <div class="col l3 m2 s2 center " style="padding-left: 0px">
                                 <div class="row switch  blue-grey-text text-darken-3" style="margin-bottom: 0px">
                                     AutoFlow
                                 </div>
@@ -193,8 +196,8 @@
 <div id="modalChanels" class="modal">
     <div class="modal-content" style="padding-bottom: 0px">
         <div class="row" style="margin-bottom: 0px">
-            <h3 class="col s12 center">Vocal Channels</h3>
-            <div class="col offset-s4 s4 center">
+            <h3 class="col l12 m12 s12 center">Vocal Channels</h3>
+            <div class="col offset-l4 l4 m4 offset-m4 s8 offset-s2 center">
                 <form id="channelForm" action="#" class="left-align">
                 </form>
             </div>
@@ -211,7 +214,7 @@
 <div id="modal_loading" class="modal valign-wrapper">
     <div class="modal-content" >
         <div class="row center">
-            <h3 class="col s12 center">Please wait</h3>
+            <h3 class="col l12 m12 s12 center">Please wait</h3>
         </div>
         <div class="row center" >
             <div class="preloader-wrapper big active">
@@ -287,6 +290,8 @@
 <script th:src="@{/js/music.js}"></script>
 <script th:src="@{/js/navabar.js}"></script>
 <script th:src="@{/js/js.cookie.js}"></script>
+<script th:src="@{/js/workerRegister.js}"></script>
+
 
 </body>
 </html>
diff --git a/src/main/resources/templates/oauthCallback.html b/src/main/resources/templates/oauthCallback.html
index b67ec2c..d719913 100644
--- a/src/main/resources/templates/oauthCallback.html
+++ b/src/main/resources/templates/oauthCallback.html
@@ -12,6 +12,7 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
     <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
     <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+    <meta name="theme-color" content="#263238"/>
 
 
 </head>
diff --git a/src/main/resources/templates/register.html b/src/main/resources/templates/register.html
index d4b9df0..186db72 100644
--- a/src/main/resources/templates/register.html
+++ b/src/main/resources/templates/register.html
@@ -10,6 +10,8 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
     <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
     <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
+    <link rel="manifest" href="/manifest.json"/>
+    <meta name="theme-color" content="#263238"/>
 </head>
 
 <body class="blue-grey lighten-5" >
@@ -98,6 +100,8 @@
     <script th:src="@{/js/register.js}"></script>
     <script th:src="@{/js/navabar.js}"></script>
     <script th:src="@{/js/js.cookie.js}"></script>
+    <script th:src="@{/js/workerRegister.js}"></script>
+