diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index 44d6de5..2b6b69d 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -1,15 +1,13 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Page, Text, User, Button, Spacer } from '@geist-ui/core';
 import { Settings as SettingsIcon } from '@geist-ui/icons';
 import Settings from './Settings';
-import { useSettings } from '../contexts/SettingsContext';
+import { useUIStateContext } from '../contexts/UIStateContext';
 
 const Header = () => {
-  const [settingsVisible, setSettingsVisible] = useState(false);
-  const { settings } = useSettings();
+  const { setSettingsModalVisible } = useUIStateContext();
 
-  const openSettings = () => setSettingsVisible(true);
-  const closeSettings = () => setSettingsVisible(false);
+  const openSettings = () => setSettingsModalVisible(true);
 
   return (
     <Page.Header className="custom-navbar">
@@ -18,7 +16,7 @@ const Header = () => {
       <User src="https://via.placeholder.com/40" name="User" />
       <Spacer w={0.5} />
       <Button auto icon={<SettingsIcon />} onClick={openSettings} />
-      <Settings visible={settingsVisible} onClose={closeSettings} />
+      <Settings />
     </Page.Header>
   );
 };
diff --git a/frontend/src/components/Settings.js b/frontend/src/components/Settings.js
index fed8aff..b79b3f1 100644
--- a/frontend/src/components/Settings.js
+++ b/frontend/src/components/Settings.js
@@ -1,6 +1,7 @@
 import React, { useReducer, useEffect, useCallback, useRef } from 'react';
 import { Modal, Spacer, useTheme, Dot, useToasts } from '@geist-ui/core';
 import { useSettings } from '../contexts/SettingsContext';
+import { useUIStateContext } from '../contexts/UIStateContext';
 import AppearanceSettings from './settings/AppearanceSettings';
 import EditorSettings from './settings/EditorSettings';
 import GitSettings from './settings/GitSettings';
@@ -12,7 +13,6 @@ const initialState = {
 };
 
 function settingsReducer(state, action) {
-  console.log('Reducer action:', action.type, action.payload); // Debug log
   switch (action.type) {
     case 'INIT_SETTINGS':
       return {
@@ -48,8 +48,9 @@ function settingsReducer(state, action) {
   }
 }
 
-const Settings = ({ visible, onClose }) => {
+const Settings = () => {
   const { settings, updateSettings, updateTheme } = useSettings();
+  const { settingsModalVisible, setSettingsModalVisible } = useUIStateContext();
   const { setToast } = useToasts();
   const [state, dispatch] = useReducer(settingsReducer, initialState);
   const isInitialMount = useRef(true);
@@ -84,7 +85,7 @@ const Settings = ({ visible, onClose }) => {
       await updateSettings(state.localSettings);
       dispatch({ type: 'MARK_SAVED' });
       setToast({ text: 'Settings saved successfully', type: 'success' });
-      onClose();
+      setSettingsModalVisible(false);
     } catch (error) {
       console.error('Failed to save settings:', error);
       setToast({
@@ -98,15 +99,13 @@ const Settings = ({ visible, onClose }) => {
     if (state.hasUnsavedChanges) {
       updateTheme(state.initialSettings.theme); // Revert theme if not saved
       dispatch({ type: 'RESET' });
-      onClose();
-    } else {
-      onClose();
     }
+    setSettingsModalVisible(false);
   }, [
     state.hasUnsavedChanges,
     state.initialSettings.theme,
     updateTheme,
-    onClose,
+    setSettingsModalVisible,
   ]);
 
   useEffect(() => {
@@ -117,10 +116,8 @@ const Settings = ({ visible, onClose }) => {
     };
   }, []);
 
-  console.log('State:', state); // Debugging log
-
   return (
-    <Modal visible={visible} onClose={handleClose}>
+    <Modal visible={settingsModalVisible} onClose={handleClose}>
       <Modal.Title>
         Settings
         {state.hasUnsavedChanges && (
diff --git a/frontend/src/contexts/UIStateContext.js b/frontend/src/contexts/UIStateContext.js
index 30c05da..e36d999 100644
--- a/frontend/src/contexts/UIStateContext.js
+++ b/frontend/src/contexts/UIStateContext.js
@@ -8,6 +8,7 @@ export const UIStateProvider = ({ children }) => {
   const [deleteFileModalVisible, setDeleteFileModalVisible] = useState(false);
   const [commitMessageModalVisible, setCommitMessageModalVisible] =
     useState(false);
+  const [settingsModalVisible, setSettingsModalVisible] = useState(false);
 
   const value = {
     activeTab,
@@ -18,6 +19,8 @@ export const UIStateProvider = ({ children }) => {
     setDeleteFileModalVisible,
     commitMessageModalVisible,
     setCommitMessageModalVisible,
+    settingsModalVisible,
+    setSettingsModalVisible,
   };
 
   return (