2025-12-09 14:09:07 +00:00
15 changed files with 187 additions and 79 deletions
--- a/src/features/cameras/components/CameraGrid.tsx
+++ b/src/features/cameras/components/CameraGrid.tsx
@@ -12,7 +12,7 @@ const CameraGrid = () => {

  return (
    <>
-      <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4 h-screen max-h-screen">
+      <div className="grid grid-cols-1 md:grid-cols-3 md:gap-4 p-4">
        <div className="col-span-2 flex flex-col gap-4">
          <div className="">
            <VideoFeedGridPainter />
--- a/src/features/cameras/components/CameraSettings/CameraSettings.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraSettings.tsx
@@ -19,7 +19,7 @@ const CameraSettings = ({
  setIsResetModalOpen,
 }: CameraSettingsProps) => {
  return (
-    <Card className="p-4 w-full h-full max-h-screen">
+    <Card className="p-4 w-full h-full ">
      <Tabs
        selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
        className="react-tabs"
--- a/src/features/cameras/components/CameraSettings/RegionSelector.tsx
+++ b/src/features/cameras/components/CameraSettings/RegionSelector.tsx
@@ -137,7 +137,7 @@ const RegionSelector = ({
  };

  return (
-    <div className="flex flex-col gap-4 max-h-[50%]">
+    <div className="flex flex-col gap-4 h-full overflow-y-auto mt-[5%]">
      <div className="flex flex-col md:flex-row gap-3">
        <div className="p-2 border border-gray-600 rounded-lg flex flex-col h-[10%] w-full">
          <h2 className="text-2xl mb-2">Tools</h2>
@@ -247,22 +247,25 @@ const RegionSelector = ({

      <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
        <h2 className="text-2xl mb-2">Actions</h2>
-        <div className="flex flex-col md:flex-row mx-auto gap-4 justify-center">
-          <button
-            onClick={handleSaveclick}
-            className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-full hover:bg-blue-700 hover:cursor-pointer"
-          >
-            Save Region
-          </button>
-          <button
-            onClick={handleResetRegion}
-            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
-          >
-            Reset Region
-          </button>
+        <div className="flex flex-col gap-4 justify-center">
+          <div className="grid grid-cols-2 gap-2">
+            <button
+              onClick={handleSaveclick}
+              className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full hover:bg-blue-700 hover:cursor-pointer"
+            >
+              Save Region
+            </button>
+            <button
+              onClick={handleResetRegion}
+              className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full hover:bg-red-700 hover:cursor-pointer"
+            >
+              Reset Region
+            </button>
+          </div>
+
          <button
            onClick={openResetModal}
-            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
+            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full hover:bg-red-700 hover:cursor-pointer"
          >
            Reset All
          </button>
--- a/src/features/cameras/components/CameraSettings/cameraControls/CameraControls.tsx
+++ b/src/features/cameras/components/CameraSettings/cameraControls/CameraControls.tsx
@@ -29,7 +29,7 @@ const CameraControls = ({ cameraFeedID }: CameraControlsProps) => {
  };

  return (
-    <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
+    <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full mt-[5%]">
      <h2 className="text-2xl mb-4">Camera {cameraFeedID}</h2>
      <div className="w-[70%] ">
        <label htmlFor="zoom">Zoom {zoomLevel} </label>
--- a/src/features/cameras/components/PlatePatch/SightingEntryTable.tsx
+++ b/src/features/cameras/components/PlatePatch/SightingEntryTable.tsx
@@ -12,8 +12,9 @@ const SightingEntryTable = () => {

  if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
  return (
-    <div className="border border-gray-600 rounded-lg  m-2">
-      <div className="overflow-y-auto ">
+    <div className="border border-gray-600 rounded-lg m-2">
+      {/* Desktop Table */}
+      <div className="hidden md:block overflow-y-auto">
        <table className="w-full text-left text-sm">
          <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
            <tr>
@@ -37,6 +38,35 @@ const SightingEntryTable = () => {
          </tbody>
        </table>
      </div>
+
+      {/* Mobile Cards */}
+      <div className="md:hidden overflow-y-auto space-y-3 p-3">
+        {readings?.map((reading: DecodeReading) => (
+          <div
+            key={reading?.id}
+            className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
+          >
+            <div className="flex justify-between items-start">
+              <span className="font-mono font-semibold text-blue-400 text-xl">{reading?.vrm}</span>
+              <span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Seen Count:</span>
+              <span className="text-gray-300 font-semibold">{reading?.seenCount}</span>
+            </div>
+            <div className="pt-2 border-t border-gray-700 space-y-1 text-xs">
+              <div className="flex justify-between">
+                <span className="text-gray-500">First Seen:</span>
+                <span className="text-gray-400">{reading?.firstSeenTimeHumane}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Last Seen:</span>
+                <span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
    </div>
  );
 };
--- a/src/features/cameras/components/PlatePatch/SightingExitTable.tsx
+++ b/src/features/cameras/components/PlatePatch/SightingExitTable.tsx
@@ -12,8 +12,9 @@ const SightingExitTable = () => {

  if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
  return (
-    <div className="border border-gray-600 rounded-lg overflow-hidden m-2">
-      <div className="overflow-y-auto ">
+    <div className="border border-gray-600 rounded-lg m-2">
+      {/* Desktop Table */}
+      <div className="hidden md:block overflow-y-auto">
        <table className="w-full text-left text-sm">
          <thead className="bg-gray-700/50 text-gray-200 sticky top-0">
            <tr>
@@ -37,6 +38,35 @@ const SightingExitTable = () => {
          </tbody>
        </table>
      </div>
+
+      {/* Mobile Cards */}
+      <div className="md:hidden overflow-y-auto space-y-3 p-3">
+        {readings?.map((reading: DecodeReading) => (
+          <div
+            key={reading?.id}
+            className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
+          >
+            <div className="flex justify-between items-start">
+              <span className="font-mono font-semibold text-red-400 text-xl">{reading?.vrm}</span>
+              <span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
+            </div>
+            <div className="flex justify-between text-sm">
+              <span className="text-gray-400">Seen Count:</span>
+              <span className="text-gray-300 font-semibold">{reading?.seenCount}</span>
+            </div>
+            <div className="pt-2 border-t border-gray-700 space-y-1 text-xs">
+              <div className="flex justify-between">
+                <span className="text-gray-500">First Seen:</span>
+                <span className="text-gray-400">{reading?.firstSeenTimeHumane}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Last Seen:</span>
+                <span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
    </div>
  );
 };
--- a/src/features/dashboard/components/statusGridItem/StatusGridItem.tsx
+++ b/src/features/dashboard/components/statusGridItem/StatusGridItem.tsx
@@ -21,7 +21,7 @@ const StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
  return (
    <>
      <div
-        className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241] hover:cursor-pointer"
+        className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241] hover:cursor-pointer"
        onClick={() => setIsOpen(true)}
      >
        <h3 className="text-lg flex flex-row items-center">
--- a/src/features/dashboard/components/systemHealth/SystemHealth.tsx
+++ b/src/features/dashboard/components/systemHealth/SystemHealth.tsx
@@ -39,11 +39,11 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
  }
  return (
    <div className="relative h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
-      <div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between">
-        <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
+      <div className="p-2 border-b border-gray-600 grid grid-cols-1 md:grid-cols-2 gap-2 justify-between">
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241]">
          <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
        </div>
-        <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
+        <div className="flex flex-col border border-gray-600 p-4 rounded-lg hover:bg-[#233241]">
          <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
        </div>
      </div>
--- a/src/features/output/components/BearerTypeFields.tsx
+++ b/src/features/output/components/BearerTypeFields.tsx
@@ -4,7 +4,7 @@ import type { FormTypes } from "../../../types/types";
 const BearerTypeFields = () => {
  useFormikContext<FormTypes>();
  return (
-    <div className="flex flex-row justify-between">
+    <div className="flex flex-col md:flex-row space-y-4  justify-between">
      <label htmlFor="format" className="text-xl">
        Format
      </label>
--- a/src/features/output/components/ChannelCard.tsx
+++ b/src/features/output/components/ChannelCard.tsx
@@ -10,7 +10,7 @@ const ChannelCard = () => {
  const { bearerQuery } = useGetBearerConfig(values?.format?.toLowerCase() || "json");
  const outputData = bearerQuery?.data;
  return (
-    <Card className="p-4 h-150 md:h-full">
+    <Card className="p-4 h-full">
      <CardHeader title={`Channel (${values?.format})`} />
      <ChannelFields
        errors={errors}
--- a/src/features/output/components/ChannelFields.tsx
+++ b/src/features/output/components/ChannelFields.tsx
@@ -52,7 +52,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
    <div className="flex flex-col gap-4 p-4">
      {values.format.toLowerCase() !== "ftp" ? (
        <>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="backoffice" className="block mb-2 font-medium">
              Back Office URL
            </label>
@@ -64,7 +64,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="username" className="block mb-2 font-medium">
              Username
            </label>
@@ -76,7 +76,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="password">Password</label>
            <Field
              name={"password"}
@@ -86,7 +86,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
            <Field
              name={"readTimeoutSeconds"}
@@ -96,7 +96,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
              className={`p-1.5 border border-gray-400  rounded-lg w-full md:w-60`}
            />
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
            <Field
              name={"connectTimeoutSeconds"}
@@ -105,7 +105,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
              className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
            />
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="overviewQuality">Overview quality and scale</label>
            <Field
              name={"overviewQuality"}
@@ -118,7 +118,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
              <option value={"LOW"}>Low</option>
            </Field>
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="cropSizeFactor">Crop Size Factor</label>
            <Field
              name={"cropSizeFactor"}
@@ -138,7 +138,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                <h2 className="font-bold">{values.format} Constants</h2>
              </div>

-              <div className="flex flex-row justify-between">
+              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                <label htmlFor="SCID">Source ID / Camera ID</label>
                <Field
                  name={"SCID"}
@@ -150,7 +150,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                  } rounded-lg w-full md:w-60`}
                />
              </div>
-              <div className="flex flex-row justify-between">
+              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                <label htmlFor="timestampSource">Timestamp Source</label>
                <Field
                  name={"timestampSource"}
@@ -162,7 +162,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                  <option value={"LOCAL"}>Local</option>
                </Field>
              </div>
-              <div className="flex flex-row justify-between">
+              <div className="flex flex-col md:flex-row space-y-4 justify-between">
                <label htmlFor="GPSFormat">GPS Format</label>
                <Field
                  name={"GPSFormat"}
@@ -182,7 +182,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                <div className="border-b border-gray-500 my-3">
                  <h2 className="font-bold">{values.format} Constants</h2>
                </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="FFID">Feed ID / Force ID</label>
                  <Field
                    name={"FFID"}
@@ -194,7 +194,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                    } rounded-lg w-full md:w-60`}
                  />
                </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="SCID">Source ID / Camera ID</label>
                  <Field
                    name={"SCID"}
@@ -206,7 +206,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                    } rounded-lg w-full md:w-60`}
                  />
                </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="timestampSource">Timestamp Source</label>
                  <Field
                    name={"timestampSource"}
@@ -218,7 +218,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                    <option value={"LOCAL"}>Local</option>
                  </Field>
                </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="GPSFormat">GPS Format</label>
                  <Field
                    name={"GPSFormat"}
@@ -235,7 +235,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                <div className="border-b border-gray-500 my-3">
                  <h2 className="font-bold">{values.format} Lane ID Config</h2>
                </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="LID1">Lane ID 1 (Camera A)</label>
                  <Field
                    name={"LID1"}
@@ -247,7 +247,7 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                    } rounded-lg w-full md:w-60`}
                  />
                </div>
-                <div className="flex flex-row justify-between">
+                <div className="flex flex-col md:flex-row space-y-4 justify-between">
                  <label htmlFor="LID2">Lane ID 2 (Camera B)</label>
                  <Field
                    name={"LID2"}
@@ -272,7 +272,10 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                  {values?.customFields?.map((_, index) => {
                    // if (!field.value) return null;
                    return (
-                      <div key={index} className="flex flex-row justify-between items-center mb-4 gap-2">
+                      <div
+                        key={index}
+                        className="flex flex-col md:flex-row space-y-4 md:space-y-0 justify-between items-center mb-4 gap-2"
+                      >
                        <Field
                          name={`customFields.${index}.label`}
                          className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
@@ -287,23 +290,25 @@ const ChannelFields = ({ errors, touched, values, outputData, onSetFieldValue }:
                      </div>
                    );
                  })}
-                  <button
-                    type="button"
-                    onClick={() => arrayHelpers.push({ label: "", value: "" })}
-                    className={`mr-2 border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
-                    disabled={values?.customFields && values?.customFields?.length >= 6}
-                  >
-                    Add Custom Field
-                  </button>
-                  {values?.customFields && values?.customFields?.length > 0 && (
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <button
                      type="button"
-                      onClick={() => arrayHelpers.pop()}
-                      className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                      onClick={() => arrayHelpers.push({ label: "", value: "" })}
+                      className={`border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer ${values?.customFields && values?.customFields?.length >= 6 ? "opacity-50 cursor-not-allowed" : ""}`}
+                      disabled={values?.customFields && values?.customFields?.length >= 6}
                    >
-                      Remove Custom Field
+                      Add Custom Field
                    </button>
-                  )}
+                    {values?.customFields && values?.customFields?.length > 0 && (
+                      <button
+                        type="button"
+                        onClick={() => arrayHelpers.pop()}
+                        className="border p-2 rounded-lg hover:bg-gray-700 hover:cursor-pointer"
+                      >
+                        Remove Custom Field
+                      </button>
+                    )}
+                  </div>
                </>
              )}
            </FieldArray>
--- a/src/features/output/components/OSDFields.tsx
+++ b/src/features/output/components/OSDFields.tsx
@@ -34,7 +34,7 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
              <OSDFieldToggle key={key} value={key} label={key.replace("include", "Include ")} />
            ))}
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="overlayPosition">Overlay Position</label>
            <Field
              as="select"
@@ -45,7 +45,7 @@ const OSDFields = ({ isOSDLoading }: OSDFieldsProps) => {
              <option value="Bottom">Bottom</option>
            </Field>
          </div>
-          <div className="flex flex-row justify-between">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="OSDTimestampFormat">OSD Timestamp Format</label>
            <Field
              as="select"
--- a/src/features/settings/components/SystemConfig.tsx
+++ b/src/features/settings/components/SystemConfig.tsx
@@ -65,8 +65,8 @@ const SystemConfig = () => {
  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
      {({ values }) => (
-        <Form>
-          <div className="flex flex-row justify-between items-center mb-4">
+        <Form className="flex flex-col space-y-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="deviceName">Device Name</label>
            <Field
              name="deviceName"
@@ -76,7 +76,7 @@ const SystemConfig = () => {
              autoComplete="off"
            />
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="timeZone">Timezone</label>
            <Field
              name="timeZone"
@@ -91,7 +91,7 @@ const SystemConfig = () => {
              ))}
            </Field>
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="timeSource">Time Source</label>
            <Field
              name="timeSource"
@@ -106,8 +106,7 @@ const SystemConfig = () => {
              ))}
            </Field>
          </div>
-
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="SNTPServer">SNTP Server</label>
            <Field
              name="SNTPServer"
@@ -117,7 +116,7 @@ const SystemConfig = () => {
              autoComplete="off"
            />
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="SNTPInterval">SNTP Interval</label>
            <Field
              name="SNTPInterval"
@@ -127,7 +126,7 @@ const SystemConfig = () => {
              autoComplete="off"
            />
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="subnetMask">Subnet Mask</label>
            <Field
              name="subnetMask"
@@ -137,7 +136,7 @@ const SystemConfig = () => {
              autoComplete="off"
            />
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="ipAddress">IP Address</label>
            <Field
              name="ipAddress"
@@ -147,7 +146,7 @@ const SystemConfig = () => {
              autoComplete="off"
            />
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="gateway">Gateway</label>
            <Field
              name="gateway"
@@ -157,7 +156,7 @@ const SystemConfig = () => {
              autoComplete="off"
            />
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="primaryServer">Primary DNS Server</label>
            <Field
              name="primaryServer"
@@ -167,7 +166,7 @@ const SystemConfig = () => {
              autoComplete="off"
            />
          </div>
-          <div className="flex flex-row justify-between items-center mb-4">
+          <div className="flex flex-col md:flex-row space-y-4 justify-between">
            <label htmlFor="secondaryServer">Secondary DNS Server</label>
            <Field
              name="secondaryServer"
--- a/src/ui/Header.tsx
+++ b/src/ui/Header.tsx
@@ -1,15 +1,29 @@
+import { useState } from "react";
 import { Link } from "@tanstack/react-router";
 import Logo from "/MAV.svg";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars } from "@fortawesome/free-solid-svg-icons";

 const Header = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
  return (
-    <header className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center">
-      <div className="w-28">
-        <Link to={"/"}>
-          <img src={Logo} alt="Logo" width={150} height={150} />
-        </Link>
+    <nav className="bg-[#253445] p-4 flex border-b border-gray-500 justify-between items-center md:flex-row flex-col">
+      <div className="flex flex-row justify-between w-full items-center">
+        <div className="w-28">
+          <Link to={"/"} onClick={() => setIsMenuOpen(false)}>
+            <img src={Logo} alt="Logo" width={150} height={150} />
+          </Link>
+        </div>
+
+        <div className="hover:cursor-pointer md:hidden" onClick={toggleMenu}>
+          <FontAwesomeIcon icon={faBars} />
+        </div>
      </div>
-      <div className="flex gap-4 text-lg items-center">
+
+      <div className="md:flex hidden gap-4 text-lg items-center">
        <Link
          to="/"
          className="[&.active]:font-bold [&.active]:bg-gray-700 p-2 rounded-lg flex items-center gap-2 hover:bg-gray-700"
@@ -37,7 +51,26 @@ const Header = () => {
          Settings
        </Link>
      </div>
-    </header>
+      {/* mobile menu */}
+      {isMenuOpen && (
+        <div className="md:hidden flex flex-col w-full mt-4 gap-4 text-lg items-end">
+          <Link to="/" className="" onClick={toggleMenu}>
+            {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
+            Dashboard
+          </Link>
+          <Link to="/baywatch" className="" onClick={toggleMenu}>
+            {/* <FontAwesomeIcon icon={faGaugeHigh} /> */}
+            Cameras
+          </Link>
+          <Link to="/output" className="" onClick={toggleMenu}>
+            Output
+          </Link>
+          <Link to="/settings" className="" onClick={toggleMenu}>
+            Settings
+          </Link>
+        </div>
+      )}
+    </nav>
  );
 };

--- a/src/ui/ModalComponent.tsx
+++ b/src/ui/ModalComponent.tsx
@@ -23,6 +23,14 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
        },
      }}
    >
+      <div className="flex justify-end">
+        <button
+          onClick={close}
+          className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg mb-4"
+        >
+          Close
+        </button>
+      </div>
      {children}
    </Modal>
  );