diff --git a/src/App.vue b/src/App.vue
index 127809b664616bd464a75ac48697b0b5749ae493..4825920658b3727061ec423d49592ff3221539c4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,6 +11,18 @@ export default {
     MultiLineChart,
     MultiAxisChart
   },
+  methods: {
+    getPastSevenDays() {
+      const dates = [];
+      for (let i = 6; i >= 0; i--) {
+        const date = new Date();
+        date.setDate(date.getDate() - i);
+        const formattedDate = `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1).toString().padStart(2, '0')}`;
+        dates.push(formattedDate);
+      }
+      return dates;
+    }
+  },
   data() {
     return {
       npkData: {
@@ -39,8 +51,8 @@ export default {
       </div>
     </div>
     <div class="bottom-section">
-      <MultiLineChart :chart-data="npkData" />
-      <MultiAxisChart :chart-data="thmData" />
+      <MultiLineChart :chart-data="npkData" :x-axis-data=this.getPastSevenDays() />
+      <MultiAxisChart :chart-data="thmData" :x-axis-data=this.getPastSevenDays() />
     </div>
   </div>
 </template>
@@ -55,7 +67,6 @@ export default {
 .top-section {
   display: flex;
   flex: 1;
-  /* position: relative; */
 }
 
 .logo-container {
diff --git a/src/components/MultiAxisChart.vue b/src/components/MultiAxisChart.vue
index cb9964eba2a6057e97894645fa2e7aefd9f7006e..9a03aef715faf6286662b18fc540e9d95c72d60e 100644
--- a/src/components/MultiAxisChart.vue
+++ b/src/components/MultiAxisChart.vue
@@ -14,13 +14,17 @@ export default {
             type: Object,
             required: true
         },
+        xAxisData: {
+            type: Array,
+            required: true
+        },
     },
     mounted() {
         const ctx = this.$refs.multiLineChart.getContext('2d');
         new Chart(ctx, {
             type: 'line',
             data: {
-                labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6', 'Day 7'],
+                labels: this.xAxisData,
                 datasets: [
                     {
                         label: 'Temperature',
diff --git a/src/components/MultiLineChart.vue b/src/components/MultiLineChart.vue
index b36c45d590b48ef03836a773d0ff23ad23457f51..ab1a19cd2f2619b0b743b33a11c9fefc74d3b5ea 100644
--- a/src/components/MultiLineChart.vue
+++ b/src/components/MultiLineChart.vue
@@ -14,13 +14,17 @@ export default {
             type: Object,
             required: true
         },
+        xAxisData: {
+            type: Array,
+            required: true
+        },
     },
     mounted() {
         const ctx = this.$refs.multiLineChart.getContext('2d');
         new Chart(ctx, {
             type: 'line',
             data: {
-                labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6', 'Day 7'],
+                labels: this.xAxisData,
                 datasets: [
                     {
                         label: 'Nitrogen',