diff --git a/src/components/Campaigns/CloneCampaign.tsx b/src/components/Campaigns/CloneCampaign.tsx
index a8915a61f..088c31ab4 100644
--- a/src/components/Campaigns/CloneCampaign.tsx
+++ b/src/components/Campaigns/CloneCampaign.tsx
@@ -1,17 +1,18 @@
 import {
   Box,
   Button,
-  Chip,
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle,
   LinearProgress,
+  Tooltip,
 } from "@mui/material";
 import {
-  CampaignFragment,
+  CampaignSummaryFragment,
   useCreateCampaignMutation,
+  useLoadCampaignLazyQuery,
 } from "graphql/campaign.generated";
 import { useHistory } from "react-router-dom";
 import { useContext, useState } from "react";
@@ -21,20 +22,21 @@ import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import { useUser } from "auth/hooks/queries/useUser";
 import { FilterContext } from "state/context";
+import { CampaignFormat, CampaignSource } from "graphql/types";
 
 interface Props {
-  campaignFragment?: CampaignFragment | null;
-  useChip?: boolean;
+  campaign?: CampaignSummaryFragment;
   disabled?: boolean;
 }
 
-export function CloneCampaign({ campaignFragment, useChip, disabled }: Props) {
+export function CloneCampaign({ campaign, disabled }: Props) {
   const { advertiser } = useAdvertiser();
   const { fromDate } = useContext(FilterContext);
   const { userId } = useUser();
   const history = useHistory();
   const [open, setOpen] = useState(false);
 
+  const [getCampaign, { loading: getLoading }] = useLoadCampaignLazyQuery();
   const [copyCampaign, { loading }] = useCreateCampaignMutation({
     refetchQueries: [
       {
@@ -54,59 +56,72 @@ export function CloneCampaign({ campaignFragment, useChip, disabled }: Props) {
     },
   });
 
+  const doClone = async () => {
+    if (campaign) {
+      getCampaign({
+        variables: { id: campaign.id },
+        onCompleted(data) {
+          if (data.campaign) {
+            copyCampaign({
+              variables: {
+                input: createCampaignFromFragment(data.campaign, userId),
+              },
+            });
+          } else {
+            alert("Unable to clone campaign");
+          }
+        },
+      });
+    }
+  };
+
+  const canClone =
+    campaign &&
+    campaign.source === CampaignSource.SelfServe &&
+    [CampaignFormat.PushNotification, CampaignFormat.NewsDisplayAd].includes(
+      campaign.format,
+    );
   return (
     <Box>
-      {useChip ? (
-        <Chip
-          color="primary"
-          label="Clone"
-          onClick={() => {
-            setOpen(true);
-          }}
-          disabled={loading || !campaignFragment || disabled}
-          icon={<ContentCopyIcon fontSize="small" />}
-        />
-      ) : (
-        <Button
-          color="primary"
-          variant="text"
-          size="small"
-          onClick={(e) => {
-            e.preventDefault();
-            setOpen(true);
-          }}
-          disabled={loading || !campaignFragment || disabled}
-          startIcon={<ContentCopyIcon />}
-        >
-          Clone Campaign
-        </Button>
-      )}
+      <Tooltip
+        title={
+          !campaign ? "Select one campaign to clone" : `Clone ${campaign.name}`
+        }
+      >
+        <span>
+          <Button
+            color="primary"
+            variant="text"
+            size="small"
+            onClick={(e) => {
+              e.preventDefault();
+              setOpen(true);
+            }}
+            disabled={!canClone || loading || getLoading || disabled}
+            startIcon={<ContentCopyIcon />}
+          >
+            Clone
+          </Button>
+        </span>
+      </Tooltip>
       <Dialog open={open} onClose={() => setOpen(false)}>
-        <DialogTitle>{`Copy campaign: "${campaignFragment?.name}"?`}</DialogTitle>
+        <DialogTitle>{`Copy campaign: "${campaign?.name}"?`}</DialogTitle>
         <DialogContent>
           <DialogContentText>
             Cloning a campaign will take all properties including ad sets and
             ads, and create a new draft campaign with them.
           </DialogContentText>
-          {loading && <LinearProgress />}
+          {(loading || getLoading) && <LinearProgress />}
         </DialogContent>
         <DialogActions>
           <Button onClick={() => setOpen(false)} disabled={loading}>
             Cancel
           </Button>
           <Button
-            disabled={loading}
+            disabled={loading || getLoading}
             onClick={(e) => {
               e.preventDefault();
-              if (campaignFragment) {
-                copyCampaign({
-                  variables: {
-                    input: createCampaignFromFragment(campaignFragment, userId),
-                  },
-                });
-              } else {
-                alert("No campaign selected");
-              }
+              doClone();
             }}
           >
             Clone
diff --git a/src/components/Creatives/CreativeList.tsx b/src/components/Creatives/CreativeList.tsx
index 1ec083786..650c265f9 100644
--- a/src/components/Creatives/CreativeList.tsx
+++ b/src/components/Creatives/CreativeList.tsx
@@ -10,15 +10,9 @@ import MiniSideBar from "components/Drawer/MiniSideBar";
 import { Box, Link, List, Typography } from "@mui/material";
 import { Status } from "components/Campaigns/Status";
 import { Link as RouterLink } from "react-router-dom";
-import {
-  DataGrid,
-  GridColDef,
-  GridToolbarColumnsButton,
-  GridToolbarContainer,
-  GridToolbarFilterButton,
-  GridToolbarQuickFilter,
-} from "@mui/x-data-grid";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
 import { CreativeStatusSwitch } from "components/Creatives/CreativeStatusSwitch";
+import { CustomToolbar } from "components/Datagrid/CustomToolbar";
 
 const ALLOWED_TYPES = ["notification_all_v1", "inline_content_all_v1"];
 export function CreativeList() {
@@ -81,17 +75,6 @@ export function CreativeList() {
     },
   ];
 
-  function CustomToolbar() {
-    return (
-      <GridToolbarContainer>
-        <GridToolbarColumnsButton />
-        <GridToolbarFilterButton />
-        <Box flex={1} />
-        <GridToolbarQuickFilter />
-      </GridToolbarContainer>
-    );
-  }
-
   const creatives = [...(data?.advertiser?.creatives ?? [])].filter((c) =>
     ALLOWED_TYPES.includes(c.type.code),
   );
@@ -107,32 +90,34 @@ export function CreativeList() {
         header="Creatives"
         sx={{
           flexGrow: 1,
-          mr: 2,
-          width: "100%",
+          overflowX: "auto",
+          mr: 1,
         }}
       >
-        <DataGrid
-          loading={loading}
-          rows={creatives}
-          columns={columns}
-          density="standard"
-          autoHeight
-          disableRowSelectionOnClick
-          hideFooterSelectedRowCount
-          rowHeight={60}
-          slots={{ toolbar: CustomToolbar }}
-          sx={{ borderStyle: "none" }}
-          initialState={{
-            sorting: {
-              sortModel: [{ field: "createdAt", sort: "desc" }],
-            },
-            pagination: {
-              paginationModel: {
-                pageSize: 10,
+        <Box>
+          <DataGrid
+            loading={loading}
+            rows={creatives}
+            columns={columns}
+            density="standard"
+            autoHeight
+            disableRowSelectionOnClick
+            hideFooterSelectedRowCount
+            rowHeight={60}
+            slots={{ toolbar: CustomToolbar }}
+            sx={{ borderStyle: "none" }}
+            initialState={{
+              sorting: {
+                sortModel: [{ field: "createdAt", sort: "desc" }],
               },
-            },
-          }}
-        />
+              pagination: {
+                paginationModel: {
+                  pageSize: 10,
+                },
+              },
+            }}
+          />
+        </Box>
       </CardContainer>
     </MiniSideBar>
   );
diff --git a/src/components/Datagrid/CustomToolbar.tsx b/src/components/Datagrid/CustomToolbar.tsx
new file mode 100644
index 000000000..515200eb6
--- /dev/null
+++ b/src/components/Datagrid/CustomToolbar.tsx
@@ -0,0 +1,20 @@
+import {
+  GridToolbarColumnsButton,
+  GridToolbarContainer,
+  GridToolbarFilterButton,
+  GridToolbarQuickFilter,
+} from "@mui/x-data-grid";
+import { Box } from "@mui/material";
+import { PropsWithChildren } from "react";
+
+export function CustomToolbar({ children }: PropsWithChildren) {
+  return (
+    <GridToolbarContainer>
+      {children}
+      <GridToolbarColumnsButton />
+      <GridToolbarFilterButton />
+      <Box flex={1} />
+      <GridToolbarQuickFilter />
+    </GridToolbarContainer>
+  );
+}
diff --git a/src/components/EnhancedTable/renderers.tsx b/src/components/Datagrid/renderers.tsx
similarity index 93%
rename from src/components/EnhancedTable/renderers.tsx
rename to src/components/Datagrid/renderers.tsx
index 5594de06e..78efd319a 100644
--- a/src/components/EnhancedTable/renderers.tsx
+++ b/src/components/Datagrid/renderers.tsx
@@ -1,8 +1,7 @@
 import { Box, Tooltip } from "@mui/material";
 import _ from "lodash";
 import { format, formatDistanceToNow, parseISO } from "date-fns";
-import { CellValue } from "./EnhancedTable";
-import { ReactChild, ReactNode, useContext } from "react";
+import { ReactElement, ReactNode, useContext } from "react";
 import { formatInTimeZone } from "date-fns-tz";
 import enUS from "date-fns/locale/en-US";
 import {
@@ -12,18 +11,18 @@ import {
   useUpdateCampaignMutation,
 } from "graphql/campaign.generated";
 import { useUpdateAdSetMutation } from "graphql/ad-set.generated";
-import { OnOff } from "../Switch/OnOff";
+import { OnOff } from "components/Switch/OnOff";
 import { displayFromCampaignState } from "util/displayState";
 import { CampaignExtras } from "user/adSet/AdSetList";
 import { FilterContext } from "state/context";
 import { refetchAdvertiserCampaignsQuery } from "graphql/advertiser.generated";
 import { UpdateAdSetInput } from "graphql/types";
 
-export type CellValueRenderer = (value: CellValue) => ReactNode;
+export type CellValueRenderer = (value: any) => ReactNode;
 const ADS_DEFAULT_TIMEZONE = "America/New_York";
 const TOOLTIP_FORMAT = "E d LLL yyyy HH:mm:ss zzz";
 
-function formatDateForTooltip(dt: Date): ReactChild {
+function formatDateForTooltip(dt: Date): ReactElement {
   return (
     <>
       <Box>
diff --git a/src/components/EnhancedTable/EnhancedTable.tsx b/src/components/EnhancedTable/EnhancedTable.tsx
deleted file mode 100644
index dd6716d8d..000000000
--- a/src/components/EnhancedTable/EnhancedTable.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import {
-  Box,
-  Grid,
-  Skeleton,
-  SortDirection,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableCellProps,
-  TableContainer,
-  TableFooter,
-  TableHead,
-  TablePagination,
-  TableRow,
-} from "@mui/material";
-import _ from "lodash";
-import { ChangeEvent, ReactNode, useState } from "react";
-import { EnhancedTableHeader } from "./EnhancedTableHeader";
-import { EnhancedTableRow } from "./EnhancedTableRow";
-import { FilterInput } from "./FilterInput";
-import { CellValueRenderer, StandardRenderers } from "./renderers";
-import { SxProps } from "@mui/system";
-
-export type CellValue = string | string[] | number | boolean | undefined | null;
-
-export interface ColumnDescriptor<T> {
-  // text title to be shown in header
-  title: string;
-
-  // how to obtain the raw cell value from the row
-  // this is used both to pass to a CellValueRenderer, and used for
-  // filtering and sorting
-  value: (row: T) => CellValue;
-
-  // how to convert the raw cell value into a react node
-  //  default: StandardRenderers.string
-  renderer?: CellValueRenderer;
-
-  // in some cases rendering a cell is not just a matter of taking the value and presenting it.
-  // for example, rendering a link typically requires the cell value and also the id.
-  // so an extendedRenderer, if defined, is used instead, which has access to the full row,
-  // but is less genericisable.
-  extendedRenderer?: undefined | ((row: T) => ReactNode);
-
-  // is this column sortable?
-  //  default: true
-  sortable?: boolean;
-
-  // style to apply to this column's header and cells
-  //  use this to e.g. make fixed width using maxWidth or width
-  sx?: SxProps;
-
-  // default left
-  align?: TableCellProps["align"];
-}
-
-interface EnhancedTableProps<T> {
-  rows: T[] | undefined;
-  columns: ColumnDescriptor<T>[];
-  // defaults to 0
-  initialSortColumn?: number;
-  initialSortDirection?: SortDirection;
-  initialRowsPerPage?: 5 | 10 | 25 | 100 | -1;
-
-  additionalFilters?: ReactNode;
-  filterable?: boolean;
-}
-
-// internally, we use a column accessor rather than the descriptor directly.
-// This has default values populated and some helper methods
-export interface ColumnAccessor<T>
-  extends Pick<ColumnDescriptor<T>, "title" | "sx" | "align"> {
-  sortable: boolean;
-  render: (r: T) => ReactNode;
-  getSortValue: (r: T) => string | number | undefined;
-  matchesFilter: (r: T, filter: string) => boolean;
-}
-
-function mkColumnAccessor<T>(
-  descriptor: ColumnDescriptor<T>,
-): ColumnAccessor<T> {
-  const {
-    title,
-    value,
-    renderer = StandardRenderers.string,
-    extendedRenderer,
-    sortable = true,
-    sx,
-    align,
-  } = descriptor;
-  return {
-    title,
-    sortable,
-    sx,
-    align,
-    render: (row) => {
-      return extendedRenderer ? extendedRenderer(row) : renderer(value(row));
-    },
-    getSortValue: (row) => {
-      const v = value(row);
-      if (_.isString(v)) {
-        return v.toLowerCase().trim();
-      }
-      if (_.isNumber(v)) {
-        return v;
-      }
-      if (_.isBoolean(v)) {
-        return v ? 1 : 0;
-      }
-      return undefined;
-    },
-    matchesFilter: (row, filter) => {
-      const columnValue = value(row);
-      return (
-        _.isString(columnValue) && columnValue.toLowerCase().includes(filter)
-      );
-    },
-  };
-}
-
-const LoadingSkeleton = ({ cols, rows }: { cols: number; rows: number }) => {
-  return (
-    <>
-      {_.times(rows, (idx) => (
-        <TableRow key={idx}>
-          {_.times(cols, (idx2) => (
-            <TableCell key={idx2}>
-              <Skeleton variant="text" />
-            </TableCell>
-          ))}
-        </TableRow>
-      ))}
-    </>
-  );
-};
-
-export function EnhancedTable<T>(props: EnhancedTableProps<T>) {
-  const [order, setOrder] = useState<SortDirection>(
-    props.initialSortDirection ?? "asc",
-  );
-  const [orderBy, setOrderBy] = useState<number>(props.initialSortColumn ?? 0);
-  const [filter, setFilter] = useState<string>("");
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState<number>(
-    props.initialRowsPerPage ?? 25,
-  );
-
-  const { rows } = props;
-
-  const columns = props.columns.map(mkColumnAccessor);
-
-  const processSortUpdate = (col: number) => {
-    if (orderBy === col) {
-      setOrder((current) => (current === "asc" ? "desc" : "asc"));
-    } else {
-      setOrderBy(col);
-      setOrder("asc");
-      setPage(0);
-    }
-  };
-
-  const handleChangePage = (_event: unknown, newPage: number) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (event: ChangeEvent<HTMLInputElement>) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  const handleFilterUpdate = (newFilter: string) => {
-    if (!_.isEmpty(newFilter)) {
-      setPage(0);
-    }
-    setFilter(newFilter.toLowerCase());
-  };
-
-  const matchesFilter = (row: T) => {
-    if (_.isEmpty(filter)) return true;
-    return _.some(columns, (c) => c.matchesFilter(row, filter));
-  };
-
-  const filteredRows = _(rows)
-    .filter((r) => matchesFilter(r))
-    .orderBy((r) => columns[orderBy].getSortValue(r), order)
-    .valueOf();
-
-  const data =
-    rowsPerPage === -1
-      ? filteredRows
-      : filteredRows.slice(
-          page * rowsPerPage,
-          page * rowsPerPage + rowsPerPage,
-        );
-
-  return (
-    <Stack spacing={3}>
-      <Grid container>
-        <Grid item sm={8} xs={12}>
-          <Box>{props.additionalFilters}</Box>
-        </Grid>
-        {props.filterable !== false && (
-          <Grid item sm={4} xs={12}>
-            <FilterInput filter={filter} setFilter={handleFilterUpdate} />
-          </Grid>
-        )}
-      </Grid>
-      <TableContainer>
-        <Table size="small">
-          <TableHead>
-            <TableRow>
-              {columns.map((c, idx) => (
-                <EnhancedTableHeader
-                  key={idx}
-                  column={c}
-                  sortDirection={orderBy === idx ? order : false}
-                  onSortClick={() => processSortUpdate(idx)}
-                />
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {_.isNil(rows) ? (
-              <LoadingSkeleton
-                cols={columns.length}
-                rows={rowsPerPage > 0 ? rowsPerPage : 20}
-              />
-            ) : (
-              data.map((r, idx) => (
-                // TODO: key here should be the idenfier of the row
-                <EnhancedTableRow key={idx} columns={columns} row={r} />
-              ))
-            )}
-          </TableBody>
-          <TableFooter>
-            <TableRow>
-              <TablePagination
-                rowsPerPageOptions={[
-                  5,
-                  10,
-                  25,
-                  100,
-                  { value: -1, label: "All" },
-                ]}
-                count={filteredRows.length}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    </Stack>
-  );
-}
diff --git a/src/components/EnhancedTable/EnhancedTableHeader.tsx b/src/components/EnhancedTable/EnhancedTableHeader.tsx
deleted file mode 100644
index d921721ba..000000000
--- a/src/components/EnhancedTable/EnhancedTableHeader.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { SortDirection, TableCell, TableSortLabel } from "@mui/material";
-import { ColumnAccessor } from "./EnhancedTable";
-
-interface EnhancedTableHeaderProps<T> {
-  column: ColumnAccessor<T>;
-  sortDirection: SortDirection;
-  onSortClick: () => void;
-}
-
-export function EnhancedTableHeader<T>(props: EnhancedTableHeaderProps<T>) {
-  return (
-    <TableCell
-      sortDirection={props.sortDirection}
-      sx={props.column.sx}
-      align={props.column.align}
-    >
-      {props.column.sortable ? (
-        <TableSortLabel
-          active={props.sortDirection !== false}
-          direction={props.sortDirection || "asc"}
-          onClick={props.onSortClick}
-        >
-          {props.column.title}
-        </TableSortLabel>
-      ) : (
-        props.column.title
-      )}
-    </TableCell>
-  );
-}
diff --git a/src/components/EnhancedTable/EnhancedTableRow.tsx b/src/components/EnhancedTable/EnhancedTableRow.tsx
deleted file mode 100644
index 07b3c475d..000000000
--- a/src/components/EnhancedTable/EnhancedTableRow.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { TableCell, TableRow } from "@mui/material";
-import { ColumnAccessor } from "./EnhancedTable";
-
-interface EnhancedTableRowProps<T> {
-  columns: ColumnAccessor<T>[];
-  row: T;
-}
-
-export function EnhancedTableRow<T>({
-  columns,
-  row,
-}: EnhancedTableRowProps<T>) {
-  return (
-    <TableRow>
-      {columns.map((c, idx) => (
-        <TableCell key={idx} sx={c.sx} align={c.align}>
-          {c.render(row)}
-        </TableCell>
-      ))}
-    </TableRow>
-  );
-}
diff --git a/src/components/EnhancedTable/FilterInput.tsx b/src/components/EnhancedTable/FilterInput.tsx
deleted file mode 100644
index ca6c786e1..000000000
--- a/src/components/EnhancedTable/FilterInput.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Box, TextField } from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
-import { useMemo, useState } from "react";
-import _ from "lodash";
-
-interface Props {
-  filter: string;
-  setFilter: (newValue: string) => void;
-}
-
-export const FilterInput = (props: Props) => {
-  // to retain responsiveness of the form, whilst still not constantly re-filtering the list,
-  // we keep our own state here that updates immediately, and debounce the updates to
-  // the caller
-  const [filterField, setFilterField] = useState(props.filter);
-
-  // HT: https://dmitripavlutin.com/react-throttle-debounce/
-  const debouncedChangeHandler = useMemo(
-    () => _.debounce(props.setFilter, 300),
-    [props.setFilter],
-  );
-
-  const onChangeHandler = (value: string) => {
-    setFilterField(value);
-    debouncedChangeHandler(value);
-  };
-
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "flex-end",
-        justifyContent: "flex-end",
-      }}
-    >
-      <SearchIcon sx={{ color: "action.active", mr: 1, my: 0.5 }} />
-      <TextField
-        label="Type to filter..."
-        variant="standard"
-        value={filterField}
-        onChange={(e) => onChangeHandler(e.target.value)}
-        spellCheck={false}
-        autoFocus
-        fullWidth
-      />
-    </Box>
-  );
-};
diff --git a/src/components/EnhancedTable/index.ts b/src/components/EnhancedTable/index.ts
deleted file mode 100644
index b0db561e5..000000000
--- a/src/components/EnhancedTable/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./EnhancedTable";
-export { StandardRenderers } from "./renderers";
diff --git a/src/user/User.tsx b/src/user/User.tsx
index d6adea0ed..38bf05c23 100644
--- a/src/user/User.tsx
+++ b/src/user/User.tsx
@@ -51,77 +51,76 @@ export function User() {
           setFromDate,
         }}
       >
-        <Box height="100%">
-          <Box display="flex">
-            <Navbar />
-            <Box
-              width="100%"
-              height="100%"
-              padding={1}
-              marginTop="64px"
-              bgcolor="background.default"
-            >
-              <Switch>
-                {/* /adsmanager */}
-                <ProtectedRoute
-                  path="/user/main/adsmanager/advanced/new/:draftId"
-                  authedComponent={NewCampaign}
-                  validateAdvertiserProperty={(a) =>
-                    a.selfServiceManageCampaign
-                  }
-                />
-
-                <ProtectedRoute
-                  path="/user/main/adsmanager/advanced/:campaignId"
-                  authedComponent={EditCampaign}
-                  validateAdvertiserProperty={(a) =>
-                    a.selfServiceManageCampaign
-                  }
-                />
-
-                <ProtectedRoute
-                  path="/user/main/creative/:id"
-                  authedComponent={CreativeForm}
-                  validateAdvertiserProperty={(a) =>
-                    a.selfServiceManageCampaign
-                  }
-                />
-
-                <ProtectedRoute
-                  path="/user/main/complete/:mode"
-                  authedComponent={CompletionForm}
-                />
-
-                {/* /campaigns/:campaignId/analytics - */}
-                <ProtectedRoute
-                  path="/user/main/campaign/:campaignId"
-                  authedComponent={CampaignReportView}
-                />
-
-                <Route path="/user/main/settings" component={Settings} />
-
-                <Route path="/user/main/profile" component={Profile} />
-
-                <ProtectedRoute
-                  path="/user/main/campaign"
-                  authedComponent={CampaignView}
-                  unauthedComponent={AdvertiserAgreed}
-                />
-
-                <ProtectedRoute
-                  path="/user/main/assets"
-                  authedComponent={AdvertiserAssets}
-                />
-
-                <ProtectedRoute
-                  path="/user/main/creatives"
-                  authedComponent={CreativeList}
-                />
-
-                {/* default */}
-                <Redirect to="/user/main/campaign" />
-              </Switch>
-            </Box>
+        <Box display="flex" height="100vh" width="100vw" flexDirection="row">
+          <Navbar />
+          <Box
+            flex={1}
+            component="main"
+            marginTop="64px"
+            height="calc(100% - 64px)"
+            overflow="auto"
+            padding={1}
+            // this is flexing vertically, so that screens that wish to be
+            // exactly in viewport without scrollbars can set flex=1 on the
+            // child they wish to fill the screen with
+            display="flex"
+            flexDirection="column"
+            bgcolor="background.default"
+          >
+            <Switch>
+              {/* /adsmanager */}
+              <ProtectedRoute
+                path="/user/main/adsmanager/advanced/new/:draftId"
+                authedComponent={NewCampaign}
+                validateAdvertiserProperty={(a) => a.selfServiceManageCampaign}
+              />
+
+              <ProtectedRoute
+                path="/user/main/adsmanager/advanced/:campaignId"
+                authedComponent={EditCampaign}
+                validateAdvertiserProperty={(a) => a.selfServiceManageCampaign}
+              />
+
+              <ProtectedRoute
+                path="/user/main/creative/:id"
+                authedComponent={CreativeForm}
+                validateAdvertiserProperty={(a) => a.selfServiceManageCampaign}
+              />
+
+              <ProtectedRoute
+                path="/user/main/complete/:mode"
+                authedComponent={CompletionForm}
+              />
+
+              {/* /campaigns/:campaignId/analytics - */}
+              <ProtectedRoute
+                path="/user/main/campaign/:campaignId"
+                authedComponent={CampaignReportView}
+              />
+
+              <Route path="/user/main/settings" component={Settings} />
+
+              <Route path="/user/main/profile" component={Profile} />
+
+              <ProtectedRoute
+                path="/user/main/campaign"
+                authedComponent={CampaignView}
+                unauthedComponent={AdvertiserAgreed}
+              />
+
+              <ProtectedRoute
+                path="/user/main/assets"
+                authedComponent={AdvertiserAssets}
+              />
+
+              <ProtectedRoute
+                path="/user/main/creatives"
+                authedComponent={CreativeList}
+              />
+
+              {/* default */}
+              <Redirect to="/user/main/campaign" />
+            </Switch>
           </Box>
         </Box>
       </FilterContext.Provider>
diff --git a/src/user/adSet/AdSetList.tsx b/src/user/adSet/AdSetList.tsx
index fcfabef2d..06c5cee6d 100644
--- a/src/user/adSet/AdSetList.tsx
+++ b/src/user/adSet/AdSetList.tsx
@@ -1,8 +1,10 @@
-import { ColumnDescriptor, StandardRenderers } from "components/EnhancedTable";
 import { Chip } from "@mui/material";
 import { Status } from "components/Campaigns/Status";
 import _ from "lodash";
-import { adSetOnOffState } from "components/EnhancedTable/renderers";
+import {
+  adSetOnOffState,
+  StandardRenderers,
+} from "components/Datagrid/renderers";
 import { CampaignAdsFragment } from "graphql/campaign.generated";
 import { CampaignSource } from "graphql/types";
 import { StatsMetric } from "user/analytics/analyticsOverview/types";
@@ -10,6 +12,7 @@ import { AdSetFragment } from "graphql/ad-set.generated";
 import { AdDetailTable } from "user/views/user/AdDetailTable";
 import { displayFromCampaignState } from "util/displayState";
 import { uiLabelsForBillingType } from "util/billingType";
+import { GridColDef } from "@mui/x-data-grid";
 
 interface Props {
   loading: boolean;
@@ -71,52 +74,70 @@ export function AdSetList({ campaign, loading, engagements }: Props) {
     advertiserId: campaign?.advertiser.id ?? "",
   }));
 
-  const columns: ColumnDescriptor<AdSetDetails>[] = [
+  const columns: GridColDef<AdSetDetails>[] = [
     {
-      title: "On/Off",
-      value: (c) => c.state,
-      extendedRenderer: (r) => adSetOnOffState(r),
-      sx: { width: "10px" },
+      field: "switch",
+      type: "actions",
+      headerName: "On/Off",
+      valueGetter: ({ row }) => row.state,
+      renderCell: ({ row }) => adSetOnOffState(row),
       sortable: false,
+      filterable: false,
+      width: 100,
     },
     {
-      title: "Created",
-      value: (c) => c.createdAt,
-      renderer: StandardRenderers.date,
+      field: "createdAt",
+      headerName: "Created",
+      valueGetter: ({ row }) => row.createdAt,
+      renderCell: ({ row }) => StandardRenderers.date(row.createdAt),
+      width: 120,
     },
     {
-      title: "Name",
-      value: (c) => c.name || c.id.substring(0, 8),
+      field: "name",
+      headerName: "Name",
+      valueGetter: ({ row }) => row.name || row.id.substring(0, 8),
+      flex: 1,
     },
     {
-      title: "Status",
-      value: (c) => displayFromCampaignState(c),
-      extendedRenderer: (r) => (
+      field: "state",
+      headerName: "Status",
+      valueGetter: ({ row }) => displayFromCampaignState(row),
+      renderCell: ({ row }) => (
         <Status
-          state={displayFromCampaignState(r)}
-          end={r.campaignEnd}
-          start={r.campaignStart}
+          state={displayFromCampaignState(row)}
+          end={row.campaignEnd}
+          start={row.campaignStart}
         />
       ),
+      width: 100,
     },
     {
-      title: "Type",
-      value: (c) => uiLabelsForBillingType(c.billingType).longLabel,
+      field: "billingType",
+      headerName: "Type",
+      valueGetter: ({ row }) =>
+        uiLabelsForBillingType(row.billingType).longLabel,
+      width: 150,
     },
     {
-      title: "Platforms",
-      value: (c) => c.oses?.map((o: { name: string }) => o.name).join(", "),
-      extendedRenderer: (r) => <ChipList items={r.oses} />,
+      field: "oses",
+      headerName: "Platforms",
+      valueGetter: ({ row }) =>
+        row.oses?.map((o: { name: string }) => o.name).join(", "),
+      renderCell: ({ row }) => <ChipList items={row.oses} />,
+      flex: 1,
     },
     {
-      title: "Audiences",
-      value: (c) => c.segments?.map((o: { name: string }) => o.name).join(", "),
-      extendedRenderer: (r) => (
+      field: "segments",
+      headerName: "Audiences",
+      valueGetter: ({ row }) =>
+        row.segments?.map((o: { name: string }) => o.name).join(", "),
+      renderCell: ({ row }) => (
         <ChipList
-          items={r.segments}
-          max={(r.segments ?? []).join("").length > 100 ? 2 : 5}
+          items={row.segments}
+          max={(row.segments ?? []).join("").length > 100 ? 2 : 5}
         />
       ),
+      flex: 1,
     },
   ];
 
diff --git a/src/user/ads/AdList.tsx b/src/user/ads/AdList.tsx
index 6ab70be35..06485a379 100644
--- a/src/user/ads/AdList.tsx
+++ b/src/user/ads/AdList.tsx
@@ -1,4 +1,3 @@
-import { ColumnDescriptor, StandardRenderers } from "components/EnhancedTable";
 import _ from "lodash";
 import { isAfterEndDate } from "util/isAfterEndDate";
 import { AdFragment } from "graphql/ad-set.generated";
@@ -6,6 +5,9 @@ import { CampaignSource } from "graphql/types";
 import { CampaignAdsFragment } from "graphql/campaign.generated";
 import { StatsMetric } from "user/analytics/analyticsOverview/types";
 import { AdDetailTable } from "user/views/user/AdDetailTable";
+import { GridColDef } from "@mui/x-data-grid";
+import { CreativeFragment } from "graphql/creative.generated";
+import { StandardRenderers } from "components/Datagrid/renderers";
 
 interface Props {
   campaign?: CampaignAdsFragment | null;
@@ -44,27 +46,36 @@ export function AdList({ campaign, loading, engagements }: Props) {
 
   const ads: AdDetails[] = _.flatMap(adSets, "ads");
 
-  const columns: ColumnDescriptor<AdDetails>[] = [
+  const columns: GridColDef<AdDetails>[] = [
     {
-      title: "Created",
-      value: (c) => c.creative.createdAt,
-      renderer: StandardRenderers.date,
+      field: "createdAt",
+      headerName: "Created",
+      valueGetter: ({ row }) => row.creative.createdAt,
+      renderCell: ({ row }) => StandardRenderers.date(row.creative.createdAt),
     },
     {
-      title: "Ad Name",
-      value: (c) => c.creative.name,
+      field: "name",
+      headerName: "Ad Name",
+      valueGetter: ({ row }) => row.creative.name,
+      flex: 1,
     },
     {
-      title: "Ad Set Name",
-      value: (c) => c.adSetName,
+      field: "adSetName",
+      headerName: "Ad Set Name",
+      valueGetter: ({ row }) => row.adSetName,
+      flex: 1,
     },
     {
-      title: "Title",
-      value: (c) => c.creative.payloadNotification?.title,
+      field: "title",
+      headerName: "Title",
+      valueGetter: ({ row }) => title(row.creative),
+      flex: 1,
     },
     {
-      title: "Body",
-      value: (c) => c.creative.payloadNotification?.body,
+      field: "body",
+      headerName: "Body",
+      valueGetter: ({ row }) => body(row.creative),
+      flex: 1,
     },
   ];
 
@@ -74,9 +85,18 @@ export function AdList({ campaign, loading, engagements }: Props) {
       columns={columns}
       engagements={engagements}
       loading={loading}
-      propOverride={{
-        initialSortColumn: 0,
-      }}
     />
   );
 }
+
+const title = (c: CreativeFragment) =>
+  c.payloadNotification?.title ??
+  c.payloadInlineContent?.title ??
+  c.payloadSearch?.title ??
+  c.payloadSearchHomepage?.title;
+
+const body = (c: CreativeFragment) =>
+  c.payloadNotification?.body ??
+  c.payloadInlineContent?.ctaText ??
+  c.payloadSearch?.body ??
+  c.payloadSearchHomepage?.body;
diff --git a/src/user/analytics/analyticsOverview/components/BaseBarChart.tsx b/src/user/analytics/analyticsOverview/components/BaseBarChart.tsx
index 778d6fe78..044334ddb 100644
--- a/src/user/analytics/analyticsOverview/components/BaseBarChart.tsx
+++ b/src/user/analytics/analyticsOverview/components/BaseBarChart.tsx
@@ -1,8 +1,7 @@
 import { Box, Tab, Tabs } from "@mui/material";
-import HighchartsReact from "highcharts-react-official";
-import * as Highcharts from "highcharts";
 import { Options, SeriesOptionsType } from "highcharts";
 import { Option } from "../types";
+import { HighchartsWrapper } from "user/analytics/analyticsOverview/components/HighchartsWrapper";
 
 interface Props {
   categories: string[];
@@ -81,7 +80,7 @@ export function BaseBarChart({
           ))}
         </Tabs>
       </Box>
-      <HighchartsReact highcharts={Highcharts} options={options} />
+      <HighchartsWrapper options={options} />
     </Box>
   );
 }
diff --git a/src/user/analytics/analyticsOverview/components/BasePieChart.tsx b/src/user/analytics/analyticsOverview/components/BasePieChart.tsx
index d1ee809c4..8c79f26f5 100644
--- a/src/user/analytics/analyticsOverview/components/BasePieChart.tsx
+++ b/src/user/analytics/analyticsOverview/components/BasePieChart.tsx
@@ -1,8 +1,7 @@
 import { Box, Tab, Tabs } from "@mui/material";
-import HighchartsReact from "highcharts-react-official";
-import * as Highcharts from "highcharts";
 import { Options, SeriesOptionsType } from "highcharts";
 import { Option } from "../types";
+import { HighchartsWrapper } from "user/analytics/analyticsOverview/components/HighchartsWrapper";
 
 interface Props {
   series: SeriesOptionsType[];
@@ -71,7 +70,7 @@ export function BasePieChart({ series, onSetType, extraOptions, type }: Props) {
           ))}
         </Tabs>
       </Box>
-      <HighchartsReact highcharts={Highcharts} options={options} />
+      <HighchartsWrapper options={options} />
     </Box>
   );
 }
diff --git a/src/user/analytics/analyticsOverview/components/HighchartsWrapper.tsx b/src/user/analytics/analyticsOverview/components/HighchartsWrapper.tsx
new file mode 100644
index 000000000..96d0e917d
--- /dev/null
+++ b/src/user/analytics/analyticsOverview/components/HighchartsWrapper.tsx
@@ -0,0 +1,27 @@
+import { Box, BoxProps } from "@mui/material";
+import Highcharts from "highcharts";
+import { HighchartsReact } from "highcharts-react-official";
+
+type Props = BoxProps & {
+  options: Highcharts.Options;
+};
+
+export const HighchartsWrapper = ({ options, ...rest }: Props) => {
+  return (
+    <Box position="relative" height={300} {...rest}>
+      <HighchartsReact
+        highcharts={Highcharts}
+        options={options}
+        containerProps={{
+          style: {
+            position: "absolute",
+            left: 0,
+            top: 0,
+            bottom: 0,
+            right: 0,
+          },
+        }}
+      />
+    </Box>
+  );
+};
diff --git a/src/user/analytics/analyticsOverview/lib/overview.library.ts b/src/user/analytics/analyticsOverview/lib/overview.library.ts
index 3eef24c38..27a64b168 100644
--- a/src/user/analytics/analyticsOverview/lib/overview.library.ts
+++ b/src/user/analytics/analyticsOverview/lib/overview.library.ts
@@ -1,6 +1,6 @@
 import _ from "lodash";
 import moment from "moment";
-import { Options } from "highcharts";
+import Highcharts, { Options } from "highcharts";
 import {
   BaseMetric,
   Metrics,
@@ -76,7 +76,7 @@ export const baseOverviewChart: Options = {
 export const prepareChart = (
   metrics: Metrics,
   processedData: MetricDataSet,
-) => {
+): Highcharts.Options => {
   const metricsEntries = Object.entries(metrics);
   return {
     ...baseOverviewChart,
diff --git a/src/user/analytics/analyticsOverview/reports/campaign/EngagementsOverview.tsx b/src/user/analytics/analyticsOverview/reports/campaign/EngagementsOverview.tsx
index 987ba58d9..c778024a7 100644
--- a/src/user/analytics/analyticsOverview/reports/campaign/EngagementsOverview.tsx
+++ b/src/user/analytics/analyticsOverview/reports/campaign/EngagementsOverview.tsx
@@ -1,6 +1,4 @@
 import { Alert, Box, Divider, Skeleton } from "@mui/material";
-import HighchartsReact from "highcharts-react-official";
-import * as Highcharts from "highcharts";
 import { useState } from "react";
 import {
   CampaignWithEngagementsFragment,
@@ -18,6 +16,7 @@ import { CampaignFormat } from "graphql/types";
 import { ErrorDetail } from "components/Error/ErrorDetail";
 import { ApolloError } from "@apollo/client";
 import { usePersistMetricFilter } from "user/analytics/analyticsOverview/hooks/usePersistMetricFilter";
+import { HighchartsWrapper } from "user/analytics/analyticsOverview/components/HighchartsWrapper";
 
 interface Props {
   loading: boolean;
@@ -100,9 +99,7 @@ export function EngagementsOverview({
           paddingTop="14px"
           paddingBottom="14px"
         >
-          <Box>
-            <HighchartsReact highcharts={Highcharts} options={options} />
-          </Box>
+          <HighchartsWrapper options={options} />
         </Box>
 
         <Divider />
diff --git a/src/user/analytics/analyticsOverview/reports/creative/CreativeOverview.tsx b/src/user/analytics/analyticsOverview/reports/creative/CreativeOverview.tsx
deleted file mode 100644
index 971441008..000000000
--- a/src/user/analytics/analyticsOverview/reports/creative/CreativeOverview.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import * as Highcharts from "highcharts";
-import { Options } from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-import { useState } from "react";
-import { Box, Stack, Tab, Tabs, Typography } from "@mui/material";
-import { decideValueAttribute } from "../../lib/overview.library";
-import { CampaignFormat } from "graphql/types";
-import { EngagementFragment } from "graphql/analytics-overview.generated";
-import { CampaignFragment } from "graphql/campaign.generated";
-import { creativeEngagements } from "../../lib/creative.library";
-import { CreativeMetric, StatsMetric } from "../../types";
-import { CardContainer } from "components/Card/CardContainer";
-
-interface Props {
-  engagements: EngagementFragment[];
-  campaign: CampaignFragment;
-}
-
-export function CreativeOverview({ engagements, campaign }: Props) {
-  const [type, setType] = useState<string>("ctr");
-  const isNtp = campaign.format === CampaignFormat.NtpSi;
-
-  const metrics = creativeEngagements(engagements, campaign.format);
-
-  const mapMetricToSeries = (cm: CreativeMetric[], type: keyof StatsMetric) => {
-    return cm
-      .map((m) => {
-        const p = m.creativePayload;
-        const y = m[type];
-
-        return {
-          name: p.title,
-          y: y === Infinity ? 0 : y,
-          custom: {
-            name: p.body,
-          },
-        };
-      })
-      .filter((p) => p.y > 0);
-  };
-
-  const [chart, setChart] = useState(mapMetricToSeries(metrics, "ctr"));
-
-  const attrs = decideValueAttribute(type);
-  const options: Options = {
-    chart: {
-      type: "bar",
-      height: chart.length > 10 ? chart.length * 30 : undefined,
-    },
-    title: {
-      text: undefined,
-    },
-    xAxis: {
-      categories: chart.map((c) => c.name),
-      title: {
-        text: null,
-      },
-    },
-    accessibility: {
-      point: {
-        valueSuffix: attrs.suffix,
-        valuePrefix: attrs.prefix,
-      },
-    },
-    yAxis: {
-      labels: {
-        overflow: "justify",
-      },
-    },
-    plotOptions: {
-      bar: {
-        colorByPoint: true,
-        dataLabels: {
-          enabled: true,
-          inside: true,
-        },
-      },
-    },
-    tooltip: {
-      valueDecimals: attrs.decimal,
-      valuePrefix: attrs.prefix,
-      valueSuffix: attrs.suffix,
-    },
-    series: [
-      {
-        name: "Ads",
-        type: "bar",
-        data: chart,
-        dataLabels: [
-          {
-            align: "center",
-            format: isNtp ? "" : "{point.options.custom.name}",
-            color: "#FFFFFF",
-            style: {
-              fontSize: "12px",
-              fontFamily: "Verdana, sans-serif",
-            },
-          },
-          {
-            align: "right",
-            format: attrs.format,
-            color: "#FFFFFF",
-            style: {
-              fontSize: "12px",
-              fontFamily: "Verdana, sans-serif",
-            },
-          },
-        ],
-      },
-    ],
-  };
-
-  const onChange = (metric: CreativeMetric[], type: keyof StatsMetric) => {
-    setType(type);
-    setChart(mapMetricToSeries(metric, type));
-  };
-
-  return (
-    <CardContainer header="Creative Performance">
-      {isNtp && (
-        <Stack display="flex" direction="row" justifyContent="space-evenly">
-          {metrics.map((ntp, idx) => (
-            <Stack
-              display="flex"
-              direction="column"
-              alignItems="center"
-              flexWrap="wrap"
-              key={`creativeMetric-${idx}`}
-            >
-              <img
-                src={ntp.creativePayload.body}
-                alt={`Image ${idx + 1}`}
-                height={200}
-                width={300}
-              />
-              <Typography variant="caption">Image {idx + 1}</Typography>
-            </Stack>
-          ))}
-        </Stack>
-      )}
-      <Box
-        sx={{
-          width: "100%",
-          height: "50px",
-          backgroundColor: "white",
-          borderBottom: "1px solid #ededed",
-          display: "flex",
-          justifyContent: "left",
-        }}
-      >
-        <Tabs
-          value={type}
-          onChange={(evt, v) => {
-            onChange(metrics, v);
-          }}
-          variant="scrollable"
-          scrollButtons="auto"
-        >
-          <Tab value="ctr" label="CTR" />
-          <Tab value="landingRate" label="Click to 10s visit rate" />
-          <Tab value="visitRate" label="10s Visit Rate" />
-          {!isNtp && <Tab value="cpa" label="CPA" />}
-          <Tab value="views" label="Impressions" />
-          <Tab value="conversions" label="Conversions" />
-          <Tab value="clicks" label="Clicks" />
-          {!isNtp && <Tab value="spend" label="Spend" />}
-        </Tabs>
-      </Box>
-      <HighchartsReact highcharts={Highcharts} options={options} />
-    </CardContainer>
-  );
-}
diff --git a/src/user/analytics/renderers/index.tsx b/src/user/analytics/renderers/index.tsx
index 660296ba0..f23a8f65b 100644
--- a/src/user/analytics/renderers/index.tsx
+++ b/src/user/analytics/renderers/index.tsx
@@ -1,5 +1,5 @@
 import { Box, Skeleton, Typography } from "@mui/material";
-import { renderMonetaryAmount } from "components/EnhancedTable/renderers";
+import { renderMonetaryAmount } from "components/Datagrid/renderers";
 import { CampaignSummaryFragment } from "graphql/campaign.generated";
 import { CampaignFormat } from "graphql/types";
 import { StatsMetric } from "user/analytics/analyticsOverview/types";
diff --git a/src/user/campaignList/CampaignList.tsx b/src/user/campaignList/CampaignList.tsx
index 668aa60a9..b4f3b1497 100644
--- a/src/user/campaignList/CampaignList.tsx
+++ b/src/user/campaignList/CampaignList.tsx
@@ -1,14 +1,10 @@
 import { useState } from "react";
-import {
-  ColumnDescriptor,
-  EnhancedTable,
-  StandardRenderers,
-} from "components/EnhancedTable";
-import { Checkbox, Link } from "@mui/material";
+import { Link } from "@mui/material";
 import {
   campaignOnOffState,
   renderMonetaryAmount,
-} from "components/EnhancedTable/renderers";
+  StandardRenderers,
+} from "components/Datagrid/renderers";
 import { Link as RouterLink } from "react-router-dom";
 import { Status } from "components/Campaigns/Status";
 import { isAfterEndDate } from "util/isAfterEndDate";
@@ -22,19 +18,17 @@ import {
 import _ from "lodash";
 import { uiTextForCampaignFormat } from "user/library";
 import { CampaignSummaryFragment } from "graphql/campaign.generated";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import { CustomToolbar } from "components/Datagrid/CustomToolbar";
+import { CloneCampaign } from "components/Campaigns/CloneCampaign";
+import { EditButton } from "user/campaignList/EditButton";
 
 interface Props {
   advertiser?: AdvertiserCampaignsFragment | null;
-  selectedCampaigns: string[];
-  onCampaignSelect: (c: string, insert: boolean) => void;
 }
 
-export function CampaignList({
-  advertiser,
-  selectedCampaigns,
-  onCampaignSelect,
-}: Props) {
-  let initialSort = 9;
+export function CampaignList({ advertiser }: Props) {
+  const [selectedCampaign, setSelectedCampaign] = useState<string | number>();
   const [engagementData, setEngagementData] =
     useState<Map<string, EngagementOverview>>();
 
@@ -52,140 +46,178 @@ export function CampaignList({
     },
   });
 
-  const columns: ColumnDescriptor<CampaignSummaryFragment>[] = [
+  const columns: GridColDef<CampaignSummaryFragment>[] = [
     {
-      title: "Campaign",
-      value: (c) => c.name,
-      extendedRenderer: (r) => (
+      field: "name",
+      headerName: "Campaign",
+      renderCell: ({ row }) => (
         <Link
           component={RouterLink}
-          to={`/user/main/campaign/${r.id}`}
+          to={`/user/main/campaign/${row.id}`}
           underline="none"
         >
-          {r.name}
+          {row.name}
         </Link>
       ),
+      flex: 1,
     },
     {
-      title: "Format",
-      value: (c) => uiTextForCampaignFormat(c.format),
+      field: "format",
+      headerName: "Format",
+      valueGetter: ({ row }) => uiTextForCampaignFormat(row.format),
+      align: "left",
+      headerAlign: "left",
+      width: 150,
     },
     {
-      title: "Status",
-      value: (c) => (isAfterEndDate(c.endAt) ? "completed" : c.state),
-      extendedRenderer: (r) => (
-        <Status state={r.state} start={r.startAt} end={r.endAt} />
+      field: "state",
+      headerName: "Status",
+      valueGetter: ({ row }) =>
+        isAfterEndDate(row.endAt) ? "completed" : row.state,
+      renderCell: ({ row }) => (
+        <Status state={row.state} start={row.startAt} end={row.endAt} />
       ),
-      sx: { width: "1px", p: 0 },
+      minWidth: 120,
+      maxWidth: 150,
     },
     {
-      title: "Budget",
-      value: (c) => c.budget,
-      extendedRenderer: (r) => renderMonetaryAmount(r.budget, r.currency),
+      field: "budget",
+      headerName: "Budget",
+      renderCell: ({ row }) => renderMonetaryAmount(row.budget, row.currency),
       align: "right",
+      headerAlign: "right",
+      minWidth: 100,
+      maxWidth: 150,
     },
     {
-      title: "Spend",
-      value: (c) => c.spent,
-      extendedRenderer: (r) =>
-        renderEngagementCell(loading, r, "spend", engagementData),
+      field: "spend",
+      headerName: "Spend",
+      valueGetter: ({ row }) => row.spent,
+      renderCell: ({ row }) =>
+        renderEngagementCell(loading, row, "spend", engagementData),
       align: "right",
+      headerAlign: "right",
+      minWidth: 100,
+      maxWidth: 150,
     },
     {
-      title: "Impressions",
-      value: (c) => engagementData?.get(c.id)?.["view"] ?? "N/A",
-      extendedRenderer: (r) =>
-        renderEngagementCell(loading, r, "view", engagementData),
+      field: "view",
+      headerName: "Impressions",
+      valueGetter: ({ row }) => engagementData?.get(row.id)?.["view"] ?? "N/A",
+      renderCell: ({ row }) =>
+        renderEngagementCell(loading, row, "view", engagementData),
       align: "right",
+      headerAlign: "right",
+      minWidth: 100,
+      maxWidth: 250,
     },
     {
-      title: "Clicks",
-      value: (c) => engagementData?.get(c.id)?.["click"] ?? "N/A",
-      extendedRenderer: (r) =>
-        renderEngagementCell(loading, r, "click", engagementData),
+      field: "click",
+      headerName: "Clicks",
+      valueGetter: ({ row }) => engagementData?.get(row.id)?.["click"] ?? "N/A",
+      renderCell: ({ row }) =>
+        renderEngagementCell(loading, row, "click", engagementData),
       align: "right",
+      headerAlign: "right",
+      minWidth: 100,
+      maxWidth: 250,
     },
     {
-      title: "10s Visits",
-      value: (c) => engagementData?.get(c.id)?.["landed"] ?? "N/A",
-      extendedRenderer: (r) =>
-        renderEngagementCell(loading, r, "landed", engagementData),
+      field: "landed",
+      headerName: "10s Visits",
+      valueGetter: ({ row }) =>
+        engagementData?.get(row.id)?.["landed"] ?? "N/A",
+      renderCell: ({ row }) =>
+        renderEngagementCell(loading, row, "landed", engagementData),
       align: "right",
+      headerAlign: "right",
+      minWidth: 100,
+      maxWidth: 250,
     },
     {
-      title: "Start",
-      value: (c) => c.startAt,
-      renderer: StandardRenderers.date,
+      field: "startAt",
+      headerName: "Start",
+      valueGetter: ({ row }) => row.startAt,
+      renderCell: ({ row }) => StandardRenderers.date(row.startAt),
       align: "right",
+      headerAlign: "right",
+      width: 120,
     },
     {
-      title: "End",
-      value: (c) => c.endAt,
-      renderer: StandardRenderers.date,
+      field: "endAt",
+      headerName: "End",
+      valueGetter: ({ row }) => row.endAt,
+      renderCell: ({ row }) => StandardRenderers.date(row.endAt),
       align: "right",
+      headerAlign: "right",
+      width: 120,
     },
   ];
 
   if (advertiser?.selfServiceManageCampaign) {
-    initialSort += 2;
-    columns.unshift(
-      {
-        title: "",
-        value: (c) => c.id,
-        sortable: false,
-        extendedRenderer: (r) => (
-          <CampaignCheckBox
-            campaign={r}
-            selectedCampaigns={selectedCampaigns}
-            onCampaignSelect={onCampaignSelect}
-          />
-        ),
-        align: "center",
-        sx: { width: "1px" },
-      },
-      {
-        title: "On/Off",
-        value: (c) => c.state,
-        extendedRenderer: (r) =>
-          campaignOnOffState({
-            ...r,
-            advertiserId: advertiser?.id ?? "",
-          }),
-        sx: { width: "1px", p: 0 },
-        sortable: false,
-      },
-    );
+    columns.unshift({
+      field: "switch",
+      headerName: "On/Off",
+      type: "actions",
+      valueGetter: ({ row }) => row.state,
+      renderCell: ({ row }) =>
+        campaignOnOffState({
+          ...row,
+          advertiserId: advertiser?.id ?? "",
+        }),
+      width: 100,
+      sortable: false,
+      filterable: false,
+    });
   }
 
-  return (
-    <EnhancedTable
-      rows={advertiser?.campaigns ?? []}
-      initialSortColumn={initialSort}
-      initialSortDirection="desc"
-      columns={columns}
-    />
-  );
-}
-
-interface CheckBoxProps {
-  campaign: CampaignSummaryFragment;
-  selectedCampaigns: string[];
-  onCampaignSelect: (c: string, insert: boolean) => void;
-}
-const CampaignCheckBox = (props: CheckBoxProps) => {
-  const campaignSelected = props.selectedCampaigns.some(
-    (c) => c === props.campaign.id,
-  );
+  const campaigns = advertiser?.campaigns ?? [];
+  const Toolbar = () => {
+    const campaign = campaigns.find((c) => c.id === selectedCampaign);
+    const isDisabled = selectedCampaign === undefined;
+    return (
+      <CustomToolbar>
+        {advertiser?.selfServiceManageCampaign && (
+          <CloneCampaign disabled={isDisabled} campaign={campaign} />
+        )}
+        {advertiser?.selfServiceManageCampaign && (
+          <EditButton disabled={isDisabled} campaign={campaign} />
+        )}
+      </CustomToolbar>
+    );
+  };
 
   return (
-    <Checkbox
-      disabled={props.selectedCampaigns.length === 1 && !campaignSelected}
-      size="small"
-      sx={{ p: 0 }}
-      checked={campaignSelected}
-      onChange={(e) =>
-        props.onCampaignSelect(props.campaign.id, e.target.checked)
+    <DataGrid
+      loading={loading}
+      rows={campaigns}
+      columns={columns}
+      density="compact"
+      autoHeight
+      disableRowSelectionOnClick
+      checkboxSelection={advertiser?.selfServiceManageCampaign}
+      slots={{ toolbar: Toolbar }}
+      sx={{ borderStyle: "none" }}
+      onRowSelectionModelChange={(rowSelectionModel) => {
+        if (rowSelectionModel.length === 1) {
+          setSelectedCampaign(rowSelectionModel[0]);
+        } else {
+          setSelectedCampaign(undefined);
+        }
+      }}
+      isRowSelectable={(params) =>
+        selectedCampaign === undefined || params.id === selectedCampaign
       }
+      initialState={{
+        sorting: {
+          sortModel: [{ field: "startAt", sort: "desc" }],
+        },
+        pagination: {
+          paginationModel: {
+            pageSize: 10,
+          },
+        },
+      }}
     />
   );
-};
+}
diff --git a/src/user/campaignList/EditButton.tsx b/src/user/campaignList/EditButton.tsx
new file mode 100644
index 000000000..dfe9b266d
--- /dev/null
+++ b/src/user/campaignList/EditButton.tsx
@@ -0,0 +1,41 @@
+import { CampaignSummaryFragment } from "graphql/campaign.generated";
+import { CampaignFormat, CampaignSource } from "graphql/types";
+import { Button, Tooltip } from "@mui/material";
+import { Link as RouterLink } from "react-router-dom";
+import EditIcon from "@mui/icons-material/Edit";
+
+export const EditButton = (props: {
+  campaign?: CampaignSummaryFragment;
+  disabled: boolean;
+}) => {
+  const { campaign, disabled } = props;
+  const canEdit =
+    campaign &&
+    campaign.source === CampaignSource.SelfServe &&
+    [CampaignFormat.PushNotification, CampaignFormat.NewsDisplayAd].includes(
+      campaign.format,
+    ) &&
+    campaign.state !== "completed";
+
+  return (
+    <Tooltip
+      title={
+        !campaign ? "Select one campaign to edit" : `Edit ${campaign.name}`
+      }
+    >
+      <span>
+        <Button
+          color="primary"
+          variant="text"
+          size="small"
+          component={RouterLink}
+          to={`/user/main/adsmanager/advanced/${campaign?.id}/settings`}
+          disabled={!canEdit || disabled}
+          startIcon={<EditIcon />}
+        >
+          Edit
+        </Button>
+      </span>
+    </Tooltip>
+  );
+};
diff --git a/src/user/views/adsManager/views/advanced/components/adSet/AdSetFields.tsx b/src/user/views/adsManager/views/advanced/components/adSet/AdSetFields.tsx
index 9daf4f26a..393eeec12 100644
--- a/src/user/views/adsManager/views/advanced/components/adSet/AdSetFields.tsx
+++ b/src/user/views/adsManager/views/advanced/components/adSet/AdSetFields.tsx
@@ -4,7 +4,7 @@ import { CardContainer } from "components/Card/CardContainer";
 import { useHistory } from "react-router-dom";
 import { FormikTextField, useIsEdit } from "form/FormikHelpers";
 import { AdSetAds } from "user/views/adsManager/views/advanced/components/adSet/fields/AdSetAds";
-import { adSetOnOffState } from "components/EnhancedTable/renderers";
+import { adSetOnOffState } from "components/Datagrid/renderers";
 import { Stack } from "@mui/material";
 import { useFormikContext } from "formik";
 import { CampaignForm } from "user/views/adsManager/types";
diff --git a/src/user/views/user/AdDetailTable.tsx b/src/user/views/user/AdDetailTable.tsx
index 7f9e30be9..a57e442cc 100644
--- a/src/user/views/user/AdDetailTable.tsx
+++ b/src/user/views/user/AdDetailTable.tsx
@@ -1,18 +1,15 @@
-import { ColumnDescriptor, EnhancedTable } from "components/EnhancedTable";
 import { CampaignAdsFragment } from "graphql/campaign.generated";
 import { CampaignFormat } from "graphql/types";
 import { StatsMetric } from "user/analytics/analyticsOverview/types";
 import { renderStatsCell } from "user/analytics/renderers";
+import { DataGrid, GridColDef, GridValidRowModel } from "@mui/x-data-grid";
 
-interface Props<T> {
+interface Props<T extends GridValidRowModel> {
   rows: T[];
-  columns: ColumnDescriptor<T>[];
+  columns: GridColDef<T>[];
   engagements: Map<string, StatsMetric>;
   loading: boolean;
   campaign?: Omit<CampaignAdsFragment, "adSets"> | null;
-  propOverride?: {
-    initialSortColumn?: number;
-  };
 }
 
 export function AdDetailTable<T extends { id: string }>({
@@ -21,63 +18,94 @@ export function AdDetailTable<T extends { id: string }>({
   campaign,
   engagements,
   loading,
-  propOverride,
 }: Props<T>) {
   const displayColumns = [...columns];
 
   if (campaign?.format !== CampaignFormat.NtpSi) {
     displayColumns.push(
       {
-        title: "Spend",
-        value: (c) => engagements.get(c.id)?.spend ?? "N/A",
-        extendedRenderer: (r) =>
+        field: "spend",
+        headerName: "Spend",
+        valueGetter: ({ row }) => engagements.get(row.id)?.spend ?? "N/A",
+        renderCell: ({ row }) =>
           renderStatsCell(
             loading,
             "spend",
-            engagements.get(r.id),
+            engagements.get(row.id),
             campaign?.currency,
           ),
         align: "right",
+        headerAlign: "right",
+        minWidth: 100,
+        maxWidth: 250,
       },
       {
-        title: "Impressions",
-        value: (c) => engagements.get(c.id)?.views ?? "N/A",
-        extendedRenderer: (r) =>
-          renderStatsCell(loading, "views", engagements.get(r.id)),
+        field: "view",
+        headerName: "Impressions",
+        valueGetter: ({ row }) => engagements.get(row.id)?.views ?? "N/A",
+        renderCell: ({ row }) =>
+          renderStatsCell(loading, "views", engagements.get(row.id)),
         align: "right",
+        headerAlign: "right",
+        minWidth: 100,
+        maxWidth: 250,
       },
       {
-        title: "Clicks",
-        value: (c) => engagements.get(c.id)?.clicks,
-        extendedRenderer: (r) =>
-          renderStatsCell(loading, "clicks", engagements.get(r.id)),
+        field: "click",
+        headerName: "Clicks",
+        valueGetter: ({ row }) => engagements.get(row.id)?.clicks,
+        renderCell: ({ row }) =>
+          renderStatsCell(loading, "clicks", engagements.get(row.id)),
         align: "right",
+        headerAlign: "right",
+        minWidth: 100,
+        maxWidth: 250,
       },
       {
-        title: "10s Visits",
-        value: (c) => engagements.get(c.id)?.landings,
-        extendedRenderer: (r) =>
-          renderStatsCell(loading, "landings", engagements.get(r.id)),
+        field: "landed",
+        headerName: "10s Visits",
+        valueGetter: ({ row }) => engagements.get(row.id)?.landings,
+        renderCell: ({ row }) =>
+          renderStatsCell(loading, "landings", engagements.get(row.id)),
         align: "right",
+        headerAlign: "right",
+        minWidth: 100,
+        maxWidth: 250,
       },
       {
-        title: "CTR",
-        value: (c) => engagements.get(c.id)?.ctr,
-        extendedRenderer: (r) =>
-          renderStatsCell(loading, "ctr", engagements.get(r.id)),
+        field: "ctr",
+        headerName: "CTR",
+        valueGetter: ({ row }) => engagements.get(row.id)?.ctr,
+        renderCell: ({ row }) =>
+          renderStatsCell(loading, "ctr", engagements.get(row.id)),
         align: "right",
+        headerAlign: "right",
+        minWidth: 100,
+        maxWidth: 250,
       },
     );
   }
 
   return (
-    <EnhancedTable
+    <DataGrid
+      loading={loading}
       rows={rows}
-      filterable={false}
-      initialSortColumn={propOverride?.initialSortColumn ?? 1}
-      initialSortDirection="desc"
-      initialRowsPerPage={5}
       columns={displayColumns}
+      density="compact"
+      autoHeight
+      disableRowSelectionOnClick
+      hideFooterSelectedRowCount
+      sx={{ borderStyle: "none" }}
+      initialState={{
+        sorting: {
+          sortModel: [{ field: "startAt", sort: "desc" }],
+        },
+        pagination: {
+          paginationModel: {
+            pageSize: 10,
+          },
+        },
+      }}
     />
   );
 }
diff --git a/src/user/views/user/CampaignView.tsx b/src/user/views/user/CampaignView.tsx
index 12638300a..48327b2cd 100644
--- a/src/user/views/user/CampaignView.tsx
+++ b/src/user/views/user/CampaignView.tsx
@@ -1,39 +1,17 @@
-import { Box, Chip, Skeleton, Stack, Tooltip, Typography } from "@mui/material";
-import { useCallback, useContext, useState } from "react";
+import { Box, Skeleton } from "@mui/material";
+import { useContext } from "react";
 import { useAdvertiserCampaignsQuery } from "graphql/advertiser.generated";
 import { CampaignAgeFilter } from "components/Campaigns/CampaignAgeFilter";
 import { CampaignList } from "user/campaignList/CampaignList";
 import { ErrorDetail } from "components/Error/ErrorDetail";
 import { CardContainer } from "components/Card/CardContainer";
 import MiniSideBar from "components/Drawer/MiniSideBar";
-import { useLoadCampaignQuery } from "graphql/campaign.generated";
-import { CampaignFormat, CampaignSource } from "graphql/types";
 import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
-import { Link as RouterLink } from "react-router-dom";
-import { CloneCampaign } from "components/Campaigns/CloneCampaign";
-import EditIcon from "@mui/icons-material/Edit";
 import { FilterContext } from "state/context";
 
 export function CampaignView() {
   const { advertiser } = useAdvertiser();
   const { fromDate } = useContext(FilterContext);
-  const [selectedCampaigns, setSelectedCampaigns] = useState<string[]>([]);
-
-  const handleCampaignSelect = useCallback(
-    (c: string, include: boolean) => {
-      const indexOfId = selectedCampaigns.findIndex((summary) => c === summary);
-      if (include && indexOfId === -1) {
-        setSelectedCampaigns([...selectedCampaigns, c]);
-      } else if (!include && indexOfId >= 0) {
-        const res =
-          selectedCampaigns.length === 1
-            ? []
-            : selectedCampaigns.splice(indexOfId, 1);
-        setSelectedCampaigns(res);
-      }
-    },
-    [selectedCampaigns],
-  );
 
   const { loading, data, error } = useAdvertiserCampaignsQuery({
     variables: {
@@ -57,13 +35,8 @@ export function CampaignView() {
   return (
     <MiniSideBar>
       <CardContainer
-        header={
-          advertiser.selfServiceManageCampaign ? (
-            <CampaignHeader selectedCampaigns={selectedCampaigns} />
-          ) : (
-            "Campaigns"
-          )
-        }
+        header="Campaigns"
+        useTypography
         sx={{
           flexGrow: 1,
           overflowX: "auto",
@@ -71,11 +44,7 @@ export function CampaignView() {
         additionalAction={<CampaignAgeFilter disabled={loading} />}
       >
         {!loading ? (
-          <CampaignList
-            advertiser={data?.advertiserCampaigns}
-            onCampaignSelect={handleCampaignSelect}
-            selectedCampaigns={selectedCampaigns}
-          />
+          <CampaignList advertiser={data?.advertiserCampaigns} />
         ) : (
           <Box m={3}>
             <Skeleton variant="rounded" height={500} />
@@ -85,55 +54,3 @@ export function CampaignView() {
     </MiniSideBar>
   );
 }
-
-function CampaignHeader(props: { selectedCampaigns: string[] }) {
-  const editableCampaigns = [
-    CampaignFormat.PushNotification,
-    CampaignFormat.NewsDisplayAd,
-  ];
-  const oneCampaignSelected = props.selectedCampaigns.length === 1;
-  const firstCampaign = oneCampaignSelected ? props.selectedCampaigns[0] : null;
-  const { data, loading } = useLoadCampaignQuery({
-    variables: { id: firstCampaign ?? "" },
-    skip: !oneCampaignSelected || !firstCampaign,
-  });
-
-  let canClone = false;
-  let canEdit = false;
-  if (!loading && data?.campaign) {
-    canClone =
-      data.campaign.source === CampaignSource.SelfServe &&
-      editableCampaigns.includes(data.campaign.format);
-    canEdit = canClone && data.campaign.state !== "completed";
-  }
-
-  return (
-    <Stack direction="row" alignItems="center" spacing={2}>
-      <Typography variant="h2">Campaigns</Typography>
-      <Stack direction="row" alignItems="center" spacing={2}>
-        <Tooltip title={canClone ? "Clone Campaign" : "Cannot clone campaign"}>
-          <span>
-            <CloneCampaign
-              campaignFragment={data?.campaign}
-              useChip
-              disabled={!oneCampaignSelected || !data?.campaign || !canClone}
-            />
-          </span>
-        </Tooltip>
-        <Tooltip title={canEdit ? "Edit campaign" : "Cannot Edit Campaign"}>
-          <span>
-            <Chip
-              color="primary"
-              label="Edit"
-              disabled={!oneCampaignSelected || !data?.campaign || !canEdit}
-              component={RouterLink}
-              to={`/user/main/adsmanager/advanced/${firstCampaign}/settings`}
-              icon={<EditIcon fontSize="small" />}
-              clickable
-            />
-          </span>
-        </Tooltip>
-      </Stack>
-    </Stack>
-  );
-}