diff --git a/frontend/index.html b/frontend/index.html
index 7f559d1..7e6c0af 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <title>Weather Station App</title>
   </head>
   <body class="m-2">
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 4426188..175d746 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -75,87 +75,87 @@ var daily_query = ref({
           "0000000000": "0.0",
         },
       },
-      rainfall: {
-        rain_rate: {
-          unit: "mm\/hr",
-          list: {
-            "0000000000": "0.0",
-          },
-        },
-        daily: {
-          unit: "mm",
-          list: {
-            "0000000000": "0.0",
-          },
+    },
+    rainfall: {
+      rain_rate: {
+        unit: "mm\/hr",
+        list: {
+          "0000000000": "0.0",
         },
-        event: {
-          unit: "mm",
-          list: {
-            "0000000000": "0.0",
-          },
+      },
+      daily: {
+        unit: "mm",
+        list: {
+          "0000000000": "0.0",
         },
-        hourly: {
-          unit: "mm",
-          list: {
-            "0000000000": "0.0",
-          },
+      },
+      event: {
+        unit: "mm",
+        list: {
+          "0000000000": "0.0",
         },
-        weekly: {
-          unit: "mm",
-          list: {
-            "0000000000": "0.0",
-          },
+      },
+      hourly: {
+        unit: "mm",
+        list: {
+          "0000000000": "0.0",
         },
-        monthly: {
-          unit: "mm",
-          list: {
-            "0000000000": "0.0",
-          },
+      },
+      weekly: {
+        unit: "mm",
+        list: {
+          "0000000000": "0.0",
         },
-        yearly: {
-          unit: "mm",
-          list: {
-            list: {
-              "0000000000": "0.0",
-            },
-          },
+      },
+      monthly: {
+        unit: "mm",
+        list: {
+          "0000000000": "0.0",
         },
       },
-      wind: {
-        wind_speed: {
-          unit: "km\/h",
+      yearly: {
+        unit: "mm",
+        list: {
           list: {
-            list: {
-              "0000000000": "0.0",
-            },
+            "0000000000": "0.0",
           },
         },
-        wind_gust: {
-          unit: "km\/h",
+      },
+    },
+    wind: {
+      wind_speed: {
+        unit: "km\/h",
+        list: {
           list: {
             "0000000000": "0.0",
           },
         },
       },
-      wind_direction: {
-        unit: "º",
+      wind_gust: {
+        unit: "km\/h",
         list: {
           "0000000000": "0.0",
         },
       },
-    },
-    pressure: {
-      relative: {
-        unit: "mmHg",
+      wind_direction: {
+        unit: "º",
         list: {
           "0000000000": "0.0",
         },
       },
-      absolute: {
-        unit: "mmHg",
-        list: {
-          "0000000000": "0.0",
-        },
+    },
+  },
+  pressure: {
+    relative: {
+      unit: "mmHg",
+      list: {
+        "0000000000": "0.0",
+      },
+    },
+    absolute: {
+      unit: "mmHg",
+      list: {
+        "0000000000": "0.0",
       },
     },
   },
@@ -209,7 +209,6 @@ var showMoreData = ref(
   Cookies.get("showMoreData") != undefined ? Cookies.get("showMoreData") : false
 );
 
-
 async function updateData() {
   loading.value = { status: true, text: "Loading..." };
   const res = await fetch(api_url);
@@ -238,131 +237,130 @@ watchEffect(async () => {
 </script>
 
 <template>
-  <!-- MAIN DATA -->
-  <div class="flex justify-between m-2 sm:m-4 flex-col items-start gap-4 md:items-center md:flex-row">
-    <div>
-      <h1 class="text-2xl font-bold">Istant Weather Data</h1>
-      <h2 class="font-normal opacity-70">Mirandola, Modena, Italy</h2>
-    </div>
-
-    <button
-      class="btn btn-xs btn-ghost no-animation p-0"
-      :class="{ loading: loading.status }"
+  <div class="container mx-auto p-4">
+    <!-- MAIN DATA -->
+    <div
+      class="flex justify-between mb-12 flex-col items-start gap-3 md:items-center md:flex-row"
     >
-      {{ loading.text }}
-    </button>
-  </div>
-
-  <Stats>
-    
-    <!--RAIN-->
-    <Stat
-      title="Current rainfall rate"
-      icon="hygrometer"
-      :value="istant_query.data.rainfall.rain_rate.value"
-      :unit="istant_query.data.rainfall.rain_rate.unit"
-      :description="
-        'in the last 5 min. <br /> Hourly: ' +
-        istant_query.data.rainfall.hourly.value +
-        istant_query.data.rainfall.hourly.unit +
-        '<br /> Daily: ' +
-        istant_query.data.rainfall.daily.value +
-        istant_query.data.rainfall.daily.unit
-      "
-       :chart="daily_query.data.rainfall.rain_rate.list"
-    />
+      <div>
+        <h1 class="text-3xl font-bold">Instant Weather Data</h1>
+        <h2 class="text-lg opacity-70"><img class="inline w-6" src="https://img.icons8.com/fluency/48/place-marker.png"/>Mirandola, Modena, Italy</h2>
+      </div>
 
-    <Stat
-      title="Total rainfall event"
-      icon="rain"
-      :value="istant_query.data.rainfall.event.value"
-      :unit="istant_query.data.rainfall.event.unit"
-      :description="
-        'Weekly: ' +
-        istant_query.data.rainfall.weekly.value +
-        istant_query.data.rainfall.weekly.unit +
-        '<br />Monthly: ' +
-        istant_query.data.rainfall.monthly.value +
-        istant_query.data.rainfall.monthly.unit +
-        '<br />Yearly: ' +
-        istant_query.data.rainfall.yearly.value +
-        istant_query.data.rainfall.yearly.unit
-      "
-      :chart="daily_query.data.rainfall.event.list"
-    />
-
-    <!--OUTDOOR STATS-->
-    <Stat
-      title="Outdoor temperature"
-      icon="temperature-outside"
-      :value="istant_query.data.outdoor.temperature.value"
-      :unit="istant_query.data.outdoor.temperature.unit"
-      :description="
-        'Dew point: ' +
-        istant_query.data.outdoor.dew_point.value +
-        istant_query.data.outdoor.dew_point.unit
-      "
-      :chart="daily_query.data.outdoor.temperature.list"
-    />
+      <button
+        class="btn btn-xs btn-ghost no-animation p-0"
+        :class="{ loading: loading.status }"
+      >
+        {{ loading.text }}
+      </button>
+    </div>
 
-    <Stat
-      title="Outdoor humidity"
-      icon="barometer-gauge"
-      :value="istant_query.data.outdoor.humidity.value"
-      :unit="istant_query.data.outdoor.humidity.unit"
-      :description="
-        'Abs. Pressure: ' +
-        istant_query.data.pressure.absolute.value +
-        istant_query.data.pressure.absolute.unit
-      "
-      :chart="daily_query.data.outdoor.humidity.list"
-    />
+    <Stats>
+      <!--RAIN-->
+      <Stat
+        title="Current rainfall rate"
+        icon="hygrometer"
+        :value="istant_query.data.rainfall.rain_rate.value"
+        :unit="istant_query.data.rainfall.rain_rate.unit"
+        :description="
+          'in the last 5 min. <br /> Hourly: ' +
+          istant_query.data.rainfall.hourly.value +
+          istant_query.data.rainfall.hourly.unit +
+          '<br /> Daily: ' +
+          istant_query.data.rainfall.daily.value +
+          istant_query.data.rainfall.daily.unit
+        "
+        :chart="daily_query.data.rainfall.rain_rate.list"
+      />
 
-    <!--SOLAR AND UVI-->
-    <Stat
-      title="Solar Irradiance"
-      icon="brightness-settings"
-      :value="istant_query.data.solar_and_uvi.solar.value"
-      :unit="istant_query.data.solar_and_uvi.solar.unit"
-      :chart="daily_query.data.solar_and_uvi.solar.list"
+      <Stat
+        title="Total rainfall event"
+        icon="rain"
+        :value="istant_query.data.rainfall.event.value"
+        :unit="istant_query.data.rainfall.event.unit"
+        :description="
+          'Weekly: ' +
+          istant_query.data.rainfall.weekly.value +
+          istant_query.data.rainfall.weekly.unit +
+          '<br />Monthly: ' +
+          istant_query.data.rainfall.monthly.value +
+          istant_query.data.rainfall.monthly.unit +
+          '<br />Yearly: ' +
+          istant_query.data.rainfall.yearly.value +
+          istant_query.data.rainfall.yearly.unit
+        "
+        :chart="daily_query.data.rainfall.event.list"
+      />
 
-    />
-    <Stat
-      title="UV Index"
-      icon="solar-energy"
-      :value="istant_query.data.solar_and_uvi.uvi.value"
-      :unit="istant_query.data.solar_and_uvi.uvi.unit"
-      :chart="daily_query.data.solar_and_uvi.uvi.list"
+      <!--OUTDOOR STATS-->
+      <Stat
+        title="Outdoor temperature"
+        icon="temperature-outside"
+        :value="istant_query.data.outdoor.temperature.value"
+        :unit="istant_query.data.outdoor.temperature.unit"
+        :description="
+          'Dew point: ' +
+          istant_query.data.outdoor.dew_point.value +
+          istant_query.data.outdoor.dew_point.unit
+        "
+        :chart="daily_query.data.outdoor.temperature.list"
+      />
 
-    />
+      <Stat
+        title="Outdoor humidity"
+        icon="barometer-gauge"
+        :value="istant_query.data.outdoor.humidity.value"
+        :unit="istant_query.data.outdoor.humidity.unit"
+        :description="
+          'Abs. Pressure: ' +
+          istant_query.data.pressure.absolute.value +
+          istant_query.data.pressure.absolute.unit
+        "
+        :chart="daily_query.data.outdoor.humidity.list"
+      />
 
-    <!--WIND-->
-    <Stat
-      title="Wind speed"
-      icon="windsock"
-      :value="istant_query.data.wind.wind_speed.value"
-      :unit="istant_query.data.wind.wind_speed.unit"
-      :description="
-        'Wind Gust: ' +
-        istant_query.data.wind.wind_gust.value +
-        istant_query.data.wind.wind_gust.unit
-      "
-      :chart="daily_query.data.wind.wind_speed.list"
+      <!--SOLAR AND UVI-->
+      <Stat
+        title="Solar Irradiance"
+        icon="brightness-settings"
+        :value="istant_query.data.solar_and_uvi.solar.value"
+        :unit="istant_query.data.solar_and_uvi.solar.unit"
+        :chart="daily_query.data.solar_and_uvi.solar.list"
+      />
+      <Stat
+        title="UV Index"
+        icon="solar-energy"
+        :value="istant_query.data.solar_and_uvi.uvi.value"
+        :unit="istant_query.data.solar_and_uvi.uvi.unit"
+        :chart="daily_query.data.solar_and_uvi.uvi.list"
+      />
 
-    />
+      <!--WIND-->
+      <Stat
+        title="Wind speed"
+        icon="windsock"
+        :value="istant_query.data.wind.wind_speed.value"
+        :unit="istant_query.data.wind.wind_speed.unit"
+        :description="
+          'Wind Gust: ' +
+          istant_query.data.wind.wind_gust.value +
+          istant_query.data.wind.wind_gust.unit
+        "
+        :chart="daily_query.data.wind.wind_speed.list"
+      />
 
-    <Stat
-      title="Wind direction"
-      icon="wind-rose"
-      :value="istant_query.data.wind.wind_direction.value"
-      :unit="istant_query.data.wind.wind_direction.unit"
-      :chart="daily_query.data.wind.wind_direction.list"
-    />
-  </Stats>
+      <Stat
+        title="Wind direction"
+        icon="wind-rose"
+        :value="istant_query.data.wind.wind_direction.value"
+        :unit="istant_query.data.wind.wind_direction.unit"
+        :chart="daily_query.data.wind.wind_direction.list"
+      />
+    </Stats>
 
-  <!-- OTHER DATA -->
+    <!-- OTHER DATA -->
 
-  <!--
+    <!--
     <h1
     class="text-2xl font-bold m-2 mb-4 mt-6 bg-base-100 shadow-xl p-5 rounded-xl"
     v-if="showMoreData"
@@ -403,19 +401,20 @@ watchEffect(async () => {
   </div>
 
   -->
-  <!-- FOOTER AND OTHER DATA -->
-  <footer class="footer footer-center mt-10">
-    <div class="text-base-content opacity-40 text-xs">
-      <p>
-        Developed and designed by
-        <a class="font-bold" href="https://jacksalici.com">jacksalici</a
-        >.<br />© {{ moment().format("YYYY") }} MIT Licence - Icons by
-        <a class="link" href="https://icons8.com/">Icons8</a><br />
-        Check the project on
-        <a class="link" href="https://github.com/jacksalici/weather_station"
-          >GitHub</a
-        >.
-      </p>
-    </div>
-  </footer>
+    <!-- FOOTER AND OTHER DATA -->
+    <footer class="footer footer-center mt-10">
+      <div class="text-base-content opacity-40 text-xs">
+        <p>
+          Developed and designed by
+          <a class="font-bold" href="https://jacksalici.com">jacksalici</a
+          >.<br />© {{ moment().format("YYYY") }} MIT Licence - Icons by
+          <a class="link" href="https://icons8.com/">Icons8</a><br />
+          Check the project on
+          <a class="link" href="https://github.com/jacksalici/weather_station"
+            >GitHub</a
+          >.
+        </p>
+      </div>
+    </footer>
+  </div>
 </template>
diff --git a/frontend/src/components/Stat.vue b/frontend/src/components/Stat.vue
index 5f87bc3..138a196 100644
--- a/frontend/src/components/Stat.vue
+++ b/frontend/src/components/Stat.vue
@@ -35,16 +35,25 @@ const props = defineProps({
     type: Object,
     default: {},
   },
+  chartDot: {
+    type: Boolean,
+    default: false
+  }
 });
 
 const chartOptions = {
   responsive: true,
+  mantainAspectRatio: false,
   scales: {
     x: {
-      display: false,
+      display: true,
       title: {
         display: false,
+       
       },
+      ticks: {
+            mirror: false
+         }
     },
     y: {
       display: true,
@@ -52,7 +61,8 @@ const chartOptions = {
         display: false,
       },
       ticks: {
-            mirror: true
+        display: true,
+            mirror: false
          }
     },
   },
@@ -77,10 +87,10 @@ watchEffect(()=>{
   }),
   datasets: [
     {
-      lavel: props.title,
+      label: props.title,
       data: Object.values(props.chart),
-      tension:0.2,
-      pointStyle: false,
+      tension:0.4,
+      pointStyle: props.chartDot ? true: false,
       cubicInterpolationMode: 'monotone',
     },
   ],
@@ -90,26 +100,31 @@ watchEffect(()=>{
 </script>
 
 <template>
-  <div class="card w-full shadow-lg rounded-lg border-2 border-opacity-10 border-base-content">
-    <div class="card-body p-0">
-      <div class="p-4 sm:p-8 pb-2">
-        <div class="card-title">
-          {{ title }}
-          <img
+  <div class="card xl:card-side shadow-none rounded-lg border-2 border-opacity-20 border-base-content">
+    
+    <div class="card-body w-full p-2 m-4 sm:p-4 pb-2">
+      
+      <div class="card-title flex-col items-start mb-4">
+        <img
             :src="'https://img.icons8.com/fluency/' + icon + '.png'"
             :alt="icon"
-            class="inline pr-1 h-10"
+            class="block pr-1 h-12"
           />
+          {{ title }}
+          
+          
         </div>
         <div class="text-4xl font-bold">
-          {{ value }}
-          <span class="text-sm">{{ unit }}</span>
+          {{ value }} {{ unit }}
         </div>
-        <div class="stat-desc" v-html="description"></div>
-      </div>
-      <div class="" v-if="Object.keys(chart).length">
-        <Line :data="chartData" :options="chartOptions" id="Line" />
-      </div>
+        <div class="text-xs" v-html="description"></div>
     </div>
+      
+      <figure class="w-full p-2 h-full" v-if="Object.keys(chart).length">
+      <Line :data="chartData" :options="chartOptions" id="Line" />
+
+    </figure>
+      
+    
   </div>
 </template>
diff --git a/frontend/src/components/Stats.vue b/frontend/src/components/Stats.vue
index 0fe78bb..adc2a0a 100644
--- a/frontend/src/components/Stats.vue
+++ b/frontend/src/components/Stats.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="grid p-1 sm:p-4 gap-4 md:grid-cols-2 xl:grid-cols-4">
+  <div class="grid gap-4 lg:grid-cols-2">
         <slot></slot>
     </div>
 </template>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index b3e8795..07bbec4 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -3,6 +3,8 @@ module.exports = {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {},
+    fontFamily: {
+    }
   },
   plugins: [
     require('@tailwindcss/typography'),
@@ -10,7 +12,7 @@ module.exports = {
   ],
 
   daisyui:{
-    themes: ["garden", "dracula"],
+    themes: ["light", "dracula"],
     darkTheme:'dracula',
   }
 }
