diff --git a/src/Components/ControlsGroup.jsx b/src/Components/ControlsGroup.jsx
index 632ff03c4..5da7e5c65 100644
--- a/src/Components/ControlsGroup.jsx
+++ b/src/Components/ControlsGroup.jsx
@@ -3,10 +3,9 @@ import ButtonGroup from '@mui/material/ButtonGroup'
 import OpenModelControl from './OpenModelControl'
 import useStore from '../store/useStore'
 import {TooltipIconButton} from './Buttons'
-import HistoryIcon from '@mui/icons-material/History'
+// import HistoryIcon from '@mui/icons-material/History'
 import SearchIcon from '@mui/icons-material/Search'
 import TreeIcon from '../assets/icons/Tree.svg'
-import useTheme from '@mui/styles/useTheme'
 
 
 /**
@@ -18,19 +17,22 @@ import useTheme from '@mui/styles/useTheme'
  */
 export default function OperationsGroup({fileOpen}) {
   const toggleIsNavigationVisible = useStore((state) => state.toggleIsNavigationVisible)
-  // const isNavigationVisible = useStore((state) => state.isNavigationVisible)
+  const isNavigationVisible = useStore((state) => state.isNavigationVisible)
   const toggleIsSearchVisible = useStore((state) => state.toggleIsSearchVisible)
-  // const isSearchVisible = useStore((state) => state.isSearchVisible)
-  const theme = useTheme()
+  const isSearchVisible = useStore((state) => state.isSearchVisible)
 
   return (
-    <ButtonGroup orientation='horizontal' sx={{border: `1px solid ${theme.palette.primary.background}`}} >
+    <ButtonGroup
+      orientation='horizontal'
+      variant='contained'
+    >
       <OpenModelControl fileOpen={fileOpen}/>
       <TooltipIconButton
         title='Search'
         icon={<SearchIcon className='icon-share' color='secondary'/>}
         placement='bottom'
-        selected={true}
+        aboutInfo={false}
+        selected={isSearchVisible}
         onClick={toggleIsSearchVisible}
       />
       <TooltipIconButton
@@ -38,16 +40,16 @@ export default function OperationsGroup({fileOpen}) {
         icon={<TreeIcon className='icon-share' color='secondary' style={{width: '17px', height: '17px'}}/>}
         placement='bottom'
         aboutInfo={false}
-        selected={true}
+        selected={isNavigationVisible}
         onClick={toggleIsNavigationVisible}
       />
-      <TooltipIconButton
+      {/* <TooltipIconButton
         title='Project History'
         icon={<HistoryIcon className='icon-share' color='secondary'/>}
         placement='bottom'
-        selected={true}
+        selected={false}
         onClick={toggleIsNavigationVisible}
-      />
+      /> */}
     </ButtonGroup>
   )
 }
diff --git a/src/Components/NavPanel.jsx b/src/Components/NavPanel.jsx
index ac0eba3b0..2a6b7494b 100644
--- a/src/Components/NavPanel.jsx
+++ b/src/Components/NavPanel.jsx
@@ -5,6 +5,7 @@ import Paper from '@mui/material/Paper'
 import ToggleButton from '@mui/material/ToggleButton'
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
 import Tooltip from '@mui/material/Tooltip'
+import Typography from '@mui/material/Typography'
 import TreeView from '@mui/lab/TreeView'
 import {styled} from '@mui/material/styles'
 import NavTree from './NavTree'
@@ -80,7 +81,7 @@ export default function NavPanel({
     }}
     >
       <Paper
-        elevation={0}
+        elevation={1}
         aria-label='Navigation Panel'
         variant='control'
         sx={{
@@ -91,12 +92,12 @@ export default function NavPanel({
           'justifyContent': 'space-around',
           'alignItems': 'center',
           'maxHeight': '400px',
-          '&:hover #togglegrp': {
-            visibility: 'visible !important',
-          },
-          '&:hover svg': {
-            visibility: 'visible !important',
-          },
+          // '&:hover #togglegrp': {
+          //   visibility: 'visible !important',
+          // },
+          // '&:hover svg': {
+          //   visibility: 'visible !important',
+          // },
           '@media (max-width: 900px)': {
             maxHeight: '292px',
             top: '86px',
@@ -146,6 +147,7 @@ export default function NavPanel({
               </Tooltip>
             </ToggleButton>
           </StyledToggleButtonGroup>}
+          <Typography variant='overline' sx={{marginLeft: '1em'}}>Spatial Navigation</Typography>
           <TreeView
             aria-label={isNavTree ? 'IFC Navigator' : 'IFC Types Navigator'}
             defaultCollapseIcon={<NodeOpenIcon className='icon-share icon-nav-caret'/>}
@@ -162,7 +164,7 @@ export default function NavPanel({
             }}
             key='tree'
             sx={{
-              'padding': existNavTypesInFeature ? '7px 0 14px 0' : '14px 0',
+              'padding': existNavTypesInFeature ? '7px 0 14px 0' : '4px 0px 10px 0px',
               'maxWidth': '400px',
               'overflowY': 'auto',
               'overflowX': 'hidden',
diff --git a/src/Components/OpenModelControl.jsx b/src/Components/OpenModelControl.jsx
index e237d9bf9..530c6e4ee 100644
--- a/src/Components/OpenModelControl.jsx
+++ b/src/Components/OpenModelControl.jsx
@@ -17,6 +17,7 @@ import {getOrganizations, getRepositories, getFiles, getUserRepositories} from '
 import {RectangularButton} from '../Components/Buttons'
 import UploadIcon from '../assets/icons/Upload.svg'
 import CreateNewFolderIcon from '@mui/icons-material/CreateNewFolder'
+import CreateNewFolderOutlinedIcon from '@mui/icons-material/CreateNewFolderOutlined'
 
 
 /**
@@ -54,9 +55,9 @@ export default function OpenModelControl({fileOpen}) {
       <TooltipIconButton
         title={'Open IFC'}
         onClick={() => setIsDialogDisplayed(true)}
-        icon={<CreateNewFolderIcon className='icon-share' color='secondary'/>}
+        icon={<CreateNewFolderOutlinedIcon className='icon-share' color='secondary'/>}
         placement={'bottom'}
-        selected={true}
+        selected={isDialogDisplayed}
         dataTestId='open-ifc'
       />
       {isDialogDisplayed &&
diff --git a/src/Components/OperationsGroup.jsx b/src/Components/OperationsGroup.jsx
index dc06648af..752a772f3 100644
--- a/src/Components/OperationsGroup.jsx
+++ b/src/Components/OperationsGroup.jsx
@@ -3,8 +3,6 @@ import Box from '@mui/material/Box'
 import ButtonGroup from '@mui/material/ButtonGroup'
 import useTheme from '@mui/styles/useTheme'
 import useStore from '../store/useStore'
-import {assertDefined} from '../utils/assert'
-import {hexToRgba} from '../utils/color'
 import {useIsMobile} from './Hooks'
 import AboutControl from './About/AboutControl'
 import CameraControl from './CameraControl'
@@ -73,95 +71,77 @@ export default function OperationsGroup({deselectItems}) {
   }
 
   const theme = useTheme()
-  // When the model has dark/black colors, then the icons (also dark)
-  // disappear. This keeps them visible.
-  const bgOpacity = 0.2
-  const bgColor = hexToRgba(assertDefined(theme.palette.scene.background), bgOpacity)
   return (
-    <Box
-      sx={{
-        'display': 'flex',
-        'flexDirection': 'column',
-        'backgroundColor': `${bgColor}`,
-        'padding': '1em',
-        '@media (max-width: 900px)': {
-          padding: '1em 0.5em',
-        },
-      }}
-    >
+    <ButtonGroup orientation='vertical' variant='contained' sx={{margin: '1em'}}>
       {isLoginVisible &&
-       <ButtonGroup orientation='vertical'>
          <AuthNav/>
-       </ButtonGroup>
       }
 
       {isCollaborationGroupVisible &&
-       <ButtonGroup orientation='vertical' sx={{marginTop: '10px'}}>
-         <ShareControl/>
-       </ButtonGroup>
+      <Box>
+        <ShareControl/>
+      </Box>
       }
 
       {isModelInteractionGroupVisible &&
-       <ButtonGroup orientation='vertical'>
-         <TooltipIconButton
-           title='Notes'
-           icon={<ChatOutlinedIcon className='icon-share' color='secondary'/>}
-           selected={isNotesOn}
-           onClick={() => {
-             turnOffTooltips()
-             toggle('Notes')
-           }}
-         />
-         <TooltipIconButton
-           title='Properties'
-           onClick={() => {
-             turnOffTooltips()
-             toggle('Properties')
-           }}
-           selected={isPropertiesOn}
-           icon={<FormatListBulletedOutlinedIcon className='icon-share' color='secondary'/>}
-         />
-         <CutPlaneMenu/>
-         {/* <ExtractLevelsMenu/> */}
-         <TooltipIconButton
-           title='Clear'
-           onClick={deselectItems}
-           selected={isSelected()}
-           icon={<HighlightOffIcon className='icon-share'color='secondary'/>}
-         />
-
-       </ButtonGroup>
+      <>
+        <TooltipIconButton
+          title='Notes'
+          icon={<ChatOutlinedIcon className='icon-share' color='secondary'/>}
+          selected={isNotesOn}
+          onClick={() => {
+            turnOffTooltips()
+            toggle('Notes')
+          }}
+        />
+        <TooltipIconButton
+          title='Properties'
+          onClick={() => {
+            turnOffTooltips()
+            toggle('Properties')
+          }}
+          selected={isPropertiesOn}
+          icon={<FormatListBulletedOutlinedIcon className='icon-share' color='secondary'/>}
+        />
+        <CutPlaneMenu/>
+        <TooltipIconButton
+          title='Clear'
+          onClick={deselectItems}
+          selected={isSelected()}
+          icon={<HighlightOffIcon className='icon-share'color='secondary'/>}
+        />
+      </>
       }
 
       {isSettingsVisible &&
-       <ButtonGroup orientation='vertical'>
-         {isAppStoreEnabled &&
+      <>
+        {isAppStoreEnabled &&
          <TooltipIconButton
            title='Open App Store'
            icon={<AppStoreIcon/>}
            selected={isAppStoreOpen}
            onClick={() => toggleAppStoreDrawer()}
          />
-         }
-         <TooltipIconButton
-           title={`${theme.palette.mode === 'light' ? 'Day' : 'Night'} theme`}
-           onClick={() => theme.toggleColorMode()}
-           icon={
+        }
+        <TooltipIconButton
+          title={`${theme.palette.mode === 'light' ? 'Day' : 'Night'} theme`}
+          onClick={() => theme.toggleColorMode()}
+          icon={
              theme.palette.mode === 'light' ?
                <WbSunnyOutlinedIcon className='icon-share' color='secondary'/> :
                <NightlightOutlinedIcon className='icon-share' color='secondary'/> }
-         />
-         <AboutControl/>
-         <TooltipIconButton
-           title='Help'
-           onClick={() => toggleIsHelpTooltips()}
-           selected={isHelpTooltips}
-           icon={<HelpOutlineIcon className='icon-share' color='secondary'/>}
-         />
-       </ButtonGroup>
+        />
+        <AboutControl/>
+        <TooltipIconButton
+          title='Help'
+          onClick={() => toggleIsHelpTooltips()}
+          selected={isHelpTooltips}
+          icon={<HelpOutlineIcon className='icon-share' color='secondary'/>}
+        />
+      </>
       }
       {/* Invisible */}
       <CameraControl/>
-    </Box>
+    </ButtonGroup>
   )
 }
diff --git a/src/Components/SearchBar.jsx b/src/Components/SearchBar.jsx
index 658952e61..7f10956ae 100644
--- a/src/Components/SearchBar.jsx
+++ b/src/Components/SearchBar.jsx
@@ -1,7 +1,9 @@
 import React, {useRef, useEffect, useState} from 'react'
 import {useLocation, useNavigate, useSearchParams} from 'react-router-dom'
-import InputAdornment from '@mui/material/InputAdornment'
+import Box from '@mui/material/Box'
+import Paper from '@mui/material/Paper'
 import Autocomplete from '@mui/material/Autocomplete'
+import InputAdornment from '@mui/material/InputAdornment'
 import IconButton from '@mui/material/IconButton'
 import TextField from '@mui/material/TextField'
 import {looksLikeLink, githubUrlOrPathToSharePath} from '../ShareRoutes'
@@ -86,66 +88,84 @@ export default function SearchBar({fileOpen}) {
   // container (CadView).
   return (
     <form onSubmit={onSubmit}>
-      <Autocomplete
-        fullWidth
-        freeSolo
-        options={['together', 'dach', 'fen', 'wand']}
-        value={inputText}
-        onChange={(_, newValue) => setInputText(newValue || '')}
-        onInputChange={(_, newInputValue) => setInputText(newInputValue || '')}
-        inputValue={inputText}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            inputRef={searchInputRef}
-            size="small"
-            error={!!error.length}
-            placeholder="Search"
-            variant="outlined"
-            sx={{
-              'width': '100%',
-              'border': 'none',
-              '& fieldset': {
-                border: 'none',
-              },
-              '&:hover fieldset': {
-                border: 'none',
-              },
-              '&.Mui-focused fieldset': {
-                border: 'none',
-              },
-              '& .MuiOutlinedInput-root': {
-                backgroundColor: theme.palette.primary.background,
-                border: 'none',
-                height: '50px',
-              },
-            }}
-            InputProps={{
-              ...params.InputProps,
-              startAdornment: (
-                <InputAdornment position="start">
-                  <SearchIcon sx={{opacity: 0.8}} color="secondary"/>
-                </InputAdornment>
-              ),
-              endAdornment: inputText.length > 0 ? (
-                <InputAdornment position="end">
-                  <IconButton
-                    size="small"
-                    onClick={() => {
-                      setInputText('')
-                      setError('')
-                      navWithSearchParamRemoved(navigate, location.pathname, QUERY_PARAM)
-                    }}
-                    style={{padding: 0, opacity: 0.8}}
-                  >
-                    <HighlightOffIcon className="icon-share" size="inherit" color="secondary"/>
-                  </IconButton>
-                </InputAdornment>
-              ) : null,
-            }}
-          />
-        )}
-      />
+      <Box sx={{boxShadow: theme.shadows[1]}}>
+        <Autocomplete
+          fullWidth
+          freeSolo
+          options={['together', 'dach', 'fen', 'wand']}
+          value={inputText}
+          onChange={(_, newValue) => setInputText(newValue || '')}
+          onInputChange={(_, newInputValue) => setInputText(newInputValue || '')}
+          inputValue={inputText}
+          PaperComponent={({children}) => (
+            <Paper
+              sx={{
+                'backgroundColor': theme.palette.scene.background,
+                '.MuiAutocomplete-option': {
+                  backgroundColor: theme.palette.scene.background,
+                },
+              }}
+            >
+              {children}
+            </Paper>
+          )}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              inputRef={searchInputRef}
+              size="small"
+              error={!!error.length}
+              placeholder='Search'
+              variant="outlined"
+              sx={{
+                'width': '100%',
+                'border': 'none',
+                '& fieldset': {
+                  border: 'none',
+                },
+                '&:hover fieldset': {
+                  border: 'none',
+                },
+                '&.Mui-focused fieldset': {
+                  border: 'none',
+                },
+                '& .MuiOutlinedInput-root': {
+                  border: 'none',
+                  height: '50px',
+                },
+              }}
+              InputProps={{
+                ...params.InputProps,
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon sx={{opacity: 0.8, marginLeft: '10px'}} color="secondary"/>
+                  </InputAdornment>
+                ),
+                endAdornment: inputText.length > 0 ? (
+                  <InputAdornment position="end">
+                    <IconButton
+                      size="small"
+                      onClick={() => {
+                        setInputText('')
+                        setError('')
+                        navWithSearchParamRemoved(navigate, location.pathname, QUERY_PARAM)
+                      }}
+                      style={{padding: 0, opacity: 0.8}}
+                    >
+                      <HighlightOffIcon
+                        className="icon-share"
+                        sx={{opacity: 0.8}}
+                        ize="inherit"
+                        color="secondary"
+                      />
+                    </IconButton>
+                  </InputAdornment>
+                ) : null,
+              }}
+            />
+          )}
+        />
+      </Box>
     </form>
   )
 }
diff --git a/src/theme/Components.js b/src/theme/Components.js
index 9e71e8ccb..a88195be4 100644
--- a/src/theme/Components.js
+++ b/src/theme/Components.js
@@ -77,9 +77,10 @@ export function getComponentOverrides(palette, typography) {
       variants: [
         {
           props: {variant: 'control'},
-          style: {
-            backgroundColor: palette.primary.background,
-          },
+          style: ({ownerState, theme}) => ({
+            backgroundColor: palette.scene.background,
+            boxShadow: theme.shadows[ownerState.elevation],
+          }),
         },
         {
           props: {variant: 'background'},