diff --git a/apps/web/src/components/LoadingRing.vue b/apps/web/src/components/LoadingRing.vue
deleted file mode 100644
index 5b5131e5a..000000000
--- a/apps/web/src/components/LoadingRing.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-// 
-</script>
-
-<template>
-  <div class="ring">
-    <!-- <slot class="" /> -->
-    <span />
-  </div>
-</template>
-
-<style scoped>
-</style>
\ No newline at end of file
diff --git a/apps/web/src/components/charts/LineChartJS.vue b/apps/web/src/components/charts/LineChartJS.vue
index f8e4b8b5f..ae2bf3f93 100644
--- a/apps/web/src/components/charts/LineChartJS.vue
+++ b/apps/web/src/components/charts/LineChartJS.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
-import Chart, { ChartItem } from 'chart.js/auto'
+import { ref, onMounted, watch } from 'vue'
+import Chart, { ChartItem, ChartData } from 'chart.js/auto'
 
 // eslint-disable-next-line no-undef
 const props = defineProps({
@@ -19,53 +19,35 @@ const props = defineProps({
     yGridLines: {
         type: Boolean,
         default: false
+    }, 
+    data: {
+        type: Object,
+        required: true
+    },
+    gradient: {
+        type: Boolean,
+        default: false
     }
 })
 
-const chart = ref(null as any)
+const hexToRGB = (hex: string) => {
+    let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : {r: 0, g: 0, b: 0}
+}
+let ctx: any
+let line_chart: Chart<any, any[], unknown>
 onMounted(() => {
-    // TD: make this gradient dynamic with the data and it's colors
-    var ctx = document.getElementById(props.id)?.getContext('2d')
-    var gradient = ctx? ctx.createLinearGradient(0, 0, 0, 400): 'black'
-        gradient.addColorStop(0, 'rgba(86, 138, 217,0.28)')   
-        gradient.addColorStop(1, 'rgba(86, 138, 217,0)') 
-    chart.value = new Chart(document.getElementById(props.id) as ChartItem , {
+    ctx = document.getElementById(props.id)?.getContext('2d')
+    line_chart = new Chart(ctx, {
         type : 'line',
-		data : {
-			labels : [ 'Jan 22', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
-             'Sep', 'Oct', 'Nov', 'Dec', 'Jan 23', 'Feb', 'Mar' ],
-			datasets : [
-                {
-                    data : Array.from({length: 15}, () => Math.floor(Math.random() * (250 - 200 + 1) + 200)),
-                    label : 'Primary Account',
-                    borderColor : '#2F80ED',
-                    fill: true,
-                    backgroundColor: gradient,
-                    pointRadius: 0,
-                    tension: 0.1
-                },
-                {
-                    data : Array.from({length: 15}, () => Math.floor(Math.random() * (150 - 100 + 1) + 100)),
-                    label : '-',
-                    borderColor : '#A8C8F3',
-                    fill: false,
-                    // backgroundColor: gradient,
-                    pointRadius: 0,
-                    tension: 0.1
-                },
-                {
-                    data : Array.from({length: 15}, () => Math.floor(Math.random() * (50 - 0 + 1) + 50)),
-                    label : '-',
-                    borderColor : '#53389E',
-                    fill: false,
-                    // backgroundColor: gradient,
-                    pointRadius: 0,
-                    tension: 0.1
-                }
-            ]
-		},
+		data : props.data as ChartData<any>,
 		options : {
-            responsive: false,
+            responsive: true,
             maintainAspectRatio: false,
             plugins: {
                 legend: {
@@ -99,24 +81,32 @@ onMounted(() => {
                     },
                 }
             }
-		}
+        }
     })
+})
+
+watch(props, (newVal, oldVal)=> {
+    if(line_chart.data !== props.data){
+        line_chart.data = props.data
 
-    const line_chart_container_el = document.getElementById('line_chart_container_' + props.id)
-    let WIDTH = 0
-    let HEIGHT =  0
+        if(props.gradient){
+            
+            for (let i = 0; i < line_chart.data.datasets.length; i++) {
+                if(line_chart.data.datasets[i].backgroundColor){
+                    let gradient = ctx? ctx.createLinearGradient(0, 0, 0, 400): 'black'
+                    let rgb = hexToRGB(line_chart.data.datasets[i].backgroundColor)
+                    console.log(rgb)
+                    gradient.addColorStop(0, `rgba(${rgb?.r},${rgb?.g},${rgb?.b}, 0.28)`) 
+                    gradient.addColorStop(1, 'rgba(0, 0, 0,0)') 
 
-     // watches for size changes... 
-    const outputsize = () => {
-        if(line_chart_container_el){
-            WIDTH = line_chart_container_el.offsetWidth
-            HEIGHT = line_chart_container_el.offsetHeight
+                    line_chart.data.datasets[i].backgroundColor = gradient
+                }
+            }
         }
-        chart.value.resize(WIDTH -20 , HEIGHT)
-    }
-    if(line_chart_container_el){
-        new ResizeObserver(outputsize).observe(line_chart_container_el)   
+
+        line_chart.update()
     }
+    
 })
 </script>
 
diff --git a/apps/web/src/layouts/default-layout.vue b/apps/web/src/layouts/default-layout.vue
index b23d2d3b4..fcd20d121 100644
--- a/apps/web/src/layouts/default-layout.vue
+++ b/apps/web/src/layouts/default-layout.vue
@@ -2,13 +2,12 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import Carousel from '@/components/Carousel.vue'
 import Slide from '@/components/Slide.vue'
-import LoadingRing from '@/components/LoadingRing.vue'
 
 import useWallet from '@/composables/wallet'
 
 const authFlowCardNumber = ref(1)
-const selectedAddress = ref(null as string | null)
 const selectedProivder = ref(null as null | string)
+const termsCheckbox = ref(true)
 
 const  {
   activeWallets,
@@ -19,7 +18,6 @@ const  {
 
 const show_setting_modal = ref(false)
 const openWalletConnect = ref(false)
-const openSelectAddressInput = ref(false)
 
 const handleOutsideClick = (event: any) => {
   const setting_modal = document.getElementById('setting_modal')
@@ -41,6 +39,7 @@ const handleOutsideClick = (event: any) => {
   if(connect_wallet_container && connect_wallet_card){
     if(openWalletConnect.value && connect_wallet_container.contains(event.target) && !connect_wallet_card.contains(event.target)) {
       openWalletConnect.value = false
+      authFlowCardNumber.value = 1
     }
   }
 }
@@ -57,11 +56,6 @@ const convertString = (inputString: string) => {
   return start + middle + end
 }
 
-const toggleOpenSelectAddressInput = () => {
-  openSelectAddressInput.value = !openSelectAddressInput.value
-}
-
-
 onMounted(() => {
   window.addEventListener('click', handleOutsideClick)
 })
@@ -77,17 +71,7 @@ onUnmounted(() =>{
   <div class="min-w-[360px]">
     <div>
       <div
-        class="
-      px-[60px]
-      pt-[17px]
-      pb-[19px]
-      flex
-      flex-wrap
-      gap-[20px]
-      justify-between
-      items-center
-      bg-black
-      relative"
+        class=" px-[60px] pt-[17px] pb-[19px] flex flex-wrap gap-[20px] justify-between items-center bg-black relative"
         :class="openWalletConnect? 'pr-[75px]' : ''"
       >
         <img
@@ -276,6 +260,14 @@ onUnmounted(() =>{
                 </h6>
               </div>
               <div v-else>
+                <div class="my-[20px] nav_items">
+                  <input
+                    v-model="termsCheckbox"
+                    type="checkbox"
+                    class=""
+                  > By connecting my address, I certify that I have read and accept the updated 
+                  <span class="text-primary"> Terms of Use </span> and <span class="text-primary">Privacy Notice</span>.
+                </div> 
                 <button
                   v-for="act in userAddresses"
                   :key="act.address"
diff --git a/apps/web/src/pages/overview/components/BreakdownChart.vue b/apps/web/src/pages/overview/components/BreakdownChart.vue
index da69d8cbf..145762fd5 100644
--- a/apps/web/src/pages/overview/components/BreakdownChart.vue
+++ b/apps/web/src/pages/overview/components/BreakdownChart.vue
@@ -1,12 +1,109 @@
 <script lang="ts" setup>
 import LineChartJS from '@/components/charts/LineChartJS.vue'
-import { onMounted } from 'vue'
+import { onMounted, ref, watch} from 'vue'
+
+const chardId = ref('cross_provider_chart')
+const selectedTimeframe = ref('1 month')
+
+const data = ref({} as any)
+
+const totalStaked = ref({
+  usd: '$150',
+  exchange: '0.00054 ETH'
+})
+
+const stakingRewards = ref({
+  usd: '$17.25',
+  exchange: '0.004 ETH'
+})
+
+const setMockData = () => {
+  let labels  = [] as string[]
+  let today = new Date()
+  let daysInCurrenMonth = new Date(today.getFullYear(), today.getMonth()+1, 0).getDate()
+  let monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+  let monthDayIndex: number
+  switch (selectedTimeframe.value) {
+    
+    case '1 month':
+    monthDayIndex = 0
+      labels = Array.from({length: daysInCurrenMonth - (daysInCurrenMonth - today.getDate()) }, () => {
+        monthDayIndex++
+        return today.getMonth() + '/' + monthDayIndex
+      })
+      break
+    case '6 months':
+      monthDayIndex = 6
+      labels = Array.from({length: 6}, () => {
+        monthDayIndex--
+        let month = new Date(today.getFullYear(), today.getMonth() - monthDayIndex, 1)
+        return monthNames[month.getMonth()]
+      })
+      break
+    case '12 months':
+      monthDayIndex = 12
+      labels = Array.from({length: 12}, () => {
+        monthDayIndex--
+        let month = new Date(today.getFullYear(), today.getMonth() - monthDayIndex, 1)
+        return monthNames[month.getMonth()] + ' ' + month.getFullYear().toLocaleString()[3]+ month.getFullYear().toLocaleString()[4]
+      })
+      break
+    case 'historical':
+      // Right now historical is just set to be the last 12 months due to me not knowing how it will look
+      monthDayIndex = 12
+      labels = Array.from({length: 12}, () => {
+        monthDayIndex--
+        let month = new Date(today.getFullYear(), today.getMonth() - monthDayIndex, 1)
+        return monthNames[month.getMonth()] + ' ' + month.getFullYear().toLocaleString()[3]+ month.getFullYear().toLocaleString()[4]
+      })
+      break
+    
+    default:
+      break
+  }
+
+  data.value = {
+    labels : labels,
+    datasets : [
+        {
+            data : Array.from({length: labels.length}, () => Math.floor(Math.random() * (250 - 200 + 1) + 200)),
+            label : 'Primary Account',
+            borderColor : '#2F80ED',
+            fill: true,
+            backgroundColor: '#2F80ED',
+            pointRadius: 0,
+            tension: 0.1
+        },
+        {
+            data : Array.from({length: labels.length}, () => Math.floor(Math.random() * (150 - 100 + 1) + 100)),
+            label : 'Secondary Account',
+            borderColor : '#A8C8F3',
+            fill: false,
+            // backgroundColor: null,
+            pointRadius: 0,
+            tension: 0.1
+        },
+        {
+            data : Array.from({length: labels.length}, () => Math.floor(Math.random() * (50 - 0 + 1) + 50)),
+            label : '3rd Account',
+            borderColor : '#53389E',
+            fill: false,
+            // backgroundColor: null,
+            pointRadius: 0,
+            tension: 0.1
+        }
+    ]
+  }
+}
 
 onMounted(() => {
-    // Needed for new Icon Library
-    // eslint-disable-next-line no-undef
-    feather.replace()
+  setMockData()
 })
+
+watch(selectedTimeframe, () => {
+  setMockData()
+})
+
 </script>
 
 <template>
@@ -18,10 +115,10 @@ onMounted(() => {
         </h6>
         <div class="flex items-center gap-[12px]">
           <h5 class="blance_amount">
-            $150
+            {{ totalStaked.usd }}
           </h5>
           <span class="blance_exchange">
-            0.00054 ETH
+            {{ totalStaked.exchange }}
           </span>
         </div>
       </div>
@@ -31,10 +128,10 @@ onMounted(() => {
         </h6>
         <div class="flex items-center gap-[12px]">
           <h5 class="blance_amount">
-            $17.25
+            {{ stakingRewards.usd }}
           </h5>
           <span class="blance_exchange">
-            0.004 ETH
+            {{ stakingRewards.exchange }}
           </span>
         </div>
       </div>
@@ -45,25 +142,48 @@ onMounted(() => {
           Ethereum Balance
         </h6>
         <div class="flex items-center gap-[22px]">
-          <div class="flex gap-[10px] items-center">
-            <div class="w-[9px] h-[9px] bg-[#2F80ED] rounded-[999px]" />
+          <div
+            v-for="item in data.datasets"
+            :key="item"
+            class="flex gap-[10px] items-center"
+          >
+            <div
+              class="w-[9px] h-[9px] rounded-[999px]"
+              :style="`background: ${item.borderColor};`"
+            />
             <span class="legent_label">
-              Primary Account
+              {{ item.label }} 
             </span>
           </div>
         </div>
       </div>
       <div class="border border-[#D0D5DD] rounded-[8px] overflow-hidden">
-        <button class="timeframe_button rounded-l-[]">
+        <button
+          class="timeframe_button"
+          :class="selectedTimeframe === '1 month'? 'bg-[#F3F3F3]' : ''"
+          @click="selectedTimeframe = '1 month'"
+        >
           1 month
         </button>
-        <button class="timeframe_button border-x border-x-[#D0D5DD] bg-[#F3F3F3]">
+        <button
+          class="timeframe_button border-x border-x-[#D0D5DD]"
+          :class="selectedTimeframe === '6 months'? 'bg-[#F3F3F3]' : ''"
+          @click="selectedTimeframe = '6 months'"
+        >
           6 months
         </button>
-        <button class="timeframe_button border-r border-r-[#D0D5DD]">
+        <button
+          class="timeframe_button border-r border-r-[#D0D5DD]"
+          :class="selectedTimeframe === '12 months'? 'bg-[#F3F3F3]' : ''"
+          @click="selectedTimeframe = '12 months'"
+        >
           12 months
         </button>
-        <button class="timeframe_button">
+        <button
+          class="timeframe_button"
+          :class="selectedTimeframe === 'historical'? 'bg-[#F3F3F3]' : ''"
+          @click="selectedTimeframe = 'historical'"
+        >
           historical
         </button>
       </div>
@@ -78,10 +198,12 @@ onMounted(() => {
         class="w-full h-[240px]"
       >
         <LineChartJS
-          :id="'cross_provider_chart'"
+          :id="chardId"
           :legend="false"
           :x-grid-lines="false"
           :y-grid-lines="true"
+          :data="data"
+          :gradient="true"
         />
       </div>
     </div>