diff --git a/src/components/modules/date/DateModule.tsx b/src/components/modules/date/DateModule.tsx
index ba653f862..d53c160ee 100644
--- a/src/components/modules/date/DateModule.tsx
+++ b/src/components/modules/date/DateModule.tsx
@@ -25,7 +25,7 @@ export default function DateComponent(props: any) {
   }, []);
 
   return (
-    <Group p="sm" direction="column">
+    <Group direction="column">
       <Title>
         {hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes}
       </Title>
diff --git a/src/components/modules/weather/WeatherModule.tsx b/src/components/modules/weather/WeatherModule.tsx
index 536f33387..8a3dcba2c 100644
--- a/src/components/modules/weather/WeatherModule.tsx
+++ b/src/components/modules/weather/WeatherModule.tsx
@@ -1,6 +1,5 @@
-import { Group, Text, Title, Tooltip } from '@mantine/core';
+import { Center, Group, Text, Title, Tooltip } from '@mantine/core';
 import axios from 'axios';
-import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import {
   Cloud,
@@ -13,105 +12,109 @@ import {
   Sun,
 } from 'tabler-icons-react';
 import { IModule } from '../modules';
-import { WeatherResponse, Convert } from './WeatherInterface';
+import { WeatherResponse } from './WeatherInterface';
 
 export const WeatherModule: IModule = {
   title: 'Weather',
   description: 'Look up the current weather in your location',
-  icon: Cloud,
+  icon: Sun,
   component: WeatherComponent,
 };
 
 // 0 Clear sky
 // 1, 2, 3 Mainly clear, partly cloudy, and overcast
 // 45, 48 Fog and depositing rime fog
-// 51, 53, 55	Drizzle: Light, moderate, and dense intensity
-// 56, 57	Freezing Drizzle: Light and dense intensity
-// 61, 63, 65	Rain: Slight, moderate and heavy intensity
-// 66, 67	Freezing Rain: Light and heavy intensity
-// 71, 73, 75	Snow fall: Slight, moderate, and heavy intensity
+// 51, 53, 55 Drizzle: Light, moderate, and dense intensity
+// 56, 57 Freezing Drizzle: Light and dense intensity
+// 61, 63, 65 Rain: Slight, moderate and heavy intensity
+// 66, 67 Freezing Rain: Light and heavy intensity
+// 71, 73, 75 Snow fall: Slight, moderate, and heavy intensity
 // 77 Snow grains
-// 80, 81, 82	Rain showers: Slight, moderate, and violent
-// 85, 86	Snow showers slight and heavy
-// 95 *	Thunderstorm: Slight or moderate
-// 96, 99 *	Thunderstorm with slight and heavy hail
+// 80, 81, 82 Rain showers: Slight, moderate, and violent
+// 85, 86Snow showers slight and heavy
+// 95 *Thunderstorm: Slight or moderate
+// 96, 99 *Thunderstorm with slight and heavy hail
 export function WeatherIcon(props: any) {
   const { code } = props;
   let data: { icon: any; name: string };
   switch (code) {
     case 0: {
-      data = { icon: <Sun />, name: 'Clear' };
+      data = { icon: Sun, name: 'Clear' };
       break;
     }
     case 1:
     case 2:
     case 3: {
-      data = { icon: <Cloud />, name: 'Mainly clear' };
+      data = { icon: Cloud, name: 'Mainly clear' };
       break;
     }
     case 45:
     case 48: {
-      data = { icon: <CloudFog />, name: 'Fog' };
+      data = { icon: CloudFog, name: 'Fog' };
       break;
     }
     case 51:
     case 53:
     case 55: {
-      data = { icon: <Cloud />, name: 'Drizzle' };
+      data = { icon: Cloud, name: 'Drizzle' };
       break;
     }
     case 56:
     case 57: {
-      data = { icon: <Snowflake />, name: 'Freezing drizzle' };
+      data = { icon: Snowflake, name: 'Freezing drizzle' };
       break;
     }
     case 61:
     case 63:
     case 65: {
-      data = { icon: <CloudRain />, name: 'Rain' };
+      data = { icon: CloudRain, name: 'Rain' };
       break;
     }
     case 66:
     case 67: {
-      data = { icon: <CloudRain />, name: 'Freezing rain' };
+      data = { icon: CloudRain, name: 'Freezing rain' };
       break;
     }
     case 71:
     case 73:
     case 75: {
-      data = { icon: <CloudSnow />, name: 'Snow fall' };
+      data = { icon: CloudSnow, name: 'Snow fall' };
       break;
     }
     case 77: {
-      data = { icon: <CloudSnow />, name: 'Snow grains' };
+      data = { icon: CloudSnow, name: 'Snow grains' };
       break;
     }
     case 80:
     case 81:
     case 82: {
-      data = { icon: <CloudRain />, name: 'Rain showers' };
+      data = { icon: CloudRain, name: 'Rain showers' };
 
       break;
     }
     case 85:
     case 86: {
-      data = { icon: <CloudSnow />, name: 'Snow showers' };
+      data = { icon: CloudSnow, name: 'Snow showers' };
       break;
     }
     case 95: {
-      data = { icon: <CloudStorm />, name: 'Thunderstorm' };
+      data = { icon: CloudStorm, name: 'Thunderstorm' };
       break;
     }
     case 96:
     case 99: {
-      data = { icon: <CloudStorm />, name: 'Thunderstorm with hail' };
+      data = { icon: CloudStorm, name: 'Thunderstorm with hail' };
       break;
     }
     default: {
-      data = { icon: <QuestionMark />, name: 'Unknown' };
+      data = { icon: QuestionMark, name: 'Unknown' };
     }
   }
-  return <Tooltip label={data.name}>{data.icon}</Tooltip>;
+  return (
+    <Tooltip label={data.name}>
+      <data.icon size={50} />
+    </Tooltip>
+  );
 }
 
 export default function WeatherComponent(props: any) {
@@ -136,17 +139,14 @@ export default function WeatherComponent(props: any) {
   if (!weather.current_weather) {
     return null;
   }
-  console.log(weather.current_weather);
+
   return (
-    <Group p="sm" direction="column">
+    <Group position="left" direction="column">
       <Title>{weather.current_weather.temperature}°C</Title>
-      <WeatherIcon code={weather.current_weather.weathercode} />
-      <Text size="xl">
-        {
-          // Use dayjs to format the date
-          // https://day.js.org/en/getting-started/installation/
-        }
-      </Text>
+      <Group>
+        <WeatherIcon code={weather.current_weather.weathercode} />
+        {weather.daily.temperature_2m_max[0]}°C / {weather.daily.temperature_2m_min[0]}°C
+      </Group>
     </Group>
   );
 }