diff --git a/package-lock.json b/package-lock.json
index 9c4600b..c259c77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,8 @@
         "npm": "^11.4.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "react-icons": "^5.5.0"
+        "react-icons": "^5.5.0",
+        "react-router-dom": "^7.12.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.21.0",
@@ -1806,6 +1807,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -5947,6 +5961,44 @@
         "react": "*"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
+      "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.12.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz",
+      "integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.12.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -6095,6 +6147,12 @@
       "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==",
       "license": "MIT"
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
diff --git a/package.json b/package.json
index ef2d2bf..b6a59e8 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
     "npm": "^11.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-icons": "^5.5.0"
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^7.12.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
diff --git a/src/App.jsx b/src/App.jsx
index 7943bbe..d85b192 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,19 @@
-import CompilerLandingPage from "./pages/CompilerLandingPage";
+// src/App.jsx
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
+import CompilerLandingPage from "./pages/CodeEditor";
+import CodeEditor from "./pages/CodeEditor";
 
 function App() {
   return (
-    <div className="min-h-screen bg-[#0f0a19] text-gray-500 overflow-hidden">
-      <CompilerLandingPage />
-    </div>
+    <BrowserRouter>
+      <div className="min-h-screen bg-[#0f0a19] text-gray-500 overflow-hidden">
+        <Routes>
+          <Route path="/" element={<CompilerLandingPage />} />
+          <Route path="/editor" element={<CodeEditor />} />
+        </Routes>
+      </div>
+    </BrowserRouter>
   );
 }
 
diff --git a/src/components/CodeEditorWindow.jsx b/src/components/CodeEditorWindow.jsx
index d32bb19..a5aaf2a 100644
--- a/src/components/CodeEditorWindow.jsx
+++ b/src/components/CodeEditorWindow.jsx
@@ -1,6 +1,5 @@
 // src/components/CodeEditorWindow.jsx
 import Editor from "@monaco-editor/react";
-import { CODE_SNIPPETS } from "../utils/constant"; // Correct path to constant.js
 
 const CodeEditorWindow = ({
   onChange,
@@ -10,37 +9,41 @@ const CodeEditorWindow = ({
   className = "",
   style = {},
   activeFileId,
-  // openFiles,
 }) => {
-  return activeFileId ? (
+  if (!activeFileId) {
+    return (
+      <p className="text-center text-gray-400 mt-4">
+        Select or create a file to start editing
+      </p>
+    );
+  }
+
+  return (
     <div className={`h-full ${className}`} style={style}>
       <Editor
-        height="100%" 
+        height="100%"
         language={language || "javascript"}
+        value={code}                 // ✅ single source of truth
         onMount={onMount}
-        value={code}
+        onChange={(val) => onChange(val ?? "")}
         theme="vs-dark"
         options={{
           minimap: { enabled: true },
-          fontSize: 14, 
+          fontSize: 14,
           scrollBeyondLastLine: false,
-          wordWrap: "on", 
-          showUnused: true, 
+          wordWrap: "on",
+          showUnused: true,
           cursorBlinking: "smooth",
           cursorSmoothCaretAnimation: "on",
-          renderLineHighlight: "all", 
-          lineNumbersMinChars: 3, 
+          renderLineHighlight: "all",
+          lineNumbersMinChars: 3,
           fontFamily: "Fira Code, Consolas, 'Courier New', monospace",
-          fontLigatures: true, 
+          fontLigatures: true,
           "bracketPairColorization.enabled": true,
           "guides.bracketPairs": "active",
         }}
-        defaultValue={CODE_SNIPPETS[language]}
-        onChange={(val) => onChange(val)}
       />
     </div>
-  ) : (
-    <p>Select or create a file to start editing</p>
   );
 };
 
diff --git a/src/components/CompilerLandingPage.jsx b/src/components/CompilerLandingPage.jsx
new file mode 100644
index 0000000..5008165
--- /dev/null
+++ b/src/components/CompilerLandingPage.jsx
@@ -0,0 +1,56 @@
+// src/pages/CompilerLandingPage.jsx
+import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
+import { FiPlay } from "react-icons/fi";
+import { useTheme } from "../context/ThemeContext";
+
+const CompilerLandingPage = () => {
+  const navigate = useNavigate();
+  const { theme } = useTheme();
+
+  return (
+    <div
+      className={`min-h-screen flex flex-col items-center justify-center text-center px-6
+        ${
+          theme === "dark"
+            ? "bg-dark-background-primary text-dark-text-primary"
+            : "bg-light-background-primary text-light-text-primary"
+        }`}
+    >
+      {/* Title */}
+      <motion.h1
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+        className="text-3xl md:text-5xl font-extrabold mb-4"
+      >
+        Online Code Compiler
+      </motion.h1>
+
+      {/* Subtitle */}
+      <motion.p
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.2 }}
+        className="text-gray-400 max-w-xl mb-8"
+      >
+        Write, run, and share code instantly in your browser.  
+        No setup. No login. Just code.
+      </motion.p>
+
+      {/* CTA Button */}
+      <motion.button
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        onClick={() => navigate("/editor")}
+        className="flex items-center gap-2 px-6 py-3 rounded-lg font-semibold text-white
+                   bg-blue-600 hover:bg-blue-700 shadow-lg"
+      >
+        <FiPlay size={18} />
+        Start Coding
+      </motion.button>
+    </div>
+  );
+};
+
+export default CompilerLandingPage;
\ No newline at end of file
diff --git a/src/components/FileBar.jsx b/src/components/FileBar.jsx
index 2893005..99b8643 100644
--- a/src/components/FileBar.jsx
+++ b/src/components/FileBar.jsx
@@ -1,15 +1,15 @@
-// components/FileBar.jsx
+// src/components/FileBar.jsx
 import React, { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { languageOptions } from "../utils/constant.js"; // Assuming languageOptions is defined here
+import { languageOptions } from "../utils/constant";
 import { useTheme } from "../context/ThemeContext";
-
 import { FiPlus, FiPlay, FiChevronDown } from "react-icons/fi";
 
 const FileBar = ({
   language,
   onLanguageSelect,
   onRunCode,
+  onShare,
   isLoading,
   openFiles,
   activeFileId,
@@ -19,30 +19,24 @@ const FileBar = ({
   onVersionSelect,
 }) => {
   const { theme } = useTheme();
+  const [version, setVersion] = useState("");
 
+  // Get versions for selected language
   const getLanguageVersions = (langValue) => {
     const lang = Object.values(languageOptions).find(
       (opt) => opt.value === langValue
     );
-    return lang && lang.versions ? lang.versions : lang ? [lang.version] : [];
+    return lang?.versions?.length ? lang.versions : lang?.version ? [lang.version] : [];
   };
 
-  const [version, setVersion] = useState(() => {
-    const initialLang = languageOptions[language];
-    return initialLang ? initialLang.version : "";
-  });
-
+  // Sync version with language
   useEffect(() => {
-    const currentLangOption = Object.values(languageOptions).find(
+    const lang = Object.values(languageOptions).find(
       (opt) => opt.value === language
     );
-    if (currentLangOption) {
-      setVersion(currentLangOption.version);
-      onVersionSelect(currentLangOption.version);
-    } else {
-      setVersion("");
-      onVersionSelect("");
-    }
+    const v = lang?.version || "";
+    setVersion(v);
+    onVersionSelect(v);
   }, [language, onVersionSelect]);
 
   const handleVersionChange = (e) => {
@@ -51,119 +45,87 @@ const FileBar = ({
   };
 
   return (
-    <nav
-      className=" w-full h-[50px] md:h-[50px] flex items-center justify-between py-2 px-2 md:px-4 z-40 shadow-xl border-b
-                     bg-light-background-secondary text-light-text-primary border-light-border-primary
-                     dark:bg-dark-background-secondary dark:text-dark-text-primary dark:border-dark-border-primary"
-    >
-      {/* File Tabs Section */}
-      <div className="flex flex-grow overflow-x-auto overflow-hidden whitespace-nowrap custom-scrollbar pr-2 md:pr-4">
+    <nav className="w-full h-[50px] flex items-center justify-between px-2 md:px-4 border-b shadow-xl
+                    bg-light-background-secondary dark:bg-dark-background-secondary
+                    border-light-border-primary dark:border-dark-border-primary">
+
+      {/* ================= FILE TABS ================= */}
+      <div className="flex flex-grow overflow-x-auto custom-scrollbar pr-3">
         <AnimatePresence mode="popLayout">
           {openFiles.map((file) => (
             <motion.button
               key={file.id}
-              layout="position"
-              initial={{ opacity: 0, x: -50 }}
+              layout
+              initial={{ opacity: 0, x: -30 }}
               animate={{ opacity: 1, x: 0 }}
-              exit={{
-                opacity: 0,
-                x: 50,
-                transition: { duration: 0.2, ease: "easeOut" },
-              }}
-              transition={{
-                type: "spring",
-                stiffness: 300,
-                damping: 30,
-                duration: 0.3,
-              }}
+              exit={{ opacity: 0, x: 30 }}
+              transition={{ type: "spring", stiffness: 300, damping: 30 }}
               onClick={() => onFileSelect(file.id)}
-              title={file.name}
-              className={`flex items-center px-3 py-1 md:px-4 md:py-1.5 mr-1 md:mr-2 rounded-t-lg text-xs md:text-sm transition-colors duration-200 group relative z-10
+              className={`flex items-center px-3 py-1 mr-2 rounded-t-lg text-xs md:text-sm relative
                 ${
                   activeFileId === file.id
-                    ? "bg-light-accent-blue text-light-text-primary shadow-md shadow-light-accent-blue/40 font-semibold"
-                    : "bg-light-input-bg text-light-text-secondary hover:bg-light-background-secondary hover:text-light-text-primary hover:shadow-sm hover:shadow-light-input-bg/20"
-                }
-                dark:${
-                  activeFileId === file.id
-                    ? "dark:bg-dark-accent-blue dark:text-dark-text-primary dark:shadow-dark-accent-blue/40 dark:font-semibold"
-                    : "dark:bg-dark-input-bg dark:text-dark-text-secondary dark:hover:bg-dark-background-secondary dark:hover:text-dark-text-primary dark:hover:shadow-sm dark:shadow-dark-input-bg/20"
+                    ? "bg-light-accent-blue dark:bg-dark-accent-blue text-white font-semibold"
+                    : "bg-light-input-bg dark:bg-dark-input-bg text-gray-400 hover:text-white"
                 }`}
             >
-              <span className="truncate max-w-[80px] md:max-w-[120px]">
-                {file.name}
-              </span>
+              <span className="truncate max-w-[100px]">{file.name}</span>
+
               <span
                 onClick={(e) => {
                   e.stopPropagation();
                   onFileClose(file.id);
                 }}
-                className="ml-1 md:ml-2 text-light-text-secondary hover:text-light-accent-pink
-                           dark:text-dark-text-secondary dark:hover:text-dark-accent-pink
-                           text-xs font-bold leading-none focus:outline-none transition-colors duration-200"
-                aria-label={`Close ${file.name} `}
+                className="ml-2 text-xs font-bold hover:text-red-400"
               >
-                &times;
+                ×
               </span>
+
               {activeFileId === file.id && (
                 <motion.div
-                  layoutId="active-tab-underline"
-                  className="absolute bottom-0 left-0 right-0 h-0.5 bg-light-accent-green dark:bg-dark-accent-green rounded-t-sm"
-                  transition={{ type: "spring", stiffness: 500, damping: 30 }}
+                  layoutId="active-tab"
+                  className="absolute bottom-0 left-0 right-0 h-[2px]
+                             bg-light-accent-green dark:bg-dark-accent-green"
                 />
               )}
             </motion.button>
           ))}
         </AnimatePresence>
-        {/* Button to add a new file tab with icon */}
+
+        {/* New File Button */}
         <button
           onClick={onNewFile}
-          className="flex-shrink-0 px-2 py-1 md:px-3 md:py-1.5 rounded-t-lg text-xs md:text-sm transition-colors duration-200 shadow-sm
-                       bg-light-accent-purple text-white hover:bg-light-accent-purple/80 hover:shadow-light-accent-purple/30
-                       dark:bg-dark-accent-purple dark:text-dark-text-primary dark:hover:bg-dark-accent-purple/80 dark:hover:shadow-dark-accent-purple/30 flex items-center gap-1"
-          aria-label="New file"
+          className="px-2 py-1 rounded-t-lg text-xs md:text-sm
+                     bg-light-accent-purple dark:bg-dark-accent-purple text-white flex items-center gap-1"
         >
-          <FiPlus className="w-3 h-3 md:w-4 md:h-4" />
-          <span className="hidden md:inline">New File</span>
+          <FiPlus size={14} />
+          <span className="hidden md:inline">New</span>
         </button>
       </div>
 
-      {/* Compiler Controls Section */}
-      <div className="flex items-center gap-2 md:gap-4 flex-shrink-0">
-        {/* Run Code Button with icon */}
+      {/* ================= CONTROLS ================= */}
+      <div className="flex items-center gap-2 md:gap-4">
+
+        {/* Share */}
+
+        {/* Run */}
         <button
           onClick={onRunCode}
           disabled={isLoading}
-          className={`
-            px-3 py-1 md:px-5 md:py-1.5 rounded-md font-semibold text-xs md:text-base transition-all duration-200 focus:outline-none focus:ring-2 shadow-md hover:shadow-lg flex items-center gap-1 bg-light-accent-green text-light-text-primary hover:bg-light-accent-green/80 focus:ring-light-accent-green focus:ring-opacity-70 hover:shadow-light-accent-green/40
-            dark:bg-dark-accent-green dark:text-dark-text-primary dark:hover:bg-dark-accent-green/80 dark:focus:ring-dark-accent-green dark:focus:ring-opacity-70 dark:hover:shadow-dark-accent-green/40  
-            ${isLoading ? "opacity-60 cursor-not-allowed" : ""}
-            `}
+          className={`px-3 py-1 rounded-md flex items-center gap-1
+                      bg-light-accent-green dark:bg-dark-accent-green text-white
+                      ${isLoading ? "opacity-60 cursor-not-allowed" : ""}`}
         >
-          {isLoading ? (
-            <motion.span
-              animate={{ rotate: 360 }}
-              transition={{ duration: 1, ease: "linear", repeat: Infinity }}
-              className="inline-block"
-            >
-              <FiPlay className="w-4 h-4 md:w-5 md:h-5" />
-            </motion.span>
-          ) : (
-            <>
-              <FiPlay className="w-4 h-4 md:w-5 md:h-5" />
-              <span className="hidden md:inline">Run Code</span>
-            </>
-          )}
+          <FiPlay size={14} />
+          <span className="hidden md:inline">Run</span>
         </button>
 
-        {/* Language Dropdown */}
-        <div className="relative inline-block">
+        {/* Language */}
+        <div className="relative">
           <select
             value={language}
             onChange={(e) => onLanguageSelect(e.target.value)}
-            className="rounded-md pl-2 pr-6 py-1 md:px-3 md:py-2 text-xs md:text-sm appearance-none focus:outline-none focus:ring-2 cursor-pointer shadow-sm
-                         bg-light-input-bg text-light-text-primary focus:ring-light-accent-blue focus:ring-opacity-70
-                         dark:bg-dark-input-bg dark:text-dark-text-primary dark:focus:ring-dark-accent-blue dark:focus:ring-opacity-70"
+            className="pl-2 pr-6 py-1 rounded-md text-xs md:text-sm
+                       bg-light-input-bg dark:bg-dark-input-bg text-white"
           >
             {Object.values(languageOptions).map((lang) => (
               <option key={lang.id} value={lang.value}>
@@ -171,40 +133,28 @@ const FileBar = ({
               </option>
             ))}
           </select>
-          <FiChevronDown
-            className={`absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none
-            ${theme === "dark" ? "text-dark-accent-purple" : "text-gray-600"}`}
-          />
+          <FiChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none" />
         </div>
 
-        {/* Version Dropdown */}
-        <div className="relative inline-block">
+        {/* Version */}
+        <div className="relative">
           <select
             value={version}
             onChange={handleVersionChange}
-            disabled={
-              !getLanguageVersions(language) ||
-              getLanguageVersions(language).length === 0
-            }
-            className="rounded-md pl-2 pr-6 py-1 md:px-3 md:py-2 text-xs md:text-sm appearance-none focus:outline-none focus:ring-2 cursor-pointer shadow-sm
-                         bg-light-input-bg text-light-text-primary focus:ring-light-accent-blue focus:ring-opacity-70
-                         dark:bg-dark-input-bg dark:text-dark-text-primary dark:focus:ring-dark-accent-blue dark:focus:ring-opacity-70"
+            disabled={!getLanguageVersions(language).length}
+            className="pl-2 pr-6 py-1 rounded-md text-xs md:text-sm
+                       bg-light-input-bg dark:bg-dark-input-bg text-white"
           >
             {getLanguageVersions(language).map((v) => (
               <option key={v} value={v}>
                 {v}
               </option>
             ))}
-            {(!getLanguageVersions(language) ||
-              getLanguageVersions(language).length === 0) && (
-              <option value="">N/A</option>
-            )}
+            {!getLanguageVersions(language).length && <option>N/A</option>}
           </select>
-          <FiChevronDown
-            className={`absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none
-            ${theme === "dark" ? "text-dark-accent-purple" : "text-gray-600"}`}
-          />
+          <FiChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none" />
         </div>
+
       </div>
     </nav>
   );
diff --git a/src/components/LanguageSelector.jsx b/src/components/LanguageSelector.jsx
index 3f05798..9f343c0 100644
--- a/src/components/LanguageSelector.jsx
+++ b/src/components/LanguageSelector.jsx
@@ -1,40 +1,69 @@
-import { useState } from "react";
-// import { LANGUAGE_VERSIONS } from "../jsFiles/constant";
-import { languageOptions } from "./constant.js";
+// src/components/LanguageSelector.jsx
+import { useState, useRef, useEffect } from "react";
+import { languageOptions } from "../utils/constant";
 
-// const languages = Object.entries(LANGUAGE_VERSIONS);
 const ACTIVE_CLASSES = "text-blue-400 bg-gray-900";
 
 const LanguageSelector = ({ language, onSelect }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
 
   return (
-    <div className="relative flex gap-4 items-center">
-      <p className="text-lg">Language:</p>
+    <div ref={dropdownRef} className="relative flex gap-3 items-center">
+      <p className="text-sm md:text-base text-gray-400">Language:</p>
+
       <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="px-4 py-1 bg-gray-800 text-white rounded hover:bg-gray-700"
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="px-4 py-1 bg-gray-800 text-white rounded
+                   hover:bg-gray-700 transition"
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
       >
         {language}
       </button>
 
       {isOpen && (
-        <div className="absolute top-8 left-24 h-64 mt-2 w-48 bg-[rgb(17,12,27)] border border-gray-700 rounded shadow-md z-10 overflow-auto">
-          {Object.entries(languageOptions).map(([name, { version }]) => {
-            const isActive = name === language;
+        <div
+          role="listbox"
+          className="absolute top-9 left-20 h-64 w-48
+                     bg-[rgb(17,12,27)] border border-gray-700
+                     rounded shadow-lg z-50 overflow-auto"
+        >
+          {Object.values(languageOptions).map((lang) => {
+            const isActive = lang.value === language;
+
             return (
               <button
-                key={name}
+                key={lang.id}
                 onClick={() => {
-                  onSelect(name);
+                  onSelect(lang.value);
                   setIsOpen(false);
                 }}
-                className={`flex justify-between items-center w-full px-4 py-2 text-left hover:bg-gray-900 hover:text-blue-400 ${
-                  isActive ? ACTIVE_CLASSES : "text-white"
-                }`}
+                className={`flex justify-between items-center w-full px-4 py-2
+                            text-left transition-colors
+                            hover:bg-gray-900 hover:text-blue-400
+                            ${
+                              isActive
+                                ? ACTIVE_CLASSES
+                                : "text-gray-200"
+                            }`}
               >
-                {name}
-                <span className="text-gray-600 text-sm ml-2">({version})</span>
+                <span>{lang.label}</span>
+                <span className="text-xs text-gray-500">
+                  ({lang.version})
+                </span>
               </button>
             );
           })}
diff --git a/src/components/Output.jsx b/src/components/Output.jsx
index 0265707..5d7d617 100644
--- a/src/components/Output.jsx
+++ b/src/components/Output.jsx
@@ -1,87 +1,95 @@
 // src/components/Output.jsx
-import React from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import useMediaQuery from '../hooks/mediaQuery'; // Import the hook
-import { useTheme } from '../context/ThemeContext'; // Import useTheme hook
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import useMediaQuery from "../hooks/mediaQuery";
+import { useTheme } from "../context/ThemeContext";
 
-// Define dimensions for the output card on larger screens
-const OUTPUT_CARD_WIDTH = '400px';
-const OUTPUT_CARD_HEIGHT = '300px'; // You can adjust this height
+// Dimensions for desktop terminal
+const OUTPUT_CARD_WIDTH = "400px";
+const OUTPUT_CARD_HEIGHT = "300px";
 
-const Output = ({ output, isError, showOutput, toggleTerminal }) => {
-  const { theme } = useTheme(); // Get the current theme
+const Output = ({ output = {}, isError, showOutput, toggleTerminal }) => {
+  const { theme } = useTheme();
 
   const outputText = isError
-    ? (output.stderr || output.compile_output || 'An error occurred during execution.')
-    : (output.stdout || 'No output yet. Run your code!');
+    ? output.stderr || output.compile_output || "An error occurred during execution."
+    : output.stdout || "No output yet. Run your code!";
 
-  // Adjust output text color based on error and theme
   const outputColor = isError
-    ? 'text-red-400' // Still red for errors
-    : (theme === 'dark' ? 'text-dark-text-secondary' : 'text-gray-700'); // Muted text for dark, darker for light
+    ? "text-red-400"
+    : theme === "dark"
+      ? "text-dark-text-secondary"
+      : "text-gray-700";
 
-  // Use the media query hook to check for 'sm' breakpoint (640px)
-  const isLargeScreen = useMediaQuery('(min-width: 640px)');
+  const isLargeScreen = useMediaQuery("(min-width: 640px)");
 
-  // Define animation variants based on screen size
   const mobileVariants = {
-    hidden: { y: '100%', opacity: 0 },
+    hidden: { y: "100%", opacity: 0 },
     visible: { y: 0, opacity: 1 },
-    exit: { y: '100%', opacity: 0 },
+    exit: { y: "100%", opacity: 0 },
   };
 
   const desktopVariants = {
-    hidden: { x: '100%', opacity: 0 },
+    hidden: { x: "100%", opacity: 0 },
     visible: { x: 0, opacity: 1 },
-    exit: { x: '100%', opacity: 0 },
+    exit: { x: "100%", opacity: 0 },
   };
 
-  const currentVariants = isLargeScreen ? desktopVariants : mobileVariants;
-
   return (
     <AnimatePresence>
       {showOutput && (
         <motion.div
-          // Responsive positioning and styling using Tailwind CSS classes
-          // Default (mobile): fixed at bottom, full width
-          // sm: (large screens): fixed bottom-4 right-4, specific width/height
-          // Using theme-dependent classes for backgrounds, borders, and text
-          className={`fixed bottom-0 left-0 right-0 w-full h-[50vh] max-h-[80vh] border-t text-sm font-mono shadow-2xl z-50 flex flex-col rounded-t-lg
-                      sm:bottom-4 sm:right-4 sm:left-auto sm:w-[var(--output-width)] sm:h-[var(--output-height)] sm:border sm:rounded-lg
-                      ${theme === 'dark'
-                        ? 'bg-dark-background-secondary border-dark-border-primary' // Dark theme's slightly lighter background
-                        : 'bg-gray-100 border-gray-300' // A light gray for the light theme
-                      }`}
-          style={{
-            '--output-width': OUTPUT_CARD_WIDTH, // Use CSS variables for responsiveness
-            '--output-height': OUTPUT_CARD_HEIGHT, // Use CSS variables for responsiveness
-          }}
-          // Apply dynamic variants
           initial="hidden"
           animate="visible"
           exit="exit"
-          variants={currentVariants}
-          transition={{ type: 'spring', damping: 20, stiffness: 200 }} // Smooth spring animation
+          variants={isLargeScreen ? desktopVariants : mobileVariants}
+          transition={{ type: "spring", damping: 20, stiffness: 200 }}
+          style={{
+            "--output-width": OUTPUT_CARD_WIDTH,
+            "--output-height": OUTPUT_CARD_HEIGHT,
+          }}
+          className={`fixed bottom-0 left-0 right-0 z-50 w-full h-[50vh] max-h-[80vh]
+            flex flex-col text-sm font-mono shadow-2xl border-t rounded-t-lg
+            sm:bottom-4 sm:right-4 sm:left-auto sm:w-[var(--output-width)]
+            sm:h-[var(--output-height)] sm:border sm:rounded-lg
+            ${
+              theme === "dark"
+                ? "bg-dark-background-secondary border-dark-border-primary"
+                : "bg-gray-100 border-gray-300"
+            }`}
         >
-          {/* Header for the output card */}
-          <div className={`flex items-center justify-between p-3 border-b
-                          ${theme === 'dark'
-                            ? 'bg-dark-background-primary border-dark-border-primary' // Header background a bit darker, matching TopBar
-                            : 'bg-gray-200 border-gray-300' // Header background for light theme
-                          }`}>
-            <h3 className={`text-md font-semibold ${theme === 'dark' ? 'text-dark-accent-green' : 'text-green-600'}`}>
+          {/* Header */}
+          <div
+            className={`flex items-center justify-between p-3 border-b
+              ${
+                theme === "dark"
+                  ? "bg-dark-background-primary border-dark-border-primary"
+                  : "bg-gray-200 border-gray-300"
+              }`}
+          >
+            <h3
+              className={`font-semibold ${
+                theme === "dark" ? "text-dark-accent-green" : "text-green-600"
+              }`}
+            >
               Terminal Output
             </h3>
+
             <button
               onClick={() => toggleTerminal(false)}
-              className={`transition-colors duration-200 focus:outline-none
-                          ${theme === 'dark' ? 'text-gray-400 hover:text-dark-text-primary' : 'text-gray-500 hover:text-gray-800'}`}
               aria-label="Close Terminal"
+              className={`transition-colors duration-200
+                ${
+                  theme === "dark"
+                    ? "text-gray-400 hover:text-white"
+                    : "text-gray-500 hover:text-gray-800"
+                }`}
             >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+              ✕
             </button>
           </div>
-          {/* Output content area */}
+
+          {/* Output Body */}
           <div className="p-4 flex-grow overflow-y-auto custom-scrollbar">
             <pre className={`${outputColor} whitespace-pre-wrap`}>
               {outputText}
@@ -93,4 +101,4 @@ const Output = ({ output, isError, showOutput, toggleTerminal }) => {
   );
 };
 
-export default Output;
\ No newline at end of file
+export default Output;
diff --git a/src/components/TopBar.jsx b/src/components/TopBar.jsx
index e28ae8b..d16b6dd 100644
--- a/src/components/TopBar.jsx
+++ b/src/components/TopBar.jsx
@@ -1,88 +1,88 @@
-// components/TopBar.jsx
-import React from 'react';
-import { motion } from 'framer-motion';
-import { useTheme } from '../context/ThemeContext';
-import { FiTerminal } from 'react-icons/fi';
+// src/components/TopBar.jsx
+import React from "react";
+import { motion } from "framer-motion";
+import { FiTerminal } from "react-icons/fi";
+import { useTheme } from "../context/ThemeContext";
 
-const TopBar = () => {
+const TopBar = ({ onShare }) => {
   const { theme } = useTheme();
 
-  // Define colors for the animation dots based on theme
   const dotColors = {
     light: {
-      dot1: '#32CD32', // Green
-      dot2: '#6A5ACD', // Blue
-      dot3: '#9370DB', // Purple
+      dot1: "#32CD32",
+      dot2: "#6A5ACD",
+      dot3: "#9370DB",
     },
     dark: {
-      dot1: '#6EE7B7', // Light green, adjusted for the dark theme's accent (e.g., #2ECC71 or a lighter shade derived from it)
-      dot2: '#818CF8', // Light blue, adjusted for the dark theme's accent (e.g., #00BFFF or a lighter shade)
-      dot3: '#C4B5FD', // Light purple, adjusted for the dark theme's accent (e.g., #8E44AD or a lighter shade)
+      dot1: "#6EE7B7",
+      dot2: "#818CF8",
+      dot3: "#C4B5FD",
     },
   };
 
-  const currentDotColors = dotColors[theme];
+  const colors = dotColors[theme] || dotColors.dark;
 
   return (
-    <header className=" w-full h-[20px] md:h-[40px] flex items-center justify-between px-2 md:px-4 z-50 border-b
-                         bg-light-background-primary border-light-border-primary text-light-text-primary
-                         dark:bg-dark-background-primary dark:border-dark-border-primary dark:text-dark-text-primary">
-      {/* Left: Branding Icon and Decorative three dots */}
+    <header
+      className="w-full h-[20px] md:h-[40px] flex items-center justify-between
+                 px-2 md:px-4 z-50 border-b
+                 bg-light-background-primary border-light-border-primary text-light-text-primary
+                 dark:bg-dark-background-primary dark:border-dark-border-primary dark:text-dark-text-primary"
+    >
+      {/* Left: Icon + animated dots */}
       <div className="flex items-center space-x-1 md:space-x-3">
-        {/* Branding Icon (e.g., Terminal) */}
-        <FiTerminal className={`w-4 h-4 md:w-6 md:h-6 ${theme === 'dark' ? 'text-dark-accent-green' : 'text-light-accent-green'}`} />
+        <FiTerminal
+          className={`w-4 h-4 md:w-6 md:h-6 ${
+            theme === "dark"
+              ? "text-dark-accent-green"
+              : "text-light-accent-green"
+          }`}
+        />
 
-        {/* Decorative dots - now theme-adaptable */}
-        <motion.span
-          className="block w-2 h-2 md:w-3 md:h-3 rounded-full"
-          style={{ backgroundColor: currentDotColors.dot1 }}
-          animate={{ y: [0, -3, 0] }}
-          transition={{
-            duration: 0.8,
-            ease: "easeInOut",
-            repeat: Infinity,
-            repeatType: "reverse",
-            delay: 0
-          }}
-        ></motion.span>
-        <motion.span
-          className="block w-2 h-2 md:w-3 md:h-3 rounded-full"
-          style={{ backgroundColor: currentDotColors.dot2 }}
-          animate={{ y: [0, 3, 0] }}
-          transition={{
-            duration: 0.8,
-            ease: "easeInOut",
-            repeat: Infinity,
-            repeatType: "reverse",
-            delay: 0.2
-          }}
-        ></motion.span>
-        <motion.span
-          className="block w-2 h-2 md:w-3 md:h-3 rounded-full"
-          style={{ backgroundColor: currentDotColors.dot3 }}
-          animate={{ y: [0, -3, 0] }}
-          transition={{
-            duration: 0.8,
-            ease: "easeInOut",
-            repeat: Infinity,
-            repeatType: "reverse",
-            delay: 0.4
-          }}
-        ></motion.span>
+        {[colors.dot1, colors.dot2, colors.dot3].map((color, index) => (
+          <motion.span
+            key={index}
+            className="block w-2 h-2 md:w-3 md:h-3 rounded-full"
+            style={{ backgroundColor: color }}
+            animate={{ y: index % 2 === 0 ? [0, -3, 0] : [0, 3, 0] }}
+            transition={{
+              duration: 0.8,
+              ease: "easeInOut",
+              repeat: Infinity,
+              repeatType: "reverse",
+              delay: index * 0.2,
+            }}
+          />
+        ))}
       </div>
 
-      {/* Center: App Title */}
-      <span className="font-heading font-extrabold text-xs sm:text-sm md:text-lg tracking-wider
-                         text-light-text-secondary drop-shadow-[0_0_4px_var(--light-accent-blue)] md:drop-shadow-[0_0_6px_var(--light-accent-blue)]
-                         dark:text-dark-text-secondary dark:drop-shadow-[0_0_4px_var(--dark-accent-blue)] dark:md:drop-shadow-[0_0_6px_var(--dark-accent-blue)]
-                         truncate max-w-[calc(100%-100px)] md:max-w-none transform hover:scale-105 transition-transform duration-300">
-        Connect to Shailendra !
+      {/* Center: Title */}
+      <span
+        className="font-heading font-extrabold text-xs sm:text-sm md:text-lg tracking-wider
+                   truncate max-w-[calc(100%-120px)] md:max-w-none
+                   text-light-text-secondary
+                   drop-shadow-[0_0_4px_var(--light-accent-blue)]
+                   dark:text-dark-text-secondary
+                   dark:drop-shadow-[0_0_4px_var(--dark-accent-blue)]
+                   transform hover:scale-105 transition-transform duration-300"
+      >
+        Online Code Compiler !
       </span>
 
-      {/* Right: Empty for minimalism / Future use */}
-      <div className="w-4 md:w-6"></div>
+      {/* Right: Share Button */}
+      <div className="flex items-center">
+        <button
+          onClick={onShare}
+          aria-label="Share code"
+          className="bg-blue-600 hover:bg-blue-700 text-white
+                     px-3 py-1 rounded text-xs md:text-sm
+                     transition-colors duration-200"
+        >
+          Share
+        </button>
+      </div>
     </header>
   );
 };
 
-export default TopBar;
\ No newline at end of file
+export default TopBar;
diff --git a/src/pages/CodeEditor.jsx b/src/pages/CodeEditor.jsx
new file mode 100644
index 0000000..f296aa2
--- /dev/null
+++ b/src/pages/CodeEditor.jsx
@@ -0,0 +1,272 @@
+// src/pages/CodeEditor.jsx
+import { useRef, useState, useEffect, useCallback } from "react";
+import TopBar from "../components/TopBar";
+import FileBar from "../components/FileBar";
+import Output from "../components/Output";
+import CodeEditorWindow from "../components/CodeEditorWindow";
+
+import { executeCode } from "../utils/api";
+import { CODE_SNIPPETS } from "../utils/constant";
+import useKeyPress from "../hooks/keyPress";
+import { useTheme } from "../context/ThemeContext";
+
+const TOP_BAR_HEIGHT = 40;
+const FILE_BAR_HEIGHT = 50;
+
+const CodeEditor = () => {
+  const editorRef = useRef(null);
+  const { theme } = useTheme();
+
+  /* -------------------- FILE STATE -------------------- */
+  const [openFiles, setOpenFiles] = useState([
+    {
+      id: "file1",
+      name: "main.js",
+      content: CODE_SNIPPETS.javascript,
+      language: "javascript",
+    },
+  ]);
+  const [activeFileId, setActiveFileId] = useState("file1");
+
+  const activeFile = openFiles.find((f) => f.id === activeFileId);
+
+  /* -------------------- EDITOR STATE -------------------- */
+  const [language, setLanguage] = useState("javascript");
+  const [code, setCode] = useState(CODE_SNIPPETS.javascript);
+  const [version, setVersion] = useState("");
+
+  const [editorHeight, setEditorHeight] = useState(
+    window.innerHeight - TOP_BAR_HEIGHT - FILE_BAR_HEIGHT
+  );
+
+  /* -------------------- OUTPUT STATE -------------------- */
+  const [showOutput, setShowOutput] = useState(false);
+  const [output, setOutput] = useState({
+    stdout: "",
+    stderr: "",
+    compile_output: "",
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  /* -------------------- SHORTCUTS -------------------- */
+  const enterPress = useKeyPress("Enter");
+  const ctrlPress = useKeyPress("Control");
+
+  /* -------------------- MONACO MOUNT -------------------- */
+  const onMount = useCallback((editor) => {
+    editorRef.current = editor;
+    editor.focus();
+  }, []);
+
+  /* -------------------- CODE CHANGE -------------------- */
+  const onCodeChange = useCallback(
+    (newCode) => {
+      setCode(newCode);
+      setOpenFiles((prev) =>
+        prev.map((f) =>
+          f.id === activeFileId ? { ...f, content: newCode } : f
+        )
+      );
+    },
+    [activeFileId]
+  );
+
+  /* -------------------- LANGUAGE CHANGE -------------------- */
+  const onLanguageSelect = useCallback(
+    (newLanguage) => {
+      setLanguage(newLanguage);
+      const snippet = CODE_SNIPPETS[newLanguage] || "";
+
+      setCode(snippet);
+      setOpenFiles((prev) =>
+        prev.map((f) =>
+          f.id === activeFileId
+            ? { ...f, language: newLanguage, content: snippet }
+            : f
+        )
+      );
+
+      setTimeout(() => {
+        editorRef.current?.setValue(snippet);
+      }, 0);
+    },
+    [activeFileId]
+  );
+
+  /* -------------------- FILE SWITCH -------------------- */
+  const onFileSelect = useCallback(
+    (id) => {
+      const file = openFiles.find((f) => f.id === id);
+      if (!file) return;
+
+      setActiveFileId(id);
+      setLanguage(file.language);
+      setCode(file.content);
+
+      setTimeout(() => {
+        editorRef.current?.setValue(file.content);
+      }, 0);
+    },
+    [openFiles]
+  );
+
+  /* -------------------- NEW FILE -------------------- */
+  const onNewFile = useCallback(() => {
+    const id = `file-${Date.now()}`;
+    const file = {
+      id,
+      name: `untitled.js`,
+      content: "",
+      language: "javascript",
+    };
+
+    setOpenFiles((prev) => [...prev, file]);
+    setActiveFileId(id);
+    setLanguage("javascript");
+    setCode("");
+
+    setTimeout(() => {
+      editorRef.current?.setValue("");
+    }, 0);
+  }, []);
+
+  /* -------------------- CLOSE FILE -------------------- */
+  const onFileClose = useCallback(
+    (id) => {
+      setOpenFiles((prev) => {
+        const remaining = prev.filter((f) => f.id !== id);
+        if (remaining.length === 0) return prev;
+
+        if (id === activeFileId) {
+          const next = remaining[0];
+          setActiveFileId(next.id);
+          setLanguage(next.language);
+          setCode(next.content);
+
+          setTimeout(() => {
+            editorRef.current?.setValue(next.content);
+          }, 0);
+        }
+        return remaining;
+      });
+    },
+    [activeFileId]
+  );
+
+  /* -------------------- RUN CODE -------------------- */
+  const runCode = useCallback(async () => {
+    const source = editorRef.current?.getValue();
+    if (!source) return;
+
+    try {
+      setIsLoading(true);
+      const { run } = await executeCode(language, source);
+
+      setOutput(run || {});
+      setIsError(!!run?.stderr || !!run?.compile_output);
+      setShowOutput(true);
+    } catch (e) {
+      setIsError(true);
+      setOutput({ stderr: e.message });
+      setShowOutput(true);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [language]);
+
+  /* -------------------- SHARE CODE -------------------- */
+  const handleShareCode = useCallback(() => {
+    const source = editorRef.current?.getValue();
+    if (!source) return;
+
+    const encoded = btoa(unescape(encodeURIComponent(source)));
+    const url = `${window.location.origin}/editor?code=${encoded}`;
+
+    navigator.clipboard.writeText(url);
+    alert("Shareable code link copied!");
+  }, []);
+
+  /* -------------------- LOAD SHARED CODE (ONCE) -------------------- */
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const sharedCode = params.get("code");
+    if (!sharedCode) return;
+
+    try {
+      const decoded = decodeURIComponent(escape(atob(sharedCode)));
+
+      setCode(decoded);
+      setOpenFiles((prev) =>
+        prev.map((f) =>
+          f.id === "file1" ? { ...f, content: decoded } : f
+        )
+      );
+
+      setTimeout(() => {
+        editorRef.current?.setValue(decoded);
+      }, 0);
+    } catch {
+      console.error("Invalid shared code");
+    }
+  }, []);
+
+  /* -------------------- CTRL + ENTER -------------------- */
+  useEffect(() => {
+    if (ctrlPress && enterPress) runCode();
+  }, [ctrlPress, enterPress, runCode]);
+
+  /* -------------------- RESIZE -------------------- */
+  useEffect(() => {
+    const resize = () =>
+      setEditorHeight(window.innerHeight - TOP_BAR_HEIGHT - FILE_BAR_HEIGHT);
+
+    window.addEventListener("resize", resize);
+    return () => window.removeEventListener("resize", resize);
+  }, []);
+
+  /* -------------------- RENDER -------------------- */
+  return (
+    <div
+      className={`h-screen flex flex-col ${
+        theme === "dark"
+          ? "bg-dark-background-primary"
+          : "bg-light-background-primary"
+      }`}
+    >
+      <TopBar onShare={handleShareCode} />
+
+      <FileBar
+        language={language}
+        onLanguageSelect={onLanguageSelect}
+        onRunCode={runCode}
+        onShare={handleShareCode}
+        isLoading={isLoading}
+        openFiles={openFiles}
+        activeFileId={activeFileId}
+        onFileSelect={onFileSelect}
+        onFileClose={onFileClose}
+        onNewFile={onNewFile}
+        onVersionSelect={setVersion}
+      />
+
+      <CodeEditorWindow
+        style={{ height: editorHeight }}
+        onChange={onCodeChange}
+        activeFileId={activeFileId}
+        language={language}
+        code={code}
+        onMount={onMount}
+      />
+
+      <Output
+        output={output}
+        isError={isError}
+        showOutput={showOutput}
+        toggleTerminal={setShowOutput}
+      />
+    </div>
+  );
+};
+
+export default CodeEditor;
diff --git a/src/pages/CompilerLandingPage.jsx b/src/pages/CompilerLandingPage.jsx
deleted file mode 100644
index 620e7bc..0000000
--- a/src/pages/CompilerLandingPage.jsx
+++ /dev/null
@@ -1,298 +0,0 @@
-// src/components/CodeEditor.jsx
-import { useRef, useState, useEffect, useCallback } from "react";
-import TopBar from "../components/TopBar";
-import FileBar from "../components/FileBar";
-import { executeCode } from "../utils/api.js";
-import Output from "../components/Output";
-
-import { CODE_SNIPPETS } from "../utils/constant";
-import CodeEditorWindow from "../components/CodeEditorWindow";
-import useKeyPress from "../hooks/keyPress";
-import { useTheme } from "../context/ThemeContext"; // Import useTheme hook
-
-const TOP_BAR_HEIGHT = 40; // px
-const FILE_BAR_HEIGHT = 50; // px
-
-const CodeEditor = () => {
-  const editorRef = useRef(null);
-  const containerRef = useRef(null);
-  const { theme } = useTheme(); // Get the current theme
-
-  // File management states
-  const [openFiles, setOpenFiles] = useState([
-    {
-      id: "file1",
-      name: "main.js",
-      content: CODE_SNIPPETS["javascript"],
-      language: "javascript",
-    },
-  ]);
-  const [activeFileId, setActiveFileId] = useState("file1");
-
-  // Derive current file's properties
-  const activeFile = openFiles.find((f) => f.id === activeFileId);
-  const [language, setLanguage] = useState(
-    activeFile?.language || "javascript"
-  );
-  const [version, setVersion] = useState("");
-  const [code, setCode] = useState(openFiles[activeFileId]?.content || "");
-
-  const [showOutput, setShowOutput] = useState(false); // State to control output panel visibility
-
-  // Editor height calculation: always full height below the bars
-  const [editorHeight, setEditorHeight] = useState(
-    () => window.innerHeight - TOP_BAR_HEIGHT - FILE_BAR_HEIGHT
-  );
-  const [output, setOutput] = useState({
-    stdout: "",
-    stderr: "",
-    compile_output: "",
-  });
-  const [isLoading, setIsLoading] = useState(false);
-  const [isError, setIsError] = useState(false);
-
-  // Custom hook for keyboard shortcuts
-  const enterPress = useKeyPress("Enter");
-  const ctrlPress = useKeyPress("Control");
-
-  // Callback for when Monaco Editor mounts
-  const onMount = useCallback(
-    (editor) => {
-      editorRef.current = editor;
-      editor.focus(); // Focus the editor on mount
-      editorRef.current.setValue(code); // Set initial code based on active file
-    },
-    [code]
-  );
-
-  // Callback for code changes in the editor
-  const onCodeChange = useCallback(
-    (newCode) => {
-      setCode(newCode);
-      setOpenFiles((prevFiles) => {
-        const updatedFiles = prevFiles.map((f) =>
-          f.id === activeFileId ? { ...f, content: newCode } : f
-        );
-        return updatedFiles;
-      });
-    },
-    [activeFileId]
-  );
-
-  console.log(openFiles);
-
-  // Callback for language selection
-  const onLanguageSelect = useCallback(
-    (newLanguage) => {
-      setLanguage(newLanguage);
-      // Update the language of the active file in the openFiles state
-      setOpenFiles((prevFiles) =>
-        prevFiles.map((f) =>
-          f.id === activeFileId ? { ...f, language: newLanguage } : f
-        )
-      );
-
-      // Set editor content to a new snippet for the selected language if available
-      const newCodeSnippet = CODE_SNIPPETS[newLanguage] || "";
-      setCode(newCodeSnippet);
-      if (editorRef.current) {
-        editorRef.current.setValue(newCodeSnippet);
-      }
-    },
-    [activeFileId]
-  );
-
-  // Callback for version selection (placeholder for future functionality)
-  const onVersionSelect = useCallback((newVersion) => {
-    setVersion(newVersion);
-  }, []);
-
-  // Callback for file selection
-  const onFileSelect = useCallback(
-    (id) => {
-      if (editorRef.current) {
-        const currentContent = editorRef.current.getValue();
-        console.log(currentContent);
-        setOpenFiles((prevFiles) =>
-          prevFiles.map((f) =>
-            f.id === activeFileId ? { ...f, content: currentContent } : f
-          )
-        );
-      }
-
-      const selectedFile = openFiles.find((f) => f.id === id);
-      if (selectedFile) {
-        setActiveFileId(id);
-        setLanguage(selectedFile.language || "javascript");
-        setCode(selectedFile.content);
-        
-      }
-    },
-    [openFiles, activeFileId]
-  );
-
-  // Callback for closing a file
-  const onFileClose = useCallback(
-    (idToClose) => {
-      setOpenFiles((prevFiles) => {
-        const remainingFiles = prevFiles.filter((f) => f.id !== idToClose);
-
-        // If no files left, create a default untitled file
-        if (remainingFiles.length === 0) {
-          const newFileId = `file-${Date.now()}`;
-          const newFile = {
-            id: newFileId,
-            name: `untitled.js`,
-            content: CODE_SNIPPETS["javascript"],
-            language: "javascript",
-          };
-          setActiveFileId(newFileId);
-          setLanguage("javascript");
-          setCode(newFile.content);
-          if (editorRef.current) {
-            editorRef.current.setValue(newFile.content);
-          }
-          return [newFile];
-        }
-
-        // If the closed file was the active one, switch to the first remaining file
-        if (activeFileId === idToClose) {
-          const newActive = remainingFiles[0];
-          setActiveFileId(newActive.id);
-          setLanguage(newActive.language || "javascript");
-          setCode(newActive.content);
-          if (editorRef.current) {
-            editorRef.current.setValue(newActive.content);
-          }
-        }
-        return remainingFiles;
-      });
-    },
-    [activeFileId]
-  );
-
-  // Callback for creating a new file
-  const onNewFile = useCallback(() => {
-    if (editorRef.current) {
-      const currentContent = editorRef.current.getValue();
-      setOpenFiles((prevFiles) =>
-        prevFiles.map((f) =>
-          f.id === activeFileId ? { ...f, content: currentContent } : f
-        )
-      );
-    }
-
-    const newFileId = `file-${Date.now()}`;
-    const newFileName = `untitled-${openFiles.length + 1}.js`;
-    const newFile = {
-      id: newFileId,
-      name: newFileName,
-      content: "",
-      language: "javascript",
-    };
-
-    setOpenFiles((prevFiles) => [...prevFiles, newFile]);
-    setActiveFileId(newFileId);
-    setLanguage("javascript");
-    setCode(""); // New file starts empty
-  }, [openFiles.length, activeFileId]);
-
-  // Function to run the code
-  const runCode = useCallback(async () => {
-    const sourceCode = editorRef.current?.getValue();
-    if (!sourceCode) return; // Don't run if editor is empty
-
-    try {
-      setIsLoading(true);
-      const { run: result } = await executeCode(language, sourceCode);
-      setOutput(result || { stdout: "", stderr: "", compile_output: "" }); // Ensure all fields are present
-      setIsError(!!result?.stderr || !!result?.compile_output); // Set error if stderr or compile_output exist
-      setShowOutput(true); // Always show output when attempting to run
-    } catch (error) {
-      console.error("Error during code execution:", error);
-      setOutput({
-        stdout: "",
-        stderr: `Execution Error: ${error.message || "Unable to run code"}`,
-        compile_output: "",
-      });
-      setIsError(true);
-      setShowOutput(true);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [language]); // Depend on language to ensure latest selected language is used
-
-  // Effect for Ctrl + Enter shortcut to run code
-  useEffect(() => {
-    if (enterPress && ctrlPress) {
-      runCode();
-    }
-  }, [ctrlPress, enterPress, runCode]);
-
-  // Effect to update editor height on window resize
-  useEffect(() => {
-    const updateEditorHeight = () => {
-      setEditorHeight(window.innerHeight - TOP_BAR_HEIGHT - FILE_BAR_HEIGHT);
-    };
-
-    window.addEventListener("resize", updateEditorHeight);
-    updateEditorHeight(); // Initial height calculation
-
-    return () => window.removeEventListener("resize", updateEditorHeight); // Cleanup
-  }, []); // Runs once on mount and cleans up on unmount
-
-  return (
-    <div
-      className={`w-full h-screen flex flex-col overflow-hidden
-                  ${
-                    theme === "dark"
-                      ? "bg-dark-background-primary"
-                      : "bg-light-background-primary"
-                  }`} // Use theme background
-      ref={containerRef}
-    >
-      <TopBar />
-
-      <FileBar
-        language={language}
-        onLanguageSelect={onLanguageSelect}
-        onRunCode={runCode}
-        isLoading={isLoading}
-        openFiles={openFiles}
-        activeFileId={activeFileId}
-        onFileSelect={onFileSelect}
-        onFileClose={onFileClose}
-        onNewFile={onNewFile}
-        onVersionSelect={onVersionSelect}
-      />
-
-      {/* Main content area: Editor */}
-      <div
-        className="flex flex-col flex-grow relative overflow-hidden rounded shadow-lg m-1"
-        // style={{ marginTop: `${TOP_BAR_HEIGHT + FILE_BAR_HEIGHT + 8}px` }}
-      >
-        <CodeEditorWindow
-          className="relative rounded-lg overflow-hidden"
-          style={{ height: `${editorHeight}px` }}
-          onChange={onCodeChange}
-          activeFileId={activeFileId}
-          // openFiles = {openFiles}
-          language={language}
-          code={code}
-          onMount={onMount}
-        />
-        {/* No resizer handle needed here as output is fixed positioned */}
-      </div>
-
-      {/* Output Card - fixed positioned, so it doesn't affect layout flow */}
-      <Output
-        output={output}
-        isError={isError}
-        showOutput={showOutput}
-        toggleTerminal={setShowOutput}
-      />
-    </div>
-  );
-};
-
-export default CodeEditor;