diff --git a/index.html b/index.html
index 68d9918..b4c0e24 100644
--- a/index.html
+++ b/index.html
@@ -1,57 +1,201 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Arduino Remote Web</title>
-    <link rel="stylesheet" href="style.css">
-</head>
+    <style>
+        /* Base styles and color scheme */
+        :root {
+            --bg-color: #2c3e50;
+            --btn-color: #ecf0f1;
+            --btn-hover-color: #bdc3c7;
+            --text-color: #34495e;
+            --highlight-color: #3498db;
+            --border-radius: 10px;
+            --box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+        }
 
+        /* Body and basic styling */
+        body {
+            background-color: var(--bg-color);
+            font-family: Arial, sans-serif;
+            color: var(--btn-color);
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+        }
+
+        .flex-container {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+
+        .flex-container-column {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            gap: 10px;
+        }
+
+        /* Button and div styling */
+        .flex-container>div,
+        .flex-container-column>div {
+            background-color: var(--btn-color);
+            color: var(--text-color);
+            border-radius: var(--border-radius);
+            padding: 20px;
+            font-size: 24px;
+            font-weight: bold;
+            text-align: center;
+            box-shadow: var(--box-shadow);
+            transition: transform 0.2s ease, background-color 0.3s ease;
+            cursor: pointer;
+            flex: 1;
+            /* Allow buttons to grow and fill available space */
+        }
+
+        /* Hover and active effects */
+        .flex-container>div:hover,
+        .flex-container-column>div:hover {
+            background-color: var(--btn-hover-color);
+            transform: scale(1.05);
+        }
+
+        .flex-container>div:active,
+        .flex-container-column>div:active {
+            transform: scale(0.95);
+            background-color: var(--highlight-color);
+            color: #fff;
+        }
+
+        /* Numpad specific styles */
+        #numpad {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            /* Reduced gap between rows in the numpad */
+        }
+
+        #numpad div {
+            display: flex;
+            /* Use flex for rows */
+            justify-content: center;
+            /* Center buttons horizontally */
+            gap: 10px;
+            /* Space between buttons */
+            flex-wrap: nowrap;
+            /* Prevent wrapping to keep buttons in one row */
+        }
+
+        /* Center the number-0 button */
+        #number-0 {
+            flex: 1;
+            /* Allow the button to grow and take full width */
+            display: flex;
+            justify-content: center;
+            /* Center horizontally */
+            align-items: center;
+            /* Center vertically */
+            height: 60px;
+            /* Increase height for better tap target */
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .flex-container {
+                flex-direction: column;
+            }
+
+            /* Ensure numpad rows remain horizontal on smaller screens */
+            #numpad div {
+                flex-direction: row;
+                /* Set row layout for numpad buttons */
+                justify-content: space-between;
+                /* Distribute space between buttons */
+            }
+        }
+
+        @media (max-width: 480px) {
+
+            .flex-container>div,
+            .flex-container-column>div {
+                font-size: 20px;
+                padding: 15px;
+            }
+
+            #numpad div {
+                font-size: 20px;
+                padding: 10px;
+            }
+
+            #number-0 {
+                height: 60px;
+                /* Keep a consistent height for the number 0 button */
+            }
+        }
+    </style>
+    <script type="application/javascript">
+        function sendButtonSignal(buttonCode) {
+          fetch('/sendSignal', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ code: buttonCode })  // Sending JSON data
+        })
+    }
+    </script>
+</head>
 <body>
     <div id="buttons" class="flex-container">
-        <div id="power">Power</div>
-        <div id="exit">Exit</div>
-        <div id="guide">Guide</div>
-        <div id="mute">Mute</div>
-        <div id="source">Source</div>
+        <div id="power" onclick="sendButtonSignal(0x15)">Power</div>
+        <div id="exit" onclick="sendButtonSignal(0x13)">Exit</div>
+        <div id="guide" onclick="sendButtonSignal(0x47)">Guide</div>
+        <div id="mute" onclick="sendButtonSignal(0x16)">Mute</div>
+        <div id="source" onclick="sendButtonSignal(0x12)">Source</div>
     </div>
-
     <div class="flex-container">
         <div id="volume" class="flex-container-column">
-            <div id="volume-up">Volume up</div>
-            <div id="volume-down">Volume down</div>
+            <div id="volume-up" onclick="sendButtonSignal(0x1B)">Volume up</div>
+            <div id="volume-down" onclick="sendButtonSignal(0x1A)">Volume down</div>
         </div>
         <div id="channel" class="flex-container-column">
-            <div id="channel-up">Channel up</div>
-            <div id="channel-down">Channel down</div>
+            <div id="channel-up" onclick="sendButtonSignal(0x19)">Channel up</div>
+            <div id="channel-down" onclick="sendButtonSignal(0x18)">Channel down</div>
         </div>
     </div>
-
     <div id="numpad">
         <div id="numpad-row-1" class="flex-container">
-            <div id="number-1">1</div>
-            <div id="number-2">2</div>
-            <div id="number-3">3</div>
+            <div id="number-1" onclick="sendButtonSignal(0x1)">1</div>
+            <div id="number-2" onclick="sendButtonSignal(0x2)">2</div>
+            <div id="number-3" onclick="sendButtonSignal(0x3)">3</div>
         </div>
         <div id="numpad-row-2" class="flex-container">
-            <div id="number-4">4</div>
-            <div id="number-5">5</div>
-            <div id="number-6">6</div>
+            <div id="number-4" onclick="sendButtonSignal(0x4)">4</div>
+            <div id="number-5" onclick="sendButtonSignal(0x5)">5</div>
+            <div id="number-6" onclick="sendButtonSignal(0x6)">6</div>
         </div>
         <div id="numpad-row-3" class="flex-container">
-            <div id="number-7">7</div>
-            <div id="number-8">8</div>
-            <div id="number-9">9</div>
+            <div id="number-7" onclick="sendButtonSignal(0x7)">7</div>
+            <div id="number-8" onclick="sendButtonSignal(0x8)">8</div>
+            <div id="number-9" onclick="sendButtonSignal(0x9)">9</div>
         </div>
         <div id="numpad-row-4" class="flex-container">
-            <div id="number-0">0</div>
+            <div id="number-0" onclick="sendButtonSignal(0x0)">0</div>
         </div>
     </div>
-
-    <div id="channel-input" class="flex-container">
-        <input id="channel-input-field" type="number" value="0" placeholder="Enter Channel" />
+    <div id="arrows" class="flex-container">
+      <div id="Up" onclick="sendButtonSignal(0xC)">Up</div>
+      <div id="Down" onclick="sendButtonSignal(0xD)">Down</div>
+      <div id="Left" onclick="sendButtonSignal(0xF)">Left</div>
+      <div id="Right" onclick="sendButtonSignal(0xE)">Right</div>
+      <div id="Enter" onclick="sendButtonSignal(0x10)">Enter</div>
     </div>
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
deleted file mode 100644
index e69de29..0000000
diff --git a/style.css b/style.css
deleted file mode 100644
index 3ef14c4..0000000
--- a/style.css
+++ /dev/null
@@ -1,177 +0,0 @@
-/* Base styles and color scheme */
-:root {
-    --bg-color: #2c3e50;
-    --btn-color: #ecf0f1;
-    --btn-hover-color: #bdc3c7;
-    --text-color: #34495e;
-    --highlight-color: #3498db;
-    --border-radius: 10px;
-    --box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-/* Body and basic styling */
-body {
-    background-color: var(--bg-color);
-    font-family: Arial, sans-serif;
-    color: var(--btn-color);
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-}
-
-.flex-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-bottom: 20px;
-}
-
-.flex-container-column {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 10px;
-}
-
-/* Button and div styling */
-.flex-container>div,
-.flex-container-column>div {
-    background-color: var(--btn-color);
-    color: var(--text-color);
-    border-radius: var(--border-radius);
-    padding: 20px;
-    font-size: 24px;
-    font-weight: bold;
-    text-align: center;
-    box-shadow: var(--box-shadow);
-    transition: transform 0.2s ease, background-color 0.3s ease;
-    cursor: pointer;
-    flex: 1;
-    /* Allow buttons to grow and fill available space */
-}
-
-/* Hover and active effects */
-.flex-container>div:hover,
-.flex-container-column>div:hover {
-    background-color: var(--btn-hover-color);
-    transform: scale(1.05);
-}
-
-.flex-container>div:active,
-.flex-container-column>div:active {
-    transform: scale(0.95);
-    background-color: var(--highlight-color);
-    color: #fff;
-}
-
-/* Input field styling */
-#channel-input input {
-    width: 100%;
-    max-width: 300px;
-    height: 50px;
-    font-size: 18px;
-    text-align: center;
-    border: none;
-    border-radius: var(--border-radius);
-    padding: 10px;
-    box-shadow: var(--box-shadow);
-    transition: box-shadow 0.3s ease;
-}
-
-#channel-input input:focus {
-    outline: none;
-    box-shadow: 0px 4px 12px rgba(0, 123, 255, 0.4);
-}
-
-/* Cross-browser compatibility for hiding spinner arrows */
-#channel-input input[type="number"] {
-    appearance: textfield;
-    /* Standard property */
-    -webkit-appearance: none;
-    /* WebKit browsers (Chrome, Safari, Edge) */
-    -moz-appearance: textfield;
-    /* Firefox */
-}
-
-/* Explicitly remove outer and inner spin buttons in WebKit browsers */
-#channel-input input[type="number"]::-webkit-outer-spin-button,
-#channel-input input[type="number"]::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-/* Numpad specific styles */
-#numpad {
-    display: flex;
-    flex-direction: column;
-    gap: 5px;
-    /* Reduced gap between rows in the numpad */
-}
-
-#numpad div {
-    display: flex;
-    /* Use flex for rows */
-    justify-content: center;
-    /* Center buttons horizontally */
-    gap: 10px;
-    /* Space between buttons */
-    flex-wrap: nowrap;
-    /* Prevent wrapping to keep buttons in one row */
-}
-
-/* Center the number-0 button */
-#number-0 {
-    flex: 1;
-    /* Allow the button to grow and take full width */
-    display: flex;
-    justify-content: center;
-    /* Center horizontally */
-    align-items: center;
-    /* Center vertically */
-    height: 60px;
-    /* Increase height for better tap target */
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .flex-container {
-        flex-direction: column;
-    }
-
-    /* Ensure numpad rows remain horizontal on smaller screens */
-    #numpad div {
-        flex-direction: row;
-        /* Set row layout for numpad buttons */
-        justify-content: space-between;
-        /* Distribute space between buttons */
-    }
-}
-
-@media (max-width: 480px) {
-
-    .flex-container>div,
-    .flex-container-column>div {
-        font-size: 20px;
-        padding: 15px;
-    }
-
-    #numpad div {
-        font-size: 20px;
-        padding: 10px;
-    }
-
-    #number-0 {
-        height: 60px;
-        /* Keep a consistent height for the number 0 button */
-    }
-
-    #channel-input input {
-        height: 40px;
-        font-size: 16px;
-    }
-}
\ No newline at end of file
