diff --git a/.changes/contest.md b/.changes/contest.md
new file mode 100644
index 0000000..002d142
--- /dev/null
+++ b/.changes/contest.md
@@ -0,0 +1,5 @@
+---
+"algohub": patch:feat
+---
+
+Support create new contest.
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index ddcbfcd..639758f 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -28,7 +28,7 @@ dependencies = [
 
 [[package]]
 name = "algohub"
-version = "0.1.1-alpha.11"
+version = "0.1.1-alpha.12"
 dependencies = [
  "reqwest",
  "serde",
diff --git a/src/components/UniversalToolBar.vue b/src/components/UniversalToolBar.vue
index 5d69376..29b1e13 100644
--- a/src/components/UniversalToolBar.vue
+++ b/src/components/UniversalToolBar.vue
@@ -75,6 +75,16 @@ const createMenuItems = ref([
         command: () => {
             toast.add({ severity: 'info', summary: 'Coming soon...', detail: 'This feature is coming soon...' })
         }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'New Contest',
+        icon: 'pi pi-calendar',
+        command: () => {
+            router.push("/contest/create");
+        }
     }
 ]);
 const toggleCreateMenu = (event: any) => {
diff --git a/src/scripts/api.ts b/src/scripts/api.ts
index f7fba4d..12c657f 100644
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -10,6 +10,7 @@ import type {
   CreateProblem,
   Submission,
   Contest,
+  CreateContest,
 } from "./types";
 
 export interface Response<D> {
@@ -208,3 +209,12 @@ export const listAllContests = async (auth: Credentials) => {
     return handleAxiosError(AxiosError.from(error));
   }
 };
+
+export const createContest = async (data: CreateContest) => {
+  try {
+    const response = await axios.post("/contest/create", data);
+    return response.data as Response<Id>;
+  } catch (error) {
+    return handleAxiosError(AxiosError.from(error));
+  }
+};
diff --git a/src/scripts/types.ts b/src/scripts/types.ts
index 70ec937..5b35477 100644
--- a/src/scripts/types.ts
+++ b/src/scripts/types.ts
@@ -140,3 +140,18 @@ export interface Contest {
   created_at: string;
   updated_at: string;
 }
+
+export interface ContestData {
+  name: string;
+  mode: Mode;
+  visibility: Visibility;
+  description: string;
+  start_time: string;
+  end_time: string;
+  owner: RecordId;
+}
+
+export interface CreateContest {
+  auth: Credentials;
+  data: ContestData;
+}
diff --git a/src/views/contest/create.vue b/src/views/contest/create.vue
index 02b333c..e403176 100644
--- a/src/views/contest/create.vue
+++ b/src/views/contest/create.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { type FileUploadSelectEvent, usePrimeVue, useToast } from 'primevue';
-import { computed, reactive, ref } from 'vue';
+import { useToast } from 'primevue';
 import * as api from "@/scripts/api";
 import { useRouter } from 'vue-router';
 import { useAccountStore } from '@/scripts/store';
-import type { RecordId } from '@/scripts/types';
+import { ref } from 'vue';
+import { Mode, Visibility } from '@/scripts/types';
 
 const path = [{ label: 'New problem' }];
 
 const router = useRouter();
 const toast = useToast();
-const $primevue = usePrimeVue();
 
 const accountStore = useAccountStore();
 if (!accountStore.isLoggedIn) {
@@ -18,188 +17,66 @@ if (!accountStore.isLoggedIn) {
     router.push('/login');
 }
 
-const title = ref('');
+const name = ref('');
 const description = ref('');
-const input = ref('');
-const output = ref('');
-const samples = reactive<{ input: string, output: string }[]>([{ input: '', output: '' }]);
-const hint = ref('');
-const mode = ref<'ICPC' | 'OI'>('ICPC');
-const isPrivate = ref(false);
-const testCases = reactive<{ input: string, output: string }[]>([]);
-
-const timeLimit = ref<number>(1000);
-const memoryLimit = ref<number>(128);
-
-interface ProblemForm<T, N> {
-    title: T;
-    description: T;
-    input?: T;
-    output?: T;
-    samples: { input: T, output: T }[];
-    hint?: T;
-    time_limit: N;
-    memory_limit: N;
-    test_cases: { input: T, output: T }[];
-    owner: RecordId,
-    categories: string[];
-    tags: string[];
-    mode: 'ICPC' | 'OI';
-    private: boolean;
-}
-
-const validate = (form: ProblemForm<string, number>): boolean => {
-    if (!form.title || form.title.trim() === '') {
-        toast.add({ severity: 'error', summary: 'Error', detail: 'Title should not be a blank', life: 3000 });
-        return false;
-    } else if (form.title.length > 32) {
-        toast.add({ severity: 'error', summary: 'Error', detail: 'Title is too long (max 32 characters)', life: 3000 });
-        return false;
-    }
-    if (!form.description || form.description.trim() === '') {
-        toast.add({ severity: 'error', summary: 'Error', detail: 'Description should not be a blank', life: 3000 });
-        return false;
-    } else if (form.description.length > 2000) {
-        toast.add({ severity: 'error', summary: 'Error', detail: 'Description is too long (max 2000 characters)', life: 3000 });
-        return false;
-    }
-    return true;
-}
+const start_time = ref<Date>();
+const end_time = ref<Date>();
 
 const inProgress = ref(false);
-const onCreateProblem = async () => {
-    const problem: ProblemForm<string, number> = {
-        title: title.value,
-        description: description.value,
-        input: input.value || undefined,
-        output: output.value || undefined,
-        samples: samples.map(sample => ({ input: sample.input, output: sample.output })),
-        hint: hint.value || undefined,
-        time_limit: timeLimit.value,
-        memory_limit: memoryLimit.value,
-        test_cases: testCases.map(tc => ({ input: tc.input, output: tc.output })),
-        // @ts-ignore
-        owner: "account:" + accountStore.account.id,
-        categories: [],
-        tags: [],
-        mode: mode.value,
-        private: isPrivate.value
-    }
-    const valid = validate(problem);
-    if (!valid) return;
-
-    if (inProgress.value) return;
+const onCreateContest = async () => {
     inProgress.value = true;
-    const res = await api.createProblem({
-        id: accountStore.account.id!,
-        token: accountStore.account.token!,
-        ...problem,
-    });
+    const res = await api.createContest({
+        auth: accountStore.auth!,
+        data: {
+            name: name.value,
+            description: description.value,
+            start_time: start_time.value!.toISOString().replace('Z', ''),
+            end_time: end_time.value!.toISOString().replace('Z', ''),
+            mode: Mode.ICPC,
+            visibility: Visibility.Public,
+            owner: accountStore.recordId
+        }
+    })
     if (!res.success) {
-        inProgress.value = false;
-        return toast.add({ severity: 'error', summary: 'Error', detail: res.message, life: 3000 });
-    }
+        toast.add({ severity: 'error', summary: 'Error', detail: res.message, life: 3000 });
+    };
     inProgress.value = false;
-    router.push(`/problem/${res.data!.id}`);
-}
-
-const totalSize = ref(0);
-const totalUploadedSize = ref(0);
-const totalSizePercent = computed(() => (totalUploadedSize.value / totalSize.value) * 100);
-const normalizedFiles = ref<{ input?: File, output?: File }[]>([]);
-
-const onRemoveTemplatingFile = (
-    type: 'input' | 'output',
-    context: {
-        removeFileCallback: (index: number) => void,
-        plainFiles: File[],
-        normalizedIndex: number,
-    }
-) => {
-    const testCase = normalizedFiles.value[context.normalizedIndex];
-    const fileRemoved = type === 'input' ? testCase.input! : testCase.output!;
-    testCase[type] = undefined;
-    if (!testCase.input && !testCase.output) {
-        normalizedFiles.value.splice(context.normalizedIndex, 1);
-    }
-    context.removeFileCallback(context.plainFiles.indexOf(fileRemoved));
-    totalSize.value -= parseInt(formatSize(fileRemoved.size));
-    return true;
-};
-
-const onClearTemplatingUpload = (clear: () => void) => {
-    clear();
-    totalSize.value = 0;
-    totalUploadedSize.value = 0;
-};
-
-const onSelectedFiles = (event: FileUploadSelectEvent) => {
-    normalizedFiles.value = normalizeFiles(event.files);
-
-    event.files.forEach((file: File) => {
-        totalSize.value += parseInt(formatSize(file.size));
-    });
-};
-
-const normalizeFiles = (files: File[]) => {
-    const normalizedFiles: { input?: File, output?: File }[] = [];
-
-    files.forEach((file) => {
-        const dotIndex = file.name.lastIndexOf('.');
-        const fileName = file.name.substring(0, dotIndex);
-        const extension = file.name.substring(dotIndex + 1);
-
-        if (extension === 'in') {
-            const index = normalizedFiles.findIndex(f => f.output?.name === fileName + '.out');
-            if (index !== -1) {
-                normalizedFiles[index].input = file;
-            } else {
-                normalizedFiles.push({ input: file });
-            }
-        } else if (extension === 'out') {
-            const index = normalizedFiles.findIndex(f => f.input?.name === fileName + '.in');
-            if (index !== -1) {
-                normalizedFiles[index].output = file;
-            } else {
-                normalizedFiles.push({ output: file });
-            }
-        }
-    });
-
-    return normalizedFiles;
+    router.push('/contest/' + res.data!.id);
 }
-
-const formatSize = (bytes: number) => {
-    const k = 1024;
-    const dm = 3;
-    const sizes = $primevue.config.locale?.fileSizeTypes || [0];
-
-    if (bytes === 0) {
-        return `0 ${sizes[0]}`;
-    }
-
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
-
-    return `${formattedSize} ${sizes[i]}`;
-};
 </script>
 
 <template>
     <div class="flex-1 flex flex-col">
         <UniversalToolBar :path></UniversalToolBar>
-        <div class="max-w-full md:max-w-[768px] mx-auto">
-            <Panel class="mt-10">
-                
+        <div class="max-w-full w-[768px] md:max-w-[768px] mx-auto">
+            <Panel class="mt-10 w-full h-full">
+                <div class="flex flex-col gap-8 w-full">
+                    <div class="mt-10 text-center">
+                        <span class="text-gray-500 mb-4">Create a new contest</span>
+                        <h1 class="text-3xl font-bold">Create contest</h1>
+                    </div>
+                    <div class="flex flex-row gap-4">
+                        <div class="flex flex-col">
+                            <label for="owner">Owner *</label>
+                            <Select name="owner" disabled></Select>
+                        </div>
+                        <span class="flex flex-col justify-end">
+                            <span class="text-bold mb-2">/</span>
+                        </span>
+                        <div class="flex flex-col">
+                            <label for="name">Name *</label>
+                            <InputText v-model="name" name="name"></InputText>
+                        </div>
+                    </div>
+                    <MarkdownEditor v-model="description" placeholder="Description"></MarkdownEditor>
+                    <div class="flex flex-row gap-4">
+                        <DatePicker v-model="start_time" placeholder="Start date" showTime></DatePicker>
+                        <DatePicker v-model="end_time" placeholder="End date" showTime></DatePicker>
+                    </div>
+                    <Button @click="onCreateContest" :loading="inProgress" label="Save Changes"></Button>
+                </div>
             </Panel>
         </div>
         <UniversalFooter></UniversalFooter>
     </div>
 </template>
-
-<style scoped>
-:deep(svg.md-editor-icon) {
-    width: revert-layer;
-    height: revert-layer;
-}
-</style>
\ No newline at end of file
diff --git a/src/views/dashboard.vue b/src/views/dashboard.vue
index 9cc2c67..0bd4883 100644
--- a/src/views/dashboard.vue
+++ b/src/views/dashboard.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useAccountStore, useThemeStore } from '@/scripts/store';
+import { useAccountStore } from '@/scripts/store';
 import { onMounted, ref } from 'vue';
 import * as api from '@/scripts/api';
 import { useRouter } from 'vue-router';
 import { useToast } from 'primevue';
-import { UserProblem } from '@/scripts/types';
+import type { Contest, UserProblem } from '@/scripts/types';
 
 const path = [{ label: 'Dashboard' }];
 
@@ -17,12 +17,12 @@ if (!accountStore.isLoggedIn) {
     router.push("/login");
 }
 
-const themeStore = useThemeStore();
-
 const problemList = ref<UserProblem[]>([]);
+const contests = ref<Contest[]>([]);
 
 const loadingProfile = ref(true);
 const loadingProblems = ref(true);
+const loadingContests = ref(true);
 onMounted(async () => {
     if (!accountStore.isLoggedIn) return;
     const profile = await api.fetchProfile(accountStore.account.id!);
@@ -45,6 +45,12 @@ onMounted(async () => {
     }
     problemList.value = problems.data!;
     loadingProblems.value = false;
+    const contestsRes = await api.listAllContests(accountStore.auth!);
+    if (!contestsRes.success) {
+        return toast.add({ severity: 'error', summary: 'Error', detail: contestsRes.message, life: 3000 });
+    }
+    contests.value = contestsRes.data!;
+    loadingContests.value = false;
 })
 </script>
 
@@ -104,9 +110,37 @@ onMounted(async () => {
                 </div>
             </aside>
             <div class="w-full h-full flex-1">
-                <div class="flex flex-col items-center mb-4">
-                    <Image :src="themeStore.logo"></Image>
-                    <span>Coming soon...</span>
+                <div class="w-full h-full overflow-auto">
+                    <div v-if="!loadingContests" class="flex flex-col items-center m-8 gap-8">
+                        <Card @click="router.push('/contest/' + contest.id)" v-if="contests.length > 0"
+                            v-for="contest in contests" class="w-full cursor-pointer shadow transition hover:shadow-lg">
+                            <template #title>
+                                <div class="flex flex-row items-center justify-between">
+                                    <span class="text-lg font-bold text-blue-500">
+                                        {{ contest.name }}
+                                    </span>
+                                    <Badge size="small" severity="success">{{ contest.mode }}</Badge>
+                                </div>
+                            </template>
+                            <template #subtitle>
+                                <span class="text-xs lg:text-sm">西南石油大学 ACM 学会</span>
+                            </template>
+                            <template #content>
+                                <p class="m-0 text-sm text-gray-500"> {{ contest.description }}</p>
+                            </template>
+                            <template #footer>
+                                <div class="flex flex-row items-center justify-between">
+                                    <span class="text-xs">From {{ contest.start_time }} to {{ contest.end_time }}</span>
+                                </div>
+                            </template>
+                        </Card>
+                        <div v-else class="w-full my-5 flex flex-col items-center text-gray-500 text-sm text-center">
+                            <span>No contests found.</span>
+                        </div>
+                    </div>
+                    <div v-else class="w-full h-full flex items-center justify-center">
+                        <ProgressSpinner></ProgressSpinner>
+                    </div>
                 </div>
             </div>
         </div>