diff --git a/Html/html/index.html b/Html/html/index.html
index 834bd2a..773df51 100644
--- a/Html/html/index.html
+++ b/Html/html/index.html
@@ -30,11 +30,11 @@
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item pad-menu">
-                        <a class="nav-link" href="setting.html">Setting</a>
+                        <a class="nav-link nav-setting" href="setting.html">Setting</a>
                     </li>
                     <li class="nav-item pad-menu">
                         <form action="/logout" method="get">
-                            <button class="btn btn-outline-light" type="submit">Logout</button>
+                            <button class="btn btn-outline-light nav-logout" type="submit">Logout</button>
                         </form>
                     </li>
                 </ul>
@@ -108,7 +108,7 @@
                 <br>
                 <div class="row">
                     <div class="col-3 ">
-                        <p>Pan Speed</p>
+                        <p class="text-dash">Pan Speed</p>
                         <div class="btn-group-vertical">
                             <button id="pan1" class="btn btn-outline-dark btn-sm" value="16" onclick="set_pan_speed(16)">1</button>
                             <button id="pan2" class="btn btn-outline-dark btn-sm" value="32" onclick="set_pan_speed(32)">2</button>
@@ -156,7 +156,7 @@
                         </div>
                     </div>
                     <div class="col-3">
-                        <p>Tilt Speed</p>
+                        <p class="text-dash">Tilt Speed</p>
                         <div class="btn-group-vertical">
                             <button id="tilt1" class="btn btn-outline-dark btn-sm" value="16" onclick="set_tilt_speed(16)">1</button>
                             <button id="tilt2" class="btn btn-outline-dark btn-sm" value="32" onclick="set_tilt_speed(32)">2</button>
@@ -166,14 +166,14 @@
                     </div>
                 </div>
                 <div>
-                    <p class="text-center">Zoom</p>
+                    <p class="text-center text-dash">Zoom</p>
                     <div class="row">
                         <div class="col-10">
                             <input id="zoom" type="range" class="form-range" min="1" max="10909" oninput="this.nextElementSibling.value = this.value">
                             <output class="output"></output>
                         </div>
                         <div class="col-2">
-                            <button class="btn btn-primary" onclick="set_zoom()">SET</button>
+                            <button class="btn btn-primary" id="set_zoom" onclick="set_zoom()">SET</button>
                         </div>
                     </div>
                 </div>
@@ -250,7 +250,7 @@
                 </div>
                 <br>
                 <div>
-                    <label for="customRange" class="form-label">Volume</label>
+                    <label for="customRange" class="form-label text-dash">Volume</label>
                     <div class="row">
 
                         <div class="col-10 pad-bar">
@@ -276,7 +276,7 @@
 
 <!--   SECTION 3   -->
     <div class="container-fluid footer1 outside">
-        <p>2024 Copyright &copy; Galva Technologies. All rights reserved.</p>
+        <p class="footer">2024 Copyright &copy; Galva Technologies. All rights reserved.</p>
     </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/Html/html/public/style/style.css b/Html/html/public/style/style.css
index 3435585..8feb95b 100644
--- a/Html/html/public/style/style.css
+++ b/Html/html/public/style/style.css
@@ -833,7 +833,6 @@ input.checkbox{
     justify-content: center;
     gap: 10px;
 }
-
 /* Style the labels (Off and On) */
 
 .toggle-label {
@@ -910,4 +909,434 @@ select {
 }
 .padleft{
     padding-left: 3px;
-}
\ No newline at end of file
+}
+.nav-setting{
+    font-size: 1.2em;
+}
+.nav-logout{
+    font-size: 1.2em !important;
+}
+
+/*-------------------------------------SET RESPONSIVE -----------------*/
+@media (max-width: 900px) {
+    /*Pan Tilt Speed*/
+    button#tilt1,
+    button#tilt2,
+    button#tilt3,
+    button#tilt4,
+    button#pan1,
+    button#pan2,
+    button#pan3,
+    button#pan4{
+        padding: 0.75rem 1rem;
+        font-size: 1.2rem;
+        border-radius: .2rem;
+    }
+    /*End Pan Tilt Speed*/
+    /* ---- NAVIGATION ----- */
+    .btn-nav{
+        margin: 0;
+        font-size: 7em;
+        color: lightgray;
+    }
+    .btn-nav:hover{
+        color: white;
+    }
+    .btn-nav:active{
+        color: dodgerblue;
+    }
+    .btn-nav-center{
+        font-size: 3em;
+        top: -12px;
+        color: dodgerblue;
+    }
+    .btn-center-unactive{
+        font-size: 2em;
+        color: #434343;
+    }
+    .pad-img{
+        padding: 0;
+    }
+    .img-cctv{
+        box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
+        border-radius: 10px;
+        margin: 1.5em;
+    }
+    .btn-circle{
+        width: 13em;
+        height: 13em;
+        background-color: black;
+        align-items: center;
+        align-content: center;
+        margin: 5%;
+        border-radius: 50%;
+        box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
+    }
+    .pad-top{
+        margin-top: -17px;
+        margin-bottom: -10px;
+    }
+    .pad-left{
+        margin-top: -40px;
+        margin-right: -20px;
+    }
+    .pad-right{
+        margin-top: -40px;
+        margin-left: -20px;
+    }
+    .pad-bottom{
+        margin-top: -40px;
+    }
+
+    /* ---- END - NAVIGATION ----- */
+    /* Mute Button   */
+    .btn-mute{
+        text-decoration: none;
+        background-color: #f7f7f7;
+        background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
+        background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
+        background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
+        background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
+        background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
+        color: black;
+        width: 2.5em;
+        height: 2.5em;
+        padding: 0.2em;
+        position: relative;
+        text-align: center;
+        border-radius: 50%;
+        box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
+        border: solid 1px transparent;
+        font-size: 1.1em;
+    }
+    /* End Mute Button   */
+
+    .toggle-label {
+        font-size: 16px;
+        color: #555;
+        margin-bottom: 15px;
+        margin-right: 5px;
+        margin-left: 5px;
+        text-align: right;
+    }
+    /* Style the toggle switch (input) */
+    .toggle-switch {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 55px;
+        height: 30px;
+        background-color: #ccc;
+        border-radius: 25px;
+        position: relative;
+        transition: background-color 0.3s;
+        cursor: pointer;
+    }
+
+    /* Circle inside the switch */
+    .toggle-switch::before {
+        content: '';
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        width: 24px;
+        height: 24px;
+        background-color: white;
+        border-radius: 50%;
+        transition: transform 0.3s;
+    }
+    /* When checked (toggle to On), change background color and move the circle */
+    .toggle-switch:checked {
+        background-color: #0d6efd;
+    }
+    .toggle-switch:checked::before {
+        transform: translateX(25px);
+    }
+    .align-right{
+        text-align: right;
+    }
+    /* End Switch   */
+}
+
+@media (min-width: 900px) and (max-width: 1050px) {
+    #streaming_status{
+        text-align: left;
+        font-size: 1.8rem;
+    }
+    .padleft{
+        padding-left: 3px;
+        font-size: 1.8rem;
+    }
+    .icon-system{
+        margin-top: -13px;
+        font-size: 1.8rem;
+    }
+    button#tilt1,
+    button#tilt2,
+    button#tilt3,
+    button#tilt4,
+    button#pan1,
+    button#pan2,
+    button#pan3,
+    button#pan4{
+        padding: 0.75rem 1.5rem;
+        font-size: 2.5rem;
+        border-radius: .2rem;
+    }
+    .text-dash{
+        font-size: 1.8rem;
+    }
+    .text-status1{
+        color: black;
+        font-size: 3em;
+    }
+    /* ----- SWITCH ------ */
+    .toggle-label {
+        font-size: 1.8rem;
+        color: #555;
+        margin-bottom: 15px;
+        margin-right: 5px;
+        margin-left: 5px;
+        text-align: right;
+    }
+    /* Style the toggle switch (input) */
+    .toggle-switch {
+        -webkit-appearance: none;
+        appearance: none;
+        /*width: 50px;*/
+        /*height: 25px;*/
+        width: 75px;
+        height: 50px;
+        background-color: #ccc;
+        border-radius: 25px;
+        position: relative;
+        transition: background-color 0.3s;
+        cursor: pointer;
+    }
+    /* Circle inside the switch */
+    .toggle-switch::before {
+        content: '';
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        width: 44px;
+        height: 44px;
+        background-color: white;
+        border-radius: 50%;
+        transition: transform 0.3s;
+    }
+    /* When checked (toggle to On), change background color and move the circle */
+    .toggle-switch:checked {
+        background-color: #0d6efd;
+    }
+    .toggle-switch:checked::before {
+        transform: translateX(25px);
+    }
+    /*----- END SWITCH -----*/
+
+    /* --- Button CONTENT ---- */
+    .btn-play1{
+        text-decoration: none;
+        background-color: #f7f7f7;
+        background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
+        background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
+        background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
+        background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
+        background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
+        color: black;
+        /*width: 4.2em;*/
+        /*height: 4.2em;*/
+        width: 7em;
+        height: 7em;
+        position: relative;
+        text-align: center;
+        border-radius: 50%;
+        box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
+        border: solid 1px transparent;
+    }
+
+    .btn-play1:before {
+        content: "";
+        display: block;
+        background: #fff;
+        border-top: 2px solid #ddd;
+        position: absolute;
+        z-index: -1;
+        border-radius: 50%;
+        box-shadow: inset 0px 8px 48px #ddd;
+    }
+
+    .btn-play1:active {
+        box-shadow: 0px 3px 8px #aaa inset, 0px 2px 3px #fff;
+    }
+    .btn-play1:hover {
+        text-decoration: none;
+        /*color: #555;*/
+        color: black;
+        background: #f5f5f5;
+    }
+    .icon1{
+        margin: 27%;
+        font-size: 4.5em;
+        position:  absolute;
+        top: -9px;
+        left: -1px;
+        bottom: 0;
+        right: 0;
+        text-align: center;
+    }
+    .icon2{
+        margin: 27%;
+        font-size: 4.5em;
+        position:  absolute;
+        top: -9px;
+        left: 5px;
+        bottom: 0;
+        right: 0;
+        text-align: center;
+    }
+    /* --- END Button CONTENT ---- */
+
+    .btn-mute{
+        text-decoration: none;
+        background-color: #f7f7f7;
+        background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
+        background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
+        background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
+        background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
+        background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
+        color: black;
+        width: 2.2em;
+        height: 2.2em;
+        padding: 0.1em;
+        position: relative;
+        text-align: center;
+        border-radius: 50%;
+        box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
+        border: solid 1px transparent;
+        font-size: 2.2em;
+    }
+    /* ---- NAVIGATION ----- */
+    .btn-nav{
+        margin: 0;
+        font-size: 13em;
+        color: lightgray;
+    }
+    .btn-nav:hover{
+        color: white;
+    }
+    .btn-nav:active{
+        color: dodgerblue;
+    }
+    .btn-nav-center{
+        font-size: 5em;
+        top: -20px;
+        color: dodgerblue;
+    }
+    .btn-center-unactive{
+        font-size: 2em;
+        color: #434343;
+    }
+    .pad-img{
+        padding: 0;
+    }
+    .img-cctv{
+        box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
+        border-radius: 10px;
+        margin: 1.5em;
+    }
+    .btn-circle{
+        width: 20em;
+        height: 20em;
+        background-color: black;
+        align-items: center;
+        align-content: center;
+        margin: 5%;
+        border-radius: 70%;
+        box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
+    }
+    .pad-top{
+        margin-top: -40px;
+        margin-bottom: -45px;
+    }
+    .pad-left{
+        margin-top: -65px;
+        margin-right: -40px;
+    }
+    .pad-right{
+        margin-top: -65px;
+        margin-left: -40px;
+    }
+    .pad-bottom{
+        margin-top: -110px;
+    }
+    #set_zoom{
+        padding: .5rem 1rem;
+        font-size: 1.7rem;
+        border-radius: .3rem;
+    }
+    .footer{
+        font-size: 1.5em;
+    }
+    .p-title{
+        font-size: 3.5em !important;
+    }
+    .nav-setting{
+        font-size: 1.8em;
+        line-height: 2em;
+    }
+    .nav-logout{
+        font-size: 1.8em !important;
+    }
+    input[type="range"] {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 100%;
+        height: 20px;
+        background: #ddd;
+        border-radius: 10px;
+    }
+
+    input[type="range"]::-webkit-slider-runnable-track {
+        height: 20px;
+        background: #dddddd;
+        border-radius: 10px;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 30px;
+        height: 30px;
+        background: #0d6efd;
+        border-radius: 50%;
+        cursor: pointer;
+    }
+    .output{
+        padding-left: 20%;
+        font-size: 1.8em;
+    }
+    .text-setting{
+        font-size: 1.7em;
+    }
+    .text-input{
+        font-size: 0.9em !important;
+    }
+    #icon_confirm,
+    #icon_password,
+    #icon_camera{
+        font-size: 1.5em;
+    }
+    .btn-setting{
+        padding: .5rem 1rem !important;
+        font-size: 1.1rem !important;
+        border-radius: .3rem !important;
+    }
+    .setting-title{
+        font-size: 1.3em;
+    }
+    span.navbar-toggler-icon {
+        font-size: 1.8em;
+    }
+}
+
+
diff --git a/Html/html/setting.html b/Html/html/setting.html
index 4e5736d..04a54a7 100644
--- a/Html/html/setting.html
+++ b/Html/html/setting.html
@@ -28,11 +28,11 @@
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item pad-menu">
-                        <a class="nav-link" href="setting.html">Setting</a>
+                        <a class="nav-link nav-setting" href="setting.html">Setting</a>
                     </li>
                     <li class="nav-item pad-menu">
                         <form action="/logout" method="get">
-                            <button class="btn btn-outline-light" type="submit">Logout</button>
+                            <button class="btn btn-outline-light nav-logout" type="submit">Logout</button>
                         </form>
                     </li>
                 </ul>
@@ -46,7 +46,7 @@
         <div class="container">
             <div class="card card-shadow">
                 <div class="card-header bg-secondary text-light">
-                    <h5 class="text-md-center">Audio Files</h5>
+                    <h5 class="text-md-center setting-title">Audio Files</h5>
                 </div>
                 <div class="card-body bg-gray">
                     <!--            PRESET 1-->
@@ -55,7 +55,7 @@
                             <p>Preset 1</p>
                         </div>
                         <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
-                            <select id="preset1" class="form-control class100">
+                            <select id="preset1" class="form-control text-input class100">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                             </select>
@@ -67,7 +67,7 @@
                             <p>Preset 2</p>
                         </div>
                         <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
-                            <select id="preset2" class="form-control class100">
+                            <select id="preset2" class="form-control text-input class100">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                             </select>
@@ -79,7 +79,7 @@
                             <p>Preset 3</p>
                         </div>
                         <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
-                            <select id="preset3" class="form-control class100">
+                            <select id="preset3" class="form-control text-input class100">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                             </select>
@@ -91,7 +91,7 @@
                             <p>Preset 4</p>
                         </div>
                         <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
-                            <select id="preset4" class="form-control class100">
+                            <select id="preset4" class="form-control text-input class100">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                             </select>
@@ -103,7 +103,7 @@
                             <p>Preset 5</p>
                         </div>
                         <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
-                            <select id="preset5" class="form-control class100">
+                            <select id="preset5" class="form-control text-input class100">
                                 <option>Option 1</option>
                                 <option>Option 2</option>
                             </select>
@@ -112,7 +112,7 @@
                     <div class="row mt-2">
                         <div class="col-6"></div>
                         <div class="col-6">
-                            <button id="save_audio" class="btn btn-primary class100" onclick="save_audio()">SAVE</button>
+                            <button id="save_audio" class="btn btn-primary btn-setting class100" onclick="save_audio()">SAVE</button>
                         </div>
                     </div>
                 </div>
@@ -120,7 +120,7 @@
 
             <div class="card mt-5 card-shadow">
                 <div class="card-header bg-secondary text-light">
-                    <h5 class="text-center"> Upload Audio</h5>
+                    <h5 class="text-center setting-title"> Upload Audio</h5>
                 </div>
                 <div class="card-body bg-gray">
                     <form action="/setting/uploadaudiofile" method="post" enctype="multipart/form-data">
@@ -129,10 +129,10 @@
                                 <p> Upload audio files</p>
                             </div>
                             <div class="col-6 col-sm-6 col-md-4 col-lg-4 col-xl-4">
-                                <input class="form-control" type="file" name="file" required title="Select Audio File">
+                                <input class="form-control text-input" type="file" name="file" required title="Select Audio File">
                             </div>
                             <div class="col-6 col-sm-6 col-md-2 col-lg-2 col-xl-2">
-                                <button id="uploadd_file" type="submit" class="btn btn-dark class100">Upload</button>
+                                <button id="uploadd_file" type="submit" class="btn btn-setting btn-dark class100">Upload</button>
                             </div>
                         </div>
                     </form>
@@ -142,7 +142,7 @@
 
             <div class="card mt-5 card-shadow">
                 <div class="card-header bg-secondary text-light ">
-                    <h5 class="text-center">Camera</h5>
+                    <h5 class="text-center setting-title">Camera</h5>
                 </div>
                 <div class="card-body bg-gray">
                     <div class="row mt-2">
@@ -150,7 +150,7 @@
                             <p>IP Address</p>
                         </div>
                         <div class="col-6">
-                            <input id="setting_ip" name="ip" class="form-control" title="IP Address">
+                            <input id="setting_ip" name="ip" class="form-control text-input" title="IP Address">
                         </div>
                     </div>
                     <div class="row mt-2">
@@ -158,7 +158,7 @@
                             <p>Port</p>
                         </div>
                         <div class="col-6">
-                            <input id="setting_port" name="port" class="form-control" title="Port">
+                            <input id="setting_port" name="port" class="form-control text-input" title="Port">
                         </div>
                     </div>
 
@@ -167,7 +167,7 @@
                             <p>Username</p>
                         </div>
                         <div class="col-6">
-                            <input id="setting_username" name="username" class="form-control" title="Username">
+                            <input id="setting_username" name="username" class="form-control text-input" title="Username">
                         </div>
                     </div>
 
@@ -177,7 +177,7 @@
                         </div>
                         <div class="col-6">
                             <div class="input-group">
-                                <input type="password" id="setting_password" name="password" class="form-control" title="Password">
+                                <input type="password" id="setting_password" name="password" class="form-control text-input" title="Password">
                                 <span class="input-group-text" onclick="cameraPassword()">
                                         <i class="fa-solid fa-eye" id="icon_camera"></i>
                                     </span>
@@ -187,7 +187,7 @@
                     <div class="row mt-2">
                         <div class="col-6"></div>
                         <div class="col-6">
-                            <button id="save_camera" class="btn btn-primary class100" onclick="save_camera()">SAVE</button>
+                            <button id="save_camera" class="btn btn-primary btn-setting class100" onclick="save_camera()">SAVE</button>
                         </div>
                     </div>
                 </div>
@@ -195,7 +195,7 @@
 
             <div class="card mt-5 card-shadow">
                 <div class="card-header bg-secondary text-light">
-                    <h5 class="text-center">Login</h5>
+                    <h5 class="text-center setting-title">Login</h5>
                 </div>
                 <div class="card-body bg-gray">
                     <div class="row mt-2">
@@ -203,7 +203,7 @@
                             <p>Username</p>
                         </div>
                         <div class="col-6">
-                            <input id="login_username" class="form-control" title="Username">
+                            <input id="login_username" class="form-control text-input" title="Username">
                         </div>
                     </div>
                     <div class="row mt-2">
@@ -212,7 +212,7 @@
                         </div>
                         <div class="col-6">
                             <div class="input-group">
-                                <input type="password" id="edit_password" class="form-control" title="Password">
+                                <input type="password" id="edit_password" class="form-control text-input" title="Password">
                                 <span class="input-group-text" onclick="showPassword()">
                                         <i class="fa-solid fa-eye" id="icon_password"></i>
                                     </span>
@@ -225,7 +225,7 @@
                         </div>
                         <div class="col-6">
                             <div class="input-group">
-                                <input type="password" id="confirm_password" class="form-control" title="Confirm Password">
+                                <input type="password" id="confirm_password" class="form-control text-input" title="Confirm Password">
                                 <span class="input-group-text" onclick="showConfirm()">
                                         <i class="fa-solid fa-eye" id="icon_confirm"></i>
                                     </span>
@@ -235,7 +235,7 @@
                     <div class="row mt-2">
                         <div class="col-6"></div>
                         <div class="col-6">
-                            <button id="save_login" class="btn btn-primary class100" onclick="save_login()">SAVE</button>
+                            <button id="save_login" class="btn btn-primary btn-setting class100" onclick="save_login()">SAVE</button>
                         </div>
                     </div>
                 </div>
@@ -245,7 +245,7 @@
 
     <!--   SECTION 3   -->
     <div class="container-fluid footer1 outside">
-        <p>2024 Copyright &copy; Galva Technologies. All rights reserved.</p>
+        <p class="footer">2024 Copyright &copy; Galva Technologies. All rights reserved.</p>
     </div>
 </body>
 </html>
\ No newline at end of file