diff --git a/frontend/components/Banner.js b/frontend/components/Banner.js
deleted file mode 100644
index b450c92..0000000
--- a/frontend/components/Banner.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-import { Grid, Typography } from '@mui/material'
-import useStyles from '../styles/pages/banner'
-const Banner = () => {
-  const classes = useStyles()
-
-  return (
-    <Grid className={classes.banner}>
-      <Grid
-        container
-        direction="row"
-        justifyContent="space-between"
-        alignItems="flex-start"
-        className={classes.container}
-      >
-        <Grid item xs={12} className={classes.titleWrapper}>
-          <Typography variant="h1" className={classes.title}>
-            PZ Server Pipelines
-          </Typography>
-          <Typography variant="body1" display="block">
-            <p>
-              Pipelines to create customized science-driven PZ-related data
-              products.
-            </p>
-          </Typography>
-        </Grid>
-      </Grid>
-    </Grid>
-  )
-}
-
-export default Banner
diff --git a/frontend/components/SpeczData.js b/frontend/components/SpeczData.js
index 60966ab..9a23f24 100644
--- a/frontend/components/SpeczData.js
+++ b/frontend/components/SpeczData.js
@@ -1,5 +1,6 @@
 import { DataGrid } from '@mui/x-data-grid'
 import moment from 'moment'
+import { Box } from '@mui/material'
 import PropTypes from 'prop-types'
 
 const columns = [
@@ -31,7 +32,7 @@ const columns = [
 
 function DataTable({ rows }) {
   return (
-    <div style={{ height: 300, width: '100%' }}>
+    <Box style={{ height: 300, width: '100%' }}>
       <DataGrid
         rows={rows}
         columns={columns}
@@ -39,7 +40,7 @@ function DataTable({ rows }) {
         pageSizeOptions={[5, 10]}
         checkboxSelection
       />
-    </div>
+    </Box>
   )
 }
 
diff --git a/frontend/components/TsmData.js b/frontend/components/TsmData.js
index 9b0b57c..eceffca 100644
--- a/frontend/components/TsmData.js
+++ b/frontend/components/TsmData.js
@@ -1,5 +1,6 @@
 import { DataGrid } from '@mui/x-data-grid'
 import moment from 'moment'
+import { Box } from '@mui/material'
 import PropTypes from 'prop-types'
 
 const columns = [
@@ -31,14 +32,14 @@ const columns = [
 
 function DataTable({ rows }) {
   return (
-    <div style={{ height: 300, width: '100%' }}>
+    <Box style={{ height: 300, width: '100%' }}>
       <DataGrid
         rows={rows}
         columns={columns}
         // getRowId={row => row.id}
         pageSizeOptions={[5, 10]}
       />
-    </div>
+    </Box>
   )
 }