diff --git a/src/components/LayoutComponent/LandingPage.tsx b/src/components/LayoutComponent/LandingPage.tsx
index 389853f8..f17ff1d1 100644
--- a/src/components/LayoutComponent/LandingPage.tsx
+++ b/src/components/LayoutComponent/LandingPage.tsx
@@ -1,7 +1,7 @@
 import LayoutComponent from './LayoutComponent'
 import './LandingPage.css'
 import QuickStartBar from '../QuickStartBar/QuickStartBar'
-import StatisticBox from '../StaticBox'
+import DeviceCPULoad from '../deviceCPULoad'
 
 function LandingPage() {
   return (
@@ -96,12 +96,7 @@ function Content() {
           Discover Nodes
         </button>
       </article>
-      <StatisticBox
-        memory="45"
-        stateIcon="https://placehold.co/16x16"
-        stateText="Good performance"
-        title="Title of the box"
-      />
+      <DeviceCPULoad />
     </div>
   )
 }
diff --git a/src/components/StandardLineChart.tsx b/src/components/StandardLineChart.tsx
index 11ea8fad..79bc221d 100644
--- a/src/components/StandardLineChart.tsx
+++ b/src/components/StandardLineChart.tsx
@@ -1,67 +1,23 @@
 import { ResponsiveLine } from '@nivo/line'
+interface DataPoint {
+  x: string
+  y: number
+}
 
-const MyResponsiveLine = () => {
-  const data = [
-    {
-      id: 'japan',
-      color: '#8DC6BC',
-      data: [
-        {
-          x: '1',
-          y: 15,
-        },
-        {
-          x: '2',
-          y: 12,
-        },
-        {
-          x: '3',
-          y: 43,
-        },
-        {
-          x: '4',
-          y: 20,
-        },
-        {
-          x: '5',
-          y: 60,
-        },
-        {
-          x: '6',
-          y: 5,
-        },
-        {
-          x: '7',
-          y: 15,
-        },
-        {
-          x: '8',
-          y: 12,
-        },
-        {
-          x: '9',
-          y: 43,
-        },
-        {
-          x: '10',
-          y: 20,
-        },
-        {
-          x: '11',
-          y: 60,
-        },
-        {
-          x: '12',
-          y: 5,
-        },
-      ],
-    },
-  ]
+interface Serie {
+  id: string
+  data: DataPoint[]
+}
+
+interface MyResponsiveLineProps {
+  data: Serie[]
+}
+const MyResponsiveLine = ({ data }: MyResponsiveLineProps) => {
   return (
     <ResponsiveLine
       data={data}
       margin={{ top: 0, right: 0, bottom: 0, left: -75 }}
-      xScale={{ type: 'linear', min: 0, max: 12 }}
+      xScale={{ type: 'linear', min: 1, max: 12 }}
       yScale={{
         type: 'linear',
         min: 'auto',
diff --git a/src/components/StaticBox.tsx b/src/components/StaticBox.tsx
deleted file mode 100644
index 5b25e7c6..00000000
--- a/src/components/StaticBox.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { ReactNode, CSSProperties } from 'react'
-
-import MyResponsiveLine from './StandardLineChart'
-import ShadowBox from './ShadowBox'
-import IconText from './IconText'
-import { Paragraph, Separator, Text, XStack, YStack } from 'tamagui'
-
-interface StatisticBoxProps {
-  title: string
-  memory: string
-  stateIcon: string
-  stateText: string
-  additionalStateText?: string
-  children?: ReactNode
-  svgDataURL?: string
-  imageUrl?: string
-  style?: CSSProperties
-}
-
-const StatisticBox: React.FC<StatisticBoxProps> = ({
-  title,
-  memory,
-  stateIcon,
-  stateText,
-  additionalStateText,
-  children,
-  ...props
-}) => {
-  return (
-    <ShadowBox {...props} style={{ maxWidth: '284px', maxHeight: '136px' }}>
-      <YStack>
-        <XStack
-          justifyContent="space-between"
-          style={{
-            padding: '8px 16px',
-            position: 'relative', // Make XStack a positioning context
-          }}
-        >
-          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
-            <MyResponsiveLine />
-          </div>
-
-          <YStack space={'$3'}>
-            <Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
-              {title}
-            </Paragraph>
-            <Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
-              {memory}
-            </Paragraph>
-          </YStack>
-          {children}
-        </XStack>
-        <Separator borderColor={'#e3e3e3'} />
-        <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
-          <IconText icon={stateIcon}>{stateText}</IconText>
-          {additionalStateText && <Text color={'#E95460'}>{additionalStateText}</Text>}
-        </XStack>
-      </YStack>
-    </ShadowBox>
-  )
-}
-
-export default StatisticBox
diff --git a/src/components/deviceCPULoad.tsx b/src/components/deviceCPULoad.tsx
new file mode 100644
index 00000000..cbd03b40
--- /dev/null
+++ b/src/components/deviceCPULoad.tsx
@@ -0,0 +1,109 @@
+import { useState, useEffect } from 'react'
+
+import MyResponsiveLine from './StandardLineChart'
+import ShadowBox from './ShadowBox'
+import IconText from './IconText'
+import { Paragraph, Separator, XStack, YStack } from 'tamagui'
+
+const data = [
+  {
+    id: 'cpu',
+    color: '#8DC6BC',
+    data: [
+      {
+        x: '1',
+        y: 15,
+      },
+      {
+        x: '2',
+        y: 12,
+      },
+      {
+        x: '3',
+        y: 43,
+      },
+      {
+        x: '4',
+        y: 20,
+      },
+      {
+        x: '5',
+        y: 60,
+      },
+      {
+        x: '6',
+        y: 5,
+      },
+      {
+        x: '7',
+        y: 15,
+      },
+      {
+        x: '8',
+        y: 12,
+      },
+      {
+        x: '9',
+        y: 43,
+      },
+      {
+        x: '10',
+        y: 20,
+      },
+      {
+        x: '11',
+        y: 60,
+      },
+      {
+        x: '12',
+        y: 5,
+      },
+    ],
+  },
+]
+const DeviceCPULoad = () => {
+  const [message, setMessage] = useState('')
+  const currentLoad = { y: 9 }
+
+  useEffect(() => {
+    currentLoad.y > 80 ? setMessage('Good') : setMessage('Poor')
+  }, [currentLoad])
+
+  console.log(currentLoad)
+  return (
+    <ShadowBox style={{ maxWidth: '284px', maxHeight: '136px' }}>
+      <YStack>
+        <XStack
+          justifyContent="space-between"
+          style={{
+            padding: '8px 16px',
+            position: 'relative', // Make XStack a positioning context
+          }}
+        >
+          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>
+            <MyResponsiveLine data={data} />
+          </div>
+
+          <YStack space={'$3'}>
+            <Paragraph color={'#09101C'} size={'$6'} fontWeight={'600'}>
+              CPU
+            </Paragraph>
+            <Paragraph color={'#09101C'} size={'$8'} fontWeight={'700'}>
+              {currentLoad.y} GB
+            </Paragraph>
+          </YStack>
+          {message}
+        </XStack>
+        <Separator borderColor={'#e3e3e3'} />
+        <XStack space={'$4'} style={{ padding: '10px 16px 10px 16px' }}>
+          <IconText icon={message === 'Good' ? '/icons/check-circle.png' : '/icons/alert.png'}>
+            {'Good'}
+          </IconText>
+          {/*THIS IS USED FOR ADDITIONAL TEXT <Text color={'#E95460'}>{'GOod'}</Text>  */}
+        </XStack>
+      </YStack>
+    </ShadowBox>
+  )
+}
+
+export default DeviceCPULoad