diff --git a/docs/time-travel/index.html b/docs/time-travel/index.html
index 26c8f91..40d9b28 100644
--- a/docs/time-travel/index.html
+++ b/docs/time-travel/index.html
@@ -50,9 +50,9 @@ <h1 id="js-pr-title" class="pr__title" class="history__header"></h1>
         <a id="js-pr-url" class="history__link" title="See pull request" href="#" target="_blank">See pull request</a>
         <p id="js-pr-mergedAt" class="pr__mergedAt"></p>
       </div>
-      <a class="history__exit" href=".." title="Exit to main page">Exit</a>
+      <a class="close" href=".." title="Exit to main page"></a>
     </div>
   </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/docs/time-travel/style.css b/docs/time-travel/style.css
index a548ed2..20cb83e 100644
--- a/docs/time-travel/style.css
+++ b/docs/time-travel/style.css
@@ -136,12 +136,18 @@ hr {
   margin: -4px -9px;
 }
 
-.history__controller > button:hover {
+.history__controller > button:hover:not(:disabled) {
   border-color: rgba(255, 255, 255, 0.1);
   box-shadow: 2px 3px #000;
   transform: translateY(-1px);
 }
 
+.history__controller > button:disabled {
+  background: #232323;
+  color: #232323;
+  cursor: not-allowed;
+}
+
 .history__controller > button:active {
   box-shadow: none;
   transform: translateY(0);
@@ -206,31 +212,59 @@ hr {
   color: #05a6f0;
 }
 
-.history__exit {
+.close {
   position: absolute;
-  font-size: 1rem;
-  padding: 0.25rem 0.75rem;
-  top: 2.1rem;
-  right: 1.5rem;
+  right: 36px;
+  top: 30px;
+  width: 24px;
+  height: 24px;
+  opacity: 0.3;
+}
+
+.close:hover {
+  opacity: 1;
+  /* background-color: rgba(#333, 0.2); */
+}
+
+.close:before,
+.close:after {
+  position: absolute;
+  left: 15px;
+  content: " ";
+  height: 33px;
+  width: 2px;
+  background-color: #ffba08;
+}
+
+.close:before {
+  transform: rotate(45deg);
+}
+
+.close:after {
+  transform: rotate(-45deg);
 }
 
 @media only screen and (max-width: 640px) {
   .container {
     flex-flow: column nowrap;
   }
+
   .display-wrapper {
     height: calc(100%-5.5rem);
     overflow-y: scroll;
   }
+
   .history__count {
     font-size: 1rem;
   }
+
   .pr__title {
     font-size: 1.25rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
   .people--editor {
     display: none;
   }
diff --git a/docs/time-travel/time-travel.js b/docs/time-travel/time-travel.js
index e225ecf..cfa9423 100644
--- a/docs/time-travel/time-travel.js
+++ b/docs/time-travel/time-travel.js
@@ -36,7 +36,10 @@ const timeTravel = async () => {
       if (!!this.currentTimer) clearTimeout(this.currentTimer);
 
       const _options = Object.assign(
-        { duration: 2000, type: "default" },
+        {
+          duration: 2000,
+          type: "default"
+        },
         options
       );
       const { msg, type, duration } = _options;
@@ -209,6 +212,26 @@ const timeTravel = async () => {
   const updateView = currentCount => {
     updateHashURL(currentCount);
     updateDisplay(currentCount);
+    console.log("current count: ", currentCount);
+    console.log("max count: ", count.max);
+    console.log(count);
+
+    if (currentCount == 0) {
+      $buttonFirst.setAttribute("disabled", "true");
+      $buttonPrevious.setAttribute("disabled", "true");
+      $buttonNext.removeAttribute("disabled");
+      $buttonLast.removeAttribute("disabled");
+    } else if (currentCount == count.max) {
+      $buttonLast.setAttribute("disabled", "true");
+      $buttonNext.setAttribute("disabled", "true");
+      $buttonFirst.removeAttribute("disabled");
+      $buttonPrevious.removeAttribute("disabled");
+    } else {
+      $buttonFirst.removeAttribute("disabled");
+      $buttonPrevious.removeAttribute("disabled");
+      $buttonNext.removeAttribute("disabled");
+      $buttonLast.removeAttribute("disabled");
+    }
   };
 
   const pullRequests = await getPullRequests();