diff --git a/src/__tests__/page-header/ButtonToolBar.test.tsx b/src/__tests__/page-header/ButtonToolBar.test.tsx
index 5c79e2f337..ff369b086d 100644
--- a/src/__tests__/page-header/ButtonToolBar.test.tsx
+++ b/src/__tests__/page-header/ButtonToolBar.test.tsx
@@ -19,9 +19,18 @@ describe('Button Tool Bar', () => {
     jest.spyOn(ButtonBarProvider, 'useButtons')
     mocked(ButtonBarProvider).useButtons.mockReturnValue(buttons)
 
-    const wrapper = mount(<ButtonToolBar />)
+    const wrapper = mount(<ButtonToolBar />).find('.button-toolbar')
 
     expect(wrapper.childAt(0).getElement()).toEqual(buttons[0])
     expect(wrapper.childAt(1).getElement()).toEqual(buttons[1])
   })
+
+  it('should return null when there is no button in the provider', () => {
+    jest.spyOn(ButtonBarProvider, 'useButtons')
+    mocked(ButtonBarProvider).useButtons.mockReturnValue([])
+
+    const wrapper = mount(<ButtonToolBar />)
+
+    expect(wrapper.html()).toBeNull()
+  })
 })
diff --git a/src/index.css b/src/index.css
index 417dbe2316..0c52028d7a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -93,3 +93,7 @@ code {
   padding: 0;
   background-color: white;
 }
+
+.button-toolbar > button {
+	margin-left: .5rem;
+}
\ No newline at end of file
diff --git a/src/page-header/ButtonToolBar.tsx b/src/page-header/ButtonToolBar.tsx
index 05d8be02f0..72eec7b627 100644
--- a/src/page-header/ButtonToolBar.tsx
+++ b/src/page-header/ButtonToolBar.tsx
@@ -3,7 +3,12 @@ import { useButtons } from './ButtonBarProvider'
 
 const ButtonToolBar = () => {
   const buttons = useButtons()
-  return <>{buttons.map((button) => button)}</>
+
+  if (buttons.length === 0) {
+    return null
+  }
+
+  return <div className="button-toolbar">{buttons.map((button) => button)}</div>
 }
 
 export default ButtonToolBar