diff --git a/frontend/src/svgNightTemp.js b/frontend/src/svgNightTemp.js
new file mode 100644
index 0000000000000000000000000000000000000000..efaf204b4783c99d4f23aa19c149df82f3f4512a
--- /dev/null
+++ b/frontend/src/svgNightTemp.js
@@ -0,0 +1,88 @@
+import * as React from "react";
+
+const SvgNightTemp = (props) => {
+ return(
+ <svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" xmlSpace="preserve" xmlnsSerif="http://www.serif.com/" style={{ fillRule: 'evenodd', clipRule: 'evenodd', strokeLinecap: 'round', strokeLinejoin: 'round' }}>
+ <g transform="matrix(2.57801,0,0,2.57801,-74.7976,-452.339)">
+ <g transform="matrix(54.1785,0,0,54.1785,182.463,369.702)"/>
+ <text x={69.447} y={369.702} style={{ fontFamily: "'Sanchez-Regular', 'Sanchez '", fontSize: 54.178 }}>
+ {props.nightTemp}<tspan x={136.141} y={369.702}>°</tspan>F
+ </text>
+ </g>
+ <g transform="matrix(1.54711,0,0,1.54711,-184.903,-159.875)">
+ <path d="M282.8,162.8L307.8,156.4C308.414,156.257 309.061,156.447 309.5,156.9L327.8,174.9C328.135,175.221 328.581,175.4 329.045,175.4C330.032,175.4 330.845,174.587 330.845,173.6C330.845,173.465 330.83,173.331 330.8,173.2L324.4,148.2C324.257,147.586 324.447,146.939 324.9,146.5L342.9,128.1C343.243,127.762 343.436,127.3 343.436,126.818C343.436,125.831 342.624,125.018 341.636,125.018C341.454,125.018 341.274,125.046 341.1,125.1L316.2,131.6C315.586,131.743 314.939,131.553 314.5,131.1L296.1,113.1C295.765,112.779 295.319,112.6 294.855,112.6C293.868,112.6 293.055,113.413 293.055,114.4C293.055,114.535 293.07,114.669 293.1,114.8L299.6,139.8C299.743,140.414 299.553,141.061 299.1,141.5L281.1,159.8C280.779,160.135 280.6,160.581 280.6,161.045C280.6,162.032 281.413,162.845 282.4,162.845C282.535,162.845 282.669,162.83 282.8,162.8Z" fill="url(#_Linear1)" fillRule="nonzero" stroke="rgb(252,211,77)" strokeWidth="2"/>
+ </g>
+ <g transform="matrix(1.54711,0,0,1.54711,-184.903,-159.875)">
+ <path d="M285.4,193.4L297.4,205.7C297.679,205.992 297.792,206.407 297.7,206.8L293.4,223.4C293.364,223.516 293.346,223.636 293.346,223.757C293.346,224.416 293.887,224.957 294.546,224.957C294.867,224.957 295.175,224.829 295.4,224.6L307.7,212.6C307.992,212.321 308.407,212.208 308.8,212.3L325.4,216.6C325.516,216.636 325.636,216.654 325.757,216.654C326.416,216.654 326.957,216.113 326.957,215.454C326.957,215.133 326.829,214.825 326.6,214.6L314.6,202.3C314.321,202.008 314.208,201.593 314.3,201.2L318.6,184.6C318.636,184.484 318.654,184.364 318.654,184.243C318.654,183.584 318.113,183.043 317.454,183.043C317.133,183.043 316.825,183.171 316.6,183.4L304.3,195.4C304.008,195.679 303.593,195.792 303.2,195.7L286.5,191.4C286.426,191.386 286.35,191.379 286.275,191.379C285.617,191.379 285.075,191.92 285.075,192.579C285.075,192.884 285.191,193.178 285.4,193.4Z" fill="url(#_Linear2)" fillRule="nonzero" stroke="rgb(252,211,77)" strokeWidth="2" />
+ </g>
+ <g transform="matrix(1.54711,0,0,1.54711,-184.903,-159.875)">
+ <path
+ d="M337.3,223.7L362.1,230.7C362.713,230.845 363.207,231.301 363.4,231.9L370.3,256.7C370.551,257.422 371.236,257.908 372,257.908C372.764,257.908 373.449,257.422 373.7,256.7L380.7,231.9C380.845,231.287 381.301,230.793 381.9,230.6L406.7,223.7C407.422,223.449 407.908,222.764 407.908,222C407.908,221.236 407.422,220.551 406.7,220.3L381.9,213.3C381.287,213.155 380.793,212.699 380.6,212.1L373.7,187.3C373.449,186.578 372.764,186.092 372,186.092C371.236,186.092 370.551,186.578 370.3,187.3L363.3,212.1C363.155,212.713 362.699,213.207 362.1,213.4L337.3,220.3C336.578,220.551 336.092,221.236 336.092,222C336.092,222.764 336.578,223.449 337.3,223.7Z"
+ style={{ fill: 'url(#_Linear3)', fillRule: 'nonzero', stroke: 'rgb(252,211,77)', strokeWidth: '2px' }}
+ />
+ </g>
+ <g id="e" transform="matrix(1.54711,0,0,1.54711,62.2641,56.3496)">
+ <path d="M179.7,120.2C127.659,120.475 84.583,77.94 84.2,25.9C84.212,17.9 85.254,9.934 87.3,2.2C39.423,7.175 2.55,47.866 2.3,96C2.683,148.04 45.759,190.575 97.8,190.3C142.3,190.3 179.6,160.3 190.2,119.7C186.713,120.087 183.208,120.287 179.7,120.3"
+ style={{
+ fill: "url(#_Linear4)",
+ fillRule: "nonzero",
+ stroke: "rgb(114,185,213)",
+ strokeWidth: "4.5px",
+ }} />
+ </g>
+ <defs>
+ <linearGradient
+ id="_Linear1"
+ x1="0"
+ y1="0"
+ x2="1"
+ y2="0"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(36,62.4,-62.4,36,294,112.8)">
+ <stop offset="0" style={{stopColor:"rgb(252,217,102)", stopOpacity:1}} />
+ <stop offset="0.5" style={{stopColor:"rgb(252,217,102)", stopOpacity:1}} />
+ <stop offset="1" style={{stopColor:"rgb(252,205,52)", stopOpacity:1}} />
+ </linearGradient>
+ <linearGradient
+ id="_Linear2"
+ x1="0"
+ y1="0"
+ x2="1"
+ y2="0"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(879.534,1517.32,-1517.32,879.534,12661.4,7975.03)"
+ >
+ <stop offset="0" style={{stopColor:"rgb(252,217,102)", stopOpacity:1}} />
+ <stop offset="0.5" style={{stopColor:"rgb(252,217,102)", stopOpacity:1}} />
+ <stop offset="1" style={{stopColor:"rgb(252,205,52)", stopOpacity:1}} />
+ </linearGradient>
+ <linearGradient
+ id="_Linear3"
+ x1="0"
+ y1="0"
+ x2="1"
+ y2="0"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(2255.05,3906.83,-3906.83,2255.05,25924.4,14176)">
+ <stop offset="0" style={{stopColor:"rgb(252,217,102)", stopOpacity:1}} />
+ <stop offset="0.5" style={{stopColor:"rgb(252,217,102)", stopOpacity:1}} />
+ <stop offset="1" style={{stopColor:"rgb(252,205,52)", stopOpacity:1}} />
+ </linearGradient>
+ <linearGradient
+ id="_Linear4"
+ x1="0"
+ y1="0"
+ x2="1"
+ y2="0"
+ gradientUnits="userSpaceOnUse"
+ gradientTransform="matrix(94.6,163.8,-163.8,94.6,38.8,20.8)">
+ <stop offset="0" style={{stopColor:"rgb(134,195,219)", stopOpacity:1}} />
+ <stop offset="0.5" style={{stopColor:"rgb(134,195,219)", stopOpacity:1}} />
+ <stop offset="1" style={{stopColor:"rgb(94,175,207)", stopOpacity:1}} />
+ </linearGradient>
+ </defs>
+ </svg>
+ );
+}
+
+export default SvgNightTemp;
\ No newline at end of file
diff --git a/frontend/src/tempsCollection.js b/frontend/src/tempsCollection.js
index 52c7f66ffb3552c8b04ce18804cf10ed9deb70d1..5ec7d179406a5f677e678decc70d6a6c293b5d88 100644
--- a/frontend/src/tempsCollection.js
+++ b/frontend/src/tempsCollection.js
@@ -33,7 +33,7 @@ const TempsCollection = (props) => {
<div id="outsideTemp" className='temps'>
<p className='title'>Outside</p>
<p className='title'>Temperature</p>
- <p className='temperatures'>{outdoorTemp} °F</p>
+ <p className='temperatures'>{outdoorTemp != null ? outdoorTemp.toFixed(0) + " \u00b0F" : "Loading..."}</p>
</div>
<div id="currentTemp" className='temps'>
<p className='title'>Current</p>
@@ -48,7 +48,7 @@ const TempsCollection = (props) => {
data-tooltip-html="Temperature can affect our state of mind. Based on our research, setting<br /> the temperature between 68 and 72 is optimal for sleep and comfort while<br /> working along side the patterns of our core body temperature.">
<p className='title'>Comfort</p>
<p className='title'>Temperature</p>
- <p className='temperatures'>81 °F</p>
+ <p className='temperatures'>70 °F</p>
</div>
</div>
);