diff --git a/Script_Speech_recognition/style.css b/Script_Speech_recognition/style.css
index 64a1ae1..61c0592 100644
--- a/Script_Speech_recognition/style.css
+++ b/Script_Speech_recognition/style.css
@@ -1,50 +1,56 @@
 /* Default Light Theme */
-body {
+html, body {
+    height: 100%; /* Ensure that the HTML and body elements span the full height of the viewport */
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden; /* Prevent horizontal scrolling but allow vertical scrolling */
     font-family: Arial, sans-serif;
     background-color: #f5f5f5;
     color: #333;
-    margin: 0;
-    padding: 0;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box; /* Make sure padding and borders are included in width/height */
 }
 
 h1 {
     text-align: center;
     color: #4285f4;
     font-size: 28px;
-    margin-top: 20px;
+    margin: 20px 0;
 }
 
+/* Full-width container taking half the height of the page */
 .container {
-    width: 100%; /* Make the container full width of the page */
-    padding: 20px 0; /* Add some padding to the top and bottom */
-    box-sizing: border-box; /* Include padding in width calculations */
-}
-
-.inner-container {
-    max-width: 1200px; /* Limit the width of the inner content */
-    margin: 0 auto; /* Center the inner container */
     display: flex;
     justify-content: center; /* Center the elements horizontally */
-    align-items: flex-start; /* Align items to the top */
+    align-items: center; /* Center items vertically */
+    width: 100%; /* Full width of the page */
+    padding: 20px; /* Add some padding for spacing */
     gap: 20px; /* Maintain a comfortable space between elements */
     flex-wrap: wrap; /* Allow wrapping for responsive layouts */
+    box-sizing: border-box; /* Include padding in width calculation */
 }
 
-.textarea-container,
-.video {
+.textarea-container {
+    position: relative; /* Needed for absolute positioning of child elements */
     width: 45%;
-    max-width: 600px; /* Increase max-width to allow larger video container */
-    min-width: 350px; /* Minimum width for smaller screens */
+    max-width: 600px;
+    min-width: 350px;
+    box-sizing: border-box; /* Include padding and borders in the element’s dimensions */
 }
 
+/* Styling for the buttons above the textarea */
 .translation-buttons {
     display: flex;
-    justify-content: center; /* Center buttons */
-    gap: 10px;
-    margin-bottom: 20px;
+    justify-content: center; /* Center the buttons horizontally */
+    gap: 10px; /* Space between the buttons */
+    margin-bottom: 15px; /* Space between buttons and textarea */
 }
 
-.translation-buttons button {
+#translateWordsBtn, #translateLettersBtn {
     padding: 10px 20px;
     font-size: 16px;
     background-color: #4285f4;
@@ -53,9 +59,10 @@ h1 {
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s ease;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Added shadow for consistency */
 }
 
-.translation-buttons button:hover {
+#translateWordsBtn:hover, #translateLettersBtn:hover {
     background-color: #357ae8;
 }
 
@@ -66,10 +73,6 @@ h1 {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-.textarea-container {
-    position: relative;
-}
-
 #inputText {
     width: 100%;
     height: 200px;
@@ -82,88 +85,54 @@ h1 {
     resize: none; /* Disable resizing */
     box-sizing: border-box; /* Ensure padding doesn't affect the width */
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    position: relative; /* Needed for buttons inside the textarea container */
 }
 
-#timerDisplay, #statusText {
-    text-align: center;
-    font-size: 18px;
-    color: #555;
-}
-
-#statusText {
-    color: #f44336;
-}
-
-/* Style for buttons */
-button {
-    padding: 10px 20px;
-    font-size: 16px;
+/* Microphone button inside textarea, positioned bottom-left */
+#startBtn {
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    padding: 8px;
+    font-size: 20px;
     background-color: #4285f4;
     color: white;
     border: none;
+    border-radius: 50%;
     cursor: pointer;
     transition: background-color 0.3s ease;
-    border-radius: 5px;
+    z-index: 5;
 }
 
-button:hover {
+#startBtn:hover {
     background-color: #357ae8;
 }
 
-button.dark-mode {
-    background-color: #333;
-    color: #fff;
+/* Translate button inside textarea, positioned bottom-right, increased size by half */
+#translateBtn {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    padding: 12px 25px; /* Increased padding to make button larger */
+    font-size: 18px; /* Increased font size */
+    background-color: #4285f4;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    z-index: 5;
 }
 
-/* Dark Mode */
-body.dark-mode {
-    background-color: #121212;
-    color: #e0e0e0;
-}
-
-h1.dark-mode {
-    color: #8ab4f8;
-}
-
-textarea.dark-mode {
-    background-color: #1e1e1e;
-    border-color: #333;
-    color: #e0e0e0;
-}
-
-textarea.dark-mode:focus {
-    border-color: #8ab4f8;
-}
-
-#startBtn.dark-mode {
-    background-color: #8ab4f8;
-    color: #121212;
-}
-
-#startBtn.dark-mode:hover {
-    background-color: #76a7f3;
-}
-
-#timerDisplay.dark-mode, #statusText.dark-mode {
-    color: #b0b0b0;
-}
-
-#statusText.dark-mode {
-    color: #cf6679;
-}
-
-.video.dark-mode {
-    background-color: #1e1e1e; /* Dark background for video container */
-    border: 2px solid #333; /* Dark border */
-}
-
-.video.dark-mode video {
-    background-color: #1e1e1e; /* Dark background for video */
+#translateBtn:hover {
+    background-color: #357ae8;
 }
 
 .video {
     position: relative;
-    max-height: 700px; /* Set a reasonable maximum height */
+    width: 45%;
+    max-width: 600px;
+    min-width: 350px;
     aspect-ratio: 16/9; /* Keep a responsive aspect ratio for the video */
     background-color: #ffffff;
     border: 12px solid #d4d4d4;
@@ -174,6 +143,7 @@ textarea.dark-mode:focus {
     align-items: center;
     justify-content: flex-start;
     transition: transform 0.3s ease;
+    box-sizing: border-box;
 }
 
 /* Styling for video element inside .video */
@@ -184,7 +154,7 @@ textarea.dark-mode:focus {
     object-fit: cover; /* Ensure the video fits its container */
 }
 
-/* Updated Navigation button styles */
+/* Navigation button styles */
 #prevBtn, #nextBtn {
     position: absolute;
     top: 50%;
@@ -194,8 +164,8 @@ textarea.dark-mode:focus {
     color: white;
     border: none;
     border-radius: 50%;
-    width: 50px;
-    height: 50px;
+    width: 50px; /* Increase button size */
+    height: 50px; /* Increase button size */
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -217,46 +187,6 @@ textarea.dark-mode:focus {
     right: -30px; /* Adjust button position for better appearance */
 }
 
-/* Style for the start button */
-#startBtn {
-    position: absolute;
-    left: 10px; /* Position it to the left inside the container */
-    bottom: 10px; /* Place it at the bottom */
-    padding: 10px;
-    font-size: 24px;
-    background-color: #4285f4;
-    color: white;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-/* Hover effect for start button */
-#startBtn:hover {
-    background-color: #357ae8;
-}
-
-/* Style for the translate button */
-#translateBtn {
-    position: absolute;
-    right: 10px; /* Position it to the right inside the container */
-    bottom: 10px; /* Place it at the bottom */
-    padding: 10px 20px;
-    font-size: 16px;
-    background-color: #4285f4;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-/* Hover effect for translate button */
-#translateBtn:hover {
-    background-color: #357ae8;
-}
-
 /* Style for the theme toggle button (icon) */
 #themeToggleBtn {
     position: fixed;
@@ -281,16 +211,102 @@ textarea.dark-mode:focus {
     margin: 0;
 }
 
+/* Dark Mode */
+body.dark-mode {
+    background-color: #121212;
+    color: #e0e0e0;
+}
+
+h1.dark-mode {
+    color: #8ab4f8;
+}
+
+textarea.dark-mode {
+    background-color: #1e1e1e;
+    border-color: #333;
+    color: #e0e0e0;
+}
+
+textarea.dark-mode:focus {
+    border-color: #8ab4f8;
+}
+
+#startBtn.dark-mode,
+#translateBtn.dark-mode,
+#translateWordsBtn.dark-mode,
+#translateLettersBtn.dark-mode,
+#prevBtn.dark-mode,
+#nextBtn.dark-mode {
+    background-color: #333;
+    color: #fff;
+}
+
+#startBtn.dark-mode:hover,
+#translateBtn.dark-mode:hover,
+#translateWordsBtn.dark-mode:hover,
+#translateLettersBtn.dark-mode:hover,
+#prevBtn.dark-mode:hover,
+#nextBtn.dark-mode:hover {
+    background-color: #555;
+}
+
+.video.dark-mode {
+    background-color: #1e1e1e;
+    border-color: #333;
+}
+
+#themeToggleBtn.dark-mode {
+    color: #e0e0e0;
+}
+
 /* Responsive layout adjustments */
 @media (max-width: 768px) {
     .container {
         flex-direction: column;
         align-items: center;
+        padding: 20px; /* Add padding for spacing on smaller screens */
+        gap: 15px; /* Reduce gap for smaller screens */
+        height: auto; /* Allow the height to adjust for mobile screens */
     }
 
     .textarea-container,
     .video {
-        width: 90%; /* Expand to take more space on smaller screens */
+        width: 100%; /* Full width for smaller screens */
         max-width: none;
     }
-}
\ No newline at end of file
+
+    #translateWordsBtn, #translateLettersBtn {
+        font-size: 14px; /* Reduce button font size for smaller screens */
+        padding: 8px 15px; /* Reduce button padding for smaller screens */
+    }
+
+    #inputText {
+        height: 150px; /* Reduce height for the text area */
+    }
+
+    #startBtn, #translateBtn {
+        font-size: 16px; /* Reduce button font size for smaller screens */
+        padding: 10px; /* Reduce button padding */
+    }
+
+    #prevBtn, #nextBtn {
+        width: 40px; /* Reduce button size for smaller screens */
+        height: 40px; /* Reduce button size for smaller screens */
+    }
+
+    #prevBtn {
+        left: -20px; /* Adjust button position for smaller screens */
+    }
+
+    #nextBtn {
+        right: -20px; /* Adjust button position for smaller screens */
+    }
+
+    h1 {
+        font-size: 24px; /* Decrease heading font size for mobile devices */
+    }
+
+    #themeToggleBtn {
+        font-size: 20px; /* Decrease theme toggle button size for mobile */
+    }
+}