diff --git a/frontend/src/forecastCollection.js b/frontend/src/forecastCollection.js
index 4ddf856a6d74f1c1a3bb96d595b86125ee3cf48f..5ce2522340b52afb15637fbea0e5e4ee3b227dd4 100644
--- a/frontend/src/forecastCollection.js
+++ b/frontend/src/forecastCollection.js
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { useState, useEffect} from 'react';
+import SvgNightTemp from './svgNightTemp';
 
 const ForecastCollection = (props) => {
   const [forecast, setForecast] = useState(null);
@@ -35,12 +36,15 @@ const ForecastCollection = (props) => {
             <p>{day.weather[0].main}</p>
             {/* <img src={`${process.env.PUBLIC_URL}/weatherIconsFill/time-morning.svg`} alt="weather icon" />
             <p>{day.temp.morn.toFixed(0)}&deg;F</p> */}
-            <img src={`${process.env.PUBLIC_URL}/weatherIconsFill/time-afternoon.svg`} alt="weather icon" />
+            {/* <img src={`${process.env.PUBLIC_URL}/weatherIconsFill/time-afternoon.svg`} alt="weather icon" /> */}
             {/* <p>{day.temp.day.toFixed(0)}&deg;F</p>
             <img src={`${process.env.PUBLIC_URL}/weatherIconsFill/time-evening.svg`} alt="weather icon" /> */}
-            <p>{day.temp.eve.toFixed(0)}&deg;F</p>
-            <img src={`${process.env.PUBLIC_URL}/weatherIconsFill/time-night.svg`} alt="weather icon" />
-            <p>{day.temp.night.toFixed(0)}&deg;F</p>
+            {/* <p>{day.temp.eve.toFixed(0)}&deg;F</p> */}
+            {/* <img src={`${process.env.PUBLIC_URL}/weatherIconsFill/time-night-2.svg`} alt="weather icon" />
+            <p>{day.temp.night.toFixed(0)}&deg;F</p> */}
+            <SvgNightTemp nightTemp={day.temp.night.toFixed(0)}/>
+            <SvgNightTemp nightTemp={day.temp.night.toFixed(0)}/>
+            
           </div>
         ))}
       </div>