diff --git a/src/components/presentational/Menubar.jsx b/src/components/presentational/Menubar.jsx
index c81fd8d5c0823ce0b5aa98076475877b376a5a08..b53eacc2455f3c5bbdfd2809c88a789726cdd0ee 100644
--- a/src/components/presentational/Menubar.jsx
+++ b/src/components/presentational/Menubar.jsx
@@ -4,6 +4,7 @@ import OpenInFullIcon from "@mui/icons-material/OpenInFull";
 import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import GeoStacWhiteIcon from "../../images/logos/geostac-logo-white.svg";
+import HelpBox from "./HelpBox.jsx";
 
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
@@ -11,7 +12,7 @@ import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
-
+ 
 export default function Menubar(props) {
   const [showAbout, setShowAbout] = React.useState(false);
 
@@ -23,6 +24,16 @@ export default function Menubar(props) {
     setShowAbout(false);
   };
 
+   const handleOpenHelpBox = () => {
+    setShowHelpBox(true);
+  };
+
+  const handleCloseHelpBox = () => {
+    setShowHelpBox(false);
+  }
+
+  const [showHelpBox, setShowHelpBox] = React.useState(false);
+
   return (
     <div id="menu-bar">
       <div className="menu-item" onClick={handleOpenAbout}>
@@ -47,6 +58,13 @@ export default function Menubar(props) {
           <span className="menu-item-text">Help</span>
         </div>
       </a>
+
+      <div className="menu-item"onClick={handleOpenHelpBox}>
+        <span className="menu-item-text">Interactions</span>
+        </div>
+        
+      <HelpBox isOpen={showHelpBox} onClose={handleCloseHelpBox} />
+
       <div className="menu-item" onClick={props.handleOpenCloseHeader}>
         {props.showHeaderFooter ? (
           <>
diff --git a/src/components/presentational/SearchAndFilterInput.jsx b/src/components/presentational/SearchAndFilterInput.jsx
index 40d6f13ce12a7b05a2a201343837f264afe7dba5..1152cc7fbbaf2a24952b6ffc2c0e5f51487ff26a 100644
--- a/src/components/presentational/SearchAndFilterInput.jsx
+++ b/src/components/presentational/SearchAndFilterInput.jsx
@@ -19,8 +19,6 @@ import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 
 import { Collapse, Divider } from "@mui/material";
 import ListItemText from "@mui/material/ListItemText";
- //help box
-import HelpBox from "./HelpBox.jsx";
 
 /**
  * Controls css styling for this component using js to css
@@ -87,9 +85,6 @@ export default function SearchAndFilterInput(props) {
   const [dateFromVal, setDateFromVal] = React.useState(null);     // From Date
   const [dateToVal, setDateToVal] = React.useState(null);         // To Date
 
-  // help box
-  const [showHelpBox, setShowHelpBox] = React.useState(false);
-
   //const for callback
   const {UpdateQueryableTitles} = props;
   const handleExpandFilterClick = () => {
@@ -304,15 +299,6 @@ export default function SearchAndFilterInput(props) {
 
   }, [props.targetName]);
 
-  //help box
-  const handleOpenHelpBox = () => {
-    setShowHelpBox(true);
-  };
-
-  const handleCloseHelpBox = () => {
-    setShowHelpBox(false);
-  }
-
   /* Control IDs for reference:
   sortBySelect
   sortAscCheckBox
@@ -455,8 +441,6 @@ export default function SearchAndFilterInput(props) {
           </Collapse>
         </div>
       </Collapse>
-      <button onClick={handleOpenHelpBox} style={{marginTop: "20px"}}>Help</button>
-      <HelpBox isOpen={showHelpBox} onClose={handleCloseHelpBox} />
     </div>
   );
 }
diff --git a/src/styles.css b/src/styles.css
index 776d8554c698bd9aa069245e1aa4b7a8a2f98244..b20c70193e578daf519d32df2f0d3635873f443f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -508,6 +508,7 @@ Help Box Inside Search and Filter
 }
 
 .helpBoxContent, .subPopup {
+  color: #000;
   width: 300px;
   padding: 20px;
   background-color: #fff;