diff --git a/app/src/main/java/com/henryhiles/qweather/presentation/components/weather/WeatherToday.kt b/app/src/main/java/com/henryhiles/qweather/presentation/components/weather/WeatherToday.kt
index f2d8853..7caa0c7 100644
--- a/app/src/main/java/com/henryhiles/qweather/presentation/components/weather/WeatherToday.kt
+++ b/app/src/main/java/com/henryhiles/qweather/presentation/components/weather/WeatherToday.kt
@@ -2,6 +2,10 @@ package com.henryhiles.qweather.presentation.components.weather
 
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowDownward
+import androidx.compose.material.icons.filled.ArrowUpward
+import androidx.compose.material.icons.outlined.WaterDrop
 import androidx.compose.material3.Card
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -11,7 +15,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.henryhiles.qweather.R
-import com.henryhiles.qweather.presentation.components.VerticalDivider
 import com.henryhiles.qweather.presentation.screenmodel.HourlyWeatherState
 import com.henryhiles.qweather.presentation.screenmodel.LocationPreferenceManager
 import org.koin.compose.koinInject
@@ -24,7 +27,10 @@ fun WeatherToday(state: HourlyWeatherState) {
         Card(
             shape = RoundedCornerShape(8.dp),
         ) {
-            Column(modifier = Modifier.padding(8.dp), horizontalAlignment = Alignment.CenterHorizontally) {
+            Column(
+                modifier = Modifier.padding(8.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
                 Text(
                     text = stringResource(id = R.string.today_in, with(locationPreferenceManager) {
                         locations.getOrNull(selectedIndex)?.location?.split(",")?.first()
@@ -37,18 +43,25 @@ fun WeatherToday(state: HourlyWeatherState) {
                     modifier = Modifier
                         .height(24.dp)
                         .fillMaxWidth(),
-                    horizontalArrangement = Arrangement.Center
+                    horizontalArrangement = Arrangement.SpaceEvenly,
                 ) {
-                    Text(
-                        text = stringResource(R.string.weather_high, it.highTemperature),
+                    WeatherDataDisplay(
+                        value = it.highTemperature,
+                        unit = "°C",
+                        icon = Icons.Default.ArrowUpward,
+                        description = stringResource(R.string.weather_high, it.highTemperature)
                     )
-                    VerticalDivider(modifier = Modifier.padding(horizontal = 8.dp))
-                    Text(
-                        text = stringResource(id = R.string.weather_low, it.lowTemperature)
+                    WeatherDataDisplay(
+                        value = it.lowTemperature,
+                        unit = "°C",
+                        icon = Icons.Default.ArrowDownward,
+                        description = stringResource(id = R.string.weather_low, it.lowTemperature)
                     )
-                    VerticalDivider(modifier = Modifier.padding(horizontal = 8.dp))
-                    Text(
-                        text = it.precipitationProbability?.let {
+                    WeatherDataDisplay(
+                        value = it.precipitationProbability,
+                        unit = "%",
+                        icon = Icons.Outlined.WaterDrop,
+                        description = it.precipitationProbability?.let {
                             stringResource(
                                 id = R.string.weather_precipitation,
                                 it