diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css
index fff15162..94aefa97 100644
--- a/src/components/NavBar/NavBar.css
+++ b/src/components/NavBar/NavBar.css
@@ -15,6 +15,12 @@
   color: var(--lightbgcolor);
 }
 
+.btn-go-button:disabled {
+  background-color: var(--lightbgcolor);
+  border: 1px solid var(--comment);
+  color: var(--comment);
+}
+
 .btn-outline-danger {
   background-color: var(--lightbgcolor);
   border: 1px solid var(--comment);
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
index 6b5bc65a..8e7a0eee 100644
--- a/src/components/NavBar/NavBar.tsx
+++ b/src/components/NavBar/NavBar.tsx
@@ -49,7 +49,8 @@ export function NavBar() {
   const [theme, setTheme] = useState("light");
   const [invalidName, setInvalidName] = useState(false);
 
-  const { select, goBack, goForward, goHome } = useMove();
+  const { select, goBack, canGoBack, goForward, canGoForward, goHome } =
+    useMove();
   const {
     options,
     createBudget,
@@ -172,6 +173,7 @@ export function NavBar() {
                   <NavBarItem
                     itemClassName={"me-1 my-2"}
                     onClick={goBack}
+                    disabled={!canGoBack}
                     tooltipID={"tooltip-go-to-older-budget"}
                     tooltipText={"go to older budget"}
                     buttonAriaLabel={"go to older budget"}
@@ -181,6 +183,7 @@ export function NavBar() {
                   <NavBarItem
                     itemClassName={"m-2"}
                     onClick={goForward}
+                    disabled={!canGoForward}
                     tooltipID={"tooltip-go-to-newer-budget"}
                     tooltipText={"go to newer budget"}
                     buttonAriaLabel={"go to newer budget"}
diff --git a/src/hooks/useMove.ts b/src/hooks/useMove.ts
index 00c5bd15..e1622fa8 100644
--- a/src/hooks/useMove.ts
+++ b/src/hooks/useMove.ts
@@ -57,10 +57,26 @@ export function useMove() {
     budgetList && handleGo(1, budgetList.length - 1);
   }
 
+  function checkCanGo(position: number): boolean {
+    const sortedList = budgetList?.sort((a, b) => a.name.localeCompare(b.name));
+    if (budget) {
+      const index = sortedList?.findIndex((b) => b.name.includes(budget.name));
+      if (index !== position) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  const canGoBack = checkCanGo(0);
+  const canGoForward = budgetList && checkCanGo(budgetList?.length - 1);
+
   return {
     select,
     goBack,
     goForward,
+    canGoBack,
+    canGoForward,
     goHome,
   };
 }