diff --git a/src/App.svelte b/src/App.svelte
index 2a5e218..f34de81 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -20,7 +20,7 @@
   import type { ProviderFactory, Provider, Weather } from './providers/Provider';
   import { Location } from './providers/Location';
   import { ExampleProvider } from './providers/ExampleProvider';
-  import { AutoExpand, configuration } from './Configuration';
+  import { AutoExpand, configuration, Layout } from './Configuration';
 
   import Timestamp from './components/scalars/Timestamp.svelte';
   import CurrentDetails from './components/CurrentDetails.svelte';
@@ -128,11 +128,12 @@
 
   <div class="container mx-auto">
     {#if weather}
+      {@const { sunset_timestamp, sunrise_timestamp, precipitation_amount, precipitation_probability } = weather.daily[0]}
       <div class="mb-6">
-        <CurrentDetails current={weather.current} />
+        <CurrentDetails current={weather.current} suntimes={{ sunset_timestamp, sunrise_timestamp }} />
       </div>
       <div class="mx-6 mb-6">
-        <HourlyDetails hourly={weather.current.hourly} />
+        <HourlyDetails hourly={weather.current.hourly} today />
       </div>
       <Accordion
         multiple
@@ -142,7 +143,7 @@
       >
         {#each weather.daily as daily, i}
           <AccordionItem
-            class="!px-2 !py-3 md:!p-4"
+            class="!px-2 md:!px-4 py-4 md:px-8"
             paddingDefault="py-4 px-4 md:px-14"
             open={$configuration.autoexpand === AutoExpand.All || (i === 0 && $configuration.autoexpand === AutoExpand.Today)}
           >
@@ -153,16 +154,15 @@
               global_low={Math.min(...weather.daily.map((d) => d.temperature_low))}
               global_high={Math.max(...weather.daily.map((d) => d.temperature_high))}
             />
-            <div class="grid gap-y-4 mb-2">
-              <DailyDetails {daily} />
-              <HourlyDetails hourly={daily.hourly} />
-              {#if daily.hourly[0].precipitation_probability !== undefined && $configuration.showHourlyPrecipitation}
-                <HourlyPrecipitationChart index={i} hourly={[...daily.hourly, ...(weather.daily[i + 1] ? [weather.daily[i + 1].hourly[0]] : [])]} />
-              {/if}
-              {#if daily.hourly[0].wind_speed !== undefined && $configuration.showHourlyWind}
-                <HourlyWindChart index={i} hourly={[...daily.hourly, ...(weather.daily[i + 1] ? [weather.daily[i + 1].hourly[0]] : [])]} />
-              {/if}
-            </div>
+            <DailyDetails {daily} />
+            <br />
+            <HourlyDetails hourly={daily.hourly} />
+            {#if daily.hourly[0].precipitation_probability !== undefined && $configuration.showHourlyPrecipitation}
+              <HourlyPrecipitationChart index={i} hourly={[...daily.hourly, ...(weather.daily[i + 1] ? [weather.daily[i + 1].hourly[0]] : [])]} />
+            {/if}
+            {#if daily.hourly[0].wind_speed !== undefined && $configuration.showHourlyWind}
+              <HourlyWindChart index={i} hourly={[...daily.hourly, ...(weather.daily[i + 1] ? [weather.daily[i + 1].hourly[0]] : [])]} />
+            {/if}
           </AccordionItem>
         {/each}
       </Accordion>
diff --git a/src/Configuration.ts b/src/Configuration.ts
index 8f3d16f..35c655c 100644
--- a/src/Configuration.ts
+++ b/src/Configuration.ts
@@ -21,6 +21,11 @@ export enum AutoExpand {
   None,
 }
 
+export enum Layout {
+  Horizontal,
+  Vertical,
+}
+
 export interface Configuration {
   providerFactory: ProviderFactory;
   providerParams: { [key: string]: string };
@@ -31,6 +36,7 @@ export interface Configuration {
   refreshInterval: number;
   showHourlyPrecipitation: boolean;
   showHourlyWind: boolean;
+  layout: Layout;
 }
 
 const DEFAULT_CONFIGURATION: Configuration = {
@@ -43,6 +49,7 @@ const DEFAULT_CONFIGURATION: Configuration = {
   refreshInterval: 2 * 3600,
   showHourlyPrecipitation: true,
   showHourlyWind: true,
+  layout: Layout.Horizontal,
 };
 
 function decodeConfiguration(params: { [key: string]: string }): Configuration {
@@ -63,6 +70,7 @@ function decodeConfiguration(params: { [key: string]: string }): Configuration {
   const showHourlyPrecipitation =
     params['hourly_precipitation'] === undefined ? DEFAULT_CONFIGURATION.showHourlyPrecipitation : params['hourly_precipitation'] === 'true' ? true : false;
   const showHourlyWind = params['hourly_wind'] === undefined ? DEFAULT_CONFIGURATION.showHourlyWind : params['hourly_wind'] === 'true' ? true : false;
+  const layout = params['layout'] === 'vertical' ? Layout.Vertical : Layout.Horizontal;
 
   return {
     providerFactory,
@@ -74,6 +82,7 @@ function decodeConfiguration(params: { [key: string]: string }): Configuration {
     refreshInterval,
     showHourlyPrecipitation,
     showHourlyWind,
+    layout,
   };
 }
 
@@ -107,7 +116,9 @@ function encodeConfiguration(configuration: Configuration): object {
   if (configuration.showHourlyWind !== DEFAULT_CONFIGURATION.showHourlyWind) {
     params['hourly_wind'] = configuration.showHourlyWind.toString();
   }
-
+  if (configuration.layout !== DEFAULT_CONFIGURATION.layout) {
+    params['layout'] = configuration.layout === Layout.Vertical ? 'vertical' : 'horizontal';
+  }
   return params;
 }
 
diff --git a/src/SettingsModal.svelte b/src/SettingsModal.svelte
index c3bf738..493704c 100644
--- a/src/SettingsModal.svelte
+++ b/src/SettingsModal.svelte
@@ -4,7 +4,7 @@
 
   import { ProviderFactories } from './providers';
   import { Location } from './providers/Location';
-  import { Units, AutoExpand, loadConfiguration, storeConfiguration } from './Configuration';
+  import { Units, AutoExpand, loadConfiguration, Layout, storeConfiguration } from './Configuration';
 
   import { Modal, Tabs, TabItem, Label, Select, Input, Hr, Button, ButtonGroup, Spinner, Radio, Checkbox } from 'flowbite-svelte';
   import Icon from '@iconify/svelte';
@@ -29,6 +29,7 @@
   let showHourlyPrecipitation: boolean;
   let showHourlyWind: boolean;
   let valid: boolean;
+  let layout: Layout;
 
   /* Loading State for location */
   let locationLoading: boolean = false;
@@ -51,6 +52,7 @@
     title = currentConfiguration.title;
     showHourlyPrecipitation = currentConfiguration.showHourlyPrecipitation;
     showHourlyWind = currentConfiguration.showHourlyWind;
+    layout = currentConfiguration.layout;
 
     updateProviderParams();
 
@@ -88,6 +90,7 @@
       refreshInterval: currentConfiguration.refreshInterval,
       showHourlyPrecipitation,
       showHourlyWind,
+      layout,
     };
 
     storeConfiguration(configuration);
@@ -203,6 +206,17 @@
               bind:value={autoexpand}
             />
           </div>
+          <div>
+            <Label for="select-layout" class="mb-2">Layout</Label>
+            <Select
+              id="select-layout"
+              items={[
+                { name: 'Horizontal', value: Layout.Horizontal },
+                { name: 'Vertical', value: Layout.Vertical },
+              ]}
+              bind:value={layout}
+            />
+          </div>
           <div>
             <Checkbox bind:checked={showHourlyPrecipitation}>Show Hourly Precipitation Chart</Checkbox>
           </div>
diff --git a/src/components/CurrentDetails.svelte b/src/components/CurrentDetails.svelte
index 3b77724..cd5d41b 100644
--- a/src/components/CurrentDetails.svelte
+++ b/src/components/CurrentDetails.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { CurrentWeather } from '../providers/Provider';
+  import type { CurrentWeather, SunTimes } from '../providers/Provider';
 
   import Conditions from './scalars/Conditions.svelte';
   import ConditionsIcon from './scalars/ConditionsIcon.svelte';
@@ -9,8 +9,10 @@
   import UVIndex from './scalars/UVIndex.svelte';
   import Distance from './scalars/Distance.svelte';
   import Pressure from './scalars/Pressure.svelte';
+  import DailySunDetails from './DailySunDetails.svelte';
 
   export let current: CurrentWeather;
+  export let suntimes: SunTimes;
 </script>
 
 <div>
@@ -36,5 +38,7 @@
       <div><span class="font-semibold">Visibility: </span><Distance value={current.visibility} /></div>
     {/if}
     <div><span class="font-semibold">Pressure: </span><Pressure value={current.pressure} /></div>
+    <DailySunDetails {suntimes} />
+    <!-- <DailyPrecipitationDetails {precipitation} /> -->
   </div>
 </div>
diff --git a/src/components/DailyPrecipitationDetails.svelte b/src/components/DailyPrecipitationDetails.svelte
new file mode 100644
index 0000000..e7172a9
--- /dev/null
+++ b/src/components/DailyPrecipitationDetails.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { DailyPrecipitation } from '../providers/Provider';
+
+  import Amount from './scalars/Amount.svelte';
+
+  export let precipitation: DailyPrecipitation;
+</script>
+
+{#if precipitation.precipitation_probability !== undefined && precipitation.precipitation_amount !== undefined}
+  <div>
+    <span class="text-sm md:text-base font-semibold">Precipitation:</span> <span class="text-sm md:text-base">{precipitation.precipitation_probability}%</span>
+  </div>
+  <div>
+    <span class="text-sm md:text-base font-semibold">Amount:</span>
+    <Amount value={precipitation.precipitation_amount} />
+  </div>
+{:else if precipitation.precipitation_probability !== undefined}
+  <div>
+    <span class="text-sm md:text-base font-semibold">Precipitation:</span> <span class="text-sm md:text-base">{precipitation.precipitation_probability}%</span>
+  </div>
+{:else if precipitation.precipitation_amount !== undefined}
+  <div>
+    <span class="text-sm md:text-base font-semibold">Precipitation:</span>
+    <span class="text-sm md:text-base"><Amount value={precipitation.precipitation_amount} /></span>
+  </div>
+{/if}
diff --git a/src/components/DailySunDetails.svelte b/src/components/DailySunDetails.svelte
new file mode 100644
index 0000000..523d16e
--- /dev/null
+++ b/src/components/DailySunDetails.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { SunTimes } from '../providers/Provider';
+
+  import Icon from '@iconify/svelte';
+
+  import Timestamp from './scalars/Timestamp.svelte';
+
+  export let suntimes: SunTimes;
+</script>
+
+<div>
+  <span style="transform:translate(-2px,-2px)"><Icon icon="mingcute:sunrise-line" class="inline text-2xl sm:text-3xl align-bottom" /></span>
+  <span class="font-semibold">Sunrise: </span><Timestamp format="short" value={suntimes.sunrise_timestamp} />
+</div>
+<div>
+  <span style="transform:translate(-2px,-2px)"><Icon icon="mingcute:sunset-fill" class="inline text-2xl sm:text-3xl align-bottom" /></span>
+  <span class="font-semibold">Sunset: </span><Timestamp format="short" value={suntimes.sunset_timestamp} />
+</div>
diff --git a/src/components/HourlyDetails.svelte b/src/components/HourlyDetails.svelte
index 314c89b..bb0513c 100644
--- a/src/components/HourlyDetails.svelte
+++ b/src/components/HourlyDetails.svelte
@@ -1,13 +1,17 @@
 <script lang="ts">
   import { ConditionsIcon } from '../providers/Provider';
   import type { HourlyWeather } from '../providers/Provider';
+  import { configuration, Layout } from '../Configuration';
 
+  import HourlyVerticalLayout from './HourlyVerticalLayout.svelte';
+  import HourlyHorizontalLayout from './HourlyHorizontalLayout.svelte';
   import Temperature from './scalars/Temperature.svelte';
   import Timestamp from './scalars/Timestamp.svelte';
 
   /* Properties */
 
   export let hourly: HourlyWeather[] = [];
+  export let today: boolean = false;
 
   /* Constants */
 
@@ -62,8 +66,6 @@
     [ConditionsIcon.Thunderstorm]: HourlyConditions.Rain,
   };
 
-  const MIN_TEMPERATURE_OPACITY = 0.25;
-
   /* State */
 
   let aggregation: {
@@ -72,12 +74,7 @@
   }[] = [];
   let temperatureLow: number;
   let temperatureHigh: number;
-
-  function temperatureOpacity(value: number): string {
-    let percent = (value - temperatureLow) / (temperatureHigh - temperatureLow);
-    const opacity = percent * (1 - MIN_TEMPERATURE_OPACITY) + MIN_TEMPERATURE_OPACITY;
-    return opacity.toFixed(2);
-  }
+  let selectedPill = 'Temp';
 
   $: {
     /* Aggregate conditions into contiguous regions */
@@ -97,53 +94,8 @@
   }
 </script>
 
-<div class="-mb-2">
-  <div class="flex mb-1.5 overflow-hidden rounded-md text-sm sm:text-base">
-    {#each aggregation as entry}
-      <div class="h-10 leading-9 {CLASS_TEXT_MAP[entry.conditions][0]} text-center" style="width: {(100 * entry.duration) / 24}%;">
-        {#if entry.duration > 4}
-          <div class="truncate">{CLASS_TEXT_MAP[entry.conditions][1]}</div>
-        {:else if entry.duration > 2}
-          <div class="hidden md:block truncate">{CLASS_TEXT_MAP[entry.conditions][1]}</div>
-        {/if}
-      </div>
-    {/each}
-  </div>
-  <div class="flex w-full mb-1">
-    {#each Array(25) as _, i}
-      <div class="{i % 2 === 0 ? 'h-[8px]' : 'h-[5px]'} border-l border-gray-400" style="width: {i < 24 ? 100 / 24 : 0}%;" />
-    {/each}
-  </div>
-  <div class="flex w-full text-xs sm:text-sm">
-    <div style="width: {100 / 24}%;">
-      <div class="hidden md:block">
-        <Timestamp value={hourly[0].timestamp} format="hour" />
-      </div>
-    </div>
-    {#each Array(11) as _, i}
-      {@const timestamp = hourly[2 * (i + 1)].timestamp}
-      <div class="text-center" style="width: {100 / 12}%;">
-        <div class="{i === 0 || i === 2 || i === 4 || i === 6 || i === 8 || i === 10 ? 'block' : 'hidden'} md:block">
-          <Timestamp value={timestamp} format="hour" />
-        </div>
-      </div>
-    {/each}
-    <div style="width: {100 / 24}%;" />
-  </div>
-  <div class="flex w-full text-base sm:text-lg font-light text-black dark:text-white">
-    <div style="width: {100 / 24}%; opacity: {temperatureOpacity(hourly[0].temperature)};">
-      <div class="hidden md:block">
-        <Temperature value={hourly[0].temperature} />
-      </div>
-    </div>
-    {#each Array(11) as _, i}
-      {@const temperature = hourly[2 * (i + 1)].temperature}
-      <div class="text-center" style="width: {100 / 12}%; opacity: {temperatureOpacity(temperature)};">
-        <div class="{i === 0 || i === 2 || i === 4 || i === 6 || i === 8 || i === 10 ? 'block' : 'hidden'} md:block">
-          &nbsp;<Temperature value={temperature} />
-        </div>
-      </div>
-    {/each}
-    <div style="width: {100 / 24}%;" />
-  </div>
-</div>
+{#if $configuration.layout === Layout.Horizontal}
+  <HourlyHorizontalLayout {aggregation} {hourly} {temperatureLow} {temperatureHigh} {CLASS_TEXT_MAP} />
+{:else if $configuration.layout === Layout.Vertical}
+  <HourlyVerticalLayout {aggregation} {today} {hourly} {temperatureLow} {temperatureHigh} {CLASS_TEXT_MAP} />
+{/if}
diff --git a/src/components/HourlyHorizontalLayout.svelte b/src/components/HourlyHorizontalLayout.svelte
new file mode 100644
index 0000000..a4dbb6e
--- /dev/null
+++ b/src/components/HourlyHorizontalLayout.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { HourlyWeather } from '../providers/Provider';
+  import Temperature from './scalars/Temperature.svelte';
+  import Timestamp from './scalars/Timestamp.svelte';
+
+  /* Properties */
+  export let aggregation: { conditions: number; duration: number }[] = [];
+  export let hourly: HourlyWeather[] = [];
+  export let temperatureLow: number;
+  export let temperatureHigh: number;
+  export let CLASS_TEXT_MAP: { [key: number]: [string, string] };
+
+  /* State */
+  const MIN_TEMPERATURE_OPACITY = 0.35;
+
+  function temperatureOpacity(value: number): string {
+    let percent = (value - temperatureLow) / (temperatureHigh - temperatureLow);
+    const opacity = percent * (1 - MIN_TEMPERATURE_OPACITY) + MIN_TEMPERATURE_OPACITY;
+    return opacity.toFixed(2);
+  }
+</script>
+
+<div class="flex mb-1.5 overflow-hidden rounded-md text-sm sm:text-base">
+  {#each aggregation as entry}
+    <div class="h-10 leading-9 {CLASS_TEXT_MAP[entry.conditions][0]} text-center" style="width: {(100 * entry.duration) / 24}%;">
+      {#if entry.duration > 4}
+        <div class="truncate">{CLASS_TEXT_MAP[entry.conditions][1]}</div>
+      {:else if entry.duration > 2}
+        <div class="hidden md:block truncate">{CLASS_TEXT_MAP[entry.conditions][1]}</div>
+      {/if}
+    </div>
+  {/each}
+</div>
+<div class="flex w-full mb-1">
+  {#each Array(25) as _, i}
+    <div class="{i % 2 === 0 ? 'h-[8px]' : 'h-[5px]'} border-l border-gray-400" style="width: {i < 24 ? 100 / 24 : 0}%;" />
+  {/each}
+</div>
+<div class="flex w-full text-xs sm:text-sm">
+  <div style="width: {100 / 24}%;">
+    <div class="hidden md:block">
+      <Timestamp value={hourly[0].timestamp} format="hour" />
+    </div>
+  </div>
+  {#each Array(11) as _, i}
+    {@const timestamp = hourly[2 * (i + 1)].timestamp}
+    <div class="text-center" style="width: {100 / 12}%;">
+      <div class="{i % 2 === 0 ? 'block' : 'hidden'} md:block">
+        <Timestamp value={timestamp} format="hour" />
+      </div>
+    </div>
+  {/each}
+  <div style="width: {100 / 24}%;" />
+</div>
+<div class="flex w-full text-base sm:text-lg font-light text-black dark:text-white">
+  <div style="width: {100 / 24}%; opacity: {temperatureOpacity(hourly[0].temperature)};">
+    <div class="hidden md:block">
+      <Temperature value={hourly[0].temperature} />
+    </div>
+  </div>
+  {#each Array(11) as _, i}
+    {@const temperature = hourly[2 * (i + 1)].temperature}
+    <div class="text-center" style="width: {100 / 12}%; opacity: {temperatureOpacity(temperature)};">
+      <div class="{i % 2 === 0 ? 'block' : 'hidden'} md:block">
+        &nbsp;<Temperature value={temperature} />
+      </div>
+    </div>
+  {/each}
+  <div style="width: {100 / 24}%;" />
+</div>
diff --git a/src/components/HourlyVerticalLayout.svelte b/src/components/HourlyVerticalLayout.svelte
new file mode 100644
index 0000000..80894a4
--- /dev/null
+++ b/src/components/HourlyVerticalLayout.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { HourlyWeather } from '../providers/Provider';
+  import Temperature from './scalars/Temperature.svelte';
+  import Timestamp from './scalars/Timestamp.svelte';
+  /* Properties */
+  export let aggregation: { conditions: number; duration: number }[] = [];
+  export let today: boolean = false;
+  export let hourly: HourlyWeather[] = [];
+  export let temperatureLow: number;
+  export let temperatureHigh: number;
+  export let CLASS_TEXT_MAP: { [key: number]: [string, string] };
+</script>
+
+<div class="flex flex-row mx-auto">
+  <div class="flex flex-col w-9 overflow-hidden rounded-md text-sm sm:text-base">
+    {#each aggregation as entry}
+      <div class={CLASS_TEXT_MAP[entry.conditions][0]} style="height: {(100 * entry.duration) / 24}%;"></div>
+    {/each}
+  </div>
+  <div class="text-sm ml-2">
+    <div style="height:{100 / 24}%;transform:translateY(2px);" class="grow flex items-top">
+      {#if today}
+        <span class="font-bold w-9 mr-2 inline-block text-right">Now</span>
+      {:else}
+        <span class="font-bold w-9 mr-2 inline-block text-right">
+          <Timestamp value={hourly[0].timestamp} format="hour" />
+        </span>
+      {/if}
+      <span class="font-normal italic mr-2">{hourly[0].conditions}</span>
+      <span class="min-w-fit inline-block border-solid border-b-[1px] border-slate-300 grow h-2/4"></span>
+    </div>
+    <div style="height:{100 / 24}%">&nbsp;</div>
+    {#each Array(11) as _, i}
+      {@const timestamp = hourly[2 * (i + 1)].timestamp}
+      {@const condition = hourly[2 * (i + 1)].conditions}
+      {@const previousCondition = hourly[2 * i].conditions}
+      {@const newCondition = previousCondition !== condition}
+      {@const width = (100 * (hourly[2 * i + 1].temperature - temperatureLow)) / (temperatureHigh - temperatureLow)}
+      <div style="height:{100 / 24}%;transform:translateY(2px);" class="font-bold grow flex items-center">
+        <span class="w-9 mr-2 inline-block text-right"><Timestamp value={timestamp} format="hour" /></span>
+        <span class="font-normal italic mr-2 {newCondition ? 'block' : 'hidden'}">{newCondition ? condition : ''}</span>
+        <hr class="h-px bg-gray-200 border-0 grow" style="min-width: calc({width}% - 50px);" />
+      </div>
+      <div style="height:{100 / 24}%">&nbsp;</div>
+    {/each}
+  </div>
+  <div class="grow text-base sm:text-lg font-light text-black dark:text-white">
+    {#each Array(12) as _, i}
+      {@const temperature = hourly[2 * i].temperature}
+      {@const width = (100 * (temperature - temperatureLow)) / (temperatureHigh - temperatureLow)}
+      <div style="height:{100 / 24}%;transform:translateY(2px);" class="grow flex items-center">
+        <hr class="h-px bg-gray-200 border-0" style="min-width: calc({width}% - 50px);" />
+        <span class="ml-2" style="transform:translateY(-1px);"><Temperature pill value={temperature} /></span>
+      </div>
+      <div style="height:{100 / 24}%;">&nbsp;</div>
+    {/each}
+  </div>
+</div>
diff --git a/src/components/scalars/Temperature.svelte b/src/components/scalars/Temperature.svelte
index 9c84d77..52406c0 100644
--- a/src/components/scalars/Temperature.svelte
+++ b/src/components/scalars/Temperature.svelte
@@ -2,14 +2,17 @@
   import { configuration, Units } from '../../Configuration';
 
   export let value: number = 0;
+  export let pill: boolean = false;
 
   function cToF(temperature: number): number {
     return (temperature * 9) / 5 + 32;
   }
+
+  $: pillStyle = pill ? 'border border-slate-300 rounded-full px-2 py-0.5 font-medium' : '';
 </script>
 
 {#if $configuration.units === Units.Imperial}
-  <span>{cToF(value).toFixed(0)}°</span>
+  <span class={pillStyle}>{cToF(value).toFixed(0)}°</span>
 {:else}
-  <span>{value.toFixed(1)}°</span>
+  <span class={pillStyle}>{value.toFixed(1)}°</span>
 {/if}
diff --git a/src/providers/Location.ts b/src/providers/Location.ts
index 9803a98..b7d5807 100644
--- a/src/providers/Location.ts
+++ b/src/providers/Location.ts
@@ -27,7 +27,7 @@ export class Location {
     return new Promise(function (resolve) {
       window.navigator.geolocation.getCurrentPosition(
         (position: GeolocationPosition) => {
-          resolve(new Location(position.coords.latitude.toFixed(3), position.coords.longitude.toFixed(3)));
+          resolve(new Location(position.coords.latitude.toFixed(7), position.coords.longitude.toFixed(7)));
         },
         (error: GeolocationPositionError) => {
           console.error(`Error getting geolocation: ${error.message} (${error.code})`);
diff --git a/src/providers/Provider.ts b/src/providers/Provider.ts
index 3e84c9d..c601dba 100644
--- a/src/providers/Provider.ts
+++ b/src/providers/Provider.ts
@@ -66,6 +66,16 @@ export interface HourlyWeather {
   precipitation_type?: PrecipitationType;
 }
 
+export interface SunTimes {
+  sunrise_timestamp: Date;
+  sunset_timestamp: Date;
+}
+
+export interface DailyPrecipitation {
+  precipitation_probability?: number; // in integral percent 0-100
+  precipitation_amount?: number; // in mm
+}
+
 export interface Weather {
   current: CurrentWeather;
   daily: DailyWeather[];