diff --git a/src/pages/pages.tsx b/src/pages/pages.tsx
index 6cd5b45..8cff6ac 100644
--- a/src/pages/pages.tsx
+++ b/src/pages/pages.tsx
@@ -4,3 +4,4 @@ export { ErrorPage } from "./error-page";
export { HomePage } from "./home";
export { ProblemPage } from "./problem";
export { SearchPage } from "./search";
+export { SubmitPage } from "./submit";
diff --git a/src/pages/submit.tsx b/src/pages/submit.tsx
new file mode 100644
index 0000000..7a96257
--- /dev/null
+++ b/src/pages/submit.tsx
@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { Button, Col, Row, Select, Space } from "antd";
+import { PlayCircleOutlined } from "@ant-design/icons";
+
+import Editor from "../components/editor.tsx";
+import ProblemDetails from "../components/problem-details.tsx";
+import { useLoaderData } from "react-router-dom";
+import { DetailsResp } from "../api/problem.ts";
+
+const AvailLang = [
+ { value: "cpp", label: "C++" },
+ { value: "c", label: "C" },
+ { value: "python", label: "Python" },
+];
+
+const LangToMode: { [lang: string]: string } = {
+ cpp: "c_cpp",
+ c: "c_cpp",
+ python: "python",
+};
+
+export function SubmitPage() {
+ const details = useLoaderData() as DetailsResp;
+
+ const langOptions = AvailLang.filter((l) =>
+ details.context.Languages.some((x) => x.Lang === l.value),
+ );
+
+ const [lang, setLang] = useState(langOptions[0].value);
+
+ const funcMenu = (
+