diff --git a/WebContentt/public/assets/js/app.js b/WebContentt/public/assets/js/app.js
index 9de4577..3d2e71e 100644
--- a/WebContentt/public/assets/js/app.js
+++ b/WebContentt/public/assets/js/app.js
@@ -104,6 +104,15 @@ function hangupClick(){
     });
 }
 
+function clearDialNumber(){
+    $('#dialNumber').val('');
+}
+
+function appendDialNumber(number){
+    console.log('Append number: '+number);
+    $('#dialNumber').val($('#dialNumber').val()+number);
+}
+
 function settingload(){
     console.log("Setting loaded");
     if (socket && socket.connected) {
diff --git a/WebContentt/public/index.html b/WebContentt/public/index.html
index 7ece44a..fd538dc 100644
--- a/WebContentt/public/index.html
+++ b/WebContentt/public/index.html
@@ -80,18 +80,40 @@
     </div>
     <div class="container">
         <div class="row">
-            <div class="col">
+            <div class="col-lg-1">
                 <p>Dial To</p>
             </div>
-            <div class="col"><input type="text" id="dialNumber" name="dialNumber"></div>
-            <div class="col">
+            <div class="col-lg-3"><input type="text" id="dialNumber" name="dialNumber"></div>
+            <div class="col-lg-6">
                 <div class="row">
-                    <div class="col"><button class="btn btn-primary btn-lg" id="dialButton" type="button">Dial</button></div>
-                    <div class="col"><button class="btn btn-primary btn-lg" id="hangupButton" type="button">Hangup</button></div>
+                    <div class="col-lg-6"><button class="btn btn-primary btn-lg" id="dialButton" type="button" onclick="dialClick()">Dial</button></div>
+                    <div class="col-lg-6"><button class="btn btn-primary btn-lg" id="hangupButton" type="button" onclick="hangupClick()">Hangup</button></div>
                 </div>
             </div>
         </div>
     </div>
+    <div class="container">
+        <div class="row">
+            <div class="col"><button class="btn btn-primary" type="button" onclick="appendDialNumber(1)">1</button></div>
+            <div class="col"><button class="btn btn-primary" type="button" onclick="appendDialNumber(2)">2</button></div>
+            <div class="col"><button class="btn btn-primary" type="button" onclick="appendDialNumber(3)">3</button></div>
+        </div>
+        <div class="row">
+            <div class="col"><button class="btn btn-primary" type="button" onclick="appendDialNumber(4)">4</button></div>
+            <div class="col"><button class="btn btn-primary" type="button" onclick="appendDialNumber(5)">5</button></div>
+            <div class="col"><button class="btn btn-primary" type="button" onclick="appendDialNumber(6)">6</button></div>
+        </div>
+        <div class="row">
+            <div class="col"><button class="btn btn-primary" type="button" onclick="appendDialNumber(7)">7</button></div>
+            <div class="col"><button class="btn btn-primary" type="button" onclick="appendDialNumber(8)">8</button></div>
+            <div class="col"><button class="btn btn-primary" type="button" onclick="appendDialNumber(9)">9</button></div>
+        </div>
+        <div class="row">
+            <div class="col"><button class="btn btn-primary" type="button" onclick="appendDialNumber(0)">0</button></div>
+            <div class="col"><button class="btn btn-primary" type="button" onclick="clearDialNumber()">clear</button></div>
+            <div class="col"></div>
+        </div>
+    </div>
     <script src="assets/bootstrap/js/bootstrap.min.js"></script>
     <script src="assets/js/jquery-3.7.1.js"></script>
     <script src="assets/js/socket.io.js"></script>
diff --git a/src/Webpage/WebServer.java b/src/Webpage/WebServer.java
index b92a785..438db04 100644
--- a/src/Webpage/WebServer.java
+++ b/src/Webpage/WebServer.java
@@ -65,11 +65,7 @@ public class WebServer {
             ctx.sessionAttribute("username", null);
             ctx.redirect("/login.html");
         });
-        app.before("/setting", ctx -> {
-            if (!Objects.equals(ctx.sessionAttribute("username"), webusername)){
-                ctx.redirect("/login.html");
-            }
-        });
+
         app.get("/setting", ctx -> {
             if (Objects.equals(ctx.sessionAttribute("username"), webusername)) {
                 AllSetting allSetting = new AllSetting(new LoginSetting(webusername, webpassword), new SipSetting(
@@ -91,11 +87,7 @@ public class WebServer {
                 ctx.redirect("/login.html");
             }
         });
-        app.before("/logindata", ctx -> {
-            if (!Objects.equals(ctx.sessionAttribute("username"), webusername)){
-                ctx.redirect("/login.html");
-            }
-        });
+
         app.post("/logindata", ctx -> {
             if (Objects.equals(ctx.sessionAttribute("username"), webusername)){
                 LoginSetting value = gson.fromJson(ctx.body(), LoginSetting.class);
@@ -116,11 +108,7 @@ public class WebServer {
 
             }
         });
-        app.before("/sipdata", ctx -> {
-            if (!Objects.equals(ctx.sessionAttribute("username"), webusername)){
-                ctx.redirect("/login.html");
-            }
-        });
+
         app.post("/sipdata", ctx -> {
             if (Objects.equals(ctx.sessionAttribute("username"), webusername)){
                 SipSetting value = gson.fromJson(ctx.body(), SipSetting.class);