diff --git a/Rev1/node/views/p_generator.pug b/Rev1/node/views/p_generator.pug
index 04d2b15..51e7dc6 100644
--- a/Rev1/node/views/p_generator.pug
+++ b/Rev1/node/views/p_generator.pug
@@ -1,31 +1,53 @@
 extends layout.pug
-block scripts
-  script(src='/js/pGenerator.js')
+block head 
+
 block content
-    h1 p_generator
-    p UID:
-        input(id="in-id" type="text" name="imdb" placeholder="please input your device id")  
-        button(onclick='clickme()')  get keys
-    p
-    table#response
+    h3.text-center.mt-3 Password Generator for AnkaSense S4
+    .container
+        .row
+            .col
+                .input-group
+                    .input-group-prepend
+                        span.input-group-text(id='') Device Id
+                    input.form-control(type='text',id="in-id")
+                    .input-group-append
+                        button.btn.btn-outline-secondary(type="button", onclick="clickme()") Get Keys
+
+        .row.mt-3
+            .col
+                table#pTable.table.d-none
+                    thead
+                        tr
+                        th(scope='col') #
+                        th(scope='col') User Type
+                        th(scope='col') Password
+                    tbody
+                        tr
+                        th(scope='row') 1
+                        td Manager
+                        td#manager
+                        tr
+                        th(scope='row') 2
+                        td Service
+                        td#service
+                p#pErr
     script.
         function clickme() {
             var id = document.getElementById("in-id");
             var keys = getKeys(id.value);
-            var resp = document.getElementById("response");
-            resp.innerHTML = "";
+            var pTable = document.getElementById("pTable");
+            var pErr = document.getElementById("pErr");
             if(keys.hasOwnProperty('User')){
-                var HTML = "<table border=1 width=100%><tr>";
-                HTML += "<td align=left>User</td>";
-                HTML += "<td align=left><b>"+keys.User+"</b></td>";
-                HTML += "</tr><tr>"
-                HTML += "<td align=left>Admin</td>";
-                HTML += "<td align=left><b>"+keys.Admin+"</b></td>";
-                HTML += "</tr></table>";
-                resp.innerHTML = HTML;
+                var manager = document.getElementById("manager");
+                var service = document.getElementById("service");
+                manager.innerHTML = keys.User;
+                service.innerHTML = keys.Admin;
+                pTable.classList.remove("d-none");
+                pErr.classList.add("d-none");
             }else{
-                resp.innerHTML = keys.err
+                pErr.innerHTML = keys.err
+                pErr.classList.remove("d-none");
+                pTable.classList.add("d-none");
             }
-
-
-        }
\ No newline at end of file
+        }
+    script(src='/js/pGenerator.js')
\ No newline at end of file