diff --git a/client/src/common/components/buttons/AddIconBtn.jsx b/client/src/common/components/buttons/AddIconBtn.jsx
index 460f785a6..9133a1a7b 100644
--- a/client/src/common/components/buttons/AddIconBtn.jsx
+++ b/client/src/common/components/buttons/AddIconBtn.jsx
@@ -2,14 +2,15 @@ import { IconButton } from '@chakra-ui/button';
 import { FiPlus } from 'react-icons/fi';
 
 export default function AddIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiPlus />}
       colorScheme='blue'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }
diff --git a/client/src/common/components/buttons/BlockIconBtn.jsx b/client/src/common/components/buttons/BlockIconBtn.jsx
index 9ac6118b7..c463afab3 100644
--- a/client/src/common/components/buttons/BlockIconBtn.jsx
+++ b/client/src/common/components/buttons/BlockIconBtn.jsx
@@ -2,14 +2,15 @@ import { IconButton } from '@chakra-ui/button';
 import { FiMinusCircle } from 'react-icons/fi';
 
 export default function BlockIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiMinusCircle />}
       colorScheme='purple'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }
diff --git a/client/src/common/components/buttons/CollapseIconBtn.jsx b/client/src/common/components/buttons/CollapseIconBtn.jsx
index b44f56412..830e038dd 100644
--- a/client/src/common/components/buttons/CollapseIconBtn.jsx
+++ b/client/src/common/components/buttons/CollapseIconBtn.jsx
@@ -2,15 +2,16 @@ import { IconButton } from '@chakra-ui/button';
 import { FiArrowDownCircle } from 'react-icons/fi';
 
 export default function CollapseIconBtn(props) {
+  const { clickhandler, active, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiArrowDownCircle />}
       colorScheme='orange'
-      variant={props.active ? 'solid' : 'outline'}
-      onClick={props.clickHandler}
+      variant={active ? 'solid' : 'outline'}
+      onClick={clickhandler}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }
diff --git a/client/src/common/components/buttons/DelayIconBtn.jsx b/client/src/common/components/buttons/DelayIconBtn.jsx
index f63ff3b83..f83880980 100644
--- a/client/src/common/components/buttons/DelayIconBtn.jsx
+++ b/client/src/common/components/buttons/DelayIconBtn.jsx
@@ -2,14 +2,15 @@ import { IconButton } from '@chakra-ui/button';
 import { FiClock } from 'react-icons/fi';
 
 export default function DelayIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiClock />}
       colorScheme='yellow'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }
diff --git a/client/src/common/components/buttons/DeleteIconBtn.jsx b/client/src/common/components/buttons/DeleteIconBtn.jsx
index 94fb543c9..0e6f18132 100644
--- a/client/src/common/components/buttons/DeleteIconBtn.jsx
+++ b/client/src/common/components/buttons/DeleteIconBtn.jsx
@@ -2,14 +2,15 @@ import { IconButton } from '@chakra-ui/button';
 import { FiMinus } from 'react-icons/fi';
 
 export default function DeleteIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiMinus />}
       colorScheme='red'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }
diff --git a/client/src/common/components/buttons/NextIconBtn.jsx b/client/src/common/components/buttons/NextIconBtn.jsx
index c12cacfa7..983df5ed5 100644
--- a/client/src/common/components/buttons/NextIconBtn.jsx
+++ b/client/src/common/components/buttons/NextIconBtn.jsx
@@ -2,16 +2,17 @@ import { IconButton } from '@chakra-ui/button';
 import { FiSkipForward } from 'react-icons/fi';
 
 export default function NextIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       icon={<FiSkipForward />}
       colorScheme='whiteAlpha'
       backgroundColor='#ffffff11'
       variant='outline'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       width={90}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }
diff --git a/client/src/common/components/buttons/PauseIconBtn.jsx b/client/src/common/components/buttons/PauseIconBtn.jsx
index 0f841e43b..4c3dff097 100644
--- a/client/src/common/components/buttons/PauseIconBtn.jsx
+++ b/client/src/common/components/buttons/PauseIconBtn.jsx
@@ -2,15 +2,16 @@ import { IconButton } from '@chakra-ui/button';
 import { FiPause } from 'react-icons/fi';
 
 export default function PauseIconBtn(props) {
+  const { clickhandler, active, ...rest } = props;
   return (
     <IconButton
       icon={<FiPause />}
       colorScheme='orange'
-      variant={props.active ? 'solid' : 'outline'}
-      onClick={props.clickHandler}
+      variant={active ? 'solid' : 'outline'}
+      onClick={clickhandler}
       width={120}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }
diff --git a/client/src/common/components/buttons/PrevIconBtn.jsx b/client/src/common/components/buttons/PrevIconBtn.jsx
index f7aff2a33..a5ac937e1 100644
--- a/client/src/common/components/buttons/PrevIconBtn.jsx
+++ b/client/src/common/components/buttons/PrevIconBtn.jsx
@@ -2,16 +2,17 @@ import { IconButton } from '@chakra-ui/button';
 import { FiSkipBack } from 'react-icons/fi';
 
 export default function PrevIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       icon={<FiSkipBack />}
       colorScheme='whiteAlpha'
       backgroundColor='#ffffff11'
       variant='outline'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       width={90}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }
diff --git a/client/src/common/components/buttons/ReloadIconBtn.jsx b/client/src/common/components/buttons/ReloadIconBtn.jsx
index c590af16d..4eec731e1 100644
--- a/client/src/common/components/buttons/ReloadIconBtn.jsx
+++ b/client/src/common/components/buttons/ReloadIconBtn.jsx
@@ -2,16 +2,17 @@ import { IconButton } from '@chakra-ui/button';
 import { FiRefreshCcw } from 'react-icons/fi';
 
 export default function ReloadIconButton(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       icon={<FiRefreshCcw />}
       colorScheme='whiteAlpha'
       backgroundColor='#ffffff05'
       variant='outline'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       width={90}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }
diff --git a/client/src/common/components/buttons/RollIconBtn.jsx b/client/src/common/components/buttons/RollIconBtn.jsx
index 122611fe7..f34b935c2 100644
--- a/client/src/common/components/buttons/RollIconBtn.jsx
+++ b/client/src/common/components/buttons/RollIconBtn.jsx
@@ -2,15 +2,16 @@ import { IconButton } from '@chakra-ui/button';
 import { FiClock } from 'react-icons/fi';
 
 export default function RollIconBtn(props) {
+  const { clickhandler, active, ...rest } = props;
   return (
     <IconButton
       icon={<FiClock />}
       colorScheme='blue'
-      variant={props.active ? 'solid' : 'outline'}
-      onClick={props.clickHandler}
+      variant={active ? 'solid' : 'outline'}
+      onClick={clickhandler}
       width={120}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
       disabled
     />
   );
diff --git a/client/src/common/components/buttons/SettingsIconBtn.jsx b/client/src/common/components/buttons/SettingsIconBtn.jsx
index 77aeb4801..2fd8e538d 100644
--- a/client/src/common/components/buttons/SettingsIconBtn.jsx
+++ b/client/src/common/components/buttons/SettingsIconBtn.jsx
@@ -2,15 +2,16 @@ import { IconButton } from '@chakra-ui/button';
 import { FiSettings } from 'react-icons/fi';
 
 export default function SettingsIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiSettings />}
       isRound
       variant='outline'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }
diff --git a/client/src/common/components/buttons/StartIconBtn.jsx b/client/src/common/components/buttons/StartIconBtn.jsx
index 785b283f0..06b9bbd80 100644
--- a/client/src/common/components/buttons/StartIconBtn.jsx
+++ b/client/src/common/components/buttons/StartIconBtn.jsx
@@ -2,15 +2,16 @@ import { IconButton } from '@chakra-ui/button';
 import { FiPlay } from 'react-icons/fi';
 
 export default function StartIconBtn(props) {
+  const { clickhandler, active, ...rest } = props;
   return (
     <IconButton
       icon={<FiPlay />}
       colorScheme='green'
-      variant={props.active ? 'solid' : 'outline'}
-      onClick={props.clickHandler}
+      variant={active ? 'solid' : 'outline'}
+      onClick={clickhandler}
       width={120}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }
diff --git a/client/src/common/components/buttons/UnloadIconBtn.jsx b/client/src/common/components/buttons/UnloadIconBtn.jsx
index 30560c051..631f4b9e8 100644
--- a/client/src/common/components/buttons/UnloadIconBtn.jsx
+++ b/client/src/common/components/buttons/UnloadIconBtn.jsx
@@ -2,16 +2,17 @@ import { IconButton } from '@chakra-ui/button';
 import { FiCornerLeftUp } from 'react-icons/fi';
 
 export default function UnloadIconBtn(props) {
+  const { clickhandler, ...rest } = props;
   return (
     <IconButton
       icon={<FiCornerLeftUp />}
       colorScheme='whiteAlpha'
       backgroundColor='#ffffff05'
       variant='outline'
-      onClick={props.clickHandler}
+      onClick={clickhandler}
       width={90}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }
diff --git a/client/src/common/components/buttons/VisibleIconBtn.jsx b/client/src/common/components/buttons/VisibleIconBtn.jsx
index 775bc2e6b..db06c8e34 100644
--- a/client/src/common/components/buttons/VisibleIconBtn.jsx
+++ b/client/src/common/components/buttons/VisibleIconBtn.jsx
@@ -2,15 +2,16 @@ import { IconButton } from '@chakra-ui/button';
 import { FiSun } from 'react-icons/fi';
 
 export default function VisibleIconBtn(props) {
+  const { clickhandler, active, ...rest } = props;
   return (
     <IconButton
       size={props.size || 'xs'}
       icon={<FiSun />}
       colorScheme='blue'
-      variant={props.active ? 'solid' : 'outline'}
-      onClick={props.clickHandler}
+      variant={active ? 'solid' : 'outline'}
+      onClick={clickhandler}
       _focus={{ boxShadow: 'none' }}
-      {...props}
+      {...rest}
     />
   );
 }
diff --git a/client/src/features/control/MessageControl.jsx b/client/src/features/control/MessageControl.jsx
index 615543808..4a95d6b12 100644
--- a/client/src/features/control/MessageControl.jsx
+++ b/client/src/features/control/MessageControl.jsx
@@ -93,8 +93,8 @@ export default function MessageControl() {
             <EditableInput className={style.padleft} />
           </Editable>
           <VisibleIconBtn
-            active={pres.visible}
-            clickHandler={() => messageControl('toggle-pres-visible')}
+            active={pres.visible || undefined}
+            clickhandler={() => messageControl('toggle-pres-visible')}
             {...inputProps}
           />
         </div>
@@ -113,8 +113,8 @@ export default function MessageControl() {
             <EditableInput className={style.padleft} />
           </Editable>
           <VisibleIconBtn
-            active={publ.visible}
-            clickHandler={() => messageControl('toggle-publ-visible')}
+            active={publ.visible || undefined}
+            clickhandler={() => messageControl('toggle-publ-visible')}
             {...inputProps}
           />
         </div>
@@ -134,8 +134,8 @@ export default function MessageControl() {
           </Editable>
 
           <VisibleIconBtn
-            active={lower.visible}
-            clickHandler={() => messageControl('toggle-lower-visible')}
+            active={lower.visible || undefined}
+            clickhandler={() => messageControl('toggle-lower-visible')}
             {...inputProps}
           />
         </div>
diff --git a/client/src/features/control/PlaybackControl.jsx b/client/src/features/control/PlaybackControl.jsx
index 19cf24bb4..5e7eaf3f8 100644
--- a/client/src/features/control/PlaybackControl.jsx
+++ b/client/src/features/control/PlaybackControl.jsx
@@ -115,28 +115,28 @@ export default function PlaybackControl() {
       <div className={style.playbackContainer}>
         <StartIconBtn
           active={playback === 'start'}
-          clickHandler={() => playbackControl('start')}
+          clickhandler={() => playbackControl('start')}
           disabled={!selectedId}
         />
         <PauseIconBtn
           active={playback === 'pause'}
-          clickHandler={() => playbackControl('pause')}
+          clickhandler={() => playbackControl('pause')}
           disabled={!selectedId}
         />
         <RollIconBtn
           active={playback === 'roll'}
-          clickHandler={() => playbackControl('roll')}
+          clickhandler={() => playbackControl('roll')}
         />
       </div>
       <div className={style.playbackContainer}>
-        <PrevIconBtn clickHandler={() => playbackControl('previous')} />
-        <NextIconBtn clickHandler={() => playbackControl('next')} />
+        <PrevIconBtn clickhandler={() => playbackControl('previous')} />
+        <NextIconBtn clickhandler={() => playbackControl('next')} />
         <UnloadIconBtn
-          clickHandler={() => playbackControl('unload')}
+          clickhandler={() => playbackControl('unload')}
           disabled={!selectedId}
         />
         <ReloadIconButton
-          clickHandler={() => playbackControl('reload')}
+          clickhandler={() => playbackControl('reload')}
           disabled={!selectedId}
         />
       </div>
diff --git a/client/src/features/editors/Editor.jsx b/client/src/features/editors/Editor.jsx
index 373a69da9..543eb49a9 100644
--- a/client/src/features/editors/Editor.jsx
+++ b/client/src/features/editors/Editor.jsx
@@ -71,7 +71,7 @@ export default function Editor() {
               paddingTop: '3em',
             }}
           >
-            <SettingsIconBtn size='md' clickHandler={onOpen} />
+            <SettingsIconBtn size='md' clickhandler={onOpen} />
             <div
               style={{
                 width: 35,
diff --git a/client/src/features/editors/list/BlockBlock.jsx b/client/src/features/editors/list/BlockBlock.jsx
index 3ede535fc..aa23a93c8 100644
--- a/client/src/features/editors/list/BlockBlock.jsx
+++ b/client/src/features/editors/list/BlockBlock.jsx
@@ -18,7 +18,7 @@ export default function BlockBlock(props) {
   return (
     <div className={style.block}>
       <div className={style.actionOverlay}>
-        <DeleteIconBtn clickHandler={deleteHandler} />
+        <DeleteIconBtn clickhandler={deleteHandler} />
         <ActionButtons
           showAdd
           addHandler={addHandler}
diff --git a/client/src/features/editors/list/DelayBlock.jsx b/client/src/features/editors/list/DelayBlock.jsx
index 89a9688a2..4711c26ad 100644
--- a/client/src/features/editors/list/DelayBlock.jsx
+++ b/client/src/features/editors/list/DelayBlock.jsx
@@ -27,7 +27,7 @@ export default function DelayBlock(props) {
         submitHandler={submitHandler}
       />
       <div className={style.actionOverlay}>
-        <DeleteIconBtn clickHandler={deleteHandler} />
+        <DeleteIconBtn clickhandler={deleteHandler} />
         <ActionButtons showAdd addHandler={addHandler} />
       </div>
     </div>
diff --git a/client/src/features/editors/list/EventBlock.jsx b/client/src/features/editors/list/EventBlock.jsx
index 9b481ec57..853af31e4 100644
--- a/client/src/features/editors/list/EventBlock.jsx
+++ b/client/src/features/editors/list/EventBlock.jsx
@@ -113,10 +113,10 @@ export default function EventBlock(props) {
       </div>
       <div className={style.actionOverlay}>
         <VisibleIconBtn
-          clickHandler={() => setVisible(!visible)}
-          active={visible}
+          clickhandler={() => setVisible(!visible)}
+          active={visible || undefined}
         />
-        <DeleteIconBtn clickHandler={deleteHandler} />
+        <DeleteIconBtn clickhandler={deleteHandler} />
         <ActionButtons
           showAdd
           addHandler={addHandler}
diff --git a/client/src/features/menu/EventListMenu.jsx b/client/src/features/menu/EventListMenu.jsx
index b73a2de3e..8baf11a93 100644
--- a/client/src/features/menu/EventListMenu.jsx
+++ b/client/src/features/menu/EventListMenu.jsx
@@ -57,7 +57,7 @@ export default function EventListMenu(props) {
           <MenuItem>Download CSV</MenuItem>
         </MenuList>
       </Menu>
-      <AddIconBtn clickHandler={addHandler} size='sm' />
+      <AddIconBtn clickhandler={addHandler} size='sm' />
     </div>
   );
 }