src/components/SettingForms/Channel1-JSON/ChannelFields.tsx

@@ -234,7 +234,7 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
 
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
           >
             {isSubmitting ? "Saving..." : "Save Changes"}
           </button>

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -103,14 +103,14 @@ const NPEDFields = () => {
           {!state.npedUser?.propClientID?.value ? (
             <button
               type="submit"
-              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
             >
               {isSubmitting ? "Logging in..." : "Login"}
             </button>
           ) : (
             <button
               type="button"
-              className="w-1/4  border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
+              className="w-full md:w-1/4  border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
               onClick={handleLogoutClick}
             >
               Logout

src/components/SettingForms/NPED/NPEDHotlist.tsx

@@ -47,7 +47,7 @@ const NPEDHotlist = () => {
             />
             <button
               type="submit"
-              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
               // disabled={errors ? true : false}
             >
               Upload

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -139,7 +139,7 @@ const SoundSettingsFields = () => {
           </div>
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
           >
             Save Settings
           </button>

src/components/SettingForms/Sound/SoundUpload.tsx

@@ -96,7 +96,7 @@ const SoundUpload = () => {
           {errors.soundFile && <p className="text-red-500 text-sm mt-1">Not an mp3 file</p>}
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 mt-[5%]"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 mt-[5%]"
             disabled={errors.soundFile ? true : false}
           >
             Upload

src/components/SettingForms/System/SystemConfigFields.tsx

@@ -157,7 +157,7 @@ const SystemConfigFields = () => {
           </FormGroup>
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
             disabled={isSubmitting}
           >
             {saveSystemSettingsLoading ? "Saving..." : "Save System Settings"}

src/components/SettingForms/System/SystemFileUpload.tsx

@@ -52,7 +52,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
       </FormGroup>
       <button
         type="button"
-        className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
+        className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
         disabled={!selectedFile}
         onClick={handleFileUploadClick}
       >

src/components/SettingForms/WiFi&Modem/ModemSettings.tsx

@@ -125,7 +125,7 @@ const ModemSettings = () => {
             )}
             <button
               type="submit"
-              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
             >
               {isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
             </button>

src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx

@@ -90,7 +90,7 @@ const WiFiSettingsForm = () => {
           </FormGroup>
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
           >
             {isSubmitting || wifiMutation.isPending ? "Saving..." : " Save WiFi settings"}
           </button>

src/components/UI/Header.tsx

@@ -1,15 +1,26 @@
 import { Link } from "react-router";
 import Logo from "/MAV.svg";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGear, faHome, faListCheck, faMaximize, faMinimize, faRotate } from "@fortawesome/free-solid-svg-icons";
+import {
+  faBars,
+  faGear,
+  faHome,
+  faListCheck,
+  faMaximize,
+  faMinimize,
+  faRotate,
+} from "@fortawesome/free-solid-svg-icons";
 import { useState } from "react";
 import SoundBtn from "./SoundBtn";
 import { useIntegrationsContext } from "../../context/IntegrationsContext";
 
 export default function Header() {
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const { state } = useIntegrationsContext();
 
+  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
+
   const sessionStarted = state.sessionStarted;
 
   const sessionPaused = state.sessionPaused;
@@ -36,7 +47,7 @@ export default function Header() {
         </Link>
       </div>
       <div className="flex flex-col lg:flex-row items-center space-x-24 justify-items-center">
-        <div className="flex flex-row lg:flex-row space-x-2">
+        <div className="flex flex-row lg:flex-row space-x-2 mx-auto  p-2 md:p-0 items-center">
           {sessionStarted && sessionPaused ? (
             <p className="text-gray-400 font-bold">Session Paused</p>
           ) : (
@@ -44,7 +55,7 @@ export default function Header() {
           )}
         </div>
 
-        <div className="flex flex-row space-x-8">
+        <div className="flex flex-row space-x-6 md:space-x-8 items-center">
           <Link to={"/"}>
             <FontAwesomeIcon className="text-white" icon={faHome} size="2x" />
           </Link>
@@ -58,24 +69,11 @@ export default function Header() {
           <div onClick={refreshBrowser}>
             <FontAwesomeIcon icon={faRotate} size="2x" />
           </div>
-          <div className="flex">
-            <SoundBtn />
+          <SoundBtn />
+          <div className="md:hidden">
+            <FontAwesomeIcon icon={faBars} size="2x" onClick={toggleMenu} />
           </div>
 
-          <div className="md:hidden">
-            <ul className="flex flex-col">
-              <li>
-                <Link to={"/session-settings"}>
-                  <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
-                </Link>
-              </li>
-              <li>
-                <Link to={"/system-settings"}>
-                  <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
-                </Link>
-              </li>
-            </ul>
-          </div>
           <Link className="hidden md:flex" to={"/session-settings"}>
             <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
           </Link>
@@ -85,6 +83,22 @@ export default function Header() {
           </Link>
         </div>
       </div>
+      {isMenuOpen && (
+        <div className="md:hidden">
+          <ul className="flex flex-row gap-5">
+            <li onClick={() => setIsMenuOpen(false)}>
+              <Link to={"/session-settings"}>
+                <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
+              </Link>
+            </li>
+            <li onClick={() => setIsMenuOpen(false)}>
+              <Link to={"/system-settings"}>
+                <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
+              </Link>
+            </li>
+          </ul>
+        </div>
+      )}
     </div>
   );
 }