diff --git a/src/pages/parking_areas/parking_areas.js b/src/pages/parking_areas/parking_areas.js
index badd565916563a537d69f11f12a4c4283682af8d..271b267b9abba9672bb5ebcaeb2f5361a3e3d40a 100644
--- a/src/pages/parking_areas/parking_areas.js
+++ b/src/pages/parking_areas/parking_areas.js
@@ -24,6 +24,11 @@ import {
   Heading,
   Grid,
   GridItem,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
 } from "@chakra-ui/react";
 
 const API_URL = "https://your-parking-areas-microservice-url.com";
@@ -31,6 +36,7 @@ const API_URL = "https://your-parking-areas-microservice-url.com";
 const ParkingAreasPage = () => {
   const authToken = ""; // Load from storage.
   const [postcode, setPostcode] = useState("");
+  const [radius, setRadius] = useState(1);
   const [parkingAreas, setParkingAreas] = useState([]);
   const [selectedParkingArea, setSelectedParkingArea] = useState(null);
   const [startTime, setStartTime] = useState("");
@@ -46,7 +52,7 @@ const ParkingAreasPage = () => {
   const handleSearchClick = async () => {
     try {
       // const response = await fetch(
-      //   `${API_URL}/parking-areas?postcode=${postcode}`
+      //   `${API_URL}/parking-areas?postcode=${postcode}&radius=${radius}`
       // );
       const data = [
         {
@@ -186,19 +192,43 @@ const ParkingAreasPage = () => {
       <Flex align={"center"} justify={"center"} bg={"gray.50"} minH={"92vh"}>
         <Box p={4}>
           <Center display={"flex"} flexDir={"column"} >
-          <Heading as="h1" mb={4}>
-            Find a Space
-          </Heading>
-          <Stack direction="row" spacing={4} mb={4} maxW={"50vw"}>
-            <Input
-              placeholder="Postcode"
-              value={postcode}
-              onChange={handlePostcodeChange}
-            />
-            <Button colorScheme="teal" onClick={handleSearchClick}>
-              Search
-            </Button>
-          </Stack>
+            <Heading as="h1" mb={4}>
+              Find a Space
+            </Heading>
+            <Stack direction="row" spacing={4} mb={4} maxW={"50vw"}>
+            <Stack direction="column" spacing={4} mb={4} maxW={"50vw"}>
+              <Input
+                placeholder="Postcode"
+                value={postcode}
+                onChange={handlePostcodeChange}
+              />
+              <Stack direction="row" mb={4} >
+              <Text my={2} >Radius (miles): </Text>
+              <NumberInput
+                value={radius}
+                onChange={(value) => {
+                  const intValue = parseInt(value);
+                  if (!isNaN(intValue) && intValue > 0) {
+                    setRadius(
+                      intValue
+                    );
+                  }
+                }
+                }
+              >
+                <NumberInputField />
+                <NumberInputStepper>
+                  <NumberIncrementStepper />
+                  <NumberDecrementStepper />
+                </NumberInputStepper>
+              </NumberInput>
+              </Stack>
+
+            </Stack>
+              <Button colorScheme="teal" onClick={handleSearchClick}>
+                Search
+              </Button>
+            </Stack>
           </Center>
           <Grid gap={6} templateColumns={['repeat(1, 1fr)', 'repeat(2, 1fr)', 'repeat(3, 1fr)', 'repeat(4, 1fr)',]}>
             {parkingAreas.map((parkingArea) => (