diff --git a/src/services/ui/src/components/Cards/SectionCard.tsx b/src/services/ui/src/components/Cards/SectionCard.tsx
new file mode 100644
index 0000000000..0ff07ab86c
--- /dev/null
+++ b/src/services/ui/src/components/Cards/SectionCard.tsx
@@ -0,0 +1,23 @@
+import { FC, ReactNode } from "react";
+import { cn } from "@/lib";
+
+interface SectionCardProps {
+  children: ReactNode;
+  className?: string;
+  title: string;
+}
+export const SectionCard: FC<SectionCardProps> = ({
+  title,
+  children,
+  className,
+}: SectionCardProps) => {
+  return (
+    <div className={cn("border-2 border-slate-300 w-5/6 p-4", className)}>
+      <section>
+        <h1 className="font-bold text-2xl">{title}</h1>
+        <div className="border-t-2 border-slate-300 w-full mt-2 mb-4" />
+        <div className="gap-8 flex flex-col">{children}</div>
+      </section>
+    </div>
+  );
+};
diff --git a/src/services/ui/src/components/Cards/index.ts b/src/services/ui/src/components/Cards/index.ts
index 51210f108c..bcdb738be4 100644
--- a/src/services/ui/src/components/Cards/index.ts
+++ b/src/services/ui/src/components/Cards/index.ts
@@ -1 +1,2 @@
 export * from "./CardWithTopBorder";
+export * from "./SectionCard";
diff --git a/src/services/ui/src/components/ExportButton/index.tsx b/src/services/ui/src/components/ExportButton/index.tsx
index 2811844bc7..83e0b82460 100644
--- a/src/services/ui/src/components/ExportButton/index.tsx
+++ b/src/services/ui/src/components/ExportButton/index.tsx
@@ -63,26 +63,24 @@ export const ExportButton = <TData extends Record<string, any>>({
   };
 
   return (
-    <>
-      <Button
-        variant="ghost"
-        onClick={async () => {
-          handleExport(await generateExport());
-        }}
-        disabled={loading}
-        className="hover:bg-transparent h-full flex gap-2"
-      >
-        {loading && (
-          <motion.div
-            animate={{ rotate: "360deg" }}
-            transition={{ repeat: Infinity, duration: 0.5 }}
-          >
-            <Loader className="w-4 h-4" />
-          </motion.div>
-        )}
-        {!loading && <Download className="w-4 h-4" />}
-        <span className="prose-sm">Export</span>
-      </Button>
-    </>
+    <Button
+      variant="outline"
+      onClick={async () => {
+        handleExport(await generateExport());
+      }}
+      disabled={loading}
+      className="hover:bg-transparent self-center h-10 flex gap-2"
+    >
+      {loading && (
+        <motion.div
+          animate={{ rotate: "360deg" }}
+          transition={{ repeat: Infinity, duration: 0.5 }}
+        >
+          <Loader className="w-4 h-4" />
+        </motion.div>
+      )}
+      {!loading && <Download className="w-4 h-4" />}
+      <span className="prose-sm">Export</span>
+    </Button>
   );
 };
diff --git a/src/services/ui/src/components/Opensearch/Filtering/FilterDrawer.tsx b/src/services/ui/src/components/Opensearch/Filtering/FilterDrawer.tsx
index 5350444946..3e21f8bd72 100644
--- a/src/services/ui/src/components/Opensearch/Filtering/FilterDrawer.tsx
+++ b/src/services/ui/src/components/Opensearch/Filtering/FilterDrawer.tsx
@@ -30,11 +30,14 @@ export const OsFilterDrawer = () => {
   const handleFilterReset = () => resetFilters(params.onSet);
   return (
     <Sheet open={hook.drawerOpen} onOpenChange={hook.setDrawerState}>
-      <SheetTrigger>
-        <div className="flex flex-row gap-2 items-center border-slate-100 px-4">
+      <SheetTrigger asChild>
+        <Button
+          variant="outline"
+          className="hover:bg-transparent self-center h-10 flex gap-2"
+        >
           <FilterIcon className="w-4 h-4" />
-          <p className="prose-sm">Filters</p>
-        </div>
+          <span className="prose-sm">Filters</span>
+        </Button>
       </SheetTrigger>
       <SheetContent className="bg-white overflow-scroll">
         <SheetHeader>
diff --git a/src/services/ui/src/components/Opensearch/Filtering/index.tsx b/src/services/ui/src/components/Opensearch/Filtering/index.tsx
index 5e8ed8eebe..7653c1ae9e 100644
--- a/src/services/ui/src/components/Opensearch/Filtering/index.tsx
+++ b/src/services/ui/src/components/Opensearch/Filtering/index.tsx
@@ -19,95 +19,102 @@ export const OsFiltering: FC<{
   const filters = DEFAULT_FILTERS[params.state.tab]?.filters ?? [];
 
   return (
-    <div className="flex flex-row gap-2 border-[1px] border-slate-200">
-      <SearchForm
-        isSearching={context.isLoading}
-        handleSearch={(search) =>
-          params.onSet((s) => ({
-            ...s,
-            pagination: { ...s.pagination, number: 0 },
-            search,
-          }))
-        }
-        disabled={!!props.disabled}
-      />
-      <ExportButton
-        data={() => getAllSearchData([...params.state.filters, ...filters])}
-        headers={[
-          {
-            name: (() => {
-              if (params.state.tab === "spas") {
-                return "SPA ID";
-              } else if (params.state.tab === "waivers") {
-                return "Waiver Number";
-              }
-              return "";
-            })(),
-            transform: (data) => data.id,
-          },
-          {
-            name: "State",
-            transform: (data) => data.state ?? BLANK_VALUE,
-          },
-          {
-            name: "Type",
-            transform: (data) => data.planType ?? BLANK_VALUE,
-          },
-          {
-            name: "Action Type",
-            transform: (data) => {
-              if (data.actionType === undefined) {
-                return BLANK_VALUE;
-              }
+    <div>
+      <p className="mb-1 text-sm text-slate-400">
+        {"Search by Package ID, CPOC Name, or Submitter Name"}
+      </p>
+      <div className="flex flex-row content-between gap-2 mb-4">
+        <SearchForm
+          isSearching={context.isLoading}
+          handleSearch={(search) =>
+            params.onSet((s) => ({
+              ...s,
+              pagination: { ...s.pagination, number: 0 },
+              search,
+            }))
+          }
+          disabled={!!props.disabled}
+        />
+        <div className="flex flex-row gap-2">
+          <ExportButton
+            data={() => getAllSearchData([...params.state.filters, ...filters])}
+            headers={[
+              {
+                name: (() => {
+                  if (params.state.tab === "spas") {
+                    return "SPA ID";
+                  } else if (params.state.tab === "waivers") {
+                    return "Waiver Number";
+                  }
+                  return "";
+                })(),
+                transform: (data) => data.id,
+              },
+              {
+                name: "State",
+                transform: (data) => data.state ?? BLANK_VALUE,
+              },
+              {
+                name: "Type",
+                transform: (data) => data.planType ?? BLANK_VALUE,
+              },
+              {
+                name: "Action Type",
+                transform: (data) => {
+                  if (data.actionType === undefined) {
+                    return BLANK_VALUE;
+                  }
 
-              return (
-                LABELS[data.actionType as keyof typeof LABELS] ||
-                data.actionType
-              );
-            },
-          },
-          {
-            name: "Status",
-            transform(data) {
-              if (user?.data?.isCms && !user?.data?.user) {
-                if (data.cmsStatus) {
-                  return data.cmsStatus;
-                }
-                return BLANK_VALUE;
-              } else {
-                if (data.stateStatus) {
-                  return data.stateStatus;
-                }
-                return BLANK_VALUE;
-              }
-            },
-          },
-          {
-            name: "Initial Submission",
-            transform: (data) =>
-              data?.submissionDate
-                ? format(new Date(data.submissionDate), "MM/dd/yyyy")
-                : BLANK_VALUE,
-          },
-          {
-            name: "Formal RAI Response",
-            transform: (data) => {
-              return data.raiReceivedDate
-                ? format(new Date(data.raiReceivedDate), "MM/dd/yyyy")
-                : BLANK_VALUE;
-            },
-          },
-          {
-            name: "CPOC Name",
-            transform: (data) => data.leadAnalystName ?? BLANK_VALUE,
-          },
-          {
-            name: "Submitted By",
-            transform: (data) => data.submitterName ?? BLANK_VALUE,
-          },
-        ]}
-      />
-      <OsFilterDrawer />
+                  return (
+                    LABELS[data.actionType as keyof typeof LABELS] ||
+                    data.actionType
+                  );
+                },
+              },
+              {
+                name: "Status",
+                transform(data) {
+                  if (user?.data?.isCms && !user?.data?.user) {
+                    if (data.cmsStatus) {
+                      return data.cmsStatus;
+                    }
+                    return BLANK_VALUE;
+                  } else {
+                    if (data.stateStatus) {
+                      return data.stateStatus;
+                    }
+                    return BLANK_VALUE;
+                  }
+                },
+              },
+              {
+                name: "Initial Submission",
+                transform: (data) =>
+                  data?.submissionDate
+                    ? format(new Date(data.submissionDate), "MM/dd/yyyy")
+                    : BLANK_VALUE,
+              },
+              {
+                name: "Formal RAI Response",
+                transform: (data) => {
+                  return data.raiReceivedDate
+                    ? format(new Date(data.raiReceivedDate), "MM/dd/yyyy")
+                    : BLANK_VALUE;
+                },
+              },
+              {
+                name: "CPOC Name",
+                transform: (data) => data.leadAnalystName ?? BLANK_VALUE,
+              },
+              {
+                name: "Submitted By",
+                transform: (data) => data.submitterName ?? BLANK_VALUE,
+              },
+            ]}
+          />
+          <OsFilterDrawer />
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/src/services/ui/src/components/SearchForm/index.tsx b/src/services/ui/src/components/SearchForm/index.tsx
index 1fdab0c17a..bf25f0a36a 100644
--- a/src/services/ui/src/components/SearchForm/index.tsx
+++ b/src/services/ui/src/components/SearchForm/index.tsx
@@ -46,15 +46,15 @@ export const SearchForm: FC<{
         </svg>
         <input
           type="text"
-          placeholder="Search by Package ID, CPOC Name, or Submitter Name"
-          className="w-full py-3 pl-12 pr-4 text-gray-500 border border-gray-300 outline-none focus:bg-white focus:border-indigo-600"
+          className="w-[30rem] py-3 pl-12 pr-4 text-gray-500 border border-gray-300 outline-none focus:bg-white focus:border-indigo-600"
+          maxLength={28}
           value={searchText}
           onChange={handleInputChange}
           disabled={disabled}
         />
         {isSearching && (
           <motion.div
-            className="absolute inset-y-0 w-6 h-6 my-auto right-9 origin-center flex items-center justify-center"
+            className="absolute inset-y-0 w-6 h-6 my-auto right-[9rem] origin-center flex items-center justify-center"
             animate={{ rotate: "360deg" }}
             transition={{ repeat: Infinity, duration: 0.5 }}
           >
@@ -63,7 +63,7 @@ export const SearchForm: FC<{
         )}
         {!!searchText && (
           <XIcon
-            className="absolute cursor-pointer top-0 bottom-0 w-6 h-6 my-auto right-3"
+            className="absolute cursor-pointer top-0 bottom-0 w-6 h-6 my-auto right-[7.5rem]"
             onClick={() => {
               setSearchText("");
               handleSearch("");
diff --git a/src/services/ui/src/pages/form/medicaid-form.tsx b/src/services/ui/src/pages/form/medicaid-form.tsx
index 5cd4543d19..540f6186e5 100644
--- a/src/services/ui/src/pages/form/medicaid-form.tsx
+++ b/src/services/ui/src/pages/form/medicaid-form.tsx
@@ -13,6 +13,7 @@ import {
   Alert,
   LoadingSpinner,
   BreadCrumbs,
+  SectionCard,
 } from "@/components";
 import { ConfirmationModal } from "@/components/Modal/ConfirmationModal";
 import { FAQ_TARGET, ROUTES } from "@/routes";
@@ -193,14 +194,10 @@ export const MedicaidForm = () => {
       <I.Form {...form}>
         <form
           onSubmit={form.handleSubmit(handleSubmit)}
-          className="my-6 space-y-8 mx-auto"
+          className="my-6 space-y-8 mx-auto justify-center items-center flex flex-col"
         >
-          <section>
-            <h1 className="font-bold text-2xl mb-2">Medicaid SPA Details</h1>
-            <p className="my-1">
-              <I.RequiredIndicator /> Indicates a required field
-            </p>
-            <p className="font-light mb-6 max-w-4xl">
+          <SectionCard title="Medicaid SPA Details">
+            <p className="font-light  max-w-4xl">
               Once you submit this form, a confirmation email is sent to you and
               to CMS. CMS will use this content to review your package, and you
               will not be able to edit this form. If CMS needs any additional
@@ -210,65 +207,65 @@ export const MedicaidForm = () => {
                 form.
               </strong>
             </p>
-          </section>
-          <I.FormField
-            control={form.control}
-            name="id"
-            render={({ field }) => (
-              <I.FormItem>
-                <div className="flex justify-between">
-                  <I.FormLabel className="text-lg font-bold">
-                    SPA ID
-                    <I.RequiredIndicator />
+            <I.FormField
+              control={form.control}
+              name="id"
+              render={({ field }) => (
+                <I.FormItem>
+                  <div className="flex gap-4">
+                    <I.FormLabel className="text-lg font-bold">
+                      SPA ID
+                    </I.FormLabel>
+                    <Link
+                      to="/faq/#spa-id-format"
+                      target={FAQ_TARGET}
+                      rel="noopener noreferrer"
+                      className="text-blue-700 hover:underline"
+                    >
+                      What is my SPA ID?
+                    </Link>
+                  </div>
+                  <p className="text-gray-500 font-light">
+                    Must follow the format SS-YY-NNNN or SS-YY-NNNN-XXXX.
+                  </p>
+                  <p className="italic text-gray-500 font-light">
+                    Reminder - CMS recommends that all SPA numbers start with
+                    the year in which the package is submitted.
+                  </p>
+                  <I.FormControl className="max-w-sm">
+                    <I.Input
+                      {...field}
+                      onInput={(e) => {
+                        if (e.target instanceof HTMLInputElement) {
+                          e.target.value = e.target.value.toUpperCase();
+                        }
+                      }}
+                    />
+                  </I.FormControl>
+                  <I.FormMessage />
+                </I.FormItem>
+              )}
+            />
+            <I.FormField
+              control={form.control}
+              name="proposedEffectiveDate"
+              render={({ field }) => (
+                <I.FormItem className="max-w-sm">
+                  <I.FormLabel className="text-lg font-bold block">
+                    Proposed Effective Date of Medicaid SPA
                   </I.FormLabel>
-                  <Link
-                    to="/faq/#spa-id-format"
-                    target={FAQ_TARGET}
-                    rel="noopener noreferrer"
-                    className="text-blue-700 hover:underline"
-                  >
-                    What is my SPA ID?
-                  </Link>
-                </div>
-                <p className="text-gray-500 font-light">
-                  Must follow the format SS-YY-NNNN or SS-YY-NNNN-XXXX.
-                </p>
-                <p className="italic text-gray-500 font-light">
-                  Reminder - CMS recommends that all SPA numbers start with the
-                  year in which the package is submitted.
-                </p>
-                <I.FormControl className="max-w-sm">
-                  <I.Input
-                    {...field}
-                    onInput={(e) => {
-                      if (e.target instanceof HTMLInputElement) {
-                        e.target.value = e.target.value.toUpperCase();
-                      }
-                    }}
-                  />
-                </I.FormControl>
-                <I.FormMessage />
-              </I.FormItem>
-            )}
-          />
-          <I.FormField
-            control={form.control}
-            name="proposedEffectiveDate"
-            render={({ field }) => (
-              <I.FormItem className="max-w-sm">
-                <I.FormLabel className="text-lg font-bold block">
-                  Proposed Effective Date of Medicaid SPA
-                  <I.RequiredIndicator />
-                </I.FormLabel>
-                <I.FormControl>
-                  <I.DatePicker onChange={field.onChange} date={field.value} />
-                </I.FormControl>
-                <I.FormMessage />
-              </I.FormItem>
-            )}
-          />
-          <section>
-            <h3 className="text-2xl font-bold font-sans">Attachments</h3>
+                  <I.FormControl>
+                    <I.DatePicker
+                      onChange={field.onChange}
+                      date={field.value}
+                    />
+                  </I.FormControl>
+                  <I.FormMessage />
+                </I.FormItem>
+              )}
+            />
+          </SectionCard>
+          <SectionCard title="Attachments">
             <p>
               Maximum file size of 80 MB per attachment.{" "}
               <strong>
@@ -288,7 +285,6 @@ export const MedicaidForm = () => {
               }
               .
             </p>
-            <br />
             <p>
               We accept the following file formats:{" "}
               <strong className="bold">.docx, .jpg, .png, .pdf, .xlsx,</strong>{" "}
@@ -305,50 +301,53 @@ export const MedicaidForm = () => {
               }
               .
             </p>
-            <br />
-            <p>
-              <I.RequiredIndicator />
-              At least one attachment is required.
-            </p>
-          </section>
-          {attachmentList.map(({ name, label, required }) => (
+            {attachmentList.map(({ name, label, required }) => (
+              <I.FormField
+                key={name}
+                control={form.control}
+                name={`attachments.${name}`}
+                render={({ field }) => (
+                  <I.FormItem>
+                    <I.FormLabel>{label}</I.FormLabel>
+                    {
+                      <I.FormDescription>
+                        {name === "cmsForm179"
+                          ? "One attachment is required"
+                          : ""}
+                        {name === "spaPages"
+                          ? "At least one attachment is required"
+                          : ""}
+                      </I.FormDescription>
+                    }
+                    <I.Upload
+                      files={field?.value ?? []}
+                      setFiles={field.onChange}
+                    />
+                    <I.FormMessage />
+                  </I.FormItem>
+                )}
+              />
+            ))}
+          </SectionCard>
+          <SectionCard title="Additional Information">
             <I.FormField
-              key={name}
               control={form.control}
-              name={`attachments.${name}`}
+              name="additionalInformation"
               render={({ field }) => (
                 <I.FormItem>
-                  <I.FormLabel>
-                    {label}
-                    {required ? <I.RequiredIndicator /> : ""}
+                  <I.FormLabel className="font-normal">
+                    Add anything else you would like to share with CMS, limited
+                    to 4000 characters
                   </I.FormLabel>
-                  <I.Upload
-                    files={field?.value ?? []}
-                    setFiles={field.onChange}
-                  />
-                  <I.FormMessage />
+                  <I.Textarea {...field} className="h-[200px] resize-none" />
+                  <I.FormDescription>
+                    4,000 characters allowed
+                  </I.FormDescription>
                 </I.FormItem>
               )}
             />
-          ))}
-          <I.FormField
-            control={form.control}
-            name="additionalInformation"
-            render={({ field }) => (
-              <I.FormItem>
-                <h3 className="font-bold text-2xl font-sans">
-                  Additional Information
-                </h3>
-                <I.FormLabel className="font-normal">
-                  Add anything else you would like to share with CMS, limited to
-                  4000 characters
-                </I.FormLabel>
-                <I.Textarea {...field} className="h-[200px] resize-none" />
-                <I.FormDescription>4,000 characters allowed</I.FormDescription>
-              </I.FormItem>
-            )}
-          />
-          <div className="my-2">
+          </SectionCard>
+          <div className="my-2 w-5/6">
             <i>
               Once you submit this form, a confirmation email is sent to you and
               to CMS. CMS will use this content to review your package, and you
@@ -358,7 +357,7 @@ export const MedicaidForm = () => {
             </i>
           </div>
           {Object.keys(form.formState.errors).length !== 0 ? (
-            <Alert className="mb-6" variant="destructive">
+            <Alert className="mb-6 w-5/6" variant="destructive">
               Missing or malformed information. Please see errors above.
             </Alert>
           ) : null}
@@ -367,7 +366,7 @@ export const MedicaidForm = () => {
               <LoadingSpinner />
             </div>
           ) : null}
-          <div className="flex gap-2">
+          <div className="flex gap-2 justify-end w-5/6">
             <I.Button
               disabled={form.formState.isSubmitting}
               type="submit"