diff --git a/frontend/src/App.js b/frontend/src/App.js
index 7fec7f5e9d2fc8ec08c5a897201a642686e50998..76b30f6151bb6aa8790a6e2882909152410e03e2 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -20,6 +20,9 @@ function App() {
   const [theme, setTheme] = useState(false);
   const [rotateValues, setRotateValues] = useState({ rotateX: 0, rotateY: 0 });
 
+  const [previousMonthlyCost, setPreviousMonthlyCost] = useState(0);
+  const [currentMonthlyCost, setCurrentMonthlyCost] = useState(0);
+
   const handleDarkModeToggle = () => {
     setTheme(prevState => !prevState)
   }
@@ -98,8 +101,8 @@ function App() {
               <DesiredTemp />
             </Slide>
             <Slide index={1}>
-              <ChartComponent />
-              <CostsCollection />
+              <ChartComponent setPreviousMonthlyCost={setPreviousMonthlyCost} setCurrentMonthlyCost={setCurrentMonthlyCost} />
+              <CostsCollection previousMonthlyCost={previousMonthlyCost} currentMonthlyCost={currentMonthlyCost} />
             </Slide>
             <Slide index={2}>
               <ForecastCollection />
diff --git a/frontend/src/DesiredTemp.js b/frontend/src/DesiredTemp.js
index e653b349a99c975ec6843fc4aab846bd933dba5e..558ef85f5ce1dfba0855f2afe1256cf965962131 100644
--- a/frontend/src/DesiredTemp.js
+++ b/frontend/src/DesiredTemp.js
@@ -20,7 +20,7 @@ const DesiredTemp = (props) => {
             <div id="currentTemp" className='temps'>
             <p className='title'>Desired</p>
             <p className='title'>Temperature</p>
-            <p className='temperatures'>{desiredTemp} &deg;F</p>
+            <p className='temperatures' >{desiredTemp} &deg;F</p>
             </div>
             <IncreaseTempButton handleIncreaseTempClick={handleIncreaseTempClick}/>
         </div>
diff --git a/frontend/src/chartComponent.js b/frontend/src/chartComponent.js
index 7495e32166a96dd5a8a8c7a07b006e4b2537f91b..71fa1ab4951b80fa93c24e5a4ad209c572648982 100644
--- a/frontend/src/chartComponent.js
+++ b/frontend/src/chartComponent.js
@@ -49,6 +49,8 @@ const ChartComponent = (props) => {
       
       const chartData = await response.json();
       setChartData(chartData);
+      props.setPreviousMonthlyCost((chartData[chartData.length - 2][2]).toFixed(2))
+      props.setCurrentMonthlyCost((chartData[chartData.length - 1][2]).toFixed(2))
     } catch (error) {
       console.error('There was a problem with the fetch operation:', error);
     }
@@ -63,7 +65,7 @@ const ChartComponent = (props) => {
     datasets: [
       {
         label: 'Power Usage (MW)',
-        data: chartData ? chartData.map(data => (data[1] / 1000)) : [],
+        data: chartData ? chartData.map(data => (data[1] / 100000)) : [],
         borderColor: 'red',
         backgroundColor: 'red',
       },
@@ -81,7 +83,6 @@ const ChartComponent = (props) => {
       },
     ],
   };
-
   return (
     <div id="chart">
       {chartData && <Line options={options} data={data} />}
diff --git a/frontend/src/costsCollection.js b/frontend/src/costsCollection.js
index 460505a528f270b8abf895ea837cb854f4e28799..623387d905e7457b5dd00b687e929781b70f9818 100644
--- a/frontend/src/costsCollection.js
+++ b/frontend/src/costsCollection.js
@@ -8,20 +8,20 @@ const CostsCollection = (props) => {
         <p className='title'>Previous</p>
         <p className='title'>Monthly</p>
         <p className='title'>Cost</p>
-        <p className='amounts'>81.00</p>
+        <p className='amounts' style={{letterSpacing: '3px'}}>{props.previousMonthlyCost}</p>
         </div>
         <div id="comfortTemp" className='costs'>
         <p className='title'>Current</p>
         <p className='title'>Monthly</p>
         <p className='title'>Cost</p>
-        <p className='amounts'>81.00</p>
+        <p className='amounts' style={{letterSpacing: '3px'}}>{props.currentMonthlyCost}</p>
         </div>
-        <div id="outsideTemp" className='costs'>
+        {/* <div id="outsideTemp" className='costs'>
         <p className='title'>Predicted</p>
         <p className='title'>Monthly</p>
         <p className='title'>Cost</p>
         <p className='amounts'>81.00</p>
-        </div>
+        </div> */}
         {/* <div id="outsideTemp" className='costs'>
         <p className='title'>Total</p>
         <p className='title'>Monthly</p>