diff --git a/packages/apps/board/src/auto-imports.d.ts b/packages/apps/board/src/auto-imports.d.ts
index f976a326..9c32a07b 100644
--- a/packages/apps/board/src/auto-imports.d.ts
+++ b/packages/apps/board/src/auto-imports.d.ts
@@ -13,6 +13,8 @@ declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const LastBlockDisplayType: typeof import('./composables/type')['LastBlockDisplayType']
   const Pagination: typeof import('./composables/pagination')['Pagination']
+  const RATING_DATA_HOST: typeof import('./composables/constant')['RATING_DATA_HOST']
+  const RATING_TITLE_SUFFIX: typeof import('./composables/constant')['RATING_TITLE_SUFFIX']
   const RESOLVER_TITLE_SUFFIX: typeof import('./composables/constant')['RESOLVER_TITLE_SUFFIX']
   const TITLE_SUFFIX: typeof import('./composables/constant')['TITLE_SUFFIX']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
@@ -335,6 +337,8 @@ declare module 'vue' {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly LastBlockDisplayType: UnwrapRef<typeof import('./composables/type')['LastBlockDisplayType']>
     readonly Pagination: UnwrapRef<typeof import('./composables/pagination')['Pagination']>
+    readonly RATING_DATA_HOST: UnwrapRef<typeof import('./composables/constant')['RATING_DATA_HOST']>
+    readonly RATING_TITLE_SUFFIX: UnwrapRef<typeof import('./composables/constant')['RATING_TITLE_SUFFIX']>
     readonly RESOLVER_TITLE_SUFFIX: UnwrapRef<typeof import('./composables/constant')['RESOLVER_TITLE_SUFFIX']>
     readonly TITLE_SUFFIX: UnwrapRef<typeof import('./composables/constant')['TITLE_SUFFIX']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
@@ -643,6 +647,8 @@ declare module '@vue/runtime-core' {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly LastBlockDisplayType: UnwrapRef<typeof import('./composables/type')['LastBlockDisplayType']>
     readonly Pagination: UnwrapRef<typeof import('./composables/pagination')['Pagination']>
+    readonly RATING_DATA_HOST: UnwrapRef<typeof import('./composables/constant')['RATING_DATA_HOST']>
+    readonly RATING_TITLE_SUFFIX: UnwrapRef<typeof import('./composables/constant')['RATING_TITLE_SUFFIX']>
     readonly RESOLVER_TITLE_SUFFIX: UnwrapRef<typeof import('./composables/constant')['RESOLVER_TITLE_SUFFIX']>
     readonly TITLE_SUFFIX: UnwrapRef<typeof import('./composables/constant')['TITLE_SUFFIX']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
diff --git a/packages/apps/board/src/components.d.ts b/packages/apps/board/src/components.d.ts
index 3308c12d..45d9d8bf 100644
--- a/packages/apps/board/src/components.d.ts
+++ b/packages/apps/board/src/components.d.ts
@@ -35,6 +35,7 @@ declare module 'vue' {
     ProblemBlock: typeof import('./components/board/ProblemBlock.vue')['default']
     ProblemInfoModal: typeof import('./components/board/ProblemInfoModal.vue')['default']
     Progress: typeof import('./components/board/Progress.vue')['default']
+    RatingIndexUI: typeof import('./components/RatingIndexUI.vue')['default']
     RightArrowIcon: typeof import('./components/icon/RightArrowIcon.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/packages/apps/board/src/components/RatingIndexUI.vue b/packages/apps/board/src/components/RatingIndexUI.vue
new file mode 100644
index 00000000..617ffe71
--- /dev/null
+++ b/packages/apps/board/src/components/RatingIndexUI.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { useElementVisibility } from "@vueuse/core";
+
+import type { IRatingIndex } from "@xcpcio/types/index";
+
+const props = defineProps<{
+  ratingIndex: IRatingIndex
+}>();
+
+const ratingIndex = computed(() => props.ratingIndex);
+
+const el = ref(null);
+const isVisible = useElementVisibility(el);
+
+const link = computed(() => {
+  return `/rating/${ratingIndex.value.id}`;
+});
+</script>
+
+<template>
+  <div ref="el">
+    <div h-22>
+      <div
+        v-if="isVisible"
+      >
+        <div
+          w-238
+          flex flex-col justify-center
+          font-serif pb-2
+          border="b-2 gray-200 dark:gray-700"
+        >
+          <div
+            w-full flex
+          >
+            <div
+              class="title"
+              w-inherit
+            >
+              <Tooltip>
+                <div
+                  overflow-hidden
+                  text-2xl truncate
+                >
+                  {{ ratingIndex.name }}
+                </div>
+
+                <template #popper>
+                  <div
+                    text-lg
+                  >
+                    {{ ratingIndex.name }}
+                  </div>
+                </template>
+              </Tooltip>
+            </div>
+
+            <div float-right>
+              <RouterLink
+                class="go MuiIconButton-root"
+                :to="link"
+              >
+                <span class="MuiIconButton-label">
+                  <RightArrowIcon />
+                </span>
+              </RouterLink>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.logo {
+  float: left;
+  text-align: left;
+  font-size: 16px;
+  padding-top: 12px;
+  padding-right: 8px;
+}
+
+.title {
+  --scroll-bar: 0;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  box-sizing: border-box;
+  position: relative;
+  text-align: left;
+  font-weight: 400;
+  padding-left: 0px;
+  padding-right: 16px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.MuiIconButton-root {
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+  line-height: 1.43;
+  letter-spacing: 0.01071em;
+  box-sizing: inherit;
+  border: 0;
+  cursor: pointer;
+  margin: 0;
+  display: inline-flex;
+  outline: 0;
+  position: relative;
+  align-items: center;
+  user-select: none;
+  vertical-align: middle;
+  justify-content: center;
+  text-decoration: none;
+  background-color: transparent;
+  -webkit-tap-highlight-color: transparent;
+  flex: 0 0 auto;
+  color: rgba(0, 0, 0, 0.54);
+  padding: 12px;
+  overflow: visible;
+  font-size: 1.5rem;
+  text-align: center;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 50%;
+}
+
+.MuiIconButton-label {
+  -webkit-font-smoothing: antialiased;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  line-height: 1.43;
+  letter-spacing: 0.01071em;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  color: rgba(0, 0, 0, 0.54);
+  font-size: 1.5rem;
+  text-align: center;
+  box-sizing: inherit;
+  width: 100%;
+  display: flex;
+  align-items: inherit;
+  justify-content: inherit;
+}
+
+.go {
+  text-decoration: none;
+  color: #121314;
+  position: relative;
+}
+
+.go:after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 60%;
+  left: -0.1em;
+  right: -0.1em;
+  bottom: 0;
+  transition: top 200ms cubic-bezier(0, 0.8, 0.13, 1);
+  background-color: #91d5ff;
+}
+
+.go:hover:after {
+  top: 0%;
+}
+
+.loading {
+  height: calc(100vh);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/packages/apps/board/src/composables/constant.ts b/packages/apps/board/src/composables/constant.ts
index 6972f343..6a2eef8e 100644
--- a/packages/apps/board/src/composables/constant.ts
+++ b/packages/apps/board/src/composables/constant.ts
@@ -1,4 +1,5 @@
 export const TITLE_SUFFIX = "Board - XCPCIO";
+export const RATING_TITLE_SUFFIX = "Rating - XCPCIO";
 export const BALLOON_TITLE_SUFFIX = "Balloon - XCPCIO";
 export const RESOLVER_TITLE_SUFFIX = "Resolver - XCPCIO";
 export const COUNTDOWN_TITLE_SUFFIX = "Countdown - XCPCIO";
@@ -19,6 +20,11 @@ export const DATA_HOST = computed(() => {
   return window.DATA_HOST;
 });
 
+export const RATING_DATA_HOST = computed(() => {
+  const dataHost = DATA_HOST.value;
+  return dataHost.replace("/data/", "/rating-data/");
+});
+
 export const DATA_REGION = computed(() => {
   if (!window) {
     return "";
diff --git a/packages/apps/board/src/pages/rating/index.vue b/packages/apps/board/src/pages/rating/index.vue
new file mode 100644
index 00000000..492caf99
--- /dev/null
+++ b/packages/apps/board/src/pages/rating/index.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { useFetch } from "@vueuse/core";
+
+import type { IRatingIndex } from "@xcpcio/types";
+
+const { t } = useI18n();
+useTitle(RATING_TITLE_SUFFIX);
+
+function genURL() {
+  return `${RATING_DATA_HOST.value}index/index.json`;
+}
+const url = ref(genURL());
+const indexList = ref([] as IRatingIndex[]);
+
+const {
+  error,
+  isFetching,
+  isFinished,
+} = useFetch(url, {
+  refetch: true,
+  afterFetch: (ctx) => {
+    indexList.value = JSON.parse(ctx.data) as IRatingIndex[];
+    return ctx;
+  },
+}).get();
+</script>
+
+<template>
+  <div
+    class="sm:w-[1024px] lg:w-screen"
+    lg:of-x-hidden
+    flex flex-col justify-center items-center
+  >
+    <div>
+      <div
+        v-if="isFetching || error"
+        mt-4 mb-4
+        class="sm:w-[1000px] lg:w-screen"
+        flex justify-center items-center
+      >
+        <div
+          v-if="isFetching"
+        >
+          {{ t("common.loading") }}...
+        </div>
+
+        <div
+          v-if="error"
+        >
+          {{ error }}
+        </div>
+      </div>
+
+      <div
+        v-if="isFinished"
+        class="sm:w-[1000px] lg:w-screen min-h-120"
+        flex flex-col items-center
+      >
+        <div
+          v-if="indexList.length"
+          mt-4
+        >
+          <template
+            v-for="item in indexList"
+            :key="item.id"
+          >
+            <RatingIndexUI
+              :rating-index="item"
+            />
+          </template>
+        </div>
+
+        <div v-else p10>
+          <div op40 italic mb5>
+            No result found
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: index-layout
+</route>
diff --git a/packages/apps/board/vite.config.ts b/packages/apps/board/vite.config.ts
index 5af5d97f..3ed8ff3e 100644
--- a/packages/apps/board/vite.config.ts
+++ b/packages/apps/board/vite.config.ts
@@ -20,6 +20,12 @@ import { createHtmlPlugin } from "vite-plugin-html";
 
 import packageJSON from "./package.json";
 
+const proxyConfig = {
+  // target: "https://board.xcpcio.com",
+  target: "http://127.0.0.1:8080",
+  changeOrigin: true,
+};
+
 export default defineConfig({
   resolve: {
     alias: {
@@ -185,11 +191,8 @@ export default defineConfig({
   server: {
     host: true,
     proxy: {
-      "/data": {
-        // target: "https://board.xcpcio.com",
-        target: "http://127.0.0.1:8080",
-        changeOrigin: true,
-      },
+      "/data": proxyConfig,
+      "/rating-data": proxyConfig,
     },
   },