From e8c627bb094d2fb2231afe1eb0871cffa2688486 Mon Sep 17 00:00:00 2001
From: "Tim R. Bula" <timrbula@gmail.com>
Date: Tue, 24 Jan 2023 12:34:38 -0600
Subject: [PATCH] fix: a bunch of visual defects

---
 .../CreateWorkflowContent.tsx                 | 11 ++-
 .../CreateWorkflowContent.tsx                 | 11 ++-
 .../ImportWorkflowContent.tsx                 |  6 +-
 .../EditTaskTemplateForm.tsx                  | 16 ++---
 src/Components/LabelModal/LabelModal.tsx      |  4 +-
 .../__snapshots__/PreviewConfig.spec.tsx.snap |  2 +-
 .../ScheduleManagerForm.tsx                   | 10 +--
 .../SchedulePanelDetail.module.scss           |  1 +
 .../SchedulePanelList.module.scss             |  1 +
 .../TemplateConfigModalContent.tsx            | 22 ++----
 .../TemplateConfigModalContent.tsx            |  4 +-
 src/Constants/index.ts                        |  6 +-
 .../ApproveRejectActions.module.scss          | 14 ++--
 .../ApproveRejectActions.tsx                  | 28 ++++----
 src/Features/App/Navbar/Navbar.tsx            |  4 +-
 .../ApproverGroupsTable.tsx                   |  6 --
 .../CreateEditGroupModal.tsx                  | 36 ++++++----
 .../CreateEditGroupModalContent.tsx           |  2 +-
 .../createEditGroupModalContent.module.scss   |  1 +
 src/Features/Editor/Configure/Configure.tsx   | 60 ++++-------------
 .../ConfigureStorage/ConfigureStorage.tsx     |  4 +-
 .../Configure/CreateToken/CreateToken.tsx     |  2 +-
 .../Configure/CustomLabel/CustomLabel.tsx     |  4 +-
 .../Editor/Configure/configure.module.scss    | 10 ++-
 .../PropertiesModalContent.tsx                |  8 +--
 .../Editor/__snapshots__/Editor.spec.jsx.snap |  1 +
 .../TaskApprovalModal/TaskApprovalModal.tsx   |  7 +-
 .../TaskApprovalModal.spec.jsx.snap           | 11 +--
 .../taskApprovalModal.module.scss             |  9 ---
 .../TaskExecutionLog/TaskExecutionLog.tsx     |  4 +-
 .../CreateEditPropertiesContent.tsx           |  6 +-
 .../__snapshots__/Insights.spec.jsx.snap      | 26 ++++---
 .../ManageTeamTasks/Header/header.module.scss |  2 +-
 .../ManageTeamTasks/ManageTeamTasks.tsx       | 35 ++++++++--
 .../AddTaskTemplate/AddTaskTemplate.tsx       |  2 +-
 .../AddTaskTemplateForm.tsx                   | 16 ++---
 .../ManageTeamTasks/Sidenav/Sidenav.tsx       | 67 ++++++++++++++-----
 .../taskTemplateOverview.module.scss          |  3 +-
 .../taskTemplateYamlEditor.module.scss        |  3 +-
 .../ManageTeamTasks/taskTemplates.module.scss |  2 +-
 .../QuotaEditModalContent.tsx                 |  2 +-
 .../Header/__snapshots__/Header.spec.jsx.snap |  2 +-
 .../TaskTemplates/Header/header.module.scss   |  2 +-
 .../AddTaskTemplate/AddTaskTemplate.tsx       |  2 +-
 .../AddTaskTemplateForm.tsx                   | 16 ++---
 .../TaskTemplates/Sidenav/Sidenav.tsx         |  1 +
 .../TaskTemplateOverview.spec.jsx.snap        | 16 ++---
 .../taskTemplateOverview.module.scss          |  3 +-
 .../taskTemplateYamlEditor.module.scss        |  3 +-
 .../__snapshots__/TaskTemplates.spec.tsx.snap |  5 +-
 .../TaskTemplates/taskTemplates.module.scss   |  2 +-
 .../UpdateTeamName/UpdateTeamName.tsx         |  2 +-
 .../CreateEditTeamPropertiesModalContent.tsx  |  6 +-
 .../TeamPropertiesTable.tsx                   |  7 +-
 .../TeamPropertiesTable.spec.tsx.snap         |  2 +-
 .../TeamProperties.spec.jsx.snap              |  2 +-
 .../CreateToken/Form/index.tsx                |  2 +-
 .../__snapshots__/index.spec.tsx.snap         |  5 ++
 .../TeamTokens/TeamTokenComponent/index.tsx   | 10 ++-
 .../Teams/AddTeamContent/AddTeamContent.tsx   |  2 +-
 .../CreateToken/Form/index.tsx                |  6 +-
 .../DeleteToken/index.tsx                     |  2 +-
 .../__snapshots__/index.spec.tsx.snap         |  5 ++
 .../Tokens/GlobalTokenComponent/index.tsx     |  2 +
 .../WorkflowQuotaModalContent.module.scss     |  3 +-
 src/Features/Workflows/Workflows.tsx          |  4 +-
 .../__snapshots__/Workflows.spec.jsx.snap     |  4 +-
 src/Types/index.tsx                           | 10 +--
 68 files changed, 312 insertions(+), 283 deletions(-)

diff --git a/src/Components/CreateTemplateWorkflow/CreateWorkflowContent/CreateWorkflowContent.tsx b/src/Components/CreateTemplateWorkflow/CreateWorkflowContent/CreateWorkflowContent.tsx
index dc28727a2..215438883 100644
--- a/src/Components/CreateTemplateWorkflow/CreateWorkflowContent/CreateWorkflowContent.tsx
+++ b/src/Components/CreateTemplateWorkflow/CreateWorkflowContent/CreateWorkflowContent.tsx
@@ -155,9 +155,6 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                     placeholder="Select a team"
                     invalid={teamError && teamTouched}
                     invalidText="Team is required"
-                    shouldFilterItem={({ item, inputValue }: { item: ComboBoxItem; inputValue: string }) =>
-                      item && item.name.toLowerCase().includes(inputValue.toLowerCase())
-                    }
                   />
 
                   <TextInput
@@ -166,7 +163,7 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                     value={values.name}
                     onBlur={handleBlur}
                     onChange={handleChange}
-                    invalid={errors.name && touched.name}
+                    invalid={Boolean(errors.name && touched.name)}
                     invalidText={errors.name}
                   />
                 </div>
@@ -177,7 +174,7 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                   value={values.name}
                   onBlur={handleBlur}
                   onChange={handleChange}
-                  invalid={errors.name && touched.name}
+                  invalid={Boolean(errors.name && touched.name)}
                   invalidText={errors.name}
                 />
               )}
@@ -187,7 +184,7 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                 value={values.summary}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.summary && touched.summary}
+                invalid={Boolean(errors.summary && touched.summary)}
                 invalidText={errors.summary}
               />
               <TextArea
@@ -195,7 +192,7 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                 labelText="Description"
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.description && touched.description}
+                invalid={Boolean(errors.description && touched.description)}
                 invalidText={errors.description}
                 style={{ resize: "none", width: "100%" }}
                 value={values.description}
diff --git a/src/Components/CreateWorkflow/CreateWorkflowContent/CreateWorkflowContent.tsx b/src/Components/CreateWorkflow/CreateWorkflowContent/CreateWorkflowContent.tsx
index ce439a23c..a7a8718c3 100644
--- a/src/Components/CreateWorkflow/CreateWorkflowContent/CreateWorkflowContent.tsx
+++ b/src/Components/CreateWorkflow/CreateWorkflowContent/CreateWorkflowContent.tsx
@@ -103,9 +103,6 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                     placeholder="Select a team"
                     invalid={scope === WorkflowScope.Team && !Boolean(selectedTeam)}
                     invalidText="Team is required"
-                    shouldFilterItem={({ item, inputValue }: { item: ComboBoxItem; inputValue: string }) =>
-                      item && item.name.toLowerCase().includes(inputValue.toLowerCase())
-                    }
                   />
 
                   <TextInput
@@ -114,7 +111,7 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                     value={values.name}
                     onBlur={handleBlur}
                     onChange={handleChange}
-                    invalid={errors.name && touched.name}
+                    invalid={Boolean(errors.name && touched.name)}
                     invalidText={errors.name}
                   />
                 </div>
@@ -125,7 +122,7 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                   value={values.name}
                   onBlur={handleBlur}
                   onChange={handleChange}
-                  invalid={errors.name && touched.name}
+                  invalid={Boolean(errors.name && touched.name)}
                   invalidText={errors.name}
                 />
               )}
@@ -135,7 +132,7 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                 value={values.summary}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.summary && touched.summary}
+                invalid={Boolean(errors.summary && touched.summary)}
                 invalidText={errors.summary}
               />
               <TextArea
@@ -143,7 +140,7 @@ const CreateWorkflowContent: React.FC<CreateWorkflowContentProps> = ({
                 labelText="Description"
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.description && touched.description}
+                invalid={Boolean(errors.description && touched.description)}
                 invalidText={errors.description}
                 style={{ resize: "none", width: "100%" }}
                 value={values.description}
diff --git a/src/Components/CreateWorkflow/ImportWorkflowContent/ImportWorkflowContent.tsx b/src/Components/CreateWorkflow/ImportWorkflowContent/ImportWorkflowContent.tsx
index 76367c202..b396cc41b 100644
--- a/src/Components/CreateWorkflow/ImportWorkflowContent/ImportWorkflowContent.tsx
+++ b/src/Components/CreateWorkflow/ImportWorkflowContent/ImportWorkflowContent.tsx
@@ -232,7 +232,7 @@ const ImportWorkflowContent: React.FC<ImportWorkflowContentProps> = ({
                         itemToString={(item: FlowTeam) => (item ? item.name : "")}
                         titleText="Team"
                         placeholder="Select a team"
-                        invalid={errors.selectedTeam}
+                        invalid={Boolean(errors.selectedTeam)}
                         invalidText={errors.selectedTeam}
                       />
                     )}
@@ -243,7 +243,7 @@ const ImportWorkflowContent: React.FC<ImportWorkflowContentProps> = ({
                       value={values.name}
                       onBlur={handleBlur}
                       onChange={handleChange}
-                      invalid={errors.name && touched.name}
+                      invalid={Boolean(errors.name && touched.name)}
                       invalidText={errors.name}
                     />
                     <TextInput
@@ -252,7 +252,7 @@ const ImportWorkflowContent: React.FC<ImportWorkflowContentProps> = ({
                       value={values.summary}
                       onBlur={handleBlur}
                       onChange={handleChange}
-                      invalid={errors.summary && touched.summary}
+                      invalid={Boolean(errors.summary && touched.summary)}
                       invalidText={errors.summary}
                     />
                   </div>
diff --git a/src/Components/EditTaskTemplateModal/EditTaskTemplateForm/EditTaskTemplateForm.tsx b/src/Components/EditTaskTemplateModal/EditTaskTemplateForm/EditTaskTemplateForm.tsx
index 61b63eac0..2300d8287 100644
--- a/src/Components/EditTaskTemplateModal/EditTaskTemplateForm/EditTaskTemplateForm.tsx
+++ b/src/Components/EditTaskTemplateModal/EditTaskTemplateForm/EditTaskTemplateForm.tsx
@@ -83,7 +83,7 @@ function EditTaskTemplateForm({ closeModal, handleEditTaskTemplateModal, nodeTyp
             <ModalBody aria-label="inputs">
               <TextInput
                 id="name"
-                invalid={errors.name && touched.name}
+                invalid={Boolean(errors.name && touched.name)}
                 invalidText={errors.name}
                 labelText="Name"
                 helperText="Must be unique"
@@ -94,7 +94,7 @@ function EditTaskTemplateForm({ closeModal, handleEditTaskTemplateModal, nodeTyp
               />
               <TextInput
                 id="category"
-                invalid={errors.category && touched.category}
+                invalid={Boolean(errors.category && touched.category)}
                 invalidText={errors.category}
                 labelText="Category"
                 helperText="Categories have strict matching, type as you want to see it"
@@ -112,7 +112,7 @@ function EditTaskTemplateForm({ closeModal, handleEditTaskTemplateModal, nodeTyp
                 <p className={styles.descriptionLength}>{values.description.length}/200</p>
                 <TextArea
                   id="description"
-                  invalid={errors.description && touched.description}
+                  invalid={Boolean(errors.description && touched.description)}
                   invalidText={errors.description}
                   labelText="Description"
                   onBlur={handleBlur}
@@ -128,7 +128,7 @@ function EditTaskTemplateForm({ closeModal, handleEditTaskTemplateModal, nodeTyp
                 value={values.image}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.image && touched.image}
+                invalid={Boolean(errors.image && touched.image)}
                 invalidText={errors.image}
               />
               <TextArea
@@ -139,7 +139,7 @@ function EditTaskTemplateForm({ closeModal, handleEditTaskTemplateModal, nodeTyp
                 value={values.command}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.command && touched.command}
+                invalid={Boolean(errors.command && touched.command)}
                 invalidText={errors.command}
               />
               <TextArea
@@ -151,12 +151,12 @@ function EditTaskTemplateForm({ closeModal, handleEditTaskTemplateModal, nodeTyp
                 value={values.arguments}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.arguments && touched.arguments}
+                invalid={Boolean(errors.arguments && touched.arguments)}
                 invalidText={errors.arguments}
               />
               <TextArea
                 id="script"
-                invalid={errors.script && touched.script}
+                invalid={Boolean(errors.script && touched.script)}
                 invalidText={errors.script}
                 labelText="Script (optional)"
                 onBlur={handleBlur}
@@ -165,7 +165,7 @@ function EditTaskTemplateForm({ closeModal, handleEditTaskTemplateModal, nodeTyp
               />
               <TextInput
                 id="workingDir"
-                invalid={errors.workingDir && touched.workingDir}
+                invalid={Boolean(errors.workingDir && touched.workingDir)}
                 invalidText={errors.workingDir}
                 labelText="Working Directory (optional)"
                 onBlur={handleBlur}
diff --git a/src/Components/LabelModal/LabelModal.tsx b/src/Components/LabelModal/LabelModal.tsx
index 490da1ac3..19e384513 100644
--- a/src/Components/LabelModal/LabelModal.tsx
+++ b/src/Components/LabelModal/LabelModal.tsx
@@ -125,7 +125,7 @@ const AddLabelModalContent: React.FC<AddLabelModalContentProps> = ({
                   labelText="Label Key"
                   value={values.key}
                   onChange={handleChange}
-                  invalid={errors.key && touched.key}
+                  invalid={Boolean(errors.key && touched.key)}
                   invalidText={errors.key}
                   onBlur={handleBlur}
                 />
@@ -134,7 +134,7 @@ const AddLabelModalContent: React.FC<AddLabelModalContentProps> = ({
                   labelText="Label Value"
                   value={values.value}
                   onChange={handleChange}
-                  invalid={errors.value && touched.value}
+                  invalid={Boolean(errors.value && touched.value)}
                   onBlur={handleBlur}
                   invalidText={errors.value}
                 />
diff --git a/src/Components/PreviewConfig/__snapshots__/PreviewConfig.spec.tsx.snap b/src/Components/PreviewConfig/__snapshots__/PreviewConfig.spec.tsx.snap
index 99970f13c..e2eaa4e4c 100644
--- a/src/Components/PreviewConfig/__snapshots__/PreviewConfig.spec.tsx.snap
+++ b/src/Components/PreviewConfig/__snapshots__/PreviewConfig.spec.tsx.snap
@@ -14,7 +14,7 @@ exports[`PreviewConfig --- Snapshot > Capturing Snapshot of Task Templates 1`] =
   <div>
     <button
       class="cds--btn cds--btn--md cds--btn--ghost"
-      style="width: 6.25rem;"
+      style="width: 7rem;"
       tabindex="0"
       type="button"
     >
diff --git a/src/Components/ScheduleManagerForm/ScheduleManagerForm.tsx b/src/Components/ScheduleManagerForm/ScheduleManagerForm.tsx
index c44201a53..4fa7915ac 100644
--- a/src/Components/ScheduleManagerForm/ScheduleManagerForm.tsx
+++ b/src/Components/ScheduleManagerForm/ScheduleManagerForm.tsx
@@ -192,7 +192,7 @@ export default function CreateEditForm(props: CreateEditFormProps) {
                 helperText="Workflow for this Schedule to execute"
                 id="workflow"
                 initialSelectedItem={formikProps.values.workflow}
-                items={props.workflowOptions}
+                items={props?.workflowOptions ?? []}
                 itemToString={(workflow: WorkflowSummary) => {
                   if (workflow?.scope === "team") {
                     const team = workflow ? teams.find((team: FlowTeam) => team.id === workflow.flowTeamId) : undefined;
@@ -244,13 +244,13 @@ export default function CreateEditForm(props: CreateEditFormProps) {
               valueLabelText="Label value"
               valuePlaceholder="important"
               value={formikProps.values.labels}
-              onChange={(labels: string) => formikProps.setFieldValue("labels", labels)}
+              onChange={(labels) => formikProps.setFieldValue("labels", labels)}
             />
             <p>
               <b>Schedule</b>
             </p>
             <section>
-              <p>What type of Schedule do you want to create?</p>
+              <p style={{ marginBottom: "0.375rem" }}>What type of Schedule do you want to create?</p>
               <RadioButtonGroup
                 id="type"
                 labelPosition="right"
@@ -422,7 +422,7 @@ class CronJobConfig extends React.Component<Props, State> {
                 helperText="What time zone do you want to use"
                 id="timezone"
                 initialSelectedItem={values.timezone}
-                items={this.props.timezoneOptions}
+                items={this.props?.timezoneOptions ?? []}
                 onChange={({ selectedItem }: { selectedItem: { label: string; value: string } }) => {
                   const item = selectedItem ?? { label: "", value: "" };
                   this.props.formikProps.setFieldValue("timezone", item);
@@ -436,7 +436,7 @@ class CronJobConfig extends React.Component<Props, State> {
           <div className={styles.container}>
             <TextInput
               id="time"
-              invalid={errors.time && touched.time}
+              invalid={Boolean(errors.time && touched.time)}
               invalidText={errors.time}
               labelText={"Time"}
               name="time"
diff --git a/src/Components/SchedulePanelDetail/SchedulePanelDetail.module.scss b/src/Components/SchedulePanelDetail/SchedulePanelDetail.module.scss
index 2e9b81374..8c111c271 100644
--- a/src/Components/SchedulePanelDetail/SchedulePanelDetail.module.scss
+++ b/src/Components/SchedulePanelDetail/SchedulePanelDetail.module.scss
@@ -33,6 +33,7 @@ div.listItem {
   }
   dd {
     font-size: 0.875rem;
+    margin-top: 0.25rem;
   }
 }
 
diff --git a/src/Components/SchedulePanelList/SchedulePanelList.module.scss b/src/Components/SchedulePanelList/SchedulePanelList.module.scss
index 3c1d62a91..ad4560b5d 100644
--- a/src/Components/SchedulePanelList/SchedulePanelList.module.scss
+++ b/src/Components/SchedulePanelList/SchedulePanelList.module.scss
@@ -43,6 +43,7 @@ div.listItem {
   }
   dd {
     font-size: 0.875rem;
+    margin-top: 0.25rem;
   }
 }
 
diff --git a/src/Components/TemplateConfigModal/TemplateConfigModalContent/TemplateConfigModalContent.tsx b/src/Components/TemplateConfigModal/TemplateConfigModalContent/TemplateConfigModalContent.tsx
index 82a89947b..7a7e64304 100644
--- a/src/Components/TemplateConfigModal/TemplateConfigModalContent/TemplateConfigModalContent.tsx
+++ b/src/Components/TemplateConfigModal/TemplateConfigModalContent/TemplateConfigModalContent.tsx
@@ -269,16 +269,8 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
         })}
       >
         {(formikProps) => {
-          const {
-            values,
-            touched,
-            errors,
-            handleBlur,
-            handleChange,
-            handleSubmit,
-            setFieldValue,
-            isValid,
-          } = formikProps;
+          const { values, touched, errors, handleBlur, handleChange, handleSubmit, setFieldValue, isValid } =
+            formikProps;
 
           return (
             <ModalForm onSubmit={handleSubmit}>
@@ -297,7 +289,7 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
                 <TextInput
                   helperText="Reference value for field in task template config"
                   id={InputProperty.Key}
-                  invalid={errors.key && touched.key}
+                  invalid={Boolean(errors.key && touched.key)}
                   invalidText={errors.key}
                   labelText="Key"
                   disabled={isEdit}
@@ -308,7 +300,7 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
                 />
                 <TextInput
                   id={InputProperty.Label}
-                  invalid={errors.label && touched.label}
+                  invalid={Boolean(errors.label && touched.label)}
                   invalidText={errors.label}
                   labelText="Label"
                   placeholder="e.g. Email"
@@ -318,7 +310,7 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
                 />
                 <TextInput
                   id={InputProperty.HelperText}
-                  invalid={errors.helperText && touched.helperText}
+                  invalid={Boolean(errors.helperText && touched.helperText)}
                   invalidText={errors.helperText}
                   labelText="Helper Text (optional)"
                   helperText="Assist user in completing the field"
@@ -328,7 +320,7 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
                 />
                 <TextInput
                   id={InputProperty.Description}
-                  invalid={errors.description && touched.description}
+                  invalid={Boolean(errors.description && touched.description)}
                   invalidText={errors.description}
                   labelText="Description (optional)"
                   helperText="Provide additional information about field to show in a tooltip"
@@ -339,7 +331,7 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
                 {InputType.Boolean !== values.type && (
                   <TextInput
                     id={InputProperty.Placeholder}
-                    invalid={errors.placeholder && touched.placeholder}
+                    invalid={Boolean(errors.placeholder && touched.placeholder)}
                     invalidText={errors.placeholder}
                     labelText="Placeholder (optional)"
                     helperText="Give the user a hint for the field value"
diff --git a/src/Components/TemplateParametersModal/TemplateConfigModalContent/TemplateConfigModalContent.tsx b/src/Components/TemplateParametersModal/TemplateConfigModalContent/TemplateConfigModalContent.tsx
index 17fa1b6ba..5e604b9c7 100644
--- a/src/Components/TemplateParametersModal/TemplateConfigModalContent/TemplateConfigModalContent.tsx
+++ b/src/Components/TemplateParametersModal/TemplateConfigModalContent/TemplateConfigModalContent.tsx
@@ -75,7 +75,7 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
               <ModalBody aria-label="inputs" className={styles.container}>
                 <TextInput
                   id="name"
-                  invalid={errors.name && touched.name}
+                  invalid={Boolean(errors.name && touched.name)}
                   invalidText={errors.name}
                   labelText="Name"
                   // disabled={isEdit}
@@ -85,7 +85,7 @@ class TemplateConfigModalContent extends Component<TemplateConfigModalContentPro
                 />
                 <TextInput
                   id="description"
-                  invalid={errors.description && touched.description}
+                  invalid={Boolean(errors.description && touched.description)}
                   invalidText={errors.description}
                   labelText="Description "
                   onBlur={handleBlur}
diff --git a/src/Constants/index.ts b/src/Constants/index.ts
index 65325de0e..44226cbe4 100644
--- a/src/Constants/index.ts
+++ b/src/Constants/index.ts
@@ -256,7 +256,7 @@ export const yamlInstructions = `  # Getting started with a Task
   Defining Tasks using this YAML editor is recommended for non-business users who have experience writing yaml definitions and have a desire for further customization in defining a task.
   ## Creating a Task in YAML
   The YAML specification has three important sections to be aware of: metadata, params, and steps. 
-  Its important to note that the full Tekton task specification is not yet fully supported. We cannot run multi step tasks, nor do we allow resources to be specified. For more information, see [Known Issues and Limitations](https://www.useboomerang.io/docs/boomerang-flow/introduction/known-issues-limitations)
+  Its important to note that the full Tekton task specification is not yet fully supported. We cannot run multi step tasks, nor do we allow resources to be specified. For more information, see [Known Issues and Limitations](https://www.useboomerang.io/docs/boomerang-flow/introduction/known-issues-limitations).
   ### Metadata
   This is the area where we store a series of annotations related to the end user experience and are automatically populated when defining a task view the UI. See below section on understanding the Boomerang Flow specific metadata.
   ### Params
@@ -276,7 +276,7 @@ export const yamlInstructions = `  # Getting started with a Task
       - folderId
       - email
   \`\`\`
-  For more information on steps refer to [Boomerang Flow Tasks](https://www.useboomerang.io/docs/boomerang-flow/3.1.0/getting-to-know/tasks)
+  For more information on steps refer to [Boomerang Flow Tasks](https://www.useboomerang.io/docs/boomerang-flow/3.1.0/getting-to-know/tasks).
   ## Understanding the available metadata
   The metadata used by Boomerang Flow is over and above the standard Kubernetes or Tekton metadata and is a way for the information needed for the user experience to be stored.
   ### Icon
@@ -285,7 +285,7 @@ export const yamlInstructions = `  # Getting started with a Task
   boomerang.io/icon: Add
   \`\`\`
   ### Params
-  The following definition will match the \`key\` element with the \`name\` element in the params specification of the task. Additional parameter types are supported for the experience including texteditor, boolean, and options. For more detailed information on the available parameters please see [Boomerang Flow Tasks](https://www.useboomerang.io/docs/boomerang-flow/3.1.0/getting-to-know/tasks)
+  The following definition will match the \`key\` element with the \`name\` element in the params specification of the task. Additional parameter types are supported for the experience including texteditor, boolean, and options. For more detailed information on the available parameters please see [Boomerang Flow Tasks](https://www.useboomerang.io/docs/boomerang-flow/3.1.0/getting-to-know/tasks).
   \`\`\`
       boomerang.io/params:
       - required: true
diff --git a/src/Features/Actions/ActionsTable/ApproveRejectActions/ApproveRejectActions.module.scss b/src/Features/Actions/ActionsTable/ApproveRejectActions/ApproveRejectActions.module.scss
index 9067805c3..2225bebd5 100644
--- a/src/Features/Actions/ActionsTable/ApproveRejectActions/ApproveRejectActions.module.scss
+++ b/src/Features/Actions/ActionsTable/ApproveRejectActions/ApproveRejectActions.module.scss
@@ -52,14 +52,6 @@
   resize: vertical !important;
 }
 
-.commentLength {
-  font-size: 0.75rem;
-  letter-spacing: 0.02rem;
-  line-height: 1rem;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
 
 /**
  * Single Modal
@@ -75,8 +67,8 @@
 
 .creationDate {
   @extend .dataLabel;
+  display: block;
   margin-top: 0.5rem;
-  margin-bottom: 1.5rem;
 }
 
 .yourInput {
@@ -87,9 +79,11 @@
 .singleLabel {
   @extend .dataLabel;
   margin-bottom: 0.5rem;
+  display: block;
 }
 
 .singleHelperText {
+  display: block;
   font-size: 0.75rem;
   letter-spacing: 0.02rem;
   line-height: 0.9375rem;
@@ -123,9 +117,11 @@
 }
 
 .approvalsRatio {
+  display: block;
   font-size: 0.875rem;
   letter-spacing: 0.01rem;
   line-height: 1.125rem;
+  margin-top: 0.5rem;
 }
 
 .approvers {
diff --git a/src/Features/Actions/ActionsTable/ApproveRejectActions/ApproveRejectActions.tsx b/src/Features/Actions/ActionsTable/ApproveRejectActions/ApproveRejectActions.tsx
index 3e0270ddb..d1e32c906 100644
--- a/src/Features/Actions/ActionsTable/ApproveRejectActions/ApproveRejectActions.tsx
+++ b/src/Features/Actions/ActionsTable/ApproveRejectActions/ApproveRejectActions.tsx
@@ -290,6 +290,7 @@ function ActionSection({ formikBag, action }: ActionSectionProps) {
       <DataSection className={styles.data} label="Workflow" value={workflowName} />
       <div className={styles.comment}>
         <TextArea
+          enableCounter
           id={`${id}.comments`}
           className={styles.commentArea}
           labelText="Comments (optional)"
@@ -297,10 +298,10 @@ function ActionSection({ formikBag, action }: ActionSectionProps) {
           value={values[id]?.comments}
           onChange={handleChange}
           onBlur={handleBlur}
-          invalid={errors[id]?.comments && touched[id]?.comments}
+          invalid={Boolean(errors[id]?.comments && touched[id]?.comments)}
           invalidText={errors[id]?.comments}
+          maxCount={200}
         />
-        <p className={styles.commentLength}>{`${values[id]?.comments.length}/200`}</p>
       </div>
     </section>
   );
@@ -337,18 +338,19 @@ function SingleActionSection({ formikBag, action, isAlreadyApproved, user }: Sin
     <section className={styles.action}>
       <DataSection className={styles.data} label="Team" value={teamName} />
       <DataSection className={styles.data} label="Workflow" value={workflowName} />
-      <p className={styles.creationDate}>{`Submitted ${dateHelper.humanizedSimpleTimeAgo(creationDate)}`}</p>
+      <span className={styles.creationDate}>{`Submitted ${dateHelper.humanizedSimpleTimeAgo(creationDate)}`}</span>
       {!isAlreadyApproved ? (
         <>
           <div className={styles.approvals}>
-            <p className={styles.singleLabel}>Approvals</p>
-            <p className={styles.approvalsRatio}>{`${numberOfApprovals}/${approvalsRequired} approvals`}</p>
-            <p className={styles.singleHelperText}>
+            <span className={styles.singleLabel}>Approvals</span>
+            <span className={styles.approvalsRatio}>{`${numberOfApprovals}/${approvalsRequired} approvals`}</span>
+            <span className={styles.singleHelperText}>
               Number of required approvals that have been received in order for this component to proceed.
-            </p>
+            </span>
           </div>
           <div className={styles.comment}>
             <TextArea
+              enableCounter
               id={`${id}.comments`}
               className={styles.commentArea}
               labelText="Comments (optional)"
@@ -356,25 +358,25 @@ function SingleActionSection({ formikBag, action, isAlreadyApproved, user }: Sin
               value={values[id]?.comments}
               onChange={handleChange}
               onBlur={handleBlur}
-              invalid={errors[id]?.comments && touched[id]?.comments}
+              invalid={Boolean(errors[id]?.comments && touched[id]?.comments)}
               invalidText={errors[id]?.comments}
+              maxCount={200}
             />
-            <p className={styles.commentLength}>{`${values[id]?.comments.length}/200`}</p>
           </div>
         </>
       ) : (
         <div className={styles.yourInput}>
-          <p className={styles.singleLabel}>Your input</p>
-          <p className={styles.singleHelperText}>
+          <span className={styles.singleLabel}>Your input</span>
+          <span className={styles.singleHelperText}>
             {status !== ApprovalStatus.Submitted
               ? `This action is already ${status}`
               : "You already submitted your response for this action."}
-          </p>
+          </span>
         </div>
       )}
       {Array.isArray(actioners) && actioners.length && (
         <div className={styles.approvers}>
-          <p className={styles.singleLabel}>Approvers who submitted</p>
+          <span className={styles.singleLabel}>Approvers who submitted</span>
           <StructuredListWrapper>
             <StructuredListHead>
               <StructuredListRow head>
diff --git a/src/Features/App/Navbar/Navbar.tsx b/src/Features/App/Navbar/Navbar.tsx
index 817e166fb..b244af141 100644
--- a/src/Features/App/Navbar/Navbar.tsx
+++ b/src/Features/App/Navbar/Navbar.tsx
@@ -24,7 +24,7 @@ function getRelativePath(navUrl: string) {
 
 const createSidenav =
   (flowNavigationData: FlowNavigationItem[]) =>
-  ({ isOpen, close }) =>
+  ({ isOpen, close }: { isOpen: boolean; close: () => void }) =>
     (
       <SideNav aria-label="nav" expanded={isOpen} isChildOfHeader={true} isPersistent={false}>
         <SideNavItems>
@@ -100,7 +100,7 @@ export default function Navbar({
         platformName={platformName}
         productName={appName}
         skipToContentProps={skipToContentProps}
-        user={userData as FlowUser}
+        user={userData}
         supportMenuItems={[
           <HeaderMenuItem type="button" onClick={handleOnTutorialClick} text="Tutorial" />,
           <HeaderMenuItem type="link" kind="external" href="https://www.useboomerang.io/flow" text="Docs" />,
diff --git a/src/Features/ApproverGroups/ApproverGroupsTable/ApproverGroupsTable.tsx b/src/Features/ApproverGroups/ApproverGroupsTable/ApproverGroupsTable.tsx
index ba76dd0ca..f2b123775 100644
--- a/src/Features/ApproverGroups/ApproverGroupsTable/ApproverGroupsTable.tsx
+++ b/src/Features/ApproverGroups/ApproverGroupsTable/ApproverGroupsTable.tsx
@@ -215,9 +215,6 @@ function ApproverGroupsTable({
               selectedItem && setActiveTeam(selectedItem);
             }}
             placeholder="Select a team"
-            shouldFilterItem={({ item, inputValue }: { item: any; inputValue: string }) =>
-              item?.name?.toLowerCase()?.includes(inputValue.toLowerCase())
-            }
           />
         </div>
         <DataTableSkeleton
@@ -256,9 +253,6 @@ function ApproverGroupsTable({
                 selectedItem && setActiveTeam(selectedItem);
               }}
               placeholder="Select a team"
-              shouldFilterItem={({ item, inputValue }: { item: any; inputValue: string }) =>
-                item?.name?.toLowerCase()?.includes(inputValue.toLowerCase())
-              }
             />
           </div>
           <div className={styles.tableHeader}>
diff --git a/src/Features/ApproverGroups/ApproverGroupsTable/CreateEditGroupModal/CreateEditGroupModal.tsx b/src/Features/ApproverGroups/ApproverGroupsTable/CreateEditGroupModal/CreateEditGroupModal.tsx
index 378d678b4..8e9aebe5e 100644
--- a/src/Features/ApproverGroups/ApproverGroupsTable/CreateEditGroupModal/CreateEditGroupModal.tsx
+++ b/src/Features/ApproverGroups/ApproverGroupsTable/CreateEditGroupModal/CreateEditGroupModal.tsx
@@ -13,12 +13,7 @@ type CreateEditGroupModalProps = {
   team?: FlowTeam | null;
 };
 
-function CreateEditGroupModal({
-  isEdit,
-  approverGroup,
-  approverGroups,
-  team,
-}: CreateEditGroupModalProps) {
+function CreateEditGroupModal({ isEdit, approverGroup, approverGroups, team }: CreateEditGroupModalProps) {
   /**
    * arrays of values for making the key unique
    * filter out own value if editing a approverGroup, pass through all if creating
@@ -27,24 +22,37 @@ function CreateEditGroupModal({
   if (Array.isArray(approverGroups)) {
     approverGroupNames = approverGroups.map((configurationObj) => configurationObj.groupName.toLowerCase());
     if (isEdit && approverGroup) {
-      approverGroupNames = approverGroupNames.filter((approverGroupItem) => approverGroupItem !== approverGroup.groupName.toLowerCase());
+      approverGroupNames = approverGroupNames.filter(
+        (approverGroupItem) => approverGroupItem !== approverGroup.groupName.toLowerCase()
+      );
     }
   }
   const cancelRequestRef = React.useRef<any>();
 
   return (
     <ComposedModal
-      composedModalProps={{ containerClassName: styles.modalContainer }}
-      modalProps={{ shouldCloseOnOverlayClick: false }}
+      composedModalProps={{ containerClassName: styles.modalContainer, shouldCloseOnOverlayClick: false }}
       modalTrigger={({ openModal }: any) =>
-        !isEdit ?
-          <Button renderIcon={Add} size="md" kind="ghost" onClick={openModal}>Create new group</Button>
-          : 
-          <Button className={styles.editButton} onClick={openModal} kind="ghost" renderIcon={Edit} size="sm" iconDescription="Edit approver group" data-testid="edit-approver-group"/>
+        !isEdit ? (
+          <Button renderIcon={Add} size="md" kind="ghost" onClick={openModal}>
+            Create new group
+          </Button>
+        ) : (
+          <Button
+            className={styles.editButton}
+            onClick={openModal}
+            kind="ghost"
+            renderIcon={Edit}
+            size="sm"
+            iconDescription="Edit approver group"
+            data-testid="edit-approver-group"
+          />
+        )
       }
       modalHeaderProps={{
         title: isEdit && approverGroup ? `Edit ${approverGroup.groupName}` : "Create new group",
-        subtitle: "Choose a group name, then add users from a selected Team. Groups can only be formed with users from the same Team. Members will receive an email notification about their new permissions.",
+        subtitle:
+          "Choose a group name, then add users from a selected Team. Groups can only be formed with users from the same Team. Members will receive an email notification about their new permissions.",
       }}
       onCloseModal={() => {
         if (cancelRequestRef.current) cancelRequestRef.current();
diff --git a/src/Features/ApproverGroups/ApproverGroupsTable/CreateEditGroupModal/CreateEditGroupModalContent/CreateEditGroupModalContent.tsx b/src/Features/ApproverGroups/ApproverGroupsTable/CreateEditGroupModal/CreateEditGroupModalContent/CreateEditGroupModalContent.tsx
index 1fad2bfcb..4f56ea4fb 100644
--- a/src/Features/ApproverGroups/ApproverGroupsTable/CreateEditGroupModal/CreateEditGroupModalContent/CreateEditGroupModalContent.tsx
+++ b/src/Features/ApproverGroups/ApproverGroupsTable/CreateEditGroupModal/CreateEditGroupModalContent/CreateEditGroupModalContent.tsx
@@ -313,7 +313,7 @@ function CreateEditGroupModalContent({
                   value={values.groupName}
                   onBlur={handleBlur}
                   onChange={handleChange}
-                  invalid={errors.groupName && touched.groupName}
+                  invalid={Boolean(errors.groupName && touched.groupName)}
                   invalidText={errors.groupName}
                 />
               </div>
diff --git a/src/Features/ApproverGroups/ApproverGroupsTable/CreateEditGroupModal/CreateEditGroupModalContent/createEditGroupModalContent.module.scss b/src/Features/ApproverGroups/ApproverGroupsTable/CreateEditGroupModal/CreateEditGroupModalContent/createEditGroupModalContent.module.scss
index 6a37152c3..9aa7290c0 100644
--- a/src/Features/ApproverGroups/ApproverGroupsTable/CreateEditGroupModal/CreateEditGroupModalContent/createEditGroupModalContent.module.scss
+++ b/src/Features/ApproverGroups/ApproverGroupsTable/CreateEditGroupModal/CreateEditGroupModalContent/createEditGroupModalContent.module.scss
@@ -61,6 +61,7 @@
 .memberInfo {
   align-items: baseline;
   display: flex;
+  justify-content: space-between;
   width: 100%;
 }
 
diff --git a/src/Features/Editor/Configure/Configure.tsx b/src/Features/Editor/Configure/Configure.tsx
index 25a649805..91a8bd99b 100644
--- a/src/Features/Editor/Configure/Configure.tsx
+++ b/src/Features/Editor/Configure/Configure.tsx
@@ -20,7 +20,6 @@ import * as Yup from "yup";
 import BuildWebhookModalContent from "./BuildWebhookModalContent";
 import ConfigureStorage from "./ConfigureStorage";
 import CreateToken from "./CreateToken";
-//@ts-ignore
 import CustomLabel from "./CustomLabel";
 import Token from "./Token";
 import { Save } from "@carbon/react/icons";
@@ -256,30 +255,11 @@ class Configure extends Component<ConfigureProps, ConfigureState> {
     };
   }
 
-  // generateToken = (label: string) => {
-  //   axios
-  //     .post(serviceUrl.postCreateWorkflowToken({ workflowId: this.props.summaryData.id }), { label: label })
-  //     .then((response) => {
-  //       let newTokens = this.props.formikProps.values.tokens;
-  //       let tokenIndex = newTokens.findIndex((obj) => obj.label == label);
-
-  //       if (tokenIndex === -1) {
-  //         newTokens.push(response.data);
-  //       } else {
-  //         newTokens[tokenIndex].token = response.data.token;
-  //       }
-
-  //       // this.props.formikProps.setFieldValue(`triggers.${tokenType}.token`, response.data.token);
-  //       this.props.formikProps.setFieldValue(`tokens`, newTokens);
-
-  //       notify(<ToastNotification kind="success" title="Generate Token" subtitle={`Successfully generated token`} />);
-  //     })
-  //     .catch((err) => {
-  //       notify(<ToastNotification kind="error" title="Something's wrong" subtitle={`Failed to create token`} />);
-  //     });
-  // };
+  handleOnChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    this.props.formikProps.handleChange(e);
+  };
 
-  handleOnChange = (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
+  handleOnClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
     this.props.formikProps.handleChange(e);
   };
 
@@ -316,9 +296,6 @@ class Configure extends Component<ConfigureProps, ConfigureState> {
                 onChange={this.handleTeamChange}
                 label="Team"
                 placeholder="Select a team"
-                shouldFilterItem={({ item, inputValue }: { item: { name: string }; inputValue: string }) =>
-                  item?.name?.toLowerCase()?.includes(inputValue.toLowerCase())
-                }
               />
             </div>
           )}
@@ -330,7 +307,7 @@ class Configure extends Component<ConfigureProps, ConfigureState> {
             value={values.name}
             onBlur={handleBlur}
             onChange={this.handleOnChange}
-            invalid={errors.name && touched.name}
+            invalid={Boolean(errors.name && touched.name)}
             invalidText={errors.name}
           />
           <TextInput
@@ -340,18 +317,18 @@ class Configure extends Component<ConfigureProps, ConfigureState> {
             value={values.shortDescription}
             onBlur={handleBlur}
             onChange={this.handleOnChange}
-            invalid={errors.shortDescription && touched.shortDescription}
+            invalid={Boolean(errors.shortDescription && touched.shortDescription)}
             invalidText={errors.shortDescription}
           />
           <div className={styles.descriptionContainer}>
             <p className={styles.descriptionLength}> {`${values.description.length} / 250`}</p>
             <TextArea
               id="description"
-              label="Description"
+              labelText="Description"
               placeholder="Description"
               onBlur={handleBlur}
               onChange={this.handleOnChange}
-              invalid={errors.description && touched.description}
+              invalid={Boolean(errors.description && touched.description)}
               invalidText={errors.description}
               style={{ resize: "none" }}
               value={values.description}
@@ -372,7 +349,7 @@ class Configure extends Component<ConfigureProps, ConfigureState> {
                     id="icon"
                     readOnly
                     checked={values.icon === name}
-                    onClick={this.handleOnChange}
+                    onClick={this.handleOnClick}
                     value={name}
                     type="radio"
                   />
@@ -456,16 +433,13 @@ class Configure extends Component<ConfigureProps, ConfigureState> {
                         subtitle: (
                           <>
                             <p>
-                              Build up a webhook URL for an external service to push events that map to this workflow.
+                              Build up a webhook URL for an external service to push events that execute this workflow.
                             </p>
                             <p style={{ marginTop: "0.5rem" }}>
-                              There are a variety of different webhook types that provide additional functionality, for
-                              example the Slack type responds to the slack verification request.
-                              <a
-                                href={`${BASE_DOCUMENTATION_URL}/introduction/overview`}
-                                style={{ marginLeft: "0.1rem" }}
-                              >
-                                Learn more here
+                              There are a variety of different webhook types that provide additional functionality. For
+                              example, the Slack type responds to the Slack verification request.{" "}
+                              <a href={`${BASE_DOCUMENTATION_URL}/introduction/overview`}>
+                                Learn more in the documentation.
                               </a>
                             </p>
                           </>
@@ -639,12 +613,6 @@ class Configure extends Component<ConfigureProps, ConfigureState> {
                         </>
                       ),
                     }}
-                    composedModalProps={
-                      {
-                        // containerClassName: styles.buildWebhookContainer,
-                        // shouldCloseOnOverlayClick: true,
-                      }
-                    }
                     modalTrigger={({ openModal }: { openModal: () => void }) => (
                       <button className={styles.regenerateText} type="button" onClick={openModal}>
                         <p>Configure</p>
diff --git a/src/Features/Editor/Configure/ConfigureStorage/ConfigureStorage.tsx b/src/Features/Editor/Configure/ConfigureStorage/ConfigureStorage.tsx
index 809f7b957..b95ff7316 100644
--- a/src/Features/Editor/Configure/ConfigureStorage/ConfigureStorage.tsx
+++ b/src/Features/Editor/Configure/ConfigureStorage/ConfigureStorage.tsx
@@ -64,7 +64,7 @@ export default function ConfigureStorage({
                 id="size"
                 data-testid="size"
                 helperText="Size in Gigabytes"
-                invalid={errors.size && touched.size}
+                invalid={Boolean(errors.size && touched.size)}
                 invalidText={errors.size}
                 labelText={"Storage Size"}
                 min={0}
@@ -80,7 +80,7 @@ export default function ConfigureStorage({
                 id="mountPath"
                 data-testid="mountPath"
                 helperText={"The Mount path for your storage"}
-                invalid={errors.mountPath && touched.mountPath}
+                invalid={Boolean(errors.mountPath && touched.mountPath)}
                 invalidText={errors.mountPath}
                 labelText={"Mount path"}
                 name="mountPath"
diff --git a/src/Features/Editor/Configure/CreateToken/CreateToken.tsx b/src/Features/Editor/Configure/CreateToken/CreateToken.tsx
index c4d5072a3..10bf45562 100644
--- a/src/Features/Editor/Configure/CreateToken/CreateToken.tsx
+++ b/src/Features/Editor/Configure/CreateToken/CreateToken.tsx
@@ -142,7 +142,7 @@ const CreateTokenModalContent: React.FC<CreateTokenModalContentProps> = ({
                     onChange={(value: any) => {
                       setFieldValue("label", value.target.value);
                     }}
-                    invalid={errors.label && !touched.label}
+                    invalid={Boolean(errors.label && !touched.label)}
                     invalidText={errors.label}
                   />
                 )}
diff --git a/src/Features/Editor/Configure/CustomLabel/CustomLabel.tsx b/src/Features/Editor/Configure/CustomLabel/CustomLabel.tsx
index e840dcdd3..825669bad 100644
--- a/src/Features/Editor/Configure/CustomLabel/CustomLabel.tsx
+++ b/src/Features/Editor/Configure/CustomLabel/CustomLabel.tsx
@@ -150,7 +150,7 @@ const AddLabelModalContent: React.FC<AddLabelModalContentProps> = ({
                   labelText="Label Key"
                   value={values.key}
                   onChange={handleChange}
-                  invalid={errors.key && touched.key}
+                  invalid={Boolean(errors.key && touched.key)}
                   invalidText={errors.key}
                   onBlur={handleBlur}
                 />
@@ -159,7 +159,7 @@ const AddLabelModalContent: React.FC<AddLabelModalContentProps> = ({
                   labelText="Label Value"
                   value={values.value}
                   onChange={handleChange}
-                  invalid={errors.value && touched.value}
+                  invalid={Boolean(errors.value && touched.value)}
                   onBlur={handleBlur}
                   invalidText={errors.value}
                 />
diff --git a/src/Features/Editor/Configure/configure.module.scss b/src/Features/Editor/Configure/configure.module.scss
index 42649eeb7..7354000f1 100644
--- a/src/Features/Editor/Configure/configure.module.scss
+++ b/src/Features/Editor/Configure/configure.module.scss
@@ -148,10 +148,14 @@
       color: var(--cds-text-01);
     }
   }
+
+  :global .cds--bmrg-toggle__title {
+    margin-top: 0.75rem;
+  }
 }
 
 .webhookContainer {
-  padding-left: 4.6rem;
+  padding-left: 3.5rem;
 }
 
 .webhookWrapper {
@@ -245,14 +249,14 @@
 }
 
 .schedulerContainer {
-  padding-left: 4.6rem;
+  padding-left: 3.5rem;
   p {
     font-size: 0.875rem;
   }
 }
 
 .subscriptionContainer {
-  padding-left: 4.6rem;
+  padding-left: 3.5rem;
 
   :global .cds--text-input__field-wrapper {
     width: fit-content;
diff --git a/src/Features/Editor/Properties/PropertiesModal/PropertiesModalContent/PropertiesModalContent.tsx b/src/Features/Editor/Properties/PropertiesModal/PropertiesModalContent/PropertiesModalContent.tsx
index 8bab0e1b9..87515ec1c 100644
--- a/src/Features/Editor/Properties/PropertiesModal/PropertiesModalContent/PropertiesModalContent.tsx
+++ b/src/Features/Editor/Properties/PropertiesModal/PropertiesModalContent/PropertiesModalContent.tsx
@@ -267,7 +267,7 @@ class PropertiesModalContent extends Component<PropertiesModalContentProps> {
                   readOnly={isEdit}
                   helperText="Reference value for parameter in workflow. It can't be changed after parameter creation."
                   id={InputProperty.Key}
-                  invalid={errors.key && touched.key}
+                  invalid={Boolean(errors.key && touched.key)}
                   invalidText={errors.key}
                   labelText={isEdit ? "Key (read-only)" : "Key"}
                   onBlur={handleBlur}
@@ -291,7 +291,7 @@ class PropertiesModalContent extends Component<PropertiesModalContentProps> {
                 />
                 <TextInput
                   id={InputProperty.Label}
-                  invalid={errors.label && touched.label}
+                  invalid={Boolean(errors.label && touched.label)}
                   invalidText={errors.label}
                   labelText="Label"
                   placeholder="e.g. Token"
@@ -301,7 +301,7 @@ class PropertiesModalContent extends Component<PropertiesModalContentProps> {
                 />
                 <TextInput
                   id={InputProperty.Description}
-                  invalid={errors.description && touched.description}
+                  invalid={Boolean(errors.description && touched.description)}
                   invalidText={errors.description}
                   labelText="Description (optional)"
                   onBlur={handleBlur}
@@ -310,7 +310,7 @@ class PropertiesModalContent extends Component<PropertiesModalContentProps> {
                 />
                 <TextInput
                   id={InputProperty.JsonPath}
-                  invalid={errors.jsonPath && touched.jsonPath}
+                  invalid={Boolean(errors.jsonPath && touched.jsonPath)}
                   invalidText={errors.jsonPath}
                   labelText="Event Payload JsonPath (optional)"
                   onBlur={handleBlur}
diff --git a/src/Features/Editor/__snapshots__/Editor.spec.jsx.snap b/src/Features/Editor/__snapshots__/Editor.spec.jsx.snap
index b4ae5b369..6afa7493f 100644
--- a/src/Features/Editor/__snapshots__/Editor.spec.jsx.snap
+++ b/src/Features/Editor/__snapshots__/Editor.spec.jsx.snap
@@ -366,6 +366,7 @@ exports[`Editor --- Snapshot > Capturing Snapshot of Editor 1`] = `
             <button
               aria-expanded="false"
               aria-haspopup="true"
+              aria-label="Filter"
               class="cds--overflow-menu cds--overflow-menu--sm"
               style="border-radius: 0.25rem;"
               type="button"
diff --git a/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskApprovalModal/TaskApprovalModal.tsx b/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskApprovalModal/TaskApprovalModal.tsx
index 10247ee0f..6bb4f9ef3 100644
--- a/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskApprovalModal/TaskApprovalModal.tsx
+++ b/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskApprovalModal/TaskApprovalModal.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { useQueryClient, useMutation } from "react-query";
-// import moment from "moment";
 import { Formik } from "formik";
 import * as Yup from "yup";
 import {
@@ -92,10 +91,10 @@ function TaskApprovalModal({ approvalId, executionId, closeModal }: Props) {
                 <Loading />
               ) : (
                 <section className={styles.approval}>
-                  {/*<time className={styles.approvalTime}>{`Submitted ${moment(creationDate).fromNow()}`}</time>*/}
                   <div className={styles.inputs}>
                     <div className={styles.comment}>
                       <TextArea
+                        enableCounter
                         id={`comment`}
                         className={styles.commentArea}
                         labelText="Comments (optional)"
@@ -103,10 +102,10 @@ function TaskApprovalModal({ approvalId, executionId, closeModal }: Props) {
                         value={values?.comment}
                         onChange={handleChange}
                         onBlur={handleBlur}
-                        invalid={errors?.comment && touched?.comment}
+                        invalid={Boolean(errors?.comment && touched?.comment)}
                         invalidText={errors?.comment}
+                        maxCount={200}
                       />
-                      <p className={styles.commentLength}>{`${values?.comment.length}/200`}</p>
                     </div>
                     <DecisionButtons
                       canUncheck
diff --git a/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskApprovalModal/__snapshots__/TaskApprovalModal.spec.jsx.snap b/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskApprovalModal/__snapshots__/TaskApprovalModal.spec.jsx.snap
index bba4b87f6..d1df35f78 100644
--- a/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskApprovalModal/__snapshots__/TaskApprovalModal.spec.jsx.snap
+++ b/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskApprovalModal/__snapshots__/TaskApprovalModal.spec.jsx.snap
@@ -41,6 +41,11 @@ exports[`TaskApprovalModal --- Snapshot > Capturing Snapshot of TaskApprovalModa
                         </div>
                       </div>
                     </label>
+                    <div
+                      class="cds--label"
+                    >
+                      0/200
+                    </div>
                   </div>
                   <div
                     class="cds--text-area__wrapper"
@@ -49,17 +54,13 @@ exports[`TaskApprovalModal --- Snapshot > Capturing Snapshot of TaskApprovalModa
                       class="cds--text-area"
                       cols="50"
                       id="comment"
+                      maxlength="200"
                       placeholder="Add some reasoning for your decision"
                       rows="4"
                     />
                   </div>
                 </div>
               </div>
-              <p
-                class="_commentLength_7e51d1"
-              >
-                0/200
-              </p>
             </div>
             <div
               class="cds--bmrg-decision-buttons"
diff --git a/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskApprovalModal/taskApprovalModal.module.scss b/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskApprovalModal/taskApprovalModal.module.scss
index 645dd0175..034414d12 100644
--- a/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskApprovalModal/taskApprovalModal.module.scss
+++ b/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskApprovalModal/taskApprovalModal.module.scss
@@ -52,15 +52,6 @@
   resize: vertical !important;
 }
 
-.commentLength {
-  font-size: 0.75rem;
-  letter-spacing: 0.32px;
-  line-height: 1rem;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
 .decisionButtons {
   margin: 0 0 1rem 1.5rem;
 }
diff --git a/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskExecutionLog/TaskExecutionLog.tsx b/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskExecutionLog/TaskExecutionLog.tsx
index fd0f2d92e..561f37431 100644
--- a/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskExecutionLog/TaskExecutionLog.tsx
+++ b/src/Features/Execution/Main/ExecutionTaskLog/TaskItem/TaskExecutionLog/TaskExecutionLog.tsx
@@ -45,14 +45,14 @@ export default function TaskExecutionLog({ flowActivityId, flowTaskId, flowTaskN
               <>
                 <Theme theme="g100" className={styles.followToggle}>
                   <Toggle
-                  hideLabel
+                    hideLabel
                     defaultValue={follow}
                     disabled={Boolean(error)}
                     id="task-log-toggle"
                     labelText="Follow log toggle"
                     labelB="Follow"
                     labelA="Don't Follow"
-                    onChange={() => setFollow(!follow)}
+                    onToggle={() => setFollow(!follow)}
                     toggled={follow}
                     size="sm"
                   />
diff --git a/src/Features/GlobalProperties/PropertiesTable/CreateEditPropertiesModal/CreateEditPropertiesContent/CreateEditPropertiesContent.tsx b/src/Features/GlobalProperties/PropertiesTable/CreateEditPropertiesModal/CreateEditPropertiesContent/CreateEditPropertiesContent.tsx
index 8c349f7bd..6f0513016 100644
--- a/src/Features/GlobalProperties/PropertiesTable/CreateEditPropertiesModal/CreateEditPropertiesContent/CreateEditPropertiesContent.tsx
+++ b/src/Features/GlobalProperties/PropertiesTable/CreateEditPropertiesModal/CreateEditPropertiesContent/CreateEditPropertiesContent.tsx
@@ -143,7 +143,7 @@ function CreateEditPropertiesContent({ closeModal, isEdit, property, propertyKey
                 value={values.key}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.key && touched.key}
+                invalid={Boolean(errors.key && touched.key)}
                 invalidText={errors.key}
               />
               <TextInput
@@ -154,7 +154,7 @@ function CreateEditPropertiesContent({ closeModal, isEdit, property, propertyKey
                 value={values.label}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.label && touched.label}
+                invalid={Boolean(errors.label && touched.label)}
                 invalidText={errors.label}
               />
               <TextInput
@@ -175,7 +175,7 @@ function CreateEditPropertiesContent({ closeModal, isEdit, property, propertyKey
                 value={values.value}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.value && touched.value}
+                invalid={Boolean(errors.value && touched.value)}
                 invalidText={errors.value}
                 type={values.secured ? "password" : "text"}
                 helperText={
diff --git a/src/Features/Insights/__snapshots__/Insights.spec.jsx.snap b/src/Features/Insights/__snapshots__/Insights.spec.jsx.snap
index 307c17cec..dcc7b2806 100644
--- a/src/Features/Insights/__snapshots__/Insights.spec.jsx.snap
+++ b/src/Features/Insights/__snapshots__/Insights.spec.jsx.snap
@@ -341,7 +341,7 @@ exports[`WorkflowInsights --- Snapshot > Capturing Snapshot of WorkflowInsights
                     id="insights-date-picker-start"
                     pattern="\\\\d{1,2}\\\\/\\\\d{1,2}\\\\/\\\\d{4}"
                     type="text"
-                    value="10/18/2022"
+                    value="10/24/2022"
                   />
                   <svg
                     aria-hidden="true"
@@ -380,7 +380,7 @@ exports[`WorkflowInsights --- Snapshot > Capturing Snapshot of WorkflowInsights
                     id="insights-date-picker-end"
                     pattern="\\\\d{1,2}\\\\/\\\\d{1,2}\\\\/\\\\d{4}"
                     type="text"
-                    value="01/18/2023"
+                    value="01/24/2023"
                   />
                   <svg
                     aria-hidden="true"
@@ -824,46 +824,52 @@ exports[`WorkflowInsights --- Snapshot > Capturing Snapshot of WorkflowInsights
               17
             </span>
             <span
-              aria-current="date"
               aria-label="January 18, 2023"
-              class="flatpickr-day today selected endRange undefined--date-picker__day no-border cds--date-picker__day"
+              class="flatpickr-day inRange undefined--date-picker__day cds--date-picker__day"
               tabindex="-1"
             >
               18
             </span>
             <span
               aria-label="January 19, 2023"
-              class="flatpickr-day flatpickr-disabled undefined--date-picker__day cds--date-picker__day"
+              class="flatpickr-day inRange undefined--date-picker__day cds--date-picker__day"
+              tabindex="-1"
             >
               19
             </span>
             <span
               aria-label="January 20, 2023"
-              class="flatpickr-day flatpickr-disabled undefined--date-picker__day cds--date-picker__day"
+              class="flatpickr-day inRange undefined--date-picker__day cds--date-picker__day"
+              tabindex="-1"
             >
               20
             </span>
             <span
               aria-label="January 21, 2023"
-              class="flatpickr-day flatpickr-disabled undefined--date-picker__day cds--date-picker__day"
+              class="flatpickr-day inRange undefined--date-picker__day cds--date-picker__day"
+              tabindex="-1"
             >
               21
             </span>
             <span
               aria-label="January 22, 2023"
-              class="flatpickr-day flatpickr-disabled undefined--date-picker__day cds--date-picker__day"
+              class="flatpickr-day inRange undefined--date-picker__day cds--date-picker__day"
+              tabindex="-1"
             >
               22
             </span>
             <span
               aria-label="January 23, 2023"
-              class="flatpickr-day flatpickr-disabled undefined--date-picker__day cds--date-picker__day"
+              class="flatpickr-day inRange undefined--date-picker__day cds--date-picker__day"
+              tabindex="-1"
             >
               23
             </span>
             <span
+              aria-current="date"
               aria-label="January 24, 2023"
-              class="flatpickr-day flatpickr-disabled undefined--date-picker__day cds--date-picker__day"
+              class="flatpickr-day today selected endRange undefined--date-picker__day no-border cds--date-picker__day"
+              tabindex="-1"
             >
               24
             </span>
diff --git a/src/Features/ManageTeamTasks/Header/header.module.scss b/src/Features/ManageTeamTasks/Header/header.module.scss
index 34b730e8c..f15ded5e0 100644
--- a/src/Features/ManageTeamTasks/Header/header.module.scss
+++ b/src/Features/ManageTeamTasks/Header/header.module.scss
@@ -3,7 +3,7 @@
 .featureHeader {
   align-items: center;
   display: flex;
-  min-height: 9.3125rem;
+  min-height: fit-content;
   width: 100%;
   padding: 1.5rem 1.5rem 0rem;
 }
diff --git a/src/Features/ManageTeamTasks/ManageTeamTasks.tsx b/src/Features/ManageTeamTasks/ManageTeamTasks.tsx
index 0f2fa9061..e2c4836d3 100644
--- a/src/Features/ManageTeamTasks/ManageTeamTasks.tsx
+++ b/src/Features/ManageTeamTasks/ManageTeamTasks.tsx
@@ -5,7 +5,6 @@ import { useQuery } from "Hooks";
 import { useQueryClient } from "react-query";
 import { Route, Switch, useRouteMatch, Redirect, useParams } from "react-router-dom";
 import { Box } from "reflexbox";
-import { Loading } from "@carbon/react";
 import queryString from "query-string";
 import ErrorDragon from "Components/ErrorDragon";
 import WombatMessage from "Components/WombatMessage";
@@ -27,7 +26,11 @@ const TaskTemplatesContainer: React.FC = () => {
     query: queryString.stringify({ teamId: params?.teamId, scope: "team" }),
   });
   const editVerifiedTasksEnabled = useFeature(FeatureFlag.EditVerifiedTasksEnabled);
-  const { data: taskTemplatesData, error: taskTemplatesDataError, isLoading } = useQuery(getTaskTemplatesUrl, {
+  const {
+    data: taskTemplatesData,
+    error: taskTemplatesDataError,
+    isLoading,
+  } = useQuery(getTaskTemplatesUrl, {
     enabled: Boolean(activeTeam),
   });
 
@@ -47,12 +50,34 @@ const TaskTemplatesContainer: React.FC = () => {
   };
 
   if (isLoading) {
-    return <Loading />;
+    return (
+      <div className={styles.container}>
+        <Helmet>
+          <title>Team Tasks</title>
+        </Helmet>
+        <Sidenav
+          isLoading
+          activeTeam={activeTeam}
+          addTemplateInState={addTemplateInState}
+          taskTemplates={[]}
+          setActiveTeam={setActiveTeam}
+        />
+        <Box maxWidth="24rem" margin="0 auto">
+          <WombatMessage
+            className={styles.wombat}
+            title={`${activeTeam ? "Select a task or create one" : "Select a team"}`}
+          />
+        </Box>
+      </div>
+    );
   }
 
   if (taskTemplatesDataError) {
     return (
       <div className={styles.container}>
+        <Helmet>
+          <title>Team Tasks</title>
+        </Helmet>
         <ErrorDragon />
       </div>
     );
@@ -64,10 +89,10 @@ const TaskTemplatesContainer: React.FC = () => {
         <title>Team Tasks</title>
       </Helmet>
       <Sidenav
-        taskTemplates={taskTemplatesData}
+        activeTeam={activeTeam}
         addTemplateInState={addTemplateInState}
+        taskTemplates={taskTemplatesData}
         setActiveTeam={setActiveTeam}
-        activeTeam={activeTeam}
       />
       <Switch>
         <Route exact path={match.path}>
diff --git a/src/Features/ManageTeamTasks/Sidenav/AddTaskTemplate/AddTaskTemplate.tsx b/src/Features/ManageTeamTasks/Sidenav/AddTaskTemplate/AddTaskTemplate.tsx
index 1cd02bdeb..f76a810ea 100644
--- a/src/Features/ManageTeamTasks/Sidenav/AddTaskTemplate/AddTaskTemplate.tsx
+++ b/src/Features/ManageTeamTasks/Sidenav/AddTaskTemplate/AddTaskTemplate.tsx
@@ -65,7 +65,7 @@ function AddTaskTemplate({ addTemplateInState, taskTemplates, history, location
         children: "Your request will not be saved",
       }}
       modalTrigger={({ openModal }) => (
-        <Button iconDescription="Add task template" onClick={openModal} size="md" kind="ghost" renderIcon={Add}>
+        <Button iconDescription="Add task template" onClick={openModal} size="sm" kind="ghost" renderIcon={Add}>
           Add a new task
         </Button>
       )}
diff --git a/src/Features/ManageTeamTasks/Sidenav/AddTaskTemplate/AddTaskTemplateForm/AddTaskTemplateForm.tsx b/src/Features/ManageTeamTasks/Sidenav/AddTaskTemplate/AddTaskTemplateForm/AddTaskTemplateForm.tsx
index dcef3e7f6..3d36975e0 100644
--- a/src/Features/ManageTeamTasks/Sidenav/AddTaskTemplate/AddTaskTemplateForm/AddTaskTemplateForm.tsx
+++ b/src/Features/ManageTeamTasks/Sidenav/AddTaskTemplate/AddTaskTemplateForm/AddTaskTemplateForm.tsx
@@ -287,7 +287,7 @@ function AddTaskTemplateForm({ closeModal, taskTemplates, isLoading, handleAddTa
               </div>
               <TextInput
                 id="name"
-                invalid={errors.name && touched.name}
+                invalid={Boolean(errors.name && touched.name)}
                 invalidText={errors.name}
                 labelText="Name"
                 helperText="Must be unique"
@@ -298,7 +298,7 @@ function AddTaskTemplateForm({ closeModal, taskTemplates, isLoading, handleAddTa
               />
               <TextInput
                 id="category"
-                invalid={errors.category && touched.category}
+                invalid={Boolean(errors.category && touched.category)}
                 invalidText={errors.category}
                 labelText="Category"
                 helperText="Categories have strict matching, type as you want to see it"
@@ -316,7 +316,7 @@ function AddTaskTemplateForm({ closeModal, taskTemplates, isLoading, handleAddTa
                 <p className={styles.descriptionLength}>{values.description?.length ?? 0}/200</p>
                 <TextArea
                   id="description"
-                  invalid={errors.description && touched.description}
+                  invalid={Boolean(errors.description && touched.description)}
                   invalidText={errors.description}
                   labelText="Description"
                   onBlur={handleBlur}
@@ -332,7 +332,7 @@ function AddTaskTemplateForm({ closeModal, taskTemplates, isLoading, handleAddTa
                 value={values.image}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.image && touched.image}
+                invalid={Boolean(errors.image && touched.image)}
                 invalidText={errors.image}
               />
               <TextArea
@@ -343,7 +343,7 @@ function AddTaskTemplateForm({ closeModal, taskTemplates, isLoading, handleAddTa
                 value={values.command}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.command && touched.command}
+                invalid={Boolean(errors.command && touched.command)}
                 invalidText={errors.command}
               />
               <TextArea
@@ -355,12 +355,12 @@ function AddTaskTemplateForm({ closeModal, taskTemplates, isLoading, handleAddTa
                 value={values.arguments}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.arguments && touched.arguments}
+                invalid={Boolean(errors.arguments && touched.arguments)}
                 invalidText={errors.arguments}
               />
               <TextArea
                 id="script"
-                invalid={errors.script && touched.script}
+                invalid={Boolean(errors.script && touched.script)}
                 invalidText={errors.script}
                 labelText="Script (optional)"
                 onBlur={handleBlur}
@@ -369,7 +369,7 @@ function AddTaskTemplateForm({ closeModal, taskTemplates, isLoading, handleAddTa
               />
               <TextInput
                 id="workingDir"
-                invalid={errors.workingDir && touched.workingDir}
+                invalid={Boolean(errors.workingDir && touched.workingDir)}
                 invalidText={errors.workingDir}
                 labelText="Working Directory (optional)"
                 onBlur={handleBlur}
diff --git a/src/Features/ManageTeamTasks/Sidenav/Sidenav.tsx b/src/Features/ManageTeamTasks/Sidenav/Sidenav.tsx
index 619506617..ee0f59c57 100644
--- a/src/Features/ManageTeamTasks/Sidenav/Sidenav.tsx
+++ b/src/Features/ManageTeamTasks/Sidenav/Sidenav.tsx
@@ -3,7 +3,7 @@ import { useHistory, useLocation } from "react-router-dom";
 import { useAppContext } from "Hooks";
 import sortBy from "lodash/sortBy";
 import { matchSorter } from "match-sorter";
-import { Accordion, AccordionItem, Checkbox, Dropdown, Layer, OverflowMenu , Search } from "@carbon/react";
+import { Accordion, AccordionItem, Checkbox, Dropdown, Layer, OverflowMenu, Search, SkeletonText } from "@carbon/react";
 import {
   CheckboxList,
   FeatureSideNav as SideNav,
@@ -22,13 +22,20 @@ import styles from "./sideInfo.module.scss";
 const DESCRIPTION = "Create and import tasks to add to the Flow Editor task list";
 
 interface SideInfoProps {
+  activeTeam: string | string[] | null;
   addTemplateInState: (newTemplate: TaskModel) => void;
-  taskTemplates: TaskModel[];
+  isLoading?: boolean;
   setActiveTeam: Function;
-  activeTeam: string | string[] | null;
+  taskTemplates: TaskModel[];
 }
 
-const SideInfo: React.FC<SideInfoProps> = ({ addTemplateInState, taskTemplates, setActiveTeam, activeTeam }) => {
+const SideInfo: React.FC<SideInfoProps> = ({
+  activeTeam,
+  addTemplateInState,
+  isLoading,
+  setActiveTeam,
+  taskTemplates,
+}) => {
   const { teams } = useAppContext();
   const [searchQuery, setSearchQuery] = React.useState("");
   const [activeFilters, setActiveFilters] = React.useState<Array<string>>([]);
@@ -106,22 +113,49 @@ const SideInfo: React.FC<SideInfoProps> = ({ addTemplateInState, taskTemplates,
     history.push(appLink.manageTaskTemplates({ teamId: selectedTeam?.selectedItem?.id }));
   };
 
+  if (isLoading) {
+    return (
+      <SideNav className={styles.container} border="right">
+        <h1 className={styles.title}>Task manager</h1>
+        <p className={styles.description}>{DESCRIPTION}</p>
+        <Layer>
+          <Dropdown
+            id="dropdown-team"
+            type="default"
+            label="Team selection"
+            ariaLabel="Dropdown"
+            initialSelectedItem={selectedTeam}
+            items={teamOptions}
+            itemToString={(item: any) => (item ? item.name : "")}
+            onChange={handleSelectTeam}
+          />
+        </Layer>
+        <div style={{ padding: "1.5rem 1rem" }}>
+          <SkeletonText />
+          <SkeletonText />
+          <SkeletonText />
+          <SkeletonText />
+          <SkeletonText />
+        </div>
+      </SideNav>
+    );
+  }
+
   return (
     <SideNav className={styles.container} border="right">
       <h1 className={styles.title}>Task manager</h1>
       <p className={styles.description}>{DESCRIPTION}</p>
       <Layer>
-      <Dropdown
-        id="dropdown-team"
-        type="default"
-        label="Team selection"
-        ariaLabel="Dropdown"
-        // light={false}
-        initialSelectedItem={selectedTeam}
-        items={teamOptions}
-        itemToString={(item: any) => (item ? item.name : "")}
-        onChange={handleSelectTeam}
-      />
+        <Dropdown
+          id="dropdown-team"
+          type="default"
+          label="Team selection"
+          ariaLabel="Dropdown"
+          initialSelectedItem={selectedTeam}
+          items={teamOptions}
+          itemToString={(item: any) => (item ? item.name : "")}
+          onChange={handleSelectTeam}
+        />
       </Layer>
       {taskTemplates && (
         <div className={styles.tasksContainer}>
@@ -145,7 +179,7 @@ const SideInfo: React.FC<SideInfoProps> = ({ addTemplateInState, taskTemplates,
               value={searchQuery}
             />
             <OverflowMenu
-            ariaLabel="Filter"
+              ariaLabel="Filter"
               renderIcon={SettingsAdjust}
               style={{
                 backgroundColor: showVerified || showArchived || activeFilters.length > 0 ? "#3DDBD9" : "initial",
@@ -153,6 +187,7 @@ const SideInfo: React.FC<SideInfoProps> = ({ addTemplateInState, taskTemplates,
               }}
               flipped={true}
               menuOptionsClass={styles.filters}
+              size="sm"
             >
               <section className={styles.filterHeader}>
                 <p className={styles.filterTitle}>Filters</p>
diff --git a/src/Features/ManageTeamTasks/TaskTemplateOverview/taskTemplateOverview.module.scss b/src/Features/ManageTeamTasks/TaskTemplateOverview/taskTemplateOverview.module.scss
index ccd218eaf..87b2273be 100644
--- a/src/Features/ManageTeamTasks/TaskTemplateOverview/taskTemplateOverview.module.scss
+++ b/src/Features/ManageTeamTasks/TaskTemplateOverview/taskTemplateOverview.module.scss
@@ -75,9 +75,8 @@
 .editTitle {
   align-items: center;
   display: flex;
-
+  flex-flow: wrap;
   justify-content: space-between;
-
   margin-bottom: 0.75rem;
   width: 100%;
   :global .cds--btn__icon {
diff --git a/src/Features/ManageTeamTasks/TaskTemplateYamlEditor/taskTemplateYamlEditor.module.scss b/src/Features/ManageTeamTasks/TaskTemplateYamlEditor/taskTemplateYamlEditor.module.scss
index c509daaa8..ab4a3cb53 100644
--- a/src/Features/ManageTeamTasks/TaskTemplateYamlEditor/taskTemplateYamlEditor.module.scss
+++ b/src/Features/ManageTeamTasks/TaskTemplateYamlEditor/taskTemplateYamlEditor.module.scss
@@ -76,9 +76,8 @@
 .editTitle {
   align-items: center;
   display: flex;
-
+  flex-flow: wrap;
   justify-content: space-between;
-
   margin-bottom: 0.75rem;
   width: 100%;
   :global .cds--btn__icon {
diff --git a/src/Features/ManageTeamTasks/taskTemplates.module.scss b/src/Features/ManageTeamTasks/taskTemplates.module.scss
index b22330ff7..45f10e41a 100644
--- a/src/Features/ManageTeamTasks/taskTemplates.module.scss
+++ b/src/Features/ManageTeamTasks/taskTemplates.module.scss
@@ -1,7 +1,7 @@
 .container {
   display: flex;
   height: 100%;
-  overflow-y: auto;
+  overflow: hidden;
   width: 100%;
 }
 .wombat {
diff --git a/src/Features/Quotas/TeamQuotasOverview/QuotaEditModalContent/QuotaEditModalContent.tsx b/src/Features/Quotas/TeamQuotasOverview/QuotaEditModalContent/QuotaEditModalContent.tsx
index e18295faf..a038fdad5 100644
--- a/src/Features/Quotas/TeamQuotasOverview/QuotaEditModalContent/QuotaEditModalContent.tsx
+++ b/src/Features/Quotas/TeamQuotasOverview/QuotaEditModalContent/QuotaEditModalContent.tsx
@@ -116,7 +116,7 @@ const QuotaEditModalContent: React.FC<QuotaEditProps> = ({
                       //@ts-ignore
                       setFieldValue("quotaFormValue", value);
                     }}
-                    invalid={errors.quotaFormValue && !touched.quotaFormValue}
+                    invalid={Boolean(errors.quotaFormValue && !touched.quotaFormValue)}
                     invalidText={errors.quotaFormValue}
                   />
                   {inputUnits && <span className={styles.inputUnits}>{inputUnits}</span>}
diff --git a/src/Features/TaskTemplates/Header/__snapshots__/Header.spec.jsx.snap b/src/Features/TaskTemplates/Header/__snapshots__/Header.spec.jsx.snap
index 63e161ece..d4e744615 100644
--- a/src/Features/TaskTemplates/Header/__snapshots__/Header.spec.jsx.snap
+++ b/src/Features/TaskTemplates/Header/__snapshots__/Header.spec.jsx.snap
@@ -110,7 +110,7 @@ exports[`Header --- Snapshot > Capturing Snapshot of Task Templates 1`] = `
                 class="cds--tabs__nav-item cds--tabs__nav-link"
                 href="/admin/task-templates/5e670a1e2d5e6a302de4f41d/1/yaml-editor"
               >
-                Yaml
+                YAML
               </a>
             </ul>
           </nav>
diff --git a/src/Features/TaskTemplates/Header/header.module.scss b/src/Features/TaskTemplates/Header/header.module.scss
index 34b730e8c..f15ded5e0 100644
--- a/src/Features/TaskTemplates/Header/header.module.scss
+++ b/src/Features/TaskTemplates/Header/header.module.scss
@@ -3,7 +3,7 @@
 .featureHeader {
   align-items: center;
   display: flex;
-  min-height: 9.3125rem;
+  min-height: fit-content;
   width: 100%;
   padding: 1.5rem 1.5rem 0rem;
 }
diff --git a/src/Features/TaskTemplates/Sidenav/AddTaskTemplate/AddTaskTemplate.tsx b/src/Features/TaskTemplates/Sidenav/AddTaskTemplate/AddTaskTemplate.tsx
index 3382d62ca..d503c9e73 100644
--- a/src/Features/TaskTemplates/Sidenav/AddTaskTemplate/AddTaskTemplate.tsx
+++ b/src/Features/TaskTemplates/Sidenav/AddTaskTemplate/AddTaskTemplate.tsx
@@ -63,7 +63,7 @@ function AddTaskTemplate({ addTemplateInState, taskTemplates, history, location
         children: "Your request will not be saved",
       }}
       modalTrigger={({ openModal }) => (
-        <Button iconDescription="Add task template" onClick={openModal} size="md" kind="ghost" renderIcon={Add}>
+        <Button iconDescription="Add task template" onClick={openModal} size="sm" kind="ghost" renderIcon={Add}>
           Add a new task
         </Button>
       )}
diff --git a/src/Features/TaskTemplates/Sidenav/AddTaskTemplate/AddTaskTemplateForm/AddTaskTemplateForm.tsx b/src/Features/TaskTemplates/Sidenav/AddTaskTemplate/AddTaskTemplateForm/AddTaskTemplateForm.tsx
index 55a07ec9e..839f02cdc 100644
--- a/src/Features/TaskTemplates/Sidenav/AddTaskTemplate/AddTaskTemplateForm/AddTaskTemplateForm.tsx
+++ b/src/Features/TaskTemplates/Sidenav/AddTaskTemplate/AddTaskTemplateForm/AddTaskTemplateForm.tsx
@@ -285,7 +285,7 @@ function AddTaskTemplateForm({ closeModal, taskTemplates, isLoading, handleAddTa
               </div>
               <TextInput
                 id="name"
-                invalid={errors.name && touched.name}
+                invalid={Boolean(errors.name && touched.name)}
                 invalidText={errors.name}
                 labelText="Name"
                 helperText="Must be unique"
@@ -296,7 +296,7 @@ function AddTaskTemplateForm({ closeModal, taskTemplates, isLoading, handleAddTa
               />
               <TextInput
                 id="category"
-                invalid={errors.category && touched.category}
+                invalid={Boolean(errors.category && touched.category)}
                 invalidText={errors.category}
                 labelText="Category"
                 helperText="Categories have strict matching, type as you want to see it"
@@ -314,7 +314,7 @@ function AddTaskTemplateForm({ closeModal, taskTemplates, isLoading, handleAddTa
                 <p className={styles.descriptionLength}>{values.description?.length ?? 0}/200</p>
                 <TextArea
                   id="description"
-                  invalid={errors.description && touched.description}
+                  invalid={Boolean(errors.description && touched.description)}
                   invalidText={errors.description}
                   labelText="Description"
                   onBlur={handleBlur}
@@ -330,7 +330,7 @@ function AddTaskTemplateForm({ closeModal, taskTemplates, isLoading, handleAddTa
                 value={values.image}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.image && touched.image}
+                invalid={Boolean(errors.image && touched.image)}
                 invalidText={errors.image}
               />
               <TextArea
@@ -341,7 +341,7 @@ function AddTaskTemplateForm({ closeModal, taskTemplates, isLoading, handleAddTa
                 value={values.command}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.command && touched.command}
+                invalid={Boolean(errors.command && touched.command)}
                 invalidText={errors.command}
               />
               <TextArea
@@ -353,12 +353,12 @@ function AddTaskTemplateForm({ closeModal, taskTemplates, isLoading, handleAddTa
                 value={values.arguments}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.arguments && touched.arguments}
+                invalid={Boolean(errors.arguments && touched.arguments)}
                 invalidText={errors.arguments}
               />
               <TextArea
                 id="script"
-                invalid={errors.script && touched.script}
+                invalid={Boolean(errors.script && touched.script)}
                 invalidText={errors.script}
                 labelText="Script (optional)"
                 onBlur={handleBlur}
@@ -367,7 +367,7 @@ function AddTaskTemplateForm({ closeModal, taskTemplates, isLoading, handleAddTa
               />
               <TextInput
                 id="workingDir"
-                invalid={errors.workingDir && touched.workingDir}
+                invalid={Boolean(errors.workingDir && touched.workingDir)}
                 invalidText={errors.workingDir}
                 labelText="Working Directory (optional)"
                 onBlur={handleBlur}
diff --git a/src/Features/TaskTemplates/Sidenav/Sidenav.tsx b/src/Features/TaskTemplates/Sidenav/Sidenav.tsx
index c28ae52d2..26329c672 100644
--- a/src/Features/TaskTemplates/Sidenav/Sidenav.tsx
+++ b/src/Features/TaskTemplates/Sidenav/Sidenav.tsx
@@ -129,6 +129,7 @@ const SideInfo: React.FC<SideInfoProps> = ({ addTemplateInState, taskTemplates }
             }}
             flipped={true}
             menuOptionsClass={styles.filters}
+            size="sm"
           >
             <section className={styles.filterHeader}>
               <p className={styles.filterTitle}>Filters</p>
diff --git a/src/Features/TaskTemplates/TaskTemplateOverview/__snapshots__/TaskTemplateOverview.spec.jsx.snap b/src/Features/TaskTemplates/TaskTemplateOverview/__snapshots__/TaskTemplateOverview.spec.jsx.snap
index 459e90d98..674007da5 100644
--- a/src/Features/TaskTemplates/TaskTemplateOverview/__snapshots__/TaskTemplateOverview.spec.jsx.snap
+++ b/src/Features/TaskTemplates/TaskTemplateOverview/__snapshots__/TaskTemplateOverview.spec.jsx.snap
@@ -114,7 +114,7 @@ exports[`TaskTemplateOverview --- Snapshot > Capturing Snapshot of Task Template
                   class="cds--tabs__nav-item cds--tabs__nav-link"
                   href="/admin/task-templates/5e670a1e2d5e6a302de4f41d/1/yaml-editor"
                 >
-                  Yaml
+                  YAML
                 </a>
               </ul>
             </nav>
@@ -587,7 +587,7 @@ lookUpUser
               >
                 <button
                   class="cds--btn cds--btn--md cds--btn--ghost"
-                  style="width: 6.25rem;"
+                  style="width: 7rem;"
                   tabindex="0"
                   type="button"
                 >
@@ -615,7 +615,7 @@ lookUpUser
                 </button>
                 <button
                   class="cds--btn cds--btn--md cds--btn--ghost"
-                  style="margin-right: 0.5rem;"
+                  style="width: 8rem;"
                   tabindex="0"
                   type="button"
                 >
@@ -646,13 +646,13 @@ lookUpUser
               <section
                 class="_fieldSection_734922"
                 data-rbd-draggable-context-id="0"
-                data-rbd-draggable-id="0"
+                data-rbd-draggable-id="token"
               >
                 <div
                   aria-describedby="rbd-hidden-text-0-hidden-text-0"
                   class="_iconContainer_734922"
                   data-rbd-drag-handle-context-id="0"
-                  data-rbd-drag-handle-draggable-id="0"
+                  data-rbd-drag-handle-draggable-id="token"
                   draggable="false"
                   role="button"
                   style="display: flex;"
@@ -738,13 +738,13 @@ lookUpUser
               <section
                 class="_fieldSection_734922"
                 data-rbd-draggable-context-id="0"
-                data-rbd-draggable-id="1"
+                data-rbd-draggable-id="emailAddress"
               >
                 <div
                   aria-describedby="rbd-hidden-text-0-hidden-text-0"
                   class="_iconContainer_734922"
                   data-rbd-drag-handle-context-id="0"
-                  data-rbd-drag-handle-draggable-id="1"
+                  data-rbd-drag-handle-draggable-id="emailAddress"
                   draggable="false"
                   role="button"
                   style="display: flex;"
@@ -840,7 +840,7 @@ lookUpUser
               </h1>
               <button
                 class="cds--btn cds--btn--md cds--btn--ghost"
-                style="margin-right: 0.5rem;"
+                style="width: 13.5rem;"
                 tabindex="0"
                 type="button"
               >
diff --git a/src/Features/TaskTemplates/TaskTemplateOverview/taskTemplateOverview.module.scss b/src/Features/TaskTemplates/TaskTemplateOverview/taskTemplateOverview.module.scss
index 153d8d65b..cc50b9abe 100644
--- a/src/Features/TaskTemplates/TaskTemplateOverview/taskTemplateOverview.module.scss
+++ b/src/Features/TaskTemplates/TaskTemplateOverview/taskTemplateOverview.module.scss
@@ -75,9 +75,8 @@
 .editTitle {
   align-items: center;
   display: flex;
-
+  flex-flow: wrap;
   justify-content: space-between;
-
   margin-bottom: 0.75rem;
   width: 100%;
   :global .cds--btn__icon {
diff --git a/src/Features/TaskTemplates/TaskTemplateYamlEditor/taskTemplateYamlEditor.module.scss b/src/Features/TaskTemplates/TaskTemplateYamlEditor/taskTemplateYamlEditor.module.scss
index c509daaa8..ab4a3cb53 100644
--- a/src/Features/TaskTemplates/TaskTemplateYamlEditor/taskTemplateYamlEditor.module.scss
+++ b/src/Features/TaskTemplates/TaskTemplateYamlEditor/taskTemplateYamlEditor.module.scss
@@ -76,9 +76,8 @@
 .editTitle {
   align-items: center;
   display: flex;
-
+  flex-flow: wrap;
   justify-content: space-between;
-
   margin-bottom: 0.75rem;
   width: 100%;
   :global .cds--btn__icon {
diff --git a/src/Features/TaskTemplates/__snapshots__/TaskTemplates.spec.tsx.snap b/src/Features/TaskTemplates/__snapshots__/TaskTemplates.spec.tsx.snap
index 3c1d62bab..48e238984 100644
--- a/src/Features/TaskTemplates/__snapshots__/TaskTemplates.spec.tsx.snap
+++ b/src/Features/TaskTemplates/__snapshots__/TaskTemplates.spec.tsx.snap
@@ -33,7 +33,7 @@ exports[`TaskTemplateManager --- Snapshot > Capturing Snapshot of Task Templates
               Existing Tasks (34)
             </p>
             <button
-              class="cds--btn cds--btn--md cds--btn--ghost"
+              class="cds--btn cds--btn--sm cds--btn--ghost"
               tabindex="0"
               type="button"
             >
@@ -126,7 +126,8 @@ exports[`TaskTemplateManager --- Snapshot > Capturing Snapshot of Task Templates
             <button
               aria-expanded="false"
               aria-haspopup="true"
-              class="cds--overflow-menu cds--overflow-menu--md"
+              aria-label="Filter"
+              class="cds--overflow-menu cds--overflow-menu--sm"
               style="border-radius: 0.25rem;"
               type="button"
             >
diff --git a/src/Features/TaskTemplates/taskTemplates.module.scss b/src/Features/TaskTemplates/taskTemplates.module.scss
index b22330ff7..45f10e41a 100644
--- a/src/Features/TaskTemplates/taskTemplates.module.scss
+++ b/src/Features/TaskTemplates/taskTemplates.module.scss
@@ -1,7 +1,7 @@
 .container {
   display: flex;
   height: 100%;
-  overflow-y: auto;
+  overflow: hidden;
   width: 100%;
 }
 .wombat {
diff --git a/src/Features/TeamDetailed/Settings/UpdateTeamName/UpdateTeamName.tsx b/src/Features/TeamDetailed/Settings/UpdateTeamName/UpdateTeamName.tsx
index f11817bbd..692ee91aa 100644
--- a/src/Features/TeamDetailed/Settings/UpdateTeamName/UpdateTeamName.tsx
+++ b/src/Features/TeamDetailed/Settings/UpdateTeamName/UpdateTeamName.tsx
@@ -77,7 +77,7 @@ const UpdateTeamName: React.FC<UpdateTeamNameProps> = ({ closeModal, team, teamN
                   onChange={(value: React.ChangeEvent<HTMLInputElement>) => {
                     setFieldValue("name", value.target.value);
                   }}
-                  invalid={errors.name && !touched.name}
+                  invalid={Boolean(errors.name && !touched.name)}
                   invalidText={errors.name}
                 />
                 {error && (
diff --git a/src/Features/TeamProperties/TeamPropertiesTable/CreateEditTeamPropertiesModal/CreateEditTeamPropertiesModalContent/CreateEditTeamPropertiesModalContent.tsx b/src/Features/TeamProperties/TeamPropertiesTable/CreateEditTeamPropertiesModal/CreateEditTeamPropertiesModalContent/CreateEditTeamPropertiesModalContent.tsx
index 1cb8fd068..6ada034fb 100644
--- a/src/Features/TeamProperties/TeamPropertiesTable/CreateEditTeamPropertiesModal/CreateEditTeamPropertiesModalContent/CreateEditTeamPropertiesModalContent.tsx
+++ b/src/Features/TeamProperties/TeamPropertiesTable/CreateEditTeamPropertiesModal/CreateEditTeamPropertiesModalContent/CreateEditTeamPropertiesModalContent.tsx
@@ -163,7 +163,7 @@ function CreateEditTeamPropertiesModalContent({
                 value={values.key}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.key && touched.key}
+                invalid={Boolean(errors.key && touched.key)}
                 invalidText={errors.key}
               />
               <TextInput
@@ -174,7 +174,7 @@ function CreateEditTeamPropertiesModalContent({
                 value={values.label}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.label && touched.label}
+                invalid={Boolean(errors.label && touched.label)}
                 invalidText={errors.label}
               />
               <TextInput
@@ -194,7 +194,7 @@ function CreateEditTeamPropertiesModalContent({
                 value={values.value}
                 onBlur={handleBlur}
                 onChange={handleChange}
-                invalid={errors.value && touched.value}
+                invalid={Boolean(errors.value && touched.value)}
                 invalidText={errors.value}
                 type={values.secured ? "password" : "text"}
                 helperText={
diff --git a/src/Features/TeamProperties/TeamPropertiesTable/TeamPropertiesTable.tsx b/src/Features/TeamProperties/TeamPropertiesTable/TeamPropertiesTable.tsx
index 9514e793a..522d1fddf 100644
--- a/src/Features/TeamProperties/TeamPropertiesTable/TeamPropertiesTable.tsx
+++ b/src/Features/TeamProperties/TeamPropertiesTable/TeamPropertiesTable.tsx
@@ -156,7 +156,9 @@ const TeamPropertiesTable: React.FC<TeamPropertiesTableProps> = ({
         header={
           <>
             <HeaderTitle className={styles.headerTitle}>Team Parameters</HeaderTitle>
-            <HeaderSubtitle>Set team parameters that are accessible in all workflows for that team.</HeaderSubtitle>
+            <HeaderSubtitle>
+              Set team-level parameters that are accessible to all workflows owned by the team.
+            </HeaderSubtitle>
           </>
         }
       />
@@ -177,9 +179,6 @@ const TeamPropertiesTable: React.FC<TeamPropertiesTableProps> = ({
                   setActiveTeam(selectedItem);
                 }}
                 placeholder="Select a team"
-                shouldFilterItem={({ item, inputValue }: { item: any; inputValue: string }) =>
-                  item?.name?.toLowerCase()?.includes(inputValue.toLowerCase())
-                }
               />
             </div>
             {(activeTeam?.id || totalItems > 0) && (
diff --git a/src/Features/TeamProperties/TeamPropertiesTable/__snapshots__/TeamPropertiesTable.spec.tsx.snap b/src/Features/TeamProperties/TeamPropertiesTable/__snapshots__/TeamPropertiesTable.spec.tsx.snap
index 614d6b45f..135be3515 100644
--- a/src/Features/TeamProperties/TeamPropertiesTable/__snapshots__/TeamPropertiesTable.spec.tsx.snap
+++ b/src/Features/TeamProperties/TeamPropertiesTable/__snapshots__/TeamPropertiesTable.spec.tsx.snap
@@ -22,7 +22,7 @@ exports[`TeamPropertiesTable --- Snapshot Test > Capturing Snapshot of TeamPrope
           <p
             class="cds--bmrg-feature-header-title"
           >
-            Set team parameters that are accessible in all workflows for that team.
+            Set team-level parameters that are accessible to all workflows owned by the team.
           </p>
         </div>
       </section>
diff --git a/src/Features/TeamProperties/__snapshots__/TeamProperties.spec.jsx.snap b/src/Features/TeamProperties/__snapshots__/TeamProperties.spec.jsx.snap
index 0431b7542..1d4f4ca22 100644
--- a/src/Features/TeamProperties/__snapshots__/TeamProperties.spec.jsx.snap
+++ b/src/Features/TeamProperties/__snapshots__/TeamProperties.spec.jsx.snap
@@ -25,7 +25,7 @@ exports[`TeamProperties --- Snapshot Test > Capturing Snapshot of TeamProperties
             <p
               class="cds--bmrg-feature-header-title"
             >
-              Set team parameters that are accessible in all workflows for that team.
+              Set team-level parameters that are accessible to all workflows owned by the team.
             </p>
           </div>
         </section>
diff --git a/src/Features/TeamTokens/TeamTokenComponent/CreateToken/Form/index.tsx b/src/Features/TeamTokens/TeamTokenComponent/CreateToken/Form/index.tsx
index 90aac2b11..2deb84f18 100644
--- a/src/Features/TeamTokens/TeamTokenComponent/CreateToken/Form/index.tsx
+++ b/src/Features/TeamTokens/TeamTokenComponent/CreateToken/Form/index.tsx
@@ -106,7 +106,7 @@ function CreateServiceTokenForm({
                   data-testid="token-expiration-id"
                   id={InputKey.ExpiryDate}
                   dateFormat="MM-DD-YYYY"
-                  invalid={errors.date}
+                  invalid={Boolean(errors.date)}
                   invalidText={errors.date}
                   labelText={
                     <div className={styles.inputLabelContainer}>
diff --git a/src/Features/TeamTokens/TeamTokenComponent/__snapshots__/index.spec.tsx.snap b/src/Features/TeamTokens/TeamTokenComponent/__snapshots__/index.spec.tsx.snap
index d333725a1..2cee41c3b 100644
--- a/src/Features/TeamTokens/TeamTokenComponent/__snapshots__/index.spec.tsx.snap
+++ b/src/Features/TeamTokens/TeamTokenComponent/__snapshots__/index.spec.tsx.snap
@@ -22,6 +22,11 @@ exports[`TokenComponent --- Snapshot > Capturing Snapshot of TokenComponent 1`]
             >
               Team Tokens
             </h1>
+            <p
+              class="cds--bmrg-feature-header-title"
+            >
+              Set team-level tokens that are accessible to all workflows owned by the team.
+            </p>
           </div>
         </section>
       </header>
diff --git a/src/Features/TeamTokens/TeamTokenComponent/index.tsx b/src/Features/TeamTokens/TeamTokenComponent/index.tsx
index 56b428642..6a997c9b6 100644
--- a/src/Features/TeamTokens/TeamTokenComponent/index.tsx
+++ b/src/Features/TeamTokens/TeamTokenComponent/index.tsx
@@ -7,6 +7,7 @@ import {
   ComboBox,
   FeatureHeader as Header,
   FeatureHeaderTitle as HeaderTitle,
+  FeatureHeaderSubtitle as HeaderSubtitle,
   Error404,
   ErrorMessage,
 } from "@boomerang-io/carbon-addons-boomerang-react";
@@ -63,6 +64,9 @@ const FeatureLayout: React.FC<FeatureLayoutProps> = ({ children }) => {
         header={
           <>
             <HeaderTitle className={styles.headerTitle}>Team Tokens</HeaderTitle>
+            <HeaderSubtitle>
+              Set team-level tokens that are accessible to all workflows owned by the team.
+            </HeaderSubtitle>
           </>
         }
       />
@@ -148,9 +152,6 @@ function TeamTokenComponent({
               setActiveTeam(selectedItem);
             }}
             placeholder="Select a team"
-            shouldFilterItem={({ item, inputValue }: { item: any; inputValue: string }) =>
-              item?.name?.toLowerCase()?.includes(inputValue.toLowerCase())
-            }
           />
         </div>
         <DataTableSkeleton
@@ -191,9 +192,6 @@ function TeamTokenComponent({
                   setActiveTeam(selectedItem);
                 }}
                 placeholder="Select a team"
-                shouldFilterItem={({ item, inputValue }: { item: any; inputValue: string }) =>
-                  item?.name?.toLowerCase()?.includes(inputValue.toLowerCase())
-                }
               />
             </div>
             {activeTeam?.id && <CreateToken activeTeam={activeTeam} />}
diff --git a/src/Features/Teams/AddTeamContent/AddTeamContent.tsx b/src/Features/Teams/AddTeamContent/AddTeamContent.tsx
index 84ba96b02..ed6a4b807 100644
--- a/src/Features/Teams/AddTeamContent/AddTeamContent.tsx
+++ b/src/Features/Teams/AddTeamContent/AddTeamContent.tsx
@@ -95,7 +95,7 @@ export default function AddTeamContent({
                   onChange={(value: React.ChangeEvent<HTMLInputElement>) => {
                     setFieldValue("name", value.target.value);
                   }}
-                  invalid={errors.name && !touched.name}
+                  invalid={Boolean(errors.name && !touched.name)}
                   invalidText={errors.name}
                 />
                 {error && (
diff --git a/src/Features/Tokens/GlobalTokenComponent/CreateToken/Form/index.tsx b/src/Features/Tokens/GlobalTokenComponent/CreateToken/Form/index.tsx
index 4d0a8bb31..70c58a206 100644
--- a/src/Features/Tokens/GlobalTokenComponent/CreateToken/Form/index.tsx
+++ b/src/Features/Tokens/GlobalTokenComponent/CreateToken/Form/index.tsx
@@ -111,7 +111,7 @@ function CreateServiceTokenForm({
                   data-testid="token-expiration-id"
                   id={InputKey.ExpiryDate}
                   dateFormat="MM-DD-YYYY"
-                  invalid={errors.date}
+                  invalid={Boolean(errors.date)}
                   invalidText={errors.date}
                   labelText={
                     <div className={styles.inputLabelContainer}>
@@ -129,12 +129,14 @@ function CreateServiceTokenForm({
                 />
               </DatePicker>
               <TextArea
+              enableCounter
                 labelText="Description"
                 placeholder="Provide a short description for this Token"
                 id="description"
                 data-testid="token-description"
-                onChange={(value: any) => setFieldValue("description", value.target.value)}
+                onChange={(e) => setFieldValue("description", e.target.value)}
                 value={values.description}
+                maxCount={200}
               />
               {postGlobalTokenError ? (
                 <InlineNotification
diff --git a/src/Features/Tokens/GlobalTokenComponent/DeleteToken/index.tsx b/src/Features/Tokens/GlobalTokenComponent/DeleteToken/index.tsx
index 9b99c04c5..21b4eb12c 100644
--- a/src/Features/Tokens/GlobalTokenComponent/DeleteToken/index.tsx
+++ b/src/Features/Tokens/GlobalTokenComponent/DeleteToken/index.tsx
@@ -27,7 +27,7 @@ function DeleteToken({ tokenItem, deleteToken }: Props) {
       )}
       affirmativeAction={() => deleteToken(tokenItem.id)}
       affirmativeButtonProps={{ kind: "danger" }}
-      affirmativeText="Yes"
+      affirmativeText="Delete"
       negativeText="No"
       title={`Are you sure?`}
     >
diff --git a/src/Features/Tokens/GlobalTokenComponent/__snapshots__/index.spec.tsx.snap b/src/Features/Tokens/GlobalTokenComponent/__snapshots__/index.spec.tsx.snap
index 8b46d3efb..9ac508cf5 100644
--- a/src/Features/Tokens/GlobalTokenComponent/__snapshots__/index.spec.tsx.snap
+++ b/src/Features/Tokens/GlobalTokenComponent/__snapshots__/index.spec.tsx.snap
@@ -22,6 +22,11 @@ exports[`TokenComponent --- Snapshot > Capturing Snapshot of TokenComponent 1`]
             >
               Global Tokens
             </h1>
+            <p
+              class="cds--bmrg-feature-header-title _headerTitle_23aca4"
+            >
+              Create tokens that can be used globally
+            </p>
           </div>
         </section>
       </header>
diff --git a/src/Features/Tokens/GlobalTokenComponent/index.tsx b/src/Features/Tokens/GlobalTokenComponent/index.tsx
index 20d7a8118..0da083522 100644
--- a/src/Features/Tokens/GlobalTokenComponent/index.tsx
+++ b/src/Features/Tokens/GlobalTokenComponent/index.tsx
@@ -7,6 +7,7 @@ import {
   Error404,
   ErrorMessage,
   FeatureHeader as Header,
+  FeatureHeaderSubtitle,
   FeatureHeaderTitle as HeaderTitle,
 } from "@boomerang-io/carbon-addons-boomerang-react";
 import DeleteToken from "./DeleteToken";
@@ -60,6 +61,7 @@ const FeatureLayout = ({ children }: FeatureLayoutProps) => {
         header={
           <>
             <HeaderTitle className={styles.headerTitle}>Global Tokens</HeaderTitle>
+            <FeatureHeaderSubtitle className={styles.headerTitle}>Create tokens that can be used globally</FeatureHeaderSubtitle>
           </>
         }
       />
diff --git a/src/Features/Workflows/WorkflowQuotaModalContent/WorkflowQuotaModalContent.module.scss b/src/Features/Workflows/WorkflowQuotaModalContent/WorkflowQuotaModalContent.module.scss
index 724364068..6070a62c6 100644
--- a/src/Features/Workflows/WorkflowQuotaModalContent/WorkflowQuotaModalContent.module.scss
+++ b/src/Features/Workflows/WorkflowQuotaModalContent/WorkflowQuotaModalContent.module.scss
@@ -8,9 +8,8 @@
   background-color: var(--cds-hover-selected-ui);
   border: none;
   height: 0.0625rem;
-  width: calc(100% + 2rem);
+  width: 1005;
   margin: 1.5rem 0;
-  margin-left: -1rem;
 
   &:first-of-type {
     margin-top: 0;
diff --git a/src/Features/Workflows/Workflows.tsx b/src/Features/Workflows/Workflows.tsx
index 42acd9835..fc945d6bb 100644
--- a/src/Features/Workflows/Workflows.tsx
+++ b/src/Features/Workflows/Workflows.tsx
@@ -253,7 +253,7 @@ const UserWorkflows: React.FC<UserWorkflowsProp> = ({ searchQuery, user, userWor
                     "Quotas are set by the administrator. If you have a concern about your allotted amounts, contact an admin.",
                 }}
                 modalTrigger={({ openModal }: ModalTriggerProps) => (
-                  <Button iconDescription="View quota details" kind="ghost" size="md" onClick={openModal}>
+                  <Button iconDescription="View quota details" kind="ghost" size="sm" onClick={openModal}>
                     View more quotas
                   </Button>
                 )}
@@ -340,7 +340,7 @@ const TeamWorkflows: React.FC<TeamWorkflowsProps> = ({ searchQuery, team, teams
                   "Quotas are set by the administrator. If you have a concern about your allotted amounts, contact an admin.",
               }}
               modalTrigger={({ openModal }: ModalTriggerProps) => (
-                <Button iconDescription="View quota details" kind="ghost" size="md" onClick={openModal}>
+                <Button iconDescription="View quota details" kind="ghost" size="sm" onClick={openModal}>
                   View more quotas
                 </Button>
               )}
diff --git a/src/Features/Workflows/__snapshots__/Workflows.spec.jsx.snap b/src/Features/Workflows/__snapshots__/Workflows.spec.jsx.snap
index 645ffcd3d..9589f0619 100644
--- a/src/Features/Workflows/__snapshots__/Workflows.spec.jsx.snap
+++ b/src/Features/Workflows/__snapshots__/Workflows.spec.jsx.snap
@@ -359,7 +359,7 @@ exports[`WorkflowsHome --- Snapshot > Capturing Snapshot of WorkflowsHome 1`] =
                 </p>
               </div>
               <button
-                class="cds--btn cds--btn--md cds--btn--ghost"
+                class="cds--btn cds--btn--sm cds--btn--ghost"
                 tabindex="0"
                 type="button"
               >
@@ -823,7 +823,7 @@ exports[`WorkflowsHome --- Snapshot > Capturing Snapshot of WorkflowsHome 1`] =
                 </p>
               </div>
               <button
-                class="cds--btn cds--btn--md cds--btn--ghost"
+                class="cds--btn cds--btn--sm cds--btn--ghost"
                 tabindex="0"
                 type="button"
               >
diff --git a/src/Types/index.tsx b/src/Types/index.tsx
index d8bdc4a52..410927126 100644
--- a/src/Types/index.tsx
+++ b/src/Types/index.tsx
@@ -1,3 +1,5 @@
+import { User } from "@boomerang-io/carbon-addons-boomerang-react";
+
 declare global {
   interface Window {
     _SERVER_DATA: {
@@ -82,7 +84,7 @@ export interface DataDrivenInput {
   required?: boolean;
   value: string;
   values?: [string] | [{ key: string; value: string }];
-  type?: string;
+  type: string;
   min?: number;
   max?: number;
 }
@@ -418,7 +420,7 @@ export interface PaginatedResponse<RecordType> {
   records: RecordType[];
 }
 
-export interface FlowUser {
+export interface FlowUser extends User {
   id: string;
   email: string;
   name: string;
@@ -575,8 +577,8 @@ export interface PlatformConfig {
   navigation: Array<{ name: string; url: string }>;
   platform: {
     appName?: string;
-    baseEnvUrl?: string;
-    baseServicesUrl?: string;
+    baseEnvUrl: string;
+    baseServicesUrl: string;
     communityUrl?: string;
     displayLogo: boolean;
     name: string;