diff --git a/src/context/theme.context.tsx b/src/context/theme.context.tsx
index fc331abe..e790d923 100644
--- a/src/context/theme.context.tsx
+++ b/src/context/theme.context.tsx
@@ -15,6 +15,7 @@ export enum Theme {
 	Light = 'light',
 	Dark = 'dark',
 	Glass = 'glass',
+	LightGlass = 'lightglass',
 	Icy = 'icy',
 	Zarna = 'zarna',
 	esteghlal = 'esteghlal',
diff --git a/src/layouts/setting/tabs/appearance/components/theme-selector.tsx b/src/layouts/setting/tabs/appearance/components/theme-selector.tsx
index 48ed6f3a..8a8d47c3 100644
--- a/src/layouts/setting/tabs/appearance/components/theme-selector.tsx
+++ b/src/layouts/setting/tabs/appearance/components/theme-selector.tsx
@@ -60,52 +60,51 @@ interface Props {
 
 export function ThemeSelector({ fetched_themes }: Props) {
 	const { setTheme, theme } = useTheme()
-	const [themes, setThemes] = useState<ThemeItem[]>(defaultThemes)
-	const [selected, setSelected] = useState<ThemeItem | null>(null)
-
-	function onClick(item: ThemeItem) {
-		setTheme(item.id)
-		setSelected(item)
-		Analytics.event('theme_selected')
-	}
-
-	useEffect(() => {
-		const currentTheme = themes.find((t) => t.id === theme)
-		if (currentTheme) {
-			setSelected(currentTheme)
-		}
-	}, [themes])
-
-	useEffect(() => {
-		if (fetched_themes.length) {
-			const mapped: ThemeItem[] = fetched_themes.map((item) => ({
-				id: item.value,
-				name: item.name ?? 'بدون نام',
-				icon: <IoMdStar size={14} />,
-				description: item?.description || 'تم خریداری شده',
-			}))
-			setThemes([...defaultThemes, ...mapped])
-		}
-	}, [fetched_themes])
-
-	const handleMoreClick = () => {
-		Analytics.event('theme_market_opened')
-		callEvent('openMarketModal')
-	}
-
-	const renderThemePreview = (item: ThemeItem) => (
-		<Tooltip content={item.description}>
-			<div className="flex items-center gap-2">
-				<span
-					className="flex items-center justify-center w-5 h-5 rounded-full bg-content bg-glass text-primary"
-					data-theme={item.id}
-				>
-					{item.icon}
-				</span>
-				<span className="w-32 text-xs truncate">{item.description}</span>
-			</div>
-		</Tooltip>
-	)
+	const themes = [
+		{
+			id: 'glass',
+			name: 'شیشه‌ای تیره',
+			icon: <MdOutlineBlurOn size={18} />,
+			buttonClass: 'backdrop-blur-md text-white bg-black/40',
+			activeClass: 'ring-2 ring-blue-500',
+		},
+		{
+			id: 'lightglass',
+			name: 'شیشه‌ای روشن',
+			icon: <MdOutlineBlurOn size={18} />,
+			buttonClass: 'backdrop-blur-md text-gray-800 bg-white/55',
+			activeClass: 'ring-2 ring-blue-500',
+		},
+		{
+			id: 'icy',
+			name: 'یخی (آزمایشی)',
+			icon: <MdOutlineBlurOn size={18} />,
+			buttonClass:
+				'backdrop-blur-md text-gray-800 bg-white/50 border border-white/20',
+			activeClass: 'ring-2 ring-blue-500',
+		},
+		{
+			id: 'light',
+			name: 'روشن',
+			icon: <IoMdSunny size={18} />,
+			buttonClass: 'bg-gray-100 text-gray-800 border border-gray-200',
+			activeClass: 'ring-2 ring-blue-500',
+		},
+		{
+			id: 'dark',
+			name: 'تیره',
+			icon: <IoMdMoon size={18} />,
+			buttonClass: 'text-white',
+			activeClass: 'ring-2 ring-blue-500',
+		},
+		{
+			id: 'zarna',
+			name: 'زرنا',
+			icon: <IoMdStar size={18} />,
+			buttonClass: 'text-content',
+			activeClass: 'ring-2 ring-blue-500',
+		},
+	]
 
 	return (
 		<SectionPanel title="انتخاب تم" delay={0.2} size="sm">
@@ -118,10 +117,23 @@ export function ThemeSelector({ fetched_themes }: Props) {
 							isActive={selected?.id === item.id}
 							onClick={() => onClick(item)}
 							key={item.id}
-							className="w-full !h-20 !max-h-20 !min-h-20"
-							label={item.name}
-							description={renderThemePreview(item)}
-						/>
+							onClick={() => setTheme(item.id)}
+							className={`
+                			relative flex flex-col p-2 rounded-lg transition-all cursor-pointer duration-300 shadow-md hover:shadow-lg bg-base-100  justify-center
+                			${item.buttonClass}
+                			${theme === item.id ? item.activeClass : 'hover:ring-2 hover:ring-blue-300'}
+              									`}
+						>
+							<div className="flex items-center gap-2">
+								<span className="flex items-center justify-center w-8 h-8 rounded-full bg-black/10">
+									{item.icon}
+								</span>
+								<span className="text-xs font-medium">{item.name}</span>
+								{theme === item.id && (
+									<div className="absolute w-2 h-2 bg-blue-500 rounded-full top-2 right-2" />
+								)}
+							</div>
+						</div>
 					))}
 					<div
 						className="flex items-center justify-center w-full h-20 text-xs border border-content border-muted gap-0.5 text-muted hover:!text-primary cursor-pointer hover:!border-primary transition-all duration-200 rounded-xl"
diff --git a/src/styles/theme-colors.css b/src/styles/theme-colors.css
index e195dcf9..de681513 100644
--- a/src/styles/theme-colors.css
+++ b/src/styles/theme-colors.css
@@ -2,6 +2,7 @@
 @import './theme/light.css';
 @import './theme/dark.css';
 @import './theme/glass.css';
+@import './theme/lightglass.css';
 @import './theme/icy.css';
 @import './theme/zarna.css';
 @import './theme/esteghlal.css';
\ No newline at end of file
diff --git a/src/styles/theme/lightglass.css b/src/styles/theme/lightglass.css
new file mode 100644
index 00000000..eae5af53
--- /dev/null
+++ b/src/styles/theme/lightglass.css
@@ -0,0 +1,72 @@
+@plugin "daisyui/theme" {
+    name: "lightglass";
+    default: false;
+    --color-base-100: rgba(255, 255, 255, 0.75);
+    --color-base-200: rgba(255, 255, 255, 0.6);
+    --color-base-300: rgba(0, 0, 0, 0.05);
+    --color-base-content: rgba(0, 0, 0, 0.85);
+
+    --color-primary: rgba(var(--brand-primary-rgb), 0.9);
+    --color-primary-focus: rgba(var(--brand-primary-rgb), 1);
+    --color-primary-content: rgba(255, 255, 255, 1);
+
+    --color-secondary: rgba(var(--brand-secondary-rgb), 0.8);
+    --color-secondary-focus: rgba(var(--brand-secondary-rgb), 0.9);
+    --color-secondary-content: rgba(255, 255, 255, 1);
+
+    --color-accent: rgba(34, 197, 94, 0.8);
+    --color-accent-focus: rgba(22, 163, 74, 0.9);
+    --color-accent-content: rgba(255, 255, 255, 1);
+
+    --color-error: rgba(239, 68, 68, 0.8);
+    --color-success: rgba(34, 197, 94, 0.8);
+    --color-warning: rgba(245, 158, 11, 0.8);
+    --color-warning-content: #271b06;
+    --color-info: rgba(59, 130, 246, 0.8);
+
+    --glass: true;
+    --glass-opacity: 35%;
+    --glass-border-opacity: 20%;
+    --glass-reflex-degree: 120%;
+    --glass-reflex-opacity: 10%;
+    --glass-blur: 32px;
+}
+
+[data-theme="lightglass"] .menu,
+[data-theme="lightglass"] .navbar,
+[data-theme="lightglass"] .modal-box,
+[data-theme="lightglass"] .drawer-side,
+[data-theme="lightglass"] .collapse {
+    -webkit-backdrop-filter: blur(16px) saturate(180%);
+    backdrop-filter: blur(16px) saturate(180%);
+    background-color: rgba(255, 255, 255, 0.65);
+}
+
+[data-theme="lightglass"] .search-box {
+    -webkit-backdrop-filter: blur(10px) saturate(180%);
+    backdrop-filter: blur(10px) saturate(180%);
+    background-color: rgba(255, 255, 255, 0.7);
+}
+
+[data-theme="lightglass"] .widget-wrapper,
+[data-theme="lightglass"] .bg-glass,
+[data-theme="lightglass"] .tooltip {
+    -webkit-backdrop-filter: blur(16px) saturate(150%);
+    backdrop-filter: blur(16px) saturate(150%);
+    background-color: rgba(255, 255, 255, 0.55);
+}
+
+[data-theme="lightglass"] #bookmarks .bg-widget:hover .flex {
+    color: #ffffff;
+}
+
+
+[data-theme="lightglass"] .modal-box {
+    -webkit-backdrop-filter: blur(40px) saturate(200%);
+    backdrop-filter: blur(40px) saturate(200%);
+    background-color: rgba(255, 255, 255, 0.65);
+}
+
+[data-theme="lightglass"] select {
+    background-color: rgba(255, 255, 255, 1);
+}