diff --git a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
index e12c04cc5..493000f4c 100644
--- a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
+++ b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap
@@ -5,10 +5,10 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
 <span>
   <div class=\\"modal-header py-2\\">
     <nav class=\\"nav nav-pills nav-justified w-100\\">
-      <span class=\\"nav-item nav-link cursor-pointer mx-1 active\\">
+      <span class=\\"nav-item nav-link cursor-pointer mx-1 px-2 active\\">
         Configuration
       </span>
-      <span class=\\"nav-item nav-link cursor-pointer mx-1 components-tab-inactive\\">
+      <span class=\\"nav-item nav-link cursor-pointer mx-1 px-2 components-tab-inactive\\">
         Help
       </span>
       <button type=\\"button\\"
diff --git a/ui/src/Components/Modal/Tab.js b/ui/src/Components/Modal/Tab.js
index 4c196b44a..7fda5afeb 100644
--- a/ui/src/Components/Modal/Tab.js
+++ b/ui/src/Components/Modal/Tab.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 const Tab = ({ title, active, onClick }) => (
   <span
-    className={`nav-item nav-link cursor-pointer mx-1 ${
+    className={`nav-item nav-link cursor-pointer mx-1 px-2 ${
       active ? "active" : "components-tab-inactive"
     }`}
     onClick={onClick}