diff --git a/packages/client/src/App.css b/packages/client/src/App.css
index 9c7629a8..c1c0939c 100644
--- a/packages/client/src/App.css
+++ b/packages/client/src/App.css
@@ -1,7 +1,6 @@
 #root {
-  max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 3rem;
   text-align: center;
 }
 
@@ -42,4 +41,4 @@
 
 .read-the-docs {
   color: #888;
-}
\ No newline at end of file
+}
diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
index 95bbcd4f..0eb8897a 100644
--- a/packages/client/src/App.tsx
+++ b/packages/client/src/App.tsx
@@ -25,23 +25,25 @@ import { CssBaseline, Box, styled } from '@mui/material';
 import { useState } from 'react';
 import { SideBar } from './components/SideBar';
 
-const drawerWidth = 240;
+const drawerWidth = 256;
 
-const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{ open?: boolean; }>(({ theme, open }) => ({
+const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })<{
+  open?: boolean;
+}>(({ theme, open }) => ({
   flexGrow: 1,
   padding: theme.spacing(3),
   transition: theme.transitions.create('margin', {
     easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
+    duration: theme.transitions.duration.leavingScreen
   }),
-  marginRight: -drawerWidth,
+  marginLeft: `-${drawerWidth}px`,
   ...(open && {
     transition: theme.transitions.create('margin', {
       easing: theme.transitions.easing.easeOut,
-      duration: theme.transitions.duration.enteringScreen,
+      duration: theme.transitions.duration.enteringScreen
     }),
-    marginRight: 0,
-  }),
+    marginLeft: 0
+  })
 }));
 
 function App() {
@@ -52,35 +54,37 @@ function App() {
       <BrowserRouter>
         <EnvironmentContextProvider>
           <AuthProvider>
-            <Box sx={{ display: 'flex' }}>
-              <CssBaseline />
+            <CssBaseline />
+            <Box>
               <NavBar drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
-                <Main open={drawerOpen}>
-                  <SideBar open={drawerOpen} drawerWidth={drawerWidth} />
-                  <Box sx={{ display: 'flex' }}>
-                    <Routes>
-                      <Route path={'/'} element={<HomePage />} />
-                      <Route path={'/callback'} element={<AuthCallback />} />
-                      <Route path={'/loginpage'} element={<LoginPage />} />
-                      <Route element={<AdminGuard />}>
-                        <Route path={'/project/new'} element={<NewProject />} />
-                        <Route path={'/project/controls'} element={<ProjectControl />} />
-                        <Route path={'/project/permissions'} element={<ProjectUserPermissions />} />
-                        <Route path={'/study/new'} element={<NewStudy />} />
-                        <Route path={'/study/controls'} element={<StudyControl />} />
-                        <Route path={'/study/permissions'} element={<StudyUserPermissions />} />
-                        <Route path={'/study/tags'} element={<DownloadTags />} />
-                        <Route path={'/successpage'} element={<SuccessPage />} />
-                        <Route path={'/dataset/controls'} element={<DatasetControls />} />
-                        <Route path={'/dataset/projectaccess'} element={<ProjectAccess />} />
-                        <Route path={'/study/contribute'} element={<ContributePage />} />
-                        <Route path={'/tagging'} element={<TagView />} />
-                        <Route path={'/logoutpage'} element={<LogoutPage />} />
-                      </Route>
-                    </Routes>
-                  </Box>
-                </Main>
+            </Box>
+            <Main open={drawerOpen}>
+              <Box sx={{ display: 'flex' }}>
+                <SideBar open={drawerOpen} drawerWidth={drawerWidth} />
+                <Box sx={{ flexGrow: 1, width: '90%' }}>
+                  <Routes>
+                    <Route path={'/'} element={<HomePage />} />
+                    <Route path={'/callback'} element={<AuthCallback />} />
+                    <Route path={'/loginpage'} element={<LoginPage />} />
+                    <Route element={<AdminGuard />}>
+                      <Route path={'/project/new'} element={<NewProject />} />
+                      <Route path={'/project/controls'} element={<ProjectControl />} />
+                      <Route path={'/project/permissions'} element={<ProjectUserPermissions />} />
+                      <Route path={'/study/new'} element={<NewStudy />} />
+                      <Route path={'/study/controls'} element={<StudyControl />} />
+                      <Route path={'/study/permissions'} element={<StudyUserPermissions />} />
+                      <Route path={'/study/tags'} element={<DownloadTags />} />
+                      <Route path={'/successpage'} element={<SuccessPage />} />
+                      <Route path={'/dataset/controls'} element={<DatasetControls />} />
+                      <Route path={'/dataset/projectaccess'} element={<ProjectAccess />} />
+                      <Route path={'/study/contribute'} element={<ContributePage />} />
+                      <Route path={'/tagging'} element={<TagView />} />
+                      <Route path={'/logoutpage'} element={<LogoutPage />} />
+                    </Route>
+                  </Routes>
+                </Box>
               </Box>
+            </Main>
           </AuthProvider>
         </EnvironmentContextProvider>
       </BrowserRouter>
diff --git a/packages/client/src/components/ControlComponent.tsx b/packages/client/src/components/ControlComponent.tsx
index 5930a6bc..7dae949f 100644
--- a/packages/client/src/components/ControlComponent.tsx
+++ b/packages/client/src/components/ControlComponent.tsx
@@ -1,4 +1,3 @@
-import { Box } from '@mui/material';
 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';
@@ -31,13 +30,15 @@ export const ControlComponent: React.FC<Table> = ({ tableRows }: Table) => {
     {
       field: 'name',
       headerName: 'Name',
-      width: 200,
+      flex: 1,
+      maxWidth: 200,
       editable: true
     },
     {
       field: 'description',
       headerName: 'Description',
-      width: 575,
+      flex: 1,
+      minWidth: 500,
       editable: true
     },
     {
@@ -53,32 +54,22 @@ export const ControlComponent: React.FC<Table> = ({ tableRows }: Table) => {
   ];
 
   return (
-    <Box sx={{ height: 800, width: '100%' }}>
-      <DataGrid
-        sx={{
-          '& .MuiDataGrid-cell': {
-            whiteSpce: 'initial !important',
-            lineHeight: '16px !important',
-            paddingTop: '10px !important',
-            paddingBottom: '10px !important'
+    <DataGrid
+      getRowHeight={() => 'auto'}
+      rows={rows}
+      columns={columns}
+      rowModesModel={rowModesModel}
+      onRowModesModelChange={handleRowModesModelChange}
+      initialState={{
+        pagination: {
+          paginationModel: {
+            pageSize: 5
           }
-        }}
-        getRowHeight={() => 'auto'}
-        rows={rows}
-        columns={columns}
-        rowModesModel={rowModesModel}
-        onRowModesModelChange={handleRowModesModelChange}
-        initialState={{
-          pagination: {
-            paginationModel: {
-              pageSize: 8
-            }
-          }
-        }}
-        pageSizeOptions={[5]}
-        checkboxSelection
-        disableRowSelectionOnClick
-      />
-    </Box>
+        }
+      }}
+      pageSizeOptions={[5]}
+      checkboxSelection
+      disableRowSelectionOnClick
+    />
   );
 };
diff --git a/packages/client/src/components/DatasetAccessComponent.tsx b/packages/client/src/components/DatasetAccessComponent.tsx
index 1fd50881..047b4be9 100644
--- a/packages/client/src/components/DatasetAccessComponent.tsx
+++ b/packages/client/src/components/DatasetAccessComponent.tsx
@@ -1,4 +1,4 @@
-import { Box, Switch } from '@mui/material';
+import { Switch } from '@mui/material';
 import useEnhancedEffect from '@mui/material/utils/useEnhancedEffect';
 import { DataGrid, GridColDef, GridRenderCellParams, useGridApiContext } from '@mui/x-data-grid';
 import { GridRowModesModel } from '@mui/x-data-grid-pro';
@@ -72,31 +72,22 @@ export const DatasetAccessComponent: React.FC<Table> = ({ tableRows }: Table) =>
   ];
 
   return (
-    <Box sx={{ height: 800, width: '100%', boxShadow: '1px 9px 15px darkgrey' }}>
-      <DataGrid
-        sx={{
-          '& .MuiDataGrid-cell': {
-            overflow: 'auto',
-            paddingTop: '8px !important',
-            paddingBottom: '8px !important'
+    <DataGrid
+      getRowHeight={() => 'auto'}
+      rows={rows}
+      columns={columns}
+      rowModesModel={rowModesModel}
+      onRowModesModelChange={handleRowModesModelChange}
+      initialState={{
+        pagination: {
+          paginationModel: {
+            pageSize: 10
           }
-        }}
-        getRowHeight={() => 'auto'}
-        rows={rows}
-        columns={columns}
-        rowModesModel={rowModesModel}
-        onRowModesModelChange={handleRowModesModelChange}
-        initialState={{
-          pagination: {
-            paginationModel: {
-              pageSize: 10
-            }
-          }
-        }}
-        pageSizeOptions={[5]}
-        checkboxSelection
-        disableRowSelectionOnClick
-      />
-    </Box>
+        }
+      }}
+      pageSizeOptions={[5]}
+      checkboxSelection
+      disableRowSelectionOnClick
+    />
   );
 };
diff --git a/packages/client/src/components/DatasetControlComponent.tsx b/packages/client/src/components/DatasetControlComponent.tsx
index 48c5707d..a8c46d59 100644
--- a/packages/client/src/components/DatasetControlComponent.tsx
+++ b/packages/client/src/components/DatasetControlComponent.tsx
@@ -1,4 +1,3 @@
-import { Box } from '@mui/material';
 import { DataGrid, GridColDef } from '@mui/x-data-grid';
 import { GridRowModesModel } from '@mui/x-data-grid-pro';
 import { useState } from 'react';
@@ -27,34 +26,22 @@ export const DatasetControlComponent: React.FC<Table> = ({ tableRows, columns }:
   };
 
   return (
-    <Box sx={{ height: 350, width: '100%', boxShadow: '1px 9px 15px darkgrey' }}>
-      <DataGrid
-        sx={{
-          '&.MuiDataGrid-root': {
-            fontWeight: 'normal'
-          },
-          '& .MuiDataGrid-cell': {
-            overflow: 'auto',
-            paddingTop: '8px !important',
-            paddingBottom: '8px !important'
+    <DataGrid
+      getRowHeight={() => 'auto'}
+      rows={rows}
+      columns={columns}
+      rowModesModel={rowModesModel}
+      onRowModesModelChange={handleRowModesModelChange}
+      initialState={{
+        pagination: {
+          paginationModel: {
+            pageSize: 5
           }
-        }}
-        getRowHeight={() => 'auto'}
-        rows={rows}
-        columns={columns}
-        rowModesModel={rowModesModel}
-        onRowModesModelChange={handleRowModesModelChange}
-        initialState={{
-          pagination: {
-            paginationModel: {
-              pageSize: 5
-            }
-          }
-        }}
-        pageSizeOptions={[5, 10, 15]}
-        checkboxSelection
-        disableRowSelectionOnClick
-      />
-    </Box>
+        }
+      }}
+      pageSizeOptions={[5, 10, 15]}
+      checkboxSelection
+      disableRowSelectionOnClick
+    />
   );
 };
diff --git a/packages/client/src/components/Dropdown.tsx b/packages/client/src/components/Dropdown.tsx
deleted file mode 100644
index bd3dfb9e..00000000
--- a/packages/client/src/components/Dropdown.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Accordion, Button, Link } from '@mui/material';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
-interface SubLink {
-  title: string;
-  link?: string;
-}
-
-interface Link {
-  name: string;
-  sublinks: SubLink[];
-}
-
-interface LinksProps {
-  links: Link[];
-}
-
-export const DropdownComponent: React.FC<LinksProps> = ({ links }: LinksProps) => {
-  return (
-    <div>
-      {links?.map((item: Link) => (
-        <Accordion key={item.name} disableGutters elevation={0} sx={{ '&:before': { display: 'none' } }}>
-          <AccordionSummary key={item.name} expandIcon={<ExpandMoreIcon />}>
-            <Link underline={'none'}>{item.name}</Link>
-          </AccordionSummary>
-          <AccordionDetails key={item.name}>
-            {item.sublinks?.map((sublink: SubLink) => (
-              <p key={sublink.title}>
-                <Button
-                  sx={{
-                    fontSize: '15px',
-                    color: 'black'
-                  }}
-                  key={sublink.title}
-                  href={`/${sublink.link}`}
-                >
-                  {sublink.title}
-                </Button>
-              </p>
-            ))}
-          </AccordionDetails>
-        </Accordion>
-      ))}
-    </div>
-  );
-};
diff --git a/packages/client/src/components/SideBar.tsx b/packages/client/src/components/SideBar.tsx
index 66d08766..374f8b1d 100644
--- a/packages/client/src/components/SideBar.tsx
+++ b/packages/client/src/components/SideBar.tsx
@@ -1,6 +1,6 @@
 import { FC, ReactNode, useState } from 'react';
 import { Collapse, Divider, Drawer, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
-import { ExpandMore, ExpandLess, School, Dataset, Work, Logout } from '@mui/icons-material';
+import { ExpandMore, ExpandLess, School, Dataset, Work, Logout, GroupWork } from '@mui/icons-material';
 import { useAuth } from '../context/AuthContext';
 import {useNavigate} from 'react-router-dom';
 
@@ -30,7 +30,7 @@ export const SideBar: FC<SideBarProps> = ({ open, drawerWidth }) => {
       icon: <School />,
       subItems: [
         { name: 'New Study', action: () => navigate('/study/new') },
-        { name: 'Study Control', action: () => navigate('/study/contols') },
+        { name: 'Study Control', action: () => navigate('/study/controls') },
         { name: 'User Permissions', action: () => navigate('/study/permissions') },
         { name: 'Entry Controls', action: () => navigate('/study/controls') },
         { name: 'Download Tags', action: () => navigate('/study/tags') }
@@ -45,6 +45,14 @@ export const SideBar: FC<SideBarProps> = ({ open, drawerWidth }) => {
         { name: 'Project Access', action: () => navigate('/dataset/projectaccess') }
       ]
     },
+    {
+      name: 'Contribute',
+      action: () => {},
+      icon: <GroupWork />,
+      subItems: [
+        { name: 'Tag in Study', action: () => navigate('/study/contribute') }
+      ]
+    },
     {
       name: 'Logout',
       action: logout,
@@ -63,6 +71,7 @@ export const SideBar: FC<SideBarProps> = ({ open, drawerWidth }) => {
           boxSizing: 'border-box',
           backgroundColor: '#103F68',
           color: 'white',
+          paddingTop: 18,
           mt: '64px'
         }
       }}
diff --git a/packages/client/src/components/TagView.tsx b/packages/client/src/components/TagView.tsx
index d0ef47c1..f2ab34b1 100644
--- a/packages/client/src/components/TagView.tsx
+++ b/packages/client/src/components/TagView.tsx
@@ -1,7 +1,7 @@
 import { JsonForms } from '@jsonforms/react';
 import { materialRenderers, materialCells } from '@jsonforms/material-renderers';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { Box, Button, Container } from '@mui/material';
+import { Box, Button, Container, Typography } from '@mui/material';
 import { useState } from 'react';
 
 export const TagView = () => {
@@ -49,7 +49,7 @@ export const TagView = () => {
         </Box>
       ) : (
         <Box>
-          <h4>No Entries Tagged</h4>
+          <Typography variant='h4'>No Entries Tagged</Typography>
           <Button variant="outlined" onClick={() => handleClick('')}>
             Navigate home
           </Button>
diff --git a/packages/client/src/index.css b/packages/client/src/index.css
index 2c3fac68..9ac59400 100644
--- a/packages/client/src/index.css
+++ b/packages/client/src/index.css
@@ -25,10 +25,9 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
   place-items: center;
-  min-width: 320px;
   min-height: 100vh;
+  padding: 10px;
 }
 
 h1 {
@@ -36,25 +35,6 @@ h1 {
   line-height: 1.1;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
diff --git a/packages/client/src/pages/contribute/Contribute.tsx b/packages/client/src/pages/contribute/Contribute.tsx
index c8685310..e97bf7bf 100644
--- a/packages/client/src/pages/contribute/Contribute.tsx
+++ b/packages/client/src/pages/contribute/Contribute.tsx
@@ -1,4 +1,4 @@
-import { Container, Typography, Box, Stack, Button } from '@mui/material';
+import { Container, Typography, Box, Stack, Button, Grid } from '@mui/material';
 import placeholder from './placeholder.png';
 import { useNavigate } from 'react-router-dom';
 
@@ -92,26 +92,25 @@ export const ContributePage: React.FC = () => {
   };
 
   return (
-    <Container sx={{ left: '5%', width: '90%', top: '100px', position: 'absolute' }}>
-      <Typography sx={{ left: '2%', position: 'absolute' }} variant="h5">
+    <Box>
+      <Typography variant='h2'>
         Study: {initialData.name}
       </Typography>
-      <Box sx={{ position: 'absolute', width: '100%', top: '60px' }}>
-        {initialData.image && <img src={initialData.image} style={{ position: 'absolute', width: '45%', left: '1%' }} />}
-        <Stack spacing={3} direction="column" sx={{ width: '45%', right: '1%', position: 'absolute' }}>
-          <Typography variant="body1">{initialData.complete ? 'Study Training' : 'Study Tagging'}</Typography>
-          <Typography variant="body2">Study: {initialData.name}</Typography>
-          <Typography variant="body2">Description: {initialData.description}</Typography>
-          <Typography variant="body2">Instructions: {initialData.instructions}</Typography>
+      <Box sx={{ justifyContent: 'center' }}>
+        <Stack spacing={3} direction='column' sx={{ width: '30%' }}>
+          <Typography variant='h3'>{initialData.complete ? 'Study Training' : 'Study Tagging'}</Typography>
+          <Typography variant='body2'>Study: {initialData.name}</Typography>
+          <Typography variant='body2'>Description: {initialData.description}</Typography>
+          <Typography variant='body2'>Instructions: {initialData.instructions}</Typography>
           {initialData.complete ? (
-            <Typography variant="body2">Training Complete! Reach out to your study administrator to get access to tagging</Typography>
+            <Typography variant='body2'>Training Complete! Reach out to your study administrator to get access to tagging</Typography>
           ) : (
-            <Button variant="outlined" sx={{ width: '40%', color: 'black' }} onClick={handleSubmit}>
+            <Button variant='outlined' onClick={handleSubmit} sx={{ width: '100px' }}>
               Enter tagging
             </Button>
           )}
         </Stack>
       </Box>
-    </Container>
+    </Box>
   );
 };
diff --git a/packages/client/src/pages/datasets/DatasetControls.tsx b/packages/client/src/pages/datasets/DatasetControls.tsx
index bd21fbfe..fce4c3a3 100644
--- a/packages/client/src/pages/datasets/DatasetControls.tsx
+++ b/packages/client/src/pages/datasets/DatasetControls.tsx
@@ -97,8 +97,8 @@ export const DatasetControls: React.FC = () => {
   };
 
   return (
-    <Box sx={{ position: 'absolute', top: '8%', left: '2.5%', right: '2.5%' }}>
-      <h3 style={{ top: '10%', paddingBottom: '10px' }}>Dataset Controls</h3>
+    <>
+      <Typography variant='h3'>Dataset Controls</Typography>
       <Box sx={{ display: 'flex', paddingBottom: '20px' }}>
         <Box sx={{ width: '22%', height: '10%', display: 'flex', flexDirection: 'row', justifyContent: 'space-around' }}>
           <IconButton sx={{ color: 'orange', right: '-3%' }} onClick={() => handleClick('add')}>
@@ -136,6 +136,6 @@ export const DatasetControls: React.FC = () => {
           </Accordion>
         ))}
       </Box>
-    </Box>
+    </>
   );
 };
diff --git a/packages/client/src/pages/datasets/ProjectAccess.tsx b/packages/client/src/pages/datasets/ProjectAccess.tsx
index 936468bd..c41c8071 100644
--- a/packages/client/src/pages/datasets/ProjectAccess.tsx
+++ b/packages/client/src/pages/datasets/ProjectAccess.tsx
@@ -35,7 +35,7 @@ const rows = [
 
 export const ProjectAccess: React.FC = () => {
   return (
-    <Box sx={{ position: 'absolute', top: '8%', left: '2.5%', right: '2.5%' }}>
+    <>
       <Typography variant="h5">Project Access</Typography>
       <Accordion disableGutters>
         <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
@@ -63,6 +63,6 @@ export const ProjectAccess: React.FC = () => {
           </Container>
         </AccordionDetails>
       </Accordion>
-    </Box>
+    </>
   );
 };
diff --git a/packages/client/src/pages/projects/NewProject.tsx b/packages/client/src/pages/projects/NewProject.tsx
index 304dea4e..824b3313 100644
--- a/packages/client/src/pages/projects/NewProject.tsx
+++ b/packages/client/src/pages/projects/NewProject.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { Button, Container } from '@mui/material';
+import { Button } from '@mui/material';
 import { useState } from 'react';
 import { materialRenderers, materialCells } from '@jsonforms/material-renderers';
 import { JsonForms } from '@jsonforms/react';
@@ -73,11 +73,11 @@ export const NewProject: React.FC = () => {
   };
 
   return (
-    <Container sx={{ left: '2%', width: '96%', top: '100px', position: 'absolute' }}>
+    <>
       <JsonForms schema={schema} uischema={uischema} data={data} renderers={materialRenderers} cells={materialCells} onChange={({ data }) => handleChange(data)} />
-      <Button disabled={error} sx={{ marginTop: '35px', position: 'absolute', right: '5%' }} variant="contained" onClick={handleSubmit}>
+      <Button disabled={error} variant="contained" onClick={handleSubmit}>
         Submit
       </Button>
-    </Container>
+    </>
   );
 };
diff --git a/packages/client/src/pages/projects/ProjectControl.tsx b/packages/client/src/pages/projects/ProjectControl.tsx
index 6c525d10..2e380beb 100644
--- a/packages/client/src/pages/projects/ProjectControl.tsx
+++ b/packages/client/src/pages/projects/ProjectControl.tsx
@@ -1,4 +1,4 @@
-import { Box, Container } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { ControlComponent } from '../../components/ControlComponent';
 
 // currently hardcoded values, but eventully
@@ -30,14 +30,12 @@ const rows = [
 
 const ProjectControl: React.FC = () => {
   return (
-    <Container sx={{ position: 'absolute', top: '75px', left: '1%', right: '1%' }}>
-      <Container sx={{ width: '100%', display: 'flex', flexDirection: 'column', justifyContext: 'space-between' }}>
-        <h3 style={{ top: '10%', paddingBottom: '10px' }}>Project Control</h3>
-        <Box>
-          <ControlComponent tableRows={rows} />
-        </Box>
-      </Container>
-    </Container>
+    <>
+      <Typography variant='h3'>Project Control</Typography>
+      <Box>
+        <ControlComponent tableRows={rows} />
+      </Box>
+    </>
   );
 };
 
diff --git a/packages/client/src/pages/projects/ProjectUserPermissions.tsx b/packages/client/src/pages/projects/ProjectUserPermissions.tsx
index 7dc85cac..003a8994 100644
--- a/packages/client/src/pages/projects/ProjectUserPermissions.tsx
+++ b/packages/client/src/pages/projects/ProjectUserPermissions.tsx
@@ -1,4 +1,4 @@
-import { Box, Switch } from '@mui/material';
+import { Switch, Typography } from '@mui/material';
 import useEnhancedEffect from '@mui/material/utils/useEnhancedEffect';
 import { DataGrid, GridColDef, GridRenderCellParams, useGridApiContext } from '@mui/x-data-grid';
 import { GridRowModesModel } from '@mui/x-data-grid-pro';
@@ -94,17 +94,9 @@ export const ProjectUserPermissions: React.FC = () => {
   ];
 
   return (
-    <Box sx={{ height: 800, width: '100%', position: 'absolute', top: '75px', left: '1%', right: '1%' }}>
-      <h3 style={{ top: '10%', paddingBottom: '10px' }}>User Permissions</h3>
+    <>
+      <Typography variant='h3'>User Permissions</Typography>
       <DataGrid
-        sx={{
-          width: '100%',
-          position: 'absolute',
-          '& .MuiDataGrid-cell': {
-            paddingTop: '6px !important',
-            paddingBottom: '8px !important'
-          }
-        }}
         getRowHeight={() => 'auto'}
         rows={rows}
         columns={columns}
@@ -113,7 +105,7 @@ export const ProjectUserPermissions: React.FC = () => {
         initialState={{
           pagination: {
             paginationModel: {
-              pageSize: 8
+              pageSize: 5
             }
           }
         }}
@@ -121,6 +113,6 @@ export const ProjectUserPermissions: React.FC = () => {
         checkboxSelection
         disableRowSelectionOnClick
       />
-    </Box>
+    </>
   );
 };
diff --git a/packages/client/src/pages/studies/DownloadTags.tsx b/packages/client/src/pages/studies/DownloadTags.tsx
index df5a47f7..210011a7 100644
--- a/packages/client/src/pages/studies/DownloadTags.tsx
+++ b/packages/client/src/pages/studies/DownloadTags.tsx
@@ -1,9 +1,9 @@
-import { Button, Container } from '@mui/material';
+import { Button, Container, Typography } from '@mui/material';
 
 export const DownloadTags: React.FC = () => {
   return (
     <Container sx={{ position: 'center', display: 'flex', flexDirection: 'column', justifyContext: 'space-between' }}>
-      <h3 style={{ marginLeft: 'auto', marginRight: 'auto', top: '10%', paddingBottom: '10px' }}>Download Tags</h3>
+      <Typography variant='h3'>Download Tags</Typography>
       <Button variant="outlined" sx={{ marginLeft: 'auto', marginRight: 'auto', width: 200 }}>
         Download Tag CSV
       </Button>
diff --git a/packages/client/src/pages/studies/NewStudy.tsx b/packages/client/src/pages/studies/NewStudy.tsx
index 1361bfd1..d8c4e263 100644
--- a/packages/client/src/pages/studies/NewStudy.tsx
+++ b/packages/client/src/pages/studies/NewStudy.tsx
@@ -36,7 +36,7 @@ export const NewStudy: React.FC = () => {
   }
 
   return (
-    <Container sx={{ position: 'absolute', left: '-5%', right: '-5%', alignItems: 'baseline', width: '100%', top: '100px', display: 'flex', flexDirection: 'column' }}>
+    <Container sx={{ flexDirection: 'column' }}>
       <Typography sx={{ margin: '10px 0px 15px 10px' }} variant="h5">
         Create New Study
       </Typography>
diff --git a/packages/client/src/pages/studies/StudyControl.tsx b/packages/client/src/pages/studies/StudyControl.tsx
index de2e6afc..3cce760a 100644
--- a/packages/client/src/pages/studies/StudyControl.tsx
+++ b/packages/client/src/pages/studies/StudyControl.tsx
@@ -1,4 +1,4 @@
-import { Box, Container } from '@mui/material';
+import {Typography} from '@mui/material';
 import { ControlComponent } from '../../components/ControlComponent';
 
 // currently hardcoded values, but eventully
@@ -40,13 +40,9 @@ const rows = [
 
 export const StudyControl: React.FC = () => {
   return (
-    <Container sx={{ position: 'absolute', top: '75px', left: '1%', right: '1%' }}>
-      <Container sx={{ width: '100%', display: 'flex', flexDirection: 'column', justifyContext: 'space-between' }}>
-        <h3 style={{ top: '10%', paddingBottom: '10px' }}>Study Control</h3>
-        <Box sx={{ position: '-webkit-sticky' }}>
-          <ControlComponent tableRows={rows} />
-        </Box>
-      </Container>
-    </Container>
+    <>
+      <Typography variant='h3'>Study Control</Typography>
+      <ControlComponent tableRows={rows} />
+    </>
   );
 };
diff --git a/packages/client/src/pages/studies/UserPermissions.tsx b/packages/client/src/pages/studies/UserPermissions.tsx
index c277b730..90718c7c 100644
--- a/packages/client/src/pages/studies/UserPermissions.tsx
+++ b/packages/client/src/pages/studies/UserPermissions.tsx
@@ -1,4 +1,4 @@
-import { Box, Switch } from '@mui/material';
+import { Box, Switch, Typography } from '@mui/material';
 import useEnhancedEffect from '@mui/material/utils/useEnhancedEffect';
 import { DataGrid, GridColDef, GridRenderCellParams, useGridApiContext } from '@mui/x-data-grid';
 import { GridRowModesModel } from '@mui/x-data-grid-pro';
@@ -68,33 +68,42 @@ export const StudyUserPermissions: React.FC = () => {
   };
 
   const columns: GridColDef[] = [
-    { field: 'id', headerName: 'ID', flex: 0.3 },
+    {
+      field: 'id',
+      headerName: 'ID',
+      flex: 1,
+      maxWidth: 100
+    },
     {
       field: 'name',
       headerName: 'Name',
-      flex: 0.9,
-      editable: true
+      editable: true,
+      flex: 1,
+      maxWidth: 300
     },
     {
       field: 'username',
       headerName: 'Username',
-      flex: 0.9,
-      editable: true
+      editable: true,
+      flex: 1,
+      maxWidth: 300
     },
     {
       field: 'email',
       headerName: 'Email',
-      flex: 1.1,
+      flex: 1,
+      maxWidth: 300,
       editable: true
     },
     {
       field: 'adminSwitch',
       type: 'boolean',
       editable: true,
+      maxWidth: 200,
+      flex: 1,
       headerName: 'Study Admin',
       renderCell: (params) => <Switch checked={params.value} />,
       renderEditCell: (params) => <SwitchEditInputCell {...params} />,
-      flex: 0.75
     },
     {
       field: 'visibleSwitch',
@@ -102,31 +111,26 @@ export const StudyUserPermissions: React.FC = () => {
       editable: true,
       headerName: 'Study Visible',
       renderCell: (params) => <Switch checked={params.value} />,
+      maxWidth: 200,
+      flex: 1,
       renderEditCell: (params) => <SwitchEditInputCell {...params} />,
-      flex: 0.75
     },
     {
       field: 'switch',
       type: 'boolean',
       editable: true,
+      maxWidth: 200,
+      flex: 1,
       headerName: 'Contribute',
       renderCell: (params) => <Switch checked={params.value} />,
       renderEditCell: (params) => <SwitchEditInputCell {...params} />,
-      flex: 0.75
     }
   ];
 
   return (
-    <Box sx={{ height: 800, width: '100%', position: 'absolute', top: '75px', left: '1%', right: '1%' }}>
-      <h3 style={{ top: '10%', paddingBottom: '10px' }}>User Permissions</h3>
+    <>
+      <Typography variant='h3'>User Permissions</Typography>
       <DataGrid
-        sx={{
-          '& .MuiDataGrid-cell': {
-            overflow: 'auto',
-            paddingTop: '8px !important',
-            paddingBottom: '8px !important'
-          }
-        }}
         getRowHeight={() => 'auto'}
         rows={rows}
         columns={columns}
@@ -143,6 +147,6 @@ export const StudyUserPermissions: React.FC = () => {
         checkboxSelection
         disableRowSelectionOnClick
       />
-    </Box>
+    </>
   );
 };