diff --git a/src/lib/components/Swap.svelte b/src/lib/components/Swap.svelte
index 396b35d7..4bb07f8e 100644
--- a/src/lib/components/Swap.svelte
+++ b/src/lib/components/Swap.svelte
@@ -59,27 +59,21 @@
   
   function getPlotOptions(state) {
 
+    // Combine the data into an array of objects to keep them linked
+    const combinedData = rawData?.map(item => ({
+        date: state === 'effectiveDate' ? item['Effective Date'] : item['Expiration Date'],
+        notionalAmount: item['Notional amount-Leg 1'],
+        notionalQuantity: item['Total notional quantity-Leg 1']
+    }));
 
-    let dates = [];
-    let notionalAmount = [];
-    let notionalQuantity = [];
+    // Sort the combined data array based on the date
+    combinedData?.sort((a, b) => new Date(a.date) - new Date(b.date));
+
+    // Separate the sorted data back into individual arrays
+    const dates = combinedData?.map(item => item?.date);
+    const notionalAmount = combinedData?.map(item => item?.notionalAmount);
+    const notionalQuantity = combinedData?.map(item => item?.notionalQuantity);
 
-    // Iterate over the data and extract required information
-    rawData?.forEach(item => {
-        
-    if ( state === 'effectiveDate') {
-        dates?.push(item['Effective Date']);
-    }
-    else {
-        dates?.push(item['Expiration Date']);
-    }
-    notionalAmount?.push(item['Notional amount-Leg 1']);
-    notionalQuantity?.push(item['Total notional quantity-Leg 1']);
-    });
-    
-    dates?.sort((a, b) => {
-        return new Date(a) - new Date(b);
-    });
 
     // Compute the average of item?.traded
     const totalNotionalAmount = notionalAmount?.reduce((acc, item) => acc + item, 0);
diff --git a/src/routes/earnings-calendar/+page.svelte b/src/routes/earnings-calendar/+page.svelte
index 3a528e06..57bcca17 100644
--- a/src/routes/earnings-calendar/+page.svelte
+++ b/src/routes/earnings-calendar/+page.svelte
@@ -335,7 +335,7 @@ $: {
             {#each weekday as day,index}
             
             <div class="w-full {index === selectedWeekday ? '' : 'hidden sm:block'}">
-                    <label on:click={() => toggleDate(index)} class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index === selectedWeekday ? 'bg-[#27272A]' : ''} rounded-lg sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3">
+                    <label on:click={() => toggleDate(index)} class="w-11/12 m-auto sm:w-full cursor-pointer h-16 {index === selectedWeekday ? 'bg-[#141417]' : ''} rounded-lg sm:rounded-none flex bg-[#09090B] border border-gray-600 mb-3">
                       <div class=" flex flex-row justify-center items-center w-full ">
                         <label on:click={() => clickWeekday('previous', index) } class="{previousMax === true && index === 0? 'opacity-20' : ''} sm:hidden ml-auto">
                           <svg class="w-8 h-8 inline-block rotate-180 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8.025 22L6.25 20.225L14.475 12L6.25 3.775L8.025 2l10 10l-10 10Z"/></svg>
diff --git a/src/routes/etf/[tickerID]/dividends/+page.svelte b/src/routes/etf/[tickerID]/dividends/+page.svelte
index 07d65f1c..ffa38c6a 100644
--- a/src/routes/etf/[tickerID]/dividends/+page.svelte
+++ b/src/routes/etf/[tickerID]/dividends/+page.svelte
@@ -30,16 +30,19 @@
   
   async function plotDividend() {
   
-    let dates = [];
-    let dividendList = [];
-    // Iterate over the data and extract required information
-    rawData?.history?.forEach(item => {
-  
-    dates?.push(item?.paymentDate);
-    dividendList?.push(item?.adjDividend);
-    });
-  
-    dates?.sort((a,b) => new Date(a) - new Date(b));
+    // Combine the data into an array of objects to keep them linked
+    const combinedData = rawData?.history?.map(item => ({
+        date: item?.paymentDate,
+        dividend: item?.adjDividend
+    }));
+
+    // Sort the combined data array based on the date
+    combinedData.sort((a, b) => new Date(a.date) - new Date(b.date));
+
+    // Separate the sorted data back into individual arrays
+    const dates = combinedData.map(item => item.date);
+    const dividendList = combinedData.map(item => item.dividend);
+
   
     const options = {
        tooltip: {
diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte
index 4050e4c8..d3ef1826 100644
--- a/src/routes/stocks/[tickerID]/dividends/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte
@@ -30,16 +30,19 @@ let dividendGrowth = rawData?.dividendGrowth;
 
 async function plotDividend() {
 
-  let dates = [];
-  let dividendList = [];
-  // Iterate over the data and extract required information
-  rawData?.history?.forEach(item => {
+  // Combine the data into an array of objects to keep them linked
+  const combinedData = rawData?.history?.map(item => ({
+      date: item?.paymentDate,
+      dividend: item?.adjDividend
+  }));
 
-  dates?.push(item?.paymentDate);
-  dividendList?.push(item?.adjDividend);
-  });
+  // Sort the combined data array based on the date
+  combinedData.sort((a, b) => new Date(a.date) - new Date(b.date));
+
+  // Separate the sorted data back into individual arrays
+  const dates = combinedData.map(item => item.date);
+  const dividendList = combinedData.map(item => item.dividend);
 
-  dates?.sort((a,b) => new Date(a) - new Date(b));
 
   const options = {
      tooltip: {