diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
index 2db27cbe119bcefffe61fbaaba561a6c3f2c5c41..0dc58ae175056f2f0c61d4e26f4eedc8d6ffecbc 100644
--- a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
+++ b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
@@ -3,6 +3,7 @@ import React, { type ComponentProps } from 'react';
 
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgArrowThinRight } from '../../icons/v1';
+import { useResponsive } from '../../ResponsiveProvider';
 import { type CSSProperties } from '../../style';
 import { View } from '../common/View';
 import { CellValue } from '../spreadsheet/CellValue';
@@ -33,6 +34,9 @@ export function BalanceWithCarryover({
   const goalValue = useSheetValue(goal);
   const budgetedValue = useSheetValue(budgeted);
   const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
+
+  const { isNarrowWidth } = useResponsive();
+
   return (
     <>
       <CellValue
@@ -60,7 +64,7 @@ export function BalanceWithCarryover({
             alignSelf: 'center',
             marginLeft: 2,
             position: 'absolute',
-            right: -8,
+            right: isNarrowWidth ? '-8px' : '-4px',
             top: 0,
             bottom: 0,
             justifyContent: 'center',
diff --git a/upcoming-release-notes/2774.md b/upcoming-release-notes/2774.md
new file mode 100644
index 0000000000000000000000000000000000000000..1b83cd958a04ecdb395d2b26c2ed4eaa4b133dc5
--- /dev/null
+++ b/upcoming-release-notes/2774.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [Tigatok]
+---
+
+Move the rollover arrow into view.