diff --git a/ui/package.json b/ui/package.json
index 3d92dd95..0aaed138 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -14,7 +14,9 @@
   },
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "camaro": "^6.2.2",
@@ -27,15 +29,19 @@
     "react": "^18",
     "react-dom": "^18",
     "react-idle-timer": "^5.7.2",
+    "react-hook-form": "^7.50.1",
+    "react-router-dom": "^6.22.1",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "uniqid": "^5.4.0"
+    "uniqid": "^5.4.0",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^1.6.1",
     "@swc/core": "^1.3.106",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.11",
     "@types/node": "^20",
     "@types/react": "^18",
diff --git a/ui/src/app/feedback/components/FeedbackForm.tsx b/ui/src/app/feedback/components/FeedbackForm.tsx
new file mode 100644
index 00000000..286d7230
--- /dev/null
+++ b/ui/src/app/feedback/components/FeedbackForm.tsx
@@ -0,0 +1,131 @@
+'use client'
+import React from 'react';
+import {Input} from '@/components/ui/input';
+import {Button} from '@/components/ui/button'
+import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage,} from '@/components/ui/form'
+import {z} from 'zod'
+import {zodResolver} from '@hookform/resolvers/zod'
+import {useForm} from 'react-hook-form'
+import {EmailResult, Feedback, sendFeedback} from '@/services/EmailService';
+
+const FeedbackForm = ({ currUser, setShowSuccessAlert, setShowErrorAlert } :
+{ currUser:string, setShowSuccessAlert:React.Dispatch<React.SetStateAction<boolean>>,
+    setShowErrorAlert:React.Dispatch<React.SetStateAction<boolean>> }) => {
+
+    const formSchema = z.object({
+        type: z.string(),
+        name: z.optional(z.string()),
+        email: z.string().email(),
+        message: z.string().min(15),
+    })
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            type: 'General',
+            email: currUser + '@hawaii.edu'
+        }
+    });
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        const input: Feedback = {
+            type: values.type,
+            name: values.name,
+            email: values.email,
+            message: values.message,
+            exceptionMessage: 'test exception message'
+        };
+        const results = await sendFeedback(input);
+        const emailResult: EmailResult = {
+            resultCode: results.resultCode,
+            recipient: results.recipient,
+            from: results.from,
+            subject: results.subject,
+            text: results.text
+        };
+
+        (emailResult.resultCode == 'SUCCESS') ? setShowSuccessAlert(true) : setShowErrorAlert(true);
+
+        if (emailResult.resultCode == 'SUCCESS') {
+            setShowSuccessAlert(true);
+        } else {
+            setShowErrorAlert(true);
+        }
+
+        //will break without curly braces
+        form.reset({});
+    }
+
+    return (
+        <Form {...form}>
+            <>
+                <div className='col-span-7 pl-5 pt-5'>
+                    <form id='feedbackForm' onSubmit={form.handleSubmit(onSubmit)} className='space-y-8'>
+                        <FormField control={form.control} name='type'
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel htmlFor='type' className='text-base'>Feedback Type:
+                                        <span className='text-red-500'>*</span></FormLabel>
+                                    <FormControl>
+                                        <select id='type'
+                                            className='w-full px-3 py-1 border
+                                                border-gray-300 rounded-md focus:accent-blue-500
+                                                focus:border-blue-500' {...field}>
+                                            <option value='General' defaultValue='true'>General</option>
+                                            <option value='Problem'>Problem</option>
+                                            <option value='Feature'>Feature</option>
+                                            <option value='Question'>Question</option>
+                                        </select>
+                                    </FormControl>
+                                </FormItem>
+                            )}
+                        />
+                        <FormField control={form.control} name='name'
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel htmlFor='name' className='text-base'>Your Name (Optional):</FormLabel>
+                                    <FormControl>
+                                        <Input id='name' className='text-base' placeholder='John Doe' {...field} />
+                                    </FormControl>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
+                        <FormField control={form.control} name='email'
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel htmlFor='email' className='text-base'>Email Address:
+                                        <span className='text-red-500'>*</span></FormLabel>
+                                    <FormControl>
+                                        <Input id='email' className='text-base'
+                                            placeholder='Enter your email here' {...field} />
+                                    </FormControl>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
+                        <FormField control={form.control} name='message'
+                            render={({field}) => (
+                                <FormItem>
+                                    <FormLabel htmlFor='message' className='text-base'>Your Feedback:
+                                        <span className='text-red-500'>*</span></FormLabel>
+                                    <FormControl>
+                                        <textarea id='message' className='w-full px-3 py-1 border
+                                          border-gray-300 rounded-md' rows={6} {...field} />
+                                    </FormControl>
+                                    <FormMessage/>
+                                </FormItem>
+                            )}
+                        />
+                        <Button className='text-white bg-uh-teal hover:bg-green-blue focus:ring-4
+                        focus:ring-blue-300 rounded-md text-base dark:bg-blue-600
+                        dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 shadow-2xl'
+                        type='submit'>Submit</Button>
+                    </form>
+                </div>
+            </>
+        </Form>
+    )
+}
+
+export default FeedbackForm;
diff --git a/ui/src/app/feedback/page.tsx b/ui/src/app/feedback/page.tsx
new file mode 100644
index 00000000..3c70db0c
--- /dev/null
+++ b/ui/src/app/feedback/page.tsx
@@ -0,0 +1,43 @@
+'use client'
+import React, {useState} from 'react';
+import ErrorAlert from '@/components/layout/alerts/ErrorAlert';
+import SuccessAlert from '@/components/layout/alerts/SuccessAlert';
+import FeedbackForm from '@/app/feedback/components/FeedbackForm';
+import {getCurrentUser} from '@/access/AuthenticationService';
+
+async function getUser() {
+    return await getCurrentUser();
+}
+const Feedback = () => {
+    const [showSuccessAlert, setShowSuccessAlert] = useState(false);
+    const [showErrorAlert, setShowErrorAlert] = useState(false);
+
+    const [userUid, setUserUid] = useState<string>('');
+
+    // Calling an async function to get the user's uid
+    getUser().then(res => setUserUid(res.uid))
+
+    return (
+        <>
+            <div id="successAlert" hidden={!showSuccessAlert} className="container">
+                <SuccessAlert isActive={showSuccessAlert}></SuccessAlert>
+            </div>
+            <div id="errorAlert" hidden={!showErrorAlert} className="container">
+                <ErrorAlert isActive={showErrorAlert}></ErrorAlert>
+            </div>
+            <div className="container grid grid-cols-12 pt-5 pb-4">
+                <div className="col-span-5 pt-5">
+                    <h1 className="text-md-left text-3xl font-bold">Feedback</h1>
+                    <p className="text-md-left text-xl mt-3">
+                      Helps us to understand where improvements are needed. Please let us know.</p>
+                </div>
+                <div className="col-span-7 pl-5 pt-5">
+                    <FeedbackForm currUser={userUid} setShowSuccessAlert={setShowSuccessAlert}
+                        setShowErrorAlert={setShowErrorAlert} ></FeedbackForm>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default Feedback;
diff --git a/ui/src/components/layout/alerts/ErrorAlert.tsx b/ui/src/components/layout/alerts/ErrorAlert.tsx
new file mode 100644
index 00000000..de0af4d0
--- /dev/null
+++ b/ui/src/components/layout/alerts/ErrorAlert.tsx
@@ -0,0 +1,24 @@
+import {
+    Alert,
+    AlertDescription,
+    AlertTitle,
+} from '@/components/ui/alert'
+import {XCircle} from 'lucide-react';
+import React from 'react';
+
+export const ErrorAlert = ({ isActive } : { isActive:boolean }) => {
+    return (
+        <section className="errorAlert">
+            {isActive ? (
+                <Alert variant="destructive" className="bg-red-100">
+                    <XCircle className="h-4 w-4" />
+                    <AlertTitle>Error</AlertTitle>
+                    <AlertDescription className="text-base text-red-500">
+            Email feedback was unsuccessful. Please try again.
+                    </AlertDescription>
+                </Alert>
+            ) : null }
+        </section>
+    )}
+
+export default ErrorAlert;
diff --git a/ui/src/components/layout/alerts/SuccessAlert.tsx b/ui/src/components/layout/alerts/SuccessAlert.tsx
new file mode 100644
index 00000000..f02d3c82
--- /dev/null
+++ b/ui/src/components/layout/alerts/SuccessAlert.tsx
@@ -0,0 +1,26 @@
+import {
+    Alert,
+    AlertDescription,
+    AlertTitle,
+} from '@/components/ui/alert'
+import {CheckCircle2} from 'lucide-react';
+import React from 'react';
+
+export const SuccessAlert = ({ isActive } : { isActive:boolean }) => {
+    return (
+        <section className="successAlert">
+            {isActive ? (
+                <Alert variant="default" className="bg-green-100">
+                    <CheckCircle2 className="h-4 w-4" />
+                    <AlertTitle>Thank you!</AlertTitle>
+                    <AlertDescription>
+                        <div className="text-base alert-success-test-color">
+              Your feedback has successfully been submitted.
+                        </div>
+                    </AlertDescription>
+                </Alert>
+            ) : null }
+        </section>
+    )}
+
+export default SuccessAlert;
diff --git a/ui/src/components/ui/alert.tsx b/ui/src/components/ui/alert.tsx
index 25f8663b..b785616d 100644
--- a/ui/src/components/ui/alert.tsx
+++ b/ui/src/components/ui/alert.tsx
@@ -4,17 +4,16 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/components/ui/utils'
 
 const alertVariants = cva(
-
-    `relative w-full rounded-lg border border-slate-200 p-4 
-    [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute
-     [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-slate-950 dark:border-slate-800 dark:[&>svg]:text-slate-50`,
+    'relative w-full rounded-lg border border-slate-200 p-4 [&>svg~*]:pl-7 ' +
+  '[&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 ' +
+  '[&>svg]:text-slate-950 dark:border-slate-800 dark:[&>svg]:text-slate-50',
     {
         variants: {
             variant: {
                 default: 'bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50',
                 destructive:
-          `border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 
-          dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900`,
+          'border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 ' +
+                  'dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900',
             },
         },
         defaultVariants: {
diff --git a/ui/src/components/ui/button.tsx b/ui/src/components/ui/button.tsx
index b83044e0..60a2e796 100644
--- a/ui/src/components/ui/button.tsx
+++ b/ui/src/components/ui/button.tsx
@@ -12,20 +12,19 @@ const buttonVariants = cva(
     {
         variants: {
             variant: {
-                default: `bg-[#6fa9be] border-transparent text-slate-50 [text-shadow:_0_1px_1px_#444] bg-gradient-to-b
-                    from-[#7db1c4] to-[#5a9cb4] border hover:from-green-blue hover:to-green-blue
-                    border-x-black/[.0.1] border-t-black/[.0.1] border-b-black/[.0.25]`,
+                default: `bg-[#5a9cb4] hover:bg-green-blue [text-shadow:_0_1px_1px_#444] text-slate-50`,
                 destructive: `bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50
                     dark:hover:bg-red-900/90`,
                 outline: `border border-green-blue bg-white hover:bg-green-blue hover:text-white text-uh-teal`,
-                secondary: `border border-transparent bg-[#f8f9fa] text-[#212529] hover:bg-uh-blue4 hover:text-white`,
+                secondary: `bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50
+                    dark:hover:bg-slate-800/80`,
                 ghost: `hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50`,
                 link: `text-slate-900 underline-offset-4 hover:underline dark:text-slate-50`,
             },
             size: {
                 default: 'h-10 px-2.5 py-2',
-                sm: 'h-9 px-2',
-                lg: 'h-12 px-4 text-xl',
+                sm: 'h-9 rounded-md px-2',
+                lg: 'h-11 rounded-md px-8',
                 icon: 'h-10 w-10',
             },
         },
diff --git a/ui/src/components/ui/form.tsx b/ui/src/components/ui/form.tsx
new file mode 100644
index 00000000..ee40f252
--- /dev/null
+++ b/ui/src/components/ui/form.tsx
@@ -0,0 +1,176 @@
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import {
+    Controller,
+    ControllerProps,
+    FieldPath,
+    FieldValues,
+    FormProvider,
+    useFormContext,
+} from 'react-hook-form'
+
+import { cn } from '@/components/ui/utils'
+import { Label } from '@/components/ui/label'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+    name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+    {} as FormFieldContextValue
+)
+
+const FormField = <
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+    ...props
+}: ControllerProps<TFieldValues, TName>) => {
+    return (
+        <FormFieldContext.Provider value={{ name: props.name }}>
+            <Controller {...props} />
+        </FormFieldContext.Provider>
+    )
+}
+
+const useFormField = () => {
+    const fieldContext = React.useContext(FormFieldContext)
+    const itemContext = React.useContext(FormItemContext)
+    const { getFieldState, formState } = useFormContext()
+
+    const fieldState = getFieldState(fieldContext.name, formState)
+
+    if (!fieldContext) {
+        throw new Error('useFormField should be used within <FormField>')
+    }
+
+    const { id } = itemContext
+
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState,
+    }
+}
+
+type FormItemContextValue = {
+    id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+    {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+    const id = React.useId()
+
+    return (
+        <FormItemContext.Provider value={{ id }}>
+            <div ref={ref} className={cn('space-y-2', className)} {...props} />
+        </FormItemContext.Provider>
+    )
+})
+FormItem.displayName = 'FormItem'
+
+const FormLabel = React.forwardRef<
+    React.ElementRef<typeof LabelPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+    const { error, formItemId } = useFormField()
+
+    return (
+        <Label
+            ref={ref}
+            className={cn(error && 'text-red-500 dark:text-red-900', className)}
+            htmlFor={formItemId}
+            {...props}
+        />
+    )
+})
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = React.forwardRef<
+    React.ElementRef<typeof Slot>,
+    React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+    return (
+        <Slot
+            ref={ref}
+            id={formItemId}
+            aria-describedby={
+                !error
+                    ? `${formDescriptionId}`
+                    : `${formDescriptionId} ${formMessageId}`
+            }
+            aria-invalid={!!error}
+            {...props}
+        />
+    )
+})
+FormControl.displayName = 'FormControl'
+
+const FormDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField()
+
+    return (
+        <p
+            ref={ref}
+            id={formDescriptionId}
+            className={cn('text-sm text-slate-500 dark:text-slate-400', className)}
+            {...props}
+        />
+    )
+})
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField()
+    const body = error ? String(error?.message) : children
+
+    if (!body) {
+        return null
+    }
+
+    return (
+        <p
+            ref={ref}
+            id={formMessageId}
+            className={cn('text-sm font-medium text-red-500 dark:text-red-900', className)}
+            {...props}
+        >
+            {body}
+        </p>
+    )
+})
+FormMessage.displayName = 'FormMessage'
+
+export {
+    useFormField,
+    Form,
+    FormItem,
+    FormLabel,
+    FormControl,
+    FormDescription,
+    FormMessage,
+    FormField,
+}
diff --git a/ui/src/components/ui/input.tsx b/ui/src/components/ui/input.tsx
new file mode 100644
index 00000000..b1d34940
--- /dev/null
+++ b/ui/src/components/ui/input.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import { cn } from '@/components/ui/utils'
+
+export interface InputProps
+    extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+    ({ className, type, ...props }, ref) => {
+        return (
+            <input
+                type={type}
+                className={cn(
+                    'flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 ' +
+                  'text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm ' +
+                  'file:font-medium placeholder:text-slate-500 focus-visible:outline-none ' +
+                  'focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 ' +
+                  'disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 ' +
+                  'dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 ' +
+                  'dark:focus-visible:ring-slate-300',
+                    className
+                )}
+                ref={ref}
+                {...props}
+            />
+        )
+    }
+)
+Input.displayName = 'Input'
+
+export { Input }
diff --git a/ui/src/components/ui/label.tsx b/ui/src/components/ui/label.tsx
new file mode 100644
index 00000000..cdc0b54b
--- /dev/null
+++ b/ui/src/components/ui/label.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/components/ui/utils'
+
+const labelVariants = cva(
+    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+)
+
+const Label = React.forwardRef<
+    React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+    <LabelPrimitive.Root
+        ref={ref}
+        className={cn(labelVariants(), className)}
+        {...props}
+    />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/ui/src/services/EmailService.ts b/ui/src/services/EmailService.ts
index 204ec896..40758105 100644
--- a/ui/src/services/EmailService.ts
+++ b/ui/src/services/EmailService.ts
@@ -12,7 +12,7 @@ export type Feedback = {
     type: string,
     message: string,
     exceptionMessage?: string
-};
+}
 
 export type EmailResult = {
     resultCode: string,
@@ -29,7 +29,7 @@ export type EmailResult = {
  * 
  * @returns The EmailResult
  */
-export const sendFeedback = async (feedback: Feedback): Promise<EmailResult & ApiError> => {
+export const sendFeedback = async (feedback: Feedback): Promise<EmailResult> => {
     const currentUser = await getCurrentUser();
     const endpoint = `${baseUrl}/email/send/feedback`;
     return postRequest<EmailResult>(endpoint, currentUser.uid, feedback);
diff --git a/ui/tests/app/feedback/page.test.tsx b/ui/tests/app/feedback/page.test.tsx
new file mode 100644
index 00000000..5c0565fe
--- /dev/null
+++ b/ui/tests/app/feedback/page.test.tsx
@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import Feedback from "@/app/feedback/page";
+import userEvent from '@testing-library/user-event'
+import * as EmailService from '@/services/EmailService';
+import {act} from "react-dom/test-utils";
+
+jest.mock('@/services/EmailService');
+describe('Feedback', () => {
+  it('should render the Feedback form', async () => {
+    render(<Feedback />);
+    expect(screen.getByRole('heading', {name: 'Feedback'})).toBeInTheDocument();
+    expect(screen.getByText('Helps us to understand where improvements are needed. Please let us know.')).toBeInTheDocument();
+    expect(screen.getByText('Feedback Type:')).toBeInTheDocument();
+    expect(screen.getByText('Your Name (Optional):')).toBeInTheDocument();
+    expect(screen.getByText('Email Address:')).toBeInTheDocument();
+    expect(screen.getByText('Your Feedback:')).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Submit'})).toBeInTheDocument();
+  });
+
+  it('should see the success alert after submission', async() => {
+    const user = userEvent.setup()
+    render(<Feedback />);
+    jest.spyOn(EmailService, 'sendFeedback').mockResolvedValue({
+      resultCode: 'SUCCESS',
+      recipient: 'string',
+      from: 'string',
+      subject: 'string',
+      text: 'string'
+    });
+    // Wait for the success alert to appear
+    await act(async () => {
+      await user.type(screen.getByText('Your Feedback:'), 'This is a to test if the success alert shows.');
+      await user.click(screen.getByRole('button', {name: 'Submit'}));
+    });
+
+    expect(screen.getByText('Your feedback has successfully been submitted.')).toBeInTheDocument();
+  });
+
+  it('should see the error alert after submission', async() => {
+    const user = userEvent.setup()
+    render(<Feedback />);
+    jest.spyOn(EmailService, 'sendFeedback').mockResolvedValue({
+      resultCode: 'ERROR',
+      recipient: 'string',
+      from: 'string',
+      subject: 'string',
+      text: 'string'
+    });
+    // Wait for the error alert to appear
+    await act(async () => {
+      await user.type(screen.getByText('Your Feedback:'), 'Short message to test if the error alert shows.');
+      await user.click(screen.getByRole('button', {name: 'Submit'}));
+    });
+
+    expect(screen.getByText('Email feedback was unsuccessful. Please try again.')).toBeInTheDocument();
+  });
+});
diff --git a/ui/tests/components/layout/alerts/ErrorAlert.test.tsx b/ui/tests/components/layout/alerts/ErrorAlert.test.tsx
new file mode 100644
index 00000000..76f2f745
--- /dev/null
+++ b/ui/tests/components/layout/alerts/ErrorAlert.test.tsx
@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+import ErrorAlert from "@/components/layout/alerts/ErrorAlert";
+
+describe('ErrorAlert', () => {
+
+    it('should render the Error Alert with the appropriate message', () => {
+        render(<ErrorAlert isActive={true}/>);
+        expect(screen.getByRole('heading', {name: 'Error'})).toBeInTheDocument();
+        expect(screen.getByText('Email feedback was unsuccessful. Please try again.')).toBeInTheDocument();
+    });
+});
diff --git a/ui/tests/components/layout/alerts/SuccessAlert.test.tsx b/ui/tests/components/layout/alerts/SuccessAlert.test.tsx
new file mode 100644
index 00000000..2080dc50
--- /dev/null
+++ b/ui/tests/components/layout/alerts/SuccessAlert.test.tsx
@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+import SuccessAlert from "@/components/layout/alerts/SuccessAlert";
+
+describe('SuccessAlert', () => {
+
+    it('should render the Success Alert with the appropriate message', () => {
+        render(<SuccessAlert isActive={true}/>);
+        expect(screen.getByRole('heading', {name: 'Thank you!'})).toBeInTheDocument();
+        expect(screen.getByText('Your feedback has successfully been submitted.')).toBeInTheDocument();
+    });
+});