diff --git a/openweathermap.org/WeatherWidgetContents b/openweathermap.org/WeatherWidgetContents
new file mode 100644
index 0000000000000000000000000000000000000000..ce717da16daf10e6b7960c2d350477baff3708d7
--- /dev/null
+++ b/openweathermap.org/WeatherWidgetContents
@@ -0,0 +1,46 @@
+var Contacts_Component_WeatherWidgetContents = VTAP.Component.Core.extend({
+    data() {
+        weather_data : ''
+    },	
+    created() {
+        VTAP.Detail.Record().then( (record) => {
+            //fetch weather details from openweathermap 
+            VTAP.CustomApi.Get('get_weather', {'city' : record.mailingcity}, 
+                (error, response) => {
+                if(response && response.content) {
+                    this.weather_data = JSON.parse(response.content);
+                }
+            });
+        });
+    },
+    methods : {
+        getDisplayTime(timestamp) {
+            let d = new Date(timestamp * 1000).toISOString().slice(0, 19).replace('T', ' ').split(' ');
+            return d[1];
+        },
+        getDisplayTemperature(temp) {
+            return Math.round(temp - 273.15);
+        }
+    },
+    template : 
+        `<div class='p-2 bg-white'>
+            <div class='p-2 d-flex align-items-center justify-content-center'><h4>Weather details</h4></div>
+            <div class='row' v-if="weather_data">
+                <div class='col-12'>
+                    <table class='table table-striped'>
+                        <tr><th>Properties</th><th>Value</th></tr>
+                        <tr><td>Current Time</td><td>{{getDisplayTime(weather_data.dt+weather_data.timezone)}}</td></tr>
+                        <tr><td>Sunrise Time</td><td>{{getDisplayTime(weather_data.sys.sunrise+weather_data.timezone)}}</td></tr>
+                        <tr><td>Sunset Time</td><td>{{getDisplayTime(weather_data.sys.sunset+weather_data.timezone)}}</td></tr>
+                        <tr><td>Max Temp</td><td>{{getDisplayTemperature(weather_data.main.temp_min)}} C</td></tr>
+                        <tr><td>Min Temp</td><td>{{getDisplayTemperature(weather_data.main.temp_max)}} C</td></tr>
+                        <tr><td>Weather description</td><td>{{weather_data.weather[0].description}}</td></tr>
+                    </table>
+                </div>
+            </div>
+            <div v-else class='d-flex justify-content-center align-items-center' style='min-height:100px;'>
+                <b-spinner label="loading"></b-spinner>
+            </div>
+        </div>`
+});
+