diff --git a/client/src/App.css b/client/src/App.css
index 837a7d95..b0939eb7 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -88,4 +88,23 @@
   justify-content: space-between;
   flex-wrap: wrap;
   margin: 0 -15px;
-}
\ No newline at end of file
+}
+
+.nav-link {
+  text-decoration: none;
+  color: inherit; /* Inherits the color from its parent */
+  /* Add any additional styling you want */
+}
+
+.hover-background {
+  color: inherit;
+  transition: background-color 0.3s ease;
+}
+
+.white-icon {
+  color: white;
+}
+
+.hover-background:hover {
+  background-color: inherit; /* Change to the desired background color on hover */
+}
diff --git a/client/src/components/builder/usabilityDomain.js b/client/src/components/builder/usabilityDomain.js
index bfe66d63..9974a136 100644
--- a/client/src/components/builder/usabilityDomain.js
+++ b/client/src/components/builder/usabilityDomain.js
@@ -65,7 +65,6 @@ export const  UsabilityDomain = ({onSave}) => {
                     </div>
                   )}
                 </FieldArray>
-                <div>
                   <Next />
               </Form>
             )
diff --git a/client/src/components/home/Documentation.js b/client/src/components/home/Documentation.js
index acdd1543..5af7ee4b 100644
--- a/client/src/components/home/Documentation.js
+++ b/client/src/components/home/Documentation.js
@@ -10,6 +10,7 @@ import {
 } from "@material-ui/core";
 
 import mediaWiki from "../../images/mediawikiwiki.svg";
+import api from "../../images/api.jpeg";
 
 const useStyles = makeStyles({
   bullet: {
@@ -54,12 +55,10 @@ export default function Documentation() {
       <CardActionArea onClick={() => global.window.open(docsLink)}>
         <CardContent>
           <Typography className={classes.subtitle}>
-            BCO Docs Site
+          <img src={api} height={25} alt="MediaWiki logo" />
+            API
             <br />
           </Typography>
-          <Typography className={classes.bullet}>
-            User Guide, Best Practices, tutorial
-          </Typography>
         </CardContent>
       </CardActionArea>
       <br />
diff --git a/client/src/images/api.jpeg b/client/src/images/api.jpeg
new file mode 100644
index 00000000..97ceab26
Binary files /dev/null and b/client/src/images/api.jpeg differ
diff --git a/client/src/layouts/MainLayout/AppDropDown.js b/client/src/layouts/MainLayout/AppDropDown.js
new file mode 100644
index 00000000..ba825e76
--- /dev/null
+++ b/client/src/layouts/MainLayout/AppDropDown.js
@@ -0,0 +1,66 @@
+import * as React from "react";
+import MenuButton from "@mui/joy/MenuButton";
+import Menu from "@mui/joy/Menu";
+import MenuItem from "@mui/joy/MenuItem";
+import Apps from "@mui/icons-material/Apps";
+import Dropdown from "@mui/joy/Dropdown";
+// import AppRegistrationOutlinedIcon from "@mui/icons-material/AppRegistrationOutlined";
+import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
+import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
+import { ListItemDecorator } from "@mui/joy";
+import GroupOutlinedIcon from '@mui/icons-material/GroupOutlined';
+import IconButton from "@mui/joy/IconButton";
+import { Tooltip } from "@material-ui/core";
+// import { Mode } from "@mui/icons-material";
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
+
+export default function APP() {
+  return (
+    <Dropdown>
+      <MenuButton
+        slots={{ root: IconButton }}
+        slotProps={{ root: { color: "secondary" } }}
+        title="Apps"
+        endDecorator={<ArrowDropDown className="white-icon"/>}>
+        <Tooltip title="App">
+        <Apps className="hover-background white-icon" title="App" fontSize="18px"/>
+        </Tooltip>
+      </MenuButton>
+      <Menu>
+        <MenuItem
+          component="a"
+          href="/builder"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <ListItemDecorator>
+            <ModeEditOutlineOutlinedIcon />
+          </ListItemDecorator>
+          Builder
+        </MenuItem>
+        <MenuItem
+          component="a"
+          href="/prefix"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <ListItemDecorator>
+            <GroupOutlinedIcon />
+          </ListItemDecorator>
+          Prefix Registry
+        </MenuItem>
+        <MenuItem
+          component="a"
+          href="/bcodbs"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <ListItemDecorator>
+            <SearchOutlinedIcon />
+          </ListItemDecorator>
+          BCODB
+        </MenuItem>
+      </Menu>
+    </Dropdown>
+  );
+}
diff --git a/client/src/layouts/MainLayout/DocDropDown.js b/client/src/layouts/MainLayout/DocDropDown.js
new file mode 100644
index 00000000..e292e38e
--- /dev/null
+++ b/client/src/layouts/MainLayout/DocDropDown.js
@@ -0,0 +1,77 @@
+import * as React from "react";
+import IconButton from "@mui/joy/IconButton";
+import Menu from "@mui/joy/Menu";
+import MenuItem from "@mui/joy/MenuItem";
+import MenuButton from "@mui/joy/MenuButton";
+import Dropdown from "@mui/joy/Dropdown";
+import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
+import { Tooltip } from "@material-ui/core";
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
+import ApiOutlinedIcon from '@mui/icons-material/ApiOutlined';
+import WebhookOutlinedIcon from '@mui/icons-material/WebhookOutlined';
+import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
+import { ListItemDecorator } from "@mui/joy";
+import AutoStoriesOutlinedIcon from '@mui/icons-material/AutoStoriesOutlined';
+
+export default function DocDropDown() {
+  return (
+    <Dropdown>
+      <MenuButton
+        slots={{ root: IconButton }}
+        slotProps={{ root: { color: "secondary" } }}
+        title="Documentation"
+        endDecorator={<ArrowDropDown className="white-icon"/>}
+      >
+        <Tooltip title="Documentation">
+        <DescriptionOutlinedIcon className="hover-background white-icon" title="Documentation" />
+        </Tooltip>
+      </MenuButton>
+      <Menu placement="bottom-end">
+      <MenuItem
+          component="a"
+          href="https://wiki.biocomputeobject.org/index.php?title=Quick_Start_Guide"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <ListItemDecorator>
+            <AutoStoriesOutlinedIcon />
+          </ListItemDecorator>
+          Quick Start Guide
+        </MenuItem>
+        <MenuItem
+          component="a"
+          href="https://biocomputeobject.org/api/docs/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <ListItemDecorator>
+            <ApiOutlinedIcon />
+          </ListItemDecorator>
+          BioCompute API
+        </MenuItem>
+        <MenuItem
+          component="a"
+          href="https://wiki.biocomputeobject.org/index.php?title=Main_Page"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <ListItemDecorator>
+            <WebhookOutlinedIcon />
+          </ListItemDecorator>
+          Wiki
+        </MenuItem>
+        <MenuItem
+          component="a"
+          href="/resources"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <ListItemDecorator>
+            <SettingsInputAntennaIcon />
+          </ListItemDecorator>
+          BCO Resources
+        </MenuItem>
+      </Menu>
+    </Dropdown>
+  );
+}
diff --git a/client/src/layouts/MainLayout/HelpDropDown.js b/client/src/layouts/MainLayout/HelpDropDown.js
new file mode 100644
index 00000000..8bf8b12f
--- /dev/null
+++ b/client/src/layouts/MainLayout/HelpDropDown.js
@@ -0,0 +1,58 @@
+import * as React from "react";
+import MenuButton from "@mui/joy/MenuButton";
+import Menu from "@mui/joy/Menu";
+import MenuItem from "@mui/joy/MenuItem";
+import Apps from "@mui/icons-material/Apps";
+import Dropdown from "@mui/joy/Dropdown";
+// import AppRegistrationOutlinedIcon from "@mui/icons-material/AppRegistrationOutlined";
+import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined';
+import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
+import { ListItemDecorator } from "@mui/joy";
+import GroupOutlinedIcon from '@mui/icons-material/GroupOutlined';
+import IconButton from "@mui/joy/IconButton";
+import { Tooltip } from "@material-ui/core";
+// import { Mode } from "@mui/icons-material";
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
+import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';
+import BugReportOutlinedIcon from '@mui/icons-material/BugReportOutlined';
+import ContactPageOutlinedIcon from '@mui/icons-material/ContactPageOutlined';
+
+export default function APP() {
+  return (
+    <Dropdown>
+      <MenuButton
+        slots={{ root: IconButton }}
+        slotProps={{ root: { color: "secondary" } }}
+        title="Apps"
+        endDecorator={<ArrowDropDown className="white-icon"/>}>
+        <Tooltip title="Help">
+        <HelpOutlineOutlinedIcon className="hover-background white-icon" title="Help" fontSize="18px"/>
+        </Tooltip>
+      </MenuButton>
+      <Menu>
+        <MenuItem
+          component="a"
+          href="https://github.com/biocompute-objects/portal_userdb/issues/new/choose"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <ListItemDecorator>
+            <BugReportOutlinedIcon />
+          </ListItemDecorator>
+          Report an issue
+        </MenuItem>
+        <MenuItem
+          component="a"
+          href="https://docs.biocomputeobject.org/contact"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <ListItemDecorator>
+            <ContactPageOutlinedIcon />
+          </ListItemDecorator>
+          Contact Us
+        </MenuItem>
+      </Menu>
+    </Dropdown>
+  );
+}
diff --git a/client/src/layouts/MainLayout/NavBar.js b/client/src/layouts/MainLayout/NavBar.js
index 7169b3b3..15ca324d 100644
--- a/client/src/layouts/MainLayout/NavBar.js
+++ b/client/src/layouts/MainLayout/NavBar.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React , {useState} from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import { Button } from "@material-ui/core";
 import AppBar from "@material-ui/core/AppBar";
@@ -12,22 +12,22 @@ import Menu from "@material-ui/core/Menu";
 import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
 import LoginIcon from '@mui/icons-material/Login';
 import AccountCircle from "@material-ui/icons/AccountCircle";
-// import EditOutlinedIcon from "@mui/icons-material/Construction";
-// import SearchIcon from "@mui/icons-material/DataObject";
-import BugReportIcon from "@mui/icons-material/BugReport";
-// import GroupIcon from "@mui/icons-material/AppRegistration";
+import ConstructionIcon from "@mui/icons-material/Construction";
+import DataObjectIcon from "@mui/icons-material/DataObject";
+import AppRegistrationIcon from "@mui/icons-material/AppRegistration";
 import { useSelector } from "react-redux";
 import MoreIcon from "@material-ui/icons/MoreVert";
 import { Link } from "react-router-dom";
-// import SettingsInputAntennaIcon from "@mui/icons-material/MiscellaneousServices";
+import MiscellaneousServicesIcon from "@mui/icons-material/MiscellaneousServices";
 import ContactPageIcon from "@mui/icons-material/ContactPage";
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import { Info } from "@mui/icons-material";
-import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
-// import SearchIcon from '@mui/icons-material/Storage';
-import SearchIcon from '@mui/icons-material/Search';
-import GroupIcon from '@mui/icons-material/Group';
-import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
+import DocDropDown from "./DocDropDown";
+import AppDropDown from "./AppDropDown";
+import BugReportOutlinedIcon from '@mui/icons-material/BugReportOutlined';
+import SearchIcon from "@mui/icons-material/Search"; // Import the search icon
+import InputBase from "@mui/material/InputBase";
+import HelpDropDown from "./HelpDropDown";
 
 const useStyles = makeStyles((theme) => ({
   grow: {
@@ -66,7 +66,38 @@ const useStyles = makeStyles((theme) => ({
     [theme.breakpoints.up("sm")]: {
       display: "none"
     }
-  }
+  },
+  search: {
+    position: "relative",
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: "#ffffff", // White background color
+    marginRight: theme.spacing(2),
+    marginLeft: 0,
+    width: "150px",
+    [theme.breakpoints.up("sm")]: {
+      marginLeft: theme.spacing(3),
+      width: "auto",
+    },
+  },
+  searchIcon: {
+    padding: theme.spacing(0, 2),
+    height: "80%",
+    position: "absolute",
+    pointerEvents: "none",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  inputRoot: {
+    color: "inherit",
+  },
+  inputInput: {
+    padding: theme.spacing(1),
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create("width"),
+    width: "100%",
+    textAlign:"center"
+  },
 }));
 
 const NavBar = () => {
@@ -84,7 +115,39 @@ const NavBar = () => {
   const handleMobileMenuClose = () => {
     setMobileMoreAnchorEl(null);
   };
+  const [documentationAnchorEL, setDocumentationAnchorEL] = React.useState(null);
+
+  const handleDocumentationOpen = (event) => {
+    setDocumentationAnchorEL(event.currentTraget);
+  };
+
+  const handleDocumentationClose = () => {
+    setDocumentationAnchorEL(null);
+  };
+
+  const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef(null);
+  const [selectedIndex, setSelectedIndex] = React.useState(1);
+  const handleClick = () => {
+    console.info(`You clicked ${options[selectedIndex]}`);
+  };
+
+  const handleMenuItemClick = (event, index) => {
+    setSelectedIndex(index);
+    setOpen(false);
+  };
+
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
 
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
   const mobileMenuId = "menu-mobile";
   /*Need to add switch in here */
   const renderMobileMenu = (
@@ -105,18 +168,10 @@ const NavBar = () => {
         </IconButton>
         <p>Home</p>
       </MenuItem>
-      <MenuItem component={Link} to='/resources'>
-        <IconButton aria-label='BioCompute Object builder' color='inherit'>
-          <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-            <SettingsInputAntennaIcon />
-          </Badge>
-        </IconButton>
-        <p>BCO Resources</p>
-      </MenuItem>
       <MenuItem component={Link} to='/builder'>
         <IconButton aria-label='BioCompute Object builder' color='inherit'>
           <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-            <EditOutlinedIcon />
+            <ConstructionIcon />
           </Badge>
         </IconButton>
         <p>BCO Builder</p>
@@ -124,7 +179,7 @@ const NavBar = () => {
       <MenuItem component={Link} to="/prefix">
         <IconButton aria-label='prefix registry' color='inherit'>
           <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-            <GroupIcon />
+            <AppRegistrationIcon />
           </Badge>
         </IconButton>
         <p>Prefix Registry</p>
@@ -132,7 +187,7 @@ const NavBar = () => {
       <MenuItem component={Link} to='/bcodbs'>
         <IconButton aria-label='BCO DB' color='inherit'>
           <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-            <SearchIcon />
+            <DataObjectIcon />
           </Badge>
         </IconButton>
         <p>BCO DB</p>
@@ -149,7 +204,7 @@ const NavBar = () => {
         <MenuItem>
           <IconButton aria-label='BioCompute Object builder' color='inherit'>
             <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-              <BugReportIcon />
+              <BugReportOutlinedIcon />
             </Badge>
           </IconButton>
           <p>Bug Report</p>
@@ -198,18 +253,10 @@ const NavBar = () => {
         </IconButton>
         <p>Home</p>
       </MenuItem>
-      <MenuItem component={Link} to='/resources'>
-        <IconButton aria-label='BioCompute Object builder' color='inherit'>
-          <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-            <SettingsInputAntennaIcon />
-          </Badge>
-        </IconButton>
-        <p>BCO Resources</p>
-      </MenuItem>
       <MenuItem component={Link} to='/builder'>
         <IconButton aria-label='BioCompute Object builder' color='inherit'>
           <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-            <EditOutlinedIcon />
+            <ConstructionIcon />
           </Badge>
         </IconButton>
         <p>BCO Builder</p>
@@ -217,7 +264,7 @@ const NavBar = () => {
       <MenuItem component={Link} to="/prefix">
         <IconButton aria-label='prefix registry' color='inherit'>
           <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-            <GroupIcon />
+            <AppRegistrationIcon />
           </Badge>
         </IconButton>
         <p>Prefix Registry</p>
@@ -225,7 +272,7 @@ const NavBar = () => {
       <MenuItem component={Link} to='/bcodbs'>
         <IconButton aria-label='BCO DB' color='inherit'>
           <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-            <SearchIcon />
+            <DataObjectIcon />
           </Badge>
         </IconButton>
         <p>BCO DB</p>
@@ -242,7 +289,7 @@ const NavBar = () => {
         <MenuItem>
           <IconButton aria-label='BioCompute Object builder' color='inherit'>
             <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-              <BugReportIcon />
+              <BugReportOutlinedIcon />
             </Badge>
           </IconButton>
           <p>Bug Report</p>
@@ -276,44 +323,20 @@ const NavBar = () => {
       <AppBar position='static' component='div'>
         <Toolbar component='nav' className={classes.nav}>
           <Typography className={classes.title} variant='h6' noWrap>
-            BioCompute Object Portal
+            <a href="/" class="nav-link">BioCompute Object Portal </a>
           </Typography>
           <div className={classes.grow} />
           <div className={classes.sectionDesktop}>
             {auth.user ? (
               <>
-                <Tooltip title="Home">
-                  <IconButton component={Link} to='/' aria-label='go home' color='inherit'>
-                    <HomeIcon />
-                  </IconButton>
-                </Tooltip>
-                <Tooltip title="BCO Resources">
-                  <IconButton component={Link} to='/resources' aria-label='BCO builder' color='inherit'>
-                    <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-                      <SettingsInputAntennaIcon />
-                    </Badge>
-                  </IconButton>
+                <Tooltip title="Apps">
+                  <AppDropDown />
                 </Tooltip>
-                <Tooltip title="BCO Builder">
-                  <IconButton component={Link} to='/builder' aria-label='BCO builder' color='inherit'>
-                    <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-                      <EditOutlinedIcon />
-                    </Badge>
-                  </IconButton>
+                <Tooltip title="Documentation">
+                  <DocDropDown />
                 </Tooltip>
-                <Tooltip title="Prefix registry">
-                  <IconButton component={Link} to="/prefix" aria-label='prefix registry' color='inherit'>
-                    <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-                      <GroupIcon />
-                    </Badge>
-                  </IconButton>
-                </Tooltip>
-                <Tooltip title="BioCompute Object DB">
-                  <IconButton component={Link} to='/bcodbs' aria-label='show 0 new notifications' color='inherit'>
-                    <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-                      <SearchIcon />
-                    </Badge>
-                  </IconButton>
+                <Tooltip title="Help">
+                  <HelpDropDown />
                 </Tooltip>
                 <Tooltip title="About Us">
                   <IconButton component={Link} to='/about' aria-label='show 0 new notifications' color='inherit'>
@@ -321,12 +344,12 @@ const NavBar = () => {
                       <InfoOutlinedIcon />
                     </Badge>
                   </IconButton>
-                </Tooltip>
-                <Tooltip title="Bug Report">
+                </Tooltip> 
+                {/* <Tooltip title="Bug Report">
                   <a href='https://github.com/biocompute-objects/portal_userdb/issues/new/choose' target='_blank' rel="noreferrer" >
                     <IconButton aria-label='BCO builder' color='inherit'>
                       <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-                        <BugReportIcon />
+                        <BugReportOutlinedIcon className="hover-background white-icon"/>
                       </Badge>
                     </IconButton>
                   </a>
@@ -335,11 +358,25 @@ const NavBar = () => {
                   <a href='https://docs.biocomputeobject.org/contact' target='_blank' rel="noreferrer">
                     <IconButton aria-label='BCO builder' color='inherit'>
                       <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-                        <ContactPageIcon />
+                        <ContactPageIcon className="hover-background white-icon"/>
                       </Badge>
                     </IconButton>
                   </a>
-                </Tooltip>
+                </Tooltip> */}
+                {/* <div className={classes.search}>
+                  <div className={classes.searchIcon}>
+                    <SearchIcon />
+                  </div>
+                  <InputBase
+                    placeholder="Search…"
+                    classes={{
+                      root: classes.inputRoot,
+                      input: classes.inputInput,
+                    }}
+                    inputProps={{ "aria-label": "search" }}
+                  />
+                </div> */}
+
                 <Tooltip title="Profile Page">
                   <IconButton
                     component={Link} to='/profile'
@@ -360,51 +397,28 @@ const NavBar = () => {
               </>
             ) : (
               <>
-                <Tooltip title="Home">
-                  <IconButton component={Link} to='/' aria-label='go home' color='inherit'>
-                    <HomeIcon />
-                  </IconButton>
-                </Tooltip>
-                <Tooltip title="BCO Resources">
-                  <IconButton component={Link} to='/resources' aria-label='BCO builder' color='inherit'>
-                    <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-                      <SettingsInputAntennaIcon />
-                    </Badge>
-                  </IconButton>
+                <Tooltip title="Apps">
+                  <AppDropDown />
                 </Tooltip>
-                <Tooltip title="BCO Builder">
-                  <IconButton component={Link} to='/builder' aria-label='BCO builder' color='inherit'>
-                    <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-                      <EditOutlinedIcon />
-                    </Badge>
-                  </IconButton>
+                <Tooltip title="Documentation">
+                  <DocDropDown />
                 </Tooltip>
-                <Tooltip title="Prefix registry">
-                  <IconButton component={Link} to="/prefix" aria-label='prefix registry' color='inherit'>
-                    <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-                      <GroupIcon />
-                    </Badge>
-                  </IconButton>
-                </Tooltip>
-                <Tooltip title="BioCompute Object DB">
-                  <IconButton component={Link} to='/bcodbs' aria-label='show 0 new notifications' color='inherit'>
-                    <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-                      <SearchIcon />
-                    </Badge>
-                  </IconButton>
+                <Tooltip title="Help">
+                  <HelpDropDown />
                 </Tooltip>
                 <Tooltip title="About Us">
                   <IconButton component={Link} to='/about' aria-label='show 0 new notifications' color='inherit'>
                     <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-                      <InfoOutlinedIcon />
+                      <InfoOutlinedIcon className="hover-background white-icon" />
                     </Badge>
                   </IconButton>
-                </Tooltip>
-                <Tooltip title="Bug Report">
+                </Tooltip> 
+
+                {/* <Tooltip title="Bug Report">
                   <a href='https://github.com/biocompute-objects/portal_userdb/issues/new/choose' target='_blank' rel="noreferrer">
                     <IconButton aria-label='BCO builder' color='inherit'>
                       <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-                        <BugReportIcon />
+                        <BugReportOutlinedIcon className="hover-background white-icon"/>
                       </Badge>
                     </IconButton>
                   </a>
@@ -413,11 +427,24 @@ const NavBar = () => {
                   <a href='https://docs.biocomputeobject.org/contact' target='_blank' rel="noreferrer">
                     <IconButton aria-label='BCO builder' color='inherit'>
                       <Badge overlap="rectangular" badgeContent={0} color='secondary'>
-                        <ContactPageIcon />
+                        <ContactPageIcon className="hover-background white-icon"/>
                       </Badge>
                     </IconButton>
                   </a>
-                </Tooltip>
+                </Tooltip> */}
+                {/* <div className={classes.search}>
+                  <div className={classes.searchIcon}>
+                    <SearchIcon />
+                  </div>
+                  <InputBase
+                    placeholder="Search…"
+                    classes={{
+                      root: classes.inputRoot,
+                      input: classes.inputInput,
+                    }}
+                    inputProps={{ "aria-label": "search" }}
+                  />
+                </div> */}
                 <IconButton component={Link} to='/login' aria-label='log in' color='inherit'>
                   <Typography variant='h6' component='h6'>
                     Log in
@@ -426,6 +453,7 @@ const NavBar = () => {
               </>
             )}
           </div>
+
           <div className={classes.sectionMobile}>
             {auth.user ? (
               <>