diff --git a/openflexure_microscope/api/static/main_v1.js b/openflexure_microscope/api/static/main_v1.js
index af4a1899..1d8bb6ff 100644
--- a/openflexure_microscope/api/static/main_v1.js
+++ b/openflexure_microscope/api/static/main_v1.js
@@ -77,18 +77,16 @@ function updateCaptureList(response) {
 
         // Generate inner HTML from capture object
         html = `
-        <div class="clearfix">
-            <div class="left-col"><img src="${element_uri}/download?thumbnail=true"></div>
-            <div class="right-col"> 
-                <b>${element.filename}</b>
-                <br>
-                <button type="button" onclick="window.open('${element_uri}/download', '_blank');">View</button>
-                <button type="button" onclick="window.open('${element_uri}/download?as_attachment=true');">Download</button>
-                <br>
-                <button type="button" onclick="window.open('${element_uri}/', '_blank');">JSON</button>
-                <button type="button" onclick="deleteCapture('${element.id}');">Delete</button>
-                <br>
-            </div>
+        <div class="capture-thumb"><img src="${element_uri}/download?thumbnail=true"></div>
+        <div class="capture-actions"> 
+            <b>${element.filename}</b>
+            <br>
+            <button type="button" onclick="window.open('${element_uri}/download', '_blank');">View</button>
+            <button type="button" onclick="window.open('${element_uri}/download?as_attachment=true');">Download</button>
+            <br>
+            <button type="button" onclick="window.open('${element_uri}/', '_blank');">JSON</button>
+            <button type="button" onclick="deleteCapture('${element.id}');">Delete</button>
+            <br>
         </div>
         `
 
diff --git a/openflexure_microscope/api/static/style_v1.css b/openflexure_microscope/api/static/style_v1.css
index 90cb3fd4..58b9ae38 100644
--- a/openflexure_microscope/api/static/style_v1.css
+++ b/openflexure_microscope/api/static/style_v1.css
@@ -64,6 +64,14 @@ body {
     display: table;
 }
 
+.flexbox {
+    display: flex;
+    margin-bottom: 5px;
+}
+.flexgrow {
+    flex-grow: 1;
+}
+
 /* Data divs */
 
 #captures {
@@ -74,6 +82,18 @@ body {
 .capture {
     background-color: #d3d3d3;
     margin-bottom: 5px;
+    display: flex;
+}
+
+.capture-thumb {
+    width: 80px;
+}
+
+.capture-actions {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-left: 5px;
 }
 
 .capture img {
diff --git a/openflexure_microscope/api/templates/index_v1.html b/openflexure_microscope/api/templates/index_v1.html
index f9be076c..59504329 100644
--- a/openflexure_microscope/api/templates/index_v1.html
+++ b/openflexure_microscope/api/templates/index_v1.html
@@ -25,16 +25,16 @@
 
         <p>
           Doubleclick to position: <input type="checkbox" id="clickPositionCheck" checked><br>
-          <div class="clearfix">
-              <div class="left-col">FOV width:</div> 
-              <div class="right-col"> 
+          <div class="flexbox">
+              <div class="flexgrow">FOV width:</div> 
+              <div> 
                 <input type="number" id="fovXText" onchange="fovX = Number(this.value); updateTextBoxes();" style="width: 7em" >
               </div> 
           </div>
 
-          <div class="clearfix">
-              <div class="left-col">FOV height:</div> 
-              <div class="right-col"> 
+          <div class="flexbox">
+              <div class="flexgrow">FOV height:</div> 
+              <div> 
                   <input type="number" id="fovYText" onchange="fovY = Number(this.value); updateTextBoxes();" style="width: 7em" >
               </div> 
           </div>
@@ -51,16 +51,16 @@
         </p>
 
         <h4>Velocity:</h4>
-        <div class="clearfix">
-          <div class="left-col">x-y:</div>
-          <div class="right-col"> 
+        <div class="flexbox">
+          <div class="flexgrow">x-y:</div>
+          <div> 
             <input type="range" id="stageVelocityInput" min="50" max="200" oninput="stageVelocity = Number(this.value); updateTextBoxes();">
             <input type="text" id="stageVelocityText" size="3" disabled>
           </div>
         </div>
-        <div class="clearfix">
-          <div class="left-col">z:</div>
-          <div class="right-col"> 
+        <div class="flexbox">
+          <div class="flexgrow">z:</div>
+          <div> 
             <input type="range" id="focusVelocityInput" min="10" max="100" oninput="focusVelocity = Number(this.value); updateTextBoxes();">
             <input type="text" id="focusVelocityText" size="3" disabled>
           </div>