diff --git a/client/components/form/AddressInput.jsx b/client/components/form/AddressInput.jsx
new file mode 100644
index 0000000..47bb362
--- /dev/null
+++ b/client/components/form/AddressInput.jsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  FormControl,
+  FormHelperText,
+  InputLabel,
+  Input,
+  Container,
+  TextField,
+  MenuItem,
+  Stack,
+  Button,
+  Alert,
+} from "@mui/material";
+import CheckIcon from "@mui/icons-material/Check";
+
+export default function AddressInput() {
+  const [addresses, setAddresses] = useState([]);
+  const [providedAddress, setProvidedAddress] = useState({
+    hse_nbr: "",
+    hse_dir: "",
+    str_nm: "",
+    str_sfx: "",
+    zip_cd: "",
+  });
+  const [isAddressFound, setIsAddressFound] = useState(false);
+
+  const handleChange = (e) => {
+    setProvidedAddress({
+      ...providedAddress,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  async function fetchAddresses() {
+    try {
+      const response = await fetch(
+        `https://data.lacity.org/resource/4ca8-mxuh.json?hse_nbr=${providedAddress.hse_nbr}&hse_dir_cd=${providedAddress.hse_dir}&str_nm=${providedAddress.str_nm}&str_sfx_cd=${providedAddress.str_sfx}&zip_cd=${providedAddress.zip_cd}`
+      );
+      const data = await response.json();
+      setAddresses(data);
+      setIsAddressFound(true);
+    } catch (error) {
+      console.error("Error fetching addresses:", error);
+    }
+  }
+
+  return (
+    <FormControl>
+      <Container>
+        <Stack direction="row" spacing={2} padding={0}>
+          <TextField
+            id="hse_nbr"
+            name="hse_nbr"
+            label="House Number"
+            variant="outlined"
+            value={providedAddress.hse_nbr}
+            onChange={handleChange}
+          />
+          <TextField
+            id="hse_dir"
+            name="hse_dir"
+            select
+            label="Direction"
+            defaultValue=""
+            value={providedAddress.hse_dir}
+            helperText="if applicable"
+            onChange={handleChange}
+          >
+            <MenuItem value=""></MenuItem>
+            <MenuItem value="N">North</MenuItem>
+            <MenuItem value="E">East</MenuItem>
+            <MenuItem value="W">West</MenuItem>
+            <MenuItem value="S">South</MenuItem>
+          </TextField>
+          <TextField
+            id="str_nm"
+            name="str_nm"
+            label="Street Name"
+            variant="outlined"
+            value={providedAddress.str_nm}
+            onChange={handleChange}
+          />
+          <TextField
+            id="str_sfx"
+            name="str_sfx"
+            label="Suffix"
+            variant="outlined"
+            value={providedAddress.str_sfx}
+            onChange={handleChange}
+          />
+          <TextField
+            id="zip_cd"
+            label="Zip Code"
+            name="zip_cd"
+            variant="outlined"
+            value={providedAddress.zip_cd}
+            onChange={handleChange}
+          />
+        </Stack>
+        <Button variant="contained" onClick={fetchAddresses}>
+          Validate
+        </Button>
+        {isAddressFound ? (
+          <Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
+            Address verified
+          </Alert>
+        ) : (
+          <Alert severity="error">Address not found.</Alert>
+        )}
+      </Container>
+    </FormControl>
+  );
+}
diff --git a/client/components/form/Form.jsx b/client/components/form/Form.jsx
index 7bc38f5..9aef470 100644
--- a/client/components/form/Form.jsx
+++ b/client/components/form/Form.jsx
@@ -12,6 +12,7 @@ import {
   Snackbar,
 } from "@mui/material";
 import { Button } from "@mui/material";
+import AddressInput from "./AddressInput";
 import TimeRangeInput from "./TimeRangeInput";
 import { requestAppt } from "@/actions/form";
 
@@ -49,7 +50,7 @@ export default function Form() {
   const [lateTime, setLateTime] = useState(
     dayjs().hour(10).minute(0).second(0)
   );
-  const [address, setAddress] = useState("");
+  const [address, setAddress] = useState([]);
   // error state
   const [errorMsg, setErrorMsg] = useState("");
   const [errorPath, setErrorPath] = useState("");
@@ -164,22 +165,7 @@ export default function Form() {
           )}
         </FormControl>
 
-        <FormControl>
-          <InputLabel htmlFor="address">Address</InputLabel>
-          <Input
-            id="address"
-            aria-describedby="address-error-text"
-            value={address}
-            onChange={(event) => {
-              setAddress(event.currentTarget.value);
-            }}
-          />
-          {errorPath && errorPath === "address" && (
-            <FormHelperText id="address-error-text" error>
-              {errorMsg}
-            </FormHelperText>
-          )}
-        </FormControl>
+        <AddressInput />
 
         <TimeRangeInput
           earlyTime={earlyTime}
diff --git a/client/components/form/TimeRangeInput.jsx b/client/components/form/TimeRangeInput.jsx
index 8a567c3..13d6f29 100644
--- a/client/components/form/TimeRangeInput.jsx
+++ b/client/components/form/TimeRangeInput.jsx
@@ -1,12 +1,6 @@
 import { useState } from "react";
 import dayjs from "dayjs";
-import {
-  Box,
-  FormHelperText,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
+import { Box, FormHelperText, Stack, Typography } from "@mui/material";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { TimePicker } from "@mui/x-date-pickers/TimePicker";
diff --git a/client/package-lock.json b/client/package-lock.json
index 1abc9eb..c957b69 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -11,6 +11,7 @@
         "@emotion/cache": "^11.13.1",
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
+        "@mui/base": "^5.0.0-beta.61",
         "@mui/icons-material": "^6.1.7",
         "@mui/material": "^6.1.6",
         "@mui/material-nextjs": "^6.1.6",
@@ -372,6 +373,44 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
+      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
+      "license": "MIT"
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -849,6 +888,38 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.61",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.61.tgz",
+      "integrity": "sha512-YaMOTXS3ecDNGsPKa6UdlJ8loFLvcL9+VbpCK3hfk71OaNauZRp4Yf7KeXDYr7Ms3M/XBD3SaiR6JMr6vYtfDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@floating-ui/react-dom": "^2.1.1",
+        "@mui/types": "^7.2.19",
+        "@mui/utils": "^6.1.6",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "6.1.7",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.7.tgz",
diff --git a/client/package.json b/client/package.json
index 465ca18..179fc68 100644
--- a/client/package.json
+++ b/client/package.json
@@ -12,6 +12,7 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@mui/base": "^5.0.0-beta.61",
     "@mui/icons-material": "^6.1.7",
     "@mui/material": "^6.1.6",
     "@mui/material-nextjs": "^6.1.6",