diff --git a/frontend/app/coding/page.tsx b/frontend/app/coding/page.tsx
new file mode 100644
index 0000000..09f7d94
--- /dev/null
+++ b/frontend/app/coding/page.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { useState } from 'react';
+import CodeEditorPanel from '@/components/coding/CodeEditorPanel';
+import { Language } from '@/lib/types/editor';
+
+export default function CodingPage() {
+  const [code, setCode] = useState<string>('');
+  const [language, setLanguage] = useState<Language>('javascript');
+
+  const handleCodeChange = (newCode: string) => {
+    setCode(newCode);
+    console.log('Code updated:', newCode);
+  };
+
+  const handleLanguageChange = (newLanguage: Language) => {
+    setLanguage(newLanguage);
+    console.log('Language changed to:', newLanguage);
+  };
+
+  return (
+    <div className="min-h-screen w-full bg-slate-950">
+      <div className="h-screen flex flex-col p-6">
+        <div className="mb-4">
+          <h1 className="text-2xl font-bold text-white mb-2">Code Challenge</h1>
+          <p className="text-slate-400">Write your solution below</p>
+        </div>
+        
+        <div className="flex-1 overflow-hidden">
+          <CodeEditorPanel
+            initialCode={code || undefined}
+            language={language}
+            onCodeChange={handleCodeChange}
+            onLanguageChange={handleLanguageChange}
+          />
+        </div>
+
+        <div className="mt-4 flex gap-3">
+          <button className="px-6 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors">
+            Submit
+          </button>
+          <button className="px-6 py-2 bg-slate-700 text-white rounded-lg font-medium hover:bg-slate-600 transition-colors">
+            Reset
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/coding/CodeEditor.tsx b/frontend/components/coding/CodeEditor.tsx
new file mode 100644
index 0000000..8c8e4b5
--- /dev/null
+++ b/frontend/components/coding/CodeEditor.tsx
@@ -0,0 +1,52 @@
+import Editor from '@monaco-editor/react';
+import { Language } from '@/lib/types/editor';
+import { MONACO_LANGUAGE_MAP } from '@/lib/constants/codeTemplates';
+
+interface CodeEditorProps {
+  code: string;
+  language: Language;
+  onChange: (value: string | undefined) => void;
+  readOnly?: boolean;
+}
+
+export default function CodeEditor({
+  code,
+  language,
+  onChange,
+  readOnly = false,
+}: CodeEditorProps) {
+  return (
+    <div className="h-full w-full">
+      <Editor
+        height="100%"
+        language={MONACO_LANGUAGE_MAP[language]}
+        value={code}
+        onChange={onChange}
+        theme="vs-dark"
+        options={{
+          minimap: { enabled: false },
+          fontSize: 14,
+          lineNumbers: 'on',
+          scrollBeyondLastLine: false,
+          automaticLayout: true,
+          tabSize: 2,
+          wordWrap: 'on',
+          readOnly,
+          quickSuggestions: true,
+          suggestOnTriggerCharacters: true,
+          acceptSuggestionOnEnter: 'on',
+          padding: { top: 16, bottom: 16 },
+          lineDecorationsWidth: 0,
+          lineNumbersMinChars: 3,
+          glyphMargin: false,
+          folding: true,
+          renderLineHighlight: 'all',
+          scrollbar: {
+            verticalScrollbarSize: 10,
+            horizontalScrollbarSize: 10,
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/components/coding/CodeEditorPanel.tsx b/frontend/components/coding/CodeEditorPanel.tsx
new file mode 100644
index 0000000..1a20395
--- /dev/null
+++ b/frontend/components/coding/CodeEditorPanel.tsx
@@ -0,0 +1,130 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Code, Maximize2, ChevronUp } from 'lucide-react';
+import { Language } from '@/lib/types/editor';
+import { CODE_TEMPLATES } from '@/lib/constants/codeTemplates';
+import LanguageSelector from './LanguageSelector';
+import CodeEditor from './CodeEditor';
+
+interface CodeEditorPanelProps {
+  initialCode?: string;
+  language?: Language;
+  onCodeChange?: (code: string) => void;
+  onLanguageChange?: (language: Language) => void;
+  readOnly?: boolean;
+}
+
+export default function CodeEditorPanel({
+  initialCode,
+  language: initialLanguage = 'javascript',
+  onCodeChange,
+  onLanguageChange,
+  readOnly = false,
+}: CodeEditorPanelProps) {
+  const [language, setLanguage] = useState<Language>(initialLanguage);
+  const [code, setCode] = useState<string>(
+    initialCode || CODE_TEMPLATES[initialLanguage]
+  );
+  const [autoComplete, setAutoComplete] = useState(true);
+  const [isSaved, setIsSaved] = useState(true);
+
+  useEffect(() => {
+    if (initialCode !== undefined) {
+      setCode(initialCode);
+    }
+  }, [initialCode]);
+
+  useEffect(() => {
+    if (initialLanguage) {
+      setLanguage(initialLanguage);
+    }
+  }, [initialLanguage]);
+
+  const handleLanguageChange = (newLanguage: Language) => {
+    setLanguage(newLanguage);
+    setCode(CODE_TEMPLATES[newLanguage]);
+    setIsSaved(false);
+    onLanguageChange?.(newLanguage);
+  };
+
+  const handleCodeChange = (value: string | undefined) => {
+    const newCode = value || '';
+    setCode(newCode);
+    setIsSaved(false);
+    onCodeChange?.(newCode);
+
+    setTimeout(() => {
+      setIsSaved(true);
+    }, 1000);
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-[#0f1e35] rounded-lg overflow-hidden">
+      <div className="flex items-center justify-between px-4 py-3 bg-[#1a2d4a] border-b border-[#2a3f5f]">
+        <div className="flex items-center gap-2">
+          <Code size={18} className="text-blue-400" />
+          <h2 className="text-white font-semibold">Code</h2>
+        </div>
+        <div className="flex items-center gap-3">
+          <Maximize2 size={16} className="text-gray-400 cursor-pointer hover:text-white transition-colors" />
+          <ChevronUp size={16} className="text-gray-400 cursor-pointer hover:text-white transition-colors" />
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between px-4 py-3 bg-[#0f1e35] border-b border-[#1a2d4a]">
+        <LanguageSelector
+          selectedLanguage={language}
+          onLanguageChange={handleLanguageChange}
+        />
+        <div className="flex items-center gap-4">
+          <label className="flex items-center gap-2 cursor-pointer">
+            <span className="text-sm text-gray-300">Auto Complete</span>
+            <button
+              onClick={() => setAutoComplete(!autoComplete)}
+              className={`relative w-11 h-6 rounded-full transition-colors ${
+                autoComplete ? 'bg-blue-500' : 'bg-gray-600'
+              }`}
+            >
+              <span
+                className={`absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform ${
+                  autoComplete ? 'translate-x-5' : 'translate-x-0'
+                }`}
+              />
+            </button>
+          </label>
+          <button className="p-1.5 hover:bg-[#1a2d4a] rounded transition-colors">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              className="text-gray-400"
+            >
+              <path
+                d="M13 8a5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5z"
+                stroke="currentColor"
+                strokeWidth="1.5"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-hidden">
+        <CodeEditor
+          code={code}
+          language={language}
+          onChange={handleCodeChange}
+          readOnly={readOnly}
+        />
+      </div>
+
+      <div className="px-4 py-2 bg-[#0f1e35] border-t border-[#1a2d4a]">
+        <span className="text-xs text-gray-400">
+          {isSaved ? 'Saved' : 'Saving...'}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/coding/LanguageSelector.tsx b/frontend/components/coding/LanguageSelector.tsx
new file mode 100644
index 0000000..2aaee40
--- /dev/null
+++ b/frontend/components/coding/LanguageSelector.tsx
@@ -0,0 +1,35 @@
+import { ChevronDown } from 'lucide-react';
+import { Language } from '@/lib/types/editor';
+import { LANGUAGE_LABELS } from '@/lib/constants/codeTemplates';
+
+interface LanguageSelectorProps {
+  selectedLanguage: Language;
+  onLanguageChange: (language: Language) => void;
+}
+
+const languages: Language[] = ['javascript', 'python', 'cpp', 'csharp'];
+
+export default function LanguageSelector({
+  selectedLanguage,
+  onLanguageChange,
+}: LanguageSelectorProps) {
+  return (
+    <div className="relative">
+      <select
+        value={selectedLanguage}
+        onChange={(e) => onLanguageChange(e.target.value as Language)}
+        className="appearance-none bg-[#1e3a5f] text-white px-4 py-2 pr-10 rounded-md cursor-pointer hover:bg-[#2a4770] transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm font-medium"
+      >
+        {languages.map((lang) => (
+          <option key={lang} value={lang}>
+            {LANGUAGE_LABELS[lang]}
+          </option>
+        ))}
+      </select>
+      <ChevronDown
+        className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-white"
+        size={16}
+      />
+    </div>
+  );
+}
diff --git a/frontend/lib/constants/codeTemplates.ts b/frontend/lib/constants/codeTemplates.ts
new file mode 100644
index 0000000..6e213fd
--- /dev/null
+++ b/frontend/lib/constants/codeTemplates.ts
@@ -0,0 +1,35 @@
+import { Language } from '../types/editor';
+
+export const CODE_TEMPLATES: Record<Language, string> = {
+  javascript: `function reverseWords(sentence) {
+  // your code here
+}`,
+  python: `def reverse_words(sentence):
+    # your code here
+    pass`,
+  cpp: `#include <string>
+using namespace std;
+
+string reverseWords(string sentence) {
+    // your code here
+}`,
+  csharp: `public class Solution {
+    public string ReverseWords(string sentence) {
+        // your code here
+    }
+}`,
+};
+
+export const LANGUAGE_LABELS: Record<Language, string> = {
+  javascript: 'JavaScript',
+  python: 'Python',
+  cpp: 'C++',
+  csharp: 'C#',
+};
+
+export const MONACO_LANGUAGE_MAP: Record<Language, string> = {
+  javascript: 'javascript',
+  python: 'python',
+  cpp: 'cpp',
+  csharp: 'csharp',
+};
diff --git a/frontend/lib/types/editor.ts b/frontend/lib/types/editor.ts
new file mode 100644
index 0000000..346c9fd
--- /dev/null
+++ b/frontend/lib/types/editor.ts
@@ -0,0 +1,19 @@
+export type Language = 'javascript' | 'python' | 'cpp' | 'csharp';
+
+export interface EditorState {
+  code: string;
+  language: Language;
+}
+
+export interface CodeEditorProps {
+  initialCode?: string;
+  language?: Language;
+  onCodeChange?: (code: string) => void;
+  onLanguageChange?: (language: Language) => void;
+  readOnly?: boolean;
+}
+
+export interface LanguageSelectorProps {
+  selectedLanguage: Language;
+  onLanguageChange: (language: Language) => void;
+}
diff --git a/frontend/package.json b/frontend/package.json
index 2ab31d4..73cc48b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
diff --git a/package-lock.json b/package-lock.json
index 2765a97..4f579b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -203,7 +203,6 @@
       "version": "0.6.0",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@swc/counter": "^0.1.3",
         "@xhmikosr/bin-wrapper": "^13.0.5",
@@ -246,7 +245,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@swc/counter": "^0.1.3",
         "@swc/types": "^0.1.24"
@@ -283,7 +281,6 @@
       "version": "22.18.0",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -294,7 +291,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -436,7 +432,6 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
       "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -483,7 +478,6 @@
       "version": "10.9.2",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -525,7 +519,6 @@
     "backend/node_modules/typeorm": {
       "version": "0.3.26",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@sqltools/formatter": "^1.2.5",
         "ansis": "^3.17.0",
@@ -652,7 +645,6 @@
       "version": "5.8.3",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -724,6 +716,7 @@
     "frontend": {
       "version": "0.1.0",
       "dependencies": {
+        "@monaco-editor/react": "^4.7.0",
         "@radix-ui/react-avatar": "^1.1.11",
         "@radix-ui/react-slot": "^1.2.4",
         "@radix-ui/react-tabs": "^1.1.13",
@@ -1077,7 +1070,6 @@
       "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.28.6",
         "@babel/generator": "^7.28.6",
@@ -3425,6 +3417,29 @@
       "integrity": "sha512-xgAyonlVVS+q7Vc7qLW0UrJU7rSFcETRWsqdXZtjzRU8dF+6CkozTK4V4y1LwOX7j8r/vHphjDeMeGI4tNGeGA==",
       "license": "MIT"
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.7.0.tgz",
+      "integrity": "sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -3454,7 +3469,6 @@
       "resolved": "https://registry.npmjs.org/@nestjs/common/-/common-11.1.14.tgz",
       "integrity": "sha512-IN/tlqd7Nl9gl6f0jsWEuOrQDaCI9vHzxv0fisHysfBQzfQIkqlv5A7w4Qge02BUQyczXT9HHPgHtWHCxhjRng==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "file-type": "21.3.0",
         "iterare": "1.2.1",
@@ -3502,7 +3516,6 @@
       "integrity": "sha512-7OXPPMoDr6z+5NkoQKu4hOhfjz/YYqM3bNilPqv1WVFWrzSmuNXxvhbX69YMmNmRYascPXiwESqf5jJdjKXEww==",
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@nuxt/opencollective": "0.4.1",
         "fast-safe-stringify": "2.1.1",
@@ -3599,7 +3612,6 @@
       "resolved": "https://registry.npmjs.org/@nestjs/platform-express/-/platform-express-11.1.12.tgz",
       "integrity": "sha512-GYK/vHI0SGz5m8mxr7v3Urx8b9t78Cf/dj5aJMZlGd9/1D9OI1hAl00BaphjEXINUJ/BQLxIlF2zUjrYsd6enQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cors": "2.8.5",
         "express": "5.2.1",
@@ -5251,7 +5263,6 @@
       "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -5509,7 +5520,6 @@
       "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -5520,7 +5530,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -5649,7 +5658,6 @@
       "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.54.0",
         "@typescript-eslint/types": "8.54.0",
@@ -6369,7 +6377,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6442,7 +6449,6 @@
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -6863,7 +6869,6 @@
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.4.tgz",
       "integrity": "sha512-1wVkUaAO6WyaYtCkcYCOx12ZgpGf9Zif+qXa4n+oYzK558YryKqiL6UWwd5DqiH3VRW0GYhTZQ/vlgJrCoNQlg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.4",
@@ -7242,7 +7247,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -7574,7 +7578,6 @@
       "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "readdirp": "^4.0.1"
       },
@@ -7631,15 +7634,13 @@
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/class-transformer/-/class-transformer-0.5.1.tgz",
       "integrity": "sha512-SQa1Ws6hUbfC98vKGxZH3KFY0Y1lm5Zm0SY8XX9zbK7FJCyVEac3ATW0RIpwzW+oOfmHE5PMPufDG9hCfoEOMw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/class-validator": {
       "version": "0.14.3",
       "resolved": "https://registry.npmjs.org/class-validator/-/class-validator-0.14.3.tgz",
       "integrity": "sha512-rXXekcjofVN1LTOSw+u4u9WXVEUvNBVjORW154q/IdmYWy1nMbOU9aNtZB0t8m+FJQ9q91jlr2f9CwwUFdFMRA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/validator": "^13.15.3",
         "libphonenumber-js": "^1.11.1",
@@ -8470,6 +8471,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.7.tgz",
+      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "peer": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.4.7",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
@@ -8831,7 +8842,6 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -8920,7 +8930,6 @@
       "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -9022,7 +9031,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -9497,7 +9505,6 @@
       "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
       "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.1",
@@ -10837,7 +10844,6 @@
       "resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.9.2.tgz",
       "integrity": "sha512-tAAg/72/VxOUW7RQSX1pIxJVucYKcjFjfvj60L57jrZpYCHC3XN0WCQ3sNYL4Gmvv+7GPvTAjc+KSdeNuE8oWQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ioredis/commands": "1.5.0",
         "cluster-key-slot": "^1.1.0",
@@ -11504,7 +11510,6 @@
       "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/core": "^29.7.0",
         "@jest/types": "^29.6.3",
@@ -13075,6 +13080,19 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/marked": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-14.0.0.tgz",
+      "integrity": "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -13471,6 +13489,17 @@
       "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
       "license": "MIT"
     },
+    "node_modules/monaco-editor": {
+      "version": "0.55.1",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
+      "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "dompurify": "3.2.7",
+        "marked": "14.0.0"
+      }
+    },
     "node_modules/motion-dom": {
       "version": "12.34.3",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.34.3.tgz",
@@ -14249,7 +14278,6 @@
       "resolved": "https://registry.npmjs.org/passport/-/passport-0.7.0.tgz",
       "integrity": "sha512-cPLl+qZpSc+ireUvt+IzqbED1cHHkDoVYMo30jbJIdOOjQ1MQYZBPiNvmi8UM6lJuOpTPXJGZQk0DtC4y61MYQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "passport-strategy": "1.x.x",
         "pause": "0.0.1",
@@ -14419,7 +14447,6 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.18.0.tgz",
       "integrity": "sha512-xqrUDL1b9MbkydY/s+VZ6v+xiMUmOUk7SS9d/1kpyQxoJ6U9AO1oIJyUWVZojbfe5Cc/oluutcgFG4L9RDP1iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.11.0",
         "pg-pool": "^3.11.0",
@@ -14736,7 +14763,6 @@
       "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -14996,7 +15022,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -15006,7 +15031,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -15026,7 +15050,6 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -15098,8 +15121,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -15114,8 +15136,7 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz",
       "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
@@ -15418,7 +15439,6 @@
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
       "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -16069,7 +16089,6 @@
       "integrity": "sha512-GGIyOiFaG+TUra3JIfkI/zGP8yZYLPQ0pl1bH+ODjiX57sPhrLU5sQJn1y9bDKZUFYkX1crlrPfSYt0BKKdkog==",
       "hasInstallScript": true,
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "bindings": "^1.5.0",
         "node-addon-api": "^7.0.0",
@@ -16157,6 +16176,12 @@
       "integrity": "sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==",
       "license": "MIT"
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
     "node_modules/statuses": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
@@ -16840,7 +16865,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -17045,7 +17069,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -17467,7 +17490,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -17915,6 +17937,7 @@
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ajv": "^8.0.0"
       },
@@ -17933,6 +17956,7 @@
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -17945,7 +17969,8 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
       "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/webpack/node_modules/eslint-scope": {
       "version": "5.1.1",
@@ -17953,6 +17978,7 @@
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -17967,6 +17993,7 @@
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -17976,7 +18003,8 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/webpack/node_modules/schema-utils": {
       "version": "4.3.3",
@@ -17984,6 +18012,7 @@
       "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
diff --git a/package.json b/package.json
index cbd4eee..eba2a79 100644
--- a/package.json
+++ b/package.json
@@ -31,8 +31,8 @@
   "dependencies": {
     "@nestjs/common": "^11.1.14",
     "@nestjs/core": "^11.1.14",
-    "framer-motion": "^12.34.3",
     "@tanstack/react-query": "^5.90.21",
+    "framer-motion": "^12.34.3",
     "minimatch": "^10.1.1",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.2",