diff --git a/src/components/SampleForm/SampleForm.js b/src/components/SampleForm/SampleForm.js
index 4985f492e791cf926b4ced408f22008e78e61b6a..11ca3d2c428e6656c6ff3a6045e073ba1a117d51 100644
--- a/src/components/SampleForm/SampleForm.js
+++ b/src/components/SampleForm/SampleForm.js
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import classnames from "classnames";
 import UnitForm from "../UnitForm/UnitForm";
 import Grid from "@material-ui/core/Grid";
+import Box from "@material-ui/core/Box";
 import Fab from "@material-ui/core/Fab";
 import AddIcon from "@material-ui/icons/Add";
 import Typography from "@material-ui/core/Typography";
@@ -35,15 +36,15 @@ const SampleForm = () => {
   return (
     <Grid container spacing={3}>
       {sampleState.map((val, idx) => {
-        const sampleId = `sample${idx}`;
+        const sampleId = `sample-${idx}`;
         return (
-          <div key={`sample-${idx}`}>
-            <Grid item xs={12} gutterBottom>
+          <Box borderColor="primary.main" border={2} m={1}>
+            <Grid item xs={12} md={6} gutterBottom>
               <FormControl className={classes.formControl}>
                 <TextField
                   id={sampleId}
                   data-idx={idx}
-                  label={`sample-${idx + 1}`}
+                  label={`sample ${idx + 1}`}
                   className={classnames("", {
                     invalid: sampleState.sample,
                   })}
@@ -57,18 +58,21 @@ const SampleForm = () => {
               </FormControl>
             </Grid>
             <UnitForm classes={classes} />
-          </div>
+          </Box>
         );
       })}
-      <Fab
-        size="small"
-        onClick={addSample}
-        value="Add New Sample"
-        color="primary"
-        aria-label="add"
-      >
-        <AddIcon />
-      </Fab>
+      <Grid xs={12} md={6} gutterBottom>
+        <Fab
+          m={1}
+          size="small"
+          onClick={addSample}
+          value="Add New Sample"
+          color="primary"
+          aria-label="add"
+        >
+          <AddIcon />
+        </Fab>{" "}
+      </Grid>
     </Grid>
   );
 };
diff --git a/src/components/UnitForm/UnitForm.js b/src/components/UnitForm/UnitForm.js
index 783135bfff4a15601bf104ffeb3b552125747e25..cf1d328258366129de3eb56c854589e24859204b 100644
--- a/src/components/UnitForm/UnitForm.js
+++ b/src/components/UnitForm/UnitForm.js
@@ -4,6 +4,7 @@ import Fab from "@material-ui/core/Fab";
 import AddIcon from "@material-ui/icons/Add";
 import FormControl from "@material-ui/core/FormControl";
 import FormHelperText from "@material-ui/core/FormHelperText";
+import Box from "@material-ui/core/Box";
 
 const UnitForm = ({ classes }) => {
   const blankUnit = { r1: "", r2: "" };
@@ -19,15 +20,17 @@ const UnitForm = ({ classes }) => {
   };
   return (
     <Grid item xs={12}>
-      <Fab
-        size="small"
-        onClick={addUnit}
-        value="Add Unit Pair"
-        color="primary"
-        aria-label="add"
-      >
-        <AddIcon />
-      </Fab>{" "}
+      <Box m={1}>
+        <Fab
+          size="small"
+          onClick={addUnit}
+          value="Add Unit Pair"
+          color="primary"
+          aria-label="add"
+        >
+          <AddIcon />
+        </Fab>{" "}
+      </Box>
       {unitState.map((val, idx) => {
         const r1Id = `read1-${idx}`;
         const r2Id = `read2-${idx}`;