diff --git a/src/app/problems/[qid]/statements/EditStatement.tsx b/src/app/problems/[qid]/statements/EditStatement.tsx
new file mode 100644
index 0000000..88fc7c7
--- /dev/null
+++ b/src/app/problems/[qid]/statements/EditStatement.tsx
@@ -0,0 +1,68 @@
+import {
+ Button,
+ Paper,
+ Stack,
+ TextField,
+ Typography,
+ ButtonGroup,
+} from '@mui/material';
+
+// As same as Polygon, the page link is same for creating new language and editing existed language
+// It can be divided into two pages if needed
+
+export default function EditStatement({
+ language,
+ languageName,
+}: {
+ language: string;
+ languageName: string;
+}) {
+ // have to fetch the statement and tutorial from the server by the language
+ return (
+
+
+
+
+
+ Edit {languageName}({language}) Statement
+
+
+
+
+
+
+
+
+ It is recommended to use simple TeX, “Preview in HTML” feature
+ supports only subset of TeX markup
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/problems/[qid]/statements/NewLanguage.tsx b/src/app/problems/[qid]/statements/NewLanguage.tsx
new file mode 100644
index 0000000..1665eed
--- /dev/null
+++ b/src/app/problems/[qid]/statements/NewLanguage.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { Button, Paper, Stack, TextField, Autocomplete, Link } from '@mui/material';
+import { useState } from 'react';
+
+// As same as Polygon, the page link is same for creating new language and editing existed language
+// It can be divided into two pages if needed
+
+export default function NewLanguage({
+ languageList,
+ existedLanguageList,
+}: {
+ languageList: { label: string; value: string }[];
+ existedLanguageList: { label: string; value: string }[];
+}) {
+ // cloneClicked variable is used to show the existedLanguageList when the user wants to clone
+ const [cloneClicked, setCloneClicked] = useState(false);
+ return (
+
+
+
+ !existedLanguageList.find(
+ (existedLang) => existedLang.value === lang.value,
+ ),
+ )}
+ getOptionLabel={(option) => option.label}
+ renderInput={(params) => (
+
+ If you want to clone statement and tutorial from existing,{' '}
+ setCloneClicked(true)}>
+ click here
+
+
+ )
+ }
+ />
+ )}
+ />
+ {cloneClicked && (
+ option.label}
+ renderInput={(params) => (
+
+ )}
+ />
+ )}
+
+
+
+ );
+}
diff --git a/src/app/problems/[qid]/statements/StatementNavbar.tsx b/src/app/problems/[qid]/statements/StatementNavbar.tsx
new file mode 100644
index 0000000..b676496
--- /dev/null
+++ b/src/app/problems/[qid]/statements/StatementNavbar.tsx
@@ -0,0 +1,42 @@
+import { Tabs, Tab, Box, Button, Stack, ButtonGroup } from '@mui/material';
+
+export default function StatementNavbar({
+ existedLanguageList,
+ language,
+}: {
+ existedLanguageList: { label: string; value: string }[];
+ language: string;
+}) {
+ return (
+
+
+
+
+ {existedLanguageList.map((lang) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/app/problems/[qid]/statements/page.tsx b/src/app/problems/[qid]/statements/page.tsx
new file mode 100644
index 0000000..9e57f11
--- /dev/null
+++ b/src/app/problems/[qid]/statements/page.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import { Stack } from '@mui/material';
+import { useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+
+import NewLanguage from './NewLanguage';
+import EditStatement from './EditStatement';
+import StatementNavbar from './StatementNavbar';
+
+// languageList variable is all-supported languages
+// if it needs to be fetched from the server, it should be done in the useEffect hook
+const languageList = [
+ { label: 'Korean', value: 'ko' },
+ { label: 'English', value: 'en' },
+ { label: 'Japanese', value: 'ja' },
+ { label: 'Chinese', value: 'zh' },
+ { label: 'Vietnamese', value: 'vi' },
+ { label: 'Russian', value: 'ru' },
+ { label: 'French', value: 'fr' },
+];
+
+export default function Problem() {
+ // existedLanguageList variable is the list of languages that already have statements and tutorials
+ // it should be fetched from the server in the useEffect hook
+ const [existedLanguageList] = useState([
+ { label: 'English', value: 'en' },
+ { label: 'French', value: 'fr' },
+ ]);
+ // get query parameters
+ const searchParams = useSearchParams();
+ const [language] = useState(searchParams.get('language') || '');
+ return (
+
+
+ {!existedLanguageList.find((lang) => lang.value === language) && (
+
+ )}
+ {existedLanguageList.find((lang) => lang.value === language) && (
+ lang.value === language)?.label || ''
+ }
+ />
+ )}
+
+ );
+}