diff --git a/application/app.vue b/application/app.vue
index 7c75e1b..dc69dd3 100644
--- a/application/app.vue
+++ b/application/app.vue
@@ -1,6 +1,7 @@
 <template>
   <n-message-provider>
     <nuxt-layout>
+      <nuxt-loading-indicator />
       <nuxt-page />
     </nuxt-layout>
   </n-message-provider>
diff --git a/application/assets/css/index.css b/application/assets/css/index.css
index d10da78..4d646cc 100644
--- a/application/assets/css/index.css
+++ b/application/assets/css/index.css
@@ -13,3 +13,11 @@ body {
   margin: 0;
   padding: 0;
 }
+
+code, pre {
+  font-family: "IBM Plex Mono", monospace;
+}
+
+pre {
+  border-radius: 4px;
+}
\ No newline at end of file
diff --git a/application/bun.lockb b/application/bun.lockb
index 102b0ee..705a14e 100755
Binary files a/application/bun.lockb and b/application/bun.lockb differ
diff --git a/application/components/problems/list.vue b/application/components/problems/list.vue
index 85a7239..2f30a9c 100644
--- a/application/components/problems/list.vue
+++ b/application/components/problems/list.vue
@@ -6,7 +6,7 @@
         <div class="text-xs font-normal">每天进步一点点！</div>
       </template>
       <n-list clickable hoverable>
-        <n-list-item v-for="item in (problems as any[])" class="px-[24px]">
+        <n-list-item v-for="item in problems" class="px-[24px]" @click="jump(item)">
           <n-thing :title="item?.title">
             <template #description>
               <div class="text-xs flex gap-2">
@@ -26,5 +26,9 @@ import { NCard, NList, NListItem, NThing, NTag } from "naive-ui";
 
 const client = useSupabaseClient();
 
-const { data: problems } = await client.from("problems").select(`*`).limit(20);
+const { data: problems } = await client.from("problems").select<any, any>("*").limit(20);
+
+function jump(item: any) {
+  navigateTo(`/problems/${item.id}`)
+}
 </script>
diff --git a/application/nuxt.config.ts b/application/nuxt.config.ts
index e532a34..c938a20 100644
--- a/application/nuxt.config.ts
+++ b/application/nuxt.config.ts
@@ -1,24 +1,22 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ["@unocss/nuxt", '@pinia/nuxt', '@nuxtjs/supabase'],
+  modules: ["@unocss/nuxt", "@pinia/nuxt", "@nuxtjs/supabase", "@nuxtjs/mdc"],
+  app: {
+    head: {
+      title: "Fuxi Programming",
+      titleTemplate: "%s | Fuxi",
+    },
+  },
   build: {
     transpile:
-      process.env.NODE_ENV === 'production'
-        ? [
-            'naive-ui',
-            'vueuc',
-            '@css-render/vue3-ssr',
-            '@juggle/resize-observer'
-          ]
-        : ['@juggle/resize-observer']
+      process.env.NODE_ENV === "production"
+        ? ["naive-ui", "vueuc", "@css-render/vue3-ssr", "@juggle/resize-observer"]
+        : ["@juggle/resize-observer"],
   },
   vite: {
     optimizeDeps: {
-      include:
-        process.env.NODE_ENV === 'development'
-          ? ['naive-ui', 'vueuc', 'date-fns-tz/formatInTimeZone']
-          : []
-    }
-  }
-})
\ No newline at end of file
+      include: process.env.NODE_ENV === "development" ? ["naive-ui", "vueuc", "date-fns-tz/formatInTimeZone"] : [],
+    },
+  },
+});
diff --git a/application/package.json b/application/package.json
index 3c860b7..545cafd 100644
--- a/application/package.json
+++ b/application/package.json
@@ -23,6 +23,8 @@
   },
   "dependencies": {
     "@ibm/plex": "^6.3.0",
-    "@supabase/supabase-js": "^2.39.0"
+    "@nuxtjs/mdc": "^0.2.8",
+    "@supabase/supabase-js": "^2.39.0",
+    "prismjs": "^1.29.0"
   }
 }
diff --git a/application/pages/problems/[id].vue b/application/pages/problems/[id].vue
new file mode 100644
index 0000000..1a09c5b
--- /dev/null
+++ b/application/pages/problems/[id].vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="md:max-w-[720px] mx-auto">
+    <n-card segmented>
+      <template #header>
+        <n-page-header @back="navigateTo('/')">
+          <template #title>{{ problem?.title }}</template>
+          <template #subtitle>
+            <div class="flex items-center gap-2">
+              <n-tag size="small" class="case-capital">{{ problem?.type }}</n-tag>
+            </div>
+          </template>
+        </n-page-header>
+      </template>
+
+      <m-d-c :value="problem?.description" class="problem-description" tag="article" />
+
+      <n-divider class="mx-[-24px] w-[calc(100%+48px)]" />
+
+      <section>
+        <div v-if="example" class="grid gap-4 -md:gird-cols-1 md:grid-cols-2">
+          <div>
+            <div>Example Input</div>
+            <pre class="language-text" v-if="example?.spec?.stdin">{{ example?.spec?.stdin }}</pre>
+            <pre class="language-text font-italic" v-else>本题无输入</pre>
+          </div>
+          <div>
+            <div>Example Output</div>
+            <pre class="language-text" v-if="example?.answer?.stdout">{{ example?.answer?.stdout }}</pre>
+            <pre class="language-text font-italic" v-else>本题无输出</pre>
+          </div>
+        </div>
+        <n-empty v-else description="本题无公开样例" />
+      </section>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NCard, NTag, NPageHeader, NDivider, NEmpty } from "naive-ui";
+import "prismjs/themes/prism.css";
+import "prismjs/prism";
+
+const client = useSupabaseClient();
+const route = useRoute();
+
+const { data: problem } = await client.from("problems").select<any, any>("*").eq("id", route.params.id).single();
+const { data: example } = await client
+  .from("problem_cases")
+  .select<any, any>("*")
+  .eq("problem", route.params.id)
+  .single();
+</script>
diff --git a/supabase/migrations/20231210071647_profiles.sql b/supabase/migrations/20231210071647_profiles.sql
index c2ee6ec..223d2af 100644
--- a/supabase/migrations/20231210071647_profiles.sql
+++ b/supabase/migrations/20231210071647_profiles.sql
@@ -2,18 +2,13 @@ create table public.profiles (
   id uuid not null references auth.users on delete cascade,
   username varchar(64),
   nickname varchar(256),
-  school_id int8,
-
+  school int8,
   primary key (id)
 );
-
 alter table public.profiles enable row level security;
-
-create policy "Public profiles are viewable by everyone." on profiles
-  for select using (true);
-
-create policy "Users can insert their own profile." on profiles
-  for insert with check (auth.uid() = id);
-
-create policy "Users can update own profile." on profiles
-  for update using (auth.uid() = id);
\ No newline at end of file
+create policy "Public profiles are viewable by everyone." on profiles for
+select using (true);
+create policy "Users can insert their own profile." on profiles for
+insert with check (auth.uid() = id);
+create policy "Users can update own profile." on profiles for
+update using (auth.uid() = id);
\ No newline at end of file
diff --git a/supabase/migrations/20231210071842_problems.sql b/supabase/migrations/20231210071842_problems.sql
index e956f0e..7007967 100644
--- a/supabase/migrations/20231210071842_problems.sql
+++ b/supabase/migrations/20231210071842_problems.sql
@@ -1,19 +1,30 @@
-create table
-  public.problems (
-    id bigint generated by default as identity,
-    title text not null,
-    description text not null,
-    type character varying not null,
-    tags character varying[] null,
-    author uuid null,
-    is_draft boolean null default true,
-    is_hidden boolean null default false,
-    created_at timestamp with time zone null default now(),
-    constraint problems_pkey primary key (id),
-    constraint problems_author_fkey foreign key (author) references auth.users (id)
-  ) tablespace pg_default;
-
+create table public.problems (
+  id bigint generated by default as identity,
+  title text not null,
+  description text not null,
+  type character varying not null,
+  tags character varying [] null,
+  author uuid null,
+  metadata jsonb null,
+  is_draft boolean null default true,
+  is_hidden boolean null default false,
+  created_at timestamp with time zone null default now(),
+  constraint problems_pkey primary key (id),
+  constraint problems_author_fkey foreign key (author) references auth.users (id)
+) tablespace pg_default;
 alter table public.problems enable row level security;
-
-create policy "Public problems are viewable by everyone." on problems
-  for select using (true);
\ No newline at end of file
+create policy "Public problems are viewable by everyone." on problems for
+select using (true);
+create table public.problem_cases (
+  id bigint generated by default as identity,
+  spec jsonb not null,
+  limitations jsonb not null,
+  answer jsonb not null,
+  problem int8 not null,
+  is_hidden bool not null default true,
+  constraint problem_cases_pkey primary key (id),
+  constraint problem_cases_author_fkey foreign key (problem) references public.problems (id)
+) tablespace pg_default;
+alter table public.problem_cases enable row level security;
+create policy "Public problem cases are viewable by everyone." on problem_cases for
+select using (is_hidden = false);
\ No newline at end of file
diff --git a/supabase/migrations/20231210135930_challenges.sql b/supabase/migrations/20231210135930_challenges.sql
new file mode 100644
index 0000000..63bc3bb
--- /dev/null
+++ b/supabase/migrations/20231210135930_challenges.sql
@@ -0,0 +1,14 @@
+create table public.challenges (
+  id bigint generated by default as identity,
+  answers jsonb not null,
+  details jsonb not null,
+  author uuid not null,
+  problem int8 not null,
+  status varchar(256) not null,
+  created_at timestamp with time zone null default now(),
+  constraint challenges_pkey primary key (id),
+  constraint challenges_author_fkey foreign key (author) references auth.users (id),
+  constraint challenges_problem_fkey foreign key (problem) references public.problems (id)
+) tablespace pg_default;
+alter table public.challenges enable row level security;
+create policy "The challagers can see their challenges" on "public"."challenges" for select to public using (auth.uid() = author) with check (true)
\ No newline at end of file