diff --git a/frontend/components/SpeczCatalogs.js b/frontend/components/SpeczCatalogs.js
new file mode 100644
index 0000000..84af50e
--- /dev/null
+++ b/frontend/components/SpeczCatalogs.js
@@ -0,0 +1,39 @@
+import * as React from 'react'
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardMedia from '@mui/material/CardMedia'
+import Typography from '@mui/material/Typography'
+import Link from '../components/Link'
+
+function SpeczCatalogs() {
+  return (
+    <Link href="/specz_catalogs">
+      <Card
+        elevation={3}
+        sx={{
+          display: 'flex'
+        }}
+      >
+        <CardMedia
+          component="img"
+          sx={{ width: 350 }}
+          image="../interfaces/milkyway.jpg"
+          alt="Spec-z Catalogs"
+        />
+        <Box>
+          <CardContent m={2} sx={{ maxWidth: 500 }}>
+            <Typography variant="h5">Combine Spec-z Catalogs</Typography>
+            <Typography variant="body1" color="text.secondary">
+              Creates a single spec-z sample from the multiple spatial
+              cross-matching (all-to-all) of a list of pre-registered individual
+              Spec-z Catalogs.
+            </Typography>
+          </CardContent>
+        </Box>
+      </Card>
+    </Link>
+  )
+}
+
+export default SpeczCatalogs
diff --git a/frontend/components/SpeczData.js b/frontend/components/SpeczData.js
new file mode 100644
index 0000000..9a23f24
--- /dev/null
+++ b/frontend/components/SpeczData.js
@@ -0,0 +1,86 @@
+import { DataGrid } from '@mui/x-data-grid'
+import moment from 'moment'
+import { Box } from '@mui/material'
+import PropTypes from 'prop-types'
+
+const columns = [
+  {
+    field: 'display_name',
+    headerName: 'Name',
+    sortable: true,
+    flex: 1
+  },
+  {
+    field: 'uploaded_by',
+    headerName: 'Uploaded By',
+    flex: 1,
+    sortable: false
+  },
+  {
+    field: 'created_at',
+    headerName: 'Created at',
+    sortable: true,
+    width: 200,
+    valueFormatter: params => {
+      if (!params.value) {
+        return ''
+      }
+      return moment(params.value).format('YYYY-MM-DD')
+    }
+  }
+]
+
+function DataTable({ rows }) {
+  return (
+    <Box style={{ height: 300, width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        // getRowId={row => row.id}
+        pageSizeOptions={[5, 10]}
+        checkboxSelection
+      />
+    </Box>
+  )
+}
+
+DataTable.propTypes = {
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired
+}
+
+const rows = [
+  {
+    id: 1,
+    display_name: 'Jandson 1',
+    uploaded_by: 'User1',
+    created_at: '2023-01-01'
+  },
+  {
+    id: 2,
+    display_name: 'Jandson 2',
+    uploaded_by: 'User2',
+    created_at: '2023-02-15'
+  },
+  {
+    id: 3,
+    display_name: 'Jandson 3',
+    uploaded_by: 'User3',
+    created_at: '2023-03-22'
+  },
+  {
+    id: 4,
+    display_name: 'Jandson V',
+    uploaded_by: 'User1',
+    created_at: '2023-04-10'
+  },
+  {
+    id: 5,
+    display_name: 'Jandson Try',
+    uploaded_by: 'User2',
+    created_at: '2023-05-05'
+  }
+]
+
+export default function App() {
+  return <DataTable rows={rows} />
+}
diff --git a/frontend/components/TrainingSetMaker.js b/frontend/components/TrainingSetMaker.js
new file mode 100644
index 0000000..8524887
--- /dev/null
+++ b/frontend/components/TrainingSetMaker.js
@@ -0,0 +1,39 @@
+import * as React from 'react'
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardMedia from '@mui/material/CardMedia'
+import Typography from '@mui/material/Typography'
+import Link from '../components/Link'
+
+function TrainingSetMaker() {
+  return (
+    <Link href="/training_set_maker">
+      <Card
+        elevation={3}
+        sx={{
+          display: 'flex',
+          flexDirection: 'row-reverse'
+        }}
+      >
+        <CardMedia
+          component="img"
+          sx={{ width: 350 }}
+          image="../interfaces/lsst_summit.jpg"
+          alt="Training Set Maker"
+        />
+        <Box>
+          <CardContent m={2} sx={{ maxWidth: 500 }}>
+            <Typography variant="h5">Training Set Maker</Typography>
+            <Typography variant="body1" color="text.secondary">
+              Creates a training set from the spatial cross-matching of a given
+              Spec-z Catalog and the LSST Objects Catalogs.
+            </Typography>
+          </CardContent>
+        </Box>
+      </Card>
+    </Link>
+  )
+}
+
+export default TrainingSetMaker
diff --git a/frontend/components/TsmData.js b/frontend/components/TsmData.js
new file mode 100644
index 0000000..eceffca
--- /dev/null
+++ b/frontend/components/TsmData.js
@@ -0,0 +1,85 @@
+import { DataGrid } from '@mui/x-data-grid'
+import moment from 'moment'
+import { Box } from '@mui/material'
+import PropTypes from 'prop-types'
+
+const columns = [
+  {
+    field: 'display_name',
+    headerName: 'Name',
+    sortable: true,
+    flex: 1
+  },
+  {
+    field: 'uploaded_by',
+    headerName: 'Uploaded By',
+    flex: 1,
+    sortable: false
+  },
+  {
+    field: 'created_at',
+    headerName: 'Created at',
+    sortable: true,
+    width: 200,
+    valueFormatter: params => {
+      if (!params.value) {
+        return ''
+      }
+      return moment(params.value).format('YYYY-MM-DD')
+    }
+  }
+]
+
+function DataTable({ rows }) {
+  return (
+    <Box style={{ height: 300, width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        // getRowId={row => row.id}
+        pageSizeOptions={[5, 10]}
+      />
+    </Box>
+  )
+}
+
+DataTable.propTypes = {
+  rows: PropTypes.arrayOf(PropTypes.object).isRequired
+}
+
+const rows = [
+  {
+    id: 1,
+    display_name: 'Jandson 1',
+    uploaded_by: 'User1',
+    created_at: '2023-01-01'
+  },
+  {
+    id: 2,
+    display_name: 'Jandson 2',
+    uploaded_by: 'User2',
+    created_at: '2023-02-15'
+  },
+  {
+    id: 3,
+    display_name: 'Jandson 3',
+    uploaded_by: 'User3',
+    created_at: '2023-03-22'
+  },
+  {
+    id: 4,
+    display_name: 'Jandson V',
+    uploaded_by: 'User1',
+    created_at: '2023-04-10'
+  },
+  {
+    id: 5,
+    display_name: 'Jandson Try',
+    uploaded_by: 'User2',
+    created_at: '2023-05-05'
+  }
+]
+
+export default function App() {
+  return <DataTable rows={rows} />
+}
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
index 58bfd92..d2265d1 100644
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@@ -31,7 +31,10 @@ export default function MyApp(props) {
 
   const light = createTheme({
     palette: {
-      mode: 'light'
+      mode: 'light',
+      background: {
+        default: '#f1f1f1'
+      }
     }
   })
 
diff --git a/frontend/pages/index.js b/frontend/pages/index.js
index 7cb7f49..ce42ae8 100644
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@@ -33,7 +33,7 @@ export default function Index() {
       path: '/pz_pipelines',
       background: '/interfaces/gamma-ray-burst.jpg',
       description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor sit amet.'
+        'Pipelines to create customized science-driven PZ-related data products.'
     }
   ]
 
diff --git a/frontend/pages/pz_pipelines.js b/frontend/pages/pz_pipelines.js
index 32d7478..696aa73 100644
--- a/frontend/pages/pz_pipelines.js
+++ b/frontend/pages/pz_pipelines.js
@@ -1,15 +1,29 @@
-import { Typography } from '@mui/material'
-import * as React from 'react'
-import useStyles from '../styles/pages/pz_pipelines'
-
-export default function PZPipelines() {
-  const classes = useStyles()
+import React from 'react'
+import { Grid, Typography } from '@mui/material'
+import SpeczCatalogs from '../components/SpeczCatalogs'
+import TrainingSetMaker from '../components/TrainingSetMaker'
 
+function PZPipelines() {
   return (
-    <div className={classes.container}>
-      <Typography variant="h5" className={classes.message}>
-        Coming Soon...
+    <Grid container direction="column" alignItems="center">
+      <Typography
+        variant="h4"
+        align="center"
+        color="textPrimary"
+        mb={10}
+        mt={-12}
+      >
+        Photo-z Server Pipelines
       </Typography>
-    </div>
+
+      <Grid item mb={5}>
+        <SpeczCatalogs />
+      </Grid>
+      <Grid item>
+        <TrainingSetMaker />
+      </Grid>
+    </Grid>
   )
 }
+
+export default PZPipelines
diff --git a/frontend/pages/specz_catalogs.js b/frontend/pages/specz_catalogs.js
new file mode 100644
index 0000000..3cdac39
--- /dev/null
+++ b/frontend/pages/specz_catalogs.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import { Typography, Box } from '@mui/material'
+
+function SpeczCatalogs() {
+  return (
+    <Box sx={{ textAlign: 'center' }}>
+      <Typography variant="h4">Coming soon...</Typography>
+    </Box>
+  )
+}
+
+export default SpeczCatalogs
diff --git a/frontend/pages/training_set_maker.js b/frontend/pages/training_set_maker.js
new file mode 100644
index 0000000..30fabef
--- /dev/null
+++ b/frontend/pages/training_set_maker.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import { Typography, Box } from '@mui/material'
+
+function TrainingSetMaker() {
+  return (
+    <Box sx={{ textAlign: 'center' }}>
+      <Typography variant="h4">Coming soon...</Typography>
+    </Box>
+  )
+}
+
+export default TrainingSetMaker
diff --git a/frontend/public/interfaces/banner_lsst_summit.jpg b/frontend/public/interfaces/banner_lsst_summit.jpg
new file mode 100644
index 0000000..59d32ff
Binary files /dev/null and b/frontend/public/interfaces/banner_lsst_summit.jpg differ
diff --git a/frontend/public/interfaces/lsst_summit.jpg b/frontend/public/interfaces/lsst_summit.jpg
new file mode 100644
index 0000000..94213a6
Binary files /dev/null and b/frontend/public/interfaces/lsst_summit.jpg differ
diff --git a/frontend/public/interfaces/milkyway.jpg b/frontend/public/interfaces/milkyway.jpg
new file mode 100644
index 0000000..d0f031d
Binary files /dev/null and b/frontend/public/interfaces/milkyway.jpg differ
diff --git a/frontend/public/interfaces/noirlab.jpg b/frontend/public/interfaces/noirlab.jpg
new file mode 100644
index 0000000..6c34c7a
Binary files /dev/null and b/frontend/public/interfaces/noirlab.jpg differ
diff --git a/frontend/styles/pages/pz_pipelines.js b/frontend/styles/pages/pz_pipelines.js
index ff05157..73344e9 100644
--- a/frontend/styles/pages/pz_pipelines.js
+++ b/frontend/styles/pages/pz_pipelines.js
@@ -1,18 +1,59 @@
 import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles(theme => ({
-    container: {
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%'
+    },
+    pipelinesContainer: {
+        gap: 16,
+
+        [theme.breakpoints.down('sm')]: {
+            margin: 16
+        }
+    },
+    main: {
+        position: 'relative',
+        zIndex: 2,
         display: 'flex',
-        justifyContent: 'center',
         alignItems: 'center',
-        // minHeight: '100vh',
+        height: '100%',
+        padding: '20px 0'
+    },
+    titleItem: {
+        fontFamily: 'Oxanium',
+        fontSize: '1.5em',
+        paddingTop: '0.5em',
+        color: 'white',
+        textShadow: '0.1em 0.1em 0.1em black',
+        background: 'rgba(100, 100, 100, 0.5)',
+        textDecoration: 'none',
+        textAlign: 'center'
     },
-    content: {
-        textAlign: 'center',
+    ItemDescription: {
+        fontFamily: 'Oxanium',
+        fontSize: '1em',
+        paddingLeft: '1em',
+        color: 'white',
+        textShadow: '0.1em 0.1em 0.1em black',
+        position: 'absolute',
+        bottom: '1em',
+        background: 'rgba(0, 0, 0, 0.6)'
     },
-    message: {
-        color: theme.palette.text.secondary,
+    media: {
+        minHeight: 260,
+        [theme.breakpoints.down('xl')]: {
+            minHeight: 200
+        }
     },
+
+    gridApplicationLg: {
+        [theme.breakpoints.up('lg')]: {
+            width: '80%',
+            maxWidth: '80%'
+        }
+    }
 }))
 
 export default useStyles
diff --git a/frontend/styles/pages/specz_catalogs.js b/frontend/styles/pages/specz_catalogs.js
new file mode 100644
index 0000000..ec09269
--- /dev/null
+++ b/frontend/styles/pages/specz_catalogs.js
@@ -0,0 +1,7 @@
+import { makeStyles } from '@mui/styles'
+
+const useStyles = makeStyles((theme) => ({
+
+}))
+
+export default useStyles
diff --git a/frontend/styles/pages/training_set_maker.js b/frontend/styles/pages/training_set_maker.js
new file mode 100644
index 0000000..a830640
--- /dev/null
+++ b/frontend/styles/pages/training_set_maker.js
@@ -0,0 +1,7 @@
+import { makeStyles } from '@mui/styles'
+
+const useStyles = makeStyles(theme => ({
+
+}))
+
+export default useStyles
diff --git a/frontend/styles/pages/tutorials.js b/frontend/styles/pages/tutorials.js
index b6a9176..3a215f1 100644
--- a/frontend/styles/pages/tutorials.js
+++ b/frontend/styles/pages/tutorials.js
@@ -1,4 +1,3 @@
-import { TheaterComedy } from '@mui/icons-material'
 import { makeStyles } from '@mui/styles'
 
 const useStyles = makeStyles(theme => ({
@@ -12,8 +11,6 @@ const useStyles = makeStyles(theme => ({
     margin: 0,
     borderRadius: '2px',
     overflowX: 'auto',
-    // background: theme.palette.grey[400],
-    //  color: theme.palette.text.primary
     background: theme.palette.mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[700]
   }
 }))
diff --git a/frontend/themes/light.js b/frontend/themes/light.js
index 69bd7e5..91b69b9 100644
--- a/frontend/themes/light.js
+++ b/frontend/themes/light.js
@@ -6,8 +6,6 @@ const light = createTheme({
       light: '#4f5964',
       main: '#283663',
       dark: '#24292e'
-      // dark: '#283663',
-      // main: '#24292e'
     },
     secondary: {
       main: '#ffdd00'
@@ -19,18 +17,13 @@ const light = createTheme({
       main: '#ca2c0c'
     },
     background: {
-      default: '#f8f6f5'
+      default: '#f5f5f5'
     },
     text: {
       primary: 'rgba(18,48,78,0.87)',
       secondary: 'rgba(18,48,78,0.6)',
       disabled: 'rgba(18,48,78,0.38)'
     }
-    // text: {
-    //   primary: 'rgb(52, 71, 103)',
-    //   secondary: 'rgb(52, 71, 103, 0.6)',
-    //   disabled: 'rgb(52, 71, 103, 0.38)'
-    // }
   }
 })