diff --git a/fittrackee_client/public/img/misc/mountains.svg b/fittrackee_client/public/img/misc/mountains.svg
new file mode 100644
index 00000000..3568d889
--- /dev/null
+++ b/fittrackee_client/public/img/misc/mountains.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 329.999 329.999" style="enable-background:new 0 0 329.999 329.999;" xml:space="preserve">
+<g id="XMLID_340_">
+	<path id="XMLID_341_" d="M237.055,265H315c5.437,0,10.451-2.944,13.1-7.694c2.649-4.75,2.52-10.562-0.338-15.188l-105-170
+		C220.029,67.693,215.199,65,210,65c-5.201,0-10.029,2.693-12.763,7.118l-39.513,63.974l75.26,122.297L237.055,265z"/>
+	<path id="XMLID_348_" d="M15,265h160c0.006,0,0.014,0,0.019,0h26.809l-94.263-153.178C104.804,107.577,100.082,105,95,105
+		c-5.209,0-10.045,2.702-12.775,7.139l-80,130c-2.848,4.628-2.97,10.435-0.318,15.178C4.557,262.061,9.566,265,15,265z"/>
+</g>
+</svg>
diff --git a/fittrackee_client/public/img/weather/breeze.svg b/fittrackee_client/public/img/weather/breeze.svg
new file mode 100644
index 00000000..71e134e5
--- /dev/null
+++ b/fittrackee_client/public/img/weather/breeze.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 226.705 226.705" style="enable-background:new 0 0 226.705 226.705;" xml:space="preserve">
+<g>
+	<path d="M174.178,78.362c-23.999,0-43.523,19.523-43.523,43.521c0,20.026,16.291,36.318,36.316,36.318c4.143,0,7.5-3.358,7.5-7.5
+		c0-4.142-3.357-7.5-7.5-7.5c-11.754,0-21.316-9.564-21.316-21.318c0-15.726,12.796-28.521,28.523-28.521
+		c20.692,0,37.527,16.834,37.527,37.525c0,26.901-21.885,48.787-48.785,48.787H7.5c-4.143,0-7.5,3.358-7.5,7.5
+		c0,4.142,3.357,7.5,7.5,7.5h155.42c35.171,0,63.785-28.615,63.785-63.787C226.705,101.925,203.142,78.362,174.178,78.362z"/>
+	<path d="M7.5,110.35h69.889c23.533,0,42.68-19.146,42.68-42.68c0-19.652-15.989-35.641-35.643-35.641
+		c-16.55,0-30.014,13.464-30.014,30.014c0,14.066,11.443,25.51,25.51,25.51c4.143,0,7.5-3.358,7.5-7.5c0-4.142-3.357-7.5-7.5-7.5
+		c-5.795,0-10.51-4.715-10.51-10.51c0-8.279,6.735-15.014,15.014-15.014c11.383,0,20.643,9.259,20.643,20.641
+		c0,15.263-12.417,27.68-27.68,27.68H7.5c-4.143,0-7.5,3.358-7.5,7.5C0,106.993,3.357,110.35,7.5,110.35z"/>
+</g>
+</svg>
diff --git a/fittrackee_client/public/img/weather/clear-day.svg b/fittrackee_client/public/img/weather/clear-day.svg
new file mode 100644
index 00000000..3cb98d01
--- /dev/null
+++ b/fittrackee_client/public/img/weather/clear-day.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 219.786 219.786" style="enable-background:new 0 0 219.786 219.786;" xml:space="preserve">
+<g>
+	<path d="M109.881,183.46c-4.142,0-7.5,3.358-7.5,7.5v21.324c0,4.142,3.358,7.5,7.5,7.5c4.143,0,7.5-3.358,7.5-7.5V190.96
+		C117.381,186.817,114.023,183.46,109.881,183.46z"/>
+	<path d="M109.881,36.329c4.143,0,7.5-3.358,7.5-7.5V7.503c0-4.142-3.357-7.5-7.5-7.5c-4.142,0-7.5,3.358-7.5,7.5v21.326
+		C102.381,32.971,105.739,36.329,109.881,36.329z"/>
+	<path d="M47.269,161.909l-15.084,15.076c-2.93,2.928-2.931,7.677-0.003,10.606c1.465,1.465,3.385,2.198,5.305,2.198
+		c1.919,0,3.837-0.732,5.302-2.195l15.084-15.076c2.93-2.928,2.931-7.677,0.003-10.606
+		C54.946,158.982,50.198,158.982,47.269,161.909z"/>
+	<path d="M167.208,60.067c1.919,0,3.838-0.732,5.303-2.196l15.082-15.076c2.929-2.929,2.93-7.677,0.002-10.607
+		c-2.929-2.93-7.677-2.931-10.607-0.001l-15.082,15.076c-2.929,2.928-2.93,7.677-0.002,10.606
+		C163.368,59.335,165.288,60.067,167.208,60.067z"/>
+	<path d="M36.324,109.895c0-4.142-3.358-7.5-7.5-7.5H7.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.142,3.358,7.5,7.5,7.5h21.324
+		C32.966,117.395,36.324,114.037,36.324,109.895z"/>
+	<path d="M212.286,102.395h-21.334c-4.143,0-7.5,3.358-7.5,7.5c0,4.142,3.357,7.5,7.5,7.5h21.334c4.143,0,7.5-3.358,7.5-7.5
+		C219.786,105.754,216.429,102.395,212.286,102.395z"/>
+	<path d="M47.267,57.871c1.464,1.464,3.384,2.196,5.303,2.196c1.919,0,3.839-0.732,5.303-2.196c2.929-2.929,2.929-7.678,0-10.607
+		L42.797,32.188c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L47.267,57.871z"/>
+	<path d="M172.52,161.911c-2.929-2.929-7.678-2.93-10.607-0.001c-2.93,2.929-2.93,7.678-0.001,10.606l15.074,15.076
+		c1.465,1.465,3.384,2.197,5.304,2.197c1.919,0,3.839-0.732,5.303-2.196c2.93-2.929,2.93-7.678,0.001-10.606L172.52,161.911z"/>
+	<path d="M109.889,51.518c-32.187,0-58.373,26.188-58.373,58.377c0,32.188,26.186,58.375,58.373,58.375
+		c32.19,0,58.378-26.187,58.378-58.375C168.267,77.706,142.078,51.518,109.889,51.518z M109.889,153.27
+		c-23.916,0-43.373-19.458-43.373-43.375c0-23.918,19.457-43.377,43.373-43.377c23.919,0,43.378,19.459,43.378,43.377
+		C153.267,133.812,133.808,153.27,109.889,153.27z"/>
+</g>
+</svg>
diff --git a/fittrackee_client/public/img/weather/clear-night.svg b/fittrackee_client/public/img/weather/clear-night.svg
new file mode 100644
index 00000000..cc7cb229
--- /dev/null
+++ b/fittrackee_client/public/img/weather/clear-night.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 168.29 168.29" style="enable-background:new 0 0 168.29 168.29;" xml:space="preserve">
+<path d="M159.81,127.909c-1.025-2.473-3.289-4.212-5.942-4.565c-24.423-3.241-45.44-19.364-54.848-42.078
+	c-9.409-22.715-5.95-48.978,9.028-68.539c1.628-2.125,1.999-4.957,0.975-7.43c-1.024-2.473-3.289-4.212-5.942-4.565
+	C99.416,0.247,95.69,0,92.005,0C80.957,0,70.152,2.155,59.889,6.406c-20.764,8.601-36.935,24.772-45.533,45.536
+	c-8.597,20.761-8.595,43.628,0.004,64.39c13.074,31.563,43.595,51.957,77.756,51.957c0.001,0,0.001,0,0.001,0
+	c11.051,0,21.872-2.161,32.164-6.424c13.644-5.652,25.592-14.825,34.553-26.528C160.462,133.213,160.834,130.382,159.81,127.909z
+	 M118.541,148.008c-8.463,3.505-17.353,5.283-26.424,5.282c-28.073,0-53.155-16.76-63.899-42.698
+	c-7.067-17.061-7.068-35.852-0.004-52.911C35.28,40.62,48.567,27.332,65.629,20.265c7.424-3.075,15.189-4.816,23.126-5.188
+	c-11.761,22.021-13.291,48.521-3.595,71.93c9.694,23.405,29.509,41.059,53.392,48.315
+	C132.687,140.647,125.916,144.953,118.541,148.008z"/>
+</svg>
diff --git a/fittrackee_client/public/img/weather/cloudy.svg b/fittrackee_client/public/img/weather/cloudy.svg
new file mode 100644
index 00000000..45be567f
--- /dev/null
+++ b/fittrackee_client/public/img/weather/cloudy.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 249.002 249.002" style="enable-background:new 0 0 249.002 249.002;" xml:space="preserve">
+<path d="M185.496,83.545c-1.475,0-2.952,0.051-4.425,0.151c-4.725-11.404-12.63-21.543-22.705-28.993
+	c-12.166-8.997-26.673-13.752-41.952-13.752c-38.455,0-69.74,30.658-69.74,68.343c0,0.365,0.003,0.732,0.01,1.101
+	C20.669,111.989,0,133.26,0,159.176c0,26.95,22.35,48.875,49.822,48.875h135.674c35.017,0,63.506-27.927,63.506-62.253
+	C249.002,111.471,220.513,83.545,185.496,83.545z M185.496,193.051H49.822C30.621,193.051,15,177.855,15,159.176
+	c0-18.68,15.621-33.878,34.822-33.878c1.183,0,2.5,0.089,4.147,0.281c2.313,0.271,4.624-0.553,6.247-2.225
+	c1.624-1.672,2.378-4.003,2.041-6.309c-0.387-2.65-0.583-5.258-0.583-7.752c0-29.413,24.556-53.343,54.74-53.343
+	c24.021,0,45.589,15.657,52.449,38.076c1.102,3.6,4.696,5.832,8.415,5.201c2.696-0.453,5.461-0.683,8.217-0.683
+	c26.746,0,48.506,21.198,48.506,47.254C234.002,171.854,212.242,193.051,185.496,193.051z"/>
+</svg>
diff --git a/fittrackee_client/public/img/weather/fog.svg b/fittrackee_client/public/img/weather/fog.svg
new file mode 100644
index 00000000..fb4f5824
--- /dev/null
+++ b/fittrackee_client/public/img/weather/fog.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 217.43 217.43" style="enable-background:new 0 0 217.43 217.43;" xml:space="preserve">
+<g>
+	<path d="M144.797,47.095c0-4.142-3.358-7.5-7.5-7.5H7.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.142,3.358,7.5,7.5,7.5h129.797
+		C141.439,54.595,144.797,51.237,144.797,47.095z"/>
+	<path d="M209.93,70.405H58.632c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5H209.93c4.142,0,7.5-3.358,7.5-7.5
+		S214.072,70.405,209.93,70.405z"/>
+	<path d="M174.53,116.214c4.142,0,7.5-3.358,7.5-7.5c0-4.142-3.358-7.5-7.5-7.5H22.446c-4.142,0-7.5,3.358-7.5,7.5
+		c0,4.142,3.358,7.5,7.5,7.5H174.53z"/>
+	<path d="M199.441,132.024H47.619c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5h151.822c4.142,0,7.5-3.358,7.5-7.5
+		S203.583,132.024,199.441,132.024z"/>
+	<path d="M125.759,162.835H25.068c-4.142,0-7.5,3.358-7.5,7.5c0,4.142,3.358,7.5,7.5,7.5h100.69c4.142,0,7.5-3.358,7.5-7.5
+		C133.259,166.193,129.901,162.835,125.759,162.835z"/>
+</g>
+</svg>
diff --git a/fittrackee_client/public/img/weather/partly-cloudy-day.svg b/fittrackee_client/public/img/weather/partly-cloudy-day.svg
new file mode 100644
index 00000000..ba775f72
--- /dev/null
+++ b/fittrackee_client/public/img/weather/partly-cloudy-day.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 274.934 274.934" style="enable-background:new 0 0 274.934 274.934;" xml:space="preserve">
+<g>
+	<path d="M109.906,204.389c-4.143,0-7.5,3.358-7.5,7.5v21.325c0,4.142,3.357,7.5,7.5,7.5c4.142,0,7.5-3.358,7.5-7.5v-21.325
+		C117.406,207.747,114.049,204.389,109.906,204.389z"/>
+	<path d="M109.906,57.258c4.142,0,7.5-3.358,7.5-7.5V28.433c0-4.142-3.358-7.5-7.5-7.5c-4.143,0-7.5,3.358-7.5,7.5v21.325
+		C102.406,53.9,105.764,57.258,109.906,57.258z"/>
+	<path d="M47.275,78.801c1.465,1.464,3.384,2.196,5.303,2.196c1.92,0,3.84-0.732,5.305-2.198c2.928-2.93,2.927-7.678-0.002-10.606
+		L42.799,53.116c-2.932-2.929-7.68-2.928-10.607,0.002c-2.928,2.93-2.927,7.678,0.002,10.606L47.275,78.801z"/>
+	<path d="M183.463,130.825c0,4.142,3.357,7.5,7.5,7.5h21.324c4.143,0,7.5-3.358,7.5-7.5c0-4.142-3.357-7.5-7.5-7.5h-21.324
+		C186.82,123.325,183.463,126.683,183.463,130.825z"/>
+	<path d="M36.334,130.825c0-4.142-3.357-7.5-7.5-7.5H7.5c-4.143,0-7.5,3.358-7.5,7.5c0,4.142,3.357,7.5,7.5,7.5h21.334
+		C32.977,138.325,36.334,134.967,36.334,130.825z"/>
+	<path d="M167.217,80.997c1.919,0,3.839-0.732,5.304-2.197l15.076-15.076c2.929-2.929,2.929-7.678,0-10.606
+		c-2.93-2.929-7.678-2.929-10.607,0l-15.076,15.076c-2.929,2.929-2.929,7.678,0,10.606
+		C163.378,80.264,165.298,80.997,167.217,80.997z"/>
+	<path d="M47.267,182.84l-15.074,15.076c-2.929,2.929-2.929,7.678,0.001,10.606c1.464,1.464,3.384,2.196,5.303,2.196
+		s3.839-0.732,5.304-2.197l15.074-15.076c2.929-2.929,2.929-7.678-0.001-10.606C54.945,179.911,50.196,179.911,47.267,182.84z"/>
+	<path d="M168.27,130.825c0-32.189-26.186-58.377-58.373-58.377c-32.189,0-58.377,26.188-58.377,58.377
+		c0,32.188,26.188,58.375,58.377,58.375C142.084,189.2,168.27,163.013,168.27,130.825z M66.52,130.825
+		c0-23.918,19.459-43.377,43.377-43.377c23.916,0,43.373,19.459,43.373,43.377c0,23.917-19.457,43.375-43.373,43.375
+		C85.979,174.2,66.52,154.742,66.52,130.825z"/>
+	<path d="M239.591,184.247c-6.395-12.787-19.896-21.297-34.702-21.297c-20.344,0-37.064,15.526-38.517,35.144
+		c-13.319,2.421-23.439,13.93-23.439,27.72c0,15.542,12.856,28.188,28.66,28.188h67.838c19.576,0,35.502-15.646,35.502-34.877
+		C274.934,199.945,259.094,184.333,239.591,184.247z M239.432,239.001h-67.838c-7.532,0-13.66-5.916-13.66-13.188
+		c0-7.272,6.128-13.189,13.66-13.189c0.441,0,0.964,0.037,1.644,0.115c2.308,0.265,4.617-0.553,6.24-2.223
+		c1.623-1.669,2.378-3.998,2.045-6.302c-0.168-1.158-0.253-2.283-0.253-3.344c0-12.639,10.596-22.921,23.619-22.921
+		c10.378,0,19.686,6.738,22.639,16.386c1.103,3.603,4.71,5.83,8.422,5.2c1.137-0.192,2.309-0.29,3.482-0.29
+		c11.305,0,20.502,8.917,20.502,19.877C259.934,230.083,250.736,239.001,239.432,239.001z"/>
+</g>
+</svg>
diff --git a/fittrackee_client/public/img/weather/partly-cloudy-night.svg b/fittrackee_client/public/img/weather/partly-cloudy-night.svg
new file mode 100644
index 00000000..7cee913c
--- /dev/null
+++ b/fittrackee_client/public/img/weather/partly-cloudy-night.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 305.367 305.367" style="enable-background:new 0 0 305.367 305.367;" xml:space="preserve">
+<path d="M304.796,182.155c-1.024-2.473-3.289-4.212-5.942-4.565c-24.423-3.241-45.439-19.364-54.848-42.078
+	c-9.409-22.715-5.95-48.978,9.028-68.539c1.627-2.125,1.999-4.957,0.975-7.43c-1.024-2.473-3.289-4.212-5.942-4.564
+	c-14.611-1.941-29.547,0.022-43.191,5.673c-25.806,10.689-43.98,32.924-49.881,59.047c-11.954-13.502-29.57-21.858-48.481-21.858
+	c-35.335,0-64.082,28.178-64.082,62.813c0,0.122,0,0.243,0.001,0.365C18.732,162.802,0,182.296,0,206.002
+	c0,24.876,20.625,45.113,45.977,45.113h123.34c22.222,0,41.581-12.232,51.453-30.188c5.441,1.087,10.919,1.637,16.385,1.637
+	c10.904,0,21.752-2.16,32.114-6.452c13.644-5.652,25.592-14.825,34.553-26.528C305.449,187.46,305.821,184.628,304.796,182.155z
+	 M169.316,236.115H45.977C28.896,236.115,15,222.606,15,206.002c0-16.605,13.896-30.115,30.977-30.115
+	c1.054,0,2.226,0.079,3.686,0.25c2.317,0.274,4.624-0.55,6.249-2.222c1.624-1.671,2.379-4.003,2.043-6.31
+	c-0.347-2.379-0.523-4.718-0.523-6.951c0-26.364,22.018-47.813,49.082-47.813c21.467,0,40.743,13.942,46.96,33.929
+	c0.08,0.281,0.177,0.554,0.288,0.82c1.305,3.233,4.699,5.177,8.191,4.585c2.42-0.406,4.897-0.611,7.363-0.611
+	c23.939,0,43.414,18.965,43.414,42.275C212.73,217.15,193.255,236.115,169.316,236.115z M263.528,202.254
+	c-11.973,4.959-24.725,6.442-37.293,4.414c0.967-4.127,1.496-8.417,1.496-12.828c0-31.582-26.205-57.275-58.414-57.275
+	c-0.456,0-0.912,0.031-1.368,0.041c0.65-27.137,17.104-51.506,42.668-62.094c7.374-3.055,15.208-4.797,23.121-5.179
+	c-11.756,22.019-13.285,48.514-3.589,71.92c9.694,23.403,29.512,41.058,53.392,48.315
+	C277.674,194.893,270.903,199.199,263.528,202.254z"/>
+</svg>
diff --git a/fittrackee_client/public/img/weather/pour-rain.svg b/fittrackee_client/public/img/weather/pour-rain.svg
new file mode 100644
index 00000000..9afd55e8
--- /dev/null
+++ b/fittrackee_client/public/img/weather/pour-rain.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 190.391 190.391" style="enable-background:new 0 0 190.391 190.391;" xml:space="preserve">
+<path d="M178.203,113.471c0-21.885-34.001-71.735-37.878-77.348c-1.4-2.027-3.707-3.237-6.172-3.237
+	c-2.464,0-4.771,1.21-6.171,3.238c-1.309,1.896-6.056,8.843-11.768,18.052C100.844,27.223,84.504,3.507,84.318,3.237
+	C82.917,1.21,80.61,0,78.146,0c-2.464,0-4.771,1.21-6.171,3.238c-6.12,8.861-59.788,87.547-59.788,121.197
+	c0,36.368,29.589,65.955,65.959,65.955c23.491,0,45.391-12.771,57.101-32.914C159.032,156.893,178.203,137.385,178.203,113.471z
+	 M78.147,175.391c-28.099,0-50.959-22.858-50.959-50.955c0-21.806,32.533-75.605,50.942-103.49
+	c6.985,10.608,18.768,29.062,29.245,48.145c-8.899,15.801-17.258,33.528-17.258,44.38c0,18.974,12.063,35.183,28.923,41.362
+	C109.516,167.551,94.321,175.391,78.147,175.391z M134.154,142.505c-16.011,0-29.037-13.025-29.037-29.034
+	c0-7.837,7.869-24.102,17.101-40.102c0.168-0.252,0.316-0.515,0.452-0.784c3.767-6.495,7.74-12.923,11.486-18.701
+	c13.122,20.228,29.047,48.429,29.047,59.587C163.203,129.48,150.172,142.505,134.154,142.505z"/>
+</svg>
diff --git a/fittrackee_client/public/img/weather/rain.svg b/fittrackee_client/public/img/weather/rain.svg
new file mode 100644
index 00000000..896c2ce5
--- /dev/null
+++ b/fittrackee_client/public/img/weather/rain.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 233.591 233.591" style="enable-background:new 0 0 233.591 233.591;" xml:space="preserve">
+<g>
+	<path d="M172.247,38.723c-1.193,0-2.388,0.036-3.582,0.108C158.869,15.688,135.365,0,109.444,0
+		C74.109,0,45.362,28.178,45.362,62.813c0,0.122,0,0.243,0.001,0.365C21.662,64.96,2.93,84.454,2.93,108.16
+		c0,24.875,20.625,45.113,45.976,45.113h123.34c32.209,0,58.414-25.694,58.414-57.275C230.661,64.416,204.456,38.723,172.247,38.723
+		z M172.247,138.273H48.907c-17.08,0-30.976-13.509-30.976-30.113c0-16.605,13.896-30.115,30.976-30.115
+		c1.054,0,2.226,0.08,3.687,0.25c2.315,0.274,4.624-0.55,6.249-2.222c1.625-1.671,2.379-4.003,2.043-6.31
+		c-0.347-2.379-0.523-4.718-0.523-6.951C60.362,36.449,82.38,15,109.444,15c21.54,0,40.878,14.036,47.027,34.132
+		c1.102,3.599,4.7,5.828,8.412,5.202c2.42-0.406,4.897-0.611,7.363-0.611c23.938,0,43.414,18.965,43.414,42.275
+		C215.661,119.309,196.185,138.273,172.247,138.273z"/>
+	<path d="M39.601,196.751l21.486-21.486c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0l-21.486,21.486
+		c-2.929,2.929-2.929,7.678,0,10.607c1.464,1.464,3.384,2.197,5.303,2.197C36.217,198.947,38.136,198.215,39.601,196.751z"/>
+	<path d="M85.439,196.751l21.484-21.486c2.929-2.929,2.928-7.678-0.001-10.607c-2.93-2.929-7.678-2.928-10.607,0.001l-21.484,21.486
+		c-2.929,2.929-2.928,7.678,0,10.607c1.465,1.464,3.384,2.196,5.303,2.196C82.055,198.947,83.975,198.215,85.439,196.751z"/>
+	<path d="M131.275,196.751l21.484-21.486c2.929-2.929,2.928-7.678,0-10.607c-2.93-2.929-7.678-2.928-10.607,0.001l-21.484,21.486
+		c-2.929,2.929-2.928,7.678,0,10.607c1.465,1.464,3.384,2.196,5.303,2.196C127.891,198.947,129.811,198.215,131.275,196.751z"/>
+	<path d="M187.99,164.658l-21.486,21.486c-2.929,2.929-2.929,7.678,0,10.607c1.464,1.464,3.384,2.197,5.303,2.197
+		c1.919,0,3.839-0.732,5.303-2.197l21.486-21.486c2.929-2.929,2.929-7.678,0-10.606C195.668,161.729,190.919,161.729,187.99,164.658
+		z"/>
+	<path d="M53.628,199.301l-21.484,21.486c-2.929,2.929-2.928,7.678,0,10.607c1.465,1.464,3.384,2.196,5.303,2.196
+		c1.92,0,3.839-0.732,5.304-2.197l21.484-21.486c2.929-2.929,2.928-7.678-0.001-10.607
+		C61.306,196.372,56.557,196.372,53.628,199.301z"/>
+	<path d="M99.599,199.301l-21.484,21.486c-2.929,2.929-2.928,7.678,0.001,10.607c1.465,1.464,3.384,2.196,5.303,2.196
+		c1.919,0,3.839-0.732,5.304-2.197l21.484-21.486c2.929-2.929,2.928-7.678,0-10.607C107.276,196.372,102.528,196.372,99.599,199.301
+		z"/>
+	<path d="M145.57,199.301l-21.484,21.486c-2.929,2.929-2.928,7.678,0,10.607c1.465,1.464,3.384,2.196,5.303,2.196
+		c1.919,0,3.839-0.732,5.304-2.197l21.484-21.486c2.929-2.929,2.928-7.678-0.001-10.607
+		C153.247,196.372,148.499,196.372,145.57,199.301z"/>
+</g>
+</svg>
diff --git a/fittrackee_client/public/img/weather/sleet.svg b/fittrackee_client/public/img/weather/sleet.svg
new file mode 100644
index 00000000..1871e5be
--- /dev/null
+++ b/fittrackee_client/public/img/weather/sleet.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 227.73 227.73" style="enable-background:new 0 0 227.73 227.73;" xml:space="preserve">
+<g>
+	<circle cx="183.082" cy="187.694" r="10.499"/>
+	<circle cx="137.27" cy="187.694" r="10.499"/>
+	<circle cx="91.139" cy="187.694" r="10.499"/>
+	<circle cx="45.328" cy="187.694" r="10.499"/>
+	<circle cx="160.27" cy="216.486" r="10.498"/>
+	<circle cx="114.139" cy="216.486" r="10.498"/>
+	<circle cx="68.328" cy="216.486" r="10.498"/>
+	<path d="M169.316,39.469c-1.193,0-2.388,0.036-3.582,0.108c-9.796-23.143-33.3-38.831-59.221-38.831
+		c-35.335,0-64.082,28.178-64.082,62.813c0,0.121,0,0.243,0.001,0.365C18.732,65.706,0,85.2,0,108.906
+		c0,24.876,20.625,45.113,45.977,45.113h123.34c32.209,0,58.414-25.694,58.414-57.275S201.526,39.469,169.316,39.469z
+		 M169.316,139.02H45.977C28.896,139.02,15,125.511,15,108.906c0-16.605,13.896-30.115,30.977-30.115c1.054,0,2.226,0.08,3.687,0.25
+		c2.317,0.272,4.624-0.551,6.248-2.222c1.625-1.671,2.379-4.003,2.043-6.31c-0.347-2.379-0.523-4.718-0.523-6.951
+		c0-26.364,22.018-47.813,49.082-47.813c21.54,0,40.879,14.036,47.027,34.132c1.102,3.6,4.703,5.83,8.412,5.202
+		c2.42-0.406,4.897-0.611,7.363-0.611c23.938,0,43.414,18.965,43.414,42.275C212.73,120.055,193.255,139.02,169.316,139.02z"/>
+</g>
+</svg>
diff --git a/fittrackee_client/public/img/weather/snow.svg b/fittrackee_client/public/img/weather/snow.svg
new file mode 100644
index 00000000..e0f21c52
--- /dev/null
+++ b/fittrackee_client/public/img/weather/snow.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 227.73 227.73" style="enable-background:new 0 0 227.73 227.73;" xml:space="preserve">
+<g>
+	<path d="M169.317,50.195c-1.193,0-2.39,0.036-3.583,0.108c-9.795-23.143-33.298-38.831-59.221-38.831
+		c-35.335,0-64.082,28.178-64.082,62.813c0,0.122,0,0.243,0.001,0.365C18.73,76.43,0,95.925,0,119.632
+		c0,24.875,20.625,45.113,45.976,45.113h123.342c32.209,0,58.413-25.694,58.413-57.275C227.73,75.889,201.526,50.195,169.317,50.195
+		z M169.317,149.746H45.976c-17.08,0-30.976-13.509-30.976-30.113c0-16.605,13.896-30.115,30.976-30.115
+		c1.054,0,2.225,0.08,3.688,0.25c2.312,0.274,4.623-0.549,6.248-2.221c1.624-1.671,2.379-4.001,2.044-6.308
+		c-0.348-2.388-0.523-4.728-0.523-6.954c0-26.364,22.019-47.813,49.082-47.813c21.541,0,40.879,14.035,47.026,34.131
+		c1.102,3.6,4.708,5.826,8.412,5.203c2.42-0.406,4.897-0.611,7.365-0.611c23.938,0,43.413,18.965,43.413,42.275
+		C212.73,130.781,193.256,149.746,169.317,149.746z"/>
+	<path d="M87.575,185.001c-1.381-2.391-4.438-3.213-6.83-1.83l-6.218,3.59v-7.178c0-2.761-2.238-5-5-5c-2.762,0-5,2.239-5,5v7.177
+		l-6.216-3.589c-2.393-1.383-5.451-0.561-6.83,1.83c-1.381,2.392-0.562,5.449,1.83,6.83l6.217,3.589l-6.217,3.589
+		c-2.392,1.381-3.211,4.438-1.83,6.83c0.926,1.604,2.606,2.501,4.335,2.501c0.848,0,1.708-0.216,2.495-0.671l6.216-3.589v7.178
+		c0,2.761,2.238,5,5,5c2.762,0,5-2.239,5-5v-7.179l6.218,3.59c0.787,0.455,1.647,0.671,2.495,0.671c1.729,0,3.409-0.897,4.335-2.501
+		c1.381-2.392,0.562-5.449-1.83-6.83l-6.217-3.589l6.217-3.589C88.137,190.45,88.956,187.392,87.575,185.001z"/>
+	<path d="M131.912,185.001c-1.38-2.391-4.439-3.213-6.83-1.83l-6.217,3.589v-7.177c0-2.761-2.238-5-5-5c-2.762,0-5,2.239-5,5v7.177
+		l-6.217-3.589c-2.394-1.383-5.45-0.561-6.83,1.83c-1.381,2.392-0.562,5.449,1.83,6.83l6.217,3.589l-6.217,3.589
+		c-2.392,1.381-3.211,4.438-1.83,6.83c0.926,1.604,2.606,2.501,4.335,2.501c0.848,0,1.708-0.216,2.495-0.671l6.217-3.589v7.178
+		c0,2.761,2.238,5,5,5c2.762,0,5-2.239,5-5v-7.178l6.217,3.589c0.787,0.455,1.647,0.671,2.495,0.671
+		c1.729,0,3.409-0.897,4.335-2.501c1.381-2.392,0.562-5.449-1.83-6.83l-6.217-3.589l6.217-3.589
+		C132.474,190.45,133.293,187.392,131.912,185.001z"/>
+	<path d="M176.249,185.001c-1.381-2.391-4.438-3.213-6.83-1.83l-6.218,3.59v-7.178c0-2.761-2.238-5-5-5c-2.762,0-5,2.239-5,5v7.177
+		l-6.216-3.589c-2.394-1.383-5.451-0.561-6.83,1.83c-1.381,2.392-0.561,5.449,1.83,6.83l6.217,3.589l-6.217,3.589
+		c-2.392,1.381-3.211,4.438-1.83,6.83c0.926,1.604,2.607,2.501,4.335,2.501c0.848,0,1.708-0.216,2.495-0.671l6.216-3.589v7.178
+		c0,2.761,2.238,5,5,5c2.762,0,5-2.239,5-5v-7.179l6.218,3.59c0.787,0.455,1.648,0.671,2.495,0.671c1.729,0,3.409-0.897,4.335-2.501
+		c1.381-2.392,0.562-5.449-1.83-6.83l-6.217-3.589l6.217-3.589C176.811,190.45,177.63,187.392,176.249,185.001z"/>
+</g>
+</svg>
diff --git a/fittrackee_client/public/img/weather/temperature.svg b/fittrackee_client/public/img/weather/temperature.svg
new file mode 100644
index 00000000..858521ce
--- /dev/null
+++ b/fittrackee_client/public/img/weather/temperature.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 180.146 180.146" style="enable-background:new 0 0 180.146 180.146;" xml:space="preserve">
+<path d="M116.707,104.542V26.631C116.707,11.946,104.758,0,90.07,0C75.386,0,63.438,11.946,63.438,26.631v77.911
+	c-10.013,8.046-15.879,20.135-15.879,33.091c0,23.442,19.07,42.514,42.511,42.514c23.443,0,42.517-19.071,42.517-42.514
+	C132.587,124.677,126.72,112.588,116.707,104.542z M90.07,165.146c-15.17,0-27.511-12.343-27.511-27.514
+	c0-9.281,4.669-17.883,12.489-23.007c2.115-1.387,3.39-3.745,3.39-6.273V26.631C78.438,20.218,83.656,15,90.07,15
+	c6.417,0,11.637,5.218,11.637,11.631v81.722c0,2.529,1.274,4.888,3.39,6.273c7.821,5.124,12.49,13.725,12.49,23.007
+	C117.587,152.804,105.243,165.146,90.07,165.146z"/>
+</svg>
diff --git a/fittrackee_client/public/img/weather/wind.svg b/fittrackee_client/public/img/weather/wind.svg
new file mode 100644
index 00000000..a0a1ca84
--- /dev/null
+++ b/fittrackee_client/public/img/weather/wind.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 226.705 226.705" style="enable-background:new 0 0 226.705 226.705;" xml:space="preserve">
+<g>
+	<path d="M174.178,91.582c-23.999,0-43.523,19.523-43.523,43.521c0,20.026,16.292,36.318,36.316,36.318c4.142,0,7.5-3.357,7.5-7.5
+		c0-4.143-3.358-7.5-7.5-7.5c-11.754,0-21.316-9.563-21.316-21.318c0-15.727,12.795-28.521,28.523-28.521
+		c20.693,0,37.527,16.834,37.527,37.525c0,26.901-21.885,48.787-48.785,48.787H7.5c-4.142,0-7.5,3.357-7.5,7.5
+		c0,4.143,3.358,7.5,7.5,7.5h155.42c35.171,0,63.785-28.615,63.785-63.787C226.705,115.145,203.142,91.582,174.178,91.582z"/>
+	<path d="M7.5,151.57h69.889c23.534,0,42.68-19.146,42.68-42.68c0-19.652-15.989-35.641-35.643-35.641
+		c-16.55,0-30.014,13.464-30.014,30.014c0,14.066,11.444,25.51,25.51,25.51c4.142,0,7.5-3.357,7.5-7.5s-3.358-7.5-7.5-7.5
+		c-5.795,0-10.51-4.715-10.51-10.51c0-8.278,6.735-15.014,15.014-15.014c11.382,0,20.643,9.26,20.643,20.641
+		c0,15.263-12.417,27.68-27.68,27.68H7.5c-4.142,0-7.5,3.357-7.5,7.5S3.358,151.57,7.5,151.57z"/>
+	<path d="M130.402,79.301h52.418c18.133,0,32.885-14.752,32.885-32.885c0-15.222-12.385-27.605-27.607-27.605
+		c-12.895,0-23.385,10.49-23.385,23.385c0,11.032,8.975,20.008,20.006,20.008c3.59,0,6.5-2.91,6.5-6.5c0-3.59-2.91-6.5-6.5-6.5
+		c-3.863,0-7.006-3.144-7.006-7.008c0-5.727,4.659-10.385,10.385-10.385c8.055,0,14.607,6.552,14.607,14.605
+		c0,10.965-8.92,19.885-19.885,19.885h-52.418c-3.59,0-6.5,2.91-6.5,6.5C123.902,76.391,126.813,79.301,130.402,79.301z"/>
+</g>
+</svg>
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue
new file mode 100644
index 00000000..2ff0ba3f
--- /dev/null
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue
@@ -0,0 +1,98 @@
+<template>
+  <div id="workout-info">
+    <div class="workout-data">
+      <i class="fa fa-clock-o" aria-hidden="true" />
+      {{ t('workouts.DURATION') }}: <span>{{ workout.moving }}</span>
+      <WorkoutRecord :workout="workout" record_type="LD" />
+      <div v-if="withPause">
+        ({{ t('workouts.PAUSES') }}: <span>{{ workout.pauses }}</span> -
+        {{ t('workouts.TOTAL_DURATION') }}: <span>{{ workout.duration }})</span>
+      </div>
+    </div>
+    <div class="workout-data">
+      <i class="fa fa-road" aria-hidden="true" />
+      {{ t('workouts.DISTANCE') }}: <span>{{ workout.distance }} km</span>
+      <WorkoutRecord :workout="workout" record_type="FD" />
+    </div>
+    <div class="workout-data">
+      <i class="fa fa-tachometer" aria-hidden="true" />
+      {{ t('workouts.AVERAGE_SPEED') }}:
+      <span>{{ workout.ave_speed }} km/h</span
+      ><WorkoutRecord :workout="workout" record_type="AS" /><br />
+      {{ t('workouts.MAX_SPEED') }}: <span>{{ workout.max_speed }} km/h</span>
+      <WorkoutRecord :workout="workout" record_type="MS" />
+    </div>
+    <div class="workout-data">
+      <img class="mountains" src="/img/misc/mountains.svg" />
+      {{ t('workouts.MIN_ALTITUDE') }}: <span>{{ workout.min_alt }} m</span
+      ><br />
+      {{ t('workouts.MAX_ALTITUDE') }}: <span>{{ workout.max_alt }} m</span>
+    </div>
+    <div class="workout-data">
+      <i class="fa fa-location-arrow" aria-hidden="true" />
+      {{ t('workouts.ASCENT') }}: <span>{{ workout.ascent }} m</span><br />
+      {{ t('workouts.DESCENT') }}: <span>{{ workout.descent }} m</span>
+    </div>
+    <WorkoutWeather :workout="workout" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { PropType, defineComponent, computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import WorkoutRecord from '@/components/Workout/WorkoutDetail/WorkoutRecord.vue'
+  import WorkoutWeather from '@/components/Workout/WorkoutDetail/WorkoutWeather.vue'
+  import { IWorkout } from '@/types/workouts'
+  export default defineComponent({
+    name: 'WorkoutData',
+    components: {
+      WorkoutRecord,
+      WorkoutWeather,
+    },
+    props: {
+      workout: {
+        type: Object as PropType<IWorkout>,
+        required: true,
+      },
+    },
+    setup(props) {
+      const { t } = useI18n()
+      return {
+        withPause: computed(
+          () =>
+            props.workout.pauses !== '0:00:00' && props.workout.pauses !== null
+        ),
+        t,
+      }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base';
+  #workout-info {
+    display: flex;
+    flex-direction: column;
+    padding: $default-padding $default-padding * 2;
+    width: 100%;
+    .mountains {
+      margin-bottom: -3px;
+      height: 16px;
+      filter: var(--workout-img-color);
+    }
+    .workout-data {
+      text-transform: capitalize;
+      padding: $default-padding * 0.5 0;
+
+      span {
+        font-weight: bold;
+        text-transform: lowercase;
+      }
+    }
+
+    @media screen and (max-width: $small-limit) {
+      padding: $default-padding;
+    }
+  }
+</style>
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue
index bd40e2f8..ecd6ac97 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue
@@ -105,6 +105,7 @@
 <style lang="scss" scoped>
   @import '~@/scss/base';
   #workout-map {
+    padding: $default-padding 0;
     .leaflet-container {
       height: 400px;
       width: 600px;
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutRecord.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutRecord.vue
new file mode 100644
index 00000000..0a77369c
--- /dev/null
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutRecord.vue
@@ -0,0 +1,32 @@
+<template>
+  <span
+    class="workout-record"
+    v-if="
+      workout.records &&
+      workout.records.find((record) => record.record_type === record_type)
+    "
+  >
+    <sup>
+      <i class="fa fa-trophy" aria-hidden="true" />
+    </sup>
+  </span>
+</template>
+
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue'
+
+  import { IWorkout } from '@/types/workouts'
+  export default defineComponent({
+    name: 'WorkoutRecord',
+    props: {
+      workout: {
+        type: Object as PropType<IWorkout>,
+        required: true,
+      },
+      record_type: {
+        type: String,
+        required: true,
+      },
+    },
+  })
+</script>
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutWeather.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutWeather.vue
new file mode 100644
index 00000000..583c5926
--- /dev/null
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutWeather.vue
@@ -0,0 +1,129 @@
+<template>
+  <div id="workout-weather" v-if="workout.weather_start && workout.weather_end">
+    <table class="weather-table">
+      <thead>
+        <tr>
+          <th />
+          <th>
+            <div class="weather-th">
+              {{ t('workouts.START') }}
+              <img
+                class="weather-img"
+                :src="`/img/weather/${workout.weather_start.icon}.svg`"
+                :alt="
+                  t(`workouts.WEATHER.DARK_SKY.${workout.weather_start.icon}`)
+                "
+                :title="
+                  t(`workouts.WEATHER.DARK_SKY.${workout.weather_start.icon}`)
+                "
+              />
+            </div>
+          </th>
+          <th>
+            <div class="weather-th">
+              {{ t('workouts.END') }}
+              <img
+                class="weather-img"
+                :src="`/img/weather/${workout.weather_end.icon}.svg`"
+                :alt="
+                  t(`workouts.WEATHER.DARK_SKY.${workout.weather_end.icon}`)
+                "
+                :title="
+                  t(`workouts.WEATHER.DARK_SKY.${workout.weather_end.icon}`)
+                "
+              />
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <img
+              class="weather-img weather-img-small"
+              src="/img/weather/temperature.svg"
+              :alt="t(`workouts.WEATHER.TEMPERATURE`)"
+              :title="t(`workouts.WEATHER.TEMPERATURE`)"
+            />
+          </td>
+          <td>{{ Number(workout.weather_start.temperature).toFixed(1) }}°C</td>
+          <td>{{ Number(workout.weather_end.temperature).toFixed(1) }}°C</td>
+        </tr>
+        <tr>
+          <td>
+            <img
+              class="weather-img weather-img-small"
+              src="/img/weather/pour-rain.svg"
+              :alt="t(`workouts.WEATHER.HUMIDITY`)"
+              :title="t(`workouts.WEATHER.HUMIDITY`)"
+            />
+          </td>
+          <td>
+            {{ Number(workout.weather_start.humidity * 100).toFixed(1) }}%
+          </td>
+          <td>{{ Number(workout.weather_end.humidity * 100).toFixed(1) }}%</td>
+        </tr>
+        <tr>
+          <td>
+            <img
+              class="weather-img weather-img-small"
+              src="/img/weather/breeze.svg"
+              :alt="t(`workouts.WEATHER.WIND`)"
+              :title="t(`workouts.WEATHER.WIND`)"
+            />
+          </td>
+          <td>{{ Number(workout.weather_start.wind).toFixed(1) }}m/s</td>
+          <td>{{ Number(workout.weather_end.wind).toFixed(1) }}m/s</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import { IWorkout } from '@/types/workouts'
+  export default defineComponent({
+    name: 'WorkoutWeather',
+    props: {
+      workout: {
+        type: Object as PropType<IWorkout>,
+        required: true,
+      },
+    },
+    setup() {
+      const { t } = useI18n()
+      return { t }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base';
+  #workout-weather {
+    padding-top: $default-padding;
+    .weather-img {
+      height: 30px;
+      filter: var(--workout-img-color);
+    }
+    .weather-img-small {
+      height: 20px;
+    }
+    .weather-table {
+      width: 100%;
+      text-align: center;
+
+      .weather-th {
+        display: flex;
+        flex-direction: column;
+        text-transform: capitalize;
+      }
+
+      tbody {
+        font-size: 0.8em;
+      }
+    }
+  }
+</style>
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
index 19748af3..e4f7e54c 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
@@ -54,6 +54,7 @@
       </template>
       <template #content>
         <WorkoutMap :workout="workout" />
+        <WorkoutData :workout="workout.workout" />
       </template>
     </Card>
   </div>
@@ -65,6 +66,7 @@
   import { useRoute } from 'vue-router'
 
   import Card from '@/components/Common/Card.vue'
+  import WorkoutData from '@/components/Workout/WorkoutDetail/WorkoutData.vue'
   import WorkoutMap from '@/components/Workout/WorkoutDetail/WorkoutMap.vue'
   import { WORKOUTS_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
@@ -77,6 +79,7 @@
     name: 'WorkoutDetail',
     components: {
       Card,
+      WorkoutData,
       WorkoutMap,
     },
     props: {
@@ -158,6 +161,13 @@
           }
         }
       }
+      .card-content {
+        display: flex;
+        flex-direction: row;
+        @media screen and (max-width: $small-limit) {
+          flex-direction: column;
+        }
+      }
     }
   }
 </style>
diff --git a/fittrackee_client/src/locales/en/workouts.json b/fittrackee_client/src/locales/en/workouts.json
index 1621ac4d..dfcb2e31 100644
--- a/fittrackee_client/src/locales/en/workouts.json
+++ b/fittrackee_client/src/locales/en/workouts.json
@@ -1,14 +1,22 @@
 {
   "ADD_WORKOUT": "Add workout",
+  "ASCENT": "ascent",
+  "AVERAGE_SPEED": "average speed",
+  "DESCENT": "descent",
   "DISTANCE": "distance",
   "DURATION": "duration",
+  "END": "end",
   "KM": "km",
   "LATEST_WORKOUTS": "Latest workouts",
+  "MAX_ALTITUDE": "max. altitude",
+  "MAX_SPEED": "max. speed",
+  "MIN_ALTITUDE": "min. altitude",
   "NEXT_WORKOUT": "Next workout",
   "NO_NEXT_WORKOUT": "No next workout",
   "NO_PREVIOUS_WORKOUT": "No previous workout",
   "NO_RECORDS": "No records.",
   "NO_WORKOUTS": "No workouts.",
+  "PAUSES": "pauses",
   "PREVIOUS_WORKOUT": "Previous workout",
   "RECORD": "record | records",
   "RECORD_AS": "Ave. speed",
@@ -16,5 +24,24 @@
   "RECORD_LD": "Longest duration",
   "RECORD_MS": "Max. speed",
   "SPORT": "sport | sports",
+  "START": "start",
+  "TOTAL_DURATION": "total duration",
+  "WEATHER": {
+    "HUMIDITY": "humidity",
+    "TEMPERATURE": "temperature",
+    "WIND": "wind",
+    "DARK_SKY": {
+      "clear-day": "clear day",
+      "clear-night": "clear night",
+      "cloudy": "cloudy",
+      "fog": "fog",
+      "partly-cloudy-day": "partly cloudy day",
+      "partly-cloudy-night": "partly cloudy night",
+      "rain": "rain",
+      "sleet": "sleet",
+      "snow": "snow",
+      "wind":  "wind"
+    }
+  },
   "WORKOUT": "workout | workouts"
 }
diff --git a/fittrackee_client/src/locales/fr/workouts.json b/fittrackee_client/src/locales/fr/workouts.json
index 3b274e0e..a94368c5 100644
--- a/fittrackee_client/src/locales/fr/workouts.json
+++ b/fittrackee_client/src/locales/fr/workouts.json
@@ -1,14 +1,22 @@
 {
   "ADD_WORKOUT": "Ajouter une séance",
+  "ASCENT": "dénivelé positif",
+  "AVERAGE_SPEED": "vitesse moyenne",
+  "DESCENT": "dénivelé négatif",
   "DISTANCE": "distance",
   "DURATION": "durée",
+  "END": "fin",
   "KM": "km",
   "LATEST_WORKOUTS": "Séances récentes",
+  "MAX_ALTITUDE": "altitude max",
+  "MAX_SPEED": "vitesse max",
+  "MIN_ALTITUDE": "altitude min",
   "NEXT_WORKOUT": "Séance suivante",
   "NO_NEXT_WORKOUT": "Pas de séance suivante",
   "NO_PREVIOUS_WORKOUT": "Pas de séances précédente",
   "NO_RECORDS": "Pas de records.",
   "NO_WORKOUTS": "Pas de séances.",
+  "PAUSES": "pauses",
   "PREVIOUS_WORKOUT": "Séance précédente",
   "RECORD": "record | records",
   "RECORD_AS": "Vitesse moy.",
@@ -16,5 +24,24 @@
   "RECORD_LD": "Durée la + longue",
   "RECORD_MS": "Vitesse max.",
   "SPORT": "sport | sports",
+  "START": "début",
+  "TOTAL_DURATION": "durée totale",
+  "WEATHER": {
+    "HUMIDITY": "humidité",
+    "TEMPERATURE": "température",
+    "WIND": "vent",
+    "DARK_SKY": {
+      "clear-day": "ensoleillé",
+      "clear-night": "nuit claire",
+      "cloudy": "nuageux",
+      "fog": "brouillard",
+      "partly-cloudy-day": "partiellement nuageux",
+      "partly-cloudy-night": "nuit partiellement nuageuse",
+      "rain": "pluie",
+      "sleet": "neige fondue",
+      "snow": "neige",
+      "wind":  "venteux"
+    }
+  },
   "WORKOUT": "séance | séances"
 }
diff --git a/fittrackee_client/src/scss/colors.scss b/fittrackee_client/src/scss/colors.scss
index aeecda3e..6d86f04b 100644
--- a/fittrackee_client/src/scss/colors.scss
+++ b/fittrackee_client/src/scss/colors.scss
@@ -32,4 +32,6 @@
   --disabled-color: #a3a3a3;
 
   --workout-trophy-color: #daa520;
+  --workout-img-color: invert(22%) sepia(25%) saturate(646%) hue-rotate(169deg)
+        brightness(97%) contrast(96%);
 }
\ No newline at end of file