diff --git a/src/Components/Users/UserAdd.tsx b/src/Components/Users/UserAdd.tsx
index fd22eddf470..5a2c580615c 100644
--- a/src/Components/Users/UserAdd.tsx
+++ b/src/Components/Users/UserAdd.tsx
@@ -1,4 +1,3 @@
-import { Card, CardContent, CircularProgress } from "@material-ui/core";
 import loadable from "@loadable/component";
 import { Link, navigate } from "raviger";
 import { parsePhoneNumberFromString } from "libphonenumber-js/max";
@@ -39,9 +38,11 @@ import Checkbox from "../Common/components/CheckBox";
 import DateFormField from "../Form/FormFields/DateFormField";
 import { FieldLabel } from "../Form/FormFields/FormField";
 import useAppHistory from "../../Common/hooks/useAppHistory";
+import Page from "../Common/components/Page";
+import Card from "../../CAREUI/display/Card";
+import CircularProgress from "../Common/components/CircularProgress";
 
 const Loading = loadable(() => import("../Common/Loading"));
-const PageTitle = loadable(() => import("../Common/PageTitle"));
 
 interface UserProps {
   userId?: number;
@@ -632,322 +633,315 @@ export const UserAdd = (props: UserProps) => {
   };
 
   return (
-    <div className="px-2 pb-2">
-      <PageTitle
-        title={headerText}
-        componentRight={
-          <Link
-            href="https://school.coronasafe.network/targets/12953"
-            className="text-gray-600 border border-gray-600 bg-gray-50 hover:bg-gray-100 transition rounded px-4 py-2 inline-block"
-            target="_blank"
-          >
-            <i className="fas fa-info-circle" /> &nbsp;Need Help?
-          </Link>
-        }
-        justifyContents="justify-between"
-        backUrl="/users"
-      />
-
-      <Card className="mt-4">
-        <CardContent>
-          <form onSubmit={(e) => handleSubmit(e)}>
-            <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
-              <div className="md:col-span-2">
-                <FieldLabel>Facilities</FieldLabel>
-                <FacilitySelect
-                  multiple={true}
-                  name="facilities"
-                  selected={selectedFacility}
-                  setSelected={setFacility}
-                  errors={state.errors.facilities}
-                  showAll={false}
-                />
-              </div>
-              <SelectFormField
-                {...field("user_type")}
-                required
-                label="User Type"
-                options={userTypes}
-                optionLabel={(o) =>
-                  o.role + ((o.readOnly && " (Read Only)") || "")
-                }
-                optionValue={(o) => o.id}
-              />
-
-              {state.form.user_type === "Doctor" && (
-                <>
-                  <TextFormField
-                    {...field("doctor_qualification")}
-                    required
-                    label="Qualification"
-                    placeholder="Qualification of the Doctor"
-                  />
-
-                  <TextFormField
-                    {...field("doctor_experience_commenced_on")}
-                    required
-                    min={0}
-                    type="number"
-                    label="Years of experience"
-                    placeholder="Years of experience of the Doctor"
-                  />
-
-                  <TextFormField
-                    {...field("doctor_medical_council_registration")}
-                    required
-                    label="Medical Council Registration"
-                    placeholder="Doctor's medical council registration number"
-                  />
-                </>
-              )}
-
-              <SelectFormField
-                {...field("home_facility")}
-                label="Home facility"
-                options={selectedFacility || []}
-                optionLabel={(option) => option.name}
-                optionValue={(option) => option.id}
-                onChange={handleFieldChange}
+    <Page
+      title={headerText}
+      options={
+        <Link
+          href="https://school.coronasafe.network/targets/12953"
+          className="text-gray-600 border border-gray-600 bg-gray-50 hover:bg-gray-100 transition rounded px-4 py-2 inline-block"
+          target="_blank"
+        >
+          <i className="fas fa-info-circle" /> &nbsp;Need Help?
+        </Link>
+      }
+      backUrl="/users"
+    >
+      <Card>
+        <form onSubmit={(e) => handleSubmit(e)}>
+          <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
+            <div className="md:col-span-2">
+              <FieldLabel>Facilities</FieldLabel>
+              <FacilitySelect
+                multiple={true}
+                name="facilities"
+                selected={selectedFacility}
+                setSelected={setFacility}
+                errors={state.errors.facilities}
+                showAll={false}
               />
-
-              <div>
-                <PhoneNumberFormField
-                  {...field("phone_number")}
-                  placeholder="Phone Number"
-                  label="Phone Number"
+            </div>
+            <SelectFormField
+              {...field("user_type")}
+              required
+              label="User Type"
+              options={userTypes}
+              optionLabel={(o) =>
+                o.role + ((o.readOnly && " (Read Only)") || "")
+              }
+              optionValue={(o) => o.id}
+            />
+
+            {state.form.user_type === "Doctor" && (
+              <>
+                <TextFormField
+                  {...field("doctor_qualification")}
                   required
-                  onlyIndia
+                  label="Qualification"
+                  placeholder="Qualification of the Doctor"
                 />
-                <Checkbox
-                  checked={phoneIsWhatsApp}
-                  onCheck={setPhoneIsWhatsApp}
-                  label="Is the phone number a WhatsApp number?"
+
+                <TextFormField
+                  {...field("doctor_experience_commenced_on")}
+                  required
+                  min={0}
+                  type="number"
+                  label="Years of experience"
+                  placeholder="Years of experience of the Doctor"
                 />
-              </div>
 
+                <TextFormField
+                  {...field("doctor_medical_council_registration")}
+                  required
+                  label="Medical Council Registration"
+                  placeholder="Doctor's medical council registration number"
+                />
+              </>
+            )}
+
+            <SelectFormField
+              {...field("home_facility")}
+              label="Home facility"
+              options={selectedFacility || []}
+              optionLabel={(option) => option.name}
+              optionValue={(option) => option.id}
+              onChange={handleFieldChange}
+            />
+
+            <div>
               <PhoneNumberFormField
-                {...field("alt_phone_number")}
-                placeholder="WhatsApp Phone Number"
-                label="Whatsapp Number"
-                disabled={phoneIsWhatsApp}
+                {...field("phone_number")}
+                placeholder="Phone Number"
+                label="Phone Number"
+                required
                 onlyIndia
               />
+              <Checkbox
+                checked={phoneIsWhatsApp}
+                onCheck={setPhoneIsWhatsApp}
+                label="Is the phone number a WhatsApp number?"
+              />
+            </div>
 
-              <div>
-                <TextFormField
-                  {...field("username")}
-                  label="Username"
-                  placeholder="Username"
-                  required
-                  autoComplete="new-username"
-                  value={usernameInput}
-                  onChange={(e) => {
-                    handleFieldChange(e);
-                    setUsernameInput(e.value);
-                  }}
-                  onFocus={() => setUsernameInputInFocus(true)}
-                  onBlur={() => {
-                    setUsernameInputInFocus(false);
-                  }}
-                />
-                {usernameInputInFocus && (
-                  <div className="pl-2 text-small text-gray-500">
-                    <div>
-                      {usernameExists !== userExistsEnums.idle && (
-                        <>
-                          {usernameExists === userExistsEnums.checking ? (
-                            <span>
-                              <i className="fas fa-circle-dot" /> checking...
-                            </span>
-                          ) : (
-                            <>
-                              {usernameExists === userExistsEnums.exists ? (
-                                <div>
-                                  <i className="fas fa-circle-xmark text-red-500" />{" "}
-                                  <span className="text-red-500">
-                                    Username is not available
-                                  </span>
-                                </div>
-                              ) : (
-                                <div>
-                                  <i className="fas fa-circle-check text-green-500" />{" "}
-                                  <span className="text-primary-500">
-                                    Username is available
-                                  </span>
-                                </div>
-                              )}
-                            </>
-                          )}
-                        </>
-                      )}
-                    </div>
-                    <div>
-                      {validateRule(
-                        state.form.username?.length >= 2,
-                        "Username should be atleast 2 characters long"
-                      )}
-                    </div>
-                    <div>
-                      {validateRule(
-                        /[^.@+_-]/.test(
-                          state.form.username[state.form.username?.length - 1]
-                        ),
-                        "Username can't end with ^ . @ + _ -"
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
+            <PhoneNumberFormField
+              {...field("alt_phone_number")}
+              placeholder="WhatsApp Phone Number"
+              label="Whatsapp Number"
+              disabled={phoneIsWhatsApp}
+              onlyIndia
+            />
 
-              <DateFormField
-                {...field("date_of_birth")}
-                label="Date of Birth"
+            <div>
+              <TextFormField
+                {...field("username")}
+                label="Username"
+                placeholder="Username"
                 required
-                value={getDate(state.form.date_of_birth)}
-                onChange={handleDateChange}
-                position="LEFT"
-                disableFuture
+                autoComplete="new-username"
+                value={usernameInput}
+                onChange={(e) => {
+                  handleFieldChange(e);
+                  setUsernameInput(e.value);
+                }}
+                onFocus={() => setUsernameInputInFocus(true)}
+                onBlur={() => {
+                  setUsernameInputInFocus(false);
+                }}
               />
-
-              <div>
-                <TextFormField
-                  {...field("password")}
-                  label="Password"
-                  placeholder="Password"
-                  required
-                  autoComplete="new-password"
-                  type="password"
-                  onFocus={() => setPasswordInputInFocus(true)}
-                  onBlur={() => setPasswordInputInFocus(false)}
-                />
-                {passwordInputInFocus && (
-                  <div className="pl-2 text-small text-gray-500">
-                    {validateRule(
-                      state.form.password?.length >= 8,
-                      "Password should be atleast 8 characters long"
-                    )}
-                    {validateRule(
-                      state.form.password !== state.form.password.toUpperCase(),
-                      "Password should contain at least 1 lowercase letter"
+              {usernameInputInFocus && (
+                <div className="pl-2 text-small text-gray-500">
+                  <div>
+                    {usernameExists !== userExistsEnums.idle && (
+                      <>
+                        {usernameExists === userExistsEnums.checking ? (
+                          <span>
+                            <i className="fas fa-circle-dot" /> checking...
+                          </span>
+                        ) : (
+                          <>
+                            {usernameExists === userExistsEnums.exists ? (
+                              <div>
+                                <i className="fas fa-circle-xmark text-red-500" />{" "}
+                                <span className="text-red-500">
+                                  Username is not available
+                                </span>
+                              </div>
+                            ) : (
+                              <div>
+                                <i className="fas fa-circle-check text-green-500" />{" "}
+                                <span className="text-primary-500">
+                                  Username is available
+                                </span>
+                              </div>
+                            )}
+                          </>
+                        )}
+                      </>
                     )}
+                  </div>
+                  <div>
                     {validateRule(
-                      state.form.password !== state.form.password.toLowerCase(),
-                      "Password should contain at least 1 uppercase letter"
+                      state.form.username?.length >= 2,
+                      "Username should be atleast 2 characters long"
                     )}
+                  </div>
+                  <div>
                     {validateRule(
-                      /\d/.test(state.form.password),
-                      "Password should contain at least 1 number"
+                      /[^.@+_-]/.test(
+                        state.form.username[state.form.username?.length - 1]
+                      ),
+                      "Username can't end with ^ . @ + _ -"
                     )}
                   </div>
-                )}
-              </div>
-              <div>
-                <TextFormField
-                  {...field("c_password")}
-                  label="Confirm Password"
-                  placeholder="Confirm Password"
-                  required
-                  type="password"
-                  autoComplete="off"
-                  onFocus={() => setConfirmPasswordInputInFocus(true)}
-                  onBlur={() => setConfirmPasswordInputInFocus(false)}
-                />
-                {confirmPasswordInputInFocus &&
-                  state.form.c_password.length > 0 &&
-                  validateRule(
-                    state.form.c_password === state.form.password,
-                    "Confirm password should match the entered password"
-                  )}
-              </div>
+                </div>
+              )}
+            </div>
+
+            <DateFormField
+              {...field("date_of_birth")}
+              label="Date of Birth"
+              required
+              value={getDate(state.form.date_of_birth)}
+              onChange={handleDateChange}
+              position="LEFT"
+              disableFuture
+            />
+
+            <div>
               <TextFormField
-                {...field("first_name")}
-                label="First name"
-                placeholder="First name"
+                {...field("password")}
+                label="Password"
+                placeholder="Password"
                 required
+                autoComplete="new-password"
+                type="password"
+                onFocus={() => setPasswordInputInFocus(true)}
+                onBlur={() => setPasswordInputInFocus(false)}
               />
+              {passwordInputInFocus && (
+                <div className="pl-2 text-small text-gray-500">
+                  {validateRule(
+                    state.form.password?.length >= 8,
+                    "Password should be atleast 8 characters long"
+                  )}
+                  {validateRule(
+                    state.form.password !== state.form.password.toUpperCase(),
+                    "Password should contain at least 1 lowercase letter"
+                  )}
+                  {validateRule(
+                    state.form.password !== state.form.password.toLowerCase(),
+                    "Password should contain at least 1 uppercase letter"
+                  )}
+                  {validateRule(
+                    /\d/.test(state.form.password),
+                    "Password should contain at least 1 number"
+                  )}
+                </div>
+              )}
+            </div>
+            <div>
               <TextFormField
-                {...field("last_name")}
-                label="Last name"
-                placeholder="Last name"
+                {...field("c_password")}
+                label="Confirm Password"
+                placeholder="Confirm Password"
                 required
+                type="password"
+                autoComplete="off"
+                onFocus={() => setConfirmPasswordInputInFocus(true)}
+                onBlur={() => setConfirmPasswordInputInFocus(false)}
               />
-              <TextFormField
-                {...field("email")}
-                label="Email"
-                placeholder="Email"
+              {confirmPasswordInputInFocus &&
+                state.form.c_password.length > 0 &&
+                validateRule(
+                  state.form.c_password === state.form.password,
+                  "Confirm password should match the entered password"
+                )}
+            </div>
+            <TextFormField
+              {...field("first_name")}
+              label="First name"
+              placeholder="First name"
+              required
+            />
+            <TextFormField
+              {...field("last_name")}
+              label="Last name"
+              placeholder="Last name"
+              required
+            />
+            <TextFormField
+              {...field("email")}
+              label="Email"
+              placeholder="Email"
+              required
+            />
+            <SelectFormField
+              {...field("gender")}
+              label="Gender"
+              required
+              value={state.form.gender}
+              options={GENDER_TYPES}
+              optionLabel={(o) => o.text}
+              optionValue={(o) => o.text}
+            />
+
+            {isStateLoading ? (
+              <CircularProgress />
+            ) : (
+              <SelectFormField
+                {...field("state")}
+                label="State"
                 required
+                placeholder="Choose State"
+                options={states}
+                optionLabel={(o) => o.name}
+                optionValue={(o) => o.id}
+                onChange={(e) => {
+                  handleFieldChange(e);
+                  if (e) fetchDistricts(e.value);
+                }}
               />
+            )}
+
+            {isDistrictLoading ? (
+              <CircularProgress />
+            ) : (
               <SelectFormField
-                {...field("gender")}
-                label="Gender"
+                {...field("district")}
+                label="District"
                 required
-                value={state.form.gender}
-                options={GENDER_TYPES}
-                optionLabel={(o) => o.text}
-                optionValue={(o) => o.text}
+                placeholder="Choose District"
+                options={districts}
+                optionLabel={(o) => o.name}
+                optionValue={(o) => o.id}
+                onChange={(e) => {
+                  handleFieldChange(e);
+                  if (e) fetchLocalBody(e.value);
+                }}
               />
+            )}
 
-              {isStateLoading ? (
-                <CircularProgress size={20} />
-              ) : (
-                <SelectFormField
-                  {...field("state")}
-                  label="State"
-                  required
-                  placeholder="Choose State"
-                  options={states}
-                  optionLabel={(o) => o.name}
-                  optionValue={(o) => o.id}
-                  onChange={(e) => {
-                    handleFieldChange(e);
-                    if (e) fetchDistricts(e.value);
-                  }}
-                />
-              )}
-
-              {isDistrictLoading ? (
-                <CircularProgress size={20} />
+            {showLocalbody &&
+              (isLocalbodyLoading ? (
+                <CircularProgress />
               ) : (
                 <SelectFormField
-                  {...field("district")}
-                  label="District"
+                  {...field("local_body")}
+                  label="Local Body"
                   required
-                  placeholder="Choose District"
-                  options={districts}
+                  position="above"
+                  placeholder="Choose Local Body"
+                  options={localBodies}
                   optionLabel={(o) => o.name}
                   optionValue={(o) => o.id}
-                  onChange={(e) => {
-                    handleFieldChange(e);
-                    if (e) fetchLocalBody(e.value);
-                  }}
                 />
-              )}
-
-              {showLocalbody &&
-                (isLocalbodyLoading ? (
-                  <CircularProgress size={20} />
-                ) : (
-                  <>
-                    <SelectFormField
-                      {...field("local_body")}
-                      label="Local Body"
-                      required
-                      position="above"
-                      placeholder="Choose Local Body"
-                      options={localBodies}
-                      optionLabel={(o) => o.name}
-                      optionValue={(o) => o.id}
-                    />
-                  </>
-                ))}
-            </div>
-            <div className="flex flex-col md:flex-row gap-2 justify-between mt-4">
-              <Cancel onClick={() => goBack()} />
-              <Submit onClick={handleSubmit} label={buttonText} />
-            </div>
-          </form>
-        </CardContent>
+              ))}
+          </div>
+          <div className="flex flex-col md:flex-row gap-2 justify-end mt-4">
+            <Cancel onClick={() => goBack()} />
+            <Submit onClick={handleSubmit} label={buttonText} />
+          </div>
+        </form>
       </Card>
-    </div>
+    </Page>
   );
 };