diff --git a/apps/client/src/features/editors/Editor.tsx b/apps/client/src/features/editors/Editor.tsx
index 140b09268..b32e39e3f 100644
--- a/apps/client/src/features/editors/Editor.tsx
+++ b/apps/client/src/features/editors/Editor.tsx
@@ -1,6 +1,7 @@
 import { lazy, useCallback, useEffect } from 'react';
 import { IconButton, useDisclosure } from '@chakra-ui/react';
 import { IoApps } from '@react-icons/all-files/io5/IoApps';
+import { IoClose } from '@react-icons/all-files/io5/IoClose';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
 
 import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
@@ -84,9 +85,9 @@ export default function Editor() {
         />
         <IconButton
           aria-label='Toggle settings'
-          variant='ontime-subtle-white'
+          variant={isSettingsOpen ? 'ontime-subtle' : 'ontime-subtle-white'}
           size='lg'
-          icon={<IoSettingsOutline />}
+          icon={isSettingsOpen ? <IoClose /> : <IoSettingsOutline />}
           onClick={toggleSettings}
         />
       </EditorOverview>