diff --git a/client/src/common/components/buttons/CollapseBtn.jsx b/client/src/common/components/buttons/CollapseBtn.jsx
index 490af34bb..77891b087 100644
--- a/client/src/common/components/buttons/CollapseBtn.jsx
+++ b/client/src/common/components/buttons/CollapseBtn.jsx
@@ -1,18 +1,20 @@
-import { Button } from '@chakra-ui/button';
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
 import { FiChevronsUp } from 'react-icons/fi';
 
 export default function CollapseBtn(props) {
   const { clickhandler } = props;
   return (
-    <Button
-      size={props.size || 'xs'}
-      leftIcon={<FiChevronsUp />}
-      colorScheme='white'
-      variant='outline'
-      onClick={clickhandler}
-      _focus={{ boxShadow: 'none' }}
-    >
-      Collapse All
-    </Button>
+    <Tooltip label='Collapse all'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiChevronsUp />}
+        colorScheme='white'
+        variant='outline'
+        background='#fff1'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+      />
+    </Tooltip>
   );
 }
diff --git a/client/src/common/components/buttons/CurrentBtn.jsx b/client/src/common/components/buttons/CurrentBtn.jsx
index 2bea19028..a15c62aa0 100644
--- a/client/src/common/components/buttons/CurrentBtn.jsx
+++ b/client/src/common/components/buttons/CurrentBtn.jsx
@@ -2,13 +2,13 @@ import { Button } from '@chakra-ui/button';
 import { FiTarget } from 'react-icons/fi';
 
 export default function CurrentBtn(props) {
-  const { clickhandler } = props;
+  const { clickhandler, active } = props;
   return (
     <Button
       size={props.size || 'xs'}
       leftIcon={<FiTarget />}
       colorScheme='whiteAlpha'
-      variant='outline'
+      variant={active ? 'solid' : 'outline'}
       onClick={clickhandler}
       _focus={{ boxShadow: 'none' }}
     >
diff --git a/client/src/common/components/buttons/ExpandBtn.jsx b/client/src/common/components/buttons/ExpandBtn.jsx
index b0dddf8e7..a692e163b 100644
--- a/client/src/common/components/buttons/ExpandBtn.jsx
+++ b/client/src/common/components/buttons/ExpandBtn.jsx
@@ -1,18 +1,20 @@
-import { Button } from '@chakra-ui/button';
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
 import { FiChevronsDown } from 'react-icons/fi';
 
 export default function ExpandBtn(props) {
   const { clickhandler } = props;
   return (
-    <Button
-      size={props.size || 'xs'}
-      leftIcon={<FiChevronsDown />}
-      colorScheme='white'
-      variant='outline'
-      onClick={clickhandler}
-      _focus={{ boxShadow: 'none' }}
-    >
-      Expand All
-    </Button>
+    <Tooltip label='Expand all'>
+      <IconButton
+        size={props.size || 'xs'}
+        icon={<FiChevronsDown />}
+        colorScheme='white'
+        variant='outline'
+        background='#fff1'
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+      />
+    </Tooltip>
   );
 }
diff --git a/client/src/common/components/buttons/LockIconBtn.jsx b/client/src/common/components/buttons/LockIconBtn.jsx
new file mode 100644
index 000000000..d52030fd1
--- /dev/null
+++ b/client/src/common/components/buttons/LockIconBtn.jsx
@@ -0,0 +1,21 @@
+import { IconButton } from '@chakra-ui/button';
+import { Tooltip } from '@chakra-ui/tooltip';
+import { FiTarget } from 'react-icons/fi';
+
+export default function LockIconBtn(props) {
+  const { clickhandler, active, ref } = props;
+  return (
+    <Tooltip label='Lock cursor to current'>
+      <IconButton
+        ref={ref}
+        size={props.size || 'xs'}
+        icon={<FiTarget />}
+        colorScheme='pink'
+        color={'pink.300'}
+        variant={active ? 'solid' : 'outline'}
+        onClick={clickhandler}
+        _focus={{ boxShadow: 'none' }}
+      />
+    </Tooltip>
+  );
+}