From c3c664bf79fc0eb4759fab3e5122d91d1cc361af Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Wed, 4 Dec 2024 13:39:46 -0800
Subject: [PATCH 01/12] Added Farm Information View

---
 .../components/appNav/NavButton/NavButton.tsx | 36 ++++++++++++
 .../appNav/NavButton/navButton.styles.ts      | 55 +++++++++++++++++++
 frontend/src/components/appNav/index.ts       |  3 +
 frontend/src/routes/ViewRouter.tsx            |  5 ++
 .../views/FarmInformation/FarmInformation.tsx | 16 ++++++
 .../FarmInformation/farmInformation.styles.ts |  0
 6 files changed, 115 insertions(+)
 create mode 100644 frontend/src/components/appNav/NavButton/NavButton.tsx
 create mode 100644 frontend/src/components/appNav/NavButton/navButton.styles.ts
 create mode 100644 frontend/src/components/appNav/index.ts
 create mode 100644 frontend/src/views/FarmInformation/FarmInformation.tsx
 create mode 100644 frontend/src/views/FarmInformation/farmInformation.styles.ts

diff --git a/frontend/src/components/appNav/NavButton/NavButton.tsx b/frontend/src/components/appNav/NavButton/NavButton.tsx
new file mode 100644
index 00000000..7464e624
--- /dev/null
+++ b/frontend/src/components/appNav/NavButton/NavButton.tsx
@@ -0,0 +1,36 @@
+/**
+ * @summary A reusable nav button component used for routing to different pages
+ * @param path - is the path the Link will route to
+ * @param text - is the text displayed on the button
+ * @param hex - HexValue for the Nav Button background
+ * @param icon - Image to place in Nav Container
+ * @type {(path: string, text: string, icon: string, hex: string)}
+ */
+import { Link } from 'react-router-dom';
+import { ButtonCont, ImageCont, TextCont, Image } from './navButton.styles';
+
+export type RoutingLinkProps = {
+  path: string;
+  text: string;
+  icon: string;
+  hex: string;
+};
+
+export default function NavButton({ path, text, icon, hex }: RoutingLinkProps) {
+  return (
+    <Link
+      to={path}
+      style={{ textDecoration: 'none' }}
+    >
+      <ButtonCont hex={hex}>
+        <ImageCont>
+          <Image
+            src={icon}
+            alt={text}
+          />
+        </ImageCont>
+        <TextCont>{text}</TextCont>
+      </ButtonCont>
+    </Link>
+  );
+}
diff --git a/frontend/src/components/appNav/NavButton/navButton.styles.ts b/frontend/src/components/appNav/NavButton/navButton.styles.ts
new file mode 100644
index 00000000..797c7796
--- /dev/null
+++ b/frontend/src/components/appNav/NavButton/navButton.styles.ts
@@ -0,0 +1,55 @@
+/**
+ * @summary Styling for RoutingLink component
+ */
+import styled from '@emotion/styled';
+
+type NavProps = {
+  hex: string;
+};
+
+export const ButtonCont = styled.div<NavProps>`
+  height: 75pt;
+  width: 220pt;
+  border-radius: 8pt;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: ${({ hex }) => hex || '#000'};
+  padding: 5pt;
+  display: flex;
+  &:hover {
+    transform: scale(0.95);
+  }
+`;
+
+export const ImageCont = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50pt;
+  height: 45pt;
+  border-radius: 8pt;
+  margin: 0 0 0 10pt;
+  padding: 0;
+`;
+
+export const TextCont = styled.div`
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  font-size: 16pt;
+  text-wrap: auto;
+  width: 100%;
+  height: 70pt;
+  color: black;
+  margin: 0;
+  padding: 0 0 0 1em;
+`;
+export const Image = styled.img`
+  height: 100%;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/frontend/src/components/appNav/index.ts b/frontend/src/components/appNav/index.ts
new file mode 100644
index 00000000..5c6c9b23
--- /dev/null
+++ b/frontend/src/components/appNav/index.ts
@@ -0,0 +1,3 @@
+import NavButton from './NavButton/NavButton';
+
+export default NavButton;
diff --git a/frontend/src/routes/ViewRouter.tsx b/frontend/src/routes/ViewRouter.tsx
index b50c146d..fca5fa9b 100644
--- a/frontend/src/routes/ViewRouter.tsx
+++ b/frontend/src/routes/ViewRouter.tsx
@@ -4,6 +4,7 @@
 import { Routes, Route } from 'react-router-dom';
 
 import LandingPage from '../views/LandingPage/LandingPage';
+import FarmInformation from '../views/FarmInformation/FarmInformation';
 
 export default function ViewRouter() {
   return (
@@ -12,6 +13,10 @@ export default function ViewRouter() {
         path="/"
         Component={LandingPage}
       />
+      <Route
+        path="/farm-information"
+        Component={FarmInformation}
+      />
     </Routes>
   );
 }
diff --git a/frontend/src/views/FarmInformation/FarmInformation.tsx b/frontend/src/views/FarmInformation/FarmInformation.tsx
new file mode 100644
index 00000000..ddf016ea
--- /dev/null
+++ b/frontend/src/views/FarmInformation/FarmInformation.tsx
@@ -0,0 +1,16 @@
+/**
+ * @summary The Farm Information page for the application
+ */
+
+export default function FarmInformation() {
+  return (
+    <div>
+      <h1>Farm Information</h1>
+      <p>
+        The Farm Information page is where you can enter information about your farm. This
+        information will be used in the Nutrient Management Calculator to provide you with the most
+        accurate recommendations for your crops.
+      </p>
+    </div>
+  );
+}
diff --git a/frontend/src/views/FarmInformation/farmInformation.styles.ts b/frontend/src/views/FarmInformation/farmInformation.styles.ts
new file mode 100644
index 00000000..e69de29b

From 3d6be963f020b8dafc92cb75c923ea48abc771e4 Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Wed, 4 Dec 2024 16:49:46 -0800
Subject: [PATCH 02/12] Added card

---
 .../components/appNav/NavButton/NavButton.tsx |  2 +-
 .../components/common/Header/header.styles.ts |  1 +
 .../views/FarmInformation/FarmInformation.tsx | 18 ++---
 .../FarmInformation/farmInformation.styles.ts | 69 +++++++++++++++++++
 .../src/views/LandingPage/LandingPage.tsx     |  9 +--
 5 files changed, 86 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/appNav/NavButton/NavButton.tsx b/frontend/src/components/appNav/NavButton/NavButton.tsx
index 7464e624..31a0f6f7 100644
--- a/frontend/src/components/appNav/NavButton/NavButton.tsx
+++ b/frontend/src/components/appNav/NavButton/NavButton.tsx
@@ -12,7 +12,7 @@ import { ButtonCont, ImageCont, TextCont, Image } from './navButton.styles';
 export type RoutingLinkProps = {
   path: string;
   text: string;
-  icon: string;
+  icon?: string;
   hex: string;
 };
 
diff --git a/frontend/src/components/common/Header/header.styles.ts b/frontend/src/components/common/Header/header.styles.ts
index 7f5a0c44..8e7cb915 100644
--- a/frontend/src/components/common/Header/header.styles.ts
+++ b/frontend/src/components/common/Header/header.styles.ts
@@ -41,6 +41,7 @@ export const Banner = styled.div`
   align-items: center;
   margin: 0;
 `;
+
 export const BannerRight = styled.div`
   min-width: 35pt;
   display: flex;
diff --git a/frontend/src/views/FarmInformation/FarmInformation.tsx b/frontend/src/views/FarmInformation/FarmInformation.tsx
index ddf016ea..e400b67f 100644
--- a/frontend/src/views/FarmInformation/FarmInformation.tsx
+++ b/frontend/src/views/FarmInformation/FarmInformation.tsx
@@ -1,16 +1,18 @@
 /**
  * @summary The Farm Information page for the application
  */
+import { ViewContainer, Card, CardHeader, Banner, Heading } from './farmInformation.styles';
 
 export default function FarmInformation() {
   return (
-    <div>
-      <h1>Farm Information</h1>
-      <p>
-        The Farm Information page is where you can enter information about your farm. This
-        information will be used in the Nutrient Management Calculator to provide you with the most
-        accurate recommendations for your crops.
-      </p>
-    </div>
+    <ViewContainer>
+      <Card>
+        <CardHeader>
+          <Banner>
+            <Heading>Farm Information</Heading>
+          </Banner>
+        </CardHeader>
+      </Card>
+    </ViewContainer>
   );
 }
diff --git a/frontend/src/views/FarmInformation/farmInformation.styles.ts b/frontend/src/views/FarmInformation/farmInformation.styles.ts
index e69de29b..fc3ad92b 100644
--- a/frontend/src/views/FarmInformation/farmInformation.styles.ts
+++ b/frontend/src/views/FarmInformation/farmInformation.styles.ts
@@ -0,0 +1,69 @@
+/**
+ * Styling for FarmInformation view
+ */
+import styled from '@emotion/styled';
+import screenSizes from '../../constants/screenSizes';
+
+export const ViewContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  height: 100svh;
+  justify-content: center;
+  width: 100%;
+  align-items: center;
+`;
+
+export const Card = styled.div`
+  background-color: rgba(255, 255, 255, 0.8);
+  height: 500px;
+  width: 1000px;
+  padding-top: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  object-fit: scale-down;
+  border-radius: 8px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  text-align: center;
+  position: relative;
+`;
+
+export const CardHeader = styled.div`
+  background-color: rgba(200, 200, 200, 0.3);
+  padding: 0;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 65px;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  @media (min-width: ${screenSizes.tablet}) {
+    justify-content: flex-start;
+    padding-left: 2em;
+  }
+  z-index: 2000;
+`;
+
+export const Banner = styled.div`
+  display: flex;
+  align-items: center;
+  margin: 0;
+`;
+
+export const Heading = styled.h2`
+  color: #494949;
+  font-size: 16pt;
+  font-weight: 500;
+  min-width: 150px;
+  display: contents;
+  text-decoration: none;
+`;
diff --git a/frontend/src/views/LandingPage/LandingPage.tsx b/frontend/src/views/LandingPage/LandingPage.tsx
index fb76b766..8a58051a 100644
--- a/frontend/src/views/LandingPage/LandingPage.tsx
+++ b/frontend/src/views/LandingPage/LandingPage.tsx
@@ -1,6 +1,7 @@
 /**
  * @summary The landing page for the application
  */
+import { useNavigate } from 'react-router-dom';
 import {
   ButtonWrapper,
   ViewContainer,
@@ -11,6 +12,8 @@ import {
 import { Button } from '../../components/common';
 
 export default function LandingPage() {
+  const navigate = useNavigate();
+
   const handleUpload = () => {
     const upload = document.getElementById('fileUp');
     if (upload) upload.click();
@@ -33,16 +36,14 @@ export default function LandingPage() {
         // The alert is temporary, will be removed once the data is being used
         // eslint-disable-next-line no-alert
         alert(data.toString());
+        navigate('/farm-information');
       }
     };
   };
 
   const newCalcHandler = () => {
     localStorage.clear();
-    console.log('New Calculation');
-    // The alert is temporary, will be removed once the data is being used
-    // eslint-disable-next-line no-alert
-    alert('New Calculation');
+    navigate('/farm-information');
   };
 
   return (

From e9fe6405691bbf4b0d9308298e8a05812bc10e05 Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Mon, 9 Dec 2024 13:01:00 -0800
Subject: [PATCH 03/12] Updated styling

---
 .../common/InputField/InputField.tsx          | 40 +++++++++++++++++++
 .../common/InputField/inputField.styles.ts    | 26 ++++++++++++
 frontend/src/components/common/index.ts       |  3 +-
 .../views/FarmInformation/FarmInformation.tsx | 36 ++++++++++++++++-
 .../FarmInformation/farmInformation.styles.ts |  6 +++
 5 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/common/InputField/InputField.tsx
 create mode 100644 frontend/src/components/common/InputField/inputField.styles.ts

diff --git a/frontend/src/components/common/InputField/InputField.tsx b/frontend/src/components/common/InputField/InputField.tsx
new file mode 100644
index 00000000..f13d53f9
--- /dev/null
+++ b/frontend/src/components/common/InputField/InputField.tsx
@@ -0,0 +1,40 @@
+/* eslint-disable react/function-component-definition */
+import React from 'react';
+import { InputWrapper, StyledLabel, StyledInput } from './inputField.styles';
+
+interface InputFieldProps {
+  label: string;
+  type: string;
+  name: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  width?: string;
+  flex?: string; // Add this line
+}
+
+const InputField: React.FC<InputFieldProps> = ({
+  label,
+  type,
+  name,
+  value,
+  onChange,
+  width,
+  flex,
+}) => (
+  <InputWrapper
+    style={{ width }}
+    flex={flex}
+  >
+    {' '}
+    {/* Update this line */}
+    <StyledLabel htmlFor={name}>{label}</StyledLabel>
+    <StyledInput
+      type={type}
+      name={name}
+      value={value}
+      onChange={onChange}
+    />
+  </InputWrapper>
+);
+
+export default InputField;
diff --git a/frontend/src/components/common/InputField/inputField.styles.ts b/frontend/src/components/common/InputField/inputField.styles.ts
new file mode 100644
index 00000000..8c085e0f
--- /dev/null
+++ b/frontend/src/components/common/InputField/inputField.styles.ts
@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+import * as tokens from '@bcgov/design-tokens/js';
+
+export const InputWrapper = styled.div<{ flex?: string }>`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+  flex: ${({ flex }) => flex || '1'};
+`;
+
+export const StyledLabel = styled.label`
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: ${tokens.typographyColorPrimary};
+`;
+
+export const StyledInput = styled.input`
+  padding: 8px;
+  font-size: 16px;
+  border: 1px solid #c8c8c8;
+  border-radius: 4px;
+  &:focus {
+    border-color: #c8c8c8;
+    outline: none;
+  }
+`;
diff --git a/frontend/src/components/common/index.ts b/frontend/src/components/common/index.ts
index bec1b29f..9c192dfa 100644
--- a/frontend/src/components/common/index.ts
+++ b/frontend/src/components/common/index.ts
@@ -1,5 +1,6 @@
 import Header from './Header/Header';
 import { Button } from './Button/Button';
 import Footer from './Footer/Footer';
+import InputField from './InputField/InputField';
 
-export { Header, Button, Footer };
+export { Header, Button, Footer, InputField };
diff --git a/frontend/src/views/FarmInformation/FarmInformation.tsx b/frontend/src/views/FarmInformation/FarmInformation.tsx
index e400b67f..8c91f232 100644
--- a/frontend/src/views/FarmInformation/FarmInformation.tsx
+++ b/frontend/src/views/FarmInformation/FarmInformation.tsx
@@ -1,9 +1,25 @@
 /**
  * @summary The Farm Information page for the application
  */
-import { ViewContainer, Card, CardHeader, Banner, Heading } from './farmInformation.styles';
+import React, { useState } from 'react';
+import {
+  ViewContainer,
+  Card,
+  CardHeader,
+  Banner,
+  Heading,
+  InputFieldsContainer,
+} from './farmInformation.styles';
+import InputField from '../../components/common/InputField/InputField';
 
 export default function FarmInformation() {
+  const [formData, setFormData] = useState({ year: '', farmName: '' });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
   return (
     <ViewContainer>
       <Card>
@@ -12,6 +28,24 @@ export default function FarmInformation() {
             <Heading>Farm Information</Heading>
           </Banner>
         </CardHeader>
+        <InputFieldsContainer>
+          <InputField
+            label="Year"
+            type="text"
+            name="year"
+            value={formData.year}
+            onChange={handleChange}
+            flex="1"
+          />
+          <InputField
+            label="Farm Name"
+            type="text"
+            name="farmName"
+            value={formData.farmName}
+            onChange={handleChange}
+            flex="2"
+          />
+        </InputFieldsContainer>
       </Card>
     </ViewContainer>
   );
diff --git a/frontend/src/views/FarmInformation/farmInformation.styles.ts b/frontend/src/views/FarmInformation/farmInformation.styles.ts
index fc3ad92b..46251985 100644
--- a/frontend/src/views/FarmInformation/farmInformation.styles.ts
+++ b/frontend/src/views/FarmInformation/farmInformation.styles.ts
@@ -67,3 +67,9 @@ export const Heading = styled.h2`
   display: contents;
   text-decoration: none;
 `;
+
+export const InputFieldsContainer = styled.div`
+  display: flex;
+  width: 100%;
+  gap: 16px;
+`;

From 0970f3b8c73d2bd564308958b5370ac0190b93fb Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Mon, 9 Dec 2024 13:04:41 -0800
Subject: [PATCH 04/12] Input fields styled

---
 .../common/InputField/InputField.tsx          | 41 +++++++------------
 .../common/InputField/inputField.styles.ts    |  1 +
 2 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/common/InputField/InputField.tsx b/frontend/src/components/common/InputField/InputField.tsx
index f13d53f9..2d2c3273 100644
--- a/frontend/src/components/common/InputField/InputField.tsx
+++ b/frontend/src/components/common/InputField/InputField.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/function-component-definition */
 import React from 'react';
 import { InputWrapper, StyledLabel, StyledInput } from './inputField.styles';
 
@@ -8,33 +7,21 @@ interface InputFieldProps {
   name: string;
   value: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  width?: string;
-  flex?: string; // Add this line
+  flex?: string;
 }
 
-const InputField: React.FC<InputFieldProps> = ({
-  label,
-  type,
-  name,
-  value,
-  onChange,
-  width,
-  flex,
-}) => (
-  <InputWrapper
-    style={{ width }}
-    flex={flex}
-  >
-    {' '}
-    {/* Update this line */}
-    <StyledLabel htmlFor={name}>{label}</StyledLabel>
-    <StyledInput
-      type={type}
-      name={name}
-      value={value}
-      onChange={onChange}
-    />
-  </InputWrapper>
-);
+function InputField({ label, type, name, value, onChange, flex }: InputFieldProps) {
+  return (
+    <InputWrapper flex={flex}>
+      <StyledLabel htmlFor={name}>{label}</StyledLabel>
+      <StyledInput
+        type={type}
+        name={name}
+        value={value}
+        onChange={onChange}
+      />
+    </InputWrapper>
+  );
+}
 
 export default InputField;
diff --git a/frontend/src/components/common/InputField/inputField.styles.ts b/frontend/src/components/common/InputField/inputField.styles.ts
index 8c085e0f..f298658f 100644
--- a/frontend/src/components/common/InputField/inputField.styles.ts
+++ b/frontend/src/components/common/InputField/inputField.styles.ts
@@ -12,6 +12,7 @@ export const StyledLabel = styled.label`
   margin-bottom: 8px;
   font-size: 14px;
   color: ${tokens.typographyColorPrimary};
+  text-align: left;
 `;
 
 export const StyledInput = styled.input`

From 15ef2ecfae5ae150d7a369468525564a2f19974e Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Mon, 9 Dec 2024 13:59:38 -0800
Subject: [PATCH 05/12] Added crop options

---
 .../components/common/Checkbox/Checkbox.tsx   | 28 ++++++++++
 .../common/Checkbox/checkbox.styles.ts        | 20 +++++++
 .../components/common/Footer/footer.styles.ts |  3 +-
 .../components/common/Header/header.styles.ts |  1 -
 .../common/InputField/InputField.tsx          |  3 ++
 .../common/InputField/inputField.styles.ts    |  3 ++
 .../common/RadioButton/RadioButton.tsx        | 28 ++++++++++
 .../common/RadioButton/radioButton.styles.ts  | 20 +++++++
 frontend/src/components/common/index.ts       |  4 +-
 .../views/FarmInformation/FarmInformation.tsx | 53 +++++++++++++++++--
 .../FarmInformation/farmInformation.styles.ts | 14 ++++-
 11 files changed, 166 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/common/Checkbox/Checkbox.tsx
 create mode 100644 frontend/src/components/common/Checkbox/checkbox.styles.ts
 create mode 100644 frontend/src/components/common/RadioButton/RadioButton.tsx
 create mode 100644 frontend/src/components/common/RadioButton/radioButton.styles.ts

diff --git a/frontend/src/components/common/Checkbox/Checkbox.tsx b/frontend/src/components/common/Checkbox/Checkbox.tsx
new file mode 100644
index 00000000..d6c45c6c
--- /dev/null
+++ b/frontend/src/components/common/Checkbox/Checkbox.tsx
@@ -0,0 +1,28 @@
+/**
+ * @summary Reusable Checkbox Component
+ */
+import React from 'react';
+import { CheckboxWrapper, StyledLabel, StyledInput } from './checkbox.styles';
+
+interface CheckboxProps {
+  label: string;
+  name: string;
+  checked: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+function Checkbox({ label, name, checked, onChange }: CheckboxProps) {
+  return (
+    <CheckboxWrapper>
+      <StyledInput
+        type="checkbox"
+        name={name}
+        checked={checked}
+        onChange={onChange}
+      />
+      <StyledLabel htmlFor={name}>{label}</StyledLabel>
+    </CheckboxWrapper>
+  );
+}
+
+export default Checkbox;
diff --git a/frontend/src/components/common/Checkbox/checkbox.styles.ts b/frontend/src/components/common/Checkbox/checkbox.styles.ts
new file mode 100644
index 00000000..13a1c521
--- /dev/null
+++ b/frontend/src/components/common/Checkbox/checkbox.styles.ts
@@ -0,0 +1,20 @@
+/**
+ * @summary Styles for reusable Checkbox component
+ */
+import styled from '@emotion/styled';
+import * as tokens from '@bcgov/design-tokens/js';
+
+export const CheckboxWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const StyledLabel = styled.label`
+  margin-left: 8px;
+  font-size: 14px;
+  color: ${tokens.typographyColorPrimary};
+`;
+
+export const StyledInput = styled.input`
+  accent-color: ${tokens.colorPrimary}; // Customize the checkbox color
+`;
diff --git a/frontend/src/components/common/Footer/footer.styles.ts b/frontend/src/components/common/Footer/footer.styles.ts
index 3be0bef9..23beb115 100644
--- a/frontend/src/components/common/Footer/footer.styles.ts
+++ b/frontend/src/components/common/Footer/footer.styles.ts
@@ -1,6 +1,5 @@
 /**
- * @summary Styles for reusable Header component
- * @author Dallas Richmond
+ * @summary Styles for reusable Footer component
  */
 import styled from '@emotion/styled';
 import screenSizes from '../../../constants/screenSizes';
diff --git a/frontend/src/components/common/Header/header.styles.ts b/frontend/src/components/common/Header/header.styles.ts
index 8e7cb915..e54f3331 100644
--- a/frontend/src/components/common/Header/header.styles.ts
+++ b/frontend/src/components/common/Header/header.styles.ts
@@ -1,6 +1,5 @@
 /**
  * @summary Styles for reusable Header component
- * @author Dallas Richmond
  */
 import styled from '@emotion/styled';
 import screenSizes from '../../../constants/screenSizes';
diff --git a/frontend/src/components/common/InputField/InputField.tsx b/frontend/src/components/common/InputField/InputField.tsx
index 2d2c3273..63c7c95f 100644
--- a/frontend/src/components/common/InputField/InputField.tsx
+++ b/frontend/src/components/common/InputField/InputField.tsx
@@ -1,3 +1,6 @@
+/**
+ * @summary Reusable Input Field Component
+ */
 import React from 'react';
 import { InputWrapper, StyledLabel, StyledInput } from './inputField.styles';
 
diff --git a/frontend/src/components/common/InputField/inputField.styles.ts b/frontend/src/components/common/InputField/inputField.styles.ts
index f298658f..c49f86c9 100644
--- a/frontend/src/components/common/InputField/inputField.styles.ts
+++ b/frontend/src/components/common/InputField/inputField.styles.ts
@@ -1,3 +1,6 @@
+/**
+ * @summary Styling for InputField component
+ */
 import styled from '@emotion/styled';
 import * as tokens from '@bcgov/design-tokens/js';
 
diff --git a/frontend/src/components/common/RadioButton/RadioButton.tsx b/frontend/src/components/common/RadioButton/RadioButton.tsx
new file mode 100644
index 00000000..f1ff4719
--- /dev/null
+++ b/frontend/src/components/common/RadioButton/RadioButton.tsx
@@ -0,0 +1,28 @@
+// frontend/src/components/common/RadioButton/RadioButton.tsx
+import React from 'react';
+import { RadioButtonWrapper, StyledLabel, StyledInput } from './radioButton.styles';
+
+interface RadioButtonProps {
+  label: string;
+  name: string;
+  value: string;
+  checked: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+function RadioButton({ label, name, value, checked, onChange }: RadioButtonProps) {
+  return (
+    <RadioButtonWrapper>
+      <StyledInput
+        type="radio"
+        name={name}
+        value={value}
+        checked={checked}
+        onChange={onChange}
+      />
+      <StyledLabel htmlFor={name}>{label}</StyledLabel>
+    </RadioButtonWrapper>
+  );
+}
+
+export default RadioButton;
diff --git a/frontend/src/components/common/RadioButton/radioButton.styles.ts b/frontend/src/components/common/RadioButton/radioButton.styles.ts
new file mode 100644
index 00000000..3b8ccc55
--- /dev/null
+++ b/frontend/src/components/common/RadioButton/radioButton.styles.ts
@@ -0,0 +1,20 @@
+/**
+ * @summary Styling for RadioButton component
+ */
+import styled from '@emotion/styled';
+import * as tokens from '@bcgov/design-tokens/js';
+
+export const RadioButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const StyledLabel = styled.label`
+  margin-left: 8px;
+  font-size: 14px;
+  color: ${tokens.typographyColorPrimary};
+`;
+
+export const StyledInput = styled.input`
+  accent-color: ${tokens.colorPrimary}; // Customize the radio button color
+`;
diff --git a/frontend/src/components/common/index.ts b/frontend/src/components/common/index.ts
index 9c192dfa..37e21712 100644
--- a/frontend/src/components/common/index.ts
+++ b/frontend/src/components/common/index.ts
@@ -2,5 +2,7 @@ import Header from './Header/Header';
 import { Button } from './Button/Button';
 import Footer from './Footer/Footer';
 import InputField from './InputField/InputField';
+import RadioButton from './RadioButton/RadioButton';
+import Checkbox from './Checkbox/Checkbox';
 
-export { Header, Button, Footer, InputField };
+export { Header, Button, Footer, InputField, RadioButton, Checkbox };
diff --git a/frontend/src/views/FarmInformation/FarmInformation.tsx b/frontend/src/views/FarmInformation/FarmInformation.tsx
index 8c91f232..859058a1 100644
--- a/frontend/src/views/FarmInformation/FarmInformation.tsx
+++ b/frontend/src/views/FarmInformation/FarmInformation.tsx
@@ -9,15 +9,24 @@ import {
   Banner,
   Heading,
   InputFieldsContainer,
+  RadioButtonsContainer,
 } from './farmInformation.styles';
 import InputField from '../../components/common/InputField/InputField';
+import RadioButton from '../../components/common/RadioButton/RadioButton';
+import Checkbox from '../../components/common/Checkbox/Checkbox';
 
 export default function FarmInformation() {
-  const [formData, setFormData] = useState({ year: '', farmName: '' });
+  const [formData, setFormData] = useState({
+    year: '',
+    farmName: '',
+    crops: '',
+    vegetables: false,
+    berries: false,
+  });
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setFormData({ ...formData, [name]: value });
+    const { name, value, type, checked } = e.target;
+    setFormData({ ...formData, [name]: type === 'checkbox' ? checked : value });
   };
 
   return (
@@ -35,7 +44,7 @@ export default function FarmInformation() {
             name="year"
             value={formData.year}
             onChange={handleChange}
-            flex="1"
+            flex="0.5"
           />
           <InputField
             label="Farm Name"
@@ -43,9 +52,43 @@ export default function FarmInformation() {
             name="farmName"
             value={formData.farmName}
             onChange={handleChange}
-            flex="2"
+            flex="1"
           />
         </InputFieldsContainer>
+        <RadioButtonsContainer>
+          <span style={{ marginRight: '8px' }}>I have crops</span>
+          <RadioButton
+            label="Yes"
+            name="crops"
+            value="yes"
+            checked={formData.crops === 'yes'}
+            onChange={handleChange}
+          />
+          <RadioButton
+            label="No"
+            name="crops"
+            value="no"
+            checked={formData.crops === 'no'}
+            onChange={handleChange}
+          />
+        </RadioButtonsContainer>
+        {formData.crops === 'yes' && (
+          <RadioButtonsContainer>
+            <span style={{ marginRight: '8px' }}>Select your crops:</span>
+            <Checkbox
+              label="Vegetables"
+              name="vegetables"
+              checked={formData.vegetables}
+              onChange={handleChange}
+            />
+            <Checkbox
+              label="Berries"
+              name="berries"
+              checked={formData.berries}
+              onChange={handleChange}
+            />
+          </RadioButtonsContainer>
+        )}
       </Card>
     </ViewContainer>
   );
diff --git a/frontend/src/views/FarmInformation/farmInformation.styles.ts b/frontend/src/views/FarmInformation/farmInformation.styles.ts
index 46251985..74539e43 100644
--- a/frontend/src/views/FarmInformation/farmInformation.styles.ts
+++ b/frontend/src/views/FarmInformation/farmInformation.styles.ts
@@ -1,5 +1,5 @@
 /**
- * Styling for FarmInformation view
+ * @summary Styling for FarmInformation view
  */
 import styled from '@emotion/styled';
 import screenSizes from '../../constants/screenSizes';
@@ -20,7 +20,7 @@ export const Card = styled.div`
   height: 500px;
   width: 1000px;
   padding-top: 0;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -72,4 +72,14 @@ export const InputFieldsContainer = styled.div`
   display: flex;
   width: 100%;
   gap: 16px;
+  margin-top: 100px;
+`;
+
+export const RadioButtonsContainer = styled.div`
+  display: flex;
+  gap: 16px;
+  margin-top: 16px;
+  width: 100%;
+  justify-content: flex-start;
+  align-items: center;
 `;

From 70dedccacf406768d9f97b76e5dc64854669b8d9 Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Mon, 9 Dec 2024 14:23:57 -0800
Subject: [PATCH 06/12] All fields styled accordingly

---
 .../components/common/DropDown/DropDown.tsx   | 38 +++++++++++++++++++
 .../common/DropDown/dropDown.styles.ts        | 30 +++++++++++++++
 .../views/FarmInformation/FarmInformation.tsx | 32 +++++++++++++---
 .../FarmInformation/farmInformation.styles.ts | 13 ++++++-
 4 files changed, 105 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/common/DropDown/DropDown.tsx
 create mode 100644 frontend/src/components/common/DropDown/dropDown.styles.ts

diff --git a/frontend/src/components/common/DropDown/DropDown.tsx b/frontend/src/components/common/DropDown/DropDown.tsx
new file mode 100644
index 00000000..8a96c224
--- /dev/null
+++ b/frontend/src/components/common/DropDown/DropDown.tsx
@@ -0,0 +1,38 @@
+/**
+ * @summary A reusable Dropdown component
+ */
+import React from 'react';
+import { DropdownWrapper, StyledLabel, StyledSelect } from './dropdown.styles';
+
+interface DropdownProps {
+  label: string;
+  name: string;
+  value: string;
+  options: { value: string; label: string }[];
+  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  flex?: string; // Add this line
+}
+
+function Dropdown({ label, name, value, options, onChange, flex }: DropdownProps) {
+  return (
+    <DropdownWrapper flex={flex}>
+      <StyledLabel htmlFor={name}>{label}</StyledLabel>
+      <StyledSelect
+        name={name}
+        value={value}
+        onChange={onChange}
+      >
+        {options.map((option) => (
+          <option
+            key={option.value}
+            value={option.value}
+          >
+            {option.label}
+          </option>
+        ))}
+      </StyledSelect>
+    </DropdownWrapper>
+  );
+}
+
+export default Dropdown;
diff --git a/frontend/src/components/common/DropDown/dropDown.styles.ts b/frontend/src/components/common/DropDown/dropDown.styles.ts
new file mode 100644
index 00000000..6b7db433
--- /dev/null
+++ b/frontend/src/components/common/DropDown/dropDown.styles.ts
@@ -0,0 +1,30 @@
+/**
+ * @summary Styling for Dropdown component
+ */
+import styled from '@emotion/styled';
+import * as tokens from '@bcgov/design-tokens/js';
+
+export const DropdownWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+  flex: ${({ flex }) => flex || '1'};
+`;
+
+export const StyledLabel = styled.label`
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: ${tokens.typographyColorPrimary};
+  text-align: left;
+`;
+
+export const StyledSelect = styled.select`
+  padding: 8px;
+  font-size: 16px;
+  border: 1px solid #c8c8c8;
+  border-radius: 4px;
+  &:focus {
+    border-color: #c8c8c8;
+    outline: none;
+  }
+`;
diff --git a/frontend/src/views/FarmInformation/FarmInformation.tsx b/frontend/src/views/FarmInformation/FarmInformation.tsx
index 859058a1..6e5924fe 100644
--- a/frontend/src/views/FarmInformation/FarmInformation.tsx
+++ b/frontend/src/views/FarmInformation/FarmInformation.tsx
@@ -9,11 +9,13 @@ import {
   Banner,
   Heading,
   InputFieldsContainer,
-  RadioButtonsContainer,
+  SelectorContainer,
+  RegionContainer,
 } from './farmInformation.styles';
 import InputField from '../../components/common/InputField/InputField';
 import RadioButton from '../../components/common/RadioButton/RadioButton';
 import Checkbox from '../../components/common/Checkbox/Checkbox';
+import Dropdown from '../../components/common/Dropdown/Dropdown';
 
 export default function FarmInformation() {
   const [formData, setFormData] = useState({
@@ -22,13 +24,21 @@ export default function FarmInformation() {
     crops: '',
     vegetables: false,
     berries: false,
+    region: '',
   });
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
     const { name, value, type, checked } = e.target;
     setFormData({ ...formData, [name]: type === 'checkbox' ? checked : value });
   };
 
+  const regionOptions = [
+    { value: '', label: 'Select a region' },
+    { value: 'bulkley-nechako', label: 'Bulkley-Nechako' },
+    { value: 'cariboo', label: 'Cariboo' },
+    { value: 'columbiaShuswap', label: 'Columbia Shuswap' },
+  ];
+
   return (
     <ViewContainer>
       <Card>
@@ -55,7 +65,17 @@ export default function FarmInformation() {
             flex="1"
           />
         </InputFieldsContainer>
-        <RadioButtonsContainer>
+        <RegionContainer>
+          <Dropdown
+            label="Region"
+            name="region"
+            value={formData.region}
+            options={regionOptions}
+            onChange={handleChange}
+            flex="0.35"
+          />
+        </RegionContainer>
+        <SelectorContainer>
           <span style={{ marginRight: '8px' }}>I have crops</span>
           <RadioButton
             label="Yes"
@@ -71,9 +91,9 @@ export default function FarmInformation() {
             checked={formData.crops === 'no'}
             onChange={handleChange}
           />
-        </RadioButtonsContainer>
+        </SelectorContainer>
         {formData.crops === 'yes' && (
-          <RadioButtonsContainer>
+          <SelectorContainer>
             <span style={{ marginRight: '8px' }}>Select your crops:</span>
             <Checkbox
               label="Vegetables"
@@ -87,7 +107,7 @@ export default function FarmInformation() {
               checked={formData.berries}
               onChange={handleChange}
             />
-          </RadioButtonsContainer>
+          </SelectorContainer>
         )}
       </Card>
     </ViewContainer>
diff --git a/frontend/src/views/FarmInformation/farmInformation.styles.ts b/frontend/src/views/FarmInformation/farmInformation.styles.ts
index 74539e43..bbeb3cd3 100644
--- a/frontend/src/views/FarmInformation/farmInformation.styles.ts
+++ b/frontend/src/views/FarmInformation/farmInformation.styles.ts
@@ -18,7 +18,7 @@ export const ViewContainer = styled.div`
 export const Card = styled.div`
   background-color: rgba(255, 255, 255, 0.8);
   height: 500px;
-  width: 1000px;
+  width: 600px;
   padding-top: 0;
   justify-content: flex-start;
   align-items: center;
@@ -75,7 +75,16 @@ export const InputFieldsContainer = styled.div`
   margin-top: 100px;
 `;
 
-export const RadioButtonsContainer = styled.div`
+export const RegionContainer = styled.div`
+  display: flex;
+  gap: 16px;
+  margin-top: 16px;
+  width: 100%;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+export const SelectorContainer = styled.div`
   display: flex;
   gap: 16px;
   margin-top: 16px;

From 36b13f65180d120635e3931f78e60219ded5fc65 Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Mon, 9 Dec 2024 14:56:25 -0800
Subject: [PATCH 07/12] Updated field values to match .nmp files

---
 frontend/src/components/common/index.ts       |  3 +-
 .../views/FarmInformation/FarmInformation.tsx | 51 +++++++++----------
 2 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/common/index.ts b/frontend/src/components/common/index.ts
index 37e21712..95314f45 100644
--- a/frontend/src/components/common/index.ts
+++ b/frontend/src/components/common/index.ts
@@ -4,5 +4,6 @@ import Footer from './Footer/Footer';
 import InputField from './InputField/InputField';
 import RadioButton from './RadioButton/RadioButton';
 import Checkbox from './Checkbox/Checkbox';
+import Dropdown from './Dropdown/Dropdown';
 
-export { Header, Button, Footer, InputField, RadioButton, Checkbox };
+export { Header, Button, Footer, InputField, RadioButton, Checkbox, Dropdown };
diff --git a/frontend/src/views/FarmInformation/FarmInformation.tsx b/frontend/src/views/FarmInformation/FarmInformation.tsx
index 6e5924fe..33ac8b60 100644
--- a/frontend/src/views/FarmInformation/FarmInformation.tsx
+++ b/frontend/src/views/FarmInformation/FarmInformation.tsx
@@ -12,19 +12,16 @@ import {
   SelectorContainer,
   RegionContainer,
 } from './farmInformation.styles';
-import InputField from '../../components/common/InputField/InputField';
-import RadioButton from '../../components/common/RadioButton/RadioButton';
-import Checkbox from '../../components/common/Checkbox/Checkbox';
-import Dropdown from '../../components/common/Dropdown/Dropdown';
+import { InputField, RadioButton, Checkbox, Dropdown } from '../../components/common';
 
 export default function FarmInformation() {
   const [formData, setFormData] = useState({
-    year: '',
-    farmName: '',
-    crops: '',
-    vegetables: false,
-    berries: false,
-    region: '',
+    Year: '',
+    FarmName: '',
+    FarmRegion: '',
+    Crops: 'false',
+    HasVegetables: false,
+    HasBerries: false,
   });
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
@@ -51,16 +48,16 @@ export default function FarmInformation() {
           <InputField
             label="Year"
             type="text"
-            name="year"
-            value={formData.year}
+            name="Year"
+            value={formData.Year}
             onChange={handleChange}
             flex="0.5"
           />
           <InputField
             label="Farm Name"
             type="text"
-            name="farmName"
-            value={formData.farmName}
+            name="FarmName"
+            value={formData.FarmName}
             onChange={handleChange}
             flex="1"
           />
@@ -68,8 +65,8 @@ export default function FarmInformation() {
         <RegionContainer>
           <Dropdown
             label="Region"
-            name="region"
-            value={formData.region}
+            name="FarmRegion"
+            value={formData.FarmRegion}
             options={regionOptions}
             onChange={handleChange}
             flex="0.35"
@@ -79,32 +76,32 @@ export default function FarmInformation() {
           <span style={{ marginRight: '8px' }}>I have crops</span>
           <RadioButton
             label="Yes"
-            name="crops"
-            value="yes"
-            checked={formData.crops === 'yes'}
+            name="Crops"
+            value="true"
+            checked={formData.Crops === 'true'}
             onChange={handleChange}
           />
           <RadioButton
             label="No"
-            name="crops"
-            value="no"
-            checked={formData.crops === 'no'}
+            name="Crops"
+            value="false"
+            checked={formData.Crops === 'false'}
             onChange={handleChange}
           />
         </SelectorContainer>
-        {formData.crops === 'yes' && (
+        {formData.Crops === 'true' && (
           <SelectorContainer>
             <span style={{ marginRight: '8px' }}>Select your crops:</span>
             <Checkbox
               label="Vegetables"
-              name="vegetables"
-              checked={formData.vegetables}
+              name="HasVegetables"
+              checked={formData.HasVegetables}
               onChange={handleChange}
             />
             <Checkbox
               label="Berries"
-              name="berries"
-              checked={formData.berries}
+              name="HasBerries"
+              checked={formData.HasBerries}
               onChange={handleChange}
             />
           </SelectorContainer>

From 256e7b418b13d990c26c23b3e89aec00b2fb62c7 Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Mon, 9 Dec 2024 15:03:49 -0800
Subject: [PATCH 08/12] Region options value updated

---
 frontend/src/views/FarmInformation/FarmInformation.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/FarmInformation/FarmInformation.tsx b/frontend/src/views/FarmInformation/FarmInformation.tsx
index 33ac8b60..debfc72a 100644
--- a/frontend/src/views/FarmInformation/FarmInformation.tsx
+++ b/frontend/src/views/FarmInformation/FarmInformation.tsx
@@ -30,10 +30,10 @@ export default function FarmInformation() {
   };
 
   const regionOptions = [
-    { value: '', label: 'Select a region' },
-    { value: 'bulkley-nechako', label: 'Bulkley-Nechako' },
-    { value: 'cariboo', label: 'Cariboo' },
-    { value: 'columbiaShuswap', label: 'Columbia Shuswap' },
+    { value: 0, label: 'Select a region' },
+    { value: 1, label: 'Bulkley-Nechako' },
+    { value: 2, label: 'Cariboo' },
+    { value: 3, label: 'Columbia Shuswap' },
   ];
 
   return (

From 6b581ff9a630523c261cb9435132cc548dbe848b Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Mon, 9 Dec 2024 15:18:34 -0800
Subject: [PATCH 09/12] Updated styles

---
 frontend/src/components/common/Checkbox/Checkbox.tsx        | 4 ++--
 frontend/src/components/common/Checkbox/checkbox.styles.ts  | 6 ------
 frontend/src/components/common/DropDown/dropDown.styles.ts  | 2 --
 .../src/components/common/InputField/inputField.styles.ts   | 2 --
 frontend/src/components/common/RadioButton/RadioButton.tsx  | 4 ++--
 .../src/components/common/RadioButton/radioButton.styles.ts | 6 ------
 6 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/common/Checkbox/Checkbox.tsx b/frontend/src/components/common/Checkbox/Checkbox.tsx
index d6c45c6c..8eef46b4 100644
--- a/frontend/src/components/common/Checkbox/Checkbox.tsx
+++ b/frontend/src/components/common/Checkbox/Checkbox.tsx
@@ -2,7 +2,7 @@
  * @summary Reusable Checkbox Component
  */
 import React from 'react';
-import { CheckboxWrapper, StyledLabel, StyledInput } from './checkbox.styles';
+import { CheckboxWrapper, StyledLabel } from './checkbox.styles';
 
 interface CheckboxProps {
   label: string;
@@ -14,7 +14,7 @@ interface CheckboxProps {
 function Checkbox({ label, name, checked, onChange }: CheckboxProps) {
   return (
     <CheckboxWrapper>
-      <StyledInput
+      <input
         type="checkbox"
         name={name}
         checked={checked}
diff --git a/frontend/src/components/common/Checkbox/checkbox.styles.ts b/frontend/src/components/common/Checkbox/checkbox.styles.ts
index 13a1c521..875e52ff 100644
--- a/frontend/src/components/common/Checkbox/checkbox.styles.ts
+++ b/frontend/src/components/common/Checkbox/checkbox.styles.ts
@@ -2,7 +2,6 @@
  * @summary Styles for reusable Checkbox component
  */
 import styled from '@emotion/styled';
-import * as tokens from '@bcgov/design-tokens/js';
 
 export const CheckboxWrapper = styled.div`
   display: flex;
@@ -12,9 +11,4 @@ export const CheckboxWrapper = styled.div`
 export const StyledLabel = styled.label`
   margin-left: 8px;
   font-size: 14px;
-  color: ${tokens.typographyColorPrimary};
-`;
-
-export const StyledInput = styled.input`
-  accent-color: ${tokens.colorPrimary}; // Customize the checkbox color
 `;
diff --git a/frontend/src/components/common/DropDown/dropDown.styles.ts b/frontend/src/components/common/DropDown/dropDown.styles.ts
index 6b7db433..c3042bdf 100644
--- a/frontend/src/components/common/DropDown/dropDown.styles.ts
+++ b/frontend/src/components/common/DropDown/dropDown.styles.ts
@@ -2,7 +2,6 @@
  * @summary Styling for Dropdown component
  */
 import styled from '@emotion/styled';
-import * as tokens from '@bcgov/design-tokens/js';
 
 export const DropdownWrapper = styled.div`
   display: flex;
@@ -14,7 +13,6 @@ export const DropdownWrapper = styled.div`
 export const StyledLabel = styled.label`
   margin-bottom: 8px;
   font-size: 14px;
-  color: ${tokens.typographyColorPrimary};
   text-align: left;
 `;
 
diff --git a/frontend/src/components/common/InputField/inputField.styles.ts b/frontend/src/components/common/InputField/inputField.styles.ts
index c49f86c9..fe86d0ca 100644
--- a/frontend/src/components/common/InputField/inputField.styles.ts
+++ b/frontend/src/components/common/InputField/inputField.styles.ts
@@ -2,7 +2,6 @@
  * @summary Styling for InputField component
  */
 import styled from '@emotion/styled';
-import * as tokens from '@bcgov/design-tokens/js';
 
 export const InputWrapper = styled.div<{ flex?: string }>`
   display: flex;
@@ -14,7 +13,6 @@ export const InputWrapper = styled.div<{ flex?: string }>`
 export const StyledLabel = styled.label`
   margin-bottom: 8px;
   font-size: 14px;
-  color: ${tokens.typographyColorPrimary};
   text-align: left;
 `;
 
diff --git a/frontend/src/components/common/RadioButton/RadioButton.tsx b/frontend/src/components/common/RadioButton/RadioButton.tsx
index f1ff4719..44867e8a 100644
--- a/frontend/src/components/common/RadioButton/RadioButton.tsx
+++ b/frontend/src/components/common/RadioButton/RadioButton.tsx
@@ -1,6 +1,6 @@
 // frontend/src/components/common/RadioButton/RadioButton.tsx
 import React from 'react';
-import { RadioButtonWrapper, StyledLabel, StyledInput } from './radioButton.styles';
+import { RadioButtonWrapper, StyledLabel } from './radioButton.styles';
 
 interface RadioButtonProps {
   label: string;
@@ -13,7 +13,7 @@ interface RadioButtonProps {
 function RadioButton({ label, name, value, checked, onChange }: RadioButtonProps) {
   return (
     <RadioButtonWrapper>
-      <StyledInput
+      <input
         type="radio"
         name={name}
         value={value}
diff --git a/frontend/src/components/common/RadioButton/radioButton.styles.ts b/frontend/src/components/common/RadioButton/radioButton.styles.ts
index 3b8ccc55..71d89a7a 100644
--- a/frontend/src/components/common/RadioButton/radioButton.styles.ts
+++ b/frontend/src/components/common/RadioButton/radioButton.styles.ts
@@ -2,7 +2,6 @@
  * @summary Styling for RadioButton component
  */
 import styled from '@emotion/styled';
-import * as tokens from '@bcgov/design-tokens/js';
 
 export const RadioButtonWrapper = styled.div`
   display: flex;
@@ -12,9 +11,4 @@ export const RadioButtonWrapper = styled.div`
 export const StyledLabel = styled.label`
   margin-left: 8px;
   font-size: 14px;
-  color: ${tokens.typographyColorPrimary};
-`;
-
-export const StyledInput = styled.input`
-  accent-color: ${tokens.colorPrimary}; // Customize the radio button color
 `;

From 104ad00f20bb0bc6f6d24d660ce8e7dd8a3a6be1 Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Mon, 9 Dec 2024 15:28:27 -0800
Subject: [PATCH 10/12] Style fix

---
 frontend/src/components/common/DropDown/dropDown.styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/common/DropDown/dropDown.styles.ts b/frontend/src/components/common/DropDown/dropDown.styles.ts
index c3042bdf..9d52a0dc 100644
--- a/frontend/src/components/common/DropDown/dropDown.styles.ts
+++ b/frontend/src/components/common/DropDown/dropDown.styles.ts
@@ -3,7 +3,7 @@
  */
 import styled from '@emotion/styled';
 
-export const DropdownWrapper = styled.div`
+export const DropdownWrapper = styled.div<{ flex?: string }>`
   display: flex;
   flex-direction: column;
   margin-bottom: 16px;

From 7439ea261bcab6366361b0c31ed13e2a3fd7c519 Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Mon, 9 Dec 2024 15:38:32 -0800
Subject: [PATCH 11/12] Fixed possible errors

---
 frontend/src/components/common/DropDown/DropDown.tsx   |  2 +-
 frontend/src/components/common/index.ts                |  2 +-
 frontend/src/views/FarmInformation/FarmInformation.tsx | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/common/DropDown/DropDown.tsx b/frontend/src/components/common/DropDown/DropDown.tsx
index 8a96c224..b84cc65c 100644
--- a/frontend/src/components/common/DropDown/DropDown.tsx
+++ b/frontend/src/components/common/DropDown/DropDown.tsx
@@ -2,7 +2,7 @@
  * @summary A reusable Dropdown component
  */
 import React from 'react';
-import { DropdownWrapper, StyledLabel, StyledSelect } from './dropdown.styles';
+import { DropdownWrapper, StyledLabel, StyledSelect } from './dropDown.styles';
 
 interface DropdownProps {
   label: string;
diff --git a/frontend/src/components/common/index.ts b/frontend/src/components/common/index.ts
index 95314f45..59ab5cce 100644
--- a/frontend/src/components/common/index.ts
+++ b/frontend/src/components/common/index.ts
@@ -4,6 +4,6 @@ import Footer from './Footer/Footer';
 import InputField from './InputField/InputField';
 import RadioButton from './RadioButton/RadioButton';
 import Checkbox from './Checkbox/Checkbox';
-import Dropdown from './Dropdown/Dropdown';
+import Dropdown from './DropDown/DropDown';
 
 export { Header, Button, Footer, InputField, RadioButton, Checkbox, Dropdown };
diff --git a/frontend/src/views/FarmInformation/FarmInformation.tsx b/frontend/src/views/FarmInformation/FarmInformation.tsx
index debfc72a..d6cae7e3 100644
--- a/frontend/src/views/FarmInformation/FarmInformation.tsx
+++ b/frontend/src/views/FarmInformation/FarmInformation.tsx
@@ -25,15 +25,15 @@ export default function FarmInformation() {
   });
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
-    const { name, value, type, checked } = e.target;
+    const { name, value, type, checked } = e.target as HTMLInputElement;
     setFormData({ ...formData, [name]: type === 'checkbox' ? checked : value });
   };
 
   const regionOptions = [
-    { value: 0, label: 'Select a region' },
-    { value: 1, label: 'Bulkley-Nechako' },
-    { value: 2, label: 'Cariboo' },
-    { value: 3, label: 'Columbia Shuswap' },
+    { value: '0', label: 'Select a region' },
+    { value: '1', label: 'Bulkley-Nechako' },
+    { value: '2', label: 'Cariboo' },
+    { value: '3', label: 'Columbia Shuswap' },
   ];
 
   return (

From c01b10e155b5fbfe04270ac5785543c068fadc4a Mon Sep 17 00:00:00 2001
From: Dallas Richmond <dallas.richmond@gov.bc.ca>
Date: Mon, 9 Dec 2024 15:45:53 -0800
Subject: [PATCH 12/12] Updated Comments

---
 frontend/src/components/common/DropDown/DropDown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/common/DropDown/DropDown.tsx b/frontend/src/components/common/DropDown/DropDown.tsx
index b84cc65c..c24c53fc 100644
--- a/frontend/src/components/common/DropDown/DropDown.tsx
+++ b/frontend/src/components/common/DropDown/DropDown.tsx
@@ -10,7 +10,7 @@ interface DropdownProps {
   value: string;
   options: { value: string; label: string }[];
   onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-  flex?: string; // Add this line
+  flex?: string;
 }
 
 function Dropdown({ label, name, value, options, onChange, flex }: DropdownProps) {