diff --git a/website/catalog/Catalog.vue b/website/catalog/Catalog.vue
deleted file mode 100644
index 46ce7823..00000000
--- a/website/catalog/Catalog.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup>
-import RuleItem from './RuleItem.vue'
-const rules = [
-  'rule1'
-]
-</script>
-<template>
-  <div class="rule-filter">
-    <label>
-      <input type="checkbox"/>
-      Single Pattern
-    </label>
-    <label>
-      <input type="checkbox"/>
-      YAML Rule
-    </label>
-    <label>
-      <input type="checkbox"/>
-      Has Fix
-    </label>
-  </div>
-  <ul>
-    <li v-for="rule in rules">
-      <RuleItem :title="rule"/>
-    </li>
-  </ul>
-</template>
diff --git a/website/catalog/RuleItem.vue b/website/catalog/RuleItem.vue
deleted file mode 100644
index df228e85..00000000
--- a/website/catalog/RuleItem.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup>
-import { defineProps } from 'vue'
-defineProps({
-  title: String,
-})
-</script>
-<template>
-  <h1>{{ title }}</h1>
-</template>
diff --git a/website/catalog/index.md b/website/catalog/index.md
index 62777dd0..d2653f02 100644
--- a/website/catalog/index.md
+++ b/website/catalog/index.md
@@ -4,9 +4,4 @@ Get confused what ast-grep is? This is a list of rewriting rule to inspire you!
 
 Explore the power of ast-grep with these rewriting rules that can transform your code in seconds!
 
-----
-<script setup>
-import Catalog from './Catalog.vue'
-</script>
-
-<Catalog/>
+<!--@include: ./rule-template.md-->
diff --git a/website/catalog/rule-template.md b/website/catalog/rule-template.md
new file mode 100644
index 00000000..adde46dc
--- /dev/null
+++ b/website/catalog/rule-template.md
@@ -0,0 +1,50 @@
+---
+language: JavaScript # please fully spell the language
+playgroundLink: '[TODO]'
+command:  'sg -p [TODO] -r [TODO]'
+hasFix: true
+ruleType: 'pattern' # 'pattern' or 'yaml'
+---
+
+## Your Rule Name
+
+### Description
+
+Some Description for your rule!
+
+
+<!-- Use pattern in the example. Delete this section if use YAML. -->
+### Pattern
+
+```js
+var i = 123
+```
+
+<!-- Optional Fix. Delete this section if no fix available -->
+### Fix
+
+```js
+let i = 123
+```
+
+
+<!-- Use YAML in the example. Delete this section if use pattern. -->
+### YAML
+```yaml
+```
+
+### Example
+
+```js
+var a = 123
+```
+
+### Diff
+<!-- use // [!code --] and // [!code ++] to annotate diff -->
+```js
+var a = 123 // [!code --]
+let a = 123 // [!code ++]
+```
+
+### Contributed by
+[Author Name](https://your-social.link)