diff --git a/src/components/WeatherModal/HourlyCard.tsx b/src/components/WeatherModal/HourlyCard.tsx
index e7e834d..b361458 100644
--- a/src/components/WeatherModal/HourlyCard.tsx
+++ b/src/components/WeatherModal/HourlyCard.tsx
@@ -101,7 +101,7 @@ export default function HourlyCard({ weather, isMobile }: any) {
 			>
 				{weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity.value}%
 			</Text>
-			<Text
+			<Box
 				mt={4}
 				w={'100%'}
 				fz={14}
@@ -121,7 +121,7 @@ export default function HourlyCard({ weather, isMobile }: any) {
 					/>
 					{`${weather.probabilityOfPrecipitation.value}`}%
 				</Group>
-			</Text>
+			</Box>
 		</Stack>
 	);
 }
diff --git a/src/components/WeatherModal/SmallOutlookCard.tsx b/src/components/WeatherModal/SmallOutlookCard.tsx
index fdfc497..d698224 100644
--- a/src/components/WeatherModal/SmallOutlookCard.tsx
+++ b/src/components/WeatherModal/SmallOutlookCard.tsx
@@ -16,7 +16,7 @@ export default function SmallOutlookCard({ weather }: any) {
 	return (
 		<Center display={'flex'}>
 			<Box pos={'relative'} style={{ zIndex: -1 }}>
-				<Image radius={'lg'} src={weather.icon} />
+				<Image radius={'lg'} src={weather.icon === '' ? undefined : weather.icon} />
 				<Overlay
 					color='black'
 					gradient='linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0.35))'
diff --git a/src/components/WeatherModal/SmallWeatherCard.tsx b/src/components/WeatherModal/SmallWeatherCard.tsx
index 94aef0a..c611cd8 100644
--- a/src/components/WeatherModal/SmallWeatherCard.tsx
+++ b/src/components/WeatherModal/SmallWeatherCard.tsx
@@ -5,7 +5,12 @@ export default function SmallWeatherCard({ weather }: any) {
 	return (
 		<Center display={'flex'}>
 			<Box pos={'relative'} style={{ zIndex: -1 }}>
-				<Image w={'134px'} h={'134px'} radius={'lg'} src={weather.icon} />
+				<Image
+					w={'134px'}
+					h={'134px'}
+					radius={'lg'}
+					src={weather.icon === '' ? undefined : weather.icon}
+				/>
 				<Overlay
 					color='black'
 					gradient='linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0.35))'
diff --git a/src/components/WeatherModal/WeatherModal.tsx b/src/components/WeatherModal/WeatherModal.tsx
index 65cf2ce..2c5fdef 100644
--- a/src/components/WeatherModal/WeatherModal.tsx
+++ b/src/components/WeatherModal/WeatherModal.tsx
@@ -16,6 +16,7 @@ export function WeatherModal({
 	weatherModalOpened,
 	setProviderLabel,
 	setProviderURL,
+	setValue,
 	isMobile,
 }: any) {
 	const [theme, _] = useAtom(appTheme);
@@ -50,6 +51,7 @@ export function WeatherModal({
 			onClose={() => {
 				closeWeatherModal();
 				setProviderLabel('Google Search');
+				setValue('');
 				setProviderURL('https://www.google.com/search?q=');
 			}}
 			style={{
diff --git a/src/pages/homepage/Homepage.tsx b/src/pages/homepage/Homepage.tsx
index e1c2da4..b98d83e 100644
--- a/src/pages/homepage/Homepage.tsx
+++ b/src/pages/homepage/Homepage.tsx
@@ -50,7 +50,9 @@ export function Homepage({ theme }: any) {
 	const isMobile = window.matchMedia('(max-width: 600px)').matches;
 	const [weatherModalOpened, { open: openWeatherModal, close: closeWeatherModal }] =
 		useDisclosure(false);
-
+	const [providerLabel, setProviderLabel] = useState('Google Search');
+	const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
+	const [value, setValue] = useState('');
 	useEffect(() => {
 		if (data) {
 			setDisplayedGreeting(greet(data));
@@ -124,6 +126,12 @@ export function Homepage({ theme }: any) {
 				basicWeather={basicWeather}
 				forecast={forecast}
 				hourly={hourly}
+				providerLabel={providerLabel}
+				setProviderLabel={setProviderLabel}
+				providerURL={providerURL}
+				setProviderURL={setProviderURL}
+				value={value}
+				setValue={setValue}
 				weatherModalOpened={weatherModalOpened}
 				closeWeatherModal={closeWeatherModal}
 				openWeatherModal={openWeatherModal}
@@ -139,6 +147,9 @@ export function Homepage({ theme }: any) {
 				basicWeather={basicWeather}
 				forecast={forecast}
 				hourly={hourly}
+				setProviderLabel={setProviderLabel}
+				setProviderURL={setProviderURL}
+				setValue={setValue}
 				weatherModalOpened={weatherModalOpened}
 				closeWeatherModal={closeWeatherModal}
 				openWeatherModal={openWeatherModal}
diff --git a/src/pages/homepage/components/Header/Header.tsx b/src/pages/homepage/components/Header/Header.tsx
index b41cb3a..ebeb8a4 100644
--- a/src/pages/homepage/components/Header/Header.tsx
+++ b/src/pages/homepage/components/Header/Header.tsx
@@ -18,6 +18,7 @@ function Header({
 	openWeatherModal,
 	setProviderLabel,
 	setProviderURL,
+	setValue,
 }: any) {
 	const [time, setTime] = useState(new Date());
 	function fixDigits(k: any) {
@@ -156,6 +157,7 @@ function Header({
 				weatherModalOpened={weatherModalOpened}
 				setProviderLabel={setProviderLabel}
 				setProviderURL={setProviderURL}
+				setValue={setValue}
 				isMobile={isMobile}
 			/>
 		</Stack>
diff --git a/src/pages/homepage/components/Search/Search.tsx b/src/pages/homepage/components/Search/Search.tsx
index 2da0a4e..c71031e 100644
--- a/src/pages/homepage/components/Search/Search.tsx
+++ b/src/pages/homepage/components/Search/Search.tsx
@@ -1,6 +1,5 @@
 import { Stack, TextInput } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { useState } from 'react';
 import { HelpModal } from '../../../../components/HelpModal/HelpModal';
 import { WeatherModal } from '../../../../components/WeatherModal/WeatherModal';
 import { containsProtocol, useQueryAPI, validURL } from '../../../../hooks';
@@ -13,14 +12,17 @@ export default function Search({
 	weatherModalOpened,
 	closeWeatherModal,
 	openWeatherModal,
+	providerLabel,
+	setProviderLabel,
+	providerURL,
+	setProviderURL,
+	value,
+	setValue,
 }: any) {
 	const { data: providers } = useQueryAPI({ endpoint: 'api/providers' });
 	const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
 		useDisclosure(false);
 
-	const [providerLabel, setProviderLabel] = useState('Google Search');
-	const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
-	const [value, setValue] = useState('');
 	const handleKeyPress = (item: any) => {
 		let option = '';
 		let subtext = '';