diff --git a/app/src/components/layout/Header.jsx b/app/src/components/layout/Header.tsx
similarity index 94%
rename from app/src/components/layout/Header.jsx
rename to app/src/components/layout/Header.tsx
index 95fa001..8a73724 100644
--- a/app/src/components/layout/Header.jsx
+++ b/app/src/components/layout/Header.tsx
@@ -4,7 +4,7 @@ import UserMenu from '../navigation/UserMenu';
 import WorkspaceSwitcher from '../navigation/WorkspaceSwitcher';
 import WorkspaceSettings from '../settings/workspace/WorkspaceSettings';
 
-const Header = () => {
+const Header: React.FC = () => {
   return (
     <Group justify="space-between" h={60} px="md">
       <Text fw={700} size="lg">
diff --git a/app/src/components/layout/Layout.jsx b/app/src/components/layout/Layout.tsx
similarity index 98%
rename from app/src/components/layout/Layout.jsx
rename to app/src/components/layout/Layout.tsx
index 1b5094f..1e76d13 100644
--- a/app/src/components/layout/Layout.jsx
+++ b/app/src/components/layout/Layout.tsx
@@ -7,7 +7,7 @@ import { useFileNavigation } from '../../hooks/useFileNavigation';
 import { useFileList } from '../../hooks/useFileList';
 import { useWorkspace } from '../../contexts/WorkspaceContext';
 
-const Layout = () => {
+const Layout: React.FC = () => {
   const { currentWorkspace, loading: workspaceLoading } = useWorkspace();
   const { selectedFile, handleFileSelect } = useFileNavigation();
   const { files, loadFileList } = useFileList();
diff --git a/app/src/components/layout/MainContent.jsx b/app/src/components/layout/MainContent.tsx
similarity index 76%
rename from app/src/components/layout/MainContent.jsx
rename to app/src/components/layout/MainContent.tsx
index fe6d760..a9366ae 100644
--- a/app/src/components/layout/MainContent.jsx
+++ b/app/src/components/layout/MainContent.tsx
@@ -10,11 +10,21 @@ import CommitMessageModal from '../modals/git/CommitMessageModal';
 import { useFileContent } from '../../hooks/useFileContent';
 import { useFileOperations } from '../../hooks/useFileOperations';
 import { useGitOperations } from '../../hooks/useGitOperations';
-import { useWorkspace } from '../../contexts/WorkspaceContext';
 
-const MainContent = ({ selectedFile, handleFileSelect, loadFileList }) => {
-  const [activeTab, setActiveTab] = useState('source');
-  const { settings } = useWorkspace();
+type ViewTab = 'source' | 'preview';
+
+interface MainContentProps {
+  selectedFile: string | null;
+  handleFileSelect: (filePath: string | null) => Promise<void>;
+  loadFileList: () => Promise<void>;
+}
+
+const MainContent: React.FC<MainContentProps> = ({
+  selectedFile,
+  handleFileSelect,
+  loadFileList,
+}) => {
+  const [activeTab, setActiveTab] = useState<ViewTab>('source');
   const {
     content,
     hasUnsavedChanges,
@@ -22,15 +32,17 @@ const MainContent = ({ selectedFile, handleFileSelect, loadFileList }) => {
     handleContentChange,
   } = useFileContent(selectedFile);
   const { handleSave, handleCreate, handleDelete } = useFileOperations();
-  const { handleCommitAndPush } = useGitOperations(settings.gitEnabled);
+  const { handleCommitAndPush } = useGitOperations();
 
-  const handleTabChange = useCallback((value) => {
-    setActiveTab(value);
+  const handleTabChange = useCallback((value: string | null): void => {
+    if (value) {
+      setActiveTab(value as ViewTab);
+    }
   }, []);
 
   const handleSaveFile = useCallback(
-    async (filePath, content) => {
-      let success = await handleSave(filePath, content);
+    async (filePath: string, fileContent: string): Promise<boolean> => {
+      let success = await handleSave(filePath, fileContent);
       if (success) {
         setHasUnsavedChanges(false);
       }
@@ -40,22 +52,22 @@ const MainContent = ({ selectedFile, handleFileSelect, loadFileList }) => {
   );
 
   const handleCreateFile = useCallback(
-    async (fileName) => {
+    async (fileName: string): Promise<void> => {
       const success = await handleCreate(fileName);
       if (success) {
-        loadFileList();
-        handleFileSelect(fileName);
+        await loadFileList();
+        await handleFileSelect(fileName);
       }
     },
     [handleCreate, handleFileSelect, loadFileList]
   );
 
   const handleDeleteFile = useCallback(
-    async (filePath) => {
+    async (filePath: string): Promise<void> => {
       const success = await handleDelete(filePath);
       if (success) {
-        loadFileList();
-        handleFileSelect(null);
+        await loadFileList();
+        await handleFileSelect(null);
       }
     },
     [handleDelete, handleFileSelect, loadFileList]
diff --git a/app/src/components/layout/Sidebar.jsx b/app/src/components/layout/Sidebar.tsx
similarity index 66%
rename from app/src/components/layout/Sidebar.jsx
rename to app/src/components/layout/Sidebar.tsx
index 4de51fa..cada4d4 100644
--- a/app/src/components/layout/Sidebar.jsx
+++ b/app/src/components/layout/Sidebar.tsx
@@ -4,10 +4,23 @@ import FileActions from '../files/FileActions';
 import FileTree from '../files/FileTree';
 import { useGitOperations } from '../../hooks/useGitOperations';
 import { useWorkspace } from '../../contexts/WorkspaceContext';
+import { FileNode } from '@/types/fileApi';
 
-const Sidebar = ({ selectedFile, handleFileSelect, files, loadFileList }) => {
+interface SidebarProps {
+  selectedFile: string | null;
+  handleFileSelect: (filePath: string | null) => Promise<void>;
+  files: FileNode[];
+  loadFileList: () => Promise<void>;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({
+  selectedFile,
+  handleFileSelect,
+  files,
+  loadFileList,
+}) => {
   const { settings } = useWorkspace();
-  const { handlePull } = useGitOperations(settings.gitEnabled);
+  const { handlePull } = useGitOperations();
 
   useEffect(() => {
     loadFileList();
@@ -28,7 +41,7 @@ const Sidebar = ({ selectedFile, handleFileSelect, files, loadFileList }) => {
       <FileTree
         files={files}
         handleFileSelect={handleFileSelect}
-        showHiddenFiles={settings.showHiddenFiles}
+        showHiddenFiles={settings.showHiddenFiles || false}
       />
     </Box>
   );
diff --git a/app/src/hooks/useGitOperations.ts b/app/src/hooks/useGitOperations.ts
index 426c3f7..d2abee0 100644
--- a/app/src/hooks/useGitOperations.ts
+++ b/app/src/hooks/useGitOperations.ts
@@ -5,7 +5,7 @@ import { useWorkspace } from '../contexts/WorkspaceContext';
 
 interface UseGitOperationsResult {
   handlePull: () => Promise<boolean>;
-  handleCommitAndPush: (message: string) => Promise<boolean>;
+  handleCommitAndPush: (message: string) => Promise<void>;
 }
 
 export const useGitOperations = (): UseGitOperationsResult => {
@@ -34,8 +34,8 @@ export const useGitOperations = (): UseGitOperationsResult => {
   }, [currentWorkspace, settings.gitEnabled]);
 
   const handleCommitAndPush = useCallback(
-    async (message: string): Promise<boolean> => {
-      if (!currentWorkspace || !settings.gitEnabled) return false;
+    async (message: string): Promise<void> => {
+      if (!currentWorkspace || !settings.gitEnabled) return;
 
       try {
         const commitHash: CommitHash = await commitAndPush(
@@ -47,7 +47,7 @@ export const useGitOperations = (): UseGitOperationsResult => {
           message: 'Successfully committed and pushed changes',
           color: 'green',
         });
-        return true;
+        return;
       } catch (error) {
         console.error('Failed to commit and push changes:', error);
         notifications.show({
@@ -55,7 +55,7 @@ export const useGitOperations = (): UseGitOperationsResult => {
           message: 'Failed to commit and push changes',
           color: 'red',
         });
-        return false;
+        return;
       }
     },
     [currentWorkspace, settings.gitEnabled]