diff --git a/.idea/deno.xml b/.idea/deno.xml
new file mode 100644
index 0000000..b03feb5
--- /dev/null
+++ b/.idea/deno.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DenoSettings">
+    <option name="useDeno" value="true" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/application/app.vue b/application/app.vue
index 734c653..2f29ce4 100644
--- a/application/app.vue
+++ b/application/app.vue
@@ -1,15 +1,26 @@
 <template>
-  <n-message-provider>
-    <n-dialog-provider>
-      <nuxt-layout>
-        <nuxt-loading-indicator />
-        <nuxt-page />
-      </nuxt-layout>
-    </n-dialog-provider>
-  </n-message-provider>
+  <n-config-provider :theme-overrides="theme">
+    <n-message-provider>
+      <n-dialog-provider>
+        <nuxt-layout>
+          <nuxt-loading-indicator />
+          <nuxt-page />
+        </nuxt-layout>
+      </n-dialog-provider>
+    </n-message-provider>
+  </n-config-provider>
 </template>
 
 <script setup lang="ts">
-import { NMessageProvider, NDialogProvider } from "naive-ui";
+import { NConfigProvider, NMessageProvider, NDialogProvider } from "naive-ui";
 import "@/assets/css/index.css";
+
+const theme = {
+  "common": {
+    "primaryColor": "#e7bf72",
+    "primaryColorHover": "#f1ca7a",
+    "primaryColorPressed": "#d6b26b",
+    "primaryColorSuppl": "#c49e55"
+  }
+};
 </script>
diff --git a/application/assets/css/index.css b/application/assets/css/index.css
index 4d646cc..4ddd86d 100644
--- a/application/assets/css/index.css
+++ b/application/assets/css/index.css
@@ -20,4 +20,9 @@ code, pre {
 
 pre {
   border-radius: 4px;
+}
+
+a {
+  color: #c49e55;
+  text-decoration: none;
 }
\ No newline at end of file
diff --git a/application/bun.lockb b/application/bun.lockb
index f6040fb..a0515e2 100755
Binary files a/application/bun.lockb and b/application/bun.lockb differ
diff --git a/application/components/problem/preview/program.vue b/application/components/problem/preview/program.vue
new file mode 100644
index 0000000..ae84ac0
--- /dev/null
+++ b/application/components/problem/preview/program.vue
@@ -0,0 +1,21 @@
+<template>
+  <n-card>
+    <n-code :hljs="hljs" :language="language" :code="props.answers?.code" />
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { NCard, NCode } from "naive-ui";
+import hljs from "highlight.js/lib/core";
+import cpp from "highlight.js/lib/languages/cpp";
+
+hljs.registerLanguage("cpp", cpp);
+
+const props = defineProps<{
+  challenge: any,
+  problem: any,
+  answers: any,
+}>();
+
+const language = computed(() => props.answers?.language ?? "text");
+</script>
\ No newline at end of file
diff --git a/application/package.json b/application/package.json
index 32024a1..73eaa36 100644
--- a/application/package.json
+++ b/application/package.json
@@ -26,6 +26,7 @@
     "@ibm/plex": "^6.3.0",
     "@nuxtjs/mdc": "^0.2.8",
     "@supabase/supabase-js": "^2.39.0",
+    "highlight.js": "^11.9.0",
     "prismjs": "^1.29.0"
   }
 }
diff --git a/application/pages/challenges/[id].vue b/application/pages/challenges/[id].vue
index 5ec251a..72c1805 100644
--- a/application/pages/challenges/[id].vue
+++ b/application/pages/challenges/[id].vue
@@ -12,17 +12,52 @@
         </n-page-header>
       </template>
 
-      <section>
+      <div id="answering-content" v-if="challenge?.status === 'in-progress'">
         <problem-solution-program
           v-if="problem.type === 'programming'"
           v-model:answers="answers"
           :challenge="challenge"
           :problem="problem"
         />
-      </section>
+      </div>
+
+      <div id="preview-challenge" class="flex flex-col gap-4" v-else>
+        <div>
+          <div class="font-bold">状态</div>
+          <div class="case-capital">{{ challenge?.status?.replaceAll("-", " ") }}</div>
+        </div>
+        <div>
+          <div class="font-bold">问题</div>
+          <div>
+            <nuxt-link target="_blank" :to="`/problems/${challenge.problem}`">
+              #{{ challenge?.problem }} | {{ problem?.title }}
+            </nuxt-link>
+          </div>
+        </div>
+        <div>
+          <div class="font-bold">答案</div>
+          <client-only>
+            <div class="mt-2 mx-[-4px]">
+              <problem-preview-program
+                v-if="problem.type === 'programming'"
+                :answers="answers"
+                :challenge="challenge"
+                :problem="problem"
+              />
+            </div>
+          </client-only>
+        </div>
+        <div>
+          <div class="font-bold">结果</div>
+          <n-card embedded class="mt-2 mx-[-4px]">
+            <div v-if="challenge?.details?.cases"></div>
+            <n-empty v-else description="未进行判题，暂无挑战结果" />
+          </n-card>
+        </div>
+      </div>
 
       <template #action>
-        <div class="w-full flex justify-between">
+        <div v-if="challenge?.status === 'in-progress'" id="answering-widgets" class="w-full flex justify-between">
           <div class="flex gap-2">
             <n-button secondary circle class="rounded-[4px]" type="warning" :disabled="submitting" @click="save">
               <template #icon>
@@ -41,7 +76,7 @@
 </template>
 
 <script setup lang="ts">
-import { NButton, NCard, NPageHeader, NTag, NIcon, useDialog, useMessage } from "naive-ui";
+import { NButton, NCard, NPageHeader, NTag, NIcon, NEmpty, useDialog, useMessage } from "naive-ui";
 import { Save } from "@vicons/carbon";
 
 const route = useRoute();
@@ -124,6 +159,36 @@ function abandon() {
 }
 
 async function submit() {
+  await save();
 
+  const instance = dialog.warning({
+    title: "警告",
+    content: "你确定要提交吗？确认提交后无法再次修改答案，等待判题可能需要一段时间。",
+    positiveText: "确定",
+    negativeText: "不确定",
+    onPositiveClick: async () => {
+      instance.loading = true;
+
+      const inst = message.loading("正在提交中，请稍后……");
+
+      const { error } = await client
+        .from("challenges")
+        // @ts-ignore
+        .update<any>({ status: "submitted" })
+        .eq("id", challenge.id);
+
+      if (error != null) {
+        message.error(`Something went wrong... ${error.message}`);
+      }
+
+      inst.destroy();
+      message.success("提交成功！即将跳转结果页面……");
+
+      const delay = (ms: number) => new Promise(res => setTimeout(res, ms));
+
+      await delay(1850);
+      reloadNuxtApp();
+    }
+  });
 }
 </script>
diff --git a/supabase/functions/judge-challenges/index.ts b/supabase/functions/judge-challenges/index.ts
new file mode 100644
index 0000000..f1b224e
--- /dev/null
+++ b/supabase/functions/judge-challenges/index.ts
@@ -0,0 +1,39 @@
+import { createClient } from "https://esm.sh/@supabase/supabase-js";
+
+Deno.serve(async (req) => {
+  try {
+    const client = createClient(
+      Deno.env.get('SUPABASE_URL') ?? '',
+      Deno.env.get('SUPABASE_ANON_KEY') ?? '',
+      { global: { headers: { Authorization: req.headers.get('Authorization')! } } }
+    )
+
+    const { data, error } = await client
+      .from('challenges')
+      .select<any, any>('*')
+      .eq('status', 'submitted')
+
+    if (error) {
+      throw error
+    }
+
+    return new Response(JSON.stringify({ data }), {
+      headers: { 'Content-Type': 'application/json' },
+      status: 200,
+    })
+  } catch (err) {
+    return new Response(String(err?.message ?? err), { status: 500 })
+  }
+});
+
+/* To invoke locally:
+
+  1. Run `supabase start` (see: https://supabase.com/docs/reference/cli/supabase-start)
+  2. Make an HTTP request:
+
+  curl -i --location --request POST 'http://127.0.0.1:54321/functions/v1/judge-challenges' \
+    --header 'Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0' \
+    --header 'Content-Type: application/json' \
+    --data '{"name":"Functions"}'
+
+*/