diff --git a/html/navigation.html b/html/navigation.html
index 3b1be65..9e6a288 100644
--- a/html/navigation.html
+++ b/html/navigation.html
@@ -46,16 +46,19 @@
       li.dynamic {
         flex: 1 1 0%;
       }
+      li.hidden {
+        display: none;
+      }
+      li.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
       button {
         width: 32px;
         height: 32px;
         border: none;
         background-color: transparent;
       }
-      button.disabled {
-        opacity: 0.5;
-        pointer-events: none;
-      }
       input {
         width: 100%;
         min-width: 0;
@@ -144,7 +147,10 @@
 
       const registerReceiveEvents = () => {
         ipcRenderer.on("button-disabled", (e, button) => {
-          document.getElementById(button.id).classList.toggle("disabled", button.disabled);
+          document.getElementById(button.id).parentNode.classList.toggle("disabled", button.disabled);
+        });
+        ipcRenderer.on("button-hidden", (e, button) => {
+          document.getElementById(button.id).parentNode.classList.toggle("hidden", button.hidden);
         });
         ipcRenderer.on("input-blur", (e, input) => {
           document.getElementById(input.id).blur();
diff --git a/html/widget.html b/html/widget.html
index 646f32a..32c2d7d 100644
--- a/html/widget.html
+++ b/html/widget.html
@@ -46,6 +46,14 @@
         border-bottom: 1px solid var(--border-color);
         background: var(--background-color);
       }
+      li {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+      }
+      li.hidden {
+        display: none;
+      }
       button {
         width: 32px;
         height: 32px;
@@ -114,7 +122,7 @@
 
       const registerReceiveEvents = () => {
         ipcRenderer.on("button-hidden", (e, button) => {
-          document.getElementById(button.id).parentNode.hidden = button.hidden;
+          document.getElementById(button.id).parentNode.classList.toggle("hidden", button.hidden);
         });
         ipcRenderer.on("data-theme", (e, data) => {
           document.documentElement.setAttribute("data-theme", data.theme);
diff --git a/js/integration.js b/js/integration.js
index c3ca53b..7e7dd49 100644
--- a/js/integration.js
+++ b/js/integration.js
@@ -413,6 +413,9 @@ const updateKeyboard = () => {
  * Initializes the page number and handles the execute logic.
  */
 const initPageNumber = () => {
+  if (WEBVIEW.viewUrls.length < 3) {
+    return;
+  }
   const root = `${INTEGRATION.root}/page_number`;
   const config = {
     name: "Page Number",
diff --git a/js/webview.js b/js/webview.js
index 8911b1a..d5ce237 100644
--- a/js/webview.js
+++ b/js/webview.js
@@ -183,10 +183,10 @@ const updateNavigation = () => {
   const defaultUrl = WEBVIEW.viewUrls[WEBVIEW.viewActive];
   const currentUrl = view.webContents.getURL();
 
-  // Disable pager button
-  WEBVIEW.navigation.webContents.send("button-disabled", {
+  // Hide pager button
+  WEBVIEW.navigation.webContents.send("button-hidden", {
     id: "pager",
-    disabled: WEBVIEW.views.length < 3,
+    hidden: WEBVIEW.viewUrls.length < 3,
   });
 
   // Update url text