diff --git a/backend/internal/filesystem/filesystem.go b/backend/internal/filesystem/filesystem.go
index 6fe21ad..b589ea8 100644
--- a/backend/internal/filesystem/filesystem.go
+++ b/backend/internal/filesystem/filesystem.go
@@ -190,11 +190,6 @@ func (fs *FileSystem) SaveFile(filePath string, content []byte) error {
 		return err
 	}
 
-	if fs.Settings.Settings.GitAutoCommit && fs.GitRepo != nil {
-		message := strings.Replace(fs.Settings.Settings.GitCommitMsgTemplate, "${filename}", filePath, -1)
-		return fs.StageCommitAndPush(message)
-	}
-
 	return os.WriteFile(fullPath, content, 0644)
 }
 
diff --git a/frontend/src/components/Layout.js b/frontend/src/components/Layout.js
index e766de5..97df9e8 100644
--- a/frontend/src/components/Layout.js
+++ b/frontend/src/components/Layout.js
@@ -4,10 +4,12 @@ import Header from './Header';
 import Sidebar from './Sidebar';
 import MainContent from './MainContent';
 import { useFileNavigation } from '../hooks/useFileNavigation';
+import { useFileList } from '../hooks/useFileList';
 
 const Layout = () => {
   const { selectedFile, handleFileSelect, handleLinkClick } =
     useFileNavigation();
+  const { files, loadFileList } = useFileList();
 
   return (
     <AppShell header={{ height: 60 }} padding="md">
@@ -27,11 +29,14 @@ const Layout = () => {
           <Sidebar
             selectedFile={selectedFile}
             handleFileSelect={handleFileSelect}
+            files={files}
+            loadFileList={loadFileList}
           />
           <MainContent
             selectedFile={selectedFile}
             handleFileSelect={handleFileSelect}
             handleLinkClick={handleLinkClick}
+            loadFileList={loadFileList}
           />
         </Container>
       </AppShell.Main>
diff --git a/frontend/src/components/MainContent.js b/frontend/src/components/MainContent.js
index 2717ede..177f538 100644
--- a/frontend/src/components/MainContent.js
+++ b/frontend/src/components/MainContent.js
@@ -12,7 +12,12 @@ import { useFileOperations } from '../hooks/useFileOperations';
 import { useGitOperations } from '../hooks/useGitOperations';
 import { useSettings } from '../contexts/SettingsContext';
 
-const MainContent = ({ selectedFile, handleFileSelect, handleLinkClick }) => {
+const MainContent = ({
+  selectedFile,
+  handleFileSelect,
+  handleLinkClick,
+  loadFileList,
+}) => {
   const [activeTab, setActiveTab] = useState('source');
   const { settings } = useSettings();
   const {
@@ -33,38 +38,32 @@ const MainContent = ({ selectedFile, handleFileSelect, handleLinkClick }) => {
       let success = await handleSave(filePath, content);
       if (success) {
         setHasUnsavedChanges(false);
-
-        if (settings.gitAutoCommit && settings.gitEnabled) {
-          const commitMessage = settings.gitCommitMsgTemplate.replace(
-            '${filename}',
-            filePath
-          );
-          success = await handleCommitAndPush(commitMessage);
-        }
       }
       return success;
     },
-    [handleSave, setHasUnsavedChanges, settings, handleCommitAndPush]
+    [handleSave, setHasUnsavedChanges]
   );
 
   const handleCreateFile = useCallback(
     async (fileName) => {
       const success = await handleCreate(fileName);
       if (success) {
+        loadFileList();
         handleFileSelect(fileName);
       }
     },
-    [handleCreate, handleFileSelect]
+    [handleCreate, handleFileSelect, loadFileList]
   );
 
   const handleDeleteFile = useCallback(
     async (filePath) => {
       const success = await handleDelete(filePath);
       if (success) {
+        loadFileList();
         handleFileSelect(null);
       }
     },
-    [handleDelete, handleFileSelect]
+    [handleDelete, handleFileSelect, loadFileList]
   );
 
   const renderBreadcrumbs = useMemo(() => {
diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js
index bd657c0..79271f7 100644
--- a/frontend/src/components/Sidebar.js
+++ b/frontend/src/components/Sidebar.js
@@ -2,18 +2,16 @@ import React, { useEffect } from 'react';
 import { Box } from '@mantine/core';
 import FileActions from './FileActions';
 import FileTree from './FileTree';
-import { useFileList } from '../hooks/useFileList';
 import { useGitOperations } from '../hooks/useGitOperations';
 import { useSettings } from '../contexts/SettingsContext';
 
-const Sidebar = ({ selectedFile, handleFileSelect }) => {
+const Sidebar = ({ selectedFile, handleFileSelect, files, loadFileList }) => {
   const { settings } = useSettings();
-  const { files, loadFileList } = useFileList();
   const { handlePull } = useGitOperations(settings.gitEnabled);
 
   useEffect(() => {
     loadFileList();
-  }, [settings.gitEnabled, loadFileList]);
+  }, [loadFileList]);
 
   return (
     <Box
diff --git a/frontend/src/hooks/useFileOperations.js b/frontend/src/hooks/useFileOperations.js
index 1e8fd3d..a76b5b4 100644
--- a/frontend/src/hooks/useFileOperations.js
+++ b/frontend/src/hooks/useFileOperations.js
@@ -1,67 +1,101 @@
 import { useCallback } from 'react';
 import { notifications } from '@mantine/notifications';
 import { saveFileContent, deleteFile } from '../services/api';
+import { useSettings } from '../contexts/SettingsContext';
+import { useGitOperations } from './useGitOperations';
 
 export const useFileOperations = () => {
-  const handleSave = useCallback(async (filePath, content) => {
-    try {
-      await saveFileContent(filePath, content);
-      notifications.show({
-        title: 'Success',
-        message: 'File saved successfully',
-        color: 'green',
-      });
-      return true;
-    } catch (error) {
-      console.error('Error saving file:', error);
-      notifications.show({
-        title: 'Error',
-        message: 'Failed to save file',
-        color: 'red',
-      });
-      return false;
-    }
-  }, []);
+  const { settings } = useSettings();
+  const { handleCommitAndPush } = useGitOperations(settings.gitEnabled);
 
-  const handleDelete = useCallback(async (filePath) => {
-    try {
-      await deleteFile(filePath);
-      notifications.show({
-        title: 'Success',
-        message: 'File deleted successfully',
-        color: 'green',
-      });
-      return true;
-    } catch (error) {
-      console.error('Error deleting file:', error);
-      notifications.show({
-        title: 'Error',
-        message: 'Failed to delete file',
-        color: 'red',
-      });
-      return false;
-    }
-  }, []);
+  const autoCommit = useCallback(
+    async (filePath, action) => {
+      if (settings.gitAutoCommit && settings.gitEnabled) {
+        let commitMessage = settings.gitCommitMsgTemplate
+          .replace('${filename}', filePath)
+          .replace('${action}', action);
 
-  const handleCreate = useCallback(async (fileName, initialContent = '') => {
-    try {
-      await saveFileContent(fileName, initialContent);
-      notifications.show({
-        title: 'Success',
-        message: 'File created successfully',
-        color: 'green',
-      });
-      return true;
-    } catch (error) {
-      console.error('Error creating new file:', error);
-      notifications.show({
-        title: 'Error',
-        message: 'Failed to create new file',
-        color: 'red',
-      });
-      return false;
-    }
-  }, []);
+        // Capitalize the first letter of the commit message
+        commitMessage =
+          commitMessage.charAt(0).toUpperCase() + commitMessage.slice(1);
+
+        await handleCommitAndPush(commitMessage);
+      }
+    },
+    [settings, handleCommitAndPush]
+  );
+
+  const handleSave = useCallback(
+    async (filePath, content) => {
+      try {
+        await saveFileContent(filePath, content);
+        notifications.show({
+          title: 'Success',
+          message: 'File saved successfully',
+          color: 'green',
+        });
+        autoCommit(filePath, 'update');
+        return true;
+      } catch (error) {
+        console.error('Error saving file:', error);
+        notifications.show({
+          title: 'Error',
+          message: 'Failed to save file',
+          color: 'red',
+        });
+        return false;
+      }
+    },
+    [autoCommit]
+  );
+
+  const handleDelete = useCallback(
+    async (filePath) => {
+      try {
+        await deleteFile(filePath);
+        notifications.show({
+          title: 'Success',
+          message: 'File deleted successfully',
+          color: 'green',
+        });
+        autoCommit(filePath, 'delete');
+        return true;
+      } catch (error) {
+        console.error('Error deleting file:', error);
+        notifications.show({
+          title: 'Error',
+          message: 'Failed to delete file',
+          color: 'red',
+        });
+        return false;
+      }
+    },
+    [autoCommit]
+  );
+
+  const handleCreate = useCallback(
+    async (fileName, initialContent = '') => {
+      try {
+        await saveFileContent(fileName, initialContent);
+        notifications.show({
+          title: 'Success',
+          message: 'File created successfully',
+          color: 'green',
+        });
+        autoCommit(fileName, 'create');
+        return true;
+      } catch (error) {
+        console.error('Error creating new file:', error);
+        notifications.show({
+          title: 'Error',
+          message: 'Failed to create new file',
+          color: 'red',
+        });
+        return false;
+      }
+    },
+    [autoCommit]
+  );
 
   return { handleSave, handleDelete, handleCreate };
 };
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index 6b7f0a4..c4971b0 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -34,7 +34,7 @@ export const DEFAULT_SETTINGS = {
   gitUser: '',
   gitToken: '',
   gitAutoCommit: false,
-  gitCommitMsgTemplate: 'Update ${filename}',
+  gitCommitMsgTemplate: '${action} ${filename}',
 };
 
 export const DEFAULT_FILE = {