diff --git a/package.json b/package.json
index 11e1908..bce8ceb 100644
--- a/package.json
+++ b/package.json
@@ -91,44 +91,37 @@
     ]
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@monaco-editor/react": "^4.7.0",
     "@unified-latex/unified-latex-util-parse": "^1.8.3",
     "@unified-latex/unified-latex-util-to-string": "^1.8.3",
     "adm-zip": "^0.5.16",
     "axios": "^1.12.2",
     "cors": "^2.8.5",
     "dotenv": "^17.2.3",
-    "driver.js": "^1.4.0",
     "express": "^5.1.0",
     "fs-extra": "^11.3.2",
     "multer": "^2.0.2",
     "nodemon": "^3.1.10",
-    "pdf-parse": "^2.4.5",
-    "pdfjs-dist": "^5.4.296",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^5.5.0",
-    "react-pdf": "^10.3.0",
-    "react-quill-new": "^3.6.0",
-    "react-router-dom": "^7.9.2",
     "sharp": "^0.34.4",
     "slate": "^0.124.0",
     "slate-react": "^0.124.0",
     "tar": "^7.5.11",
     "uuid": "^13.0.0",
-    "y-indexeddb": "^9.0.12",
-    "y-monaco": "^0.1.6",
-    "y-websocket": "^3.0.0",
-    "yjs": "^13.6.29"
+    "pdf-parse": "^2.4.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^4.4.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.9.2",
+    "y-indexeddb": "^9.0.12",
+    "y-websocket": "^3.0.0",
+    "yjs": "^13.6.29",
     "autoprefixer": "^10.4.16",
     "concurrently": "^9.2.1",
     "cross-env": "^10.1.0",
@@ -142,6 +135,13 @@
     "tailwindcss": "^3.4.3",
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.5.0",
-    "wait-on": "^9.0.3"
+    "wait-on": "^9.0.3",
+    "react-icons": "^5.5.0",
+    "@monaco-editor/react": "^4.7.0",
+    "pdfjs-dist": "^5.4.296",
+    "react-pdf": "^10.3.0",
+    "driver.js": "^1.4.0",
+    "react-quill-new": "^3.6.0",
+    "y-monaco": "^0.1.6"
   }
 }
diff --git a/server.js b/server.js
index d3f3a3d..a098c6a 100644
--- a/server.js
+++ b/server.js
@@ -51,7 +51,7 @@ function decrypt(text) {
 
 const execAsync = util.promisify(exec);
 const app = express();
-const PORT = process.env.PORT || 5000;
+const PORT = 5000;
 const AI_SERVICE_URL = "http://localhost:5025";
 
 // Middleware
@@ -1499,7 +1499,9 @@ app.get("/api/projects/:id/export-zip", async (req, res) => {
         .json({ success: false, error: "Project not found" });
     }
 
-    const projectData = await fs.readJSON(path.join(projectDir, "project.json"));
+    const projectData = await fs.readJSON(
+      path.join(projectDir, "project.json"),
+    );
     const zip = new AdmZip();
 
     // Add files to ZIP from project.json list
diff --git a/src/components/pdfViewer.jsx b/src/components/pdfViewer.jsx
index b931e43..80955bf 100644
--- a/src/components/pdfViewer.jsx
+++ b/src/components/pdfViewer.jsx
@@ -1,649 +1,3 @@
-// import React, { useState, useRef, useEffect, useCallback } from "react";
-// import { Document, Page, pdfjs } from "react-pdf";
-// import SyncIcon from "../assets/icons/syncIcon.svg?react";
-// import DownloadIcon from "../assets/icons/download.svg?react";
-// import axios from "axios";
-// import "react-pdf/dist/Page/TextLayer.css";
-// import "react-pdf/dist/Page/AnnotationLayer.css";
-// import "../assets/styles/pdfViewer.css";
-// import { useSettings } from "../context/useSettings";
-
-// // pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.js";
-// pdfjs.GlobalWorkerOptions.workerSrc = "./pdf.worker.min.js";
-
-// const PdfViewer = ({
-//   pdfUrl,
-//   pdfFileName,
-//   onLineJump,
-//   onCompile,
-//   fileTitle,
-//   onShowLogs,
-//   projectDetails,
-//   loading,
-// }) => {
-//   const [numPages, setNumPages] = useState(null);
-//   const [scale, setScale] = useState(1);
-//   const [pageNumber, setPageNumber] = useState(1);
-//   const [scrollTop, setScrollTop] = useState(0);
-//   const [viewportHeight, setViewportHeight] = useState(800);
-//   const [zoomDropdownOpen, setZoomDropdownOpen] = useState(false);
-//   const [isEditingPage, setIsEditingPage] = useState(false);
-//   const [pageInputValue, setPageInputValue] = useState("");
-//   const [isFitMode, setIsFitMode] = useState(false);
-//   const [pdfPageWidth, setPdfPageWidth] = useState(595); // A4 default in PDF points
-//   const viewportRef = useRef(null);
-//   const pageRefs = useRef([]);
-//   const zoomDropdownRef = useRef(null);
-//   const pageInputRef = useRef(null);
-//   const savedPageRef = useRef(1); // Persist page across recompilations
-//   const { settings } = useSettings();
-
-//   // Keep ref in sync with pageNumber state
-//   useEffect(() => {
-//     savedPageRef.current = pageNumber;
-//   }, [pageNumber]);
-
-//   // Standard A4 aspect ratio height at 1x scale (96dpi approximate)
-//   // We'll adjust this once the first page loads if possible, but 842 is a safe LaTeX default.
-//   const ESTIMATED_PAGE_HEIGHT = 842;
-//   const GAP = 16; // gap-4 in tailwind is 16px
-//   const itemHeight = ESTIMATED_PAGE_HEIGHT * scale + GAP;
-
-//   const getPdfFileName = () => {
-//     // Use the pdfFileName prop if available (from server compile response)
-//     // This is the correct filename like "{projectId}.pdf"
-//     if (pdfFileName) return pdfFileName;
-//     if (!pdfUrl) return null;
-//     return pdfUrl.split("/").pop();
-//   };
-
-//   const zoomIn = () => {
-//     setIsFitMode(false);
-//     setScale((s) => Math.min(4, s + 0.2));
-//   };
-//   const zoomOut = () => {
-//     setIsFitMode(false);
-//     setScale((s) => Math.max(0.5, s - 0.2));
-//   };
-//   const setZoomPreset = (pct) => {
-//     setIsFitMode(false);
-//     setScale(pct / 100);
-//     setZoomDropdownOpen(false);
-//   };
-//   const nextPage = () => setPageNumber((p) => Math.min(numPages, p + 1));
-//   const prevPage = () => setPageNumber((p) => Math.max(1, p - 1));
-
-//   const zoomToFit = useCallback(() => {
-//     if (!viewportRef.current) return;
-//     const containerWidth = viewportRef.current.clientWidth - 32; // 16px padding each side
-//     const fitScale = Math.round((containerWidth / pdfPageWidth) * 100) / 100;
-//     const clamped = Math.max(0.5, Math.min(4, fitScale));
-//     setIsFitMode(true);
-//     setZoomDropdownOpen(false);
-//     // Use rAF to batch the scale update and avoid layout thrashing
-//     requestAnimationFrame(() => setScale(clamped));
-//   }, [pdfPageWidth]);
-
-//   // Zoom-to-fit label for the dropdown button
-//   const zoomLabel = isFitMode ? "Zoom to fit" : `${Math.round(scale * 100)}%`;
-
-//   const ZOOM_PRESETS = [50, 75, 100, 150, 200, 300, 400];
-
-//   const handlePageClick = async (event, pageIndex) => {
-//     if (!pdfUrl || !onLineJump) return;
-
-//     // Use pdfFileName prop (from server compile response) which contains the correct
-//     // project ID-based filename. Fallback to extracting from pdfUrl for backwards compatibility.
-//     const fileName = pdfFileName || pdfUrl.split("/").pop();
-
-//     if (!fileName) {
-//       console.error("SyncTeX: No filename available");
-//       return;
-//     }
-
-//     const pageNum = pageIndex + 1;
-//     const bounds = event.currentTarget.getBoundingClientRect();
-//     const x = (event.clientX - bounds.left) / scale;
-//     const y = (event.clientY - bounds.top) / scale;
-
-//     try {
-//       console.log(`🔎 SyncTeX lookup for: ${fileName}`);
-//       const response = await axios.post("http://localhost:5000/api/synctex", {
-//         pdfFile: fileName,
-//         page: pageNum,
-//         x: x,
-//         y: y,
-//       });
-
-//       if (response.data.success) {
-//         console.log("📍 SyncTeX Jump to Line:", response.data.line);
-//         onLineJump(response.data.line);
-//       }
-//     } catch (error) {
-//       console.error("SyncTeX failed:", error);
-//     }
-//   };
-
-//   function onDocumentLoadSuccess({ numPages: loadedNumPages }) {
-//     setNumPages(loadedNumPages);
-//     // Restore page position after recompilation
-//     const targetPage = Math.min(savedPageRef.current, loadedNumPages);
-//     if (targetPage > 1) {
-//       // Delay slightly to let the document render first
-//       setTimeout(() => setPageNumber(targetPage), 100);
-//     }
-//   }
-
-//   // Track intrinsic page width for zoom-to-fit calculation
-//   const handlePageLoadSuccess = (page) => {
-//     if (page.width && page.width !== pdfPageWidth) {
-//       setPdfPageWidth(page.width);
-//     }
-//   };
-
-//   // --- Page number input handlers ---
-//   const startEditingPage = () => {
-//     setIsEditingPage(true);
-//     setPageInputValue(String(pageNumber));
-//     setTimeout(() => pageInputRef.current?.select(), 0);
-//   };
-
-//   const commitPageInput = () => {
-//     const val = parseInt(pageInputValue, 10);
-//     if (isNaN(val) || val < 1) {
-//       setPageNumber(1);
-//     } else if (val > numPages) {
-//       setPageNumber(numPages);
-//     } else {
-//       setPageNumber(val);
-//     }
-//     setIsEditingPage(false);
-//   };
-
-//   const handlePageInputKeyDown = (e) => {
-//     if (e.key === "Enter") {
-//       commitPageInput();
-//     } else if (e.key === "Escape") {
-//       setIsEditingPage(false);
-//     }
-//   };
-
-//   const handleExportPDF = async () => {
-//     if (!pdfUrl) {
-//       alert("Please compile your document first to generate a PDF");
-//       return;
-//     }
-
-//     try {
-//       const response = await fetch(pdfUrl);
-//       const blob = await response.blob();
-//       const defaultName = `${fileTitle || "document"}.pdf`;
-
-//       // Check if we are running inside the Electron Desktop App
-//       const isElectron =
-//         window.electronAPI && typeof window.electronAPI.savePDF === "function";
-
-//       if (isElectron) {
-//         const arrayBuffer = await blob.arrayBuffer();
-//         const result = await window.electronAPI.savePDF(
-//           arrayBuffer,
-//           defaultName,
-//         );
-
-//         if (result.success) {
-//           console.log("PDF saved successfully to:", result.filePath);
-//         } else if (!result.canceled) {
-//           throw new Error(result.error || "Unknown Electron save error");
-//         }
-//       } else {
-//         // For Web Browser - Create a local URL for the Blob
-//         const downloadUrl = window.URL.createObjectURL(blob);
-//         const link = document.createElement("a");
-
-//         link.href = downloadUrl;
-//         link.download = defaultName;
-
-//         // Append to body to ensure compatibility with all browsers
-//         document.body.appendChild(link);
-//         link.click();
-
-//         // Cleanup: Remove element and revoke URL to prevent memory leaks
-//         document.body.removeChild(link);
-//         window.URL.revokeObjectURL(downloadUrl);
-
-//         console.log("PDF download triggered via Browser");
-//       }
-//     } catch (error) {
-//       console.error("Error during PDF export:", error);
-//       alert(`An error occurred during PDF export: ${error.message}`);
-//     }
-//   };
-
-//   useEffect(() => {
-//     let rafId = null;
-//     const updateHeight = () => {
-//       if (rafId) cancelAnimationFrame(rafId);
-//       rafId = requestAnimationFrame(() => {
-//         if (viewportRef.current) {
-//           setViewportHeight(viewportRef.current.clientHeight);
-//           // Re-fit on window resize if in fit mode
-//           if (isFitMode) {
-//             const containerWidth = viewportRef.current.clientWidth - 32;
-//             const fitScale =
-//               Math.round((containerWidth / pdfPageWidth) * 100) / 100;
-//             setScale(Math.max(0.5, Math.min(4, fitScale)));
-//           }
-//         }
-//       });
-//     };
-//     updateHeight();
-//     window.addEventListener("resize", updateHeight);
-//     return () => {
-//       window.removeEventListener("resize", updateHeight);
-//       if (rafId) cancelAnimationFrame(rafId);
-//     };
-//   }, [isFitMode, pdfPageWidth]);
-
-//   // Close dropdown on outside click
-//   useEffect(() => {
-//     const handleClickOutside = (e) => {
-//       if (
-//         zoomDropdownRef.current &&
-//         !zoomDropdownRef.current.contains(e.target)
-//       ) {
-//         setZoomDropdownOpen(false);
-//       }
-//     };
-//     if (zoomDropdownOpen) {
-//       document.addEventListener("mousedown", handleClickOutside);
-//     }
-//     return () => document.removeEventListener("mousedown", handleClickOutside);
-//   }, [zoomDropdownOpen]);
-
-//   // Ctrl+0 shortcut for Zoom to fit
-//   useEffect(() => {
-//     const handleKeyDown = (e) => {
-//       if ((e.ctrlKey || e.metaKey) && e.key === "0") {
-//         e.preventDefault();
-//         zoomToFit();
-//       }
-//     };
-//     window.addEventListener("keydown", handleKeyDown);
-//     return () => window.removeEventListener("keydown", handleKeyDown);
-//   }, [zoomToFit]);
-
-//   const handleScroll = (e) => {
-//     const newScrollTop = e.target.scrollTop;
-//     setScrollTop(newScrollTop);
-
-//     // Update pageNumber based on current scroll position
-//     const currentPage = Math.round(newScrollTop / itemHeight) + 1;
-//     if (
-//       currentPage !== pageNumber &&
-//       currentPage >= 1 &&
-//       currentPage <= numPages
-//     ) {
-//       setPageNumber(currentPage);
-//     }
-//   };
-
-//   useEffect(() => {
-//     if (numPages && viewportRef.current) {
-//       const targetScrollTop = (pageNumber - 1) * itemHeight;
-//       // Only scroll if we are significantly off (prevents feedback loops)
-//       if (Math.abs(viewportRef.current.scrollTop - targetScrollTop) > 10) {
-//         viewportRef.current.scrollTo({
-//           top: targetScrollTop,
-//           behavior: "smooth",
-//         });
-//       }
-//     }
-//   }, [pageNumber, numPages, itemHeight]);
-
-//   // Calculate sliding window
-//   const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - 2);
-//   const endIndex = Math.min(
-//     (numPages || 0) - 1,
-//     Math.floor((scrollTop + viewportHeight) / itemHeight) + 2,
-//   );
-//   const visiblePages = numPages
-//     ? Array.from(
-//         { length: endIndex - startIndex + 1 },
-//         (_, i) => startIndex + i,
-//       )
-//     : [];
-
-//   return (
-//     <div className="flex flex-col h-full">
-//       {/* Toolbar - Compile button always visible, rest only when PDF exists */}
-//       <div
-//         className="flex items-center justify-between px-4 py-1 border-b font-poppins h-8"
-//         style={{
-//           background:
-//             settings.appearance.customThemes[settings.appearance.theme].primary,
-//           borderColor:
-//             settings.appearance.customThemes[settings.appearance.theme].border,
-//         }}
-//       >
-//         <div className="flex items-center">
-//           <button
-//             id="tour-compile"
-//             onClick={onCompile}
-//             className="flex border-2 px-2 rounded-sm py-[2px] cursor-pointer hover:bg-gray-50"
-//             style={{
-//               borderColor:
-//                 settings.appearance.customThemes[settings.appearance.theme]
-//                   .border,
-//             }}
-//           >
-//             {loading ? (
-//               <SyncIcon
-//                 style={{
-//                   fill: settings.appearance.customThemes[
-//                     settings.appearance.theme
-//                   ].icon1,
-//                 }}
-//                 className="mt-[1px] w-4 h-4 animate-spin"
-//               />
-//             ) : (
-//               <SyncIcon
-//                 style={{
-//                   fill: settings.appearance.customThemes[
-//                     settings.appearance.theme
-//                   ].icon1,
-//                 }}
-//                 className="mt-[1px] w-4 h-4"
-//               />
-//             )}
-//             <p
-//               className="px-2 font-poppins text-sm font-light"
-//               style={{
-//                 color:
-//                   settings.appearance.customThemes[settings.appearance.theme]
-//                     .text1,
-//               }}
-//             >
-//               Compile
-//             </p>
-//           </button>
-//           {projectDetails.compilationStatus === "error" ? (
-//             <p
-//               onClick={onShowLogs}
-//               className="font-poppins font-medium text-sm ml-3 cursor-pointer hover:underline text-red-600"
-//             >
-//               Logs
-//             </p>
-//           ) : (
-//             <p
-//               onClick={onShowLogs}
-//               className="font-poppins font-light text-sm ml-3 cursor-pointer"
-//               style={{
-//                 color:
-//                   settings.appearance.customThemes[settings.appearance.theme]
-//                     .text1,
-//               }}
-//             >
-//               Logs
-//             </p>
-//           )}
-//         </div>
-
-//         {/* Page navigation - only visible when PDF exists */}
-//         {pdfUrl && (
-//           <div
-//             className="flex items-center gap-2"
-//             style={{
-//               color:
-//                 settings.appearance.customThemes[settings.appearance.theme]
-//                   .text1,
-//             }}
-//           >
-//             <button
-//               onClick={prevPage}
-//               disabled={pageNumber <= 1}
-//               className="px-1 mt-1 text-xl rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-//             >
-//               &lt;
-//             </button>
-//             <span className="text-xs font-poppins font-light">
-//               {isEditingPage ? (
-//                 <input
-//                   ref={pageInputRef}
-//                   type="text"
-//                   value={pageInputValue}
-//                   onChange={(e) =>
-//                     setPageInputValue(e.target.value.replace(/[^0-9]/g, ""))
-//                   }
-//                   onKeyDown={handlePageInputKeyDown}
-//                   onBlur={commitPageInput}
-//                   className="w-8 text-center text-xs font-poppins font-light underline outline-none bg-transparent border-b"
-//                   style={{
-//                     color:
-//                       settings.appearance.customThemes[
-//                         settings.appearance.theme
-//                       ].text1,
-//                     borderColor:
-//                       settings.appearance.customThemes[
-//                         settings.appearance.theme
-//                       ].text1,
-//                   }}
-//                 />
-//               ) : (
-//                 <span
-//                   className="underline pr-2 cursor-pointer hover:opacity-70"
-//                   onClick={startEditingPage}
-//                   title="Click to jump to a page"
-//                 >
-//                   {String(pageNumber).padStart(2, "0")}
-//                 </span>
-//               )}{" "}
-//               <span className="italic">of</span> {numPages}
-//             </span>
-//             <button
-//               onClick={nextPage}
-//               disabled={pageNumber >= numPages}
-//               className="px-1 mt-1 text-xl rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
-//             >
-//               &gt;
-//             </button>
-//           </div>
-//         )}
-
-//         {/* Zoom dropdown and download - only visible when PDF exists */}
-//         {pdfUrl && (
-//           <div
-//             className="flex items-center gap-2"
-//             style={{
-//               color:
-//                 settings.appearance.customThemes[settings.appearance.theme]
-//                   .text1,
-//             }}
-//           >
-//             {/* Zoom Dropdown */}
-//             <div className="relative" ref={zoomDropdownRef}>
-//               <button
-//                 onClick={() => setZoomDropdownOpen((prev) => !prev)}
-//                 className="flex items-center gap-1 px-2 py-[2px] rounded hover:bg-gray-50 text-xs font-poppins font-light"
-//                 style={{
-//                   color:
-//                     settings.appearance.customThemes[settings.appearance.theme]
-//                       .text1,
-//                 }}
-//               >
-//                 {zoomLabel}
-//                 <svg
-//                   className={`w-3 h-3 transition-transform ${zoomDropdownOpen ? "rotate-180" : ""}`}
-//                   fill="currentColor"
-//                   viewBox="0 0 20 20"
-//                 >
-//                   <path
-//                     fillRule="evenodd"
-//                     d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-//                     clipRule="evenodd"
-//                   />
-//                 </svg>
-//               </button>
-
-//               {zoomDropdownOpen && (
-//                 <div
-//                   className="absolute right-0 top-full mt-1 w-52 rounded-lg shadow-lg border z-50 py-1 font-poppins text-sm"
-//                   style={{
-//                     background:
-//                       settings.appearance.customThemes[
-//                         settings.appearance.theme
-//                       ].primary,
-//                     borderColor:
-//                       settings.appearance.customThemes[
-//                         settings.appearance.theme
-//                       ].border,
-//                     color:
-//                       settings.appearance.customThemes[
-//                         settings.appearance.theme
-//                       ].text1,
-//                   }}
-//                 >
-//                   {/* Zoom to fit */}
-//                   <button
-//                     onClick={zoomToFit}
-//                     className={`w-full flex items-center justify-between px-4 py-2 hover:bg-gray-100 text-left ${
-//                       isFitMode ? "font-medium" : "font-light"
-//                     }`}
-//                   >
-//                     <span>Zoom to fit</span>
-//                     <span className="text-xs opacity-50">Ctrl+0</span>
-//                   </button>
-
-//                   {/* Zoom in */}
-//                   <button
-//                     onClick={() => {
-//                       zoomIn();
-//                     }}
-//                     className="w-full flex items-center justify-between px-4 py-2 hover:bg-gray-100 text-left font-light"
-//                   >
-//                     <span>Zoom in</span>
-//                     <span className="text-xs opacity-50">Ctrl+</span>
-//                   </button>
-
-//                   {/* Zoom out */}
-//                   <button
-//                     onClick={() => {
-//                       zoomOut();
-//                     }}
-//                     className="w-full flex items-center justify-between px-4 py-2 hover:bg-gray-100 text-left font-light"
-//                   >
-//                     <span>Zoom out</span>
-//                     <span className="text-xs opacity-50">Ctrl−</span>
-//                   </button>
-
-//                   {/* Divider */}
-//                   <div
-//                     className="my-1 border-t"
-//                     style={{
-//                       borderColor:
-//                         settings.appearance.customThemes[
-//                           settings.appearance.theme
-//                         ].border,
-//                     }}
-//                   />
-
-//                   {/* Preset percentages */}
-//                   {ZOOM_PRESETS.map((pct) => (
-//                     <button
-//                       key={pct}
-//                       onClick={() => setZoomPreset(pct)}
-//                       className={`w-full text-left px-4 py-2 hover:bg-gray-100 ${
-//                         !isFitMode && Math.round(scale * 100) === pct
-//                           ? "font-medium"
-//                           : "font-light"
-//                       }`}
-//                     >
-//                       {pct}%
-//                     </button>
-//                   ))}
-//                 </div>
-//               )}
-//             </div>
-
-//             {/* Download */}
-//             <button onClick={handleExportPDF}>
-//               <DownloadIcon
-//                 style={{
-//                   fill: settings.appearance.customThemes[
-//                     settings.appearance.theme
-//                   ].text2,
-//                 }}
-//                 className="mt-[1px] w-5 h-5 ml-3"
-//               />
-//             </button>
-//           </div>
-//         )}
-//       </div>
-//       {/* PDF Viewer */}
-//       <div
-//         ref={viewportRef}
-//         onScroll={handleScroll}
-//         className="flex-1 overflow-auto pb-4"
-//         style={{
-//           overflowX: "auto",
-//           overflowY: "auto",
-//           background:
-//             settings.appearance.customThemes[settings.appearance.theme]
-//               .background,
-//         }}
-//       >
-//         {pdfUrl ? (
-//           <div
-//             className="relative mx-auto"
-//             style={{
-//               height: `${(numPages || 0) * itemHeight}px`,
-//               width: "100%",
-//               maxWidth: "min-content",
-//             }}
-//           >
-//             <Document
-//               file={pdfUrl}
-//               onLoadSuccess={onDocumentLoadSuccess}
-//               loading={<div className="p-4">Loading PDF...</div>}
-//               error={
-//                 <div className="p-4 text-red-600">Failed to load PDF.</div>
-//               }
-//             >
-//               {visiblePages.map((index) => (
-//                 <div
-//                   key={index}
-//                   ref={(el) => (pageRefs.current[index] = el)}
-//                   onClick={(e) => handlePageClick(e, index)}
-//                   className="cursor-text absolute left-1/2 -translate-x-1/2"
-//                   style={{
-//                     top: `${index * itemHeight}px`,
-//                     height: `${ESTIMATED_PAGE_HEIGHT * scale}px`,
-//                   }}
-//                 >
-//                   <Page
-//                     pageNumber={index + 1}
-//                     scale={scale}
-//                     renderTextLayer
-//                     renderAnnotationLayer
-//                     className="shadow-lg border-2 border-gray-200 rounded-xl overflow-hidden"
-//                     onLoadSuccess={
-//                       index === 0 ? handlePageLoadSuccess : undefined
-//                     }
-//                   />
-//                 </div>
-//               ))}
-//             </Document>
-//           </div>
-//         ) : (
-//           <div className="flex items-center justify-center h-full text-gray-500">
-//             Compile the project to view the PDF file
-//           </div>
-//         )}
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default PdfViewer;
 import React, {
   useState,
   useRef,
@@ -1024,7 +378,7 @@ const PdfViewer = ({
               Compile
             </p>
           </button>
-          {projectDetails.compilationStatus === "error" ? (
+          {projectDetails?.compilationStatus === "error" ? (
             <p
               onClick={onShowLogs}
               className="font-poppins font-medium text-sm ml-3 cursor-pointer hover:underline text-red-600"
diff --git a/src/components/sideBar.jsx b/src/components/sideBar.jsx
index 6a325d0..e1cc0f7 100644
--- a/src/components/sideBar.jsx
+++ b/src/components/sideBar.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useRef, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import EasyMathInput from "./easyMathInput";
 import CitationManager from "./citationManager";
@@ -38,15 +38,38 @@ const DynamicSideBar = ({
   const [isVersionModalOpen, setIsVersionModalOpen] = useState(false);
   const [isProfileActive, setIsProfileActive] = useState(false);
   const [showAuthModal, setShowAuthModal] = useState(false);
-  const { projectDetails} = useContext(projectContext);
+  const { projectDetails } = useContext(projectContext);
   const { user, isServerConnected, isAuthenticated } = useAuth();
   const { settings } = useSettings();
+  const menuRefs = useRef({});
   const navigate = useNavigate();
 
   console.log("user", user);
   console.log("isServerConnected", isServerConnected);
   console.log("projectDetails", projectDetails);
 
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      const menuElement = menuRefs.current.file;
+
+      if (menuElement && document.body.contains(menuElement)) {
+        if (!menuElement.contains(event.target)) {
+          setIsMathModalOpen(false);
+          setIsCitationModalOpen(false);
+          setIsTableModalOpen(false);
+          setIsImageModalOpen(false);
+          setIsShareModalOpen(false);
+          setIsVersionModalOpen(false);
+          setIsProfileActive(false);
+          setShowAuthModal(false);
+        }
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
   const handleMathIconClick = (e) => {
     e.preventDefault();
     setIsMathModalOpen(true);
@@ -434,7 +457,10 @@ const DynamicSideBar = ({
                     </div>
                   </div>
                 ) : (
-                  <div className="absolute ml-14 z-50 bottom-4 h-10 w-40 bg-[#F9F9F9] border-[#CFCFCF] border-[1px]">
+                  <div
+                    className="absolute ml-14 z-50 bottom-4 h-10 w-40 bg-[#F9F9F9] border-[#CFCFCF] border-[1px]"
+                    ref={(el) => (menuRefs.current.file = el)}
+                  >
                     <div className="font-inter py-2">
                       <Link to="/signup">
                         <div className="flex flex-row justify-between">
diff --git a/src/components/statusBar.jsx b/src/components/statusBar.jsx
index 3547a2a..7ec516f 100644
--- a/src/components/statusBar.jsx
+++ b/src/components/statusBar.jsx
@@ -11,7 +11,7 @@ import { projectContext } from "../context/useProject";
 
 const StatusBar = () => {
   const { isServerConnected } = useAuth();
-  const { projectDetails } = useContext(projectContext);
+  const { projectDetails, updateProjectDetails } = useContext(projectContext);
   const { settings } = useSettings();
   const [progress, setProgress] = useState("");
   React.useEffect(() => {
@@ -73,6 +73,15 @@ const StatusBar = () => {
                   ].text3,
                 }}
                 className="w-4 h-4"
+                onClick={() => {
+                  // Fire Ctrl+P as a key event so editorPage picks it up
+                  const evt = new KeyboardEvent("keydown", {
+                    key: "p",
+                    ctrlKey: true,
+                    bubbles: true,
+                  });
+                  window.dispatchEvent(evt);
+                }}
               />
             )}
             <HelpIcon
diff --git a/src/components/templateCards.jsx b/src/components/templateCards.jsx
index ae04410..d276d43 100644
--- a/src/components/templateCards.jsx
+++ b/src/components/templateCards.jsx
@@ -159,6 +159,7 @@ const TemplateCards = ({ title, onDeleteClick }) => {
 
       {/* Card Visual */}
       <div
+        // className={`w-[13vw] h-[16.5vw] border-2 flex-shrink-0 rounded-md transition-colors ${
         className={`w-44 h-56 border-2 flex-shrink-0 rounded-md transition-colors ${
           isDark
             ? "bg-[#2d2d2d] border-[#404040] group-hover:border-[#ffffff]"
diff --git a/src/layout/pageLayout.jsx b/src/layout/pageLayout.jsx
index 8e3af62..48b38ca 100644
--- a/src/layout/pageLayout.jsx
+++ b/src/layout/pageLayout.jsx
@@ -13,10 +13,11 @@ const PageLayout = () => {
   const location = useLocation();
   const { projectDetails, updateProjectDetails } = useContext(projectContext);
   const isSectionSpaceOpen = projectDetails.isSectionSpaceOpen;
-  
+
   const setIsSectionSpaceOpen = (val) => {
     updateProjectDetails({
-      isSectionSpaceOpen: typeof val === "function" ? val(isSectionSpaceOpen) : val
+      isSectionSpaceOpen:
+        typeof val === "function" ? val(isSectionSpaceOpen) : val,
     });
   };
 
@@ -55,35 +56,45 @@ const PageLayout = () => {
     return () => window.removeEventListener("keydown", handleKey);
   }, []);
 
-  const handleStartSectionDrag = useCallback((e) => {
-    e.preventDefault();
-    isDraggingSection.current = true;
-    sectionDragStartX.current = e.clientX;
-    sectionDragStartWidth.current = sectionSpaceWidth;
-    document.body.style.cursor = "col-resize";
-    document.body.style.userSelect = "none";
-
-    const onMouseMove = (moveEvent) => {
-      if (!isDraggingSection.current) return;
-      const delta = moveEvent.clientX - sectionDragStartX.current;
-      const newWidth = Math.min(480, Math.max(160, sectionDragStartWidth.current + delta));
-      setSectionSpaceWidth(newWidth);
-    };
-
-    const onMouseUp = () => {
-      isDraggingSection.current = false;
-      document.body.style.cursor = "";
-      document.body.style.userSelect = "";
-      window.removeEventListener("mousemove", onMouseMove);
-      window.removeEventListener("mouseup", onMouseUp);
-    };
-
-    window.addEventListener("mousemove", onMouseMove);
-    window.addEventListener("mouseup", onMouseUp);
-  }, [sectionSpaceWidth]);
+  const handleStartSectionDrag = useCallback(
+    (e) => {
+      e.preventDefault();
+      isDraggingSection.current = true;
+      sectionDragStartX.current = e.clientX;
+      sectionDragStartWidth.current = sectionSpaceWidth;
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+
+      const onMouseMove = (moveEvent) => {
+        if (!isDraggingSection.current) return;
+        const delta = moveEvent.clientX - sectionDragStartX.current;
+        const newWidth = Math.min(
+          480,
+          Math.max(160, sectionDragStartWidth.current + delta),
+        );
+        setSectionSpaceWidth(newWidth);
+      };
+
+      const onMouseUp = () => {
+        isDraggingSection.current = false;
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        window.removeEventListener("mousemove", onMouseMove);
+        window.removeEventListener("mouseup", onMouseUp);
+      };
+
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", onMouseUp);
+    },
+    [sectionSpaceWidth],
+  );
 
-  const handleStartTour = () => { startTour(); };
-  const handleOpenAIChat = () => { setIsAIChatOpen(true); };
+  const handleStartTour = () => {
+    startTour();
+  };
+  const handleOpenAIChat = () => {
+    setIsAIChatOpen(true);
+  };
 
   return (
     <div
@@ -108,9 +119,14 @@ const PageLayout = () => {
         )}
 
         {/* Section Space panel with resize handle */}
-        {!isDistractionFree && isSectionSpaceOpen && (
-          <SectionSpace width={sectionSpaceWidth} onDragStart={handleStartSectionDrag} />
-        )}
+        {!isDistractionFree &&
+          isSectionSpaceOpen &&
+          projectDetails?.currentProject?.id && (
+            <SectionSpace
+              width={sectionSpaceWidth}
+              onDragStart={handleStartSectionDrag}
+            />
+          )}
 
         <div className="w-full h-auto">
           <Outlet
diff --git a/src/pages/User_Account/login.jsx b/src/pages/User_Account/login.jsx
index de594e1..a40a98e 100644
--- a/src/pages/User_Account/login.jsx
+++ b/src/pages/User_Account/login.jsx
@@ -46,11 +46,6 @@ function Login() {
     <div
       className={`h-[calc(100vh-2.75rem)] bg-[#eaeaea] relative overflow-hidden mt-11 flex flex-col transition-all duration-300 ${isSectionSpaceOpen ? "ml-96" : "ml-12"}`}
     >
-      <div className="absolute top-6 left-6 z-10">
-        <div className="text-[#0C2340] font-playfair text-2xl">
-          <p>Docière Pro</p>
-        </div>
-      </div>
       <div className="flex flex-col h-full">
         <div className="flex-1 flex items-center justify-center p-3">
           <div className="relative z-10 w-full max-w-sm">
@@ -312,9 +307,9 @@ function Login() {
         </div>
 
         {/* Fixed footer at bottom with minimal spacing */}
-        <div className="flex-shrink-0 py-3 text-center text-black/60 text-xs">
+        {/* <div className="flex-shrink-0 py-3 text-center text-black/60 text-xs">
           <p>© 2025 Dociere. All rights reserved.</p>
-        </div>
+        </div> */}
       </div>
     </div>
   );
diff --git a/src/pages/User_Account/signup.jsx b/src/pages/User_Account/signup.jsx
index 95745c3..17ca1dc 100644
--- a/src/pages/User_Account/signup.jsx
+++ b/src/pages/User_Account/signup.jsx
@@ -63,12 +63,12 @@ function DynamicSignup() {
     <div
       className={`h-[calc(100vh-2.75rem)] bg-[#eaeaea] relative overflow-hidden mt-11 flex flex-col transition-all duration-300 ${isSectionSpaceOpen ? "ml-96" : "ml-12"}`}
     >
-      {/* Branding - smaller */}
-      <div className="absolute top-6 left-6 z-10">
+      {/* Branding */}
+      {/* <div className="absolute top-6 left-6 z-10">
         <div className="text-[#0C2340] font-medium font-playfair text-2xl">
           <p>Docière Pro</p>
         </div>
-      </div>
+      </div> */}
 
       {/* Main content container */}
       <div className="flex flex-col h-full">
@@ -203,9 +203,9 @@ function DynamicSignup() {
         </div>
 
         {/* Footer */}
-        <div className="flex-shrink-0 py-3 text-center text-black/60 text-xs">
+        {/* <div className="flex-shrink-0 py-3 text-center text-black/60 text-xs">
           <p>© 2025 Dociere. All rights reserved.</p>
-        </div>
+        </div> */}
       </div>
       <ConfirmModal
         isOpen={alertModal.isOpen}
diff --git a/src/pages/editorPage.jsx b/src/pages/editorPage.jsx
index 19c9e1c..0cf9afa 100644
--- a/src/pages/editorPage.jsx
+++ b/src/pages/editorPage.jsx
@@ -1285,6 +1285,13 @@ const EditorPage = () => {
                   type="application/pdf"
                   className="w-full h-full rounded border border-[#CFCFCF]"
                 />
+                {/* <PdfViewer
+                  pdfUrl={
+                    projectDetails.currentProject?.files[
+                      projectDetails.activeFile
+                    ]?.content || ""
+                  }
+                /> */}
               </div>
             )}
 
diff --git a/src/pages/settingsPage.jsx b/src/pages/settingsPage.jsx
index eafd17e..644c25c 100644
--- a/src/pages/settingsPage.jsx
+++ b/src/pages/settingsPage.jsx
@@ -211,7 +211,7 @@ const SettingsPage = () => {
         {/* Back Button */}
         <button
           onClick={() => navigate(-1)}
-          className={`flex gap-2 pl-4 mt-1 pt-2 py-2 w-32 h-9 rounded-xl font-inter text-sm transition-colors`}
+          className={`flex gap-2 pl-4 mt-2 pt-2 py-2 w-32 h-9 rounded-xl font-inter text-sm transition-colors`}
           style={{
             color:
               settings.appearance.customThemes[settings.appearance.theme].text1,
@@ -240,7 +240,7 @@ const SettingsPage = () => {
               Settings
             </h1>
             <p
-              className={`text-base font-medium font-inter ml-1 ${isDark ? "text-[#a0a0a0]" : "text-[#7D7D7D]"}`}
+              className={`text-base font-normal font-inter ml-1 ${isDark ? "text-[#a0a0a0]" : "text-[#7D7D7D]"}`}
             >
               Customize your DocierePro experience
             </p>
@@ -248,7 +248,7 @@ const SettingsPage = () => {
 
           {/* Tabs Navigation */}
           <div
-            className={`flex gap-2 border-b mb-6 ${isDark ? "border-[#404040]" : "border-[#CFCFCF]"}`}
+            className={`flex gap-2 border-b mb-6 ${isDark ? "border-[#404040]" : "border-gray-500"}`}
           >
             {tabs?.map((tab) => (
               <button
@@ -269,7 +269,7 @@ const SettingsPage = () => {
 
           {/* Tab Content */}
           <div
-            className={`rounded-lg border p-8 ${isDark ? "bg-[#252525] border-[#404040]" : "bg-white border-[#CFCFCF]"}`}
+            className={`rounded-lg border p-8 ${isDark ? "bg-[#252525] border-[#404040]" : "border-gray-500"}`}
           >
             {/* Editor Tab */}
             {activeTab === "editor" && (
@@ -952,14 +952,14 @@ const SettingsPage = () => {
 
           {/* Reset Button */}
           <div
-            className={`mt-8 pt-6 border-t ${isDark ? "border-[#404040]" : "border-[#CFCFCF]"}`}
+            className={`mt-8 pt-6 border-t ${isDark ? "border-[#404040]" : "border-gray-500"}`}
           >
             <button
               onClick={handleResetSettings}
               className={`px-6 py-2 border rounded-md font-inter text-sm transition-colors ${
                 isDark
                   ? "border-[#404040] text-[#a0a0a0] hover:bg-[#2d2d2d] hover:text-[#e5e5e5]"
-                  : "border-[#CFCFCF] text-[#7D7D7D] hover:bg-[#F9F9F9] hover:text-[#212121]"
+                  : "border-gray-500 text-gray-700 hover:bg-[#F9F9F9] hover:text-[#212121]"
               }`}
             >
               Reset All Settings to Defaults
diff --git a/src/pages/startingPage.jsx b/src/pages/startingPage.jsx
index 5725562..24b0dbb 100644
--- a/src/pages/startingPage.jsx
+++ b/src/pages/startingPage.jsx
@@ -11,6 +11,7 @@ import {
 import { useSettings } from "../context/useSettings";
 import ConfirmModal from "../components/confirmModal.jsx";
 import LinearLoading from "../components/loading/linearLoading";
+import { TbX } from "react-icons/tb";
 
 const StartingPage = () => {
   const [projectData, setProjectData] = useState([]);
@@ -28,10 +29,19 @@ const StartingPage = () => {
     message: "",
   });
 
+  const [refreshKey, setRefreshKey] = useState(0);
+
   useEffect(() => {
-    fetchData();
+    const timer = setTimeout(() => {
+      setRefreshKey(1);
+    }, 1500);
+    return () => clearTimeout(timer);
   }, []);
 
+  useEffect(() => {
+    fetchData();
+  }, [refreshKey]);
+
   const fetchData = async () => {
     const { Projects } = await loadProjects();
     setProjectData(Projects);
@@ -212,17 +222,17 @@ const StartingPage = () => {
               {/* Close button */}
               <button
                 onClick={() => setProjectModal(false)}
-                className="absolute top-2 right-3 text-gray-500 hover:text-gray-800"
+                className="absolute top-4 right-3 text-gray-500 hover:text-gray-800"
               >
-                ✕
+                <TbX size={20} />
               </button>
+              <h2 className="text-2xl font-inter font-semibold mb-2">
+                Recent Projects
+              </h2>
+              <SearchBar data={projectData} />
 
               {/* Modal content with scroll */}
-              <div className="overflow-auto h-[80vh] mr-5">
-                <h2 className="text-2xl font-inter font-semibold mb-2">
-                  Recent Projects
-                </h2>
-                <SearchBar data={projectData} />
+              <div className="overflow-auto h-[65vh] mt-4">
                 <div className="flex flex-row mt-10 gap-8 flex-wrap">
                   {(projectData || [])?.map((project) => (
                     <Link key={project.id} to={`/canvas?project=${project.id}`}>