diff --git a/app/create-group-page/page.test.tsx b/app/create-group-page/page.test.tsx
index c1370528..971e5640 100644
--- a/app/create-group-page/page.test.tsx
+++ b/app/create-group-page/page.test.tsx
@@ -4,12 +4,11 @@
 import { render, screen } from '@testing-library/react';
 import CreateGroupPage from './page';
 import { Calendar } from '@/components/Calendar/calendar';
+import userEvent from '@testing-library/user-event';
+import { BUDGET_OPTIONS } from '@/constants/exchangeGroupOptions';
 
 jest.mock('next/navigation', () => ({
-  useRouter: () => ({
-    push: jest.fn(),
-    refresh: jest.fn(),
-  }),
+  useRouter: () => {},
 }));
 
 class MockResizeObserver {
@@ -86,4 +85,64 @@ describe('Create Group Page', () => {
       expect(tomorrow).not.toBeDisabled();
     });
   });
+
+  describe('Budget input', () => {
+    beforeEach(() => {
+      Element.prototype.scrollIntoView = jest.fn();
+    });
+
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+
+    it('closes the popover when a selection is made', async () => {
+      render(<CreateGroupPage />);
+
+      const user = userEvent.setup();
+      const budgetOptionsTriggerButton = screen.getByTestId('budget-button');
+      await user.click(budgetOptionsTriggerButton);
+      const budgetOptions = screen.getAllByRole('option');
+      expect(budgetOptions).toHaveLength(BUDGET_OPTIONS.length);
+
+      const firstBudgetOption = budgetOptions[0];
+      await user.click(firstBudgetOption);
+      expect(screen.queryByRole('option')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Drawing date calendar input', () => {
+    it('closes the popover when a selection is made', async () => {
+      render(<CreateGroupPage />);
+
+      const user = userEvent.setup();
+      const drawingDateTriggerButton = screen.getByTestId(
+        'drawing-date-button',
+      );
+      expect(screen.queryByRole('gridcell')).not.toBeInTheDocument();
+
+      await user.click(drawingDateTriggerButton);
+      const calendarDays = screen.getAllByRole('gridcell');
+      const firstCalendarDay = calendarDays[calendarDays.length - 1];
+      await user.click(firstCalendarDay);
+      expect(screen.queryByRole('gridcell')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Exchange date calendar input', () => {
+    it('closes the popover when a selection is made', async () => {
+      render(<CreateGroupPage />);
+
+      const user = userEvent.setup();
+      const drawingDateTriggerButton = screen.getByTestId(
+        'exchange-date-button',
+      );
+      expect(screen.queryByRole('gridcell')).not.toBeInTheDocument();
+
+      await user.click(drawingDateTriggerButton);
+      const calendarDays = screen.getAllByRole('gridcell');
+      const firstCalendarDay = calendarDays[calendarDays.length - 1];
+      await user.click(firstCalendarDay);
+      expect(screen.queryByRole('gridcell')).not.toBeInTheDocument();
+    });
+  });
 });
diff --git a/app/create-group-page/page.tsx b/app/create-group-page/page.tsx
index 6a543c5f..0e26b304 100644
--- a/app/create-group-page/page.tsx
+++ b/app/create-group-page/page.tsx
@@ -39,20 +39,10 @@ import {
 } from '@/components/ImageSelector/ImageSelector';
 import { useRouter } from 'next/navigation';
 import LinkCustom from '@/components/LinkCustom/LinkCustom';
+import { useState } from 'react';
+import { BUDGET_OPTIONS } from '@/constants/exchangeGroupOptions';
 import Link from 'next/link';
 
-const priceRanges = [
-  { label: '$10 - $20', value: '10-20' },
-  { label: '$20 - $30', value: '20-30' },
-  { label: '$30 - $40', value: '30-40' },
-  { label: '$40 - $50', value: '40-50' },
-  { label: '$50 - $60', value: '50-60' },
-  { label: '$60 - $70', value: '60-70' },
-  { label: '$70 - $80', value: '70-80' },
-  { label: '$80 - $90', value: '80-90' },
-  { label: '$90 - $100', value: '90-100' },
-] as const;
-
 const groupImageUrls = GROUP_IMAGES.map((image) => image.src);
 
 const formSchema = z
@@ -66,7 +56,7 @@ const formSchema = z
     drawing_date: z.date(),
     exchange_date: z.date(),
     budget: z.string({
-      required_error: 'Please select a Price Range.',
+      required_error: 'Please select a budget.',
     }),
     group_image: z.string().refine((val) => groupImageUrls.includes(val), {
       message: 'Group Theme Image must be selected',
@@ -80,6 +70,10 @@ const formSchema = z
 export default function CreateGroupPage() {
   const router = useRouter();
 
+  const [budgetOpen, setBudgetOpen] = useState(false);
+  const [drawingDateOpen, setDrawingDateOpen] = useState(false);
+  const [exchangeDateOpen, setExchangeDateOpen] = useState(false);
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -185,157 +179,185 @@ export default function CreateGroupPage() {
               <FormField
                 control={form.control}
                 name="budget"
-                render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                    <FormLabel className="m-5">Price Range</FormLabel>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <FormControl>
-                          <Button
-                            variant="outline"
-                            role="combobox"
-                            className={cn(
-                              'w-60 justify-between m-5',
-                              !field.value && 'text-muted-foreground',
-                            )}
-                          >
-                            {field.value
-                              ? priceRanges.find(
-                                  (priceRanges) =>
-                                    priceRanges.value === field.value,
-                                )?.label
-                              : 'Select a price range'}
-                            <ChevronsUpDown className="opacity-50" />
-                          </Button>
-                        </FormControl>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-52 p-0">
-                        <Command>
-                          <CommandInput
-                            placeholder="Search Price Ranges..."
-                            className="h-9"
-                          />
-                          <CommandList>
-                            <CommandEmpty>No framework found.</CommandEmpty>
-                            <CommandGroup>
-                              {priceRanges.map((priceRanges) => (
-                                <CommandItem
-                                  value={priceRanges.label}
-                                  key={priceRanges.value}
-                                  onSelect={() => {
-                                    form.setValue('budget', priceRanges.value);
-                                  }}
-                                >
-                                  {priceRanges.label}
-                                  <Check
-                                    className={cn(
-                                      'ml-auto',
-                                      priceRanges.value === field.value
-                                        ? 'opacity-100'
-                                        : 'opacity-0',
-                                    )}
-                                  />
-                                </CommandItem>
-                              ))}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </PopoverContent>
-                    </Popover>
-                    <FormDescription className="m-5">
-                      Please select the price range for your Secret Santa group!
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
+                render={({ field }) => {
+                  return (
+                    <FormItem className="flex flex-col">
+                      <FormLabel className="m-5">Price Range</FormLabel>
+                      <Popover open={budgetOpen} onOpenChange={setBudgetOpen}>
+                        <PopoverTrigger asChild>
+                          <FormControl>
+                            <Button
+                              data-testid="budget-button"
+                              variant="outline"
+                              role="combobox"
+                              className={cn(
+                                'w-60 justify-between m-5',
+                                !field.value && 'text-muted-foreground',
+                              )}
+                            >
+                              {field.value
+                                ? BUDGET_OPTIONS.find(
+                                    (budgetOption) =>
+                                      budgetOption.value === field.value,
+                                  )?.label
+                                : 'Select a price range'}
+                              <ChevronsUpDown className="opacity-50" />
+                            </Button>
+                          </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-52 p-0">
+                          <Command>
+                            <CommandInput
+                              placeholder="Search Price Ranges..."
+                              className="h-9"
+                            />
+                            <CommandList>
+                              <CommandEmpty>No framework found.</CommandEmpty>
+                              <CommandGroup>
+                                {BUDGET_OPTIONS.map((budgetOption) => (
+                                  <CommandItem
+                                    value={budgetOption.label}
+                                    key={budgetOption.value}
+                                    onSelect={() => {
+                                      form.setValue(
+                                        'budget',
+                                        budgetOption.value,
+                                      );
+                                      setBudgetOpen(false);
+                                    }}
+                                  >
+                                    {budgetOption.label}
+                                    <Check
+                                      className={cn(
+                                        'ml-auto',
+                                        budgetOption.value === field.value
+                                          ? 'opacity-100'
+                                          : 'opacity-0',
+                                      )}
+                                    />
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                      <FormDescription className="m-5">
+                        Please select the price range for your Secret Santa
+                        group!
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
               />
               <FormField
                 control={form.control}
                 name="drawing_date"
-                render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                    <FormLabel className="mx-5 mt-5">
-                      Gift Drawing Date
-                    </FormLabel>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <FormControl>
-                          <Button
-                            variant={'outline'}
-                            className={cn(
-                              'w-60 pl-3 text-left font-normal m-5',
-                              !field.value && 'text-muted-foreground ',
-                            )}
-                          >
-                            {field.value ? (
-                              format(field.value, 'PPP')
-                            ) : (
-                              <span>Pick a date</span>
-                            )}
-                            <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                          </Button>
-                        </FormControl>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0" align="start">
-                        <Calendar
-                          mode="single"
-                          selected={field.value}
-                          onSelect={field.onChange}
-                          disabled={[{ before: new Date() }]} 
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                    <FormDescription className="ml-5">
-                      When names will be drawn for the gift exchange.
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
+                render={({ field }) => {
+                  return (
+                    <FormItem className="flex flex-col">
+                      <FormLabel className="mx-5 mt-5">
+                        Gift Drawing Date
+                      </FormLabel>
+                      <Popover
+                        open={drawingDateOpen}
+                        onOpenChange={setDrawingDateOpen}
+                      >
+                        <PopoverTrigger asChild>
+                          <FormControl>
+                            <Button
+                              data-testid="drawing-date-button"
+                              variant={'outline'}
+                              className={cn(
+                                'w-60 pl-3 text-left font-normal m-5',
+                                !field.value && 'text-muted-foreground ',
+                              )}
+                            >
+                              {field.value ? (
+                                format(field.value, 'PPP')
+                              ) : (
+                                <span>Pick a date</span>
+                              )}
+                              <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                            </Button>
+                          </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                          <Calendar
+                            mode="single"
+                            selected={field.value}
+                            onSelect={(inputValue) => {
+                              field.onChange(inputValue);
+                              setDrawingDateOpen(false);
+                            }}
+                            disabled={[{ before: new Date() }]}
+                            initialFocus
+                          />
+                        </PopoverContent>
+                      </Popover>
+                      <FormDescription className="ml-5">
+                        When names will be drawn for the gift exchange.
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
               />
               <FormField
                 control={form.control}
                 name="exchange_date"
-                render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                    <FormLabel className="mx-5 mt-5">
-                      Gift Exchange Date
-                    </FormLabel>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <FormControl>
-                          <Button
-                            variant={'outline'}
-                            className={cn(
-                              'w-60 pl-3 text-left font-normal m-5',
-                              !field.value && 'text-muted-foreground',
-                            )}
-                          >
-                            {field.value ? (
-                              format(field.value, 'PPP')
-                            ) : (
-                              <span>Pick a date</span>
-                            )}
-                            <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                          </Button>
-                        </FormControl>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0" align="start">
-                        <Calendar
-                          mode="single"
-                          selected={field.value}
-                          onSelect={field.onChange}
-                          disabled={[{ before: addDays(new Date(giftDrawingDate), 1) }]}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                    <FormDescription className="ml-5">
-                      When the gift exchange will take place.
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
+                render={({ field }) => {
+                  return (
+                    <FormItem className="flex flex-col">
+                      <FormLabel className="mx-5 mt-5">
+                        Gift Exchange Date
+                      </FormLabel>
+                      <Popover
+                        open={exchangeDateOpen}
+                        onOpenChange={setExchangeDateOpen}
+                      >
+                        <PopoverTrigger asChild>
+                          <FormControl>
+                            <Button
+                              data-testid="exchange-date-button"
+                              variant={'outline'}
+                              className={cn(
+                                'w-60 pl-3 text-left font-normal m-5',
+                                !field.value && 'text-muted-foreground',
+                              )}
+                            >
+                              {field.value ? (
+                                format(field.value, 'PPP')
+                              ) : (
+                                <span>Pick a date</span>
+                              )}
+                              <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                            </Button>
+                          </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                          <Calendar
+                            mode="single"
+                            selected={field.value}
+                            onSelect={(inputValue) => {
+                              field.onChange(inputValue);
+                              setExchangeDateOpen(false);
+                            }}
+                            disabled={[
+                              { before: addDays(new Date(giftDrawingDate), 1) },
+                            ]}
+                            initialFocus
+                          />
+                        </PopoverContent>
+                      </Popover>
+                      <FormDescription className="ml-5">
+                        When the gift exchange will take place.
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
               />
               <div className="flex gap-2 justify-center md:justify-end p-3">
                 <Button variant="secondary" className="bg-slate-300" asChild>
diff --git a/app/gift-exchanges/[id]/edit/page.test.tsx b/app/gift-exchanges/[id]/edit/page.test.tsx
index 1eaad6ff..ff3ab03f 100644
--- a/app/gift-exchanges/[id]/edit/page.test.tsx
+++ b/app/gift-exchanges/[id]/edit/page.test.tsx
@@ -1,36 +1,135 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
 import { Calendar } from '@/components/Calendar/calendar';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useParams } from 'next/navigation';
+import EditGroupPage from './page';
+import { BUDGET_OPTIONS } from '@/constants/exchangeGroupOptions';
+
+global.fetch = jest.fn(() => Promise.resolve({})) as jest.Mock;
+
+jest.mock('next/navigation', () => ({
+  useRouter: jest.fn(),
+  useParams: jest.fn(),
+}));
 
-describe('Calendar component in create group page', () => {
-  const currentDate = new Date('2025-10-15T00:00:00Z');
+class MockResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
 
+global.ResizeObserver = MockResizeObserver;
+
+describe('Edit Group Page', () => {
   beforeEach(() => {
-    jest.useFakeTimers();
-    jest.setSystemTime(currentDate);
+    (global.fetch as jest.Mock).mockResolvedValue({
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          name: '',
+          description: '',
+          drawing_date: new Date(),
+          exchange_date: new Date(),
+          budget: '',
+          group_image: '',
+        }),
+    });
+
+    (useParams as jest.Mock).mockReturnValue('0');
+
+    Element.prototype.scrollIntoView = jest.fn();
   });
 
   afterEach(() => {
-    jest.useRealTimers();
+    jest.restoreAllMocks();
+  });
+
+  describe('Calendar component', () => {
+    const currentDate = new Date('2025-10-15T00:00:00Z');
+
+    beforeEach(() => {
+      jest.useFakeTimers();
+      jest.setSystemTime(currentDate);
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it('disables past dates correctly', () => {
+      render(
+        <Calendar
+          mode="single"
+          selected={currentDate}
+          onSelect={() => {}}
+          disabled={[{ before: currentDate }]}
+          initialFocus
+        />,
+      );
+
+      const pastDate = screen.getByText('13');
+      expect(pastDate).toBeDisabled();
+
+      const today = screen.getByText('15');
+      expect(today).not.toBeDisabled();
+
+      const tomorrow = screen.getByText('16');
+      expect(tomorrow).not.toBeDisabled();
+    });
+  });
+
+  describe('Budget input', () => {
+    it('closes the popover when a selection is made', async () => {
+      render(<EditGroupPage />);
+
+      const user = userEvent.setup();
+      const budgetsTriggerButton = screen.getByTestId('budget-button');
+      await user.click(budgetsTriggerButton);
+      const budgetOptions = screen.getAllByRole('option');
+      expect(budgetOptions).toHaveLength(BUDGET_OPTIONS.length);
+
+      const firstBudgetOption = budgetOptions[0];
+      await user.click(firstBudgetOption);
+      expect(screen.queryByRole('option')).not.toBeInTheDocument();
+    });
   });
 
-  it('disables past dates correctly', () => {
-    render(
-      <Calendar
-        mode="single"
-        selected={currentDate}
-        onSelect={() => {}}
-        disabled={[{ before: currentDate }]}
-        initialFocus
-      />,
-    );
-
-    const pastDate = screen.getByText('13');
-    expect(pastDate).toBeDisabled();
-
-    const today = screen.getByText('15');
-    expect(today).not.toBeDisabled();
-
-    const tomorrow = screen.getByText('16');
-    expect(tomorrow).not.toBeDisabled();
+  describe('Drawing date calendar input', () => {
+    it('closes the popover when a selection is made', async () => {
+      render(<EditGroupPage />);
+
+      const user = userEvent.setup();
+      const drawingDateTriggerButton = screen.getByTestId(
+        'drawing-date-button',
+      );
+      expect(screen.queryByRole('gridcell')).not.toBeInTheDocument();
+
+      await user.click(drawingDateTriggerButton);
+      const calendarDays = screen.getAllByRole('gridcell');
+      const firstCalendarDay = calendarDays[calendarDays.length - 1];
+      await user.click(firstCalendarDay);
+      expect(screen.queryByRole('gridcell')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Exchange date calendar input', () => {
+    it('closes the popover when a selection is made', async () => {
+      render(<EditGroupPage />);
+
+      const user = userEvent.setup();
+      const drawingDateTriggerButton = screen.getByTestId(
+        'exchange-date-button',
+      );
+      expect(screen.queryByRole('gridcell')).not.toBeInTheDocument();
+
+      await user.click(drawingDateTriggerButton);
+      const calendarDays = screen.getAllByRole('gridcell');
+      const firstCalendarDay = calendarDays[calendarDays.length - 1];
+      await user.click(firstCalendarDay);
+      expect(screen.queryByRole('gridcell')).not.toBeInTheDocument();
+    });
   });
 });
diff --git a/app/gift-exchanges/[id]/edit/page.tsx b/app/gift-exchanges/[id]/edit/page.tsx
index b879cad6..26266ad2 100644
--- a/app/gift-exchanges/[id]/edit/page.tsx
+++ b/app/gift-exchanges/[id]/edit/page.tsx
@@ -43,18 +43,7 @@ import Link from 'next/link';
 import { createClient } from '@/lib/supabase/client';
 import { GiftExchange } from '@/app/types/giftExchange';
 import LinkCustom from '@/components/LinkCustom/LinkCustom';
-
-const priceRanges = [
-  { label: '$10 - $20', value: '10-20' },
-  { label: '$20 - $30', value: '20-30' },
-  { label: '$30 - $40', value: '30-40' },
-  { label: '$40 - $50', value: '40-50' },
-  { label: '$50 - $60', value: '50-60' },
-  { label: '$60 - $70', value: '60-70' },
-  { label: '$70 - $80', value: '70-80' },
-  { label: '$80 - $90', value: '80-90' },
-  { label: '$90 - $100', value: '90-100' },
-] as const;
+import { BUDGET_OPTIONS } from '@/constants/exchangeGroupOptions';
 
 const groupImageUrls = GROUP_IMAGES.map((image) => image.src);
 
@@ -69,13 +58,11 @@ const formSchema = z
     drawing_date: z.date(),
     exchange_date: z.date(),
     budget: z.string({
-      required_error: 'Please select a Price Range.',
+      required_error: 'Please select a budget.',
+    }),
+    group_image: z.string().refine((val) => groupImageUrls.includes(val), {
+      message: 'Group Theme Image must be selected',
     }),
-    group_image: z
-      .string()
-      .refine((val) => groupImageUrls.includes(val), {
-        message: 'Group Theme Image must be selected',
-      }),
   })
   .refine((data) => data.exchange_date > data.drawing_date, {
     message: 'Exchange Date must be after the Drawing Date',
@@ -88,6 +75,9 @@ export default function EditGroupPage() {
   const [giftExchangeData, setGiftExchangeData] = useState<GiftExchange | null>(
     null,
   );
+  const [budgetOpen, setBudgetOpen] = useState(false);
+  const [drawingDateOpen, setDrawingDateOpen] = useState(false);
+  const [exchangeDateOpen, setExchangeDateOpen] = useState(false);
 
   const supabase = createClient();
 
@@ -248,157 +238,185 @@ export default function EditGroupPage() {
               <FormField
                 control={form.control}
                 name="budget"
-                render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                    <FormLabel className="mx-5 mt-5">Price Range</FormLabel>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <FormControl>
-                          <Button
-                            variant="outline"
-                            role="combobox"
-                            className={cn(
-                              'w-60 justify-between mx-5 mt-5',
-                              !field.value && 'text-muted-foreground',
-                            )}
-                          >
-                            {field.value
-                              ? priceRanges.find(
-                                  (priceRanges) =>
-                                    priceRanges.value === field.value,
-                                )?.label
-                              : 'Budget Per Person.'}
-                            <ChevronsUpDown className="opacity-50" />
-                          </Button>
-                        </FormControl>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-50 p-0">
-                        <Command>
-                          <CommandInput
-                            placeholder="Select a price range."
-                            className="h-9"
-                          />
-                          <CommandList>
-                            <CommandEmpty>No Price Selected</CommandEmpty>
-                            <CommandGroup>
-                              {priceRanges.map((priceRanges) => (
-                                <CommandItem
-                                  value={priceRanges.label}
-                                  key={priceRanges.value}
-                                  onSelect={() => {
-                                    form.setValue('budget', priceRanges.value);
-                                  }}
-                                >
-                                  {priceRanges.label}
-                                  <Check
-                                    className={cn(
-                                      'ml-auto',
-                                      priceRanges.value === field.value
-                                        ? 'opacity-100'
-                                        : 'opacity-0',
-                                    )}
-                                  />
-                                </CommandItem>
-                              ))}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </PopoverContent>
-                    </Popover>
-                    <FormDescription className="m-5">
-                      Please select the price range for your Secret Santa group!
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
+                render={({ field }) => {
+                  return (
+                    <FormItem className="flex flex-col">
+                      <FormLabel className="mx-5 mt-5">Price Range</FormLabel>
+                      <Popover open={budgetOpen} onOpenChange={setBudgetOpen}>
+                        <PopoverTrigger asChild>
+                          <FormControl>
+                            <Button
+                              data-testid="budget-button"
+                              variant="outline"
+                              role="combobox"
+                              className={cn(
+                                'w-60 justify-between mx-5 mt-5',
+                                !field.value && 'text-muted-foreground',
+                              )}
+                            >
+                              {field.value
+                                ? BUDGET_OPTIONS.find(
+                                    (budgetOption) =>
+                                      budgetOption.value === field.value,
+                                  )?.label
+                                : 'Budget Per Person.'}
+                              <ChevronsUpDown className="opacity-50" />
+                            </Button>
+                          </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-50 p-0">
+                          <Command>
+                            <CommandInput
+                              placeholder="Select a price range."
+                              className="h-9"
+                            />
+                            <CommandList>
+                              <CommandEmpty>No Price Selected</CommandEmpty>
+                              <CommandGroup>
+                                {BUDGET_OPTIONS.map((budgetOption) => (
+                                  <CommandItem
+                                    value={budgetOption.label}
+                                    key={budgetOption.value}
+                                    onSelect={() => {
+                                      form.setValue(
+                                        'budget',
+                                        budgetOption.value,
+                                      );
+                                      setBudgetOpen(false);
+                                    }}
+                                  >
+                                    {budgetOption.label}
+                                    <Check
+                                      className={cn(
+                                        'ml-auto',
+                                        budgetOption.value === field.value
+                                          ? 'opacity-100'
+                                          : 'opacity-0',
+                                      )}
+                                    />
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                      <FormDescription className="m-5">
+                        Please select the price range for your Secret Santa
+                        group!
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
               />
               <FormField
                 control={form.control}
                 name="drawing_date"
-                render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                    <FormLabel className="mx-5 mt-5">
-                      Gift Drawing Date
-                    </FormLabel>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <FormControl>
-                          <Button
-                            variant={'outline'}
-                            className={cn(
-                              'w-60 pl-3 text-left font-normal m-5',
-                              !field.value && 'text-muted-foreground ',
-                            )}
-                          >
-                            {field.value ? (
-                              format(field.value, 'PPP')
-                            ) : (
-                              <span>Pick a date</span>
-                            )}
-                            <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                          </Button>
-                        </FormControl>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0" align="start">
-                        <Calendar
-                          mode="single"
-                          selected={field.value}
-                          onSelect={field.onChange}
-                          disabled={[{ before: new Date() }]}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                    <FormDescription className="ml-5">
-                      When names will be randomly drawn for the gift exchange.
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
+                render={({ field }) => {
+                  return (
+                    <FormItem className="flex flex-col">
+                      <FormLabel className="mx-5 mt-5">
+                        Gift Drawing Date
+                      </FormLabel>
+                      <Popover
+                        open={drawingDateOpen}
+                        onOpenChange={setDrawingDateOpen}
+                      >
+                        <PopoverTrigger asChild>
+                          <FormControl>
+                            <Button
+                              data-testid="drawing-date-button"
+                              variant={'outline'}
+                              className={cn(
+                                'w-60 pl-3 text-left font-normal m-5',
+                                !field.value && 'text-muted-foreground ',
+                              )}
+                            >
+                              {field.value ? (
+                                format(field.value, 'PPP')
+                              ) : (
+                                <span>Pick a date</span>
+                              )}
+                              <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                            </Button>
+                          </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                          <Calendar
+                            mode="single"
+                            selected={field.value}
+                            onSelect={(inputValue) => {
+                              field.onChange(inputValue);
+                              setDrawingDateOpen(false);
+                            }}
+                            disabled={[{ before: new Date() }]}
+                            initialFocus
+                          />
+                        </PopoverContent>
+                      </Popover>
+                      <FormDescription className="ml-5">
+                        When names will be randomly drawn for the gift exchange.
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
               />
               <FormField
                 control={form.control}
                 name="exchange_date"
-                render={({ field }) => (
-                  <FormItem className="flex flex-col">
-                    <FormLabel className="mx-5 mt-5">
-                      Gift Exchange Date
-                    </FormLabel>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <FormControl>
-                          <Button
-                            variant={'outline'}
-                            className={cn(
-                              'w-60 pl-3 text-left font-normal m-5',
-                              !field.value && 'text-muted-foreground',
-                            )}
-                          >
-                            {field.value ? (
-                              format(field.value, 'PPP')
-                            ) : (
-                              <span>Pick a date</span>
-                            )}
-                            <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                          </Button>
-                        </FormControl>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0" align="start">
-                        <Calendar
-                          mode="single"
-                          selected={field.value}
-                          onSelect={field.onChange}
-                          disabled={[{ before: addDays(new Date(giftDrawingDate), 1) }]}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                    <FormDescription className="ml-5">
-                      When the gift exchange will take place.
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
+                render={({ field }) => {
+                  return (
+                    <FormItem className="flex flex-col">
+                      <FormLabel className="mx-5 mt-5">
+                        Gift Exchange Date
+                      </FormLabel>
+                      <Popover
+                        open={exchangeDateOpen}
+                        onOpenChange={setExchangeDateOpen}
+                      >
+                        <PopoverTrigger asChild>
+                          <FormControl>
+                            <Button
+                              data-testid="exchange-date-button"
+                              variant={'outline'}
+                              className={cn(
+                                'w-60 pl-3 text-left font-normal m-5',
+                                !field.value && 'text-muted-foreground',
+                              )}
+                            >
+                              {field.value ? (
+                                format(field.value, 'PPP')
+                              ) : (
+                                <span>Pick a date</span>
+                              )}
+                              <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                            </Button>
+                          </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-auto p-0" align="start">
+                          <Calendar
+                            mode="single"
+                            selected={field.value}
+                            onSelect={(inputValue) => {
+                              field.onChange(inputValue);
+                              setExchangeDateOpen(false);
+                            }}
+                            disabled={[
+                              { before: addDays(new Date(giftDrawingDate), 1) },
+                            ]}
+                            initialFocus
+                          />
+                        </PopoverContent>
+                      </Popover>
+                      <FormDescription className="ml-5">
+                        When the gift exchange will take place.
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
               />
               <div className="flex md:justify-start justify-center md:m-5 m-0 w-full">
                 <Button className="m-2" type="submit">
diff --git a/components/Calendar/calendar.test.tsx b/components/Calendar/calendar.test.tsx
new file mode 100644
index 00000000..b1a77a25
--- /dev/null
+++ b/components/Calendar/calendar.test.tsx
@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import { Calendar } from './calendar';
+import userEvent from '@testing-library/user-event';
+
+describe('Calendar', () => {
+  it('displays the same number of weeks/rows for every month of the year', () => {
+    render(<Calendar initialFocus />);
+
+    const user = userEvent.setup();
+    const daysDisplayedCount = screen.getAllByRole('gridcell').length;
+    expect(daysDisplayedCount).toBeGreaterThan(31);
+
+    Array.from({ length: 12 }).forEach(async () => {
+      const nextMonthButton = screen.getByLabelText('Go to next month');
+      await user.click(nextMonthButton);
+
+      expect(screen.getAllByRole('gridcell')).toHaveLength(daysDisplayedCount);
+    });
+  });
+});
diff --git a/components/Calendar/calendar.tsx b/components/Calendar/calendar.tsx
index f137b79d..6384987c 100644
--- a/components/Calendar/calendar.tsx
+++ b/components/Calendar/calendar.tsx
@@ -28,6 +28,7 @@ const Calendar = ({
 }: CalendarProps): JSX.Element => {
   return (
     <DayPicker
+      fixedWeeks
       showOutsideDays={showOutsideDays}
       className={cn('p-3', className)}
       classNames={{
diff --git a/constants/exchangeGroupOptions.ts b/constants/exchangeGroupOptions.ts
new file mode 100644
index 00000000..d8aecf3c
--- /dev/null
+++ b/constants/exchangeGroupOptions.ts
@@ -0,0 +1,14 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+export const BUDGET_OPTIONS = [
+  { label: '$10 - $20', value: '10-20' },
+  { label: '$20 - $30', value: '20-30' },
+  { label: '$30 - $40', value: '30-40' },
+  { label: '$40 - $50', value: '40-50' },
+  { label: '$50 - $60', value: '50-60' },
+  { label: '$60 - $70', value: '60-70' },
+  { label: '$70 - $80', value: '70-80' },
+  { label: '$80 - $90', value: '80-90' },
+  { label: '$90 - $100', value: '90-100' },
+] as const;
diff --git a/jest.setup.js b/jest.setup.js
index cd6191a1..71c0be7f 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -1,4 +1,4 @@
 // Copyright (c) Gridiron Survivor.
 // Licensed under the MIT License.
 
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
\ No newline at end of file