diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index c7149d4..10043a0 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -3,6 +3,7 @@ import type * as Preset from '@docusaurus/preset-classic';
 import { themes as prismThemes } from 'prism-react-renderer';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
+import path from 'path';
 
 const defaultLocale = 'zh';
 
@@ -83,7 +84,18 @@ const config: Config = {
         indexDocs: true,
       },
     ],
-    require.resolve("docusaurus-plugin-image-zoom"),
+    [
+      path.resolve(__dirname, 'plugin-dynamic-routes/index.ts'),
+      {
+        routes: [
+          {
+            path: '/leaderboards',
+            exact: false,
+            component: '../src/pages/leaderboards_page/index.tsx',
+          }
+        ]
+      }
+    ],
   ],
 
   themes: ['@docusaurus/theme-mermaid'],
diff --git a/i18n/en/code.json b/i18n/en/code.json
index 0171d6b..f2275ed 100644
--- a/i18n/en/code.json
+++ b/i18n/en/code.json
@@ -393,5 +393,17 @@
   },
   "communityLeaderboard.noDataForMonth": {
     "message": "No data found for this month"
+  },
+  "leaderboards.projects.title": {
+    "message": "2024 Global Project OpenRank Leaderboard Top 100"
+  },
+  "leaderboards.projects.name": {
+    "message": "Project Name"
+  },
+  "leaderboards.projects.initiator": {
+    "message": "Initiator"
+  },
+  "leaderboards.projects.country": {
+    "message": "Initiator Country"
   }
 }
diff --git a/i18n/zh/code.json b/i18n/zh/code.json
index e21051d..4568de4 100644
--- a/i18n/zh/code.json
+++ b/i18n/zh/code.json
@@ -393,5 +393,17 @@
   },
   "communityLeaderboard.noDataForMonth": {
     "message": "当月数据未找到"
+  },
+  "leaderboards.projects.title": {
+    "message": "2024 全球项目 OpenRank 排行榜 Top 100"
+  },
+  "leaderboards.projects.name": {
+    "message": "项目名"
+  },
+  "leaderboards.projects.initiator": {
+    "message": "发起组织"
+  },
+  "leaderboards.projects.country": {
+    "message": "发起组织所在国家"
   }
 }
diff --git a/plugin-dynamic-routes/index.ts b/plugin-dynamic-routes/index.ts
new file mode 100644
index 0000000..b8ab8e4
--- /dev/null
+++ b/plugin-dynamic-routes/index.ts
@@ -0,0 +1,21 @@
+module.exports = (context: any, options: any) => {
+  const defaultLocale = context.i18n.defaultLocale;
+  const currentLocal = context.i18n.currentLocale;
+  if (defaultLocale !== currentLocal) {
+    // handle i18n
+    options.routes[0].path = `/${currentLocal}${options.routes[0].path}`;
+  }
+  if (process.env.PULL_NUM) {
+    // handle preview
+    options.routes[0].path = `/pull_${process.env.PULL_NUM}${options.routes[0].path}`;
+  }
+  console.log(options.routes[0].path);
+  return {
+    name: 'plugin-dynamic-routes',
+    async contentLoaded({ _content, actions }) {
+      const { routes } = options;
+      const { addRoute } = actions;
+      routes.map(route => addRoute(route));
+    },
+  };
+};
diff --git a/src/components/Leaderboard/NameWithIcon.tsx b/src/components/Leaderboard/NameWithIcon.tsx
index 81fc29b..4c632bd 100644
--- a/src/components/Leaderboard/NameWithIcon.tsx
+++ b/src/components/Leaderboard/NameWithIcon.tsx
@@ -9,7 +9,7 @@ interface NameWithIconProps {
 export const NameWithIcon = ({ icon, name, rounded }: NameWithIconProps) => {
   return (
     <div className={styles.nameContainer}>
-      <img src={icon} alt="" className={`${styles.icon} ${rounded ? styles.iconRounded : ''}`} />
+      {icon && <img src={icon} alt="" className={`${styles.icon} ${rounded ? styles.iconRounded : ''}`} />}
       <span className={styles.ellipsis}>{name}</span>
     </div>
   )
diff --git a/src/components/Leaderboard/index.tsx b/src/components/Leaderboard/index.tsx
index 209552c..62d294c 100644
--- a/src/components/Leaderboard/index.tsx
+++ b/src/components/Leaderboard/index.tsx
@@ -7,6 +7,7 @@ import { NameWithIcon } from './NameWithIcon';
 
 import { useReducer } from 'react';
 import { useReactTable, createColumnHelper, getCoreRowModel } from '@tanstack/react-table';
+import styles from './styles.module.css';
 
 export const COLUMN_TYPE_RULES: {
   name: string;
@@ -16,7 +17,7 @@ export const COLUMN_TYPE_RULES: {
     {
       name: 'String',
       fieldsNeeded: 1,
-      renderer: (text) => <div dangerouslySetInnerHTML={{ __html: text }}></div>,
+      renderer: (text) => <span className={styles.ellipsis} dangerouslySetInnerHTML={{ __html: text }}></span>,
     },
     {
       name: 'StringWithIcon',
diff --git a/src/pages/leaderboards_page/index.tsx b/src/pages/leaderboards_page/index.tsx
new file mode 100644
index 0000000..8a10e37
--- /dev/null
+++ b/src/pages/leaderboards_page/index.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import Layout from '@theme/Layout';
+import { useLocation } from '@docusaurus/router';
+import SimpleTable from '../../components/SimpleTable';
+import { translate } from '@docusaurus/Translate';
+import axios from 'axios';
+import styles from './styles.module.css';
+
+function OpenLeaderboard() {
+  const location = useLocation();
+  const leaderboardId = location.pathname.split('/').pop();
+
+  const [title, setTitle] = useState('Ranking List Title');
+  const [data, setData] = useState([]);
+  const [options, setOptions] = useState([]);
+
+  useEffect(() => {
+    axios.get(`https://oss.open-digger.cn/leaderboards/${leaderboardId}.json`).then(resp => {
+      const data = resp.data;
+      setTitle(translate({ id: 'leaderboards.projects.title' }));
+      setData(data.data);
+      switch (leaderboardId) {
+        case 'projects':
+          setOptions([
+            { name: '#', type: 'String', fields: ['rank'], width: 80 },
+            { name: translate({ id: 'leaderboards.projects.name' }), type: 'StringWithIcon', fields: ['name', 'logo'], width: 250 },
+            { name: 'OpenRank', type: 'String', fields: ['openrank'], width: 150 },
+            { name: translate({ id: 'leaderboards.projects.initiator' }), type: 'StringWithIcon', fields: ['initiator', 'initiatorLogo'], width: 250 },
+            { name: translate({ id: 'leaderboards.projects.country' }), type: 'String', fields: ['country'], width: 250 },
+          ]);
+          break;
+      }
+    }).catch(e => {
+      console.log(e);
+    });
+  }, []);
+
+  return (
+    <Layout>
+      <div className={styles.mainRankingList} >
+        <SimpleTable title={title} data={data} options={options}
+        />
+      </div>
+    </Layout>
+  );
+}
+
+export default OpenLeaderboard;
diff --git a/src/pages/leaderboards_page/styles.module.css b/src/pages/leaderboards_page/styles.module.css
new file mode 100644
index 0000000..61988de
--- /dev/null
+++ b/src/pages/leaderboards_page/styles.module.css
@@ -0,0 +1,13 @@
+html,
+body {
+  height: 100%;
+  margin: 0;
+  overflow-y: hidden;
+}
+
+.mainRankingList {
+  width: 1200px;
+  height: 80vh;
+  margin: auto;
+  overflow: hidden;
+}