diff --git a/src/FeatureBasedEnrollments/FeatureBasedEnrollmentIndexPage.jsx b/src/FeatureBasedEnrollments/FeatureBasedEnrollmentIndexPage.jsx
index 9f71b4e39..50611be6a 100644
--- a/src/FeatureBasedEnrollments/FeatureBasedEnrollmentIndexPage.jsx
+++ b/src/FeatureBasedEnrollments/FeatureBasedEnrollmentIndexPage.jsx
@@ -8,7 +8,7 @@ import React, {
   useLayoutEffect,
 } from 'react';
 import PropTypes from 'prop-types';
-import { Input, Button } from '@edx/paragon';
+import { Button, Form } from '@edx/paragon';
 
 import UserMessagesContext from '../userMessages/UserMessagesContext';
 import AlertList from '../userMessages/AlertList';
@@ -82,8 +82,8 @@ export default function FeatureBasedEnrollmentIndexPage({ location }) {
   // To change the url with appropriate query param if query param info is not present in URL
   useLayoutEffect(() => {
     if (searchValue
-        && location.pathname.indexOf(TAB_PATH_MAP[FEATURE_BASED_ENROLLMENT_TAB]) !== -1
-        && !params.get('course_id')) {
+      && location.pathname.indexOf(TAB_PATH_MAP[FEATURE_BASED_ENROLLMENT_TAB]) !== -1
+      && !params.get('course_id')) {
       pushHistoryIfChanged(`${TAB_PATH_MAP[FEATURE_BASED_ENROLLMENT_TAB]}/?course_id=${searchValue}`);
     }
   });
@@ -94,11 +94,21 @@ export default function FeatureBasedEnrollmentIndexPage({ location }) {
       <AlertList topic="featureBasedEnrollmentGeneral" className="mb-3" />
 
       <section className="mb-3">
-        <form className="form-inline">
-          <label htmlFor="courseId">Course ID</label>
-          <Input ref={searchRef} className="mr-1 ml-1 col-sm-4" name="courseId" type="text" defaultValue={searchValue} />
-          <Button type="submit" onClick={submit} className="ml-1 col-sm-1" variant="primary">Search</Button>
-        </form>
+        <Form className="m-0">
+          <Form.Group>
+            <Form.Row>
+              <Form.Label className="mt-2" htmlFor="courseId">Course ID</Form.Label>
+              <Form.Control
+                ref={searchRef}
+                className="ml-1 mr-2 col-sm-4"
+                name="courseId"
+                defaultValue={searchValue}
+              />
+
+              <Button type="submit" onClick={submit} className="col-sm-1" variant="primary">Search</Button>
+            </Form.Row>
+          </Form.Group>
+        </Form>
       </section>
 
       {searchValue && <FeatureBasedEnrollment courseId={searchValue} apiFetchSignal={apiFetchSignal} />}
diff --git a/src/ProgramEnrollments/LinkProgramEnrollments.jsx b/src/ProgramEnrollments/LinkProgramEnrollments.jsx
index b781664ee..260ab67d6 100644
--- a/src/ProgramEnrollments/LinkProgramEnrollments.jsx
+++ b/src/ProgramEnrollments/LinkProgramEnrollments.jsx
@@ -1,4 +1,4 @@
-import { Input, Button } from '@edx/paragon';
+import { Button, Form } from '@edx/paragon';
 import React, { useState, useCallback } from 'react';
 import getLinkProgramEnrollmentDetails from './data/api';
 import LinkProgramEnrollmentsTable from './LinkProgramEnrollmentsTable';
@@ -45,33 +45,38 @@ export default function LinkProgramEnrollments() {
     <>
       <h3>Link Program Enrollments</h3>
       <section className="my-3">
-        <form>
+        <Form>
           <div className="my-2">
-            <label htmlFor="programUUID">Program UUID</label>
-            <Input
-              className="mr-1 col-sm-12"
-              name="programUUID"
-              type="text"
-              defaultValue={programID}
-              onChange={onProgramChange}
-            />
+            <Form.Group>
+              <Form.Label htmlFor="programUUID">Program UUID</Form.Label>
+
+              <Form.Control
+                name="programUUID"
+                defaultValue={programID}
+                type="text"
+                onChange={onProgramChange}
+              />
+            </Form.Group>
           </div>
           <div className="my-4">
-            <label
-              className="d-flex align-items-start"
-              htmlFor="usernamePairText"
-            >
-              List of External key and username pairings (one per line)
-            </label>
-            <Input
-              className="mr-1 col-sm-12"
-              name="usernamePairText"
-              type="textarea"
-              rows="10"
-              onChange={onUserTextChange}
-              defaultValue={usernamePairText}
-              placeholder="external_user_key,lms_username"
-            />
+
+            <Form.Group>
+              <Form.Label
+                className="d-flex align-items-start"
+                htmlFor="usernamePairText"
+              >
+                List of External key and username pairings (one per line)
+              </Form.Label>
+              <Form.Control
+                name="usernamePairText"
+                as="textarea"
+                autoResize
+                rows="10"
+                onChange={onUserTextChange}
+                defaultValue={usernamePairText}
+                placeholder="external_user_key,lms_username"
+              />
+            </Form.Group>
           </div>
           <Button
             type="submit"
@@ -80,15 +85,15 @@ export default function LinkProgramEnrollments() {
           >
             Submit
           </Button>
-        </form>
+        </Form>
       </section>
       {((errorMessage && errorMessage.length > 0)
-      || (successMessage && successMessage.length > 0)) && (
-        <LinkProgramEnrollmentsTable
-          successMessage={successMessage}
-          errorMessage={errorMessage}
-          usernamePairText={usernamePairText}
-        />
+        || (successMessage && successMessage.length > 0)) && (
+          <LinkProgramEnrollmentsTable
+            successMessage={successMessage}
+            errorMessage={errorMessage}
+            usernamePairText={usernamePairText}
+          />
       )}
     </>
   );
diff --git a/src/ProgramEnrollments/ProgramInspector/ProgramInspector.jsx b/src/ProgramEnrollments/ProgramInspector/ProgramInspector.jsx
index c529abc04..910691792 100644
--- a/src/ProgramEnrollments/ProgramInspector/ProgramInspector.jsx
+++ b/src/ProgramEnrollments/ProgramInspector/ProgramInspector.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Alert, Col, Row, Button, Input,
+  Alert, Col, Row, Button, Form,
 } from '@edx/paragon';
 import { history } from '@edx/frontend-platform';
 import { getSsoRecords } from '../../users/data/api';
@@ -26,12 +26,12 @@ export default function ProgramInspector({ location }) {
   const [clickEventCall, setClickEventCall] = useState(false);
 
   const getOrgKeyList = () => (orgKeyList
-    ? orgKeyList.map((data) => ({
-      value: data,
-      label: data,
-    }))
+    ? orgKeyList.map((data) => ((
+      <option key={data} value={data}>
+        {data}
+      </option>
+    )))
     : orgKeyList);
-
   const handleSubmit = () => {
     if (!username && !externalUserKey) {
       setUsername(undefined);
@@ -40,8 +40,7 @@ export default function ProgramInspector({ location }) {
       setSsoRecords([]);
       history.push('/programs');
     } else {
-      const newLink = `/programs?edx_user=${
-        username || ''
+      const newLink = `/programs?edx_user=${username || ''
       }&org_key=${activeOrgKey}&external_user_key=${externalUserKey || ''}`;
       if (newLink === location.pathname + location.search) {
         setClickEventCall(!clickEventCall);
@@ -113,50 +112,55 @@ export default function ProgramInspector({ location }) {
       )}
       <h3>Program Enrollments Inspector</h3>
       <section className="my-3">
-        <form>
+        <Form>
           <div className="d-flex">
             <div className="col-sm-4 pl-0">
-              <label htmlFor="username">edX username or email</label>
-              <Input
-                className="col-sm-12"
-                name="username"
-                type="text"
-                defaultValue={username}
-                onChange={(e) => (e.target.value
-                  ? setUsername(e.target.value)
-                  : setUsername(undefined))}
-                placeholder="edx@example.com"
-              />
+              <Form.Group>
+                <Form.Label htmlFor="username"> edX username or email</Form.Label>
+                <Form.Control
+                  name="username"
+                  defaultValue={username}
+                  onChange={(e) => (e.target.value
+                    ? setUsername(e.target.value)
+                    : setUsername(undefined))}
+                  placeholder="edx@example.com"
+                />
+              </Form.Group>
             </div>
             <div className="col-sm-4">
-              <label htmlFor="orgKey">Identity-providing institution</label>
-              <Input
-                className="col-sm-12"
-                name="orgKey"
-                type="select"
-                defaultValue={activeOrgKey}
-                options={getOrgKeyList()}
-                onChange={(e) => setActiveOrgKey(e.target.value)}
-              />
+
+              <Form.Group>
+                <Form.Label htmlFor="orgKey">Identity-providing institution</Form.Label>
+
+                <Form.Control
+                  name="orgKey"
+                  as="select"
+                  defaultValue={activeOrgKey}
+                  onChange={(e) => setActiveOrgKey(e.target.value)}
+                >
+                  {getOrgKeyList()}
+                </Form.Control>
+              </Form.Group>
             </div>
             <div className="col-sm-4 pr-0">
-              <label htmlFor="externalKey">Institution user key</label>
-              <Input
-                className="col-sm-12"
-                name="externalKey"
-                type="text"
-                defaultValue={externalUserKey}
-                onChange={(e) => (e.target.value
-                  ? setExternalUserKey(e.target.value)
-                  : setExternalUserKey(undefined))}
-                placeholder="ex. GTPersonDirectoryID for GT Students"
-              />
+              <Form.Group>
+                <Form.Label htmlFor="externalKey">Institution user key</Form.Label>
+
+                <Form.Control
+                  name="externalKey"
+                  defaultValue={externalUserKey}
+                  onChange={(e) => (e.target.value
+                    ? setExternalUserKey(e.target.value)
+                    : setExternalUserKey(undefined))}
+                  placeholder="ex. GTPersonDirectoryID for GT Students"
+                />
+              </Form.Group>
             </div>
           </div>
           <Button type="submit" className="mt-4" onClick={submit}>
             Search Program Records
           </Button>
-        </form>
+        </Form>
       </section>
 
       {learnerProgramEnrollment && learnerProgramEnrollment.user && (
diff --git a/src/users/EntitlementsAndEnrollmentsContainer.jsx b/src/users/EntitlementsAndEnrollmentsContainer.jsx
index 701b2af5a..6830d4ca9 100644
--- a/src/users/EntitlementsAndEnrollmentsContainer.jsx
+++ b/src/users/EntitlementsAndEnrollmentsContainer.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Input } from '@edx/paragon';
+import { Form } from '@edx/paragon';
 import Enrollments from './enrollments/Enrollments';
 import Entitlements from './entitlements/Entitlements';
 
@@ -12,7 +12,13 @@ export default function EntitlementsAndEnrollmentsContainer({
   return (
     <div id="entitlementsAndEnrollmentsContainer">
       <div className="mb-2 p-2 background-light-gray">
-        <Input name="courseId" className="mr-1 col-sm-4" type="text" placeholder="Course ID or Name" defaultValue={searchValue} onChange={(e) => { setSearchValue(e.target.value.toLowerCase()); }} />
+        <Form.Control
+          placeholder="Course ID or Name"
+          className="mr-1 col-sm-4"
+          name="courseId"
+          defaultValue={searchValue}
+          onChange={(e) => { setSearchValue(e.target.value.toLowerCase()); }}
+        />
       </div>
       <Entitlements
         user={user}
diff --git a/src/users/UserSearch.jsx b/src/users/UserSearch.jsx
index 7e21cf12f..24246c068 100644
--- a/src/users/UserSearch.jsx
+++ b/src/users/UserSearch.jsx
@@ -3,7 +3,7 @@ import React, {
 } from 'react';
 import PropTypes from 'prop-types';
 
-import { Input, Button } from '@edx/paragon';
+import { Button, Form } from '@edx/paragon';
 
 export default function UserSearch({ userIdentifier, searchHandler }) {
   const searchRef = useRef();
@@ -16,11 +16,19 @@ export default function UserSearch({ userIdentifier, searchHandler }) {
 
   return (
     <section className="mb-3">
-      <form className="form-inline">
-        <label htmlFor="userIdentifier">Username, Email or LMS User ID</label>
-        <Input ref={searchRef} className="flex-grow-1 ml-1 mr-1" name="userIdentifier" type="text" defaultValue={userIdentifier} />
+      <Form className="m-0 row">
+        <Form.Label className="mt-2" htmlFor="userIdentifier">Username, Email or LMS User ID</Form.Label>
+        <Form.Control
+          as="input"
+          ref={searchRef}
+          className="flex-grow-1 ml-1 mr-1"
+          name="userIdentifier"
+          defaultValue={userIdentifier}
+        />
+
         <Button type="submit" onClick={submit} variant="primary">Search</Button>
-      </form>
+      </Form>
+
     </section>
   );
 }
diff --git a/src/users/__snapshots__/UserSearch.test.jsx.snap b/src/users/__snapshots__/UserSearch.test.jsx.snap
index a7bf7b11b..d7a9d7b57 100644
--- a/src/users/__snapshots__/UserSearch.test.jsx.snap
+++ b/src/users/__snapshots__/UserSearch.test.jsx.snap
@@ -5,19 +5,25 @@ exports[`User Search Page renders correctly matches snapshot 1`] = `
   className="mb-3"
 >
   <form
-    className="form-inline"
+    className="m-0 row"
   >
     <label
+      className="pgn__form-label mt-2"
       htmlFor="userIdentifier"
     >
       Username, Email or LMS User ID
     </label>
-    <input
-      className="form-control flex-grow-1 ml-1 mr-1"
-      defaultValue=""
-      name="userIdentifier"
-      type="text"
-    />
+    <div
+      className="pgn__form-control-decorator-group flex-grow-1 ml-1 mr-1"
+    >
+      <input
+        className="form-control"
+        defaultValue=""
+        name="userIdentifier"
+        onBlur={[Function]}
+        onChange={[Function]}
+      />
+    </div>
     <button
       className="btn btn-primary"
       disabled={false}
diff --git a/src/users/account-actions/TogglePasswordStatus.jsx b/src/users/account-actions/TogglePasswordStatus.jsx
index 6f5a8579e..53b1acaac 100644
--- a/src/users/account-actions/TogglePasswordStatus.jsx
+++ b/src/users/account-actions/TogglePasswordStatus.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Button, Input, Alert, ModalDialog, ActionRow,
+  Button, Alert, ModalDialog, ActionRow, Form,
 } from '@edx/paragon';
 import { postTogglePasswordStatus } from '../data/api';
 
@@ -44,20 +44,23 @@ export default function TogglePasswordStatus({
             {`${passwordStatus.status === PASSWORD_STATUS.USABLE ? DISABLE_USER_CONFIRMATION : ENABLE_USER_CONFIRMATION}`}
           </ModalDialog.Title>
         </ModalDialog.Header>
-        <ModalDialog.Body className="mb-3">
+        <ModalDialog.Body className="mb-2">
           <div>
             <Alert variant="warning">
               <p>
                 Please provide the reason for {`${passwordStatus.status === PASSWORD_STATUS.USABLE ? 'disabling' : 'enabling'}`} the user <b>{username}</b>.
               </p>
             </Alert>
-            <label htmlFor="comment">Reason: </label>
-            <Input
-              name="comment"
-              type="text"
-              value={comment}
-              onChange={(event) => setComment(event.target.value)}
-            />
+
+            <Form.Group>
+              <Form.Label htmlFor="comment">Reason:</Form.Label>
+
+              <Form.Control
+                name="comment"
+                value={comment}
+                onChange={(event) => setComment(event.target.value)}
+              />
+            </Form.Group>
           </div>
         </ModalDialog.Body>
         <ModalDialog.Footer>
diff --git a/src/users/entitlements/CreateEntitlementForm.jsx b/src/users/entitlements/CreateEntitlementForm.jsx
index d3f5e8814..57a4faada 100644
--- a/src/users/entitlements/CreateEntitlementForm.jsx
+++ b/src/users/entitlements/CreateEntitlementForm.jsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import {
   ActionRow,
-  Button, Input, ModalDialog,
+  Button, ModalDialog, Form,
 } from '@edx/paragon';
 
 import UserMessagesContext from '../../userMessages/UserMessagesContext';
@@ -25,6 +25,15 @@ export default function CreateEntitlementForm({
   const [showLoader, setShowLoader] = useState(false);
   const { add, clear } = useContext(UserMessagesContext);
 
+  const modeOptions = [
+    {
+      label: 'Mode', value: '', disabled: true, selected: 'true',
+    },
+    { label: 'Verified', value: 'verified' },
+    { label: 'Professional', value: 'professional' },
+    { label: 'No ID Professional', value: 'no-id-professional' },
+  ];
+
   const submit = useCallback(() => {
     clear('createEntitlement');
     setShowLoader(true);
@@ -58,41 +67,53 @@ export default function CreateEntitlementForm({
   });
 
   const createEntitlementForm = (
-    <form>
+    <Form>
       <AlertList topic="createEntitlement" className="mb-3" />
-      <Input
-        className="mb-4"
-        type="text"
-        id="courseUuid"
-        name="courseUuid"
-        placeholder="Course UUID"
-        value={courseUuid}
-        onChange={(event) => setCourseUuid(event.target.value)}
-        ref={forwardedRef}
-      />
-      <Input
-        className="mb-4"
-        type="select"
-        id="mode"
-        name="mode"
-        defaultValue=""
-        options={[
-          { label: 'Mode', value: '', disabled: true },
-          { label: 'Verified', value: 'verified' },
-          { label: 'Professional', value: 'professional' },
-          { label: 'No ID Professional', value: 'no-id-professional' },
-        ]}
-        onChange={(event) => setMode(event.target.value)}
-      />
-      <Input
-        placeholder="Explanation"
-        type="textarea"
-        id="comments"
-        name="comments"
-        defaultValue=""
-        onChange={(event) => setComments(event.target.value)}
-      />
-    </form>
+      <Form.Group>
+        <Form.Control
+          className="mb-4"
+          id="courseUuid"
+          name="courseUuid"
+          placeholder="Course UUID"
+          value={courseUuid}
+          onChange={(event) => setCourseUuid(event.target.value)}
+          ref={forwardedRef}
+        />
+      </Form.Group>
+
+      <Form.Group>
+        <Form.Control
+          className="mb-4"
+          as="select"
+          id="mode"
+          name="mode"
+          defaultValue=""
+          onChange={(event) => setMode(event.target.value)}
+        >
+          {modeOptions.map(item => (
+            <option
+              value={item.value}
+              disabled={item.disabled}
+              selected={item.selected}
+              key={item.value}
+            >
+              {item.label}
+            </option>
+          ))}
+        </Form.Control>
+      </Form.Group>
+      <Form.Group>
+        <Form.Control
+          placeholder="Explanation"
+          as="textarea"
+          autoResize
+          id="comments"
+          name="comments"
+          defaultValue=""
+          onChange={(event) => setComments(event.target.value)}
+        />
+      </Form.Group>
+    </Form>
   );
 
   return (
@@ -113,7 +134,7 @@ export default function CreateEntitlementForm({
         </ModalDialog.Title>
       </ModalDialog.Header>
       <ModalDialog.Body>
-        { createEntitlementForm}
+        {createEntitlementForm}
       </ModalDialog.Body>
       <ModalDialog.Footer>
         <ActionRow>
@@ -122,7 +143,7 @@ export default function CreateEntitlementForm({
           >
             Close
           </ModalDialog.CloseButton>
-          { showLoader
+          {showLoader
             ? (<div className="spinner-border text-primary" role="status" />)
             : (
               <Button
diff --git a/src/users/entitlements/CreateEntitlementForm.test.jsx b/src/users/entitlements/CreateEntitlementForm.test.jsx
index dc488d2d1..39d2e4b35 100644
--- a/src/users/entitlements/CreateEntitlementForm.test.jsx
+++ b/src/users/entitlements/CreateEntitlementForm.test.jsx
@@ -27,9 +27,9 @@ describe('Create Entitlement Form', () => {
   it('Default form render', () => {
     let createFormModal = wrapper.find('ModalDialog#create-entitlement');
     expect(createFormModal.prop('isOpen')).toEqual(true);
-    const courseUuidInput = wrapper.find('input#courseUuid');
-    const modeSelectDropdown = wrapper.find('select#mode');
-    const commentsTextArea = wrapper.find('textarea#comments');
+    const courseUuidInput = wrapper.find('#courseUuid');
+    const modeSelectDropdown = wrapper.find('#mode');
+    const commentsTextArea = wrapper.find('#comments');
     expect(courseUuidInput.prop('value')).toEqual(entitlementFormData.entitlement.courseUuid);
     expect(modeSelectDropdown.find('option')).toHaveLength(4);
     expect(commentsTextArea.text()).toEqual('');
@@ -48,9 +48,9 @@ describe('Create Entitlement Form', () => {
       const apiMock = jest.spyOn(api, 'postEntitlement').mockImplementationOnce(() => Promise.resolve({}));
       expect(apiMock).toHaveBeenCalledTimes(0);
 
-      wrapper.find('input#courseUuid').simulate('change', { target: { value: 'b4f19c72-784d-4110-a3ba-318666a7db1a' } });
-      wrapper.find('select#mode').simulate('change', { target: { value: 'professional' } });
-      wrapper.find('textarea#comments').simulate('change', { target: { value: 'creating new entitlement' } });
+      wrapper.find('input.form-control').simulate('change', { target: { value: 'b4f19c72-784d-4110-a3ba-318666a7db1a' } });
+      wrapper.find('select.form-control').at(0).simulate('change', { target: { value: 'professional' } });
+      wrapper.find('textarea.form-control').simulate('change', { target: { value: 'creating new entitlement' } });
       const submitButton = wrapper.find('button.btn-primary');
       expect(submitButton.prop('disabled')).toBeFalsy();
       expect(wrapper.find('div.spinner-border').length).toEqual(0);
@@ -78,7 +78,7 @@ describe('Create Entitlement Form', () => {
       }));
       expect(apiMock).toHaveBeenCalledTimes(0);
 
-      wrapper.find('textarea#comments').simulate('change', { target: { value: 'creating new entitlement' } });
+      wrapper.find('textarea.form-control').simulate('change', { target: { value: 'creating new entitlement' } });
       wrapper.find('button.btn-primary').simulate('click');
       await waitForComponentToPaint(wrapper);
 
diff --git a/src/users/entitlements/ExpireEntitlementForm.jsx b/src/users/entitlements/ExpireEntitlementForm.jsx
index 7c88d7230..c5fd70ce7 100644
--- a/src/users/entitlements/ExpireEntitlementForm.jsx
+++ b/src/users/entitlements/ExpireEntitlementForm.jsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import {
   ActionRow,
-  Button, Input, ModalDialog,
+  Button, ModalDialog, Form,
 } from '@edx/paragon';
 
 import UserMessagesContext from '../../userMessages/UserMessagesContext';
@@ -56,7 +56,7 @@ export default function ExpireEntitlementForm({
   });
 
   const expireEntitlementForm = (
-    <form>
+    <Form>
       <AlertList topic="expireEntitlement" className="mb-3" />
       <div className="row small">
         <div className="col-sm-6">
@@ -77,17 +77,20 @@ export default function ExpireEntitlementForm({
         </div>
       </div>
       <hr />
-      <Input
-        type="textarea"
-        id="comments"
-        name="comments"
-        placeholder="Explanation"
-        defaultValue=""
-        onChange={(event) => setComments(event.target.value)}
-        disabled={hideSubmit}
-        ref={forwardedRef}
-      />
-    </form>
+
+      <Form.Group>
+        <Form.Control
+          as="textarea"
+          id="comments"
+          name="comments"
+          placeholder="Explanation"
+          defaultValue=""
+          onChange={(event) => setComments(event.target.value)}
+          disabled={hideSubmit}
+          ref={forwardedRef}
+        />
+      </Form.Group>
+    </Form>
   );
 
   return (
@@ -117,7 +120,7 @@ export default function ExpireEntitlementForm({
           >
             Close
           </ModalDialog.CloseButton>
-          { showLoader
+          {showLoader
             ? (<div className="spinner-border text-primary" role="status" />)
             : (
               <Button
diff --git a/src/users/entitlements/ExpireEntitlementForm.test.jsx b/src/users/entitlements/ExpireEntitlementForm.test.jsx
index ee23dcb4d..f71b2d006 100644
--- a/src/users/entitlements/ExpireEntitlementForm.test.jsx
+++ b/src/users/entitlements/ExpireEntitlementForm.test.jsx
@@ -27,7 +27,7 @@ describe('Expire Entitlement Form', () => {
   it('Default form render', () => {
     let expireFormModal = wrapper.find('ModalDialog#expire-entitlement');
     expect(expireFormModal.prop('isOpen')).toEqual(true);
-    const commentsTextArea = wrapper.find('textarea#comments');
+    const commentsTextArea = wrapper.find('#comments');
     expect(commentsTextArea.text()).toEqual('');
 
     wrapper.find('button.btn-link').simulate('click');
@@ -44,7 +44,7 @@ describe('Expire Entitlement Form', () => {
       const apiMock = jest.spyOn(api, 'patchEntitlement').mockImplementationOnce(() => Promise.resolve({}));
       expect(apiMock).toHaveBeenCalledTimes(0);
 
-      wrapper.find('textarea#comments').simulate('change', { target: { value: 'expiring entitlement' } });
+      wrapper.find('textarea.form-control').simulate('change', { target: { value: 'expiring entitlement' } });
       let submitButton = wrapper.find('button.btn-primary');
       expect(submitButton.prop('disabled')).toBeFalsy();
       expect(wrapper.find('div.spinner-border').length).toEqual(0);
@@ -75,7 +75,7 @@ describe('Expire Entitlement Form', () => {
       }));
       expect(apiMock).toHaveBeenCalledTimes(0);
 
-      wrapper.find('textarea#comments').simulate('change', { target: { value: 'expiring entitlement' } });
+      wrapper.find('textarea.form-control').simulate('change', { target: { value: 'expiring entitlement' } });
       wrapper.find('button.btn-primary').simulate('click');
       await waitForComponentToPaint(wrapper);
 
diff --git a/src/users/entitlements/ReissueEntitlementForm.jsx b/src/users/entitlements/ReissueEntitlementForm.jsx
index d835a071a..65262d4f6 100644
--- a/src/users/entitlements/ReissueEntitlementForm.jsx
+++ b/src/users/entitlements/ReissueEntitlementForm.jsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import {
   ActionRow,
-  Button, Input, ModalDialog,
+  Button, ModalDialog, Form,
 } from '@edx/paragon';
 
 import UserMessagesContext from '../../userMessages/UserMessagesContext';
@@ -75,16 +75,18 @@ export default function ReissueEntitlementForm({
         </div>
       </div>
       <hr />
-      <Input
-        type="textarea"
-        id="comments"
-        name="comments"
-        placeholder="Explanation"
-        defaultValue=""
-        onChange={(event) => setComments(event.target.value)}
-        disabled={hideSubmit}
-        ref={forwardedRef}
-      />
+      <Form.Group>
+        <Form.Control
+          as="textarea"
+          id="comments"
+          name="comments"
+          placeholder="Explanation"
+          defaultValue=""
+          onChange={(event) => setComments(event.target.value)}
+          disabled={hideSubmit}
+          ref={forwardedRef}
+        />
+      </Form.Group>
     </form>
   );
 
@@ -115,7 +117,7 @@ export default function ReissueEntitlementForm({
           >
             Close
           </ModalDialog.CloseButton>
-          { showLoader
+          {showLoader
             ? (<div className="spinner-border text-primary" role="status" />)
             : (
               <Button
diff --git a/src/users/entitlements/ReissueEntitlementForm.test.jsx b/src/users/entitlements/ReissueEntitlementForm.test.jsx
index c37fc5dbe..6365d1f0c 100644
--- a/src/users/entitlements/ReissueEntitlementForm.test.jsx
+++ b/src/users/entitlements/ReissueEntitlementForm.test.jsx
@@ -27,7 +27,7 @@ describe('Reissue Entitlement Form', () => {
   it('Default form render', () => {
     let reissueFormModal = wrapper.find('ModalDialog#reissue-entitlement');
     expect(reissueFormModal.prop('isOpen')).toEqual(true);
-    const commentsTextArea = wrapper.find('textarea#comments');
+    const commentsTextArea = wrapper.find('#comments');
     expect(commentsTextArea.text()).toEqual('');
 
     wrapper.find('button.btn-link').simulate('click');
@@ -44,7 +44,7 @@ describe('Reissue Entitlement Form', () => {
       const apiMock = jest.spyOn(api, 'patchEntitlement').mockImplementationOnce(() => Promise.resolve({}));
       expect(apiMock).toHaveBeenCalledTimes(0);
 
-      wrapper.find('textarea#comments').simulate('change', { target: { value: 'reissue the expired entitlement' } });
+      wrapper.find('textarea.form-control').simulate('change', { target: { value: 'reissue the expired entitlement' } });
       let submitButton = wrapper.find('button.btn-primary');
       expect(submitButton.prop('disabled')).toBeFalsy();
       expect(wrapper.find('div.spinner-border').length).toEqual(0);
@@ -75,7 +75,7 @@ describe('Reissue Entitlement Form', () => {
       }));
       expect(apiMock).toHaveBeenCalledTimes(0);
 
-      wrapper.find('textarea#comments').simulate('change', { target: { value: 'reissue the expired entitlement' } });
+      wrapper.find('textarea.form-control').simulate('change', { target: { value: 'reissue the expired entitlement' } });
       wrapper.find('button.btn-primary').simulate('click');
       await waitForComponentToPaint(wrapper);