diff --git a/build/css/style.css b/build/css/style.css
index 42a259e..fd12054 100644
--- a/build/css/style.css
+++ b/build/css/style.css
@@ -353,6 +353,13 @@ a:hover {
   cursor: pointer;
 }
 
+/* hide the arrow but allow it to take its space in the layout */
+.arrow.inactive {
+  opacity: 0;
+  pointer-events: none;
+  cursor: default;
+}
+
 /* SPINNER */
 .loader,
 .loader:after {
diff --git a/client/views/cards/Cards.jsx b/client/views/cards/Cards.jsx
index f4a6194..ffd6034 100644
--- a/client/views/cards/Cards.jsx
+++ b/client/views/cards/Cards.jsx
@@ -55,7 +55,15 @@ class Cards extends React.Component {
     if (totalSize.toString().length > 3 && totalSize.toString().length < 7) totalSize = `${Math.floor(totalSize / 1000)}KB`;
     if (totalSize.toString().length > 6) totalSize = `${(totalSize / 1000000).toFixed(2)}MB`;
 
-    const indexData = <span><span onClick={this.props.handleDecrement} className="arrow">&#9666;</span>{index + 1}<span onClick={this.props.handleIncrement} className="arrow">&#9656;</span></span>;
+    // arrows to the next/prev build,
+    // hide arrow(s) if it is currently at the last/first build therefore no navigation posibility
+    const indexData = (
+      <span>
+        <span onClick={this.props.handleDecrement} className={"arrow " + (this.props.activeBuild === 0 ? "inactive" : "")}>&#9666;</span>
+        {index + 1}
+        <span onClick={this.props.handleIncrement} className={"arrow " + (this.props.activeBuild === this.props.build.length - 1 ? "inactive" : "")}>&#9656;</span>
+      </span>
+    );
 
     const cardData = [totalSize, chunksTotal, modulesTotal, assetsTotal, errorsTotal, indexData];