diff --git a/src/components/QuickSettingsPanel.jsx b/src/components/QuickSettingsPanel.jsx
index 391d183..fc69d49 100644
--- a/src/components/QuickSettingsPanel.jsx
+++ b/src/components/QuickSettingsPanel.jsx
@@ -27,8 +27,7 @@ import { useDeviceSettings } from '../hooks/useDeviceSettings';
 
 const QuickSettingsPanel = () => {
   const { t } = useTranslation('settings');
-  const [ isOpen, setIsOpen ] = useState(false); 
-  const [localIsOpen, setLocalIsOpen] = useState(false); // ! Is this necessary? Can we just use isOpen?
+  const [isOpen, setIsOpen] = useState(false);
   const [whisperMode, setWhisperMode] = useState(() => {
     return localStorage.getItem('whisperMode') || 'default';
   });
@@ -63,10 +62,6 @@ const QuickSettingsPanel = () => {
   const constraintsRef = useRef({ min: 10, max: 90 }); // Percentage constraints
   const dragThreshold = 5; // Pixels to move before it's considered a drag
 
-  useEffect(() => {
-    setLocalIsOpen(isOpen);
-  }, [isOpen]);
-
   // Save handle position to localStorage when it changes
   useEffect(() => {
     localStorage.setItem('quickSettingsHandlePosition', JSON.stringify({ y: handlePosition }));
@@ -203,9 +198,7 @@ const QuickSettingsPanel = () => {
       return;
     }
 
-    const newState = !localIsOpen;
-    setLocalIsOpen(newState);
-    setIsOpen(newState);
+    setIsOpen((previous) => !previous);
   };
 
   return (
@@ -223,19 +216,19 @@ const QuickSettingsPanel = () => {
           handleDragStart(e);
         }}
         className={`fixed ${
-          localIsOpen ? 'right-64' : 'right-0'
+          isOpen ? 'right-64' : 'right-0'
         } z-50 ${isDragging ? '' : 'transition-all duration-150 ease-out'} bg-white dark:bg-gray-800 border ${
           isDragging ? 'border-blue-500 dark:border-blue-400' : 'border-gray-200 dark:border-gray-700'
         } rounded-l-md p-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors shadow-lg ${
           isDragging ? 'cursor-grabbing' : 'cursor-pointer'
         } touch-none`}
         style={{ ...getPositionStyle(), touchAction: 'none', WebkitTouchCallout: 'none', WebkitUserSelect: 'none' }}
-        aria-label={isDragging ? t('quickSettings.dragHandle.dragging') : localIsOpen ? t('quickSettings.dragHandle.closePanel') : t('quickSettings.dragHandle.openPanel')}
+        aria-label={isDragging ? t('quickSettings.dragHandle.dragging') : isOpen ? t('quickSettings.dragHandle.closePanel') : t('quickSettings.dragHandle.openPanel')}
         title={isDragging ? t('quickSettings.dragHandle.draggingStatus') : t('quickSettings.dragHandle.toggleAndMove')}
       >
         {isDragging ? (
           <GripVertical className="h-5 w-5 text-blue-500 dark:text-blue-400" />
-        ) : localIsOpen ? (
+        ) : isOpen ? (
           <ChevronRight className="h-5 w-5 text-gray-600 dark:text-gray-400" />
         ) : (
           <ChevronLeft className="h-5 w-5 text-gray-600 dark:text-gray-400" />
@@ -245,7 +238,7 @@ const QuickSettingsPanel = () => {
       {/* Panel */}
       <div
         className={`fixed top-0 right-0 h-full w-64 bg-background border-l border-border shadow-xl transform transition-transform duration-150 ease-out z-40 ${
-          localIsOpen ? 'translate-x-0' : 'translate-x-full'
+          isOpen ? 'translate-x-0' : 'translate-x-full'
         } ${isMobile ? 'h-screen' : ''}`}
       >
         <div className="h-full flex flex-col">
@@ -442,7 +435,7 @@ const QuickSettingsPanel = () => {
       </div>
 
       {/* Backdrop */}
-      {localIsOpen && (
+      {isOpen && (
         <div
           className="fixed inset-0 bg-background/80 backdrop-blur-sm z-30 transition-opacity duration-150 ease-out"
           onClick={handleToggle}