diff --git a/src/web/html/index.html b/src/web/html/index.html
index 294e380c..4fd2bb33 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -229,7 +229,7 @@
                         <div class="title no-select">
                             <label for="input-text">Input</label>
                             <span class="float-right">
-                                <button type="button" class="btn btn-primary bmd-btn-icon input-tab-buttons" id="btn-previous-input-tab" data-toggle="tooltip" title="Go to the previous tab">
+                                <!-- <button type="button" class="btn btn-primary bmd-btn-icon input-tab-buttons" id="btn-previous-input-tab" data-toggle="tooltip" title="Go to the previous tab">
                                     <i class="material-icons">keyboard_arrow_left</i>
                                 </button>
                                 <button type="button" class="btn btn-primary bmd-btn-icon input-tab-buttons" id="btn-go-to-input-tab" data-toggle="tooltip" title="Go to a specific tab">
@@ -237,7 +237,7 @@
                                 </button>
                                 <button type="button" class="btn btn-primary bmd-btn-icon input-tab-buttons" id="btn-next-input-tab" data-toggle="tooltip" title="Go to the next tab">
                                     <i class="material-icons">keyboard_arrow_right</i>
-                                </button>
+                                </button> -->
                                 <button type="button" class="btn btn-primary bmd-btn-icon" id="btn-new-tab" data-toggle="tooltip" title="Add a new input tab">
                                     <i class="material-icons">add</i>
                                 </button>
@@ -257,6 +257,15 @@
                             <div class="io-info" id="input-selection-info"></div>
                         </div>
                         <div id="input-tabs-wrapper" style="display: none;">
+                            <span id="btn-previous-input-tab" class="input-tab-buttons">
+                                &lt;
+                            </span>
+                            <span id="btn-go-to-input-tab" class="input-tab-buttons">
+                                ···
+                            </span>
+                            <span id="btn-next-input-tab" class="input-tab-buttons">
+                                &gt;
+                            </span>
                             <ul id="input-tabs">
                             </ul>
                         </div>
@@ -285,16 +294,7 @@
                         <div class="title no-select">
                             <label for="output-text">Output</label>
                             <span class="float-right">
-                                <button type="button" class="btn btn-primary bmd-btn-icon output-tab-buttons" id="btn-previous-output-tab" data-toggle="tooltip" title="Go to the previous tab">
-                                    <i class="material-icons">keyboard_arrow_left</i>
-                                </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon output-tab-buttons" id="btn-go-to-output-tab" data-toggle="tooltip" title="Go to a specific tab">
-                                    <i class="material-icons">more_horiz</i>
-                                </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon output-tab-buttons" id="btn-next-output-tab" data-toggle="tooltip" title="Go to the next tab">
-                                    <i class="material-icons">keyboard_arrow_right</i>
-                                </button>
-                                <button type="button" class="btn btn-primary bmd-btn-icon output-tab-buttons" id="save-all-to-file" data-toggle="tooltip" title="Save all outputs to a file">
+                                <button type="button" class="btn btn-primary bmd-btn-icon" id="save-all-to-file" data-toggle="tooltip" title="Save all outputs to a file">
                                         <i class="material-icons">archive</i>
                                     </button>
                                 <button type="button" class="btn btn-primary bmd-btn-icon" id="save-to-file" data-toggle="tooltip" title="Save output to file">
@@ -327,6 +327,15 @@
                         </div>
                         <div id="output-wrapper">
                             <div id="output-tabs-wrapper" style="display: none">
+                                <span id="btn-previous-output-tab" class="output-tab-buttons">
+                                    &lt;
+                                </span>
+                                <span id="btn-go-to-output-tab" class="output-tab-buttons">
+                                    ···
+                                </span>
+                                <span id="btn-next-output-tab" class="output-tab-buttons">
+                                    &gt;
+                                </span>
                                 <ul id="output-tabs">
                                 </ul>
                             </div>
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index 46c7f8ea..11c86a62 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -56,7 +56,10 @@
     display: flex;
     flex-direction: row;
     border-bottom: 1px solid var(--primary-border-colour);
+    border-left: 1px solid var(--primary-border-colour);
     height: var(--tab-height);
+    width: calc(100% - 75px);
+    clear: none;
 }
 
 #input-tabs li,
@@ -87,8 +90,33 @@
 
 .input-tab-buttons,
 .output-tab-buttons {
-    transition: 1s all ease;
-    display: none;
+    width: 25px;
+    text-align: center;
+    margin: 0;
+    height: var(--tab-height);
+    line-height: var(--tab-height);
+    font-weight: bold;
+    background-color: var(--title-background-colour);
+    border-bottom: 1px solid var(--primary-border-colour);
+}
+
+.input-tab-buttons:hover,
+.output-tab-buttons:hover {
+    cursor: pointer;
+    background-color: var(--primary-background-colour);
+}
+
+
+#btn-next-input-tab,
+#btn-go-to-input-tab,
+#btn-next-output-tab,
+#btn-go-to-output-tab {
+    float: right;
+}
+
+#btn-previous-input-tab,
+#btn-previous-output-tab {
+    float: left;
 }
 
 .input-tab-content,