diff --git a/web/app/components/billing/plan/assets/index.tsx b/web/app/components/billing/plan/assets/index.tsx
new file mode 100644
index 0000000000..3ad9248d34
--- /dev/null
+++ b/web/app/components/billing/plan/assets/index.tsx
@@ -0,0 +1,3 @@
+export { default as Sandbox } from './sandbox'
+export { default as Professional } from './professional'
+export { default as Team } from './team'
diff --git a/web/app/components/billing/plan/assets/professional.tsx b/web/app/components/billing/plan/assets/professional.tsx
new file mode 100644
index 0000000000..9803dd17bb
--- /dev/null
+++ b/web/app/components/billing/plan/assets/professional.tsx
@@ -0,0 +1,89 @@
+const Professional = () => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'>
+      <rect opacity='0.18' x='4.5' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='8' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect x='11.5' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='15' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='18.5' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='22' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='25.5' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='29' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='1' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect x='4.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='8' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='11.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='15' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='18.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect x='22' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='25.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='29' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='1' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='8' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='11.5' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='15' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='18.5' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='22' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect x='25.5' y='8' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='29' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect x='1' y='11.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='8' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='11.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='15' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='18.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='22' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='25.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='4.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='8' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='11.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='15' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='18.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='22' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='25.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect x='29' y='15' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='1' y='18.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='4.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='8' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='11.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='15' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='18.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='22' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='25.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect x='29' y='18.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='1' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect x='4.5' y='22' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='8' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='11.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='15' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='18.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='22' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect x='25.5' y='22' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='29' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='1' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect x='4.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='8' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='11.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='15' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='18.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect x='22' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='25.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='29' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='1' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='4.5' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='8' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect x='11.5' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='15' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='18.5' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='22' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='25.5' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='29' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='1' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect x='1' y='15' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='4.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect x='29' y='11.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='4.5' y='8' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+    </svg>
+  )
+}
+
+export default Professional
diff --git a/web/app/components/billing/plan/assets/sandbox.tsx b/web/app/components/billing/plan/assets/sandbox.tsx
new file mode 100644
index 0000000000..f98f423f72
--- /dev/null
+++ b/web/app/components/billing/plan/assets/sandbox.tsx
@@ -0,0 +1,91 @@
+import React from 'react'
+
+const Sandbox = () => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'>
+      <rect opacity='0.18' x='1' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='4.5' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <path d='M8 2C8 1.44772 8.44772 1 9 1C9.55228 1 10 1.44772 10 2C10 2.55228 9.55228 3 9 3C8.44772 3 8 2.55228 8 2Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M11.5 2C11.5 1.44772 11.9477 1 12.5 1C13.0523 1 13.5 1.44772 13.5 2C13.5 2.55228 13.0523 3 12.5 3C11.9477 3 11.5 2.55228 11.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M15 2C15 1.44772 15.4477 1 16 1C16.5523 1 17 1.44772 17 2C17 2.55228 16.5523 3 16 3C15.4477 3 15 2.55228 15 2Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M18.5 2C18.5 1.44772 18.9477 1 19.5 1C20.0523 1 20.5 1.44772 20.5 2C20.5 2.55228 20.0523 3 19.5 3C18.9477 3 18.5 2.55228 18.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M22 2C22 1.44772 22.4477 1 23 1C23.5523 1 24 1.44772 24 2C24 2.55228 23.5523 3 23 3C22.4477 3 22 2.55228 22 2Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M25.5 2C25.5 1.44772 25.9477 1 26.5 1C27.0523 1 27.5 1.44772 27.5 2C27.5 2.55228 27.0523 3 26.5 3C25.9477 3 25.5 2.55228 25.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M29 2C29 1.44772 29.4477 1 30 1C30.5523 1 31 1.44772 31 2C31 2.55228 30.5523 3 30 3C29.4477 3 29 2.55228 29 2Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='1' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <path d='M4.5 5.5C4.5 4.94772 4.94772 4.5 5.5 4.5C6.05228 4.5 6.5 4.94772 6.5 5.5C6.5 6.05228 6.05228 6.5 5.5 6.5C4.94772 6.5 4.5 6.05228 4.5 5.5Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='8' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='11.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='15' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='18.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='22' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <path d='M25.5 5.5C25.5 4.94772 25.9477 4.5 26.5 4.5C27.0523 4.5 27.5 4.94772 27.5 5.5C27.5 6.05228 27.0523 6.5 26.5 6.5C25.9477 6.5 25.5 6.05228 25.5 5.5Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M29 5.5C29 4.94772 29.4477 4.5 30 4.5C30.5523 4.5 31 4.94772 31 5.5C31 6.05228 30.5523 6.5 30 6.5C29.4477 6.5 29 6.05228 29 5.5Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M1 9C1 8.44772 1.44772 8 2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M4.5 9C4.5 8.44772 4.94772 8 5.5 8C6.05228 8 6.5 8.44772 6.5 9C6.5 9.55228 6.05228 10 5.5 10C4.94772 10 4.5 9.55228 4.5 9Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M8 9C8 8.44772 8.44772 8 9 8C9.55228 8 10 8.44772 10 9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M11.5 9C11.5 8.44772 11.9477 8 12.5 8C13.0523 8 13.5 8.44772 13.5 9C13.5 9.55228 13.0523 10 12.5 10C11.9477 10 11.5 9.55228 11.5 9Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M15 9C15 8.44772 15.4477 8 16 8C16.5523 8 17 8.44772 17 9C17 9.55228 16.5523 10 16 10C15.4477 10 15 9.55228 15 9Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M18.5 9C18.5 8.44772 18.9477 8 19.5 8C20.0523 8 20.5 8.44772 20.5 9C20.5 9.55228 20.0523 10 19.5 10C18.9477 10 18.5 9.55228 18.5 9Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M22 9C22 8.44772 22.4477 8 23 8C23.5523 8 24 8.44772 24 9C24 9.55228 23.5523 10 23 10C22.4477 10 22 9.55228 22 9Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='25.5' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <path d='M29 9C29 8.44772 29.4477 8 30 8C30.5523 8 31 8.44772 31 9C31 9.55228 30.5523 10 30 10C29.4477 10 29 9.55228 29 9Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M1 12.5C1 11.9477 1.44772 11.5 2 11.5C2.55228 11.5 3 11.9477 3 12.5C3 13.0523 2.55228 13.5 2 13.5C1.44772 13.5 1 13.0523 1 12.5Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='4.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='8' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='11.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='15' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='18.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <path d='M22 12.5C22 11.9477 22.4477 11.5 23 11.5C23.5523 11.5 24 11.9477 24 12.5C24 13.0523 23.5523 13.5 23 13.5C22.4477 13.5 22 13.0523 22 12.5Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='25.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <path d='M29 12.5C29 11.9477 29.4477 11.5 30 11.5C30.5523 11.5 31 11.9477 31 12.5C31 13.0523 30.5523 13.5 30 13.5C29.4477 13.5 29 13.0523 29 12.5Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M1 16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='4.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='8' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='11.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='15' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='18.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <path d='M22 16C22 15.4477 22.4477 15 23 15C23.5523 15 24 15.4477 24 16C24 16.5523 23.5523 17 23 17C22.4477 17 22 16.5523 22 16Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='25.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <path d='M29 16C29 15.4477 29.4477 15 30 15C30.5523 15 31 15.4477 31 16C31 16.5523 30.5523 17 30 17C29.4477 17 29 16.5523 29 16Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M1 19.5C1 18.9477 1.44772 18.5 2 18.5C2.55228 18.5 3 18.9477 3 19.5C3 20.0523 2.55228 20.5 2 20.5C1.44772 20.5 1 20.0523 1 19.5Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='4.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='8' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='11.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='15' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='18.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <path d='M22 19.5C22 18.9477 22.4477 18.5 23 18.5C23.5523 18.5 24 18.9477 24 19.5C24 20.0523 23.5523 20.5 23 20.5C22.4477 20.5 22 20.0523 22 19.5Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='25.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <path d='M29 19.5C29 18.9477 29.4477 18.5 30 18.5C30.5523 18.5 31 18.9477 31 19.5C31 20.0523 30.5523 20.5 30 20.5C29.4477 20.5 29 20.0523 29 19.5Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M1 23C1 22.4477 1.44772 22 2 22C2.55228 22 3 22.4477 3 23C3 23.5523 2.55228 24 2 24C1.44772 24 1 23.5523 1 23Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='4.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='8' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='11.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='15' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='18.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <path d='M22 23C22 22.4477 22.4477 22 23 22C23.5523 22 24 22.4477 24 23C24 23.5523 23.5523 24 23 24C22.4477 24 22 23.5523 22 23Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='25.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <path d='M29 23C29 22.4477 29.4477 22 30 22C30.5523 22 31 22.4477 31 23C31 23.5523 30.5523 24 30 24C29.4477 24 29 23.5523 29 23Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M1 26.5C1 25.9477 1.44772 25.5 2 25.5C2.55228 25.5 3 25.9477 3 26.5C3 27.0523 2.55228 27.5 2 27.5C1.44772 27.5 1 27.0523 1 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='4.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='8' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='11.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='15' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='18.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <path d='M22 26.5C22 25.9477 22.4477 25.5 23 25.5C23.5523 25.5 24 25.9477 24 26.5C24 27.0523 23.5523 27.5 23 27.5C22.4477 27.5 22 27.0523 22 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M25.5 26.5C25.5 25.9477 25.9477 25.5 26.5 25.5C27.0523 25.5 27.5 25.9477 27.5 26.5C27.5 27.0523 27.0523 27.5 26.5 27.5C25.9477 27.5 25.5 27.0523 25.5 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='29' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <path d='M1 30C1 29.4477 1.44772 29 2 29C2.55228 29 3 29.4477 3 30C3 30.5523 2.55228 31 2 31C1.44772 31 1 30.5523 1 30Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M4.5 30C4.5 29.4477 4.94772 29 5.5 29C6.05228 29 6.5 29.4477 6.5 30C6.5 30.5523 6.05228 31 5.5 31C4.94772 31 4.5 30.5523 4.5 30Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M8 30C8 29.4477 8.44772 29 9 29C9.55228 29 10 29.4477 10 30C10 30.5523 9.55228 31 9 31C8.44772 31 8 30.5523 8 30Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M11.5 30C11.5 29.4477 11.9477 29 12.5 29C13.0523 29 13.5 29.4477 13.5 30C13.5 30.5523 13.0523 31 12.5 31C11.9477 31 11.5 30.5523 11.5 30Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M15 30C15 29.4477 15.4477 29 16 29C16.5523 29 17 29.4477 17 30C17 30.5523 16.5523 31 16 31C15.4477 31 15 30.5523 15 30Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M18.5 30C18.5 29.4477 18.9477 29 19.5 29C20.0523 29 20.5 29.4477 20.5 30C20.5 30.5523 20.0523 31 19.5 31C18.9477 31 18.5 30.5523 18.5 30Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <path d='M22 30C22 29.4477 22.4477 29 23 29C23.5523 29 24 29.4477 24 30C24 30.5523 23.5523 31 23 31C22.4477 31 22 30.5523 22 30Z' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect opacity='0.18' x='25.5' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+      <rect opacity='0.18' x='29' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
+    </svg>
+  )
+}
+
+export default React.memo(Sandbox)
diff --git a/web/app/components/billing/plan/assets/team.tsx b/web/app/components/billing/plan/assets/team.tsx
new file mode 100644
index 0000000000..f2d2e04e1c
--- /dev/null
+++ b/web/app/components/billing/plan/assets/team.tsx
@@ -0,0 +1,89 @@
+const Team = () => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'>
+      <rect x='1' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='4.5' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='8' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M11.5 2C11.5 1.44772 11.9477 1 12.5 1C13.0523 1 13.5 1.44772 13.5 2C13.5 2.55228 13.0523 3 12.5 3C11.9477 3 11.5 2.55228 11.5 2Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M15 2C15 1.44772 15.4477 1 16 1C16.5523 1 17 1.44772 17 2C17 2.55228 16.5523 3 16 3C15.4477 3 15 2.55228 15 2Z' fill='var(--color-text-quaternary)' />
+      <rect x='18.5' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M22 2C22 1.44772 22.4477 1 23 1C23.5523 1 24 1.44772 24 2C24 2.55228 23.5523 3 23 3C22.4477 3 22 2.55228 22 2Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M25.5 2C25.5 1.44772 25.9477 1 26.5 1C27.0523 1 27.5 1.44772 27.5 2C27.5 2.55228 27.0523 3 26.5 3C25.9477 3 25.5 2.55228 25.5 2Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M29 2C29 1.44772 29.4477 1 30 1C30.5523 1 31 1.44772 31 2C31 2.55228 30.5523 3 30 3C29.4477 3 29 2.55228 29 2Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M1 5.5C1 4.94772 1.44772 4.5 2 4.5C2.55228 4.5 3 4.94772 3 5.5C3 6.05228 2.55228 6.5 2 6.5C1.44772 6.5 1 6.05228 1 5.5Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M4.5 5.5C4.5 4.94772 4.94772 4.5 5.5 4.5C6.05228 4.5 6.5 4.94772 6.5 5.5C6.5 6.05228 6.05228 6.5 5.5 6.5C4.94772 6.5 4.5 6.05228 4.5 5.5Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M8 5.5C8 4.94772 8.44772 4.5 9 4.5C9.55228 4.5 10 4.94772 10 5.5C10 6.05228 9.55228 6.5 9 6.5C8.44772 6.5 8 6.05228 8 5.5Z' fill='var(--color-text-quaternary)' />
+      <rect x='11.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='15' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M18.5 5.5C18.5 4.94772 18.9477 4.5 19.5 4.5C20.0523 4.5 20.5 4.94772 20.5 5.5C20.5 6.05228 20.0523 6.5 19.5 6.5C18.9477 6.5 18.5 6.05228 18.5 5.5Z' fill='var(--color-text-quaternary)' />
+      <rect x='22' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='25.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M29 5.5C29 4.94772 29.4477 4.5 30 4.5C30.5523 4.5 31 4.94772 31 5.5C31 6.05228 30.5523 6.5 30 6.5C29.4477 6.5 29 6.05228 29 5.5Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M1 9C1 8.44772 1.44772 8 2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M4.5 9C4.5 8.44772 4.94772 8 5.5 8C6.05228 8 6.5 8.44772 6.5 9C6.5 9.55228 6.05228 10 5.5 10C4.94772 10 4.5 9.55228 4.5 9Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M8 9C8 8.44772 8.44772 8 9 8C9.55228 8 10 8.44772 10 9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M11.5 9C11.5 8.44772 11.9477 8 12.5 8C13.0523 8 13.5 8.44772 13.5 9C13.5 9.55228 13.0523 10 12.5 10C11.9477 10 11.5 9.55228 11.5 9Z' fill='var(--color-text-quaternary)' />
+      <rect x='15' y='8' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M18.5 9C18.5 8.44772 18.9477 8 19.5 8C20.0523 8 20.5 8.44772 20.5 9C20.5 9.55228 20.0523 10 19.5 10C18.9477 10 18.5 9.55228 18.5 9Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M22 9C22 8.44772 22.4477 8 23 8C23.5523 8 24 8.44772 24 9C24 9.55228 23.5523 10 23 10C22.4477 10 22 9.55228 22 9Z' fill='var(--color-text-quaternary)' />
+      <rect x='25.5' y='8' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M29 9C29 8.44772 29.4477 8 30 8C30.5523 8 31 8.44772 31 9C31 9.55228 30.5523 10 30 10C29.4477 10 29 9.55228 29 9Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M1 12.5C1 11.9477 1.44772 11.5 2 11.5C2.55228 11.5 3 11.9477 3 12.5C3 13.0523 2.55228 13.5 2 13.5C1.44772 13.5 1 13.0523 1 12.5Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M4.5 12.5C4.5 11.9477 4.94772 11.5 5.5 11.5C6.05228 11.5 6.5 11.9477 6.5 12.5C6.5 13.0523 6.05228 13.5 5.5 13.5C4.94772 13.5 4.5 13.0523 4.5 12.5Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M8 12.5C8 11.9477 8.44772 11.5 9 11.5C9.55228 11.5 10 11.9477 10 12.5C10 13.0523 9.55228 13.5 9 13.5C8.44772 13.5 8 13.0523 8 12.5Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M11.5 12.5C11.5 11.9477 11.9477 11.5 12.5 11.5C13.0523 11.5 13.5 11.9477 13.5 12.5C13.5 13.0523 13.0523 13.5 12.5 13.5C11.9477 13.5 11.5 13.0523 11.5 12.5Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M15 12.5C15 11.9477 15.4477 11.5 16 11.5C16.5523 11.5 17 11.9477 17 12.5C17 13.0523 16.5523 13.5 16 13.5C15.4477 13.5 15 13.0523 15 12.5Z' fill='var(--color-text-quaternary)' />
+      <rect x='18.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M22 12.5C22 11.9477 22.4477 11.5 23 11.5C23.5523 11.5 24 11.9477 24 12.5C24 13.0523 23.5523 13.5 23 13.5C22.4477 13.5 22 13.0523 22 12.5Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M25.5 12.5C25.5 11.9477 25.9477 11.5 26.5 11.5C27.0523 11.5 27.5 11.9477 27.5 12.5C27.5 13.0523 27.0523 13.5 26.5 13.5C25.9477 13.5 25.5 13.0523 25.5 12.5Z' fill='var(--color-text-quaternary)' />
+      <rect x='29' y='11.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M1 16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M4.5 16C4.5 15.4477 4.94772 15 5.5 15C6.05228 15 6.5 15.4477 6.5 16C6.5 16.5523 6.05228 17 5.5 17C4.94772 17 4.5 16.5523 4.5 16Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M8 16C8 15.4477 8.44772 15 9 15C9.55228 15 10 15.4477 10 16C10 16.5523 9.55228 17 9 17C8.44772 17 8 16.5523 8 16Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M11.5 16C11.5 15.4477 11.9477 15 12.5 15C13.0523 15 13.5 15.4477 13.5 16C13.5 16.5523 13.0523 17 12.5 17C11.9477 17 11.5 16.5523 11.5 16Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M15 16C15 15.4477 15.4477 15 16 15C16.5523 15 17 15.4477 17 16C17 16.5523 16.5523 17 16 17C15.4477 17 15 16.5523 15 16Z' fill='var(--color-text-quaternary)' />
+      <rect x='18.5' y='15' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M22 16C22 15.4477 22.4477 15 23 15C23.5523 15 24 15.4477 24 16C24 16.5523 23.5523 17 23 17C22.4477 17 22 16.5523 22 16Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M25.5 16C25.5 15.4477 25.9477 15 26.5 15C27.0523 15 27.5 15.4477 27.5 16C27.5 16.5523 27.0523 17 26.5 17C25.9477 17 25.5 16.5523 25.5 16Z' fill='var(--color-text-quaternary)' />
+      <rect x='29' y='15' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M1 19.5C1 18.9477 1.44772 18.5 2 18.5C2.55228 18.5 3 18.9477 3 19.5C3 20.0523 2.55228 20.5 2 20.5C1.44772 20.5 1 20.0523 1 19.5Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M4.5 19.5C4.5 18.9477 4.94772 18.5 5.5 18.5C6.05228 18.5 6.5 18.9477 6.5 19.5C6.5 20.0523 6.05228 20.5 5.5 20.5C4.94772 20.5 4.5 20.0523 4.5 19.5Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M8 19.5C8 18.9477 8.44772 18.5 9 18.5C9.55228 18.5 10 18.9477 10 19.5C10 20.0523 9.55228 20.5 9 20.5C8.44772 20.5 8 20.0523 8 19.5Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M11.5 19.5C11.5 18.9477 11.9477 18.5 12.5 18.5C13.0523 18.5 13.5 18.9477 13.5 19.5C13.5 20.0523 13.0523 20.5 12.5 20.5C11.9477 20.5 11.5 20.0523 11.5 19.5Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M15 19.5C15 18.9477 15.4477 18.5 16 18.5C16.5523 18.5 17 18.9477 17 19.5C17 20.0523 16.5523 20.5 16 20.5C15.4477 20.5 15 20.0523 15 19.5Z' fill='var(--color-text-quaternary)' />
+      <rect x='18.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M22 19.5C22 18.9477 22.4477 18.5 23 18.5C23.5523 18.5 24 18.9477 24 19.5C24 20.0523 23.5523 20.5 23 20.5C22.4477 20.5 22 20.0523 22 19.5Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M25.5 19.5C25.5 18.9477 25.9477 18.5 26.5 18.5C27.0523 18.5 27.5 18.9477 27.5 19.5C27.5 20.0523 27.0523 20.5 26.5 20.5C25.9477 20.5 25.5 20.0523 25.5 19.5Z' fill='var(--color-text-quaternary)' />
+      <rect x='29' y='18.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M1 23C1 22.4477 1.44772 22 2 22C2.55228 22 3 22.4477 3 23C3 23.5523 2.55228 24 2 24C1.44772 24 1 23.5523 1 23Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M4.5 23C4.5 22.4477 4.94772 22 5.5 22C6.05228 22 6.5 22.4477 6.5 23C6.5 23.5523 6.05228 24 5.5 24C4.94772 24 4.5 23.5523 4.5 23Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M8 23C8 22.4477 8.44772 22 9 22C9.55228 22 10 22.4477 10 23C10 23.5523 9.55228 24 9 24C8.44772 24 8 23.5523 8 23Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M11.5 23C11.5 22.4477 11.9477 22 12.5 22C13.0523 22 13.5 22.4477 13.5 23C13.5 23.5523 13.0523 24 12.5 24C11.9477 24 11.5 23.5523 11.5 23Z' fill='var(--color-text-quaternary)' />
+      <rect x='15' y='22' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M18.5 23C18.5 22.4477 18.9477 22 19.5 22C20.0523 22 20.5 22.4477 20.5 23C20.5 23.5523 20.0523 24 19.5 24C18.9477 24 18.5 23.5523 18.5 23Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M22 23C22 22.4477 22.4477 22 23 22C23.5523 22 24 22.4477 24 23C24 23.5523 23.5523 24 23 24C22.4477 24 22 23.5523 22 23Z' fill='var(--color-text-quaternary)' />
+      <rect x='25.5' y='22' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M29 23C29 22.4477 29.4477 22 30 22C30.5523 22 31 22.4477 31 23C31 23.5523 30.5523 24 30 24C29.4477 24 29 23.5523 29 23Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M1 26.5C1 25.9477 1.44772 25.5 2 25.5C2.55228 25.5 3 25.9477 3 26.5C3 27.0523 2.55228 27.5 2 27.5C1.44772 27.5 1 27.0523 1 26.5Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M4.5 26.5C4.5 25.9477 4.94772 25.5 5.5 25.5C6.05228 25.5 6.5 25.9477 6.5 26.5C6.5 27.0523 6.05228 27.5 5.5 27.5C4.94772 27.5 4.5 27.0523 4.5 26.5Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M8 26.5C8 25.9477 8.44772 25.5 9 25.5C9.55228 25.5 10 25.9477 10 26.5C10 27.0523 9.55228 27.5 9 27.5C8.44772 27.5 8 27.0523 8 26.5Z' fill='var(--color-text-quaternary)' />
+      <rect x='11.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='15' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M18.5 26.5C18.5 25.9477 18.9477 25.5 19.5 25.5C20.0523 25.5 20.5 25.9477 20.5 26.5C20.5 27.0523 20.0523 27.5 19.5 27.5C18.9477 27.5 18.5 27.0523 18.5 26.5Z' fill='var(--color-text-quaternary)' />
+      <rect x='22' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='25.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M29 26.5C29 25.9477 29.4477 25.5 30 25.5C30.5523 25.5 31 25.9477 31 26.5C31 27.0523 30.5523 27.5 30 27.5C29.4477 27.5 29 27.0523 29 26.5Z' fill='var(--color-text-quaternary)' />
+      <rect x='1' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='4.5' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <rect x='8' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M11.5 30C11.5 29.4477 11.9477 29 12.5 29C13.0523 29 13.5 29.4477 13.5 30C13.5 30.5523 13.0523 31 12.5 31C11.9477 31 11.5 30.5523 11.5 30Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M15 30C15 29.4477 15.4477 29 16 29C16.5523 29 17 29.4477 17 30C17 30.5523 16.5523 31 16 31C15.4477 31 15 30.5523 15 30Z' fill='var(--color-text-quaternary)' />
+      <rect x='18.5' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
+      <path opacity='0.18' d='M22 30C22 29.4477 22.4477 29 23 29C23.5523 29 24 29.4477 24 30C24 30.5523 23.5523 31 23 31C22.4477 31 22 30.5523 22 30Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M25.5 30C25.5 29.4477 25.9477 29 26.5 29C27.0523 29 27.5 29.4477 27.5 30C27.5 30.5523 27.0523 31 26.5 31C25.9477 31 25.5 30.5523 25.5 30Z' fill='var(--color-text-quaternary)' />
+      <path opacity='0.18' d='M29 30C29 29.4477 29.4477 29 30 29C30.5523 29 31 29.4477 31 30C31 30.5523 30.5523 31 30 31C29.4477 31 29 30.5523 29 30Z' fill='var(--color-text-quaternary)' />
+    </svg>
+  )
+}
+
+export default Team
diff --git a/web/app/components/billing/plan/index.tsx b/web/app/components/billing/plan/index.tsx
index 7badb3666f..c1fe75fa02 100644
--- a/web/app/components/billing/plan/index.tsx
+++ b/web/app/components/billing/plan/index.tsx
@@ -5,12 +5,10 @@ import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
 import {
   RiBook2Line,
-  RiBox3Line,
   RiFileEditLine,
   RiGraduationCapLine,
   RiGroup3Line,
   RiGroupLine,
-  RiSquareLine,
 } from '@remixicon/react'
 import { Plan, SelfHostedPlan } from '../type'
 import VectorSpaceInfo from '../usage-info/vector-space-info'
@@ -24,6 +22,7 @@ import VerifyStateModal from '@/app/education-apply/verify-state-modal'
 import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
 import { useEducationVerify } from '@/service/use-education'
 import { useModalContextSelector } from '@/context/modal-context'
+import { Professional, Sandbox, Team } from './assets'
 
 type Props = {
   loc: string
@@ -58,19 +57,19 @@ const PlanComp: FC<Props> = ({
     })
   }
   return (
-    <div className='rounded-2xl border-[0.5px] border-effects-highlight-lightmode-off bg-background-section-burn'>
+    <div className='relative rounded-2xl border-[0.5px] border-effects-highlight-lightmode-off bg-background-section-burn'>
       <div className='p-6 pb-2'>
         {plan.type === Plan.sandbox && (
-          <RiBox3Line className='h-7 w-7 text-text-primary'/>
+          <Sandbox />
         )}
         {plan.type === Plan.professional && (
-          <RiSquareLine className='h-7 w-7 rotate-90 text-util-colors-blue-brand-blue-brand-600'/>
+          <Professional />
         )}
         {plan.type === Plan.team && (
-          <RiGroup3Line className='h-7 w-7 text-util-colors-indigo-indigo-600'/>
+          <Team />
         )}
         {(plan.type as any) === SelfHostedPlan.enterprise && (
-          <RiGroup3Line className='h-7 w-7 text-util-colors-indigo-indigo-600'/>
+          <RiGroup3Line className='h-7 w-7 text-util-colors-indigo-indigo-600' />
         )}
         <div className='mt-1 flex items-center'>
           <div className='grow'>
@@ -83,7 +82,7 @@ const PlanComp: FC<Props> = ({
           <div className='flex shrink-0 items-center gap-1'>
             {enableEducationPlan && !isEducationAccount && (
               <Button variant='ghost' onClick={handleVerify}>
-                <RiGraduationCapLine className='mr-1 h-4 w-4'/>
+                <RiGraduationCapLine className='mr-1 h-4 w-4' />
                 {t('education.toVerified')}
               </Button>
             )}
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
index 6df33c47ed..00aa2912d9 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
@@ -12,18 +12,18 @@ import List from './list'
 import { Azure, GoogleCloud } from '@/app/components/base/icons/src/public/billing'
 import { Community, Enterprise, Premium } from '../../assets'
 
-const style = {
+const STYLE_MAP = {
   [SelfHostedPlan.community]: {
     icon: <Community />,
     bg: '',
   },
   [SelfHostedPlan.premium]: {
     icon: <Premium />,
-    bg: '',
+    bg: 'bg-billing-plan-card-premium-bg opacity-10',
   },
   [SelfHostedPlan.enterprise]: {
     icon: <Enterprise />,
-    bg: '',
+    bg: 'bg-billing-plan-card-enterprise-bg opacity-10',
   },
 }
 
@@ -65,13 +65,11 @@ const SelfHostedPlanItem: FC<SelfHostedPlanItemProps> = ({
   }, [isCurrentWorkspaceManager, isFreePlan, isPremiumPlan, isEnterprisePlan, t])
 
   return (
-    <div className={cn(
-      'flex flex-1 flex-col',
-      style[plan].bg,
-    )}>
+    <div className='relative flex flex-1 flex-col'>
+      <div className={cn('absolute inset-0 -z-10', STYLE_MAP[plan].bg)} />
       <div className='flex flex-col px-5 py-4'>
         <div className=' flex flex-col gap-y-6 px-1 pt-10'>
-          {style[plan].icon}
+          {STYLE_MAP[plan].icon}
           <div className='flex min-h-[104px] flex-col gap-y-2'>
             <div className='text-[30px] font-medium leading-[1.2] text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
             <div className='system-md-regular line-clamp-2 text-text-secondary'>{t(`${i18nPrefix}.description`)}</div>
diff --git a/web/tailwind-common-config.ts b/web/tailwind-common-config.ts
index 57efbea57a..131f8f52ba 100644
--- a/web/tailwind-common-config.ts
+++ b/web/tailwind-common-config.ts
@@ -133,6 +133,8 @@ const config = {
         'pipeline-template-card-hover-bg': 'var(--color-pipeline-template-card-hover-bg)',
         'pipeline-add-documents-title-bg': 'var(--color-pipeline-add-documents-title-bg)',
         'billing-plan-title-bg': 'var(--color-billing-plan-title-bg)',
+        'billing-plan-card-premium-bg': 'var(--color-billing-plan-card-premium-bg)',
+        'billing-plan-card-enterprise-bg': 'var(--color-billing-plan-card-enterprise-bg)',
       },
       animation: {
         'spin-slow': 'spin 2s linear infinite',
diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css
index 3c195c1c71..31b7cd2a70 100644
--- a/web/themes/manual-dark.css
+++ b/web/themes/manual-dark.css
@@ -70,4 +70,6 @@ html[data-theme="dark"] {
     --color-pipeline-add-documents-title-bg: linear-gradient(92deg, rgba(54, 191, 250, 1) 0%, rgba(41, 109, 255, 1) 97.78%);
     --color-background-gradient-bg-fill-chat-bubble-bg-3: #27314d;
     --color-billing-plan-title-bg: linear-gradient(95deg, #0A68FF 29.47%, #03F 105.31%);
+    --color-billing-plan-card-premium-bg: linear-gradient(180deg, #F90 0%, rgba(255, 153, 0, 0.00) 100%);
+    --color-billing-plan-card-enterprise-bg: linear-gradient(180deg, #03F 0%, rgba(0, 51, 255, 0.00) 100%);
 }
diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css
index 886bf48ad4..4a80bfeab3 100644
--- a/web/themes/manual-light.css
+++ b/web/themes/manual-light.css
@@ -70,4 +70,6 @@ html[data-theme="light"] {
 	--color-pipeline-add-documents-title-bg: linear-gradient(92deg, rgba(11, 165, 236, 0.95) 0%, rgba(21, 90, 239, 0.95) 97.78%);
     --color-background-gradient-bg-fill-chat-bubble-bg-3: #e1effe;
     --color-billing-plan-title-bg: linear-gradient(95deg, #03F 29.47%, #03F 105.31%);
+    --color-billing-plan-card-premium-bg: linear-gradient(180deg, #F90 0%, rgba(255, 153, 0, 0.00) 100%);
+    --color-billing-plan-card-enterprise-bg: linear-gradient(180deg, #03F 0%, rgba(0, 51, 255, 0.00) 100%);
 }