diff --git a/src/common/constant/store.key.ts b/src/common/constant/store.key.ts
index 7137da23..da1cb029 100644
--- a/src/common/constant/store.key.ts
+++ b/src/common/constant/store.key.ts
@@ -1,5 +1,4 @@
 import type { CurrencyColorMode } from '@/context/currency.context'
-import type { SelectedCity } from '@/context/general-setting.context'
 import type { Theme } from '@/context/theme.context'
 import type { TodoOptions } from '@/context/todo.context'
 import type { WidgetItem } from '@/context/widget-visibility.context'
@@ -31,7 +30,6 @@ export interface StorageKV {
 	currencies: string[]
 	currencyColorMode: CurrencyColorMode
 	hasShownPwaModal: boolean
-	selectedCity: SelectedCity | null
 	currentWeather: FetchedWeather
 	todos: Todo[]
 	wallpaper: StoredWallpaper
diff --git a/src/common/utils/call-event.ts b/src/common/utils/call-event.ts
index 656b0f27..8b35bae4 100644
--- a/src/common/utils/call-event.ts
+++ b/src/common/utils/call-event.ts
@@ -14,7 +14,7 @@ import type { FontFamily } from '@/context/appearance.context'
 
 export interface EventName {
 	startSync: SyncTarget
-	openSettings: 'account' | 'wallpapers' | null
+	openSettings: 'account' | 'wallpapers' | 'general' | null
 	todosChanged: Todo[]
 	wallpaperChanged: StoredWallpaper
 	openWidgetsSettings: { tab: WidgetTabKeys | null }
diff --git a/src/components/auth/require-auth.tsx b/src/components/auth/require-auth.tsx
index 42684334..24ce4013 100644
--- a/src/components/auth/require-auth.tsx
+++ b/src/components/auth/require-auth.tsx
@@ -73,7 +73,12 @@ export const RequireAuth = ({ children, fallback, mode = 'block' }: RequireAuthP
 				<p className={'text-xs mb-4 text-content text-center'}>
 					برای دسترسی به این بخش، لطفاً وارد حساب کاربری خود شوید.
 				</p>
-				<Button onClick={handleAuthClick} size="sm">
+				<Button
+					onClick={handleAuthClick}
+					size="sm"
+					isPrimary={true}
+					className="btn mt-2 !w-fit px-6 border-none shadow-none text-white rounded-3xl transition-colors duration-300 ease-in-out"
+				>
 					ورود به حساب
 				</Button>
 			</motion.div>
diff --git a/src/context/general-setting.context.tsx b/src/context/general-setting.context.tsx
index e6c2add8..ea69de04 100644
--- a/src/context/general-setting.context.tsx
+++ b/src/context/general-setting.context.tsx
@@ -15,21 +15,12 @@ export interface GeneralData {
 	selected_timezone: FetchedTimezone
 	browserBookmarksEnabled: boolean
 	browserTabsEnabled: boolean
-	selectedCity: SelectedCity
-}
-
-export interface SelectedCity {
-	name: string
-	lat: number
-	lon: number
-	state?: string | null
 }
 
 interface GeneralSettingContextType extends GeneralData {
 	updateSetting: <K extends keyof GeneralData>(key: K, value: GeneralData[K]) => void
 	setAnalyticsEnabled: (value: boolean) => void
 	setTimezone: (value: FetchedTimezone) => void
-	setSelectedCity: (value: any) => void
 	setBrowserBookmarksEnabled: (value: boolean) => void
 	setBrowserTabsEnabled: (value: boolean, event?: React.MouseEvent) => void
 }
@@ -44,7 +35,6 @@ const DEFAULT_SETTINGS: GeneralData = {
 	},
 	browserBookmarksEnabled: false,
 	browserTabsEnabled: false,
-	selectedCity: { name: 'Tehran', lat: 35.6892523, lon: 51.3896004, state: null },
 }
 
 export const GeneralSettingContext = createContext<GeneralSettingContextType | null>(null)
@@ -59,12 +49,10 @@ export function GeneralSettingProvider({ children }: { children: React.ReactNode
 		async function loadGeneralSettings() {
 			try {
 				const storedSettings = await getFromStorage('generalSettings')
-				const [browserBookmarksEnabled, browserTabsEnabled, selectedCity] =
-					await Promise.all([
-						browserHasPermission(['bookmarks']),
-						browserHasPermission(['tabs', 'tabGroups']),
-						getFromStorage('selectedCity'),
-					])
+				const [browserBookmarksEnabled, browserTabsEnabled] = await Promise.all([
+					browserHasPermission(['bookmarks']),
+					browserHasPermission(['tabs', 'tabGroups']),
+				])
 
 				if (storedSettings) {
 					setSettings({
@@ -76,15 +64,6 @@ export function GeneralSettingProvider({ children }: { children: React.ReactNode
 								: storedSettings.selected_timezone,
 						browserBookmarksEnabled: browserBookmarksEnabled,
 						browserTabsEnabled: browserTabsEnabled,
-						selectedCity: {
-							lat: selectedCity?.lat || DEFAULT_SETTINGS.selectedCity.lat,
-							lon: selectedCity?.lon || DEFAULT_SETTINGS.selectedCity.lon,
-							name:
-								selectedCity?.name || DEFAULT_SETTINGS.selectedCity.name,
-							state:
-								selectedCity?.state ||
-								DEFAULT_SETTINGS.selectedCity.state,
-						},
 					})
 				}
 			} finally {
@@ -229,10 +208,6 @@ export function GeneralSettingProvider({ children }: { children: React.ReactNode
 		'browser_tabs_disabled'
 	)
 
-	const setSelectedCity = (val: SelectedCity) => {
-		updateSetting('selectedCity', val)
-	}
-
 	if (!isInitialized) {
 		return null
 	}
@@ -248,8 +223,6 @@ export function GeneralSettingProvider({ children }: { children: React.ReactNode
 		setBrowserBookmarksEnabled,
 		browserTabsEnabled: settings.browserTabsEnabled,
 		setBrowserTabsEnabled,
-		selectedCity: settings.selectedCity,
-		setSelectedCity,
 	}
 
 	return (
diff --git a/src/layouts/navbar/navbar.layout.tsx b/src/layouts/navbar/navbar.layout.tsx
index 801ad5c7..f9c57d89 100644
--- a/src/layouts/navbar/navbar.layout.tsx
+++ b/src/layouts/navbar/navbar.layout.tsx
@@ -40,10 +40,13 @@ export function NavbarLayout(): JSX.Element {
 	const [logoData, setLogoData] = useState<LogoData>(DEFAULT_LOGO_DATA)
 	const { isAuthenticated } = useAuth()
 
-	const handleOpenSettings = useCallback((tabName: 'account' | 'wallpapers' | null) => {
-		if (tabName) setTab(tabName)
-		setShowSettings(true)
-	}, [])
+	const handleOpenSettings = useCallback(
+		(tabName: 'account' | 'wallpapers' | 'general' | null) => {
+			if (tabName) setTab(tabName)
+			setShowSettings(true)
+		},
+		[]
+	)
 
 	const settingsModalCloseHandler = () => setShowSettings(false)
 
diff --git a/src/layouts/setting/tabs/general/components/select-city.tsx b/src/layouts/setting/tabs/general/components/select-city.tsx
index d0b170fc..efbf158c 100644
--- a/src/layouts/setting/tabs/general/components/select-city.tsx
+++ b/src/layouts/setting/tabs/general/components/select-city.tsx
@@ -1,126 +1,193 @@
-import { useRef, useState } from 'react'
+import { useState, useMemo } from 'react'
 import { CiLocationOn } from 'react-icons/ci'
 import Analytics from '@/analytics'
-import { setToStorage } from '@/common/storage'
 import { IconLoading } from '@/components/loading/icon-loading'
 import Modal from '@/components/modal'
 import { SectionPanel } from '@/components/section-panel'
-import { type SelectedCity, useGeneralSetting } from '@/context/general-setting.context'
-import { useDebouncedValue } from '@/hooks/useDebouncedValue'
-import { useGetRelatedCities } from '@/services/hooks/weather/getRelatedCities'
-import { CitySearchInput } from '../../weather/CitySearchInput'
-import { SelectedCityDisplay } from '../../weather/SelectedCityDisplay'
+import { useGetCitiesList } from '@/services/hooks/cities/getCitiesList'
+import { useAuth } from '@/context/auth.context'
+import { AuthRequiredModal } from '@/components/auth/AuthRequiredModal'
+import { useSetCity } from '@/services/hooks/user/userService.hook'
+import { TextInput } from '@/components/text-input'
+import { showToast } from '@/common/toast'
+import { translateError } from '@/utils/translate-error'
+
+interface SelectedCity {
+	city: string
+	cityId: string
+}
 
 export function SelectCity() {
-	const [inputValue, setInputValue] = useState('')
+	const [searchTerm, setSearchTerm] = useState('')
 	const [isModalOpen, setIsModalOpen] = useState(false)
-	const inputRef = useRef<HTMLInputElement>(null)
+	const [showAuthModal, setShowAuthModal] = useState(false)
+	const searchInputRef = useRef<HTMLInputElement>(null)
+	const { isAuthenticated, user, isLoadingUser } = useAuth()
+	const { data: cities, isLoading, error } = useGetCitiesList(isAuthenticated)
+	const { mutateAsync: setCityToServer, isPending: isSettingCity } = useSetCity()
 
-	const debouncedValue = useDebouncedValue(
-		inputValue.length >= 2 ? inputValue : '',
-		500
-	)
-	const { setSelectedCity, selectedCity } = useGeneralSetting()
+	const filteredCities = useMemo(() => {
+		if (!cities || !searchTerm) return cities || []
 
-	const { data: relatedCities, isLoading, error } = useGetRelatedCities(debouncedValue)
+		const lowerSearchTerm = searchTerm.toLowerCase()
 
-	const handleSelectCity = (city: SelectedCity) => {
-		setSelectedCity(city)
-		setIsModalOpen(false)
-		setInputValue('')
+		const prefixMatches = cities.filter((city) =>
+			city.city.toLowerCase().startsWith(lowerSearchTerm)
+		)
 
-		Analytics.event('city_selected')
+		const remainingCities = cities.filter(
+			(city) =>
+				!city.city.toLowerCase().startsWith(lowerSearchTerm) &&
+				city.city.toLowerCase().includes(lowerSearchTerm)
+		)
 
-		setToStorage('selectedCity', {
-			lat: city.lat,
-			lon: city.lon,
-			name: city.name,
-			state: city.state,
-		})
-	}
+		return [...prefixMatches, ...remainingCities]
+	}, [cities, searchTerm])
 
-	const handleInputChange = (value: string) => {
-		setInputValue(value)
+	const handleSelectCity = async (city: SelectedCity) => {
+		if (!city.cityId) return
+		try {
+			setIsModalOpen(false)
+			setSearchTerm('')
+
+			Analytics.event('city_selected')
+
+			await setCityToServer(city.cityId)
+		} catch (error) {
+			showToast(translateError(error) as any, 'error')
+		}
 	}
+
 	const onModalOpen = () => {
+		if (!isAuthenticated) {
+			Analytics.event('open_city_selection_modal_unauthenticated')
+			setShowAuthModal(true)
+			return
+		}
+
 		setIsModalOpen(true)
 		Analytics.event('open_city_selection_modal')
 		setTimeout(() => {
-			inputRef.current?.focus()
-		}, 100)
+			searchInputRef.current?.focus()
+		}, 300)
 	}
 
+	const selected = user?.city
+		? filteredCities.find((c) => c.cityId === user.city?.id)
+		: null
+
 	return (
 		<SectionPanel title="انتخاب شهر" size="sm">
 			<div className="space-y-2">
 				<button
-					onClick={() => onModalOpen()}
-					className="flex items-center justify-between w-full p-3 text-right transition-colors border cursor-pointer rounded-2xl bg-base-100 border-base-300 hover:bg-base-200"
+					onClick={onModalOpen}
+					disabled={isSettingCity}
+					className="flex items-center justify-between w-full p-3 text-right transition-colors border cursor-pointer rounded-2xl bg-base-100 border-base-300 hover:bg-base-200 disabled:opacity-50 disabled:cursor-not-allowed"
 				>
-					<span>
-						{selectedCity
-							? `${selectedCity.name} ${selectedCity.state ? `, ${selectedCity.state}` : ''}`
-							: 'انتخاب شهر'}
-					</span>
-					<CiLocationOn className="w-5 h-5 text-primary" />
+					{isLoadingUser ? (
+						<IconLoading className="mx-auto text-center" />
+					) : selected ? (
+						selected.city
+					) : (
+						'انتخاب شهر...'
+					)}
+					{isSettingCity ? (
+						<IconLoading />
+					) : (
+						<CiLocationOn className="w-5 h-5 text-primary" />
+					)}
 				</button>
-				<SelectedCityDisplay city={selectedCity} />
+
 				{error && (
-					<div className="p-3 text-sm text-right duration-300 border rounded-lg border-red-500/20 bg-red-500/10 backdrop-blur-sm animate-in fade-in-0">
-						<div className="font-medium text-red-400">
+					<div className="p-3 text-sm text-right duration-300 border rounded-lg border-error/20 bg-error/10 backdrop-blur-sm animate-in fade-in-0">
+						<div className="font-medium text-error">
 							خطا در دریافت اطلاعات
 						</div>
-						<div className="mt-1 text-red-300 opacity-80">
+						<div className="mt-1 text-error/80">
 							لطفا اتصال اینترنت خود را بررسی کرده و مجدداً تلاش کنید.
 						</div>
 					</div>
 				)}
 			</div>
+			<AuthRequiredModal
+				isOpen={showAuthModal}
+				onClose={() => setShowAuthModal(!showAuthModal)}
+				message="برای انتخاب شهر، لطفاً وارد حساب کاربری خود شوید."
+			/>
 			<Modal
 				isOpen={isModalOpen}
-				onClose={() => setIsModalOpen(false)}
+				onClose={() => {
+					setIsModalOpen(false)
+					setSearchTerm('')
+				}}
 				title="انتخاب شهر"
 				size="lg"
 				direction="rtl"
 			>
-				<div className="space-y-4">
-					<CitySearchInput
-						ref={inputRef}
-						value={inputValue}
-						onChange={handleInputChange}
-						onFocus={() => {}}
-						isLoading={isLoading}
-					/>
-					<div className="overflow-y-auto max-h-96 custom-scrollbar">
+				<div className="space-y-2 overflow-hidden">
+					<div className="relative">
+						<TextInput
+							type="text"
+							placeholder="جستجوی شهر..."
+							value={searchTerm}
+							ref={searchInputRef}
+							onChange={(value) => setSearchTerm(value)}
+						/>
+						<CiLocationOn className="absolute w-5 h-5 transform -translate-y-1/2 left-3 top-1/2 text-base-content/40" />
+					</div>
+
+					<div className="overflow-y-auto min-h-52 max-h-52 custom-scrollbar">
 						{isLoading ? (
 							<div className="flex items-center justify-center p-4 text-center text-primary">
 								<IconLoading />
 								در حال بارگذاری...
 							</div>
-						) : relatedCities && relatedCities.length > 0 ? (
-							relatedCities.map((city) => (
+						) : filteredCities?.length > 0 ? (
+							filteredCities.map((city) => (
 								<div
-									key={`${city.lat}-${city.lon}`}
+									key={city.cityId}
 									onClick={() => handleSelectCity(city)}
-									className="flex items-center w-full p-3 text-right transition-all duration-200 border-b cursor-pointer hover:bg-gradient-to-l hover:from-primary/10 hover:to-transparent border-base-200/30 last:border-b-0 group rounded-2xl"
+									className="flex items-center w-full p-3 text-right transition-all duration-200 border-b cursor-pointer border-base-200/30 last:border-b-0 group rounded-2xl hover:bg-primary/20 hover:text-primary"
 								>
 									<CiLocationOn className="flex-shrink-0 w-5 h-5 ml-3 transition-transform text-primary group-hover:scale-110" />
 									<span className="flex-1 font-medium">
-										{city.name}
-										{city.state ? `, ${city.state}` : ''}
+										{city.city}
 									</span>
 								</div>
 							))
-						) : inputValue.length >= 2 ? (
+						) : searchTerm ? (
 							<div className="p-4 text-center text-base-content/60">
 								نتیجه‌ای یافت نشد
 							</div>
+						) : cities && cities.length === 0 ? (
+							<div className="p-4 text-center text-base-content/60">
+								هیچ شهری موجود نیست
+							</div>
 						) : (
 							<div className="p-4 text-center text-base-content/60">
 								شهر مورد نظر خود را جستجو کنید
 							</div>
 						)}
 					</div>
+
+					<div className="pt-2 border-t border-base-300">
+						<p className="text-sm text-center text-base-content/60">
+							شهر شما در لیست نیست یا مشکلی مشاهده می‌کنید؟{' '}
+							<a
+								href="https://feedback.widgetify.ir"
+								target="_blank"
+								rel="noopener noreferrer"
+								className="font-medium text-primary hover:underline"
+								onClick={() =>
+									Analytics.event('feedback_link_clicked', {
+										source: 'city_selection',
+									})
+								}
+							>
+								اطلاع دهید
+							</a>
+						</p>
+					</div>
 				</div>
 			</Modal>
 		</SectionPanel>
diff --git a/src/layouts/setting/tabs/weather/CitySearchInput.tsx b/src/layouts/setting/tabs/weather/CitySearchInput.tsx
deleted file mode 100644
index 77d4e6ab..00000000
--- a/src/layouts/setting/tabs/weather/CitySearchInput.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { TextInput } from '@/components/text-input'
-
-interface CitySearchInputProps {
-	value: string
-	onChange: (e: string) => void
-	onFocus: () => void
-	isLoading: boolean
-	ref?: React.RefObject<HTMLInputElement | null>
-}
-
-export function CitySearchInput({
-	value,
-	onChange,
-	onFocus,
-	isLoading,
-	ref,
-}: CitySearchInputProps) {
-	const getSpinnerStyle = () => {
-		return 'border-content border-t-primary/80'
-	}
-
-	return (
-		<div className="relative">
-			<TextInput
-				ref={ref}
-				value={value}
-				onChange={onChange}
-				onFocus={onFocus}
-				placeholder="نام شهر را جستجو کنید..."
-			/>
-			{isLoading && (
-				<div className="absolute -translate-y-1/2 left-3 top-1/2">
-					<div
-						className={`w-4 h-4 border-2 rounded-full animate-spin ${getSpinnerStyle()}`}
-					></div>
-				</div>
-			)}
-		</div>
-	)
-}
diff --git a/src/layouts/setting/tabs/weather/SelectedCityDisplay.tsx b/src/layouts/setting/tabs/weather/SelectedCityDisplay.tsx
deleted file mode 100644
index 1c299262..00000000
--- a/src/layouts/setting/tabs/weather/SelectedCityDisplay.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { SelectedCity } from '@/context/general-setting.context'
-
-interface SelectedCityDisplayProps {
-	city: SelectedCity | null
-}
-
-export function SelectedCityDisplay({ city }: SelectedCityDisplayProps) {
-	if (!city) return null
-	return (
-		<div className={'w-full rounded-xl overflow-hidden border border-content'}>
-			<div className="p-4">
-				<div className="flex items-start">
-					<div className="flex-1">
-						<div className="flex items-center justify-between">
-							<div
-								className={
-									'text-xs px-2 py-0.5 rounded-full bg-primary/20 text-primary font-bold'
-								}
-							>
-								{city.state}
-							</div>
-						</div>
-
-						<div className="flex items-center gap-4 mt-2 mb-3">
-							<span className="font-semibold">{city.name}</span> با موفقیت
-							انتخاب شد و به صورت خودکار در ویجت‌های مربوطه اعمال می‌شود.
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	)
-}
diff --git a/src/layouts/widgets/tools/religious/religious-time.tsx b/src/layouts/widgets/tools/religious/religious-time.tsx
index 48543de5..3b741317 100644
--- a/src/layouts/widgets/tools/religious/religious-time.tsx
+++ b/src/layouts/widgets/tools/religious/religious-time.tsx
@@ -1,9 +1,13 @@
 import { FiClock, FiMoon, FiSun, FiSunrise, FiSunset } from 'react-icons/fi'
-import { useGeneralSetting } from '@/context/general-setting.context'
 import { useReligiousTime } from '@/services/hooks/date/getReligiousTime.hook'
 import type { WidgetifyDate } from '../../calendar/utils'
 import { DailyZikrBox } from './components/daily-zikr-box'
 import { PrayerTimeBox } from './components/prayer-time-box'
+import { useAuth } from '@/context/auth.context'
+import { RequireAuth } from '@/components/auth/require-auth'
+import { Button } from '@/components/button/button'
+import { callEvent } from '@/common/utils/call-event'
+import Analytics from '@/analytics'
 
 interface Prop {
 	currentDate: WidgetifyDate
@@ -29,21 +33,24 @@ const DAILY_ZIKRS = [
 ]
 
 export function ReligiousTime({ currentDate }: Prop) {
-	const { selectedCity } = useGeneralSetting()
-
+	const { isAuthenticated, user } = useAuth()
 	const day = currentDate.jDate()
 	const month = currentDate.jMonth() + 1
-
+	3
 	const weekDay = currentDate.format('dddd')
 
-	const lat = selectedCity?.lat || 35.6892523
-	const long = selectedCity?.lon || 51.3896004
-
 	const {
 		data: religiousTimeData,
-		loading,
+		isLoading: loading,
 		error,
-	} = useReligiousTime(day, month, lat, long)
+		refetch,
+	} = useReligiousTime(day, month, isAuthenticated && user?.city?.id != null)
+
+	useEffect(() => {
+		if (isAuthenticated && user?.city?.id) {
+			refetch()
+		}
+	}, [user?.city?.id, isAuthenticated, refetch])
 
 	const dailyZikr = DAILY_ZIKRS.find((item) => item.day === weekDay)
 	const getBoxIconStyle = () => {
@@ -67,64 +74,87 @@ export function ReligiousTime({ currentDate }: Prop) {
 		{ title: 'نیمه شب', value: religiousTimeData?.nimeshab, icon: FiMoon },
 	]
 
+	const onClickSetCity = () => {
+		callEvent('openSettings', 'general')
+		Analytics.event('religious_time_set_city_clicked')
+	}
+
 	return (
 		<div>
-			{loading ? (
-				<div className="grid grid-cols-2 gap-1.5 mb-1 md:grid-cols-3">
-					{prayerTimeBoxes.map((box, index) => (
-						<PrayerTimeBox
-							key={index}
-							title={box.title}
-							icon={box.icon}
-							index={index}
-							iconColorStyle={getBoxIconStyle()}
-							isLoading={true}
-						/>
-					))}
-				</div>
-			) : error ? (
-				<div
-					className={
-						'flex-1 flex flex-col items-center justify-center gap-y-1.5 px-5 py-16'
-					}
-				>
-					<div
-						className={
-							'flex items-center justify-center w-12 h-12 mx-auto rounded-full bg-base-300/70 border-base/70'
-						}
-					>
-						<FiSunrise className="text-content" size={24} />
+			<RequireAuth>
+				{!user?.city?.id ? (
+					<div className="flex flex-col items-center justify-center w-full h-full p-4 text-center rounded-2xl">
+						<div className="mb-4 text-4xl">🕋</div>
+						<p className="mb-4 text-sm leading-relaxed text-muted">
+							برای نمایش اوقات شرعی، لطفاً ابتدا در تنظیمات ویجت، شهر خود را
+							تنظیم کنید.
+						</p>
+						<Button
+							size="md"
+							isPrimary={true}
+							className="px-6 py-2 font-medium text-white transition-colors rounded-2xl"
+							onClick={onClickSetCity}
+						>
+							تنظیم شهر
+						</Button>
 					</div>
-					<p className="mt-1 text-center text-content">
-						مشکلی در دریافت اطلاعات وجود دارد
-					</p>
-				</div>
-			) : (
-				<>
-					<div className="grid grid-cols-3 gap-[.4rem] mb-1">
+				) : loading ? (
+					<div className="grid grid-cols-2 gap-1.5 mb-1 md:grid-cols-3">
 						{prayerTimeBoxes.map((box, index) => (
 							<PrayerTimeBox
 								key={index}
 								title={box.title}
-								value={box.value}
 								icon={box.icon}
 								index={index}
 								iconColorStyle={getBoxIconStyle()}
+								isLoading={true}
 							/>
 						))}
-					</div>{' '}
-					{loading ? (
-						<DailyZikrBox isLoading={true} />
-					) : (
-						dailyZikr && (
-							<DailyZikrBox
-								zikr={dailyZikr.zikr}
-								meaning={dailyZikr.meaning}
-							/>
-						)
-					)}
-				</>
-			)}
+					</div>
+				) : error ? (
+					<div
+						className={
+							'flex-1 flex flex-col items-center justify-center gap-y-1.5 px-5 py-16'
+						}
+					>
+						<div
+							className={
+								'flex items-center justify-center w-12 h-12 mx-auto rounded-full bg-base-300/70 border-base/70'
+							}
+						>
+							<FiSunrise className="text-content" size={24} />
+						</div>
+						<p className="mt-1 text-center text-content">
+							مشکلی در دریافت اطلاعات وجود دارد
+						</p>
+					</div>
+				) : (
+					<>
+						<div className="grid grid-cols-3 gap-[.4rem] mb-1">
+							{prayerTimeBoxes.map((box, index) => (
+								<PrayerTimeBox
+									key={index}
+									title={box.title}
+									value={box.value}
+									icon={box.icon}
+									index={index}
+									iconColorStyle={getBoxIconStyle()}
+								/>
+							))}
+						</div>{' '}
+						{loading ? (
+							<DailyZikrBox isLoading={true} />
+						) : (
+							dailyZikr && (
+								<DailyZikrBox
+									zikr={dailyZikr.zikr}
+									meaning={dailyZikr.meaning}
+								/>
+							)
+						)}
+					</>
+				)}
+			</RequireAuth>
 		</div>
 	)
 }
diff --git a/src/layouts/widgets/weather/current/current-box.weather.tsx b/src/layouts/widgets/weather/current/current-box.weather.tsx
index f68643b5..ca953984 100644
--- a/src/layouts/widgets/weather/current/current-box.weather.tsx
+++ b/src/layouts/widgets/weather/current/current-box.weather.tsx
@@ -5,28 +5,26 @@ import { TbWind } from 'react-icons/tb'
 import { WiCloudy, WiHumidity } from 'react-icons/wi'
 
 interface CurrentWeatherBoxProps {
-	fetchedWeather: FetchedWeather['weather'] | null
+	fetchedWeather: FetchedWeather | null
 	enabledShowName: boolean
 	temperatureUnit: keyof typeof unitsFlag
-	selectedCityName: string
 }
 
 export function CurrentWeatherBox({
 	fetchedWeather,
 	enabledShowName,
-	selectedCityName,
 	temperatureUnit,
 }: CurrentWeatherBoxProps) {
 	return (
 		<>
 			<div
-				className={`relative p-2 overflow-hidden border ${fetchedWeather?.statusBanner && 'border-r-0'} rounded-2xl border-content min-h-28 max-h-28`}
+				className={`relative p-2 overflow-hidden border ${fetchedWeather?.weather?.statusBanner && 'border-r-0'} rounded-2xl border-content min-h-28 max-h-28`}
 			>
-				{fetchedWeather?.statusBanner && (
+				{fetchedWeather?.weather?.statusBanner && (
 					<div
 						className="absolute inset-0 transition-opacity duration-500 bg-center bg-cover"
 						style={{
-							backgroundImage: `url(${fetchedWeather.statusBanner})`,
+							backgroundImage: `url(${fetchedWeather.weather.statusBanner})`,
 							maskImage:
 								'linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0) 85%)',
 							WebkitMaskImage:
@@ -35,34 +33,40 @@ export function CurrentWeatherBox({
 					/>
 				)}
 
-				{!fetchedWeather?.statusBanner && (
+				{!fetchedWeather?.weather?.statusBanner && (
 					<div className="absolute inset-0 bg-gradient-to-br from-base-200/80 to-base-200/60"></div>
 				)}
 
 				<div className="relative z-10 flex items-center justify-between py-1">
 					<div className="flex flex-col gap-1.5">
 						<span className="text-xs font-medium text-muted drop-shadow-lg">
-							{enabledShowName ? cleanCityName(selectedCityName) : '🏠'}
+							{enabledShowName
+								? cleanCityName(fetchedWeather?.city?.fa || '')
+								: '🏠'}
 						</span>
 
 						<span className="flex items-baseline gap-1.5 text-4xl font-bold leading-none text-base-content drop-shadow-lg">
-							{Math.round(fetchedWeather?.temperature?.temp || 0)}
+							{Math.round(fetchedWeather?.weather?.temperature?.temp || 0)}
 							<span className="text-xl font-medium text-base-content/90 drop-shadow-lg">
 								{unitsFlag[temperatureUnit || 'metric']}
 							</span>
 						</span>
 
 						<span className="text-xs leading-tight text-muted drop-shadow-lg">
-							{fetchedWeather?.description?.text} •{' '}
-							{fetchedWeather?.temperature?.temp_description}
+							{fetchedWeather?.weather?.description?.text} •{' '}
+							{fetchedWeather?.weather?.temperature?.temp_description}
 						</span>
 					</div>
 
-					<img
-						src={fetchedWeather?.icon?.url}
-						className="w-20 h-20 drop-shadow"
-						alt={fetchedWeather?.description?.text}
-					/>
+					{fetchedWeather?.weather?.icon?.url ? (
+						<img
+							src={fetchedWeather?.weather?.icon?.url}
+							className="w-20 h-20 drop-shadow"
+							alt={fetchedWeather?.weather?.description?.text}
+						/>
+					) : (
+						<div className="w-20 h-20 rounded-lg animate-pulse bg-base-300/50" />
+					)}
 				</div>
 			</div>
 
@@ -72,7 +76,9 @@ export function CurrentWeatherBox({
 						<div className="flex items-center justify-center gap-1.5 py-2 transition-colors border rounded-xl border-content">
 							<TbWind className="w-4 h-4 text-muted" />
 							<span className="text-xs font-medium text-muted">
-								{Math.round(fetchedWeather?.temperature?.wind_speed || 0)}{' '}
+								{Math.round(
+									fetchedWeather?.weather?.temperature?.wind_speed || 0
+								)}{' '}
 								m/s
 							</span>
 						</div>
@@ -82,7 +88,7 @@ export function CurrentWeatherBox({
 						<div className="flex items-center justify-center gap-1.5 py-2 transition-colors border rounded-xl border-content">
 							<WiHumidity className="w-4 h-4 text-muted" />
 							<span className="text-xs font-medium text-muted">
-								{fetchedWeather?.temperature?.humidity || 0}%
+								{fetchedWeather?.weather?.temperature?.humidity || 0}%
 							</span>
 						</div>
 					</Tooltip>
@@ -91,7 +97,7 @@ export function CurrentWeatherBox({
 						<div className="flex items-center justify-center gap-1.5 py-2 transition-colors border rounded-xl border-content">
 							<WiCloudy className="w-4 h-4 text-muted" />
 							<span className="text-xs font-medium text-muted">
-								{fetchedWeather?.temperature?.clouds || 0}%
+								{fetchedWeather?.weather?.temperature?.clouds || 0}%
 							</span>
 						</div>
 					</Tooltip>
diff --git a/src/layouts/widgets/weather/weather-setting.tsx b/src/layouts/widgets/weather/weather-setting.tsx
index a61b3dfb..43bb8851 100644
--- a/src/layouts/widgets/weather/weather-setting.tsx
+++ b/src/layouts/widgets/weather/weather-setting.tsx
@@ -1,3 +1,4 @@
+import { useRef, useState, useEffect } from 'react'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { callEvent } from '@/common/utils/call-event'
 import { SectionPanel } from '@/components/section-panel'
diff --git a/src/layouts/widgets/weather/weather.layout.tsx b/src/layouts/widgets/weather/weather.layout.tsx
index 766f3a94..d866a6de 100644
--- a/src/layouts/widgets/weather/weather.layout.tsx
+++ b/src/layouts/widgets/weather/weather.layout.tsx
@@ -1,41 +1,48 @@
 import { useEffect, useState } from 'react'
 import { getFromStorage, setToStorage } from '@/common/storage'
-import { listenEvent } from '@/common/utils/call-event'
-import { useGeneralSetting } from '@/context/general-setting.context'
+import { callEvent, listenEvent } from '@/common/utils/call-event'
 import type {
 	FetchedForecast,
 	FetchedWeather,
 	WeatherSettings,
 } from '@/layouts/widgets/weather/weather.interface'
-import { useGetForecastWeatherByLatLon } from '@/services/hooks/weather/getForecastWeatherByLatLon'
-import { useGetWeatherByLatLon } from '@/services/hooks/weather/getWeatherByLatLon'
 import { WidgetContainer } from '../widget-container'
 import { Forecast } from './forecast/forecast'
 import { CurrentWeatherBox } from './current/current-box.weather'
+import { useAuth } from '@/context/auth.context'
+import { RequireAuth } from '@/components/auth/require-auth'
+import { useGetWeatherByLatLon } from '@/services/hooks/weather/getWeatherByLatLon'
+import { useGetForecastWeatherByLatLon } from '@/services/hooks/weather/getForecastWeatherByLatLon'
+import { Button } from '@/components/button/button'
+import { WidgetTabKeys } from '@/layouts/widgets-settings/constant/tab-keys'
+import Analytics from '@/analytics'
 
 export function WeatherLayout() {
-	const { selectedCity } = useGeneralSetting()
+	const { isAuthenticated, user } = useAuth()
 	const [weatherSettings, setWeatherSettings] = useState<WeatherSettings | null>(null)
 	const [weatherState, setWeather] = useState<FetchedWeather | null>(null)
 	const [forecastWeather, setForecastWeather] = useState<FetchedForecast[] | null>(null)
-	const { data, dataUpdatedAt } = useGetWeatherByLatLon(
-		selectedCity.lat,
-		selectedCity.lon,
-		{
-			refetchInterval: 0,
-			units: weatherSettings?.temperatureUnit,
-			useAI: weatherSettings?.useAI,
-			enabled: !!weatherSettings,
-		}
-	)
+	const {
+		data,
+		dataUpdatedAt,
+		refetch: refetchWeather,
+	} = useGetWeatherByLatLon({
+		refetchInterval: 0,
+		units: weatherSettings?.temperatureUnit,
+		useAI: weatherSettings?.useAI,
+		enabled: isAuthenticated && user?.city?.id != null,
+	})
 
-	const { data: forecastData, dataUpdatedAt: forecastDataUpdatedAt } =
-		useGetForecastWeatherByLatLon(selectedCity.lat, selectedCity.lon, {
-			count: 6,
-			units: weatherSettings?.temperatureUnit,
-			enabled: !!weatherSettings,
-			refetchInterval: 0,
-		})
+	const {
+		data: forecastData,
+		dataUpdatedAt: forecastDataUpdatedAt,
+		refetch: refetchForecast,
+	} = useGetForecastWeatherByLatLon({
+		count: 6,
+		units: weatherSettings?.temperatureUnit,
+		enabled: isAuthenticated && user?.city?.id != null,
+		refetchInterval: 0,
+	})
 
 	useEffect(() => {
 		async function load() {
@@ -93,25 +100,58 @@ export function WeatherLayout() {
 		}
 	}, [forecastDataUpdatedAt])
 
-	if (selectedCity === null || !weatherSettings) return null
+	useEffect(() => {
+		if (isAuthenticated && user?.city?.id) {
+			refetchWeather()
+			refetchForecast()
+		}
+	}, [user?.city?.id, isAuthenticated, refetchWeather, refetchForecast])
+
+	const onClickSetCity = () => {
+		callEvent('openWidgetsSettings', {
+			tab: WidgetTabKeys.weather_settings,
+		})
+		Analytics.event('weather_set_city_clicked')
+	}
+
+	if (!weatherSettings) return null
 
 	return (
 		<WidgetContainer>
-			<div className="flex flex-col w-full h-full gap-2 py-1">
-				<CurrentWeatherBox
-					enabledShowName={weatherSettings.enableShowName}
-					selectedCityName={selectedCity.name}
-					fetchedWeather={weatherState?.weather || null}
-					temperatureUnit={weatherSettings.temperatureUnit}
-				/>
+			<RequireAuth mode="preview">
+				{!user?.city?.id ? (
+					<div className="flex flex-col items-center justify-center w-full h-full p-4 text-center rounded-2xl">
+						<div className="mb-4 text-4xl">🌤️</div>
+						<p className="mb-4 text-sm leading-relaxed text-muted">
+							برای نمایش آب و هوا، لطفاً ابتدا در تنظیمات ویجت، شهر خود را
+							تنظیم کنید.
+						</p>
+						<Button
+							size="md"
+							isPrimary={true}
+							className="px-6 py-2 font-medium text-white transition-colors rounded-2xl"
+							onClick={onClickSetCity}
+						>
+							تنظیم شهر
+						</Button>
+					</div>
+				) : (
+					<div className="flex flex-col w-full h-full gap-2 py-1">
+						<CurrentWeatherBox
+							enabledShowName={weatherSettings.enableShowName}
+							fetchedWeather={weatherState || null}
+							temperatureUnit={weatherSettings.temperatureUnit}
+						/>
 
-				<div className="flex justify-between gap-0.5 px-1  rounded-2xl bg-base-200/40">
-					<Forecast
-						temperatureUnit={weatherSettings.temperatureUnit}
-						forecast={forecastWeather}
-					/>
-				</div>
-			</div>
+						<div className="flex justify-between gap-0.5 px-1  rounded-2xl bg-base-200/40">
+							<Forecast
+								temperatureUnit={weatherSettings.temperatureUnit}
+								forecast={forecastWeather}
+							/>
+						</div>
+					</div>
+				)}
+			</RequireAuth>
 		</WidgetContainer>
 	)
 }
diff --git a/src/services/hooks/cities/getCitiesList.ts b/src/services/hooks/cities/getCitiesList.ts
new file mode 100644
index 00000000..a9807531
--- /dev/null
+++ b/src/services/hooks/cities/getCitiesList.ts
@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query'
+import { getMainClient } from '@/services/api'
+
+export interface CityResponse {
+	city: string
+	cityId: string
+}
+
+async function fetchCitiesList(): Promise<CityResponse[]> {
+	const client = await getMainClient()
+	const response = await client.get<CityResponse[]>('/cities/list')
+	return response.data
+}
+
+export function useGetCitiesList(enabled: boolean) {
+	return useQuery({
+		queryKey: ['getCitiesList'],
+		queryFn: fetchCitiesList,
+		enabled,
+		staleTime: 5 * 60 * 1000, // 5 minutes
+		gcTime: 10 * 60 * 1000, // 10 minutes
+	})
+}
diff --git a/src/services/hooks/date/getReligiousTime.hook.ts b/src/services/hooks/date/getReligiousTime.hook.ts
index fc191f59..9db48fef 100644
--- a/src/services/hooks/date/getReligiousTime.hook.ts
+++ b/src/services/hooks/date/getReligiousTime.hook.ts
@@ -1,5 +1,5 @@
 import { getMainClient } from '@/services/api'
-import { useEffect, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
 
 export interface FetchedReligiousTimeData {
 	azan_sobh: string
@@ -9,55 +9,31 @@ export interface FetchedReligiousTimeData {
 	azan_maghreb: string
 	nimeshab: string
 }
-const cachedData: Map<string, FetchedReligiousTimeData> = new Map()
-export const useReligiousTime = (
-	day: number,
-	month: number,
-	lat: number,
-	long: number
-) => {
-	const [data, setData] = useState<FetchedReligiousTimeData | null>(null)
-	const [loading, setLoading] = useState<boolean>(true)
-	const [error, setError] = useState<Error | null>(null)
+export interface FetchedReligiousTimeData {
+	azan_sobh: string
+	tolu_aftab: string
+	azan_zohr: string
+	ghorub_aftab: string
+	azan_maghreb: string
+	nimeshab: string
+}
 
-	useEffect(() => {
-		const fetchReligiousTime = async () => {
-			try {
-				const cacheKey = `${day}-${month}-${lat}-${long}`
-				if (cachedData.has(cacheKey)) {
-					setData(cachedData.get(cacheKey) as FetchedReligiousTimeData)
-					return
+export const useReligiousTime = (day: number, month: number, enabled: boolean) => {
+	return useQuery({
+		queryKey: ['religiousTime', day, month],
+		queryFn: async () => {
+			const client = await getMainClient()
+			const { data: result } = await client.get<FetchedReligiousTimeData>(
+				'/date/owghat',
+				{
+					params: {
+						day,
+						month,
+					},
 				}
-
-				setLoading(true)
-				const client = await getMainClient()
-
-				const { data: result } = await client.get<FetchedReligiousTimeData>(
-					'/date/owghat',
-					{
-						params: {
-							day,
-							month,
-							lat,
-							long,
-						},
-					}
-				)
-
-				setData(result)
-
-				cachedData.set(cacheKey, result)
-			} catch (err) {
-				setError(
-					err instanceof Error ? err : new Error('An unknown error occurred')
-				)
-			} finally {
-				setLoading(false)
-			}
-		}
-
-		fetchReligiousTime()
-	}, [day, month, lat, long])
-
-	return { data, loading, error }
+			)
+			return result
+		},
+		enabled,
+	})
 }
diff --git a/src/services/hooks/user/userService.hook.ts b/src/services/hooks/user/userService.hook.ts
index a2db030e..fafa15d1 100644
--- a/src/services/hooks/user/userService.hook.ts
+++ b/src/services/hooks/user/userService.hook.ts
@@ -30,6 +30,9 @@ interface FetchedProfile {
 	font: FontFamily
 	timeZone: string
 	coins: number
+	city?: {
+		id: string
+	}
 }
 
 export interface UserProfile extends FetchedProfile {
@@ -115,3 +118,19 @@ export function useSendVerificationEmail() {
 		mutationKey: ['sendVerificationEmail'],
 	})
 }
+
+async function setCityToServer(cityId: string): Promise<void> {
+	const client = await getMainClient()
+	await client.put('/users/@me/city', { cityId })
+}
+
+export function useSetCity() {
+	const queryClient = useQueryClient()
+
+	return useMutation({
+		mutationFn: (cityId: string) => setCityToServer(cityId),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ['userProfile'] })
+		},
+	})
+}
diff --git a/src/services/hooks/weather/getForecastWeatherByLatLon.ts b/src/services/hooks/weather/getForecastWeatherByLatLon.ts
index f57c9218..374ba96e 100644
--- a/src/services/hooks/weather/getForecastWeatherByLatLon.ts
+++ b/src/services/hooks/weather/getForecastWeatherByLatLon.ts
@@ -6,8 +6,6 @@ import type {
 } from '../../../layouts/widgets/weather/weather.interface'
 
 async function fetchForecastWeatherByLatLon(
-	lat: number,
-	lon: number,
 	count?: number,
 	units?: TemperatureUnit
 ): Promise<FetchedForecast[]> {
@@ -15,8 +13,6 @@ async function fetchForecastWeatherByLatLon(
 
 	const response = await client.get<FetchedForecast[]>('/weather/forecast', {
 		params: {
-			lat,
-			lon,
 			...(count !== null && { count }),
 			...(units !== null && { units }),
 		},
@@ -24,20 +20,15 @@ async function fetchForecastWeatherByLatLon(
 	return response.data
 }
 
-export function useGetForecastWeatherByLatLon(
-	lat: number,
-	lon: number,
-	options: {
-		refetchInterval: number | null
-		count?: number
-		units?: TemperatureUnit
-		enabled: boolean
-	}
-) {
+export function useGetForecastWeatherByLatLon(options: {
+	refetchInterval: number | null
+	count?: number
+	units?: TemperatureUnit
+	enabled: boolean
+}) {
 	return useQuery({
-		queryKey: ['ForecastGetWeatherByLatLon', lat, lon],
-		queryFn: () =>
-			fetchForecastWeatherByLatLon(lat, lon, options.count, options.units),
+		queryKey: ['ForecastGetWeatherByLatLon'],
+		queryFn: () => fetchForecastWeatherByLatLon(options.count, options.units),
 		refetchInterval: options.refetchInterval || false,
 		enabled: options.enabled,
 	})
diff --git a/src/services/hooks/weather/getWeatherByLatLon.ts b/src/services/hooks/weather/getWeatherByLatLon.ts
index 0ff10135..482724f6 100644
--- a/src/services/hooks/weather/getWeatherByLatLon.ts
+++ b/src/services/hooks/weather/getWeatherByLatLon.ts
@@ -5,21 +5,13 @@ import type { FetchedWeather } from '../../../layouts/widgets/weather/weather.in
 
 type units = 'standard' | 'metric' | 'imperial'
 async function fetchWeatherByLatLon(
-	lat: number,
-	lon: number,
 	units?: units,
 	useAI?: boolean
 ): Promise<FetchedWeather> {
-	if (lat === 0 && lon === 0) {
-		throw new Error('Invalid coordinates')
-	}
-
 	const client = await getMainClient()
 
 	const response = await client.get<FetchedWeather>('/weather/current', {
 		params: {
-			lat,
-			lon,
 			units,
 			useAI,
 		},
@@ -33,14 +25,10 @@ type GetWeatherByLatLon = {
 	refetchInterval: number | null
 	enabled: boolean
 }
-export function useGetWeatherByLatLon(
-	lat: number,
-	lon: number,
-	options: GetWeatherByLatLon
-) {
+export function useGetWeatherByLatLon(options: GetWeatherByLatLon) {
 	return useQuery({
-		queryKey: ['getWeatherByLatLon', lat, lon],
-		queryFn: () => fetchWeatherByLatLon(lat, lon, options.units, options.useAI),
+		queryKey: ['getWeatherByLatLon'],
+		queryFn: () => fetchWeatherByLatLon(options.units, options.useAI),
 		refetchInterval: options?.refetchInterval || false,
 		enabled: options.enabled,
 		staleTime: ms('5m'),
diff --git a/wxt.config.ts b/wxt.config.ts
index f893e06f..09bfb39e 100644
--- a/wxt.config.ts
+++ b/wxt.config.ts
@@ -48,7 +48,7 @@ export default defineConfig({
 		'@wxt-dev/module-react',
 	],
 	manifest: {
-		version: '1.0.57',
+		version: '1.0.58',
 		name: 'Widgetify',
 		description:
 			'Transform your new tab into a smart dashboard with Widgetify! Get currency rates, crypto prices, weather & more.',