diff --git a/src/components/ui/badge/vip-badge.tsx b/src/components/ui/badge/vip-badge.tsx
index 21fb6e205..5977897c8 100644
--- a/src/components/ui/badge/vip-badge.tsx
+++ b/src/components/ui/badge/vip-badge.tsx
@@ -48,7 +48,7 @@ export function VipBadge({
 			)}
 			{...props}
 		>
-			<Icon name="crown" size={iconSize} />
+			<Icon name="diamond" size={iconSize} />
 			{!iconOnly && <span>{text}</span>}
 		</span>
 	)
diff --git a/src/components/ui/badge/vip-badge.variants.ts b/src/components/ui/badge/vip-badge.variants.ts
index f60682ca4..3a404ce0d 100644
--- a/src/components/ui/badge/vip-badge.variants.ts
+++ b/src/components/ui/badge/vip-badge.variants.ts
@@ -5,9 +5,9 @@ export const vipBadgeVariants = cva(
 	{
 		variants: {
 			variant: {
-				indigo: 'bg-indigo-500 text-white shadow-sm shadow-indigo-500/20',
+				indigo: 'bg-[#0327aa] text-[#ffffff] shadow-sm shadow-[#0327aa]/25',
 				'indigo-subtle':
-					'bg-indigo-500/15 text-indigo-500 border border-indigo-500/20',
+					'bg-[#0327aa]/15 text-[#0327aa] border border-[#0327aa]/20',
 				white: 'bg-white/20 text-white backdrop-blur-md border border-white/30 shadow-sm',
 			},
 			size: {
diff --git a/src/components/vip/components/vip-banner-card.tsx b/src/components/vip/components/vip-banner-card.tsx
index 0ac1db495..92c60eb08 100644
--- a/src/components/vip/components/vip-banner-card.tsx
+++ b/src/components/vip/components/vip-banner-card.tsx
@@ -40,7 +40,7 @@ export function VipBannerCard({
 		>
 			<div className="flex items-center min-w-0 gap-3">
 				<div className="flex items-center justify-center text-indigo-500 transition-transform duration-200 w-11 h-11 rounded-2xl shrink-0 group-hover:scale-105">
-					<Icon name="crown" size={22} />
+					<Icon name="diamond" size={22} />
 				</div>
 
 				<div className="flex flex-col min-w-0 text-right">
diff --git a/src/icons/packs/default.tsx b/src/icons/packs/default.tsx
index b3d57c13e..712b2bd30 100644
--- a/src/icons/packs/default.tsx
+++ b/src/icons/packs/default.tsx
@@ -133,6 +133,19 @@ import { BsFilterLeft, BsGenderAmbiguous } from 'react-icons/bs'
 import { IoPricetagOutline } from 'react-icons/io5'
 import { VscColorMode, VscMegaphone, VscPlay, VscRecordKeys } from 'react-icons/vsc'
 
+function ProDiamondIcon(props: React.SVGProps<SVGSVGElement>) {
+	return (
+		<svg viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em" {...props}>
+			<path d="M4.9 6.2C4.9 7.4 4.3 8.3 3.1 8.4C4.3 8.5 4.9 9.4 4.9 10.6C5.0 9.4 5.6 8.5 6.8 8.4C5.6 8.3 5.0 7.4 4.9 6.2Z" />
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M8.2 5.3C8.6 4.9 9.3 4.8 9.8 5.1L20.4 11.2C21.0 11.6 21.2 12.3 20.9 12.9L11.7 18.7C11.2 19.0 10.6 19.0 10.1 18.6L5.4 11.8C5.0 11.2 5.1 10.4 5.7 9.9L8.2 5.3ZM11.8 7.3L14.6 8.1C14.8 8.2 15.0 8.4 14.9 8.7L14.3 10.1C14.2 10.3 14.0 10.4 13.7 10.4L11.2 9.8C10.9 9.7 10.8 9.4 10.9 9.1L11.3 7.6C11.4 7.4 11.6 7.2 11.8 7.3ZM16.3 8.6L18.5 9.9C18.7 10.0 18.8 10.3 18.6 10.5L17.6 11.0C17.4 11.1 17.2 11.0 17.0 10.9L15.6 9.8C15.4 9.6 15.4 9.3 15.6 9.1L15.9 8.7C16.0 8.6 16.2 8.5 16.3 8.6ZM10.9 11.3C11.1 11.2 11.4 11.3 11.5 11.5L13.6 12.3C13.8 12.4 13.9 12.6 13.8 12.8L12.2 16.0C12.0 16.3 11.6 16.3 11.4 16.1L10.7 12.0C10.6 11.7 10.7 11.4 10.9 11.3ZM14.6 12.3C14.8 12.2 15.1 12.2 15.3 12.3L18.1 12.7C18.4 12.7 18.5 13.0 18.3 13.2L13.8 15.7C13.5 15.8 13.3 15.6 13.4 15.3L14.3 12.6C14.4 12.4 14.5 12.3 14.6 12.3Z"
+			/>
+		</svg>
+	)
+}
+
 export const defaultIcons = {
 	home: HiHome,
 	calendar: BiCalendar,
@@ -237,6 +250,7 @@ export const defaultIcons = {
 	outlineFilterList: MdOutlineFilterList,
 	crown: FaCrown,
 	outlineCrown: AiOutlineCrown,
+	diamond: ProDiamondIcon,
 	filterLeft: BsFilterLeft,
 	upDown: TbArrowsUpDown,
 	coffee: FiCoffee,
diff --git a/src/icons/types.ts b/src/icons/types.ts
index e016bb0a7..9737e3c0f 100644
--- a/src/icons/types.ts
+++ b/src/icons/types.ts
@@ -105,6 +105,7 @@ export type IconName =
 	| 'outlineFilterListOff'
 	| 'crown'
 	| 'outlineCrown'
+	| 'diamond'
 	| 'filterLeft'
 	| 'upDown'
 	| 'coffee'
diff --git a/src/layouts/setting/tabs/vip/vip-tab.tsx b/src/layouts/setting/tabs/vip/vip-tab.tsx
index 518b193de..b9d910b0d 100644
--- a/src/layouts/setting/tabs/vip/vip-tab.tsx
+++ b/src/layouts/setting/tabs/vip/vip-tab.tsx
@@ -12,7 +12,6 @@ import {
 	usePurchaseVipPlan,
 } from '@/services/hooks/market/market-vip.hook'
 import type { VipPlan } from '@/services/hooks/market/market-vip.interface'
-import { formatVipExpiryDate, formatVipRemaining } from '@/common/utils/vip-expiry'
 import { cn } from '@/common/utils/cn'
 import vipPreviewImg from '@/assets/images/pro-preview.jpg'
 
@@ -163,7 +162,7 @@ export function VipTab() {
 					<div className="space-y-1">
 						<div className="flex items-center gap-2">
 							<div className="flex items-center justify-center w-8 h-8 rounded-xl bg-primary/10 text-primary">
-								<Icon name="crown" size={18} />
+								<Icon name="diamond" size={18} />
 							</div>
 							<h2 className="text-xl font-black tracking-tight sm:text-2xl text-content">
 								ویجتیفای{' '}
@@ -390,7 +389,7 @@ export function VipTab() {
 							onClick={handlePurchase}
 							className="font-bold text-white bg-indigo-500 transition-all flex items-center justify-center gap-1.5 px-6 h-10 shadow-xs cursor-pointer hover:bg-indigo-500/80!"
 						>
-							<Icon name="crown" size={14} />
+							<Icon name="diamond" size={14} />
 							<span>فعال‌سازی {VIP_LABEL}</span>
 						</Button>
 					</div>
diff --git a/src/layouts/widgets-manager/add-widget-modal/actions.tsx b/src/layouts/widgets-manager/add-widget-modal/actions.tsx
index b5133494b..853e01ebd 100644
--- a/src/layouts/widgets-manager/add-widget-modal/actions.tsx
+++ b/src/layouts/widgets-manager/add-widget-modal/actions.tsx
@@ -22,11 +22,11 @@ function ProUpgradeButton({ label }: { label: string }) {
 		<Button
 			type="button"
 			onClick={() => callEvent('openSettings', 'vip')}
-			className="flex items-center justify-center w-full gap-2 font-bold border bg-indigo-500/15 hover:bg-indigo-500/25 text-indigo-500 border-indigo-500/30"
+			className="flex items-center justify-center w-full gap-2 font-bold text-indigo-500 border bg-indigo-500/15 hover:bg-indigo-500/25 border-indigo-500/30"
 			rounded={'2xl'}
 			variant={'default'}
 		>
-			<Icon name="crown" size={14} />
+			<Icon name="diamond" size={14} />
 			<span>{label}</span>
 		</Button>
 	)
diff --git a/src/layouts/widgets/canvas/canvas-widget-outer.tsx b/src/layouts/widgets/canvas/canvas-widget-outer.tsx
index 1f0e95cc5..83ab5f585 100644
--- a/src/layouts/widgets/canvas/canvas-widget-outer.tsx
+++ b/src/layouts/widgets/canvas/canvas-widget-outer.tsx
@@ -13,6 +13,7 @@ import {
 import { cn } from '@/common/utils/cn'
 import { useAuth } from '@/context/auth.context'
 import { Icon } from '@/src/icons'
+import { ProBadge } from '@/components/ui/badge/vip-badge'
 import { useWidgetVipResolver } from '@/services/hooks/widgets/widget-catalog.hook'
 import { WidgetContextMenu } from './widget-context-menu'
 import { BookmarkDeleteModal } from './bookmark-delete-modal'
@@ -376,36 +377,34 @@ function CanvasWidgetOuterImpl({
 						isWiggling && WIGGLE_CLASSES[wiggleVariant]
 					)}
 				>
-					<WidgetSlot
-						definition={definition}
-						instanceId={widget.instanceId}
-						size={widget.size}
-						meta={widget.meta}
-					/>
+					{(!isLocked || canvasMode === 'edit') && (
+						<WidgetSlot
+							definition={definition}
+							instanceId={widget.instanceId}
+							size={widget.size}
+							meta={widget.meta}
+						/>
+					)}
 					{isLocked && canvasMode === 'normal' && (
 						<div
-							className="absolute inset-0 z-25 rounded-widget bg-content bg-glass border border-indigo-500/25 flex flex-col items-center justify-center p-1.5 text-center select-none cursor-default overflow-hidden"
-							style={{
-								zIndex: 1000,
+							className="absolute inset-0 z-25 rounded-widget bg-content bg-glass border border-[#0327aa]/20 flex flex-col items-center justify-center p-2 text-center select-none cursor-pointer overflow-hidden group transition-all duration-200 hover:border-[#0327aa]/40"
+							onClick={(e) => {
+								e.stopPropagation()
+								callEvent('openSettings', 'vip')
 							}}
-							onClick={(e) => e.stopPropagation()}
 						>
-							<div
-								className={cn(
-									'rounded-full bg-indigo-500/15 text-indigo-500 flex items-center justify-center shadow-2xs',
-									isCompactSize ? 'w-6 h-6 mb-1' : 'w-8 h-8 mb-1.5'
+							<div className="flex flex-col items-center gap-1.5 transition-transform duration-200 group-hover:scale-105">
+								<ProBadge
+									size={isCompactSize ? 'xs' : 'sm'}
+									variant="indigo"
+									rounded="full"
+								/>
+								{!isCompactSize && (
+									<span className="text-[11px] font-medium text-muted transition-colors duration-200 group-hover:text-content">
+										ارتقا به اشتراک پرو
+									</span>
 								)}
-							>
-								<Icon name="crown" size={isCompactSize ? 12 : 15} />
 							</div>
-							<span
-								className={cn(
-									'font-bold text-content leading-tight',
-									isCompactSize ? 'text-[10px]' : 'text-xs'
-								)}
-							>
-								{isCompactSize ? 'مخصوص پرو' : 'مخصوص کاربران پرو'}
-							</span>
 						</div>
 					)}
 					{canvasMode === 'edit' && (