diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 8a67ee1ba..3ff6446bb 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,7 +1,8 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { RainbowThemeProvider } from './components/shared/RainbowThemeProvider';
 import HomePage from './pages/HomePage';
 import { useOpenedFile } from './hooks/useOpenedFile';
+import { useBackendInitializer } from './hooks/useBackendInitializer';
 
 // Import global styles
 import './styles/tailwind.css';
@@ -11,27 +12,9 @@ import { BackendHealthIndicator } from './components/BackendHealthIndicator';
 
 export default function App() {
   const { openedFilePath, loading: fileLoading } = useOpenedFile();
-  useEffect(() => {
-    // Only start backend if running in Tauri
-    const initializeBackend = async () => {
-      try {
-        // Check if we're running in Tauri environment
-        if (typeof window !== 'undefined' && (window.__TAURI__ || window.__TAURI_INTERNALS__)) {
-          const { tauriBackendService } = await import('./services/tauriBackendService');
-          console.log('Running in Tauri - Starting backend on React app startup...');
-          await tauriBackendService.startBackend();
-          console.log('Backend started successfully');
-        }
-        else {
-          console.warn('Not running in Tauri - Backend will not be started');
-        } 
-      } catch (error) {
-        console.error('Failed to start backend on app startup:', error);
-      }
-    };
-
-    initializeBackend();
-  }, []);
+  
+  // Initialize backend on app startup
+  useBackendInitializer();
   return (
     <div className="min-h-screen bg-gray-100">
       <div className="bg-white shadow-sm border-b relative">
diff --git a/frontend/src/hooks/useBackendInitializer.ts b/frontend/src/hooks/useBackendInitializer.ts
new file mode 100644
index 000000000..52dd58738
--- /dev/null
+++ b/frontend/src/hooks/useBackendInitializer.ts
@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+
+/**
+ * Custom hook to handle backend initialization in Tauri environment
+ * Automatically starts the backend when the app loads if running in Tauri
+ */
+export function useBackendInitializer() {
+  useEffect(() => {
+    // Only start backend if running in Tauri
+    const initializeBackend = async () => {
+      try {
+        // Check if we're running in Tauri environment
+        if (typeof window !== 'undefined' && (window.__TAURI__ || window.__TAURI_INTERNALS__)) {
+          const { tauriBackendService } = await import('../services/tauriBackendService');
+          console.log('Running in Tauri - Starting backend on React app startup...');
+          await tauriBackendService.startBackend();
+          console.log('Backend started successfully');
+        }
+        else {
+          console.warn('Not running in Tauri - Backend will not be started');
+        } 
+      } catch (error) {
+        console.error('Failed to start backend on app startup:', error);
+      }
+    };
+
+    initializeBackend();
+  }, []);
+}
\ No newline at end of file