diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.test.tsx
index f1382bb5972b21..a43f170e5822f8 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.test.tsx
@@ -11,7 +11,7 @@ import { shallow } from 'enzyme';
 
 import { EuiEmptyPrompt, EuiButton } from '@elastic/eui';
 
-import { EmptyState } from './';
+import { EmptyState, SynonymModal } from './';
 
 describe('EmptyState', () => {
   it('renders', () => {
@@ -24,4 +24,10 @@ describe('EmptyState', () => {
       expect.stringContaining('/synonyms-guide.html')
     );
   });
+
+  it('renders the add synonym modal', () => {
+    const wrapper = shallow(<EmptyState />);
+
+    expect(wrapper.find(SynonymModal)).toHaveLength(1);
+  });
 });
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.tsx
index 2eb6643bda5032..f856a5c035f811 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/empty_state.tsx
@@ -7,16 +7,16 @@
 
 import React from 'react';
 
-import { EuiPanel, EuiEmptyPrompt, EuiButton } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiButton } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 import { DOCS_PREFIX } from '../../../routes';
 
-import { SynonymIcon } from './';
+import { SynonymModal, SynonymIcon } from './';
 
 export const EmptyState: React.FC = () => {
   return (
-    <EuiPanel color="subdued">
+    <>
       <EuiEmptyPrompt
         iconType={SynonymIcon}
         title={
@@ -47,6 +47,7 @@ export const EmptyState: React.FC = () => {
           </EuiButton>
         }
       />
-    </EuiPanel>
+      <SynonymModal />
+    </>
   );
 };