diff --git a/ui/src/List/VideoList.tsx b/ui/src/List/VideoList.tsx
index 81b595d..c018dc2 100644
--- a/ui/src/List/VideoList.tsx
+++ b/ui/src/List/VideoList.tsx
@@ -101,22 +101,22 @@ const VideoList = ({
           key={r.startId}
           onClick={() => setActiveRecording([stream, r])}
         >
-          <TableCell>
+          <TableCell align="right">
             {formatTime(Math.max(r.startTime90k, range90k![0]))}
           </TableCell>
-          <TableCell>
+          <TableCell align="right">
             {formatTime(Math.min(r.endTime90k, range90k![1]))}
           </TableCell>
-          <TableCell>
+          <TableCell className="opt" align="right">
             {vse.width}x{vse.height}
           </TableCell>
-          <TableCell>
+          <TableCell className="opt" align="right">
             {frameRateFmt.format(r.videoSamples / durationSec)}
           </TableCell>
-          <TableCell>
+          <TableCell className="opt" align="right">
             {sizeFmt.format(r.sampleFileBytes / 1048576)} MiB
           </TableCell>
-          <TableCell>
+          <TableCell align="right">
             {sizeFmt.format((r.sampleFileBytes / durationSec) * 0.000008)} Mbps
           </TableCell>
         </TableRow>
diff --git a/ui/src/List/index.tsx b/ui/src/List/index.tsx
index 7dce6f9..b18e602 100644
--- a/ui/src/List/index.tsx
+++ b/ui/src/List/index.tsx
@@ -22,18 +22,13 @@ import TimerangeSelector from "./TimerangeSelector";
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
     display: "flex",
-    [theme.breakpoints.down("md")]: {
-      flexDirection: "column",
-    },
+    flexWrap: "wrap",
     margin: theme.spacing(2),
   },
   selectors: {
-    [theme.breakpoints.up("md")]: {
-      marginRight: theme.spacing(2),
-    },
-    [theme.breakpoints.down("md")]: {
-      marginBottom: theme.spacing(2),
-    },
+    marginRight: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    width: "max-content",
   },
   video: {
     objectFit: "contain",
@@ -46,12 +41,21 @@ const useStyles = makeStyles((theme: Theme) => ({
     color: theme.palette.primary.contrastText,
   },
   videoTable: {
-    flexGrow: 1,
+    width: "max-content",
+    height: "max-content",
     "& .MuiTableBody-root:not(:last-child):after": {
       content: "''",
       display: "block",
       height: theme.spacing(2),
     },
+    "& tbody tr": {
+      cursor: "pointer",
+    },
+    "& .opt": {
+      [theme.breakpoints.down("lg")]: {
+        display: "none",
+      },
+    },
   },
 }));
 
@@ -99,12 +103,18 @@ const Main = ({ cameras, timeZoneName }: Props) => {
             </TableCell>
           </TableRow>
           <TableRow>
-            <TableCell>start</TableCell>
-            <TableCell>end</TableCell>
-            <TableCell>resolution</TableCell>
-            <TableCell>fps</TableCell>
-            <TableCell>storage</TableCell>
-            <TableCell>bitrate</TableCell>
+            <TableCell align="right">start</TableCell>
+            <TableCell align="right">end</TableCell>
+            <TableCell className="opt" align="right">
+              resolution
+            </TableCell>
+            <TableCell className="opt" align="right">
+              fps
+            </TableCell>
+            <TableCell className="opt" align="right">
+              storage
+            </TableCell>
+            <TableCell align="right">bitrate</TableCell>
           </TableRow>
         </TableHead>
         <VideoList
@@ -121,10 +131,8 @@ const Main = ({ cameras, timeZoneName }: Props) => {
     setActiveRecording(null);
   };
   const recordingsTable = (
-    <TableContainer component={Paper}>
-      <Table size="small" className={classes.videoTable}>
-        {videoLists}
-      </Table>
+    <TableContainer component={Paper} className={classes.videoTable}>
+      <Table size="small">{videoLists}</Table>
     </TableContainer>
   );
   return (