diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 63fc55b8..c3bc6a67 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -11,36 +11,209 @@ import TableRow from '@mui/material/TableRow'
 import { DataGrid, GridToolbar } from '@mui/x-data-grid'
 import { useEffect, useState } from 'react'
 import type { AxiosResponse } from '~/axios'
+import { DeleteRounded, Description } from '@mui/icons-material'
 // import config from '../config'
 import _kc from '@/keycloak'
 import UserService from '@/service/user-service'
+import {
+  Box,
+  FormControl,
+  FormLabel,
+  Grid,
+  IconButton,
+  MenuItem,
+  Select,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { Label } from '@mui/icons-material'
 
 const columns = [
   {
-    field: 'id',
-    headerName: 'Employee ID',
+    field: 'fileName',
+    headerName: 'Filen Name',
     sortable: true,
     filterable: true,
-    flex: 1,
+    flex: 1.5,
+    renderCell: (params) => (
+      <FormControl
+        style={{
+          cursor: 'pointer',
+          textDecoration: 'underline',
+          color: 'blue',
+        }}
+        onClick={() => handleDownload(params.row.fileName)}
+      >
+        {params.value}
+      </FormControl>
+    ),
+  },
+  {
+    field: 'submissionDate',
+    headerName: 'Submission Date',
+    sortable: true,
+    filterable: true,
+    flex: 2,
+  },
+  {
+    field: 'submitterUsername',
+    headerName: 'Submitter Username',
+    sortable: true,
+    filterable: true,
+    flex: 2,
   },
   {
-    field: 'name',
-    headerName: 'Employee Name',
+    field: 'submitterAgency',
+    headerName: 'Submitter Agency',
+    sortable: true,
+    filterable: true,
+    flex: 2,
+  },
+  {
+    field: 'fileStatus',
+    headerName: 'Status',
+    sortable: true,
+    filterable: true,
+    flex: 1.5,
+  },
+  {
+    field: 'samples',
+    headerName: '# Samples',
     sortable: true,
     filterable: true,
     flex: 1,
   },
   {
-    field: 'email',
-    headerName: 'Employee Email',
+    field: 'results',
+    headerName: '# Results',
     sortable: true,
     filterable: true,
     flex: 1,
   },
+  {
+    field: 'delete',
+    headerName: 'Delete',
+    flex: 0.75,
+    renderCell: (params) => (
+      <IconButton
+        color="primary"
+        onClick={() => handleDelete(params.row.fileName)}
+      >
+        <DeleteRounded />
+      </IconButton>
+    ),
+  },
+  {
+    field: 'messages',
+    headerName: 'Messages',
+    flex: 1,
+    renderCell: (params) => (
+      <IconButton
+        color="primary"
+        onClick={() => handleMessages(params.row.fileName)}
+      >
+        <Description />
+      </IconButton>
+    ),
+  },
 ]
+
 export default function Dashboard() {
+  const handleSearch = () => {
+    console.log('SEARCH HERE')
+  }
+
   const [data, setData] = useState<any>([
-    { id: 1, name: 'Michael', email: 'michael@email.com' },
+    {
+      fileName: 'testFileGUI.txt',
+      submissionDate: '2024-06-19',
+      submitterUsername: 'VMANAWAT',
+      submitterAgency: 'SALUSSYSTEMS',
+      fileStatus: 'VALIDATED',
+      samples: 12,
+      results: 12,
+    },
+    {
+      fileName: 'test2.csv',
+      submissionDate: '2024-06-19',
+      submitterUsername: 'VMANAWAT',
+      submitterAgency: 'SALUSSYSTEMS',
+      fileStatus: 'IN PROGRESS',
+      samples: 12,
+      results: 12,
+    },
+    {
+      fileName: 'test3.xlsx',
+      submissionDate: '2024-06-19',
+      submitterUsername: 'VMANAWAT',
+      submitterAgency: 'SALUSSYSTEMS',
+      fileStatus: 'ACCEPTED',
+      samples: 12,
+      results: 12,
+    },
+    {
+      fileName: 'test4.txt',
+      submissionDate: '2024-06-19',
+      submitterUsername: 'VMANAWAT',
+      submitterAgency: 'SALUSSYSTEMS',
+      fileStatus: 'REJECTED',
+      samples: 12,
+      results: 12,
+    },
+    {
+      fileName: 'test5.xlsx',
+      submissionDate: '2024-06-19',
+      submitterUsername: 'VMANAWAT',
+      submitterAgency: 'SALUSSYSTEMS',
+      fileStatus: 'VALIDATED',
+      samples: 12,
+      results: 12,
+    },
+    {
+      fileName: 'test6.xlsx',
+      submissionDate: '2024-06-19',
+      submitterUsername: 'VMANAWAT',
+      submitterAgency: 'SALUSSYSTEMS',
+      fileStatus: 'VALIDATED',
+      samples: 12,
+      results: 12,
+    },
+    {
+      fileName: 'test7.xlsx',
+      submissionDate: '2024-06-19',
+      submitterUsername: 'VMANAWAT',
+      submitterAgency: 'SALUSSYSTEMS',
+      fileStatus: 'VALIDATED',
+      samples: 12,
+      results: 12,
+    },
+    {
+      fileName: 'test8.xlsx',
+      submissionDate: '2024-06-19',
+      submitterUsername: 'VMANAWAT',
+      submitterAgency: 'SALUSSYSTEMS',
+      fileStatus: 'VALIDATED',
+      samples: 12,
+      results: 12,
+    },
+    {
+      fileName: 'test9.xlsx',
+      submissionDate: '2024-06-19',
+      submitterUsername: 'VMANAWAT',
+      submitterAgency: 'SALUSSYSTEMS',
+      fileStatus: 'VALIDATED',
+      samples: 12,
+      results: 12,
+    },
+    {
+      fileName: 'test10.xlsx',
+      submissionDate: '2024-06-19',
+      submitterUsername: 'VMANAWAT',
+      submitterAgency: 'SALUSSYSTEMS',
+      fileStatus: 'VALIDATED',
+      samples: 12,
+      results: 12,
+    },
   ])
 
   useEffect(() => {
@@ -70,50 +243,166 @@ export default function Dashboard() {
   }
 
   return (
-    <div
-      style={{
-        minHeight: '45em',
-        maxHeight: '45em',
-        width: '90%',
-        marginLeft: '4em',
-      }}
-    >
-      <DataGrid
-        slots={{ toolbar: GridToolbar }}
-        slotProps={{
-          toolbar: {
-            showQuickFilter: true,
-          },
+    <>
+      <div
+        style={{
+          width: '90%',
+          marginLeft: '4em',
         }}
-        experimentalFeatures={{ ariaV7: true }}
-        checkboxSelection={false}
-        rows={data}
-        columns={columns}
-        pageSizeOptions={[5, 10, 20, 50, 100]}
-        getRowId={(row) => row['id']}
-        onRowClick={(params) => setSelectedRow(params.row)}
-      />
-      <Dialog open={!!selectedRow} onClose={handleClose}>
-        <DialogTitle>Row Details</DialogTitle>
-        <DialogContent>
-          <Table>
-            <TableBody>
-              {selectedRow &&
-                Object.entries(selectedRow).map(([key, value]) => (
-                  <TableRow key={key}>
-                    <TableCell>{key}</TableCell>
-                    <TableCell>{value}</TableCell>
-                  </TableRow>
-                ))}
-            </TableBody>
-          </Table>
-        </DialogContent>
-        <DialogActions>
-          <Button variant="contained" color="secondary" onClick={handleClose}>
-            Close
+      >
+        <Box>
+          <Typography variant="h4">
+            Electronic Data Transfer - Dashboard
+          </Typography>
+        </Box>
+
+        <Box sx={{ paddingTop: '50px' }}>
+          <FormControl>
+            <Grid container>
+              <Grid item xs={12} sx={{ paddingBottom: '20px' }}>
+                <FormLabel sx={{ paddingRight: '100px' }}>File Name</FormLabel>
+                <TextField
+                  id="outlined-basic"
+                  variant="outlined"
+                  size="small"
+                  sx={{ width: '520px' }}
+                />
+              </Grid>
+
+              <Grid item xs={3} sx={{ paddingBottom: '20px' }}>
+                <FormLabel>Submission Date</FormLabel>
+              </Grid>
+
+              <Grid item xs={5} sx={{ paddingBottom: '20px' }}>
+                <FormLabel sx={{ paddingRight: '5px' }}>From:</FormLabel>
+                <TextField
+                  id="outlined-basic"
+                  variant="outlined"
+                  size="small"
+                  type="date"
+                />
+              </Grid>
+
+              <Grid item xs={4} sx={{ paddingBottom: '20px' }}>
+                <FormLabel sx={{ paddingRight: '5px' }}>To:</FormLabel>
+                <TextField
+                  id="outlined-basic"
+                  variant="outlined"
+                  size="small"
+                  type="date"
+                />
+              </Grid>
+
+              <Grid item xs={12} sx={{ paddingBottom: '20px' }}>
+                <FormLabel sx={{ paddingRight: '45px' }}>
+                  Submitting Agency
+                </FormLabel>
+                <FormControl>
+                  <Select
+                    id="outlined-basic"
+                    variant="outlined"
+                    size="small"
+                    sx={{ width: '515px' }}
+                  >
+                    <MenuItem>All</MenuItem>
+                  </Select>
+                </FormControl>
+              </Grid>
+
+              <Grid item xs={12} sx={{ paddingBottom: '20px' }}>
+                <FormLabel sx={{ paddingRight: '32px' }}>
+                  Submitter Username
+                </FormLabel>
+                <FormControl>
+                  <Select
+                    id="outlined-basic"
+                    variant="outlined"
+                    size="small"
+                    sx={{ width: '515px' }}
+                  >
+                    <MenuItem>All</MenuItem>
+                  </Select>
+                </FormControl>
+              </Grid>
+
+              <Grid item xs={12} sx={{ paddingBottom: '20px' }}>
+                <FormLabel sx={{ paddingRight: '135px' }}>Status</FormLabel>
+                <FormControl>
+                  <Select
+                    id="outlined-basic"
+                    variant="outlined"
+                    size="small"
+                    sx={{ width: '515px' }}
+                  >
+                    <MenuItem>All</MenuItem>
+                  </Select>
+                </FormControl>
+              </Grid>
+            </Grid>
+          </FormControl>
+        </Box>
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Button color="primary" variant="contained" onClick={handleSearch}>
+            Search
           </Button>
-        </DialogActions>
-      </Dialog>
-    </div>
+        </Box>
+      </div>
+      <div
+        style={{
+          margin: '4em',
+          paddingBottom: '30px',
+        }}
+      >
+        <DataGrid
+          slots={{ toolbar: GridToolbar }}
+          slotProps={{
+            toolbar: {
+              showQuickFilter: true,
+            },
+          }}
+          experimentalFeatures={{ ariaV7: true }}
+          checkboxSelection={false}
+          rows={data}
+          columns={columns}
+          pageSizeOptions={[5, 10, 20, 50, 100]}
+          getRowId={(row) => row['fileName']}
+          // onRowClick={(params) => setSelectedRow(params.row)}
+          sx={{ width: '1200px' }}
+        />
+        <Dialog open={!!selectedRow} onClose={handleClose}>
+          <DialogTitle>Row Details</DialogTitle>
+          <DialogContent>
+            <Table>
+              <TableBody>
+                {selectedRow &&
+                  Object.entries(selectedRow).map(([key, value]) => (
+                    <TableRow key={key}>
+                      <TableCell>{key}</TableCell>
+                      <TableCell>{value}</TableCell>
+                    </TableRow>
+                  ))}
+              </TableBody>
+            </Table>
+          </DialogContent>
+          <DialogActions>
+            <Button variant="contained" color="secondary" onClick={handleClose}>
+              Close
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    </>
   )
 }
+
+function handleDownload(fileName: any): void {
+  console.log(fileName)
+}
+
+function handleDelete(fileName: any): void {
+  console.log(fileName)
+}
+
+function handleMessages(fileName: any): void {
+  console.log(fileName)
+}
diff --git a/frontend/src/theme.tsx b/frontend/src/theme.tsx
index 75d70d67..4d9955a8 100644
--- a/frontend/src/theme.tsx
+++ b/frontend/src/theme.tsx
@@ -4,7 +4,7 @@ import { createTheme } from '@mui/material/styles'
 const theme = createTheme({
   palette: {
     primary: {
-      main: '#ffffff',
+      main: '#0B5394',
     },
     secondary: {
       main: '#385a8a',
diff --git a/migrations/sql/V1.0.2__insert_file_test_data.sql b/migrations/sql/V1.0.2__insert_file_test_data.sql
new file mode 100644
index 00000000..e75b61ed
--- /dev/null
+++ b/migrations/sql/V1.0.2__insert_file_test_data.sql
@@ -0,0 +1,47 @@
+DO $$
+    DECLARE i integer := 0;
+    v_fileName varchar(200);
+    v_submissionDate date;
+BEGIN 
+    WHILE i < 50 LOOP 
+        v_submissionDate := date '2022-01-01' + (floor(random() * (date '2024-12-31' - date '2022-01-01'))::int);
+        BEGIN 
+            v_fileName := CONCAT('file_', substring(md5(random()::text), 0, 10));
+            IF NOT EXISTS (SELECT 1 FROM enmods.file_submissions WHERE file_name = v_fileName) THEN
+                INSERT INTO enmods.file_submissions (
+                    file_name,
+                    submission_date,
+                    submitter_user_id,
+                    submission_status_code,
+                    submitter_agency_name,
+                    sample_count,
+                    results_count,
+                    active_ind,
+                    error_log,
+                    organization_guid,
+                    create_user_id,
+                    create_utc_timestamp,
+                    update_user_id,
+                    update_utc_timestamp
+                )
+                VALUES (
+                    v_fileName,
+                    v_submissionDate,
+                    'VMANAWAT',
+                    'SUBMITTED',
+                    'MANAWAT CORP',
+                    12,
+                    50,
+                    true,
+                    'THIS IS TEST ERROR LOG',
+                    gen_random_uuid(),
+                    'VMANAWAT',
+                    (now() at time zone 'utc'),
+                    'VMANAWAT',
+                    (now() at time zone 'utc')
+                ); 
+            i := i + 1;
+            END IF;
+        END;
+    END LOOP;
+END $$
\ No newline at end of file