diff --git a/src/common/constant/priority_options.ts b/src/common/constant/priority_options.ts
index 0ff8a84b..6f3891d9 100644
--- a/src/common/constant/priority_options.ts
+++ b/src/common/constant/priority_options.ts
@@ -1,20 +1,26 @@
+export const PRIORITY_BG_COLORS = {
+	low: 'bg-success text-success-content',
+	medium: 'bg-warning text-warning-content',
+	high: 'bg-error text-error-content',
+}
+
 export const PRIORITY_OPTIONS = [
 	{
 		value: 'low',
 		ariaLabel: 'اولویت کم',
-		bgColor: 'bg-success text-success-content',
+		bgColor: PRIORITY_BG_COLORS.low,
 		hoverBgColor: 'hover:bg-green-600',
 	},
 	{
 		value: 'medium',
 		ariaLabel: 'اولویت متوسط',
-		bgColor: 'bg-warning text-warning-content',
+		bgColor: PRIORITY_BG_COLORS.medium,
 		hoverBgColor: 'hover:bg-yellow-400',
 	},
 	{
 		value: 'high',
 		ariaLabel: 'اولویت مهم',
-		bgColor: 'bg-error text-error-content',
+		bgColor: PRIORITY_BG_COLORS.high,
 		hoverBgColor: 'hover:bg-red-500',
 	},
 ]
diff --git a/src/components/chip.component.tsx b/src/components/chip.component.tsx
index 4e46bf4d..461076ce 100644
--- a/src/components/chip.component.tsx
+++ b/src/components/chip.component.tsx
@@ -16,7 +16,7 @@ export const Chip: React.FC<ChipProps> = ({
 	return (
 		<button
 			onClick={onClick}
-			className={`px-4 py-2 cursor-pointer rounded-full text-xs font-bold transition-all border-2 ${selected ? 'bg-primary border-primary text-white' : 'bg-base-100 border-base-300/30 text-muted hover:border-primary/30'} ${className}`}
+			className={`px-4 py-2 cursor-pointer rounded-full text-xs font-bold active:scale-95 transition-all border-2 ${selected ? 'bg-primary border-primary text-white' : 'bg-base-100 border-base-300/30 text-muted hover:border-primary/30'} ${className}`}
 			dir={dir}
 		>
 			{children}
diff --git a/src/components/clickableTooltip.tsx b/src/components/clickableTooltip.tsx
index d47be85a..2a5cbd52 100644
--- a/src/components/clickableTooltip.tsx
+++ b/src/components/clickableTooltip.tsx
@@ -213,7 +213,7 @@ const ClickableTooltip = ({
 					{isOpen && (
 						<motion.div
 							ref={tooltipRef}
-							className={`fixed rounded-xl py-1 px-2 text-xs max-w-xs bg-base-300 shadow bg-glass ${contentClassName}`}
+							className={`fixed text-xs  max-w-xs  bg-transparent! shadow-md bg-glass rounded-2xl ${contentClassName}`}
 							style={{
 								left: tooltipCoords.x,
 								top: tooltipCoords.y,
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index 2ecd4717..5eb42564 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -211,14 +211,7 @@ export function Dropdown({
 					<div id={id} className="fixed inset-0 z-[9998] pointer-events-none">
 						<div
 							ref={dropdownContentRef}
-							className={`
-                fixed z-[9999] border border-content rounded-xl
-                bg-content shadow-xl overflow-hidden
-                transition-opacity duration-100
-                ${isReady ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}
-                bg-glass
-                ${dropdownClassName}
-              `}
+							className={`fixed z-9999 shadow-xl overflow-hidden rounded-2xl bg-transparent! transition-opacity duration-100 ${isReady ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'} bg-glass ${dropdownClassName}`}
 							style={{
 								maxHeight,
 								width:
@@ -243,50 +236,3 @@ export function Dropdown({
 		</div>
 	)
 }
-
-export interface SimpleDropdownProps extends Omit<DropdownProps, 'options' | 'trigger'> {
-	triggerText: string
-	triggerIcon?: ReactNode
-	options: (string | { label: string; value: any; disabled?: boolean })[]
-	onSelect?: (value: any) => void
-}
-
-export function SimpleDropdown({
-	triggerText,
-	triggerIcon,
-	options,
-	onSelect,
-	...dropdownProps
-}: SimpleDropdownProps) {
-	const formattedOptions: DropdownOption[] = options.map((option, index) => {
-		if (typeof option === 'string') {
-			return {
-				id: `option-${index}`,
-				label: option,
-				value: option,
-			}
-		}
-		return {
-			id: `option-${index}`,
-			label: option.label,
-			value: option.value,
-			disabled: option.disabled,
-		}
-	})
-
-	const trigger = (
-		<div className="flex items-center gap-2 px-3 py-2 transition-colors border rounded-lg bg-content border-border hover:bg-primary/5">
-			{triggerIcon}
-			<span>{triggerText}</span>
-		</div>
-	)
-
-	return (
-		<Dropdown
-			{...dropdownProps}
-			trigger={trigger}
-			options={formattedOptions}
-			onOptionSelect={(option) => onSelect?.(option.value)}
-		/>
-	)
-}
diff --git a/src/components/dropdown/index.ts b/src/components/dropdown/index.ts
index bece4401..90f5fb6a 100644
--- a/src/components/dropdown/index.ts
+++ b/src/components/dropdown/index.ts
@@ -1,2 +1,2 @@
-export type { DropdownOption, DropdownProps, SimpleDropdownProps } from './dropdown'
-export { Dropdown, SimpleDropdown } from './dropdown'
+export type { DropdownOption, DropdownProps } from './dropdown'
+export { Dropdown } from './dropdown'
diff --git a/src/components/filter-tooltip/filter-tooltip.tsx b/src/components/filter-tooltip/filter-tooltip.tsx
index 08f4839d..d335022a 100644
--- a/src/components/filter-tooltip/filter-tooltip.tsx
+++ b/src/components/filter-tooltip/filter-tooltip.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, ReactNode } from 'react'
+import { useState, useRef, type ReactNode } from 'react'
 import { ClickableTooltip } from '@/components/clickableTooltip'
 import Tooltip from '../toolTip'
 import { Button } from '../button/button'
@@ -53,9 +53,9 @@ export function FilterTooltip({
 				isOpen={showTooltip}
 				setIsOpen={setShowTooltip}
 				position="bottom"
-				contentClassName={`!p-2 !max-w-none ${tooltipClassName || ''}`}
+				contentClassName={tooltipClassName || ''}
 				content={
-					<div className="flex flex-col gap-1 min-w-[100px] max-h-52 overflow-y-auto pl-1">
+					<div className="flex flex-col gap-1 p-2 overflow-y-auto border border-base-300 rounded-2xl min-w-25 bg-base-200 max-h-52">
 						{options.map((option) => (
 							<button
 								key={option.value}
diff --git a/src/components/text-input.tsx b/src/components/text-input.tsx
index a093b619..93f230ee 100644
--- a/src/components/text-input.tsx
+++ b/src/components/text-input.tsx
@@ -105,7 +105,7 @@ export const TextInput = memo(function TextInput({
 		onKeyDown,
 		dir: direction,
 		placeholder: placeholder || '',
-		className: `input bg-content w-full text-[14px] ${sizes[size]} rounded-xl !outline-none transition-all duration-300 focus:ring-1 focus:ring-blue-500/20 focus:border-primary font-light ${className}`,
+		className: `input bg-base-200 w-full ring-0! text-[14px] ${sizes[size]} rounded-xl !outline-none transition-all duration-200 focus:ring-1 focus:ring-primary/20 focus:border-primary font-light focus:placeholder:text-base-content/20 ${className}`,
 		onChange: handleChange,
 		maxLength,
 		autoComplete,
diff --git a/src/layouts/friends/components/activity-card/activity-card.tsx b/src/layouts/friends/components/activity-card/activity-card.tsx
index 3b870560..350238b5 100644
--- a/src/layouts/friends/components/activity-card/activity-card.tsx
+++ b/src/layouts/friends/components/activity-card/activity-card.tsx
@@ -147,7 +147,7 @@ function ActivityReactionSelector({ reactions, activityId, index }: Prop) {
 			}
 			className="absolute! top-0! left-0!"
 		>
-			<div className="flex items-center justify-around w-full h-10 gap-1 px-2 py-1 overflow-x-auto shadow-lg">
+			<div className="flex items-center justify-around w-full h-10 gap-1 px-2 py-1 overflow-x-auto shadow-lg bg-base-300">
 				{isPending
 					? Array.from({ length: 5 }).map((_, i) => (
 							<div
diff --git a/src/layouts/friends/components/activity-card/manage-activity.bottomSheet.tsx b/src/layouts/friends/components/activity-card/manage-activity.bottomSheet.tsx
index 3d1ebfce..d514515f 100644
--- a/src/layouts/friends/components/activity-card/manage-activity.bottomSheet.tsx
+++ b/src/layouts/friends/components/activity-card/manage-activity.bottomSheet.tsx
@@ -30,7 +30,6 @@ interface ManageActivityBottomSheetProps {
 }
 
 const MAX_ACTIVITY_LENGTH = 40
-// const ACTIVITY_COOLDOWN_HOURS = 24
 
 export function ManageActivityBottomSheet({
 	onClose,
@@ -92,7 +91,7 @@ export function ManageActivityBottomSheet({
 
 	if (currentActivity) {
 		return (
-			<div className="flex flex-col gap-3 p-2 min-w-96 max-w-96">
+			<div className="flex flex-col gap-3 p-2 border min-w-96 max-w-96 bg-base-200 border-base-300 rounded-2xl">
 				<div className="flex flex-col gap-1">
 					<div className="flex flex-row items-center justify-between">
 						<p className="text-sm font-bold text-base-content/70">
@@ -180,7 +179,7 @@ export function ManageActivityBottomSheet({
 
 	return (
 		<>
-			<div className="flex flex-col gap-2 p-2 min-w-96 max-w-96">
+			<div className="flex flex-col gap-2 p-2 border min-w-96 max-w-96 bg-base-200 border-base-300 rounded-2xl">
 				<div className="space-y-1">
 					<div className="space-y-1">
 						<div className="flex justify-between">
@@ -209,7 +208,7 @@ export function ManageActivityBottomSheet({
 									},
 								]}
 								optionalText="نمایش"
-								className="w-32!"
+								className="w-32! border-none"
 								onChange={(val) => setTime((Number(val) as any) || 24)}
 							></SelectBox>
 						</div>
diff --git a/src/layouts/search/select-engine/engine-selector.tsx b/src/layouts/search/select-engine/engine-selector.tsx
index 7ca048c5..b4798fb0 100644
--- a/src/layouts/search/select-engine/engine-selector.tsx
+++ b/src/layouts/search/select-engine/engine-selector.tsx
@@ -1,6 +1,5 @@
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { callEvent } from '@/common/utils/call-event'
-import { NewBadge } from '@/components/badges/new.badge'
 import { Dropdown } from '@/components/dropdown'
 import { useAuth } from '@/context/auth.context'
 import { useChangeSearchEngine } from '@/services/hooks/extension/updateSetting.hook'
@@ -26,7 +25,6 @@ export function EngineSelector({ trigger, onSelected }: EngineSelectorProps) {
 	const { data: searchboxData, isLoading } = useGetSearchboxData({ enabled: true })
 	const changeEngineMutation = useChangeSearchEngine()
 	const [currentEngine, setCurrentEngine] = useState<EngineMeta>(GOOGLE)
-	const [showNewBadge, setShowNewBadge] = useState<boolean>(false)
 	const [clicked, setClicked] = useState<boolean>(false)
 
 	const engines = useMemo(() => {
@@ -64,8 +62,6 @@ export function EngineSelector({ trigger, onSelected }: EngineSelectorProps) {
 				onSelected?.(serverEngine)
 				setToStorage('selected_engine', serverEngine.id)
 			}
-		} else {
-			if (!isLoading) setShowNewBadge(true)
 		}
 	}, [searchboxData?.selected_engine, engines])
 
@@ -96,7 +92,6 @@ export function EngineSelector({ trigger, onSelected }: EngineSelectorProps) {
 							engineId={currentEngine.id}
 							icon={currentEngine.icon}
 						/>
-						{showNewBadge && <NewBadge className="right-1 bottom-1" />}
 						<Icon
 							name="chevronDown"
 							className={`text-muted transition-transform duration-300 ${clicked ? 'rotate-180' : ''}`}
@@ -108,7 +103,7 @@ export function EngineSelector({ trigger, onSelected }: EngineSelectorProps) {
 			onClose={() => setClicked(false)}
 			dropdownClassName="engine-selector"
 		>
-			<div className="flex flex-col gap-1 p-2 min-w-40">
+			<div className="flex flex-col gap-1 p-2 border-2 rounded-2xl min-w-40 bg-base-200 border-base-300">
 				<p className="px-2 mb-1 text-xs font-medium text-base-content/60">
 					انتخاب موتور جستجو
 				</p>
diff --git a/src/layouts/setting/tabs/account/components/interests-selector.tsx b/src/layouts/setting/tabs/account/components/interests-selector.tsx
index 95279b37..eed75f2a 100644
--- a/src/layouts/setting/tabs/account/components/interests-selector.tsx
+++ b/src/layouts/setting/tabs/account/components/interests-selector.tsx
@@ -3,6 +3,7 @@ import { ClickableTooltip } from '@/components/clickableTooltip'
 import type { ProfileMetaItem } from '@/services/hooks/profile/getProfileMeta.hook'
 import { Button } from '@/components/button/button'
 import { Icon } from '@/src/icons'
+import { Chip } from '@/components/chip.component'
 
 interface InterestsSelectorProps {
 	interests: ProfileMetaItem[]
@@ -32,36 +33,25 @@ export const InterestsSelector = ({
 	}
 
 	const content = (
-		<div className="w-64 p-1">
+		<div className="p-2 border w-72 bg-base-200 rounded-2xl border-base-300">
 			{isLoading ? (
 				<div className="py-3 text-[10px] italic font-medium text-center animate-pulse text-muted">
 					صبر کنید...
 				</div>
 			) : (
-				<div className="flex flex-wrap gap-2 p-1 overflow-x-hidden overflow-y-auto scrollbar-none max-h-40">
+				<div className="flex flex-wrap gap-0.5 p-1 overflow-x-hidden overflow-y-auto max-h-40">
 					{interests.map((interest) => {
 						const isSelected = selectedInterests.includes(interest.id)
 
 						return (
-							<button
+							<Chip
 								key={interest.id}
-								type="button"
+								selected={isSelected}
+								className="w-fit! text-[11px]"
 								onClick={() => handleInterestToggle(interest.id)}
-								className={`
-								h-8 px-2 flex items-center justify-center w-fit gap-1.5 hover:border-none cursor-pointer
-								text-[11px] font-medium rounded-xl border whitespace-nowrap
-								transition-all duration-150 active:scale-95
-								${
-									isSelected
-										? 'bg-primary border-primary text-white shadow-sm'
-										: 'border border-base-content/20 text-content'
-								}
-							`}
 							>
-								<span className="text-[11px] leading-none">
-									{interest.title}
-								</span>
-							</button>
+								{interest.title}
+							</Chip>
 						)
 					})}
 				</div>
diff --git a/src/layouts/setting/tabs/account/components/occupation-selector.tsx b/src/layouts/setting/tabs/account/components/occupation-selector.tsx
index ac8d8d3a..99bf1279 100644
--- a/src/layouts/setting/tabs/account/components/occupation-selector.tsx
+++ b/src/layouts/setting/tabs/account/components/occupation-selector.tsx
@@ -3,6 +3,7 @@ import { ClickableTooltip } from '@/components/clickableTooltip'
 import type { ProfileMetaItem } from '@/services/hooks/profile/getProfileMeta.hook'
 import { Button } from '@/components/button/button'
 import { Icon } from '@/src/icons'
+import { Chip } from '@/components/chip.component'
 
 interface OccupationSelectorProps {
 	occupations: ProfileMetaItem[]
@@ -32,33 +33,24 @@ export const OccupationSelector = ({
 	}
 
 	const content = (
-		<div className="w-64 p-1 ">
+		<div className="w-64 p-2 border bg-base-200 rounded-2xl border-base-300">
 			{isLoading ? (
 				<div className="py-4 text-xs italic font-medium text-center animate-pulse">
 					درحال بارگذاری...
 				</div>
 			) : (
-				<div className="flex flex-row flex-wrap gap-2 overflow-x-hidden overflow-y-auto scrollbar-none max-h-40">
+				<div className="flex flex-row flex-wrap gap-1 overflow-x-hidden overflow-y-auto max-h-40">
 					{occupations.map((occupation) => {
 						const isActive = selectedOccupation === occupation.id
 						return (
-							<button
+							<Chip
+								selected={isActive}
+								className="text-[11px]"
 								key={occupation.id}
-								type="button"
 								onClick={() => handleSelect(occupation.id)}
-								className={`
-								h-8 px-2 flex items-center justify-center w-fit gap-1.5 hover:border-none cursor-pointer
-								text-[11px] font-medium rounded-xl border whitespace-nowrap
-								transition-all duration-150 active:scale-95
-								${
-									isActive
-										? 'bg-primary border-primary text-white shadow-sm'
-										: 'border border-base-content/20 text-content'
-								}
-							`}
 							>
 								{occupation.title}
-							</button>
+							</Chip>
 						)
 					})}
 				</div>
diff --git a/src/layouts/setting/tabs/account/components/profile-date-picker.tsx b/src/layouts/setting/tabs/account/components/profile-date-picker.tsx
index 3f3bf919..7143d6c1 100644
--- a/src/layouts/setting/tabs/account/components/profile-date-picker.tsx
+++ b/src/layouts/setting/tabs/account/components/profile-date-picker.tsx
@@ -125,7 +125,7 @@ export default function JalaliDatePicker({
 				isOpen={isOpen}
 				setIsOpen={setIsOpen}
 				content={
-					<div className="min-w-52">
+					<div className="p-2 border min-w-52 bg-base-200 rounded-2xl border-base-300">
 						<div className="flex gap-3 mb-5">
 							<ScrollWheel
 								label="روز"
@@ -172,7 +172,6 @@ export default function JalaliDatePicker({
 				}
 				position="bottom"
 				offset={8}
-				contentClassName="p-4 border shadow-xl bg-glass bg-content border-base-300/20 rounded-2xl max-w-none"
 				closeOnClickOutside={true}
 			/>
 		</>
diff --git a/src/layouts/widgets/calendar/components/day/toolTipContent.tsx b/src/layouts/widgets/calendar/components/day/toolTipContent.tsx
index 931e6a76..f17de791 100644
--- a/src/layouts/widgets/calendar/components/day/toolTipContent.tsx
+++ b/src/layouts/widgets/calendar/components/day/toolTipContent.tsx
@@ -103,11 +103,6 @@ export const CalendarDayDetails: React.FC<CalendarDayDetailsProps> = ({
 	const todayHijriEvents = getHijriEvents(events, selectedDate)
 	const todayGregorianEvents = getGregorianEvents(events, selectedDate)
 
-	const isHoliday =
-		selectedDate.day() === 5 ||
-		todayShamsiEvents.some((event) => event.isHoliday) ||
-		todayHijriEvents.some((event) => event.isHoliday)
-
 	const dayEvent = [
 		...todayShamsiEvents,
 		...todayGregorianEvents,
@@ -123,9 +118,6 @@ export const CalendarDayDetails: React.FC<CalendarDayDetailsProps> = ({
 	const jalaliDay = selectedDate.format('dddd')
 
 	const totalEvents = dayEvent.length
-	const holidayStyle = isHoliday
-		? 'from-orange-600 to-red-700'
-		: 'from-sky-500 to-blue-700'
 
 	useEffect(() => {
 		const selectedDateStr = selectedDate.doAsGregorian().format('YYYY-MM-DD')
@@ -134,11 +126,8 @@ export const CalendarDayDetails: React.FC<CalendarDayDetailsProps> = ({
 	}, [selectedDate, moods])
 
 	return (
-		<div className="my-1 flex flex-col w-[240px] rounded-xl overflow-hidden bg-base-100 border border-base-300">
-			{/* Header */}
-			<div
-				className={`px-3 py-2 bg-gradient-to-r rounded-b-lg ${holidayStyle} text-white`}
-			>
+		<div className="flex flex-col overflow-hidden border w-60 bg-base-200 border-base-300 rounded-2xl">
+			<div className={`px-3 py-2  bg-primary/90   text-white`}>
 				<div className="flex items-center justify-between text-sm">
 					<span className="font-medium">{jalaliDay}</span>
 					<span className="opacity-90">{jalali}</span>
@@ -200,20 +189,20 @@ export const CalendarDayDetails: React.FC<CalendarDayDetailsProps> = ({
 				)}
 
 				{totalEvents > 0 && (
-					<div className="flex flex-row flex-wrap pr-1 space-y-1 overflow-y-auto gap-x-1 max-h-32 scrollbar-thin scrollbar-thumb-base-300 scrollbar-track-transparent">
+					<div className="flex flex-col p-1 pl-1 space-y-1 overflow-y-auto gap-x-1 max-h-28 scrollbar-thin scrollbar-thumb-base-300 scrollbar-track-transparent">
 						{dayEvent.map((event, idx) => (
 							<div
 								key={`e-${idx}`}
-								className={`flex items-center py-1! gap-1 h-5  w-fit px-2 outline rounded-lg ${
+								className={`flex relative overflow-hidden outline items-center py-0.5 gap-1 min-h-6 h-fit  w-full px-2  rounded-xl ${
 									event.isHoliday
-										? 'bg-error/20 text-error outline-error/10'
-										: 'badge badge-ghost text-content outline-base-200'
+										? 'bg-error/20 text-error outline-error/30'
+										: 'badge badge-ghost text-content  outline-base-300'
 								}`}
 							>
 								<div
-									className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${event.isHoliday ? 'bg-red-400 animate-pulse' : 'bg-info'} `}
+									className={`w-1.5 h-1.5 ml-0.5 -mr-0.5 rounded-full shrink-0 ${event.isHoliday ? 'bg-red-400 animate-pulse ring-2 ring-error/20' : 'bg-primary/80 ring-2 ring-primary/20'} `}
 								/>
-								<div className="flex-1 min-w-0 max-w-42 text-[12px] truncate">
+								<div className="flex-1 min-w-0 text-[11px]">
 									{event.title}
 								</div>
 							</div>
diff --git a/src/layouts/widgets/habit/components/habit-detail.modal.tsx b/src/layouts/widgets/habit/components/habit-detail.modal.tsx
index 6bd9e05f..38761b3b 100644
--- a/src/layouts/widgets/habit/components/habit-detail.modal.tsx
+++ b/src/layouts/widgets/habit/components/habit-detail.modal.tsx
@@ -83,23 +83,24 @@ export function HabitDetailModal({
 									/>
 								</Button>
 							}
-							dropdownClassName="p-2"
 						>
-							<button
-								className={`w-full px-3 py-1 flex items-center gap-x-2.25 cursor-pointer rounded-lg transition-colors duration-200 text-content hover:text-content/90 hover:bg-base-300/70! `}
-								onClick={onClickEdit}
-							>
-								<Icon name="pen" size={13} />
-								<span className="font-medium">ویرایش</span>
-							</button>
+							<div className="flex flex-col p-2 border bg-base-200 border-base-300 rounded-2xl">
+								<button
+									className={`w-full px-3 py-1 flex items-center gap-x-2.25 cursor-pointer rounded-lg transition-colors duration-200 text-content hover:text-content/90 hover:bg-base-300/70!`}
+									onClick={onClickEdit}
+								>
+									<Icon name="pen" size={13} />
+									<span className="font-medium">ویرایش</span>
+								</button>
 
-							<button
-								className={`w-full px-3 py-1 flex items-center gap-x-2.5 cursor-pointer rounded-lg transition-colors duration-200 text-error hover:text-error/90 hover:bg-error/10!`}
-								onClick={onClickArchive}
-							>
-								<Icon name="archive" size={14} />
-								<span className="font-medium">بایگانی</span>
-							</button>
+								<button
+									className={`w-full px-3 py-1 flex items-center gap-x-2.5 cursor-pointer rounded-lg transition-colors duration-200 text-error hover:text-error/90 hover:bg-error/10!`}
+									onClick={onClickArchive}
+								>
+									<Icon name="archive" size={14} />
+									<span className="font-medium">بایگانی</span>
+								</button>
+							</div>
 						</Dropdown>
 					</div>
 					<p className="text-[10px] truncate text-muted">
diff --git a/src/layouts/widgets/notes/components/note-editor.tsx b/src/layouts/widgets/notes/components/note-editor.tsx
index df4076f5..ffc61595 100644
--- a/src/layouts/widgets/notes/components/note-editor.tsx
+++ b/src/layouts/widgets/notes/components/note-editor.tsx
@@ -1,6 +1,7 @@
-import { PRIORITY_OPTIONS } from '@/common/constant/priority_options'
+import { PRIORITY_BG_COLORS, PRIORITY_OPTIONS } from '@/common/constant/priority_options'
 import { Button } from '@/components/button/button'
 import { IconLoading } from '@/components/loading/icon-loading'
+import { TextInput } from '@/components/text-input'
 import Tooltip from '@/components/toolTip'
 import { useNotes } from '@/context/notes.context'
 import type { FetchedNote } from '@/services/hooks/note/note.interface'
@@ -29,27 +30,7 @@ export function NoteEditor({ note }: NoteEditorProps) {
 		}
 	}, [note.id, note.title, note.body])
 
-	// auto resize
-	useEffect(() => {
-		const titleElement = titleRef.current
-		const bodyElement = bodyRef.current
-
-		if (titleElement) {
-			titleElement.style.height = 'auto'
-			titleElement.style.height = `${titleElement.scrollHeight}px`
-		}
-
-		if (bodyElement) {
-			bodyElement.style.height = 'auto'
-			bodyElement.style.height = `${bodyElement.scrollHeight}px`
-		}
-	}, [currentTitle, currentBody, note.id])
-
-	const handleInputChange = (
-		field: 'title' | 'body',
-		value: string,
-		targetElement: HTMLTextAreaElement | HTMLInputElement
-	) => {
+	const handleInputChange = (field: 'title' | 'body', value: string) => {
 		if (field === 'title') {
 			setCurrentTitle(value)
 			note.title = value
@@ -57,9 +38,6 @@ export function NoteEditor({ note }: NoteEditorProps) {
 			setCurrentBody(value)
 			note.body = value
 		}
-
-		targetElement.style.height = 'auto'
-		targetElement.style.height = `${targetElement.scrollHeight}px`
 	}
 
 	const onSave = () => {
@@ -74,33 +52,29 @@ export function NoteEditor({ note }: NoteEditorProps) {
 		setPriority(value as any)
 	}
 
+	const bgColor = priority ? PRIORITY_BG_COLORS[priority] : ' bg-base-300/70'
 	return (
-		<div className="flex flex-col h-full overflow-hidden gap-y-2">
-			<input
+		<div className="flex flex-col h-full overflow-hidden">
+			<TextInput
 				ref={titleRef}
 				type="text"
-				className={
-					'w-full py-3 px-2 text-xs font-medium text-content rounded-xl bg-base-300/70 outline-none'
-				}
+				className={`w-full h-12 font-bold! border-0 rounded-b-none! ${bgColor}`}
 				placeholder="عنوان یادداشت..."
 				value={currentTitle}
-				onChange={(e) => handleInputChange('title', e.target.value, e.target)}
-				dir="rtl"
+				onChange={(val) => handleInputChange('title', val)}
 			/>
 
 			<textarea
 				ref={bodyRef}
-				className={
-					'w-full h-full px-2 pt-1 pb-4 text-sm flex-grow resize-none rounded-xl bg-base-300/70 outline-none font-light'
-				}
+				className={`w-full h-full px-2 pt-1 pb-4 text-sm grow resize-none text-shadow-2xs rounded-b-2xl  outline-none font-light ${bgColor}`}
 				placeholder="متن یادداشت..."
 				value={currentBody}
-				onChange={(e) => handleInputChange('body', e.target.value, e.target)}
+				onChange={(e) => handleInputChange('body', e.target.value)}
 				rows={3}
 				dir="rtl"
 			/>
 
-			<div className="flex flex-row items-center justify-between w-full h-6 px-1 rounded-xl">
+			<div className="flex flex-row items-center justify-between mt-1 w-full py-0.5 px-1 rounded-xl">
 				<div className="flex items-center gap-1">
 					{PRIORITY_OPTIONS.map((p) => (
 						<PriorityButton
@@ -111,7 +85,7 @@ export function NoteEditor({ note }: NoteEditorProps) {
 						/>
 					))}
 				</div>
-				<div className="flex items-center gap-1">
+				<div className="flex items-center">
 					<Button
 						size="sm"
 						onClick={() => onSave()}
@@ -119,9 +93,9 @@ export function NoteEditor({ note }: NoteEditorProps) {
 						disabled={isSaving}
 						loadingText={<IconLoading />}
 						isPrimary={true}
-						className="!p-0 !h-full !w-14  rounded-2xl !px-2"
+						className="w-24 h-6 rounded-2xl"
 					>
-						<span className="!text-[12px]">ذخیـره</span>
+						<span className="text-xs">ذخیـره</span>
 					</Button>
 				</div>
 			</div>
diff --git a/src/layouts/widgets/notes/components/note-item.tsx b/src/layouts/widgets/notes/components/note-item.tsx
index 016b085b..1cd72cd8 100644
--- a/src/layouts/widgets/notes/components/note-item.tsx
+++ b/src/layouts/widgets/notes/components/note-item.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { PRIORITY_OPTIONS } from '@/common/constant/priority_options'
+import { PRIORITY_BG_COLORS, PRIORITY_OPTIONS } from '@/common/constant/priority_options'
 import type { FetchedNote } from '@/services/hooks/note/note.interface'
 import moment from 'jalali-moment'
 import Analytics from '@/analytics'
@@ -11,7 +11,7 @@ interface Prop {
 }
 
 export function NoteItem({ note, handleNoteClick }: Prop) {
-	const p = PRIORITY_OPTIONS.find((p) => p.value === note.priority)
+	const pBg = note.priority ? PRIORITY_BG_COLORS[note.priority] : 'bg-base-300'
 	const [isExpanded, setIsExpanded] = useState(false)
 
 	const CHARACTER_LIMIT = 120
@@ -27,10 +27,10 @@ export function NoteItem({ note, handleNoteClick }: Prop) {
 
 	return (
 		<div
-			className={`group flex flex-col rounded-2xl border border-base-300/40  transition-all active:scale-[0.99] cursor-pointer ${p?.bgColor || 'bg-base-300/30'} hover:opacity-90`}
+			className={`group flex flex-col rounded-2xl active:scale-[0.99] cursor-pointer ${pBg} hover:opacity-90`}
 			onClick={() => handleNoteClick(note.id)}
 		>
-			<div className="flex items-center justify-between gap-2 px-2.5 py-1.5  rounded-t-2xl">
+			<div className="flex items-center justify-between gap-2 px-2.5 py-1.5 ">
 				<div className="flex items-center gap-1.5 min-w-0">
 					<h3 className="text-[12px] font-bold">
 						{note.title || 'بدون عنوان'}
@@ -44,10 +44,10 @@ export function NoteItem({ note, handleNoteClick }: Prop) {
 				</div>
 			</div>
 
-			<div className="p-2.5 bg-base-100/10">
+			<div className="p-2.5">
 				<div className="relative">
 					<p
-						className={`text-[11.5px] leading-relaxed  whitespace-pre-wrap wrap-break-word font-medium transition-all duration-300 ${
+						className={`text-[11.5px] leading-relaxed text-shadow-2xs  whitespace-pre-wrap wrap-break-word font-medium transition-all duration-300 ${
 							!isExpanded && shouldShowReadMore ? 'line-clamp-3' : ''
 						}`}
 					>
diff --git a/src/layouts/widgets/notes/components/note-navigation.tsx b/src/layouts/widgets/notes/components/note-navigation.tsx
index 283917c4..0f9e4807 100644
--- a/src/layouts/widgets/notes/components/note-navigation.tsx
+++ b/src/layouts/widgets/notes/components/note-navigation.tsx
@@ -85,7 +85,11 @@ export function NoteNavigation() {
 							className={`h-7 w-7 flex items-center justify-center rounded-full cursor-pointer transition-colors text-muted opacity-70 hover:bg-base-300 hover:opacity-100 ${activeNoteIndex > 0 ? 'opacity-100' : 'opacity-30 cursor-not-allowed'} duration-300`}
 							onClick={() => onBackToList()}
 						>
-							<Icon name="trash" size={18} className="text-content" />
+							<Icon
+								name="chevronLeft"
+								size={18}
+								className="text-content"
+							/>
 						</button>
 					</Tooltip>
 				</>
diff --git a/src/layouts/widgets/todos/components/priority.dropdown.tsx b/src/layouts/widgets/todos/components/priority.dropdown.tsx
index 3dd2b480..511224b3 100644
--- a/src/layouts/widgets/todos/components/priority.dropdown.tsx
+++ b/src/layouts/widgets/todos/components/priority.dropdown.tsx
@@ -49,10 +49,9 @@ export function PriorityDropdown({ priority, setPriority }: PriorityDropdownProp
 					<Icon name="filterLeft" size={18} />
 				</Button>
 			}
-			dropdownClassName="p-1.5"
 			position="top-left"
 		>
-			<div className="flex flex-col gap-1 min-w-32">
+			<div className="flex flex-col gap-1 border min-w-32 bg-base-200 border-base-300 rounded-2xl p-1.5">
 				<button
 					onClick={() => setPriority(undefined)}
 					className={`px-3 py-2 rounded-lg text-xs text-right cursor-pointer transition-colors ${
diff --git a/src/layouts/widgets/todos/components/select-friends.todo.tsx b/src/layouts/widgets/todos/components/select-friends.todo.tsx
index b31de2ad..33a6b323 100644
--- a/src/layouts/widgets/todos/components/select-friends.todo.tsx
+++ b/src/layouts/widgets/todos/components/select-friends.todo.tsx
@@ -38,7 +38,7 @@ export function TodoSelectFriends({ selectedFriends, setSelectedFriends }: Prop)
 			dropdownClassName="select-friends"
 			position="top-right"
 		>
-			<div className="p-2 min-w-xs min-h-80 max-h-80">
+			<div className="p-2 border min-w-xs min-h-80 max-h-80 bg-base-200 border-base-300 rounded-2xl">
 				<p className="pr-1 mb-1 text-sm font-bold">افزودن دوست به تسک</p>
 				<div className="h-56 max-h-56">
 					<SelectFriendLayout
@@ -49,8 +49,9 @@ export function TodoSelectFriends({ selectedFriends, setSelectedFriends }: Prop)
 				</div>
 				<Button
 					size="sm"
+					isPrimary
 					onClick={() => callEvent('closeAllDropdowns')}
-					className="w-full  border-none! mt-2.5 border! border-content! rounded-t-xl text-base-content/80"
+					className="w-full rounded-2xl"
 				>
 					ذخیره و بستن
 				</Button>
diff --git a/src/layouts/widgets/todos/expandable-todo-input.tsx b/src/layouts/widgets/todos/expandable-todo-input.tsx
index c0a39d81..d3aa9217 100644
--- a/src/layouts/widgets/todos/expandable-todo-input.tsx
+++ b/src/layouts/widgets/todos/expandable-todo-input.tsx
@@ -243,7 +243,7 @@ export function ExpandableTodoInput({
 							defaultValue=""
 							onChange={handleTodoTextChange}
 							placeholder="عنوان تسک جدید..."
-							className="h-6! border-none! outline-none! shadow-none! ring-0! w-full p-0 pr-1 text-sm bg-transparent! rounded-2xl focus:placeholder:text-base-content/20"
+							className="h-6! border-none! outline-none! shadow-none! ring-0! w-full p-0 pr-1 text-sm bg-transparent! rounded-2xl"
 							onFocus={handleInputFocus}
 							onKeyDown={handleKeyDown}
 							id="expandable-todo-input"
@@ -304,14 +304,6 @@ export function ExpandableTodoInput({
 										/>
 									</div>
 									<div className="flex pl-1 gap-0.5 overflow-x-auto">
-										{!isEdit && isAuthenticated && (
-											<TodoSelectFriends
-												selectedFriends={selectedFriends}
-												setSelectedFriends={(fList: Friend[]) => {
-													setSelectedFriends(fList)
-												}}
-											/>
-										)}
 										<PriorityDropdown
 											priority={priority}
 											setPriority={setPriority}
@@ -322,7 +314,7 @@ export function ExpandableTodoInput({
 											onClick={() => setShowDatePicker(true)}
 											ref={dateButtonRef}
 										>
-											<Icon name="calendarDays" size={18} />
+											<Icon name="calendarDays" size={16} />
 											<p className="truncate max-w-14 min-w-5">
 												{selectedDate
 													? formatJalaliDateForDisplay(
@@ -342,26 +334,35 @@ export function ExpandableTodoInput({
 												{category || 'دسته‌بندی'}
 											</p>
 										</Button>
+
+										{!isEdit && isAuthenticated && (
+											<TodoSelectFriends
+												selectedFriends={selectedFriends}
+												setSelectedFriends={(fList: Friend[]) => {
+													setSelectedFriends(fList)
+												}}
+											/>
+										)}
 									</div>
 								</div>
 								<ClickableTooltip
 									isOpen={isTagTooltipOpen}
 									triggerRef={categoryInputRef}
 									position="top"
-									contentClassName={`!p-2 !max-w-none`}
 									setIsOpen={setIsTagTooltipOpen}
 									content={
-										<div className="flex flex-col w-56 gap-2">
-											<div className="flex flex-row items-center gap-1 border-b-2 border-content">
+										<div className="flex flex-col gap-2 p-2 border w-62 bg-base-200 rounded-2xl border-base-300">
+											<div className="relative flex flex-row items-center gap-1 px-2 border rounded-2xl border-content bg-base-200">
 												<TextInput
 													value={category}
 													onChange={(val) => setCategory(val)}
 													placeholder="مثلا: کارهای خونه"
+													className="duration-75 border-0 bg-transparent!"
 												/>
 												<Button
 													size="xs"
 													isPrimary={true}
-													className="rounded-full p-0! w-8 h-8"
+													className="rounded-full p-0! w-6 h-6"
 													onClick={() =>
 														setIsTagTooltipOpen(false)
 													}
@@ -369,6 +370,7 @@ export function ExpandableTodoInput({
 													<Icon name="plus" size={18} />
 												</Button>
 											</div>
+											<div className="w-full h-0.5  rounded-full bg-base-300" />
 											<div className="flex flex-wrap w-full gap-1 overflow-x-hidden overflow-y-auto max-h-32 scrollbar-none">
 												{fetchedTags
 													?.filter((tag) => tag.trim())
@@ -379,7 +381,7 @@ export function ExpandableTodoInput({
 															onClick={() =>
 																onSelectCategory(tag)
 															}
-															className="flex gap-1 text-xs px-2! py-1!e"
+															className="flex gap-1 text-xs px-2! py-1!"
 														>
 															<Icon
 																name="tags"
@@ -398,7 +400,6 @@ export function ExpandableTodoInput({
 									isOpen={showDatePicker}
 									setIsOpen={setShowDatePicker}
 									position="top"
-									contentClassName="!p-1 !max-w-none shadow-2xl border border-base-200 rounded-3xl"
 									content={
 										<DatePicker
 											selectedDate={selectedDate}