diff --git a/packages/client/src/components/Control.component.tsx b/packages/client/src/components/Control.component.tsx
deleted file mode 100644
index 866a0edd..00000000
--- a/packages/client/src/components/Control.component.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { DataGrid, GridColDef } from '@mui/x-data-grid';
-import DeleteIcon from '@mui/icons-material/DeleteOutlined';
-import { GridRowModesModel, GridActionsCellItem, GridRowId } from '@mui/x-data-grid-pro';
-import { useState } from 'react';
-
-interface Row {
-  id: number;
-  name: string;
-  description: string;
-}
-
-interface Table {
-  tableRows: Row[];
-}
-
-export const Control: React.FC<Table> = ({ tableRows }: Table) => {
-  const [rows, setRows] = useState(tableRows);
-  const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});
-
-  const handleDeleteClick = (id: GridRowId) => () => {
-    setRows(rows.filter((row: any) => row.id !== id));
-  };
-
-  const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => {
-    setRowModesModel(newRowModesModel);
-  };
-
-  const columns: GridColDef[] = [
-    { field: 'id', headerName: 'ID', width: 55 },
-    {
-      field: 'name',
-      headerName: 'Name',
-      flex: 1,
-      maxWidth: 200,
-      editable: true
-    },
-    {
-      field: 'description',
-      headerName: 'Description',
-      flex: 1,
-      minWidth: 500,
-      editable: true
-    },
-    {
-      field: 'delete',
-      type: 'actions',
-      headerName: 'Delete',
-      width: 120,
-      cellClassName: 'delete',
-      getActions: ({ id }) => {
-        return [<GridActionsCellItem icon={<DeleteIcon />} label="Delete" onClick={handleDeleteClick(id)} />];
-      }
-    }
-  ];
-
-  return (
-    <DataGrid
-      getRowHeight={() => 'auto'}
-      rows={rows}
-      columns={columns}
-      rowModesModel={rowModesModel}
-      onRowModesModelChange={handleRowModesModelChange}
-      initialState={{
-        pagination: {
-          paginationModel: {
-            pageSize: 5
-          }
-        }
-      }}
-      pageSizeOptions={[5]}
-      checkboxSelection
-      disableRowSelectionOnClick
-    />
-  );
-};
diff --git a/packages/client/src/pages/studies/StudyControl.tsx b/packages/client/src/pages/studies/StudyControl.tsx
index f79e5a05..c5b414d7 100644
--- a/packages/client/src/pages/studies/StudyControl.tsx
+++ b/packages/client/src/pages/studies/StudyControl.tsx
@@ -1,48 +1,49 @@
-import { Typography } from '@mui/material';
-import { Control } from '../../components/Control.component';
+import { Typography, Box } from '@mui/material';
+import { useStudy } from '../../context/Study.context';
+import { DataGrid, GridColDef } from '@mui/x-data-grid';
+import DeleteIcon from '@mui/icons-material/DeleteOutlined';
+import { GridActionsCellItem } from '@mui/x-data-grid-pro';
+import { Study } from '../../graphql/graphql';
 
-// currently hardcoded values, but eventully
-// there will be a fetching function that retrieves project information
-const rows = [
-  {
-    id: 1,
-    name: 'Study Microsoft',
-    description: ' It is considered one of the Big Five American information technology companies, alongside Alphabet, Amazon, Apple, and Meta Platforms.'
-  },
-  { id: 2, name: 'Study IBM', description: 'You can define the prefix for generated group names and the owner/superior group in step 1 of the ISFACR security migration process.' },
-  {
-    id: 3,
-    name: 'Study APPLe',
-    description: 'The company was founded by Steven Paul Jobs, Ronald Gerald Wayne, and Stephen G. Wozniak on April 1, 1976 and is headquartered in Cupertino, CA.'
-  },
-  { id: 4, name: 'Study SpaceX', description: 'Falcon 9’s first stage has landed on the Just Read the Instructions droneship' },
-  { id: 5, name: 'Study Citadel', description: '5 Description of the object' },
-  {
-    id: 6,
-    name: 'Study Alphabet & Co',
-    description:
-      'But as of December, Page and cofounder Sergey Brin have stepped down from Alphabet altogether, making way for Google CEO Sundar Pichai to take the reins of the whole company. (Page and Brin are remaining on as board members and still hold controlling shares.)'
-  },
-  { id: 7, name: 'Study Pavement', description: '7 Description of the object' },
-  {
-    id: 8,
-    name: 'Study Blank Street',
-    description:
-      'The cappuccino (small, $3.75) is inoffensive. At every location, they’re made on identically programmed machines for consistency. I prefer a little more foam but what’s there is nice and velvety enough, if a little less compact than ideal, and it’s all fairly within the proportions of a cappuccino.'
-  },
-  {
-    id: 9,
-    name: 'Study Tatte',
-    description:
-      'The second floor features a beautiful coffee bar and event space with plenty of seats to take a baking class, enjoy nitro cold brew or coffee, enjoy breakfast or lunch with a friend or get work and homework done.'
-  }
-];
 
 export const StudyControl: React.FC = () => {
+  const { studies } = useStudy();
+  const columns: GridColDef[] = [
+    {
+      field: 'name',
+      headerName: 'Name',
+      width: 200,
+      editable: false
+    },
+    {
+      field: 'description',
+      headerName: 'Description',
+      width: 500,
+      editable: false
+    },
+    {
+      field: 'delete',
+      type: 'actions',
+      headerName: 'Delete',
+      width: 120,
+      maxWidth: 120,
+      cellClassName: 'delete',
+      getActions: () => {
+        return [<GridActionsCellItem icon={<DeleteIcon />} label="Delete" />];
+      }
+    }
+  ];
+
   return (
     <>
       <Typography variant='h3'>Study Control</Typography>
-      <Control tableRows={rows} />
+      <Box sx={{ maxWidth: '1000px', margin: 'auto' }}>
+        <DataGrid
+          rows={studies || []}
+          columns={columns}
+          getRowId={(row: Study) => row._id}
+        />
+      </Box>
     </>
   );
 };