diff --git a/frontend/app/(tabs)/History.tsx b/frontend/app/(tabs)/History.tsx
index 3797074..7c531c4 100644
--- a/frontend/app/(tabs)/History.tsx
+++ b/frontend/app/(tabs)/History.tsx
@@ -19,10 +19,18 @@ export default function History() {
     { id: 11, name: "Spotify", date: "1/15/2025", amount: 10 },
     { id: 12, name: "Spotify", date: "1/15/2025", amount: 10 },
   ];
+
+  const Budget = 3500;
+  const current = 2300;
+
   return (
     <View style={styles.homeContainer}>
       <Text style={styles.Title}>History</Text>
-      <BudgetChart length={150} Current={2300} Budget={3500} />
+      <BudgetChart
+        length={(current / Budget) * 100}
+        Current={current}
+        Budget={Budget}
+      />
       <FullTransactionHistory list={AllTransactions} />
     </View>
   );
diff --git a/frontend/components/HistoryBudget/BudgetChart.tsx b/frontend/components/HistoryBudget/BudgetChart.tsx
index 46f148e..18aa057 100644
--- a/frontend/components/HistoryBudget/BudgetChart.tsx
+++ b/frontend/components/HistoryBudget/BudgetChart.tsx
@@ -7,7 +7,7 @@ export default function BudgetChart(props: any) {
       <View style={[styles.chartBackground, styles.shadow]}>
         <View
           style={{
-            width: props.length,
+            width: `${props.length}%`,
             height: 40,
             backgroundColor: "#8d82be",
             borderRadius: 10,