diff --git a/x-pack/plugins/cases/public/components/custom_fields/index.test.tsx b/x-pack/plugins/cases/public/components/custom_fields/index.test.tsx
index 26ee9b8476da6..fc6c774c20b0c 100644
--- a/x-pack/plugins/cases/public/components/custom_fields/index.test.tsx
+++ b/x-pack/plugins/cases/public/components/custom_fields/index.test.tsx
@@ -97,13 +97,12 @@ describe('CustomFields', () => {
         required: false,
       });
     }
+
     const customFields = [...customFieldsConfigurationMock, ...generatedMockCustomFields];
 
     appMockRender.render(<CustomFields {...{ ...props, customFields }} />);
 
-    await userEvent.click(await screen.findByTestId('add-custom-field'));
-
     expect(await screen.findByText(i18n.MAX_CUSTOM_FIELD_LIMIT(MAX_CUSTOM_FIELDS_PER_CASE)));
-    expect(await screen.findByTestId('add-custom-field')).toHaveAttribute('disabled');
+    expect(screen.queryByTestId('add-custom-field')).not.toBeInTheDocument();
   });
 });
diff --git a/x-pack/plugins/cases/public/components/custom_fields/index.tsx b/x-pack/plugins/cases/public/components/custom_fields/index.tsx
index 3c754d39a63fb..d749a7aba9bea 100644
--- a/x-pack/plugins/cases/public/components/custom_fields/index.tsx
+++ b/x-pack/plugins/cases/public/components/custom_fields/index.tsx
@@ -80,18 +80,9 @@ const CustomFieldsComponent: React.FC<Props> = ({
               onDeleteCustomField={handleDeleteCustomField}
               onEditCustomField={onEditCustomField}
             />
-            {error ? (
-              <EuiFlexGroup justifyContent="center">
-                <EuiFlexItem grow={false}>
-                  <EuiText color="danger">
-                    {i18n.MAX_CUSTOM_FIELD_LIMIT(MAX_CUSTOM_FIELDS_PER_CASE)}
-                  </EuiText>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            ) : null}
           </>
         ) : null}
-        <EuiSpacer size="m" />
+        <EuiSpacer size="s" />
         {!customFields.length ? (
           <EuiFlexGroup justifyContent="center">
             <EuiFlexItem grow={false} data-test-subj="empty-custom-fields">
@@ -102,18 +93,27 @@ const CustomFieldsComponent: React.FC<Props> = ({
         ) : null}
         <EuiFlexGroup justifyContent="center">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              isLoading={isLoading}
-              isDisabled={disabled || error}
-              size="s"
-              onClick={onAddCustomField}
-              iconType="plusInCircle"
-              data-test-subj="add-custom-field"
-            >
-              {i18n.ADD_CUSTOM_FIELD}
-            </EuiButtonEmpty>
+            {customFields.length < MAX_CUSTOM_FIELDS_PER_CASE ? (
+              <EuiButtonEmpty
+                isLoading={isLoading}
+                isDisabled={disabled || error}
+                size="s"
+                onClick={onAddCustomField}
+                iconType="plusInCircle"
+                data-test-subj="add-custom-field"
+              >
+                {i18n.ADD_CUSTOM_FIELD}
+              </EuiButtonEmpty>
+            ) : (
+              <EuiFlexGroup justifyContent="center">
+                <EuiFlexItem grow={false}>
+                  <EuiText>{i18n.MAX_CUSTOM_FIELD_LIMIT(MAX_CUSTOM_FIELDS_PER_CASE)}</EuiText>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            )}
           </EuiFlexItem>
         </EuiFlexGroup>
+        <EuiSpacer size="s" />
       </EuiPanel>
     </EuiDescribedFormGroup>
   ) : null;
diff --git a/x-pack/plugins/cases/public/components/templates/index.test.tsx b/x-pack/plugins/cases/public/components/templates/index.test.tsx
index 1c7b6cc3ff0e6..7fcb563a54dde 100644
--- a/x-pack/plugins/cases/public/components/templates/index.test.tsx
+++ b/x-pack/plugins/cases/public/components/templates/index.test.tsx
@@ -130,9 +130,7 @@ describe('Templates', () => {
 
     appMockRender.render(<Templates {...{ ...props, templates: mockTemplates }} />);
 
-    await userEvent.click(await screen.findByTestId('add-template'));
-
     expect(await screen.findByText(i18n.MAX_TEMPLATE_LIMIT(MAX_TEMPLATES_LENGTH)));
-    expect(await screen.findByTestId('add-template')).toHaveAttribute('disabled');
+    expect(screen.queryByTestId('add-template')).not.toBeInTheDocument();
   });
 });
diff --git a/x-pack/plugins/cases/public/components/templates/index.tsx b/x-pack/plugins/cases/public/components/templates/index.tsx
index 3be2bf92411a9..479101d2889ad 100644
--- a/x-pack/plugins/cases/public/components/templates/index.tsx
+++ b/x-pack/plugins/cases/public/components/templates/index.tsx
@@ -92,16 +92,9 @@ const TemplatesComponent: React.FC<Props> = ({
               onEditTemplate={handleEditTemplate}
               onDeleteTemplate={handleDeleteTemplate}
             />
-            {error ? (
-              <EuiFlexGroup justifyContent="center">
-                <EuiFlexItem grow={false}>
-                  <EuiText color="danger">{i18n.MAX_TEMPLATE_LIMIT(MAX_TEMPLATES_LENGTH)}</EuiText>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            ) : null}
           </>
         ) : null}
-        <EuiSpacer size="m" />
+        <EuiSpacer size="s" />
         {!templates.length ? (
           <EuiFlexGroup justifyContent="center">
             <EuiFlexItem grow={false} data-test-subj="empty-templates">
@@ -113,16 +106,25 @@ const TemplatesComponent: React.FC<Props> = ({
         {canAddTemplates ? (
           <EuiFlexGroup justifyContent="center">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                isLoading={isLoading}
-                isDisabled={disabled || error}
-                size="s"
-                onClick={handleAddTemplate}
-                iconType="plusInCircle"
-                data-test-subj="add-template"
-              >
-                {i18n.ADD_TEMPLATE}
-              </EuiButtonEmpty>
+              {templates.length < MAX_TEMPLATES_LENGTH ? (
+                <EuiButtonEmpty
+                  isLoading={isLoading}
+                  isDisabled={disabled || error}
+                  size="s"
+                  onClick={handleAddTemplate}
+                  iconType="plusInCircle"
+                  data-test-subj="add-template"
+                >
+                  {i18n.ADD_TEMPLATE}
+                </EuiButtonEmpty>
+              ) : (
+                <EuiFlexGroup justifyContent="center">
+                  <EuiFlexItem grow={false}>
+                    <EuiText>{i18n.MAX_TEMPLATE_LIMIT(MAX_TEMPLATES_LENGTH)}</EuiText>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              )}
+              <EuiSpacer size="s" />
             </EuiFlexItem>
           </EuiFlexGroup>
         ) : null}