diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 9dd47e1..e02617d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -111,97 +111,96 @@ function App() {
 
       <div className="flex h-[calc(100vh-4rem)]">
         {/* Language Selection Sidebar */}
-<div className="w-20 bg-gray-800 border-r border-gray-700 p-2 flex flex-col gap-2">
-  {(Object.keys(LANGUAGE_CONFIGS) as Language[]).map((lang) => {
-    const { label, icon, color } = LANGUAGE_CONFIGS[lang];
-    return (
-      <button
-        key={lang}
-        onClick={() => handleLanguageChange(lang)}
-        className={`p-3 rounded-lg transition-all ${
-          selectedLanguage === lang
-            ? "bg-gray-700 shadow-lg scale-105"
-            : "hover:bg-gray-700/50"
-        } flex flex-col items-center gap-1`}
-      >
-        <i className={`${icon} ${color} text-2xl`} />
-        <span className="text-xs">{label}</span>
-      </button>
-    );
-  })}
-</div>
-
-        </div>
-
-        {/* Main Content */}
-        <div className="flex-1 flex">
-          {/* Editor Section */}
-          <div className="flex-1 border-r border-gray-700">
-            <div className="h-8 bg-gray-800 border-b border-gray-700 flex items-center justify-end gap-2 px-4">
-              <button
-                onClick={handleFormatCode}
-                className="p-1 hover:bg-gray-700 rounded transition-colors"
-                title="Format Code"
-              >
-                <Wand2 className="w-4 h-4 text-blue-400" />
-              </button>
+        <div className="w-20 bg-gray-800 border-r border-gray-700 p-2 flex flex-col gap-2">
+          {(Object.keys(LANGUAGE_CONFIGS) as Language[]).map((lang) => {
+            const { label, icon, color } = LANGUAGE_CONFIGS[lang];
+            return (
               <button
-                onClick={handleResetCode}
-                className="p-1 hover:bg-gray-700 rounded transition-colors"
-                title="Reset Code"
+                key={lang}
+                onClick={() => handleLanguageChange(lang)}
+                className={`p-3 rounded-lg transition-all ${selectedLanguage === lang
+                    ? "bg-gray-700 shadow-lg scale-105"
+                    : "hover:bg-gray-700/50"
+                  } flex flex-col items-center gap-1`}
               >
-                <RotateCcw className="w-4 h-4 text-yellow-400" />
+                <i className={`${icon} ${color} text-2xl`} />
+                <span className="text-xs">{label}</span>
               </button>
-            </div>
-            <div className="h-[calc(100%-2rem)]">
-              <Editor
-                height="100%"
-                defaultLanguage={selectedLanguage}
-                language={selectedLanguage}
-                value={code}
-                onChange={(value) => setCode(value || "")}
-                theme="vs-dark"
-                onMount={(editor) => setEditorInstance(editor)}
-                options={{
-                  minimap: { enabled: false },
-                  fontSize: 14,
-                  padding: { top: 16 },
-                  scrollBeyondLastLine: false,
-                  suggestOnTriggerCharacters: true,
-                  quickSuggestions: true,
-                  snippetSuggestions: "inline",
-                  wordBasedSuggestions: "matchingDocuments",
-                  parameterHints: {
-                    enabled: true,
-                    cycle: true,
-                  },
-                  suggest: {
-                    showKeywords: true,
-                    showSnippets: true,
-                    showClasses: true,
-                    showFunctions: true,
-                    showVariables: true,
-                    showWords: true,
-                    showMethods: true,
-                    showProperties: true,
-                  },
-                }}
-              />
-            </div>
+            );
+          })}
+        </div>
+
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 flex">
+        {/* Editor Section */}
+        <div className="flex-1 border-r border-gray-700">
+          <div className="h-8 bg-gray-800 border-b border-gray-700 flex items-center justify-end gap-2 px-4">
+            <button
+              onClick={handleFormatCode}
+              className="p-1 hover:bg-gray-700 rounded transition-colors"
+              title="Format Code"
+            >
+              <Wand2 className="w-4 h-4 text-blue-400" />
+            </button>
+            <button
+              onClick={handleResetCode}
+              className="p-1 hover:bg-gray-700 rounded transition-colors"
+              title="Reset Code"
+            >
+              <RotateCcw className="w-4 h-4 text-yellow-400" />
+            </button>
           </div>
+          <div className="h-[calc(100%-2rem)]">
+            <Editor
+              height="100%"
+              defaultLanguage={selectedLanguage}
+              language={selectedLanguage}
+              value={code}
+              onChange={(value) => setCode(value || "")}
+              theme="vs-dark"
+              onMount={(editor) => setEditorInstance(editor)}
+              options={{
+                minimap: { enabled: false },
+                fontSize: 14,
+                padding: { top: 16 },
+                scrollBeyondLastLine: false,
+                suggestOnTriggerCharacters: true,
+                quickSuggestions: true,
+                snippetSuggestions: "inline",
+                wordBasedSuggestions: "matchingDocuments",
+                parameterHints: {
+                  enabled: true,
+                  cycle: true,
+                },
+                suggest: {
+                  showKeywords: true,
+                  showSnippets: true,
+                  showClasses: true,
+                  showFunctions: true,
+                  showVariables: true,
+                  showWords: true,
+                  showMethods: true,
+                  showProperties: true,
+                },
+              }}
+            />
+          </div>
+        </div>
 
-          {/* Output Section */}
-          <div className="w-[40%] bg-gray-800 flex flex-col">
-            <div className="h-8 bg-gray-800 border-b border-gray-700 flex items-center px-4">
-              <h2 className="font-semibold">Output</h2>
-            </div>
-            <div className="flex-1 p-4 font-mono text-sm overflow-auto bg-gray-900 m-2 rounded-lg">
-              <pre>{output}</pre>
-            </div>
+        {/* Output Section */}
+        <div className="w-[40%] bg-gray-800 flex flex-col">
+          <div className="h-8 bg-gray-800 border-b border-gray-700 flex items-center px-4">
+            <h2 className="font-semibold">Output</h2>
+          </div>
+          <div className="flex-1 p-4 font-mono text-sm overflow-auto bg-gray-900 m-2 rounded-lg">
+            <pre>{output}</pre>
           </div>
         </div>
       </div>
     </div>
+    
   );
 }