diff --git a/packages/nc-gui-v2/components/cell/Checkbox.vue b/packages/nc-gui-v2/components/cell/Checkbox.vue
index 5bb5d77197..ec6fb56386 100644
--- a/packages/nc-gui-v2/components/cell/Checkbox.vue
+++ b/packages/nc-gui-v2/components/cell/Checkbox.vue
@@ -1,20 +1,7 @@
 <script setup lang="ts">
 import { inject } from '#imports'
 import { ColumnInj, IsFormInj } from '~/context'
-import MdiCheckBold from '~icons/mdi/check-bold'
-import MdiCropSquare from '~icons/mdi/crop-square'
-import MdiCheckCircleOutline from '~icons/mdi/check-circle-outline'
-import MdiCheckboxBlankCircleOutline from '~icons/mdi/checkbox-blank-circle-outline'
-import MdiStar from '~icons/mdi/star'
-import MdiStarOutline from '~icons/mdi/star-outline'
-import MdiHeart from '~icons/mdi/heart'
-import MdiHeartOutline from '~icons/mdi/heart-outline'
-import MdiMoonFull from '~icons/mdi/moon-full'
-import MdiMoonNew from '~icons/mdi/moon-new'
-import MdiThumbUp from '~icons/mdi/thumb-up'
-import MdiThumbUpOutline from '~icons/mdi/thumb-up-outline'
-import MdiFlag from '~icons/mdi/flag'
-import MdiFlagOutline from '~icons/mdi/flag-outline'
+import { getMdiIcon } from '@/utils'
 
 interface Props {
   modelValue?: boolean | undefined | number
@@ -42,46 +29,13 @@ const checkboxMeta = $computed(() => {
     ...(column?.meta || {}),
   }
 })
-
-const icon = (type: string) => {
-  switch (type) {
-    case 'mdi-check-bold':
-      return MdiCheckBold
-    case 'mdi-crop-square':
-      return MdiCropSquare
-    case 'mdi-check-circle-outline':
-      return MdiCheckCircleOutline
-    case 'mdi-checkbox-blank-circle-outline':
-      return MdiCheckboxBlankCircleOutline
-    case 'mdi-star':
-      return MdiStar
-    case 'mdi-star-outline':
-      return MdiStarOutline
-    case 'mdi-heart':
-      return MdiHeart
-    case 'mdi-heart-outline':
-      return MdiHeartOutline
-    case 'mdi-moon-full':
-      return MdiMoonFull
-    case 'mdi-moon-new':
-      return MdiMoonNew
-    case 'mdi-thumb-up':
-      return MdiThumbUp
-    case 'mdi-thumb-up-outline':
-      return MdiThumbUpOutline
-    case 'mdi-flag':
-      return MdiFlag
-    case 'mdi-flag-outline':
-      return MdiFlagOutline
-  }
-}
 </script>
 
 <template>
   <div class="flex" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel }">
     <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="vModel = !vModel">
       <component
-        :is="icon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
+        :is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
         :style="{
           color: checkboxMeta.color,
         }"
diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index c1aa52e34d..7d9b148f76 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -89,6 +89,7 @@ watchEffect(() => {
 
       <SmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" />
       <SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" />
+      <SmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" />
 
       <div>
         <div
diff --git a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
new file mode 100644
index 0000000000..b54495321f
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { Sketch } from '@ckpack/vue-color'
+import { useColumnCreateStoreOrThrow } from '#imports'
+import { enumColor, getMdiIcon } from '@/utils'
+
+const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
+
+// cater existing v1 cases
+const iconList = [
+  {
+    full: 'mdi-star',
+    empty: 'mdi-star-outline',
+  },
+  {
+    full: 'mdi-heart',
+    empty: 'mdi-heart-outline',
+  },
+  {
+    full: 'mdi-moon-full',
+    empty: 'mdi-moon-new',
+  },
+  {
+    full: 'mdi-thumb-up',
+    empty: 'mdi-thumb-up-outline',
+  },
+  {
+    full: 'mdi-flag',
+    empty: 'mdi-flag-outline',
+  },
+]
+
+const advanced = ref(true)
+
+const picked = ref(formState.value.meta.color || enumColor.light[0])
+</script>
+
+<template>
+  <a-row>
+    <a-col :span="12">
+      <a-form-item label="Icon">
+        <a-select v-model:value="formState.meta.icon" size="small" class="w-52">
+          <!-- FIXME: antdv doesn't support object as value -->
+          <a-select-option v-for="(icon, i) of iconList" :key="i" :value="icon">
+            <component
+              :is="getMdiIcon(icon.full)"
+              :style="{
+                color: formState.meta.color,
+              }"
+            />
+            {{ ' ' }}
+            <component
+              :is="getMdiIcon(icon.empty)"
+              :style="{
+                color: formState.meta.color,
+              }"
+            />
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </a-col>
+    <a-col :span="12">
+      <a-form-item label="Max">
+        <a-select v-model:value="formState.meta.max" class="w-52" size="small">
+          <a-select-option v-for="(v, i) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" :key="i" :value="v">
+            {{ v }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+    </a-col>
+  </a-row>
+  <a-row>
+    <a-card class="w-full shadow-lg mt-2" body-style="padding: 0px">
+      <a-collapse v-model:activeKey="advanced" accordion ghost expand-icon-position="right">
+        <a-collapse-panel key="1" header="Advanced" class="">
+          <a-button class="!bg-primary text-white w-full" @click="formState.meta.color = picked.hex"> Pick Color </a-button>
+          <div class="px-7 py-3">
+            <Sketch v-model="picked" />
+          </div>
+        </a-collapse-panel>
+      </a-collapse>
+    </a-card>
+  </a-row>
+</template>
+
+<style scoped lang="scss">
+.color-selector:hover {
+  @apply brightness-90;
+}
+
+.color-selector.selected {
+  @apply py-[5px] px-[10px] brightness-90;
+}
+</style>
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index fc8137a7d4..082fb125b8 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -5,6 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
+        "@ckpack/vue-color": "^1.2.0",
         "@vueuse/core": "^9.0.2",
         "@vueuse/integrations": "^9.0.2",
         "ant-design-vue": "^3.2.10",
@@ -859,6 +860,22 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@ckpack/vue-color": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.2.0.tgz",
+      "integrity": "sha512-c9X82nppYjSxjlITO6jdLLdt9HoyZzqEWpqDL2V6NJd859d6GCh/2AHeRXk+37uRJ1UdTkCuty93WOEqja8quw==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.0",
+        "lodash-es": "^4.17.21",
+        "material-colors": "^1.2.6"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@cloudflare/kv-asset-handler": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.2.0.tgz",
@@ -9325,6 +9342,11 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "node_modules/mdast-util-from-markdown": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
@@ -15371,6 +15393,16 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@ckpack/vue-color": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.2.0.tgz",
+      "integrity": "sha512-c9X82nppYjSxjlITO6jdLLdt9HoyZzqEWpqDL2V6NJd859d6GCh/2AHeRXk+37uRJ1UdTkCuty93WOEqja8quw==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.4.0",
+        "lodash-es": "^4.17.21",
+        "material-colors": "^1.2.6"
+      }
+    },
     "@cloudflare/kv-asset-handler": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.2.0.tgz",
@@ -21702,6 +21734,11 @@
         }
       }
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "mdast-util-from-markdown": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 3f9b5f7436..30894765ad 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -11,6 +11,7 @@
     "coverage": "vitest -c test/vite.config.ts run --coverage"
   },
   "dependencies": {
+    "@ckpack/vue-color": "^1.2.0",
     "@vueuse/core": "^9.0.2",
     "@vueuse/integrations": "^9.0.2",
     "ant-design-vue": "^3.2.10",
diff --git a/packages/nc-gui-v2/utils/iconUtils.ts b/packages/nc-gui-v2/utils/iconUtils.ts
new file mode 100644
index 0000000000..2b3f0daa0f
--- /dev/null
+++ b/packages/nc-gui-v2/utils/iconUtils.ts
@@ -0,0 +1,47 @@
+import MdiCheckBold from '~icons/mdi/check-bold'
+import MdiCropSquare from '~icons/mdi/crop-square'
+import MdiCheckCircleOutline from '~icons/mdi/check-circle-outline'
+import MdiCheckboxBlankCircleOutline from '~icons/mdi/checkbox-blank-circle-outline'
+import MdiStar from '~icons/mdi/star'
+import MdiStarOutline from '~icons/mdi/star-outline'
+import MdiHeart from '~icons/mdi/heart'
+import MdiHeartOutline from '~icons/mdi/heart-outline'
+import MdiMoonFull from '~icons/mdi/moon-full'
+import MdiMoonNew from '~icons/mdi/moon-new'
+import MdiThumbUp from '~icons/mdi/thumb-up'
+import MdiThumbUpOutline from '~icons/mdi/thumb-up-outline'
+import MdiFlag from '~icons/mdi/flag'
+import MdiFlagOutline from '~icons/mdi/flag-outline'
+
+export const getMdiIcon = (type: string) => {
+  switch (type) {
+    case 'mdi-check-bold':
+      return MdiCheckBold
+    case 'mdi-crop-square':
+      return MdiCropSquare
+    case 'mdi-check-circle-outline':
+      return MdiCheckCircleOutline
+    case 'mdi-checkbox-blank-circle-outline':
+      return MdiCheckboxBlankCircleOutline
+    case 'mdi-star':
+      return MdiStar
+    case 'mdi-star-outline':
+      return MdiStarOutline
+    case 'mdi-heart':
+      return MdiHeart
+    case 'mdi-heart-outline':
+      return MdiHeartOutline
+    case 'mdi-moon-full':
+      return MdiMoonFull
+    case 'mdi-moon-new':
+      return MdiMoonNew
+    case 'mdi-thumb-up':
+      return MdiThumbUp
+    case 'mdi-thumb-up-outline':
+      return MdiThumbUpOutline
+    case 'mdi-flag':
+      return MdiFlag
+    case 'mdi-flag-outline':
+      return MdiFlagOutline
+  }
+}
diff --git a/packages/nc-gui-v2/utils/index.ts b/packages/nc-gui-v2/utils/index.ts
index fb53c2b25d..a0fc5854c5 100644
--- a/packages/nc-gui-v2/utils/index.ts
+++ b/packages/nc-gui-v2/utils/index.ts
@@ -4,6 +4,7 @@ export * from './deepCompare'
 export * from './durationUtils'
 export * from './errorUtils'
 export * from './fileUtils'
+export * from './iconUtils'
 export * from './filterUtils'
 export * from './generateName'
 export * from './projectCreateUtils'