diff --git a/src/App.tsx b/src/App.tsx
index 9c235a3..3b2a8e9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,14 @@ import { FileText, Box, Plus } from 'lucide-react';
 import { ApiDocViewer } from './components/ApiDocViewer';
 import BlueprintPage from './components/blueprint/BlueprintPage';
 import { config } from './config';
+import type { DocFile } from '@/lib/types';
+
+interface ExternalDoc {
+  name: string
+  path: string
+  relativePath: string
+  content: string
+}
 
 const _origLog = console.log;
 const _origError = console.error;
@@ -27,6 +35,12 @@ function App() {
   const [currentPage, setCurrentPage] = useState<Page>('docs');
   const [docsPath, setDocsPath] = useState<string>('');
   const [showAddModal, setShowAddModal] = useState(false);
+
+  // Docs state lifted from ApiDocViewer to persist across view changes
+  const [externalDocs, setExternalDocs] = useState<ExternalDoc[]>([]);
+  const [fileTree, setFileTree] = useState<DocFile[]>([]);
+  const [selectedPath, setSelectedPath] = useState<string | undefined>(undefined);
+  const [currentContent, setCurrentContent] = useState<string>('');
   
   useEffect(() => {
     document.title = config.projectName;
@@ -74,10 +88,18 @@ function App() {
       </header>
       <main className="flex-1 overflow-hidden">
         {currentPage === 'docs' ? (
-          <ApiDocViewer 
+          <ApiDocViewer
             onDocsPathChange={setDocsPath}
             showAddModal={showAddModal}
             onCloseAddModal={() => setShowAddModal(false)}
+            externalDocs={externalDocs}
+            setExternalDocs={setExternalDocs}
+            fileTree={fileTree}
+            setFileTree={setFileTree}
+            selectedPath={selectedPath}
+            setSelectedPath={setSelectedPath}
+            currentContent={currentContent}
+            setCurrentContent={setCurrentContent}
           />
         ) : (
           <BlueprintPage docsPath={docsPath} />
diff --git a/src/components/ApiDocViewer.tsx b/src/components/ApiDocViewer.tsx
index efc1c5f..63ebc77 100644
--- a/src/components/ApiDocViewer.tsx
+++ b/src/components/ApiDocViewer.tsx
@@ -16,6 +16,14 @@ interface ApiDocViewerProps {
   onDocsPathChange?: (path: string) => void;
   showAddModal?: boolean;
   onCloseAddModal?: () => void;
+  externalDocs: ExternalDoc[];
+  setExternalDocs: React.Dispatch<React.SetStateAction<ExternalDoc[]>>;
+  fileTree: DocFile[];
+  setFileTree: React.Dispatch<React.SetStateAction<DocFile[]>>;
+  selectedPath: string | undefined;
+  setSelectedPath: React.Dispatch<React.SetStateAction<string | undefined>>;
+  currentContent: string;
+  setCurrentContent: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const STORAGE_KEY = 'xc-docs-config';
@@ -36,14 +44,22 @@ function saveStoredConfig(docsPath: string, externalDocs: ExternalDoc[], selecte
   } catch {}
 }
 
-export const ApiDocViewer = ({ onDocsPathChange, showAddModal, onCloseAddModal }: ApiDocViewerProps) => {
+export const ApiDocViewer = ({
+  onDocsPathChange,
+  showAddModal,
+  onCloseAddModal,
+  externalDocs,
+  setExternalDocs,
+  fileTree,
+  setFileTree,
+  selectedPath,
+  setSelectedPath,
+  currentContent,
+  setCurrentContent
+}: ApiDocViewerProps) => {
   const stored = loadStoredConfig();
-  const [fileTree, setFileTree] = useState<DocFile[]>([])
-  const [selectedPath, setSelectedPath] = useState<string | undefined>(stored.selectedPath)
-  const [currentContent, setCurrentContent] = useState<string>('')
   const [showModal, setShowModal] = useState(false)
   const [docsPath, setDocsPath] = useState(stored.docsPath)
-  const [externalDocs, setExternalDocs] = useState<ExternalDoc[]>(stored.externalDocs)
   const [isLoading, setIsLoading] = useState(false)
   const [errorMsg, setErrorMsg] = useState<string | null>(null)
 
@@ -54,6 +70,7 @@ export const ApiDocViewer = ({ onDocsPathChange, showAddModal, onCloseAddModal }
     }
   }, [showAddModal])
 
+  // Auto-select first document when externalDocs and fileTree are loaded
   useEffect(() => {
     if (externalDocs.length > 0 && fileTree.length > 0 && !selectedPath) {
       const fileList = externalDocs
@@ -65,17 +82,17 @@ export const ApiDocViewer = ({ onDocsPathChange, showAddModal, onCloseAddModal }
           return filename !== parentFolder
         })
         .map(d => d.relativePath)
-      
+
       const targetPath = stored.selectedPath && externalDocs.find(d => d.relativePath === stored.selectedPath)
         ? stored.selectedPath
         : fileList[0]
-      
+
       if (targetPath) {
         setSelectedPath(targetPath)
         setCurrentContent(externalDocs.find(d => d.relativePath === targetPath)?.content || '')
       }
     }
-  }, [externalDocs, fileTree, selectedPath])
+  }, [externalDocs, fileTree, selectedPath, stored.selectedPath, setSelectedPath, setCurrentContent])
 
   useEffect(() => {
     if (docsPath && externalDocs.length > 0) {