diff --git a/src/common/Header/index.jsx b/src/common/Header/index.jsx
index 9023269..963a0fc 100644
--- a/src/common/Header/index.jsx
+++ b/src/common/Header/index.jsx
@@ -52,7 +52,6 @@ const Header = ({ children, match }) => {
     const { currentTarget } = event
     setAnchorEl(currentTarget)
     setOpen(!open)
-    console.log('currentTarget', currentTarget)
   }
 
   const handleClose = () => {
@@ -98,10 +97,10 @@ const Header = ({ children, match }) => {
                       <Paper>
                         <MenuList role="menu">
                           <MenuItem onClick={handleClose} component={LinkTo('/budget')}>
-                            <ListItemText primary="Budget History" />
+                            <ListItemText primary="History" />
                           </MenuItem>
                           <MenuItem onClick={handleClose} component={LinkTo('/budget-categories')}>
-                            <ListItemText primary="Budget Categories" />
+                            <ListItemText primary="Categories" />
                           </MenuItem>
                         </MenuList>
                       </Paper>
diff --git a/src/common/LoginButton/index.jsx b/src/common/LoginButton/index.jsx
index 4d7db48..03a5ac9 100644
--- a/src/common/LoginButton/index.jsx
+++ b/src/common/LoginButton/index.jsx
@@ -23,7 +23,8 @@ import { userLogout } from '../../store/user/actions'
 
 const styles = theme => ({
   root: {
-    display: 'flex'
+    display: 'flex',
+    minWidth: 135
   },
   popper: {
     zIndex: theme.zIndex.drawer + 1
diff --git a/src/common/Logo/index.jsx b/src/common/Logo/index.jsx
index 4bc1277..5e6bfb2 100644
--- a/src/common/Logo/index.jsx
+++ b/src/common/Logo/index.jsx
@@ -8,7 +8,8 @@ import LinkTo from '../LinkTo'
 
 const styles = {
   logo: {
-    display: 'flex'
+    display: 'flex',
+    minWidth: 135
   },
   image: {
     width: '30px',
diff --git a/src/common/ModalDialog/index.jsx b/src/common/ModalDialog/index.jsx
index 0db7605..eb69d26 100644
--- a/src/common/ModalDialog/index.jsx
+++ b/src/common/ModalDialog/index.jsx
@@ -71,7 +71,7 @@ const ModalDialog = ({
 ModalDialog.propTypes = {
   open: PropTypes.bool.isRequired,
   title: PropTypes.string.isRequired,
-  children: PropTypes.array.isRequired,
+  children: PropTypes.node.isRequired,
   onSubmit: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,
diff --git a/src/core/Accounts/ImportTransactions/CsvImportForm.jsx b/src/core/Accounts/ImportTransactions/CsvImportForm.jsx
index 45330bf..5a26bf6 100644
--- a/src/core/Accounts/ImportTransactions/CsvImportForm.jsx
+++ b/src/core/Accounts/ImportTransactions/CsvImportForm.jsx
@@ -278,7 +278,6 @@ export class CsvImportFormComponent extends React.Component {
               variant="contained"
               color="primary"
               disabled={isSubmitting || file === null || error !== null}
-              onClick={this.handleButtonClick}
             >
               Import
             </Button>
diff --git a/src/core/Accounts/ImportTransactions/index.jsx b/src/core/Accounts/ImportTransactions/index.jsx
index 733d2de..bd48e34 100644
--- a/src/core/Accounts/ImportTransactions/index.jsx
+++ b/src/core/Accounts/ImportTransactions/index.jsx
@@ -65,7 +65,7 @@ export class ImportTransactionsComponent extends React.Component {
       .map(transaction => ({
         amount: transaction.amount,
         description: transaction.description,
-        category: transaction.category,
+        categoryId: transaction.categoryId,
         createdAt: transaction.createdAt
       }))
     if (transactions.length > 0) {
diff --git a/src/core/Accounts/Transactions/TransactionDialog.jsx b/src/core/Accounts/Transactions/TransactionDialog.jsx
index be425b7..af994eb 100644
--- a/src/core/Accounts/Transactions/TransactionDialog.jsx
+++ b/src/core/Accounts/Transactions/TransactionDialog.jsx
@@ -57,13 +57,6 @@ const colourStyles = {
 }
 
 const mapStateToProps = ({ budget }) => ({ budget })
-// const mapStateToProps = ({ budget }) => ({
-//   budget,
-//   budgetForSelect: budget.tree.map(cat => ({
-//     label: budget.byId[cat.id].label,
-//     options: cat.children.map(subCat => budget.byId[subCat])
-//   }))
-// })
 
 const mapDispatchToProps = (dispatch) => {
   return {
@@ -112,12 +105,12 @@ export const TransactionDialogComponent = ({
     <AutoComplete
       className={classes.input}
       label="Category"
-      name="category"
-      value={values.category}
-      options={budget.categories}
+      name="categoryId"
+      value={values.categoryId}
+      options={budget.categoryTree}
       onChange={setFieldValue}
-      error={errors.category && touched.category}
-      helperText={errors.category}
+      error={errors.categoryId && touched.categoryId}
+      helperText={errors.categoryId}
       styles={colourStyles}
     />
     <TextField
@@ -181,17 +174,18 @@ export default compose(
       if (transaction === null) {
         return {
           description: '',
-          category: null,
+          categoryId: null,
           amount: '',
           createdAt: format(Date.now(), 'YYYY-MM-DD')
         }
       }
       return {
         ...transaction,
-        category: transaction.category === undefined ? null : {
-          label: transaction.category,
-          value: transaction.category,
-          colour: budget.colours[transaction.category]
+        categoryId: transaction.categoryId === undefined ? null : {
+          id: budget.categoriesById[transaction.categoryId].id,
+          label: budget.categoriesById[transaction.categoryId].name,
+          value: budget.categoriesById[transaction.categoryId].name,
+          colour: budget.categoriesById[transaction.categoryId].colour
         },
         createdAt: format(new Date(transaction.createdAt), 'YYYY-MM-DD')
       }
@@ -199,7 +193,7 @@ export default compose(
     validationSchema: Yup.object().shape({
       description: Yup.string()
         .max(256, 'Too Long!'),
-      category: Yup.object()
+      categoryId: Yup.object()
         .nullable(),
       amount: Yup.number()
         .required('Please enter an amount'),
@@ -210,7 +204,7 @@ export default compose(
       setSubmitting(true)
       props.handleSave(props.account, {
         ...values,
-        category: (values.category === null ? undefined : values.category.value),
+        categoryId: (values.categoryId === null ? undefined : values.categoryId.id),
         createdAt: parse(values.createdAt).getTime()
       })
       resetForm()
diff --git a/src/core/Accounts/Transactions/TransactionsTable.jsx b/src/core/Accounts/Transactions/TransactionsTable.jsx
index 5a42611..b4fe9a5 100644
--- a/src/core/Accounts/Transactions/TransactionsTable.jsx
+++ b/src/core/Accounts/Transactions/TransactionsTable.jsx
@@ -56,7 +56,7 @@ const styles = theme => ({
 })
 
 const mapStateToProps = (state, props) => ({
-  budgetColours: state.budget.colours,
+  budget: state.budget,
   formatCurrency: currencyFormatter(state.settings.locale, props.account.currency),
   formatDecimal: decimalFormatter(state.settings.locale, props.account.type),
   formatDate: dateFormatter(state.settings.locale)
@@ -127,9 +127,10 @@ export class TransactionsTableComponent extends React.Component {
   }
 
   filterByDescription = (transaction) => {
-    let res = transaction.description.toLowerCase().includes(this.state.filters.description)
-    if (transaction.category !== undefined) {
-      res = res || transaction.category.toLowerCase().includes(this.state.filters.description)
+    let res = transaction.description.toLowerCase().includes(this.state.filters.description.toLowerCase())
+    if (transaction.categoryId !== undefined) {
+      const category = this.props.budget.categoriesById[transaction.categoryId].name
+      res = res || category.toLowerCase().includes(this.state.filters.description.toLowerCase())
     }
     return res
   }
@@ -198,7 +199,7 @@ export class TransactionsTableComponent extends React.Component {
       className,
       children,
       account,
-      budgetColours,
+      budget,
       formatDate,
       Toolbar,
       toolbarProps,
@@ -285,17 +286,20 @@ export class TransactionsTableComponent extends React.Component {
               <Column
                 width={200}
                 label="Category"
-                dataKey="category"
+                dataKey="categoryId"
                 cellRenderer={
                   ({ rowData }) => {
-                    const colour = rowData.category in budgetColours ? budgetColours[rowData.category] : '#dddddd'
-                    return rowData.category !== undefined && (
+                    if (rowData.categoryId === undefined) return null
+                    const category = budget.categoriesById[rowData.categoryId]
+                    if (category === undefined) return null
+                    if (category.colour === undefined) return null
+                    return (
                       <Chip
                         size="small"
-                        label={rowData.category}
+                        label={category.name}
                         style={{
-                          background: colour,
-                          color: chroma.contrast(colour, 'black') > 5 ? 'black' : 'white'
+                          background: category.colour,
+                          color: chroma.contrast(category.colour, 'black') > 5 ? 'black' : 'white'
                         }}
                       />
                     )
@@ -341,7 +345,7 @@ TransactionsTableComponent.propTypes = {
   toolbarProps: PropTypes.object,
   account: PropTypes.object.isRequired,
   transactions: PropTypes.array.isRequired,
-  budgetColours: PropTypes.object.isRequired,
+  budget: PropTypes.object.isRequired,
   formatCurrency: PropTypes.func.isRequired,
   formatDecimal: PropTypes.func.isRequired,
   formatDate: PropTypes.func.isRequired,
diff --git a/src/core/Accounts/Transactions/TransactionsToolbar.jsx b/src/core/Accounts/Transactions/TransactionsToolbar.jsx
index d035538..511b9e6 100644
--- a/src/core/Accounts/Transactions/TransactionsToolbar.jsx
+++ b/src/core/Accounts/Transactions/TransactionsToolbar.jsx
@@ -9,8 +9,8 @@ import Icon from '@mdi/react'
 import DeleteIcon from '@material-ui/icons/Delete'
 import { mdiImport } from '@mdi/js'
 import InputBase from '@material-ui/core/InputBase'
+import InputAdornment from '@material-ui/core/InputAdornment'
 import SearchIcon from '@material-ui/icons/Search'
-import CancelIcon from '@material-ui/icons/Cancel'
 import { fade } from '@material-ui/core/styles/colorManipulator'
 import confirm from '../../../util/confirm'
 import TableToolbar from '../../../common/TableToolbar'
@@ -34,36 +34,19 @@ const styles = theme => ({
       backgroundColor: fade(theme.palette.grey[400], 0.25)
     }
   },
-  searchIcon: {
-    width: theme.spacing(9),
-    height: '100%',
-    position: 'absolute',
-    pointerEvents: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: '#bbb'
-  },
-  clearIcon: {
-    position: 'absolute',
-    right: theme.spacing(2),
-    padding: 0,
-    marginTop: theme.spacing(2),
-    color: '#999'
-  },
   inputRoot: {
     color: 'inherit',
-    width: '100%'
+    width: '100%',
+    padding: theme.spacing(2),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1)
+
   },
   inputInput: {
-    paddingTop: theme.spacing(1) * 1.8,
-    paddingRight: theme.spacing(5),
-    paddingBottom: theme.spacing(1),
-    paddingLeft: theme.spacing(8),
     transition: theme.transitions.create('width'),
     width: '100%',
     [theme.breakpoints.up('md')]: {
-      minWidth: 230
+      minWidth: 240
     }
   }
 })
@@ -88,10 +71,6 @@ export class TransactionsToolbarComponent extends React.Component {
     }
   }
 
-  onClearClick = () => {
-    this.props.filterProps.unsetFilter({ attr: 'description' })
-  }
-
   render() {
     const {
       classes,
@@ -116,29 +95,17 @@ export class TransactionsToolbarComponent extends React.Component {
         ) : (
           <div className={classes.buttons}>
             <div className={classes.search}>
-              <div className={classes.searchIcon}>
-                <SearchIcon />
-              </div>
               <InputBase
-                placeholder="Search description or categories..."
+                type="search"
+                placeholder="Search description or category"
                 onChange={this.onChangeSearch}
                 value={filterProps.filters.description || ''}
                 classes={{
                   root: classes.inputRoot,
                   input: classes.inputInput
                 }}
-
+                startAdornment={<InputAdornment position="start"><SearchIcon /></InputAdornment>}
               />
-              {('description' in this.props.filterProps.filters) && (
-                <IconButton
-                  className={classes.clearIcon}
-                  aria-label="Clear"
-                  size="small"
-                  onClick={this.onClearClick}
-                >
-                  <CancelIcon fontSize="inherit" />
-                </IconButton>
-              )}
             </div>
             <Tooltip title="Import transaction">
               <IconButton
diff --git a/src/core/Accounts/Transactions/__tests__/TransactionsTable.test.jsx b/src/core/Accounts/Transactions/__tests__/TransactionsTable.test.jsx
index 843a123..7042a55 100644
--- a/src/core/Accounts/Transactions/__tests__/TransactionsTable.test.jsx
+++ b/src/core/Accounts/Transactions/__tests__/TransactionsTable.test.jsx
@@ -32,7 +32,7 @@ describe('TransactionsTable', () => {
           className=""
           account={account}
           transactions={[]}
-          budgetColours={{}}
+          budget={{}}
           formatCurrency={mochFormatCurrency}
           formatDecimal={mochFormatDecimal}
           formatDate={mochFormatDate}
@@ -55,7 +55,7 @@ describe('TransactionsTable', () => {
           className=""
           account={account}
           transactions={transactions}
-          budgetColours={{}}
+          budget={{}}
           formatCurrency={mochFormatCurrency}
           formatDecimal={mochFormatDecimal}
           formatDate={mochFormatDate}
@@ -78,7 +78,7 @@ describe('TransactionsTable', () => {
           className=""
           account={account}
           transactions={transactions}
-          budgetColours={{}}
+          budget={{}}
           formatCurrency={mochFormatCurrency}
           formatDecimal={mochFormatDecimal}
           formatDate={mochFormatDate}
diff --git a/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsTable.test.jsx.snap b/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsTable.test.jsx.snap
index 5c23fad..9f893a9 100644
--- a/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsTable.test.jsx.snap
+++ b/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsTable.test.jsx.snap
@@ -5,10 +5,10 @@ exports[`TransactionsTable matches snapshot with no transactions 1`] = `
   className=" "
 >
   <div
-    className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-8 MuiToolbar-gutters"
+    className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-6 MuiToolbar-gutters"
   >
     <div
-      className="TableToolbar-title-12"
+      className="TableToolbar-title-10"
     >
       <div>
         <h6
@@ -22,10 +22,10 @@ exports[`TransactionsTable matches snapshot with no transactions 1`] = `
       </div>
     </div>
     <div
-      className="TableToolbar-spacer-10"
+      className="TableToolbar-spacer-8"
     />
     <div
-      className="TableToolbar-actions-11"
+      className="TableToolbar-actions-9"
     >
       <div
         className="withRouter(TransactionsToolbarComponent)-buttons-2"
@@ -34,31 +34,31 @@ exports[`TransactionsTable matches snapshot with no transactions 1`] = `
           className="withRouter(TransactionsToolbarComponent)-search-3"
         >
           <div
-            className="withRouter(TransactionsToolbarComponent)-searchIcon-4"
-          >
-            <svg
-              aria-hidden="true"
-              className="MuiSvgIcon-root"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-              />
-            </svg>
-          </div>
-          <div
-            className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-6"
+            className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-4 MuiInputBase-adornedStart"
             onClick={[Function]}
           >
+            <div
+              className="MuiInputAdornment-root MuiInputAdornment-positionStart"
+            >
+              <svg
+                aria-hidden="true"
+                className="MuiSvgIcon-root"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                />
+              </svg>
+            </div>
             <input
-              className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-7"
+              className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-5 MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedStart"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
-              placeholder="Search description or categories..."
-              type="text"
+              placeholder="Search description or category"
+              type="search"
               value=""
             />
           </div>
@@ -198,7 +198,7 @@ exports[`TransactionsTable matches snapshot with no transactions 1`] = `
           >
             <span
               aria-disabled={false}
-              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-99 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-102 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
               onBlur={[Function]}
               onDragLeave={[Function]}
               onFocus={[Function]}
@@ -228,7 +228,7 @@ exports[`TransactionsTable matches snapshot with no transactions 1`] = `
                 </svg>
                 <input
                   checked={false}
-                  className="PrivateSwitchBase-input-102"
+                  className="PrivateSwitchBase-input-105"
                   data-indeterminate={false}
                   onChange={[Function]}
                   type="checkbox"
@@ -396,10 +396,10 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
   className=" "
 >
   <div
-    className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-8 MuiToolbar-gutters"
+    className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-6 MuiToolbar-gutters"
   >
     <div
-      className="TableToolbar-title-12"
+      className="TableToolbar-title-10"
     >
       <div>
         <h6
@@ -413,10 +413,10 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
       </div>
     </div>
     <div
-      className="TableToolbar-spacer-10"
+      className="TableToolbar-spacer-8"
     />
     <div
-      className="TableToolbar-actions-11"
+      className="TableToolbar-actions-9"
     >
       <div
         className="withRouter(TransactionsToolbarComponent)-buttons-2"
@@ -425,31 +425,31 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
           className="withRouter(TransactionsToolbarComponent)-search-3"
         >
           <div
-            className="withRouter(TransactionsToolbarComponent)-searchIcon-4"
-          >
-            <svg
-              aria-hidden="true"
-              className="MuiSvgIcon-root"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-              />
-            </svg>
-          </div>
-          <div
-            className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-6"
+            className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-4 MuiInputBase-adornedStart"
             onClick={[Function]}
           >
+            <div
+              className="MuiInputAdornment-root MuiInputAdornment-positionStart"
+            >
+              <svg
+                aria-hidden="true"
+                className="MuiSvgIcon-root"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                />
+              </svg>
+            </div>
             <input
-              className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-7"
+              className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-5 MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedStart"
               onBlur={[Function]}
               onChange={[Function]}
               onFocus={[Function]}
-              placeholder="Search description or categories..."
-              type="text"
+              placeholder="Search description or category"
+              type="search"
               value=""
             />
           </div>
@@ -589,7 +589,7 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
           >
             <span
               aria-disabled={false}
-              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-99 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-102 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
               onBlur={[Function]}
               onDragLeave={[Function]}
               onFocus={[Function]}
@@ -619,7 +619,7 @@ exports[`TransactionsTable matches snapshot with some transactions 1`] = `
                 </svg>
                 <input
                   checked={false}
-                  className="PrivateSwitchBase-input-102"
+                  className="PrivateSwitchBase-input-105"
                   data-indeterminate={false}
                   onChange={[Function]}
                   type="checkbox"
diff --git a/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsToolbar.test.jsx.snap b/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsToolbar.test.jsx.snap
index 3d5a561..c0577da 100644
--- a/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsToolbar.test.jsx.snap
+++ b/src/core/Accounts/Transactions/__tests__/__snapshots__/TransactionsToolbar.test.jsx.snap
@@ -26,30 +26,32 @@ exports[`TransactionsToolbar matches snapshot with no selected transactions 1`]
   >
     <div>
       <div>
-        <div>
-          <svg
-            aria-hidden="true"
-            className="MuiSvgIcon-root"
-            focusable="false"
-            role="presentation"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-            />
-          </svg>
-        </div>
         <div
-          className="MuiInputBase-root"
+          className="MuiInputBase-root MuiInputBase-adornedStart"
           onClick={[Function]}
         >
+          <div
+            className="MuiInputAdornment-root MuiInputAdornment-positionStart"
+          >
+            <svg
+              aria-hidden="true"
+              className="MuiSvgIcon-root"
+              focusable="false"
+              role="presentation"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+              />
+            </svg>
+          </div>
           <input
-            className="MuiInputBase-input"
+            className="MuiInputBase-input MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedStart"
             onBlur={[Function]}
             onChange={[Function]}
             onFocus={[Function]}
-            placeholder="Search description or categories..."
-            type="text"
+            placeholder="Search description or category"
+            type="search"
             value=""
           />
         </div>
diff --git a/src/core/Accounts/Transactions/__tests__/__snapshots__/index.test.jsx.snap b/src/core/Accounts/Transactions/__tests__/__snapshots__/index.test.jsx.snap
index 2bfb402..a86d366 100644
--- a/src/core/Accounts/Transactions/__tests__/__snapshots__/index.test.jsx.snap
+++ b/src/core/Accounts/Transactions/__tests__/__snapshots__/index.test.jsx.snap
@@ -19,10 +19,10 @@ exports[`Transactions matches snapshot with no transactions 1`] = `
     className="TransactionsTableComponent-tableWrapper-1 "
   >
     <div
-      className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-16 MuiToolbar-gutters"
+      className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-14 MuiToolbar-gutters"
     >
       <div
-        className="TableToolbar-title-20"
+        className="TableToolbar-title-18"
       >
         <div>
           <h6
@@ -38,10 +38,10 @@ exports[`Transactions matches snapshot with no transactions 1`] = `
         </div>
       </div>
       <div
-        className="TableToolbar-spacer-18"
+        className="TableToolbar-spacer-16"
       />
       <div
-        className="TableToolbar-actions-19"
+        className="TableToolbar-actions-17"
       >
         <div
           className="withRouter(TransactionsToolbarComponent)-buttons-10"
@@ -50,31 +50,31 @@ exports[`Transactions matches snapshot with no transactions 1`] = `
             className="withRouter(TransactionsToolbarComponent)-search-11"
           >
             <div
-              className="withRouter(TransactionsToolbarComponent)-searchIcon-12"
-            >
-              <svg
-                aria-hidden="true"
-                className="MuiSvgIcon-root"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-                />
-              </svg>
-            </div>
-            <div
-              className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-14"
+              className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-12 MuiInputBase-adornedStart"
               onClick={[Function]}
             >
+              <div
+                className="MuiInputAdornment-root MuiInputAdornment-positionStart"
+              >
+                <svg
+                  aria-hidden="true"
+                  className="MuiSvgIcon-root"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                  />
+                </svg>
+              </div>
               <input
-                className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-15"
+                className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-13 MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedStart"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
-                placeholder="Search description or categories..."
-                type="text"
+                placeholder="Search description or category"
+                type="search"
                 value=""
               />
             </div>
@@ -214,7 +214,7 @@ exports[`Transactions matches snapshot with no transactions 1`] = `
             >
               <span
                 aria-disabled={false}
-                className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-107 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-110 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                 onBlur={[Function]}
                 onDragLeave={[Function]}
                 onFocus={[Function]}
@@ -244,7 +244,7 @@ exports[`Transactions matches snapshot with no transactions 1`] = `
                   </svg>
                   <input
                     checked={false}
-                    className="PrivateSwitchBase-input-110"
+                    className="PrivateSwitchBase-input-113"
                     data-indeterminate={false}
                     onChange={[Function]}
                     type="checkbox"
@@ -443,10 +443,10 @@ exports[`Transactions matches snapshot with one transaction in a fiat account 1`
     className="TransactionsTableComponent-tableWrapper-1 "
   >
     <div
-      className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-16 MuiToolbar-gutters"
+      className="MuiToolbar-root MuiToolbar-regular TableToolbar-root-14 MuiToolbar-gutters"
     >
       <div
-        className="TableToolbar-title-20"
+        className="TableToolbar-title-18"
       >
         <div>
           <h6
@@ -462,10 +462,10 @@ exports[`Transactions matches snapshot with one transaction in a fiat account 1`
         </div>
       </div>
       <div
-        className="TableToolbar-spacer-18"
+        className="TableToolbar-spacer-16"
       />
       <div
-        className="TableToolbar-actions-19"
+        className="TableToolbar-actions-17"
       >
         <div
           className="withRouter(TransactionsToolbarComponent)-buttons-10"
@@ -474,31 +474,31 @@ exports[`Transactions matches snapshot with one transaction in a fiat account 1`
             className="withRouter(TransactionsToolbarComponent)-search-11"
           >
             <div
-              className="withRouter(TransactionsToolbarComponent)-searchIcon-12"
-            >
-              <svg
-                aria-hidden="true"
-                className="MuiSvgIcon-root"
-                focusable="false"
-                role="presentation"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
-                />
-              </svg>
-            </div>
-            <div
-              className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-14"
+              className="MuiInputBase-root withRouter(TransactionsToolbarComponent)-inputRoot-12 MuiInputBase-adornedStart"
               onClick={[Function]}
             >
+              <div
+                className="MuiInputAdornment-root MuiInputAdornment-positionStart"
+              >
+                <svg
+                  aria-hidden="true"
+                  className="MuiSvgIcon-root"
+                  focusable="false"
+                  role="presentation"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                  />
+                </svg>
+              </div>
               <input
-                className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-15"
+                className="MuiInputBase-input withRouter(TransactionsToolbarComponent)-inputInput-13 MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedStart"
                 onBlur={[Function]}
                 onChange={[Function]}
                 onFocus={[Function]}
-                placeholder="Search description or categories..."
-                type="text"
+                placeholder="Search description or category"
+                type="search"
                 value=""
               />
             </div>
@@ -638,7 +638,7 @@ exports[`Transactions matches snapshot with one transaction in a fiat account 1`
             >
               <span
                 aria-disabled={false}
-                className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-107 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-110 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
                 onBlur={[Function]}
                 onDragLeave={[Function]}
                 onFocus={[Function]}
@@ -668,7 +668,7 @@ exports[`Transactions matches snapshot with one transaction in a fiat account 1`
                   </svg>
                   <input
                     checked={false}
-                    className="PrivateSwitchBase-input-110"
+                    className="PrivateSwitchBase-input-113"
                     data-indeterminate={false}
                     onChange={[Function]}
                     type="checkbox"
diff --git a/src/core/Accounts/__tests__/__snapshots__/form.test.jsx.snap b/src/core/Accounts/__tests__/__snapshots__/form.test.jsx.snap
index e4ef90d..3b1b757 100644
--- a/src/core/Accounts/__tests__/__snapshots__/form.test.jsx.snap
+++ b/src/core/Accounts/__tests__/__snapshots__/form.test.jsx.snap
@@ -216,9 +216,6 @@ exports[`Account form matches snapshot for edit account 1`] = `
             aria-label="Opening balance"
             className="MuiInputBase-input MuiInput-input"
             disabled={false}
-            max={9007199254740991}
-            maxLength={10}
-            min={-9007199254740991}
             name="openingBalance"
             onBlur={[Function]}
             onChange={[Function]}
@@ -662,9 +659,6 @@ exports[`Account form matches snapshot for new account 1`] = `
             aria-label="Opening balance"
             className="MuiInputBase-input MuiInput-input"
             disabled={false}
-            max={9007199254740991}
-            maxLength={10}
-            min={-9007199254740991}
             name="openingBalance"
             onBlur={[Function]}
             onChange={[Function]}
diff --git a/src/core/Accounts/__tests__/__snapshots__/index.test.jsx.snap b/src/core/Accounts/__tests__/__snapshots__/index.test.jsx.snap
index 6c1b290..9551012 100644
--- a/src/core/Accounts/__tests__/__snapshots__/index.test.jsx.snap
+++ b/src/core/Accounts/__tests__/__snapshots__/index.test.jsx.snap
@@ -10,13 +10,52 @@ exports[`AccountsIndex matches snapshot with no accounts 1`] = `
             <WithStyles(ForwardRef(Container))>
               <ForwardRef(Container) classes={{...}}>
                 <div className=\\"MuiContainer-root MuiContainer-maxWidthLg\\">
-                  <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"AccountsIndexComponent-noAccounts-5\\">
-                    <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"AccountsIndexComponent-noAccounts-5\\" theme={{...}}>
-                      <span className=\\"MuiTypography-root AccountsIndexComponent-noAccounts-5 MuiTypography-caption\\">
-                        You don&#39;t have any accounts yet
-                      </span>
-                    </ForwardRef(Typography)>
-                  </WithStyles(ForwardRef(Typography))>
+                  <WithStyles(ForwardRef(Paper)) className=\\"AccountsIndexComponent-noAccountsPaper-11\\">
+                    <ForwardRef(Paper) classes={{...}} className=\\"AccountsIndexComponent-noAccountsPaper-11\\">
+                      <div className=\\"MuiPaper-root MuiPaper-elevation1 AccountsIndexComponent-noAccountsPaper-11 MuiPaper-rounded\\">
+                        <WithStyles(ForwardRef(Typography)) variant=\\"h6\\">
+                          <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" theme={{...}}>
+                            <h6 className=\\"MuiTypography-root MuiTypography-h6\\">
+                              You don&#39;t have any accounts yet.
+                            </h6>
+                          </ForwardRef(Typography)>
+                        </WithStyles(ForwardRef(Typography))>
+                        <WithStyles(ForwardRef(Button)) variant=\\"contained\\" color=\\"secondary\\" component={{...}} className=\\"AccountsIndexComponent-newAccountButton-12\\">
+                          <ForwardRef(Button) classes={{...}} variant=\\"contained\\" color=\\"secondary\\" component={{...}} className=\\"AccountsIndexComponent-newAccountButton-12\\">
+                            <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root AccountsIndexComponent-newAccountButton-12 MuiButton-contained MuiButton-containedSecondary\\" component={{...}} disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\">
+                              <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root AccountsIndexComponent-newAccountButton-12 MuiButton-contained MuiButton-containedSecondary\\" component={{...}} disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\">
+                                <ForwardRef className=\\"MuiButtonBase-root MuiButton-root AccountsIndexComponent-newAccountButton-12 MuiButton-contained MuiButton-containedSecondary\\" onBlur={[Function]} onClick={[undefined]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} role=\\"button\\" aria-disabled={false}>
+                                  <Link to=\\"/accounts/new\\" className=\\"MuiButtonBase-root MuiButton-root AccountsIndexComponent-newAccountButton-12 MuiButton-contained MuiButton-containedSecondary\\" onBlur={[Function]} onClick={[undefined]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} role=\\"button\\" aria-disabled={false} innerRef={[Function]}>
+                                    <a className=\\"MuiButtonBase-root MuiButton-root AccountsIndexComponent-newAccountButton-12 MuiButton-contained MuiButton-containedSecondary\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} role=\\"button\\" aria-disabled={false} href=\\"/accounts/new\\">
+                                      <span className=\\"MuiButton-label\\">
+                                        Add an account
+                                      </span>
+                                      <NoSsr>
+                                        <WithStyles(undefined) center={false}>
+                                          <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                            <span className=\\"MuiTouchRipple-root\\">
+                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                            </span>
+                                          </ForwardRef(TouchRipple)>
+                                        </WithStyles(undefined)>
+                                      </NoSsr>
+                                    </a>
+                                  </Link>
+                                </ForwardRef>
+                              </ForwardRef(ButtonBase)>
+                            </WithStyles(ForwardRef(ButtonBase))>
+                          </ForwardRef(Button)>
+                        </WithStyles(ForwardRef(Button))>
+                        <WithStyles(ForwardRef(Typography)) variant=\\"body1\\">
+                          <ForwardRef(Typography) classes={{...}} variant=\\"body1\\" theme={{...}}>
+                            <p className=\\"MuiTypography-root MuiTypography-body1\\">
+                              You can keep track of all the accounts you have from any institution.
+                            </p>
+                          </ForwardRef(Typography)>
+                        </WithStyles(ForwardRef(Typography))>
+                      </div>
+                    </ForwardRef(Paper)>
+                  </WithStyles(ForwardRef(Paper))>
                 </div>
               </ForwardRef(Container)>
             </WithStyles(ForwardRef(Container))>
@@ -91,9 +130,9 @@ exports[`AccountsIndex matches snapshot with one account 1`] = `
                                     <WithStyles(ForwardRef(Grid)) item={true} xs={4}>
                                       <ForwardRef(Grid) classes={{...}} item={true} xs={4}>
                                         <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4\\">
-                                          <WithStyles(ForwardRef(Paper)) className=\\"AccountsIndexComponent-accountsChart-11\\">
-                                            <ForwardRef(Paper) classes={{...}} className=\\"AccountsIndexComponent-accountsChart-11\\">
-                                              <div className=\\"MuiPaper-root MuiPaper-elevation1 AccountsIndexComponent-accountsChart-11 MuiPaper-rounded\\">
+                                          <WithStyles(ForwardRef(Paper)) className=\\"AccountsIndexComponent-accountsChart-10\\">
+                                            <ForwardRef(Paper) classes={{...}} className=\\"AccountsIndexComponent-accountsChart-10\\">
+                                              <div className=\\"MuiPaper-root MuiPaper-elevation1 AccountsIndexComponent-accountsChart-10 MuiPaper-rounded\\">
                                                 <AccountsChart totalBalance={1000}>
                                                   <ResponsiveContainer height={200} width=\\"100%\\" debounce={0}>
                                                     <div id={[undefined]} className=\\"recharts-responsive-container\\" style={{...}}>
@@ -113,9 +152,9 @@ exports[`AccountsIndex matches snapshot with one account 1`] = `
                                     <WithStyles(ForwardRef(Grid)) item={true} xs={8}>
                                       <ForwardRef(Grid) classes={{...}} item={true} xs={8}>
                                         <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-8\\">
-                                          <WithStyles(ForwardRef(Paper)) className=\\"AccountsIndexComponent-accountsTable-6\\">
-                                            <ForwardRef(Paper) classes={{...}} className=\\"AccountsIndexComponent-accountsTable-6\\">
-                                              <div className=\\"MuiPaper-root MuiPaper-elevation1 AccountsIndexComponent-accountsTable-6 MuiPaper-rounded\\">
+                                          <WithStyles(ForwardRef(Paper)) className=\\"AccountsIndexComponent-accountsTable-5\\">
+                                            <ForwardRef(Paper) classes={{...}} className=\\"AccountsIndexComponent-accountsTable-5\\">
+                                              <div className=\\"MuiPaper-root MuiPaper-elevation1 AccountsIndexComponent-accountsTable-5 MuiPaper-rounded\\">
                                                 <WithStyles(ForwardRef(Table))>
                                                   <ForwardRef(Table) classes={{...}}>
                                                     <table className=\\"MuiTable-root\\">
@@ -161,13 +200,13 @@ exports[`AccountsIndex matches snapshot with one account 1`] = `
                                                                   <WithStyles(ForwardRef(TableCell))>
                                                                     <ForwardRef(TableCell) classes={{...}}>
                                                                       <td className=\\"MuiTableCell-root MuiTableCell-body\\" aria-sort={{...}} scope={[undefined]}>
-                                                                        <span className=\\"AccountsIndexComponent-institutionWrapper-7\\">
-                                                                          <WithStyles(InstitutionIcon) institution=\\"TD\\" size=\\"small\\" className=\\"AccountsIndexComponent-institutionIcon-8\\">
-                                                                            <InstitutionIcon classes={{...}} institution=\\"TD\\" size=\\"small\\" className=\\"AccountsIndexComponent-institutionIcon-8\\">
-                                                                              <ForwardRef className=\\"InstitutionIcon-small-207 AccountsIndexComponent-institutionIcon-8\\">
-                                                                                <WithStyles(ForwardRef(SvgIcon)) className=\\"InstitutionIcon-small-207 AccountsIndexComponent-institutionIcon-8\\">
-                                                                                  <ForwardRef(SvgIcon) classes={{...}} className=\\"InstitutionIcon-small-207 AccountsIndexComponent-institutionIcon-8\\">
-                                                                                    <svg className=\\"MuiSvgIcon-root InstitutionIcon-small-207 AccountsIndexComponent-institutionIcon-8\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                        <span className=\\"AccountsIndexComponent-institutionWrapper-6\\">
+                                                                          <WithStyles(InstitutionIcon) institution=\\"TD\\" size=\\"small\\" className=\\"AccountsIndexComponent-institutionIcon-7\\">
+                                                                            <InstitutionIcon classes={{...}} institution=\\"TD\\" size=\\"small\\" className=\\"AccountsIndexComponent-institutionIcon-7\\">
+                                                                              <ForwardRef className=\\"InstitutionIcon-small-238 AccountsIndexComponent-institutionIcon-7\\">
+                                                                                <WithStyles(ForwardRef(SvgIcon)) className=\\"InstitutionIcon-small-238 AccountsIndexComponent-institutionIcon-7\\">
+                                                                                  <ForwardRef(SvgIcon) classes={{...}} className=\\"InstitutionIcon-small-238 AccountsIndexComponent-institutionIcon-7\\">
+                                                                                    <svg className=\\"MuiSvgIcon-root InstitutionIcon-small-238 AccountsIndexComponent-institutionIcon-7\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
                                                                                       <path d=\\"M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z\\" />
                                                                                     </svg>
                                                                                   </ForwardRef(SvgIcon)>
@@ -210,9 +249,9 @@ exports[`AccountsIndex matches snapshot with one account 1`] = `
                                                             <WithStyles(ForwardRef(TableRow)) hover={true} onClick={[Function: onClick]}>
                                                               <ForwardRef(TableRow) classes={{...}} hover={true} onClick={[Function: onClick]}>
                                                                 <tr className=\\"MuiTableRow-root MuiTableRow-hover\\" onClick={[Function: onClick]}>
-                                                                  <WithStyles(ForwardRef(TableCell)) className=\\"AccountsIndexComponent-accountWrapper-9\\">
-                                                                    <ForwardRef(TableCell) classes={{...}} className=\\"AccountsIndexComponent-accountWrapper-9\\">
-                                                                      <td className=\\"MuiTableCell-root AccountsIndexComponent-accountWrapper-9 MuiTableCell-body\\" aria-sort={{...}} scope={[undefined]} />
+                                                                  <WithStyles(ForwardRef(TableCell)) className=\\"AccountsIndexComponent-accountWrapper-8\\">
+                                                                    <ForwardRef(TableCell) classes={{...}} className=\\"AccountsIndexComponent-accountWrapper-8\\">
+                                                                      <td className=\\"MuiTableCell-root AccountsIndexComponent-accountWrapper-8 MuiTableCell-body\\" aria-sort={{...}} scope={[undefined]} />
                                                                     </ForwardRef(TableCell)>
                                                                   </WithStyles(ForwardRef(TableCell))>
                                                                   <WithStyles(ForwardRef(TableCell))>
@@ -327,9 +366,9 @@ exports[`AccountsIndex matches snapshot with two accounts in a different currenc
                                     <WithStyles(ForwardRef(Grid)) item={true} xs={4}>
                                       <ForwardRef(Grid) classes={{...}} item={true} xs={4}>
                                         <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-4\\">
-                                          <WithStyles(ForwardRef(Paper)) className=\\"AccountsIndexComponent-accountsChart-11\\">
-                                            <ForwardRef(Paper) classes={{...}} className=\\"AccountsIndexComponent-accountsChart-11\\">
-                                              <div className=\\"MuiPaper-root MuiPaper-elevation1 AccountsIndexComponent-accountsChart-11 MuiPaper-rounded\\">
+                                          <WithStyles(ForwardRef(Paper)) className=\\"AccountsIndexComponent-accountsChart-10\\">
+                                            <ForwardRef(Paper) classes={{...}} className=\\"AccountsIndexComponent-accountsChart-10\\">
+                                              <div className=\\"MuiPaper-root MuiPaper-elevation1 AccountsIndexComponent-accountsChart-10 MuiPaper-rounded\\">
                                                 <AccountsChart totalBalance={2500}>
                                                   <ResponsiveContainer height={200} width=\\"100%\\" debounce={0}>
                                                     <div id={[undefined]} className=\\"recharts-responsive-container\\" style={{...}}>
@@ -349,9 +388,9 @@ exports[`AccountsIndex matches snapshot with two accounts in a different currenc
                                     <WithStyles(ForwardRef(Grid)) item={true} xs={8}>
                                       <ForwardRef(Grid) classes={{...}} item={true} xs={8}>
                                         <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-8\\">
-                                          <WithStyles(ForwardRef(Paper)) className=\\"AccountsIndexComponent-accountsTable-6\\">
-                                            <ForwardRef(Paper) classes={{...}} className=\\"AccountsIndexComponent-accountsTable-6\\">
-                                              <div className=\\"MuiPaper-root MuiPaper-elevation1 AccountsIndexComponent-accountsTable-6 MuiPaper-rounded\\">
+                                          <WithStyles(ForwardRef(Paper)) className=\\"AccountsIndexComponent-accountsTable-5\\">
+                                            <ForwardRef(Paper) classes={{...}} className=\\"AccountsIndexComponent-accountsTable-5\\">
+                                              <div className=\\"MuiPaper-root MuiPaper-elevation1 AccountsIndexComponent-accountsTable-5 MuiPaper-rounded\\">
                                                 <WithStyles(ForwardRef(Table))>
                                                   <ForwardRef(Table) classes={{...}}>
                                                     <table className=\\"MuiTable-root\\">
@@ -397,13 +436,13 @@ exports[`AccountsIndex matches snapshot with two accounts in a different currenc
                                                                   <WithStyles(ForwardRef(TableCell))>
                                                                     <ForwardRef(TableCell) classes={{...}}>
                                                                       <td className=\\"MuiTableCell-root MuiTableCell-body\\" aria-sort={{...}} scope={[undefined]}>
-                                                                        <span className=\\"AccountsIndexComponent-institutionWrapper-7\\">
-                                                                          <WithStyles(InstitutionIcon) institution=\\"TD\\" size=\\"small\\" className=\\"AccountsIndexComponent-institutionIcon-8\\">
-                                                                            <InstitutionIcon classes={{...}} institution=\\"TD\\" size=\\"small\\" className=\\"AccountsIndexComponent-institutionIcon-8\\">
-                                                                              <ForwardRef className=\\"InstitutionIcon-small-207 AccountsIndexComponent-institutionIcon-8\\">
-                                                                                <WithStyles(ForwardRef(SvgIcon)) className=\\"InstitutionIcon-small-207 AccountsIndexComponent-institutionIcon-8\\">
-                                                                                  <ForwardRef(SvgIcon) classes={{...}} className=\\"InstitutionIcon-small-207 AccountsIndexComponent-institutionIcon-8\\">
-                                                                                    <svg className=\\"MuiSvgIcon-root InstitutionIcon-small-207 AccountsIndexComponent-institutionIcon-8\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                        <span className=\\"AccountsIndexComponent-institutionWrapper-6\\">
+                                                                          <WithStyles(InstitutionIcon) institution=\\"TD\\" size=\\"small\\" className=\\"AccountsIndexComponent-institutionIcon-7\\">
+                                                                            <InstitutionIcon classes={{...}} institution=\\"TD\\" size=\\"small\\" className=\\"AccountsIndexComponent-institutionIcon-7\\">
+                                                                              <ForwardRef className=\\"InstitutionIcon-small-238 AccountsIndexComponent-institutionIcon-7\\">
+                                                                                <WithStyles(ForwardRef(SvgIcon)) className=\\"InstitutionIcon-small-238 AccountsIndexComponent-institutionIcon-7\\">
+                                                                                  <ForwardRef(SvgIcon) classes={{...}} className=\\"InstitutionIcon-small-238 AccountsIndexComponent-institutionIcon-7\\">
+                                                                                    <svg className=\\"MuiSvgIcon-root InstitutionIcon-small-238 AccountsIndexComponent-institutionIcon-7\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
                                                                                       <path d=\\"M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z\\" />
                                                                                     </svg>
                                                                                   </ForwardRef(SvgIcon)>
@@ -446,9 +485,9 @@ exports[`AccountsIndex matches snapshot with two accounts in a different currenc
                                                             <WithStyles(ForwardRef(TableRow)) hover={true} onClick={[Function: onClick]}>
                                                               <ForwardRef(TableRow) classes={{...}} hover={true} onClick={[Function: onClick]}>
                                                                 <tr className=\\"MuiTableRow-root MuiTableRow-hover\\" onClick={[Function: onClick]}>
-                                                                  <WithStyles(ForwardRef(TableCell)) className=\\"AccountsIndexComponent-accountWrapper-9\\">
-                                                                    <ForwardRef(TableCell) classes={{...}} className=\\"AccountsIndexComponent-accountWrapper-9\\">
-                                                                      <td className=\\"MuiTableCell-root AccountsIndexComponent-accountWrapper-9 MuiTableCell-body\\" aria-sort={{...}} scope={[undefined]} />
+                                                                  <WithStyles(ForwardRef(TableCell)) className=\\"AccountsIndexComponent-accountWrapper-8\\">
+                                                                    <ForwardRef(TableCell) classes={{...}} className=\\"AccountsIndexComponent-accountWrapper-8\\">
+                                                                      <td className=\\"MuiTableCell-root AccountsIndexComponent-accountWrapper-8 MuiTableCell-body\\" aria-sort={{...}} scope={[undefined]} />
                                                                     </ForwardRef(TableCell)>
                                                                   </WithStyles(ForwardRef(TableCell))>
                                                                   <WithStyles(ForwardRef(TableCell))>
@@ -471,9 +510,9 @@ exports[`AccountsIndex matches snapshot with two accounts in a different currenc
                                                             <WithStyles(ForwardRef(TableRow)) hover={true} onClick={[Function: onClick]}>
                                                               <ForwardRef(TableRow) classes={{...}} hover={true} onClick={[Function: onClick]}>
                                                                 <tr className=\\"MuiTableRow-root MuiTableRow-hover\\" onClick={[Function: onClick]}>
-                                                                  <WithStyles(ForwardRef(TableCell)) className=\\"AccountsIndexComponent-accountWrapper-9\\">
-                                                                    <ForwardRef(TableCell) classes={{...}} className=\\"AccountsIndexComponent-accountWrapper-9\\">
-                                                                      <td className=\\"MuiTableCell-root AccountsIndexComponent-accountWrapper-9 MuiTableCell-body\\" aria-sort={{...}} scope={[undefined]} />
+                                                                  <WithStyles(ForwardRef(TableCell)) className=\\"AccountsIndexComponent-accountWrapper-8\\">
+                                                                    <ForwardRef(TableCell) classes={{...}} className=\\"AccountsIndexComponent-accountWrapper-8\\">
+                                                                      <td className=\\"MuiTableCell-root AccountsIndexComponent-accountWrapper-8 MuiTableCell-body\\" aria-sort={{...}} scope={[undefined]} />
                                                                     </ForwardRef(TableCell)>
                                                                   </WithStyles(ForwardRef(TableCell))>
                                                                   <WithStyles(ForwardRef(TableCell))>
diff --git a/src/core/Accounts/form.jsx b/src/core/Accounts/form.jsx
index 7999d74..89dee0c 100644
--- a/src/core/Accounts/form.jsx
+++ b/src/core/Accounts/form.jsx
@@ -187,14 +187,11 @@ export class AccountFormComponent extends React.Component {
               helperText={errors.name}
             />
             <TextField
-              className={classes.input}
               type="number"
+              className={classes.input}
               label="Opening balance"
               inputProps={{
                 'aria-label': 'Opening balance',
-                maxLength: 10,
-                min: Number.MIN_SAFE_INTEGER,
-                max: Number.MAX_SAFE_INTEGER,
                 step: 0.01
               }}
               value={values.openingBalance}
@@ -308,7 +305,9 @@ export default compose(
         .required('Please select an institution')
         .nullable(),
       openingBalance: Yup.number()
-        .required('Please enter an opening balance'),
+        .required('Please enter an opening balance')
+        .min(Number.MIN_SAFE_INTEGER)
+        .max(Number.MAX_SAFE_INTEGER),
       openingBalanceDate: Yup.date()
         .required('Please select the date of the opening balance'),
       currency: Yup.object()
diff --git a/src/core/Accounts/index.jsx b/src/core/Accounts/index.jsx
index 9968557..6fa7e6a 100644
--- a/src/core/Accounts/index.jsx
+++ b/src/core/Accounts/index.jsx
@@ -6,6 +6,7 @@ import { withStyles } from '@material-ui/core/styles'
 import Container from '@material-ui/core/Container'
 import Paper from '@material-ui/core/Paper'
 import Typography from '@material-ui/core/Typography'
+import Button from '@material-ui/core/Button'
 import Grid from '@material-ui/core/Grid'
 import DashboardIcon from '@material-ui/icons/Dashboard'
 import Table from '@material-ui/core/Table'
@@ -17,6 +18,7 @@ import grey from '@material-ui/core/colors/grey'
 import { currencyFormatter } from '../../util/stringFormatter'
 import InstitutionIcon from '../../common/InstitutionIcon'
 import AccountsChart from './AccountsChart'
+import LinkTo from '../../common/LinkTo'
 
 const styles = theme => ({
   balancePaper: {
@@ -42,11 +44,6 @@ const styles = theme => ({
   balanceIcon: {
     color: 'white'
   },
-  noAccounts: {
-    background: grey[100],
-    margin: '0 20px 20px 25px',
-    padding: theme.spacing(1)
-  },
   accountsTable: {
     padding: theme.spacing(2)
   },
@@ -67,6 +64,14 @@ const styles = theme => ({
     padding: theme.spacing(2),
     height: 240,
     minWidth: 150
+  },
+  noAccountsPaper: {
+    padding: theme.spacing(2),
+    marginTop: theme.spacing(2),
+    textAlign: 'center'
+  },
+  newAccountButton: {
+    margin: theme.spacing(3)
   }
 })
 
@@ -98,9 +103,22 @@ export const AccountsIndexComponent = ({
   return (
     <Container>
       {!userHasAccounts && (
-        <Typography variant="caption" className={classes.noAccounts}>
-          You don&apos;t have any accounts yet
-        </Typography>
+        <Paper className={classes.noAccountsPaper}>
+          <Typography variant="h6">
+            You don&apos;t have any accounts yet.
+          </Typography>
+          <Button
+            variant="contained"
+            color="secondary"
+            component={LinkTo('/accounts/new')}
+            className={classes.newAccountButton}
+          >
+            Add an account
+          </Button>
+          <Typography variant="body1">
+            You can keep track of all the accounts you have from any institution.
+          </Typography>
+        </Paper>
       )}
       {userHasAccounts && (
         <Grid container spacing={3}>
diff --git a/src/core/Budget/BudgetChart.jsx b/src/core/Budget/BudgetChart.jsx
index 750f0ff..fca453b 100644
--- a/src/core/Budget/BudgetChart.jsx
+++ b/src/core/Budget/BudgetChart.jsx
@@ -17,19 +17,20 @@ const BudgetChart = () => {
   const {
     settings,
     transactions,
-    categories,
-    colours,
+    budget,
     formatCurrency
   } = useSelector(state => ({
     settings: state.settings,
     transactions: state.transactions,
-    categories: [...new Set(Object.values(state.budget.rules).map(rules => rules.category))],
-    colours: state.budget.colours,
+    budget: state.budget,
     formatCurrency: currencyFormatter(state.settings.locale, state.settings.currency)
 
   }))
 
-  const initialState = categories.reduce(
+  const usedCategories = [...new Set(Object.values(budget.rules).map(rules => (
+    budget.categoriesById[rules.categoryId]
+  )))]
+  const initialState = usedCategories.reduce(
     (res, cat) => ({ ...res, [cat]: 1 }),
     {}
   )
@@ -38,14 +39,15 @@ const BudgetChart = () => {
   const byMonth = {}
   transactions.list.forEach((transaction) => {
     const dateKey = startOfMonth(transaction.createdAt).getTime()
-    if (transaction.category !== undefined) {
+    if (transaction.categoryId !== undefined) {
+      const categoryName = budget.categoriesById[transaction.categoryId].name
       if (byMonth[dateKey] === undefined) {
-        byMonth[dateKey] = categories.reduce((res, cat) => ({ ...res, [cat]: 0 }), {})
+        byMonth[dateKey] = usedCategories.reduce((res, cat) => ({ ...res, [cat.name]: 0 }), {})
       }
-      if (byMonth[dateKey][transaction.category] === undefined) {
-        byMonth[dateKey][transaction.category] = 0
+      if (byMonth[dateKey][categoryName] === undefined) {
+        byMonth[dateKey][categoryName] = 0
       }
-      byMonth[dateKey][transaction.category] += Math.abs(transaction.amount)
+      byMonth[dateKey][categoryName] += Math.abs(transaction.amount)
     }
   })
   const data = Object.keys(byMonth).sort((a, b) => a - b).map(date => ({
@@ -61,17 +63,17 @@ const BudgetChart = () => {
 
   const handleMouseEnter = (obj) => {
     setOpacity(
-      categories.reduce((res, value) => ({
+      usedCategories.reduce((res, category) => ({
         ...res,
-        [value]: value === obj.dataKey ? 1 : 0.3
+        [category.name]: category.name === obj.dataKey ? 1 : 0.3
       }), {})
     )
   }
   const handleMouseLeave = () => {
     setOpacity(
-      categories.reduce((res, value) => ({
+      usedCategories.reduce((res, category) => ({
         ...res,
-        [value]: 1
+        [category.name]: 1
       }), {})
     )
   }
@@ -79,13 +81,13 @@ const BudgetChart = () => {
   return (
     <ResponsiveContainer>
       <LineChart data={data} margin={margin}>
-        { categories.map(category => (
+        { usedCategories.map(category => (
           <Line
             type="monotone"
-            dataKey={category}
-            key={category}
-            stroke={colours[category]}
-            strokeOpacity={opacity[category]}
+            dataKey={category.name}
+            key={category.name}
+            stroke={category.colour}
+            strokeOpacity={opacity[category.name]}
             strokeWidth={2}
           />
         ))}
diff --git a/src/core/BudgetCategories/GroupDialog.jsx b/src/core/BudgetCategories/GroupDialog.jsx
new file mode 100644
index 0000000..7a086e7
--- /dev/null
+++ b/src/core/BudgetCategories/GroupDialog.jsx
@@ -0,0 +1,107 @@
+import React from 'react'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withStyles } from '@material-ui/core/styles'
+import { withFormik } from 'formik'
+import * as Yup from 'yup'
+import PropTypes from 'prop-types'
+import TextField from '@material-ui/core/TextField'
+import ModalDialog from '../../common/ModalDialog'
+import { createCategory, updateCategory } from '../../store/budget/actions'
+
+const styles = theme => ({
+  input: {
+    marginBottom: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    width: '100%'
+  }
+})
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    handleSave: (category) => {
+      if ('id' in category) {
+        return dispatch(updateCategory(category))
+      }
+      return dispatch(createCategory(category))
+    }
+  }
+}
+
+export const GroupDialogComponent = ({
+  classes,
+  handleSubmit,
+  values,
+  errors,
+  touched,
+  handleChange,
+  onCancel,
+  open,
+  category
+}) => (
+  <ModalDialog
+    open={open}
+    title={category ? 'Edit group' : 'New group'}
+    onSubmit={handleSubmit}
+    onCancel={onCancel}
+    className={classes.root}
+  >
+    <TextField
+      label="Name"
+      inputProps={{
+        'aria-label': 'Name',
+        maxLength: 256
+      }}
+      className={classes.input}
+      value={values.name}
+      name="name"
+      onChange={handleChange}
+      error={errors.name && touched.name}
+      helperText={errors.name}
+      autoFocus
+    />
+  </ModalDialog>
+)
+
+GroupDialogComponent.propTypes = {
+  classes: PropTypes.object.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  values: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
+  touched: PropTypes.object.isRequired,
+  handleChange: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  category: PropTypes.object
+}
+
+GroupDialogComponent.defaultProps = {
+  category: null
+}
+
+export default compose(
+  connect(null, mapDispatchToProps),
+  withStyles(styles),
+  withFormik({
+    enableReinitialize: true,
+    mapPropsToValues: ({ category }) => {
+      if (category === null) {
+        return {
+          name: ''
+        }
+      }
+      return category
+    },
+    validationSchema: Yup.object().shape({
+      description: Yup.string()
+        .max(25, 'Too Long!')
+    }),
+    handleSubmit: (values, { props, setSubmitting, resetForm }) => {
+      setSubmitting(true)
+      props.handleSave(values)
+      resetForm()
+      setSubmitting(false)
+      props.onCancel()
+    }
+  })
+)(GroupDialogComponent)
diff --git a/src/core/BudgetCategories/__tests__/__snapshots__/index.test.jsx.snap b/src/core/BudgetCategories/__tests__/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000..581a850
--- /dev/null
+++ b/src/core/BudgetCategories/__tests__/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,7365 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BudgetCAtegoriesIndex matches snapshot with no accounts 1`] = `
+"<BrowserRouter>
+  <Router history={{...}}>
+    <Provider store={{...}}>
+      <BudgetCategories>
+        <WithStyles(ForwardRef(Container)) className=\\"makeStyles-root-1\\">
+          <ForwardRef(Container) classes={{...}} className=\\"makeStyles-root-1\\">
+            <div className=\\"MuiContainer-root makeStyles-root-1 MuiContainer-maxWidthLg\\">
+              <Connect(WithStyles(WithFormik(GroupDialogComponent))) open={false} onCancel={[Function: handleCloseGroupDialog]} category={{...}}>
+                <WithStyles(WithFormik(GroupDialogComponent)) open={false} onCancel={[Function: handleCloseGroupDialog]} category={{...}} handleSave={[Function: handleSave]}>
+                  <WithFormik(GroupDialogComponent) classes={{...}} open={false} onCancel={[Function: handleCloseGroupDialog]} category={{...}} handleSave={[Function: handleSave]}>
+                    <Formik classes={{...}} open={false} onCancel={[Function: handleCloseGroupDialog]} category={{...}} handleSave={[Function: handleSave]} enableReinitialize={true} validationSchema={[Function]} handleSubmit={[Function: handleSubmit]} validate={[undefined]} initialValues={{...}} initialStatus={[undefined]} onSubmit={[Function]} render={[Function]} validateOnChange={true} validateOnBlur={true} isInitialValid={false}>
+                      <GroupDialogComponent classes={{...}} open={false} onCancel={[Function: handleCloseGroupDialog]} category={{...}} handleSave={[Function: handleSave]} values={{...}} errors={{...}} touched={{...}} isSubmitting={false} isValidating={false} submitCount={0} status={[undefined]} resetForm={[Function]} submitForm={[Function]} validateForm={[Function]} validateField={[Function]} setError={[Function]} setErrors={[Function]} setFieldError={[Function]} setFieldTouched={[Function]} setFieldValue={[Function]} setStatus={[Function]} setSubmitting={[Function]} setTouched={[Function]} setValues={[Function]} setFormikState={[Function]} dirty={false} isValid={false} initialValues={{...}} registerField={[Function]} unregisterField={[Function]} handleBlur={[Function]} handleChange={[Function]} handleReset={[Function]} handleSubmit={[Function]} validateOnChange={true} validateOnBlur={true}>
+                        <WithStyles(ModalDialog) open={false} title=\\"New group\\" onSubmit={[Function]} onCancel={[Function: handleCloseGroupDialog]} className={[undefined]}>
+                          <ModalDialog classes={{...}} open={false} title=\\"New group\\" onSubmit={[Function]} onCancel={[Function: handleCloseGroupDialog]} className={{...}}>
+                            <WithStyles(ForwardRef(Dialog)) aria-labelledby=\\"form-dialog-title\\" open={false} scroll=\\"body\\" onClose={[Function: handleCloseGroupDialog]} className={{...}}>
+                              <ForwardRef(Dialog) classes={{...}} aria-labelledby=\\"form-dialog-title\\" open={false} scroll=\\"body\\" onClose={[Function: handleCloseGroupDialog]} className={{...}}>
+                                <ForwardRef(Modal) className=\\"MuiDialog-root\\" BackdropComponent={{...}} BackdropProps={{...}} closeAfterTransition={true} disableBackdropClick={false} disableEscapeKeyDown={false} onEscapeKeyDown={[undefined]} onClose={[Function: handleCloseGroupDialog]} open={false} role=\\"dialog\\" aria-labelledby=\\"form-dialog-title\\" />
+                              </ForwardRef(Dialog)>
+                            </WithStyles(ForwardRef(Dialog))>
+                          </ModalDialog>
+                        </WithStyles(ModalDialog)>
+                      </GroupDialogComponent>
+                    </Formik>
+                  </WithFormik(GroupDialogComponent)>
+                </WithStyles(WithFormik(GroupDialogComponent))>
+              </Connect(WithStyles(WithFormik(GroupDialogComponent)))>
+              <WithStyles(ForwardRef(Grid)) container={true} justify=\\"space-between\\">
+                <ForwardRef(Grid) classes={{...}} container={true} justify=\\"space-between\\">
+                  <div className=\\"MuiGrid-root MuiGrid-container MuiGrid-justify-xs-space-between\\">
+                    <WithStyles(ForwardRef(Typography)) variant=\\"h4\\">
+                      <ForwardRef(Typography) classes={{...}} variant=\\"h4\\" theme={{...}}>
+                        <h4 className=\\"MuiTypography-root MuiTypography-h4\\">
+                          Manage categories
+                        </h4>
+                      </ForwardRef(Typography)>
+                    </WithStyles(ForwardRef(Typography))>
+                    <div>
+                      <WithStyles(ForwardRef(InputBase)) type=\\"search\\" placeholder=\\"Search categories\\" name=\\"category\\" onChange={[Function: handleFilterChange]} value=\\"\\" classes={{...}} inputProps={{...}} startAdornment={{...}}>
+                        <ForwardRef(InputBase) classes={{...}} type=\\"search\\" placeholder=\\"Search categories\\" name=\\"category\\" onChange={[Function: handleFilterChange]} value=\\"\\" inputProps={{...}} startAdornment={{...}}>
+                          <div className=\\"MuiInputBase-root makeStyles-inputRoot-6 MuiInputBase-adornedStart\\" onClick={[Function: handleClick]}>
+                            <WithStyles(ForwardRef(InputAdornment)) position=\\"start\\">
+                              <ForwardRef(InputAdornment) classes={{...}} position=\\"start\\">
+                                <div className=\\"MuiInputAdornment-root MuiInputAdornment-positionStart\\">
+                                  <ForwardRef>
+                                    <WithStyles(ForwardRef(SvgIcon))>
+                                      <ForwardRef(SvgIcon) classes={{...}}>
+                                        <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                          <path d=\\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\\" />
+                                        </svg>
+                                      </ForwardRef(SvgIcon)>
+                                    </WithStyles(ForwardRef(SvgIcon))>
+                                  </ForwardRef>
+                                </div>
+                              </ForwardRef(InputAdornment)>
+                            </WithStyles(ForwardRef(InputAdornment))>
+                            <input aria-invalid={[undefined]} aria-describedby={[undefined]} autoComplete={[undefined]} autoFocus={[undefined]} className=\\"MuiInputBase-input makeStyles-inputInput-7 MuiInputBase-inputTypeSearch MuiInputBase-inputAdornedStart\\" defaultValue={[undefined]} disabled={[undefined]} id={[undefined]} name=\\"category\\" onBlur={[Function: handleBlur]} onChange={[Function: handleChange]} onFocus={[Function: handleFocus]} onKeyDown={[undefined]} onKeyUp={[undefined]} placeholder=\\"Search categories\\" readOnly={[undefined]} required={[undefined]} rows={[undefined]} value=\\"\\" type=\\"search\\" aria-label=\\"Search categories\\" maxLength={20} />
+                          </div>
+                        </ForwardRef(InputBase)>
+                      </WithStyles(ForwardRef(InputBase))>
+                      <StateManager placeholder=\\"All groups\\" name=\\"parentCategoryId\\" value={{...}} options={{...}} inputProps={{...}} onChange={[Function: onChange]} className=\\"makeStyles-filterParentCategory-8\\" isClearable={true} defaultInputValue=\\"\\" defaultMenuIsOpen={false} defaultValue={{...}}>
+                        <Select placeholder=\\"All groups\\" name=\\"parentCategoryId\\" value={{...}} options={{...}} inputProps={{...}} onChange={[Function]} className=\\"makeStyles-filterParentCategory-8\\" isClearable={true} inputValue=\\"\\" menuIsOpen={false} onInputChange={[Function]} onMenuClose={[Function]} onMenuOpen={[Function]} backspaceRemovesValue={true} blurInputOnSelect={true} captureMenuScroll={false} closeMenuOnSelect={true} closeMenuOnScroll={false} components={{...}} controlShouldRenderValue={true} escapeClearsValue={false} filterOption={[Function]} formatGroupLabel={[Function: formatGroupLabel]} getOptionLabel={[Function: getOptionLabel]} getOptionValue={[Function: getOptionValue]} isDisabled={false} isLoading={false} isMulti={false} isRtl={false} isSearchable={true} isOptionDisabled={[Function: isOptionDisabled]} loadingMessage={[Function: loadingMessage]} maxMenuHeight={300} minMenuHeight={140} menuPlacement=\\"bottom\\" menuPosition=\\"absolute\\" menuShouldBlockScroll={false} menuShouldScrollIntoView={true} noOptionsMessage={[Function: noOptionsMessage]} openMenuOnFocus={false} openMenuOnClick={true} pageSize={5} screenReaderStatus={[Function: screenReaderStatus]} styles={{...}} tabIndex=\\"0\\" tabSelectsValue={true}>
+                          <SelectContainer cx={[Function: bound classNames]} clearValue={[Function]} getStyles={[Function]} getValue={[Function: getValue]} hasValue={false} isMulti={false} isRtl={false} options={{...}} selectOption={[Function]} setValue={[Function]} selectProps={{...}} theme={{...}} className=\\"makeStyles-filterParentCategory-8\\" innerProps={{...}} isDisabled={false} isFocused={false}>
+                            <EmotionCssPropInternal css={{...}} className=\\"makeStyles-filterParentCategory-8\\" id={[undefined]} onKeyDown={[Function]} __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"div\\">
+                              <div className=\\"makeStyles-filterParentCategory-8 css-2b097c-container\\" id={[undefined]} onKeyDown={[Function]}>
+                                <Control cx={[Function: bound classNames]} clearValue={[Function]} getStyles={[Function]} getValue={[Function: getValue]} hasValue={false} isMulti={false} isRtl={false} options={{...}} selectOption={[Function]} setValue={[Function]} selectProps={{...}} theme={{...}} innerRef={[Function]} innerProps={{...}} isDisabled={false} isFocused={false} menuIsOpen={false}>
+                                  <EmotionCssPropInternal css={{...}} className=\\"\\" onMouseDown={[Function]} onTouchEnd={[Function]} __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"div\\">
+                                    <div className=\\" css-yk16xz-control\\" onMouseDown={[Function]} onTouchEnd={[Function]}>
+                                      <ValueContainer cx={[Function: bound classNames]} clearValue={[Function]} getStyles={[Function]} getValue={[Function: getValue]} hasValue={false} isMulti={false} isRtl={false} options={{...}} selectOption={[Function]} setValue={[Function]} selectProps={{...}} theme={{...}} isDisabled={false}>
+                                        <EmotionCssPropInternal css={{...}} className=\\"\\" __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"div\\">
+                                          <div className=\\" css-1hwfws3\\">
+                                            <Placeholder cx={[Function: bound classNames]} clearValue={[Function]} getStyles={[Function]} getValue={[Function: getValue]} hasValue={false} isMulti={false} isRtl={false} options={{...}} selectOption={[Function]} setValue={[Function]} selectProps={{...}} theme={{...}} isDisabled={false} isFocused={false}>
+                                              <EmotionCssPropInternal css={{...}} className=\\"\\" __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"div\\">
+                                                <div className=\\" css-1wa3eu0-placeholder\\">
+                                                  All groups
+                                                </div>
+                                              </EmotionCssPropInternal>
+                                            </Placeholder>
+                                            <Input autoCapitalize=\\"none\\" autoComplete=\\"off\\" autoCorrect=\\"off\\" cx={[Function: bound classNames]} getStyles={[Function]} id=\\"react-select-2-input\\" innerRef={[Function]} isDisabled={false} isHidden={false} onBlur={[Function]} onChange={[Function]} onFocus={[Function]} selectProps={{...}} spellCheck=\\"false\\" tabIndex=\\"0\\" theme={{...}} type=\\"text\\" value=\\"\\" aria-autocomplete=\\"list\\" aria-label={[undefined]} aria-labelledby={[undefined]}>
+                                              <EmotionCssPropInternal css={{...}} __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"div\\">
+                                                <div className=\\"css-1g6gooi\\">
+                                                  <AutosizeInput className=\\"\\" inputRef={[Function]} inputStyle={{...}} disabled={false} autoCapitalize=\\"none\\" autoComplete=\\"off\\" autoCorrect=\\"off\\" id=\\"react-select-2-input\\" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} spellCheck=\\"false\\" tabIndex=\\"0\\" type=\\"text\\" value=\\"\\" aria-autocomplete=\\"list\\" aria-label={[undefined]} aria-labelledby={[undefined]} minWidth={1} injectStyles={true}>
+                                                    <div className=\\"\\" style={{...}}>
+                                                      <input className={[undefined]} disabled={false} autoCapitalize=\\"none\\" autoComplete=\\"off\\" autoCorrect=\\"off\\" id=\\"react-select-2-input\\" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} spellCheck=\\"false\\" tabIndex=\\"0\\" type=\\"text\\" value=\\"\\" aria-autocomplete=\\"list\\" aria-label={[undefined]} aria-labelledby={[undefined]} style={{...}} />
+                                                      <div style={{...}} />
+                                                    </div>
+                                                  </AutosizeInput>
+                                                </div>
+                                              </EmotionCssPropInternal>
+                                            </Input>
+                                          </div>
+                                        </EmotionCssPropInternal>
+                                      </ValueContainer>
+                                      <IndicatorsContainer cx={[Function: bound classNames]} clearValue={[Function]} getStyles={[Function]} getValue={[Function: getValue]} hasValue={false} isMulti={false} isRtl={false} options={{...}} selectOption={[Function]} setValue={[Function]} selectProps={{...}} theme={{...}} isDisabled={false}>
+                                        <EmotionCssPropInternal css={{...}} className=\\"\\" __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"div\\">
+                                          <div className=\\" css-1wy0on6\\">
+                                            <IndicatorSeparator cx={[Function: bound classNames]} clearValue={[Function]} getStyles={[Function]} getValue={[Function: getValue]} hasValue={false} isMulti={false} isRtl={false} options={{...}} selectOption={[Function]} setValue={[Function]} selectProps={{...}} theme={{...}} isDisabled={false} isFocused={false}>
+                                              <EmotionCssPropInternal css={{...}} className=\\"\\" __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"span\\">
+                                                <span className=\\" css-1okebmr-indicatorSeparator\\" />
+                                              </EmotionCssPropInternal>
+                                            </IndicatorSeparator>
+                                            <DropdownIndicator cx={[Function: bound classNames]} clearValue={[Function]} getStyles={[Function]} getValue={[Function: getValue]} hasValue={false} isMulti={false} isRtl={false} options={{...}} selectOption={[Function]} setValue={[Function]} selectProps={{...}} theme={{...}} innerProps={{...}} isDisabled={false} isFocused={false}>
+                                              <EmotionCssPropInternal onMouseDown={[Function]} onTouchEnd={[Function]} aria-hidden=\\"true\\" css={{...}} className=\\"\\" __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"div\\">
+                                                <div onMouseDown={[Function]} onTouchEnd={[Function]} aria-hidden=\\"true\\" className=\\" css-tlfecz-indicatorContainer\\">
+                                                  <DownChevron>
+                                                    <Svg size={20}>
+                                                      <EmotionCssPropInternal height={20} width={20} viewBox=\\"0 0 20 20\\" aria-hidden=\\"true\\" focusable=\\"false\\" css={{...}} __EMOTION_TYPE_PLEASE_DO_NOT_USE__=\\"svg\\">
+                                                        <svg height={20} width={20} viewBox=\\"0 0 20 20\\" aria-hidden=\\"true\\" focusable=\\"false\\" className=\\"css-19bqh2r\\">
+                                                          <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\" />
+                                                        </svg>
+                                                      </EmotionCssPropInternal>
+                                                    </Svg>
+                                                  </DownChevron>
+                                                </div>
+                                              </EmotionCssPropInternal>
+                                            </DropdownIndicator>
+                                          </div>
+                                        </EmotionCssPropInternal>
+                                      </IndicatorsContainer>
+                                    </div>
+                                  </EmotionCssPropInternal>
+                                </Control>
+                                <input name=\\"parentCategoryId\\" type=\\"hidden\\" value=\\"\\" />
+                              </div>
+                            </EmotionCssPropInternal>
+                          </SelectContainer>
+                        </Select>
+                      </StateManager>
+                      <WithStyles(Tooltip) title=\\"New Group\\">
+                        <Tooltip classes={{...}} title=\\"New Group\\" theme={{...}}>
+                          <WithStyles(ForwardRef(IconButton)) aria-label=\\"New Group\\" onClick={[Function: handleNewGroup]} aria-describedby={{...}} title=\\"New Group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                            <ForwardRef(IconButton) classes={{...}} aria-label=\\"New Group\\" onClick={[Function: handleNewGroup]} aria-describedby={{...}} title=\\"New Group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"New Group\\" onClick={[Function: handleNewGroup]} aria-describedby={{...}} title=\\"New Group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"New Group\\" onClick={[Function: handleNewGroup]} aria-describedby={{...}} title=\\"New Group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: handleNewGroup]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"New Group\\" aria-describedby={{...}} title=\\"New Group\\" onMouseOver={[Function: handleEnter]}>
+                                    <span className=\\"MuiIconButton-label\\">
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={true}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(IconButton)>
+                          </WithStyles(ForwardRef(IconButton))>
+                          <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                        </Tooltip>
+                      </WithStyles(Tooltip)>
+                    </div>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Bills &amp; Utilities
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Home Phone\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Home Phone\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Home Phone
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Internet\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Internet\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Internet
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Mobile Phone\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Mobile Phone\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Mobile Phone
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Education
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Books & Supplies\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Books & Supplies\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Books &amp; Supplies
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Student Loan\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Student Loan\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Student Loan
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Tuition\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Tuition\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Tuition
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Food &amp; Dining
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Groceries\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Groceries\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Groceries
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Restaurants\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Restaurants\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Restaurants
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Gifts &amp; Donations
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Charity\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Charity\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Charity
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Gift\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Gift\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Gift
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Health &amp; Fitness
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Dentist\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Dentist\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Dentist
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Doctor\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Doctor\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Doctor
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Eyecare\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Eyecare\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Eyecare
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Pharmacy\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Pharmacy\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Pharmacy
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Gym\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Gym\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Gym
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Sports\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Sports\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Sports
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Home
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Furniture\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Furniture\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Furniture
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Home Improvement\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Home Improvement\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Home Improvement
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Home Services\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Home Services\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Home Services
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Home Supplies\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Home Supplies\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Home Supplies
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Lawn & Garden\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Lawn & Garden\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Lawn &amp; Garden
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Mortgage & Rent\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Mortgage & Rent\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Mortgage &amp; Rent
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Income
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Bonus\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Bonus\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Bonus
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Interest Income\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Interest Income\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Interest Income
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Paycheque\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Paycheque\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Paycheque
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Reimbursement\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Reimbursement\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Reimbursement
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Rental Income\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Rental Income\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Rental Income
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Returned Purchase\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Returned Purchase\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Returned Purchase
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Insurance
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Car insurance\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Car insurance\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Car insurance
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Life insurance\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Life insurance\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Life insurance
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Health Insurance\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Health Insurance\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Health Insurance
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Home insurance\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Home insurance\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Home insurance
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Investments
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Buy\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Buy\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Buy
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Deposit\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Deposit\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Deposit
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Dividend & Cap Gains\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Dividend & Cap Gains\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Dividend &amp; Cap Gains
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Sell\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Sell\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Sell
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Withdrawal\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Withdrawal\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Withdrawal
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Kids
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Kids Allowance\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Kids Allowance\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Kids Allowance
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Baby Supplies\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Baby Supplies\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Baby Supplies
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Babysitter & Daycare\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Babysitter & Daycare\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Babysitter &amp; Daycare
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Child Support\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Child Support\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Child Support
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Kids Activities\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Kids Activities\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Kids Activities
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Kids Toys\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Kids Toys\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Kids Toys
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Pets
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Pet Food & Supplies\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Pet Food & Supplies\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Pet Food &amp; Supplies
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Pet Grooming\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Pet Grooming\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Pet Grooming
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Veterinary\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Veterinary\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Veterinary
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Shopping
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Books\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Books\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Books
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Clothing\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Clothing\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Clothing
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Electronics & Software\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Electronics & Software\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Electronics &amp; Software
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Hobbies\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Hobbies\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Hobbies
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Sporting Goods\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Sporting Goods\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Sporting Goods
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Subscriptions
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Netflix\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Netflix\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Netflix
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Spotify\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Spotify\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Spotify
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Taxes
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Federal Tax\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Federal Tax\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Federal Tax
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Local Tax\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Local Tax\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Local Tax
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Property Tax\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Property Tax\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Property Tax
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Sales Tax\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Sales Tax\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Sales Tax
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Provincial Tax\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Provincial Tax\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Provincial Tax
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Transport
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Auto Payment\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Auto Payment\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Auto Payment
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Gas & Fuel\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Gas & Fuel\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Gas &amp; Fuel
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Parking\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Parking\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Parking
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Public Transportation\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Public Transportation\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Public Transportation
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Service & Parts\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Service & Parts\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Service &amp; Parts
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Travel
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Flights\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Flights\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Flights
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Hotel\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Hotel\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Hotel
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Rental Car & Taxi\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Rental Car & Taxi\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Rental Car &amp; Taxi
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Vacation\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Vacation\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Vacation
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Grid)) container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                <ForwardRef(Grid) classes={{...}} container={true} spacing={2} className=\\"makeStyles-categoryGroup-2\\">
+                  <div className=\\"MuiGrid-root makeStyles-categoryGroup-2 MuiGrid-container MuiGrid-spacing-xs-2\\">
+                    <WithStyles(ForwardRef(Grid)) item={true} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12\\">
+                          <WithStyles(ForwardRef(Typography)) variant=\\"h6\\" className=\\"makeStyles-groupName-3\\">
+                            <ForwardRef(Typography) classes={{...}} variant=\\"h6\\" className=\\"makeStyles-groupName-3\\" theme={{...}}>
+                              <h6 className=\\"MuiTypography-root makeStyles-groupName-3 MuiTypography-h6\\">
+                                Uncategorized
+                              </h6>
+                            </ForwardRef(Typography)>
+                          </WithStyles(ForwardRef(Typography))>
+                          <WithStyles(Tooltip) title=\\"Change group name\\">
+                            <Tooltip classes={{...}} title=\\"Change group name\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Change group name\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Change group name\\" style={{...}} aria-describedby={{...}} title=\\"Change group name\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                          <WithStyles(Tooltip) title=\\"Delete group\\">
+                            <Tooltip classes={{...}} title=\\"Delete group\\" theme={{...}}>
+                              <WithStyles(ForwardRef(IconButton)) aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                <ForwardRef(IconButton) classes={{...}} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" className=\\"\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                  <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                    <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"Delete group\\" onClick={[Function: onClick]} style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onTouchStart={[Function: handleTouchStart]} onTouchEnd={[Function: handleTouchEnd]} onMouseOver={[Function: handleEnter]} onMouseLeave={[Function: handleLeave]} onFocus={[Function: handleFocus]} onBlur={[Function: handleLeave]}>
+                                      <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"Delete group\\" style={{...}} aria-describedby={{...}} title=\\"Delete group\\" onMouseOver={[Function: handleEnter]}>
+                                        <span className=\\"MuiIconButton-label\\">
+                                          <ForwardRef style={{...}}>
+                                            <WithStyles(ForwardRef(SvgIcon)) style={{...}}>
+                                              <ForwardRef(SvgIcon) classes={{...}} style={{...}}>
+                                                <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\" style={{...}}>
+                                                  <path d=\\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\\" />
+                                                </svg>
+                                              </ForwardRef(SvgIcon)>
+                                            </WithStyles(ForwardRef(SvgIcon))>
+                                          </ForwardRef>
+                                        </span>
+                                        <NoSsr>
+                                          <WithStyles(undefined) center={true}>
+                                            <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                              <span className=\\"MuiTouchRipple-root\\">
+                                                <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                              </span>
+                                            </ForwardRef(TouchRipple)>
+                                          </WithStyles(undefined)>
+                                        </NoSsr>
+                                      </button>
+                                    </ForwardRef(ButtonBase)>
+                                  </WithStyles(ForwardRef(ButtonBase))>
+                                </ForwardRef(IconButton)>
+                              </WithStyles(ForwardRef(IconButton))>
+                              <ForwardRef(Popper) className=\\"MuiTooltip-popper\\" placement=\\"bottom\\" anchorEl={{...}} open={false} id={{...}} transition={true} />
+                            </Tooltip>
+                          </WithStyles(Tooltip)>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Cash & ATM\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Cash & ATM\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Cash &amp; ATM
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12}>
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12}>
+                        <div className=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Card))>
+                            <ForwardRef(Card) classes={{...}}>
+                              <WithStyles(ForwardRef(Paper)) className=\\"MuiCard-root\\" elevation={1}>
+                                <ForwardRef(Paper) classes={{...}} className=\\"MuiCard-root\\" elevation={1}>
+                                  <div className=\\"MuiPaper-root MuiPaper-elevation1 MuiCard-root MuiPaper-rounded\\">
+                                    <WithStyles(ForwardRef(CardHeader)) avatar={{...}} action={{...}} title=\\"Cheque\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                      <ForwardRef(CardHeader) classes={{...}} avatar={{...}} action={{...}} title=\\"Cheque\\" subheader=\\"Budget limit: Not set\\" subheaderTypographyProps={{...}}>
+                                        <div className=\\"MuiCardHeader-root\\">
+                                          <div className=\\"MuiCardHeader-avatar\\">
+                                            <div className=\\"makeStyles-circle-4\\" style={{...}} />
+                                          </div>
+                                          <div className=\\"MuiCardHeader-content\\">
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"body2\\" className=\\"MuiCardHeader-title\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-title MuiTypography-body2 MuiTypography-displayBlock\\">
+                                                  Cheque
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                            <WithStyles(ForwardRef(Typography)) variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\">
+                                              <ForwardRef(Typography) classes={{...}} variant=\\"caption\\" className=\\"MuiCardHeader-subheader\\" color=\\"textSecondary\\" component=\\"span\\" display=\\"block\\" theme={{...}}>
+                                                <span className=\\"MuiTypography-root MuiCardHeader-subheader MuiTypography-caption MuiTypography-colorTextSecondary MuiTypography-displayBlock\\">
+                                                  Budget limit: Not set
+                                                </span>
+                                              </ForwardRef(Typography)>
+                                            </WithStyles(ForwardRef(Typography))>
+                                          </div>
+                                          <div className=\\"MuiCardHeader-action\\">
+                                            <WithStyles(ForwardRef(IconButton)) aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                              <ForwardRef(IconButton) classes={{...}} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                  <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiIconButton-root\\" centerRipple={true} focusRipple={true} disabled={false} aria-label=\\"settings\\" onClick={[Function: onClick]}>
+                                                    <button className=\\"MuiButtonBase-root MuiIconButton-root\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false} aria-label=\\"settings\\">
+                                                      <span className=\\"MuiIconButton-label\\">
+                                                        <ForwardRef>
+                                                          <WithStyles(ForwardRef(SvgIcon))>
+                                                            <ForwardRef(SvgIcon) classes={{...}}>
+                                                              <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                                                <path d=\\"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\\" />
+                                                              </svg>
+                                                            </ForwardRef(SvgIcon)>
+                                                          </WithStyles(ForwardRef(SvgIcon))>
+                                                        </ForwardRef>
+                                                      </span>
+                                                      <NoSsr>
+                                                        <WithStyles(undefined) center={true}>
+                                                          <ForwardRef(TouchRipple) classes={{...}} center={true}>
+                                                            <span className=\\"MuiTouchRipple-root\\">
+                                                              <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                                            </span>
+                                                          </ForwardRef(TouchRipple)>
+                                                        </WithStyles(undefined)>
+                                                      </NoSsr>
+                                                    </button>
+                                                  </ForwardRef(ButtonBase)>
+                                                </WithStyles(ForwardRef(ButtonBase))>
+                                              </ForwardRef(IconButton)>
+                                            </WithStyles(ForwardRef(IconButton))>
+                                          </div>
+                                        </div>
+                                      </ForwardRef(CardHeader)>
+                                    </WithStyles(ForwardRef(CardHeader))>
+                                  </div>
+                                </ForwardRef(Paper)>
+                              </WithStyles(ForwardRef(Paper))>
+                            </ForwardRef(Card)>
+                          </WithStyles(ForwardRef(Card))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                    <WithStyles(ForwardRef(Grid)) item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                      <ForwardRef(Grid) classes={{...}} item={true} lg={3} md={4} sm={6} xs={12} className=\\"makeStyles-newCategoryButton-5\\">
+                        <div className=\\"MuiGrid-root makeStyles-newCategoryButton-5 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-4 MuiGrid-grid-lg-3\\">
+                          <WithStyles(ForwardRef(Button)) size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                            <ForwardRef(Button) classes={{...}} size=\\"small\\" color=\\"secondary\\" onClick={[Function: onClick]}>
+                              <WithStyles(ForwardRef(ButtonBase)) className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                <ForwardRef(ButtonBase) classes={{...}} className=\\"MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" component=\\"button\\" disabled={false} focusRipple={true} focusVisibleClassName=\\"Mui-focusVisible\\" type=\\"button\\" onClick={[Function: onClick]}>
+                                  <button className=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textSecondary MuiButton-sizeSmall\\" onBlur={[Function]} onClick={[Function: onClick]} onFocus={[Function]} onKeyDown={[Function]} onKeyUp={[Function]} onMouseDown={[Function]} onMouseLeave={[Function]} onMouseUp={[Function]} onDragLeave={[Function]} onTouchEnd={[Function]} onTouchMove={[Function]} onTouchStart={[Function]} tabIndex={0} type=\\"button\\" disabled={false}>
+                                    <span className=\\"MuiButton-label\\">
+                                      New category
+                                      <ForwardRef>
+                                        <WithStyles(ForwardRef(SvgIcon))>
+                                          <ForwardRef(SvgIcon) classes={{...}}>
+                                            <svg className=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" color={[undefined]} aria-hidden=\\"true\\" role=\\"presentation\\">
+                                              <path d=\\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\\" />
+                                            </svg>
+                                          </ForwardRef(SvgIcon)>
+                                        </WithStyles(ForwardRef(SvgIcon))>
+                                      </ForwardRef>
+                                    </span>
+                                    <NoSsr>
+                                      <WithStyles(undefined) center={false}>
+                                        <ForwardRef(TouchRipple) classes={{...}} center={false}>
+                                          <span className=\\"MuiTouchRipple-root\\">
+                                            <TransitionGroup component={{...}} exit={true} childFactory={[Function: childFactory]} />
+                                          </span>
+                                        </ForwardRef(TouchRipple)>
+                                      </WithStyles(undefined)>
+                                    </NoSsr>
+                                  </button>
+                                </ForwardRef(ButtonBase)>
+                              </WithStyles(ForwardRef(ButtonBase))>
+                            </ForwardRef(Button)>
+                          </WithStyles(ForwardRef(Button))>
+                        </div>
+                      </ForwardRef(Grid)>
+                    </WithStyles(ForwardRef(Grid))>
+                  </div>
+                </ForwardRef(Grid)>
+              </WithStyles(ForwardRef(Grid))>
+              <WithStyles(ForwardRef(Menu)) anchorEl={{...}} open={false} onClose={[Function: handleClosePopup]}>
+                <ForwardRef(Menu) classes={{...}} anchorEl={{...}} open={false} onClose={[Function: handleClosePopup]} theme={{...}}>
+                  <WithStyles(ForwardRef(Popover)) getContentAnchorEl={[Function: getContentAnchorEl]} classes={[undefined]} onClose={[Function: handleClosePopup]} onEntering={[Function: handleEntering]} anchorOrigin={{...}} transformOrigin={{...}} PaperProps={{...}} open={false} transitionDuration=\\"auto\\" anchorEl={{...}}>
+                    <ForwardRef(Popover) classes={{...}} getContentAnchorEl={[Function: getContentAnchorEl]} onClose={[Function: handleClosePopup]} onEntering={[Function: handleEntering]} anchorOrigin={{...}} transformOrigin={{...}} PaperProps={{...}} open={false} transitionDuration=\\"auto\\" anchorEl={{...}}>
+                      <ForwardRef(Modal) classes={[undefined]} container={[undefined]} open={false} BackdropProps={{...}} onClose={[Function: handleClosePopup]} />
+                    </ForwardRef(Popover)>
+                  </WithStyles(ForwardRef(Popover))>
+                </ForwardRef(Menu)>
+              </WithStyles(ForwardRef(Menu))>
+            </div>
+          </ForwardRef(Container)>
+        </WithStyles(ForwardRef(Container))>
+      </BudgetCategories>
+    </Provider>
+  </Router>
+</BrowserRouter>"
+`;
diff --git a/src/core/BudgetCategories/__tests__/index.test.jsx b/src/core/BudgetCategories/__tests__/index.test.jsx
new file mode 100644
index 0000000..3b2de4b
--- /dev/null
+++ b/src/core/BudgetCategories/__tests__/index.test.jsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Provider } from 'react-redux'
+import { BrowserRouter } from 'react-router-dom'
+import configureMockStore from 'redux-mock-store'
+import BudgetCategories from '..'
+import { initialState as settingsInitialState } from '../../../store/settings/reducer'
+import { initialState as budgetInitialState } from '../../../store/budget/reducer'
+
+describe('BudgetCAtegoriesIndex', () => {
+  it('matches snapshot with no accounts', () => {
+    const mockStore = configureMockStore()
+    const store = mockStore({
+      settings: settingsInitialState,
+      budget: budgetInitialState
+    })
+    const wrapper = mount((
+      <BrowserRouter>
+        <Provider store={store}>
+          <BudgetCategories />
+        </Provider>
+      </BrowserRouter>
+    ))
+    expect(wrapper.debug()).toMatchSnapshot()
+
+    const groupNames = budgetInitialState.categoryTree.map(cat => cat.label)
+    expect(wrapper.find('h6').map(node => node.text())).toEqual(groupNames)
+  })
+})
diff --git a/src/core/BudgetCategories/form.jsx b/src/core/BudgetCategories/form.jsx
new file mode 100644
index 0000000..20d9b13
--- /dev/null
+++ b/src/core/BudgetCategories/form.jsx
@@ -0,0 +1,135 @@
+import React from 'react'
+import { compose } from 'recompose'
+import { connect } from 'react-redux'
+import { withStyles } from '@material-ui/core/styles'
+import { withFormik } from 'formik'
+import * as Yup from 'yup'
+import PropTypes from 'prop-types'
+import TextField from '@material-ui/core/TextField'
+import Button from '@material-ui/core/Button'
+import SubmitButtonWithProgress from '../../common/SubmitButtonWithProgress'
+import { createCategory, updateCategory } from '../../store/budget/actions'
+
+const styles = theme => ({
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: theme.spacing(2),
+    paddingBottom: 0
+  },
+  input: {
+    // margin: theme.spacing(2)
+  },
+  formActions: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    paddingTop: 10
+  },
+  buttonWrapper: {
+    margin: theme.spacing(1),
+    position: 'relative'
+  }
+})
+
+const mapStateToProps = state => ({
+  budget: state.budget
+})
+
+const mapDispatchToProps = {
+  handleCreate: (category, groupId) => createCategory(category, groupId),
+  handleUpdate: category => updateCategory(category)
+}
+
+const CategoryFormComponent = ({
+  classes,
+  handleSubmit,
+  isSubmitting,
+  values,
+  errors,
+  touched,
+  handleChange,
+  handleCancel
+}) => {
+  return (
+    <form onSubmit={handleSubmit} className={classes.form}>
+      <TextField
+        className={classes.input}
+        margin="dense"
+        label="Category name"
+        inputProps={{
+          'aria-label': 'Category name',
+          maxLength: 100
+        }}
+        value={values.name}
+        name="name"
+        onChange={handleChange}
+        error={errors.name && touched.name}
+        helperText={errors.name}
+        autoFocus
+      />
+      <TextField
+        className={classes.input}
+        margin="dense"
+        label="Budget limit"
+        inputProps={{
+          'aria-label': 'Budget limit',
+          maxLength: 100
+        }}
+        value={values.budgetLimit}
+        name="budgetLimit"
+        onChange={handleChange}
+        error={errors.budgetLimit && touched.budgetLimit}
+        helperText={errors.budgetLimit}
+      />
+      <div className={classes.formActions}>
+        <SubmitButtonWithProgress label="Save" isSubmitting={isSubmitting} />
+        <div className={classes.buttonWrapper}>
+          <Button color="secondary" onClick={handleCancel}>Cancel</Button>
+        </div>
+      </div>
+    </form>
+  )
+}
+
+CategoryFormComponent.propTypes = {
+  classes: PropTypes.object.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  isSubmitting: PropTypes.bool.isRequired,
+  values: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
+  touched: PropTypes.object.isRequired,
+  handleChange: PropTypes.func.isRequired,
+  handleCancel: PropTypes.func.isRequired
+}
+
+export default compose(
+  connect(mapStateToProps, mapDispatchToProps),
+  withStyles(styles),
+  withFormik({
+    enableReinitialize: true,
+    mapPropsToValues: ({ category }) => {
+      if (category === undefined) {
+        return {
+          name: '',
+          budgetLimit: 0
+        }
+      }
+      return category
+    },
+    validationSchema: Yup.object().shape({
+      name: Yup.string()
+        .max(100, 'Too Long!')
+        .required('Please enter a name')
+    }),
+    handleSubmit: async (values, { props, setSubmitting }) => {
+      setSubmitting(true)
+      if ('id' in values) {
+        props.handleUpdate(values)
+      } else {
+        props.handleCreate(values, props.groupId)
+      }
+      props.handleCancel()
+      setSubmitting(false)
+    }
+  })
+)(CategoryFormComponent)
diff --git a/src/core/BudgetCategories/index.jsx b/src/core/BudgetCategories/index.jsx
index 9380cf2..1b06844 100644
--- a/src/core/BudgetCategories/index.jsx
+++ b/src/core/BudgetCategories/index.jsx
@@ -1,96 +1,361 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
-import { useSelector } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 import { makeStyles } from '@material-ui/core/styles'
 import Grid from '@material-ui/core/Grid'
-import Paper from '@material-ui/core/Paper'
-import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemIcon from '@material-ui/core/ListItemIcon'
-import ListItemText from '@material-ui/core/ListItemText'
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
-import Collapse from '@material-ui/core/Collapse'
+import Container from '@material-ui/core/Container'
+import InputBase from '@material-ui/core/InputBase'
+import InputAdornment from '@material-ui/core/InputAdornment'
 import Typography from '@material-ui/core/Typography'
-import ExpandLess from '@material-ui/icons/ExpandLess'
-import ExpandMore from '@material-ui/icons/ExpandMore'
-import FolderIcon from '@material-ui/icons/Folder'
+import SearchIcon from '@material-ui/icons/Search'
+import AddIcon from '@material-ui/icons/Add'
 import EditIcon from '@material-ui/icons/Edit'
+import DeleteIcon from '@material-ui/icons/Delete'
+import MoreVertIcon from '@material-ui/icons/MoreVert'
 import IconButton from '@material-ui/core/IconButton'
+import Button from '@material-ui/core/Button'
+import Menu from '@material-ui/core/Menu'
+import MenuItem from '@material-ui/core/MenuItem'
+import MenuList from '@material-ui/core/MenuList'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import Card from '@material-ui/core/Card'
+import CardHeader from '@material-ui/core/CardHeader'
+import Select from 'react-select'
+import { fade } from '@material-ui/core/styles/colorManipulator'
+import Tooltip from '@material-ui/core/Tooltip'
+import pluralize from 'pluralize'
+import CategoryForm from './form'
+import { currencyFormatter } from '../../util/stringFormatter'
+import { deleteCategory } from '../../store/budget/actions'
+import GroupDialog from './GroupDialog'
+import confirm from '../../util/confirm'
 
 const useStyles = makeStyles(theme => ({
   root: {
-    padding: theme.spacing(3),
-    flexDirection: 'column'
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(6)
+  },
+  categoryGroup: {
+    marginTop: theme.spacing(2)
   },
-  nested: {
-    paddingLeft: theme.spacing(3)
+  groupName: {
+    display: 'inline-block',
+    marginRight: theme.spacing(1)
   },
-  dot: {
-    borderRadius: 4,
+  circle: {
+    borderRadius: 20,
     content: '" "',
     display: 'block',
-    marginRight: -10,
+    marginRight: 10,
     marginLeft: 10,
-    height: 15,
-    width: 15
+    height: 30,
+    width: 30
+  },
+  newCategoryButton: {
+    marginTop: theme.spacing(2),
+    textAlign: 'center'
+  },
+  inputRoot: {
+    verticalAlign: 'bottom',
+    padding: theme.spacing(2),
+    paddingTop: theme.spacing(1) * 0.5,
+    paddingBottom: theme.spacing(1) * 0.5,
+    borderRadius: theme.shape.borderRadius * 2,
+    backgroundColor: fade(theme.palette.grey[400], 0.15),
+    marginRight: theme.spacing(2),
+    marginLeft: 0,
+    '&:hover': {
+      backgroundColor: fade(theme.palette.grey[400], 0.25)
+    }
+  },
+  inputInput: {
+    width: 160,
+    color: 'inherit',
+    transition: theme.transitions.create('width')
+  },
+  filterParentCategory: {
+    width: 230,
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(2),
+    display: 'inline-block'
   }
 }))
 
+
 const BudgetCategories = () => {
   const classes = useStyles()
-  const budget = useSelector(state => state.budget)
-  const [open, setOpen] = React.useState(budget.categories.reduce(
-    (result, category) => ({ ...result, [category.label]: true }),
-    {}
-  ))
-
-  function handleClick(category) {
-    setOpen({ ...open, [category]: !open[category] })
+  const { budget, formatCurrency } = useSelector(state => ({
+    budget: state.budget,
+    formatCurrency: currencyFormatter(state.settings.locale, state.settings.currency)
+  }))
+  const dispatch = useDispatch()
+
+  const [filter, setfilter] = React.useState({
+    category: '',
+    parentCategoryId: ''
+  })
+  const [popupCategoryId, setPopupCategoryId] = React.useState(null)
+  const [anchorEl, setAnchorEl] = React.useState(null)
+  const [editCategory, setEditCategory] = React.useState(null)
+  const [openGroupDialog, setOpenGroupDialog] = React.useState(false)
+  const [selectedGroup, setSelectedGroup] = React.useState(null)
+  const popupIsOpen = Boolean(anchorEl)
+
+  // --- Filters ----
+  function handleFilterChange(event) {
+    if ('persist' in event) event.persist()
+    setfilter(oldValues => ({
+      ...oldValues,
+      [event.target.name]: event.target.value
+    }))
+  }
+
+  const filteredCategories = () => {
+    const filteredTree = budget.categoryTree.reduce((res, cat) => {
+      if (filter.parentCategoryId === '' || cat.id === filter.parentCategoryId) {
+        return [...res, { ...cat, options: cat.options }]
+      }
+      return res
+    }, [])
+    if (filter.category !== '') {
+      filteredTree.forEach((parentCategory, index) => {
+        filteredTree[index].options = parentCategory.options.filter(category => (
+          category.label.toLowerCase().includes(filter.category.toLowerCase())
+        ))
+      })
+    }
+    return filteredTree
+  }
+
+  // --- Popuop ---
+  const handleClosePopup = () => {
+    setAnchorEl(null)
+  }
+
+  const handleOpenPopup = (event, categoryId) => {
+    setAnchorEl(popupCategoryId === categoryId && popupIsOpen ? null : event.currentTarget)
+    setPopupCategoryId(categoryId)
+    setEditCategory(null)
+  }
+
+  // --- Category form ---
+  const showNewCategoryForm = (groupId) => {
+    setEditCategory(groupId)
+    setAnchorEl(null)
+  }
+
+  const showEditCategoryForm = () => {
+    setEditCategory(popupCategoryId)
+    setAnchorEl(null)
+  }
+
+  const handleCloseForm = () => {
+    setEditCategory(null)
+  }
+
+  const handleDeleteCategory = () => {
+    const category = budget.categoriesById[popupCategoryId]
+    let confirmText = 'Are you sure?'
+    const transactionsCount = Object.values(budget.rules).reduce((count, rule) => (
+      rule.categoryId === category.id ? count + rule.count : count
+    ), 0)
+    if (transactionsCount > 0) {
+      confirmText += ` There will be ${pluralize('transaction', transactionsCount, true)} affected.`
+    }
+    confirm(`Delete ${category.name}.`, confirmText).then(async () => {
+      dispatch(deleteCategory(popupCategoryId))
+    })
+    handleClosePopup()
+  }
+
+  // --- Group dialog ---
+  const handleNewGroup = () => {
+    setSelectedGroup(null)
+    setOpenGroupDialog(true)
+  }
+
+  const handleEditGroup = (category) => {
+    setSelectedGroup(budget.categoriesById[category.id])
+    setOpenGroupDialog(true)
+  }
+
+  const handleDeleteGroup = (category) => {
+    let title = `Delete ${category.label} group`
+    const childCategoryIds = category.options.map(item => item.id)
+    if (category.options.length > 0) {
+      title += ` and ${pluralize('categories', category.options.length, true)}.`
+    }
+    let confirmText = 'Are you sure?'
+    const transactionsCount = Object.values(budget.rules).reduce((count, rule) => (
+      rule.categoryId === category.id || childCategoryIds.includes(rule.categoryId) ? count + rule.count : count
+    ), 0)
+    if (transactionsCount > 0) {
+      confirmText += ` There will be ${pluralize('transaction', transactionsCount, true)} affected.`
+    }
+    confirm(title, confirmText).then(async () => {
+      dispatch(deleteCategory(category.id))
+    })
+  }
+
+  const handleCloseGroupDialog = () => {
+    setSelectedGroup(null)
+    setOpenGroupDialog(false)
+  }
+
+  const renderCategory = (categoryId) => {
+    const category = budget.categoriesById[categoryId]
+    if (editCategory !== null && categoryId === editCategory) {
+      return (
+        <CategoryForm
+          category={category}
+          handleCancel={handleCloseForm}
+        />
+      )
+    }
+    return (
+      <CardHeader
+        avatar={<div className={classes.circle} style={{ background: category.colour }} />}
+        action={(
+          <IconButton aria-label="settings" onClick={event => handleOpenPopup(event, category.id)}>
+            <MoreVertIcon />
+          </IconButton>
+        )}
+        title={category.name}
+        subheader={`Budget limit: ${category.budgetLimit ? formatCurrency(category.budgetLimit) : 'Not set'}`}
+        subheaderTypographyProps={{
+          variant: 'caption'
+        }}
+      />
+    )
+  }
+
+  const renderNewCategory = (groupId) => {
+    if (editCategory !== null && groupId === editCategory) {
+      return (
+        <Card>
+          <CategoryForm
+            groupId={groupId}
+            handleCancel={handleCloseForm}
+          />
+        </Card>
+      )
+    }
+    return (
+      <Button size="small" color="secondary" onClick={() => showNewCategoryForm(groupId)}>
+        New category
+        <AddIcon />
+      </Button>
+    )
   }
 
   return (
-    <Grid container className={classes.root}>
-      <Grid item xs={6}>
-        <Typography variant="h5" gutterBottom={true}>Budget categories</Typography>
-        <Paper className={classes.list}>
-          <List
-            aria-labelledby="nested-list-subheader"
-            className={classes.list}
-          >
-            {budget.categories.map(topCategory => (
-              <div key={topCategory.label}>
-                <ListItem button onClick={() => handleClick(topCategory.label)}>
-                  <ListItemIcon><FolderIcon /></ListItemIcon>
-                  <ListItemText primary={topCategory.label} />
-                  {open[topCategory.label] ? <ExpandLess /> : <ExpandMore />}
-                </ListItem>
-                <Collapse in={open[topCategory.label]} timeout="auto" unmountOnExit>
-                  {topCategory.options.map(category => (
-                    <List disablePadding dense={true} key={category.label}>
-                      <ListItem button className={classes.nested}>
-                        <ListItemIcon>
-                          <div
-                            className={classes.dot}
-                            style={{
-                              background: budget.colours[category.label]
-                            }}
-                          />
-                        </ListItemIcon>
-                        <ListItemText primary={category.label} />
-                        <ListItemSecondaryAction>
-                          <IconButton edge="end" aria-label="Delete">
-                            <EditIcon />
-                          </IconButton>
-                        </ListItemSecondaryAction>
-                      </ListItem>
-                    </List>
-                  ))}
-                </Collapse>
-              </div>
-            ))}
-          </List>
-        </Paper>
+    <Container className={classes.root}>
+      <GroupDialog
+        open={openGroupDialog}
+        onCancel={handleCloseGroupDialog}
+        category={selectedGroup}
+      />
+      <Grid container justify="space-between">
+        <Typography variant="h4">Manage categories</Typography>
+        <div>
+          <InputBase
+            type="search"
+            placeholder="Search categories"
+            name="category"
+            onChange={handleFilterChange}
+            value={filter.category}
+            classes={{
+              root: classes.inputRoot,
+              input: classes.inputInput
+            }}
+            inputProps={{
+              'aria-label': 'Search categories',
+              maxLength: 20
+            }}
+            startAdornment={<InputAdornment position="start"><SearchIcon /></InputAdornment>}
+          />
+          <Select
+            placeholder="All groups"
+            name="parentCategoryId"
+            value={filter.parentCategoryId in budget.categoriesById
+              ? {
+                label: budget.categoriesById[filter.parentCategoryId].name,
+                value: filter.parentCategoryId
+              }
+              : null
+            }
+            options={budget.categoryTree.map(cat => ({ label: cat.label, value: cat.id }))}
+            inputProps={{ 'aria-label': 'All categories' }}
+            onChange={(value) => {
+              handleFilterChange({
+                target: {
+                  name: 'parentCategoryId',
+                  value: value === null ? '' : value.value
+                }
+              })
+            }}
+            className={classes.filterParentCategory}
+            isClearable
+          />
+          <Tooltip title="New Group">
+            <IconButton aria-label="New Group" onClick={handleNewGroup}>
+              <AddIcon />
+            </IconButton>
+          </Tooltip>
+        </div>
       </Grid>
-    </Grid>
+      {filteredCategories().map(group => (
+        <Grid container spacing={2} key={group.id} className={classes.categoryGroup}>
+          <Grid item xs={12}>
+            <Typography variant="h6" className={classes.groupName}>{group.label}</Typography>
+            <Tooltip title="Change group name">
+              <IconButton aria-label="Change group name" onClick={() => handleEditGroup(group)} style={{ padding: 8 }}>
+                <EditIcon style={{ fontSize: 18 }} />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Delete group">
+              <IconButton aria-label="Delete group" onClick={() => handleDeleteGroup(group)} style={{ padding: 8 }}>
+                <DeleteIcon style={{ fontSize: 18 }} />
+              </IconButton>
+            </Tooltip>
+
+          </Grid>
+          {group.options.map(category => (
+            <Grid item lg={3} md={4} sm={6} xs={12} key={category.id}>
+              <Card>{renderCategory(category.id)}</Card>
+            </Grid>
+          ))}
+          <Grid
+            item
+            lg={3}
+            md={4}
+            sm={6}
+            xs={12}
+            key={`add-new-${group.id}`}
+            className={classes.newCategoryButton}
+          >
+            {renderNewCategory(group.id)}
+          </Grid>
+        </Grid>
+      ))}
+      <Menu anchorEl={anchorEl} open={popupIsOpen} onClose={handleClosePopup}>
+        <MenuList role="menu">
+          <MenuItem onClick={showEditCategoryForm}>
+            <ListItemIcon>
+              <EditIcon />
+            </ListItemIcon>
+            <ListItemText primary="Edit" />
+          </MenuItem>
+          <MenuItem onClick={handleDeleteCategory}>
+            <ListItemIcon>
+              <DeleteIcon />
+            </ListItemIcon>
+            <ListItemText primary="Delete" />
+          </MenuItem>
+        </MenuList>
+      </Menu>
+    </Container>
   )
 }
 
diff --git a/src/core/Settings/index.jsx b/src/core/Settings/index.jsx
index 20ee505..f7400b3 100644
--- a/src/core/Settings/index.jsx
+++ b/src/core/Settings/index.jsx
@@ -33,7 +33,7 @@ const mapDispatchToProps = dispatch => ({
   saveSettings: settings => dispatch(updateSettings(settings)),
   showSnackbarMessage: message => dispatch(showSnackbar(message)),
   deleteAllData: async () => {
-    await dispatch(resetState())
+    dispatch(resetState())
     await saveState()
   }
 })
diff --git a/src/data/budgetCategories.js b/src/data/budgetCategories.js
index ecee92a..489e174 100644
--- a/src/data/budgetCategories.js
+++ b/src/data/budgetCategories.js
@@ -22,7 +22,7 @@ const budgetCategories = {
     'Spotify'
   ],
   'Insurance': [
-    'Car nsurance',
+    'Car insurance',
     'Life insurance',
     'Health Insurance',
     'Home insurance'
diff --git a/src/store/accounts/__test__/actions.test.js b/src/store/accounts/__test__/actions.test.js
index be05688..94ce365 100644
--- a/src/store/accounts/__test__/actions.test.js
+++ b/src/store/accounts/__test__/actions.test.js
@@ -10,20 +10,6 @@ import { convertToLocalCurrency } from '../../exchangeRates/actions'
 
 jest.mock('uuid/v4', () => jest.fn(() => 'xyz'))
 const mockStore = configureMockStore([thunk])
-// Mock call to alphavantage in fetchExchangeRates
-// window.fetch = jest.fn().mockImplementation(() => (
-//   Promise.resolve(new window.Response(
-//     JSON.stringify({
-//       'Realtime Currency Exchange Rate': {
-//         '6. Last Refreshed': '2018-01-01',
-//         '5. Exchange Rate': 1
-//       }
-//     }), {
-//       status: 200,
-//       headers: { 'Content-type': 'application/json' }
-//     }
-//   ))
-// ))
 
 beforeEach(() => {
   jest.resetModules()
diff --git a/src/store/budget/__tests__/actions.test.js b/src/store/budget/__tests__/actions.test.js
index 06484c2..bdd4ebd 100644
--- a/src/store/budget/__tests__/actions.test.js
+++ b/src/store/budget/__tests__/actions.test.js
@@ -4,11 +4,22 @@ import * as actions from '../actions'
 import types from '../types'
 import { initialState as budgetInitialState } from '../reducer'
 
+
+// jest.mock('uuid/v4', () => jest.fn(() => {'xyz'}))
+jest.mock('uuid/v4', () => {
+  let value = 0
+  return () => {
+    value += 1
+    return value
+  }
+})
+
 beforeEach(() => {
   jest.resetModules()
   jest.clearAllMocks()
 })
 
+const mockStore = configureMockStore([thunk])
 const transaction = {
   accountId: 1,
   description: 'Shopping Mart',
@@ -19,7 +30,7 @@ const transaction = {
 const budget = {
   ...budgetInitialState,
   rules: {
-    'Shopping Mart': budgetInitialState.categories[2].options[0].label
+    'Shopping Mart': budgetInitialState.categoryTree[2].options[0].label
   }
 }
 
@@ -31,40 +42,147 @@ describe('budget actions', () => {
     })
   })
 
-  it('should create an exact rule', async () => {
-    const mockStore = configureMockStore([thunk])
-    const store = mockStore({})
-    const category = 'Groceries'
-    const match = 'Shopping Mart'
-    await store.dispatch(actions.createExactRule(category, match))
-    expect(store.getActions()).toEqual([{
-      type: 'CREATE_EXACT_RULE',
-      payload: { category, match }
-    }])
-  })
+  describe('categories', () => {
+    it('should create a group', async () => {
+      const store = mockStore({})
+      await store.dispatch(actions.createCategory({ name: 'group 1' }))
+      expect(store.getActions()).toEqual([{
+        type: 'CREATE_CATEGORY',
+        payload: { name: 'group 1', id: Object.keys(budgetInitialState.categoriesById).length + 1 }
+      },
+      {
+        type: 'SHOW_SNACKBAR',
+        payload: { status: 'success', text: 'Group created' }
+      }])
+    })
+
+    it('should create a category', async () => {
+      const store = mockStore({ budget })
+      await store.dispatch(actions.createCategory({ name: 'cat 1' }, 1))
+      expect(store.getActions()).toEqual([{
+        type: 'CREATE_CATEGORY',
+        payload: {
+          name: 'cat 1',
+          id: Object.keys(budgetInitialState.categoriesById).length + 2,
+          parentId: 1
+        }
+      },
+      {
+        type: 'SHOW_SNACKBAR',
+        payload: { status: 'success', text: 'Category created' }
+      }])
+    })
+
+    it('should update a group', async () => {
+      const store = mockStore({ budget })
+      await store.dispatch(actions.updateCategory({ id: 0, name: 'group 1' }))
+      expect(store.getActions()).toEqual([{
+        type: 'UPDATE_CATEGORY',
+        payload: { name: 'group 1', id: 0 }
+      },
+      {
+        type: 'SHOW_SNACKBAR',
+        payload: { status: 'success', text: 'Group updated' }
+      }])
+    })
 
-  it('should delete an exact rule', async () => {
-    const mockStore = configureMockStore([thunk])
-    const store = mockStore()
-    const match = 'Shopping Mart'
-    await store.dispatch(actions.deleteExactRule(match))
-    expect(store.getActions()).toEqual([{
-      type: 'DELETE_EXACT_RULE',
-      payload: match
-    }])
+    it('should update a category', async () => {
+      const store = mockStore({ budget })
+      await store.dispatch(actions.updateCategory({ id: 1, name: 'cat 1', parentId: 0 }))
+      expect(store.getActions()).toEqual([{
+        type: 'UPDATE_CATEGORY',
+        payload: { name: 'cat 1', id: 1, parentId: 0 }
+      },
+      {
+        type: 'SHOW_SNACKBAR',
+        payload: { status: 'success', text: 'Category updated' }
+      }])
+    })
+
+    it('should delete a group', async () => {
+      const store = mockStore({ budget })
+      const categoryId = 1
+      await store.dispatch(actions.deleteCategory(categoryId))
+      expect(('parentId' in budget.categoriesById[categoryId])).toBe(false)
+      const categoryIds = Object.values(budget.categoriesById).reduce((res, cat) => (
+        cat.parentId === categoryId ? [...res, cat.id] : res
+      ), [categoryId])
+
+      expect(store.getActions()).toEqual([{
+        type: 'DELETE_CATEGORY',
+        payload: categoryId
+      },
+      {
+        type: 'UPATE_TRANSACTION_FIELD_IF_MATCHED',
+        payload: {
+          fieldName: 'categoryId',
+          newValue: undefined,
+          values: categoryIds
+        }
+      },
+      {
+        type: 'SHOW_SNACKBAR',
+        payload: { status: 'success', text: 'Group deleted' }
+      }])
+    })
+
+    it('should delete a category', async () => {
+      const store = mockStore({ budget })
+      const categoryId = 2
+      await store.dispatch(actions.deleteCategory(categoryId))
+      expect(('parentId' in budget.categoriesById[categoryId])).toBe(true)
+      expect(store.getActions()).toEqual([{
+        type: 'DELETE_CATEGORY',
+        payload: categoryId
+      },
+      {
+        type: 'UPATE_TRANSACTION_FIELD_IF_MATCHED',
+        payload: {
+          fieldName: 'categoryId',
+          newValue: undefined,
+          values: [categoryId]
+        }
+      },
+      {
+        type: 'SHOW_SNACKBAR',
+        payload: { status: 'success', text: 'Category deleted' }
+      }])
+    })
   })
 
-  it('should count rules usage', async () => {
-    const mockStore = configureMockStore([thunk])
-    const store = mockStore({
-      transactions: {
-        list: [transaction]
-      }
+  describe('rules', () => {
+    it('should create an exact rule', async () => {
+      const store = mockStore({})
+      const category = budgetInitialState.categoryTree[2]
+      const match = 'Shopping Mart'
+      await store.dispatch(actions.createExactRule(category.id, match))
+      expect(store.getActions()).toEqual([{
+        type: 'CREATE_EXACT_RULE',
+        payload: { categoryId: category.id, match }
+      }])
+    })
+
+    it('should delete an exact rule', async () => {
+      const store = mockStore()
+      const match = 'Shopping Mart'
+      await store.dispatch(actions.deleteExactRule(match))
+      expect(store.getActions()).toEqual([{
+        type: 'DELETE_EXACT_RULE',
+        payload: match
+      }])
+    })
+
+    it('should count rules usage', async () => {
+      const store = mockStore({
+        transactions: {
+          list: [transaction]
+        }
+      })
+      await store.dispatch(actions.countRuleUsage())
+      expect(store.getActions()).toEqual([{
+        type: 'COUNT_RULE_USAGE',
+        payload: [transaction]
+      }])
     })
-    await store.dispatch(actions.countRuleUsage())
-    expect(store.getActions()).toEqual([{
-      type: 'COUNT_RULE_USAGE',
-      payload: [transaction]
-    }])
   })
 })
diff --git a/src/store/budget/__tests__/reducer.test.js b/src/store/budget/__tests__/reducer.test.js
index f308cac..f101ab1 100644
--- a/src/store/budget/__tests__/reducer.test.js
+++ b/src/store/budget/__tests__/reducer.test.js
@@ -1,4 +1,4 @@
-import budgetReducer, { initialState } from '../reducer'
+import budgetReducer, { initialState, defaultColours, generateCategoryTree } from '../reducer'
 import types from '../types'
 
 const budget = {
@@ -9,31 +9,168 @@ const budget = {
 }
 
 describe('budget reducer', () => {
-  it('should return initial state', () => {
-    expect(budgetReducer(undefined, {})).toEqual(initialState)
+  describe('initialState', () => {
+    it('should return initial state', () => {
+      expect(budgetReducer(undefined, {})).toEqual(initialState)
+      expect(Object.keys(initialState.categoriesById).length).toBe(86)
+      const groupsCount = Object.values(initialState.categoriesById).reduce(
+        (res, cat) => ('parentId' in cat ? res : res + 1),
+        0
+      )
+      expect(Object.keys(initialState.categoryTree).length).toBe(groupsCount)
+    })
+  })
+
+  describe('LOAD_BUDGET', () => {
+    it('should handle LOAD_BUDGET', () => {
+      const type = types.LOAD_BUDGET
+      const payload = budget
+      expect(budgetReducer(undefined, { type, payload })).toEqual(payload)
+    })
+
+    it('should handle LOAD_BUDGET with no existing data', () => {
+      const type = types.LOAD_BUDGET
+      const payload = null
+      expect(budgetReducer(undefined, { type, payload })).toEqual(initialState)
+    })
+  })
+
+  describe('CREATE_CATEGORY', () => {
+    it('should create a group', () => {
+      const type = types.CREATE_CATEGORY
+      const payload = { id: 1, name: 'cat 1' }
+      expect(budgetReducer(undefined, { type, payload })).toEqual({
+        ...initialState,
+        categoriesById: {
+          ...initialState.categoriesById,
+          [payload.id]: payload
+        },
+        categoryTree: [
+          ...initialState.categoryTree,
+          { id: payload.id, label: payload.name, options: [] }
+        ].sort((a, b) => ((a.label.toLowerCase() > b.label.toLowerCase()) ? 1 : -1))
+      })
+    })
+
+    it('should create a category in group with no categories', () => {
+      const type = types.CREATE_CATEGORY
+      const group = { id: 1, name: 'group 1' }
+      const simpleInitialState = {
+        categoriesById: { 1: group },
+        categoryTree: generateCategoryTree({ 1: group })
+      }
+      const payload = { id: 1, name: 'cat 1', parentId: group.id }
+      const categoriesById = {
+        1: group,
+        [payload.id]: { ...payload, colour: defaultColours[0] }
+      }
+      expect(budgetReducer(simpleInitialState, { type, payload })).toEqual({
+        categoriesById,
+        categoryTree: generateCategoryTree(categoriesById)
+      })
+    })
+
+    it('should create a category in group with other categories', () => {
+      const type = types.CREATE_CATEGORY
+
+      const group = initialState.categoryTree[0]
+      expect(group.label).toBe('Bills & Utilities')
+      expect(group.options.length).toBeGreaterThan(0)
+
+      const lastColour = group.options.length === 0
+        ? defaultColours[defaultColours.length - 1]
+        : group.options[group.options.length - 1].colour
+      const lastColourIndex = defaultColours.indexOf(lastColour)
+      const payload = { id: 1, name: 'cat 1', parentId: group.id }
+      const categoriesById = {
+        ...initialState.categoriesById,
+        [payload.id]: {
+          ...payload,
+          colour: defaultColours[(lastColourIndex + 1) % defaultColours.length]
+        }
+      }
+      expect(budgetReducer(undefined, { type, payload })).toEqual({
+        ...initialState,
+        categoriesById,
+        categoryTree: generateCategoryTree(categoriesById)
+      })
+    })
   })
 
-  it('should handle LOAD_BUDGET', () => {
-    const type = types.LOAD_BUDGET
-    const payload = budget
-    expect(budgetReducer(undefined, { type, payload })).toEqual(payload)
+  describe('UPDATE_CATEGORY', () => {
+    it('should update a category', () => {
+      const type = types.UPDATE_CATEGORY
+      const category = initialState[0]
+      const payload = { ...category, name: 'cat 1' }
+      expect(budgetReducer(undefined, { type, payload })).toEqual({
+        ...initialState,
+        categoriesById: {
+          ...initialState.categoriesById,
+          [payload.id]: payload
+        },
+        categoryTree: generateCategoryTree({
+          ...initialState.categoriesById,
+          [payload.id]: payload
+        })
+      })
+    })
   })
 
-  it('should handle LOAD_BUDGET with no existing data', () => {
-    const type = types.LOAD_BUDGET
-    const payload = null
-    expect(budgetReducer(undefined, { type, payload })).toEqual(initialState)
+  describe('DELETE_CATEGORY', () => {
+    it('should delete a group', () => {
+      const type = types.DELETE_CATEGORY
+      const categoriesById = {
+        1: { id: 1, name: 'group 1' },
+        2: { id: 2, name: 'group 2 ' },
+        3: { id: 3, name: 'cat 1', parentId: 1 },
+        4: { id: 4, name: 'cat 1', parentId: 2 }
+      }
+      const state = {
+        categoriesById,
+        categoryTree: generateCategoryTree(categoriesById),
+        rules: {
+          a: { categoryId: 1 },
+          b: { categoryId: 2 }
+        }
+      }
+
+      expect(budgetReducer(state, { type, payload: 1 })).toEqual({
+        ...state,
+        categoriesById: {
+          2: { id: 2, name: 'group 2 ' },
+          4: { id: 4, name: 'cat 1', parentId: 2 }
+        },
+        categoryTree: generateCategoryTree({
+          2: { id: 2, name: 'group 2 ' },
+          4: { id: 4, name: 'cat 1', parentId: 2 }
+        }),
+        rules: { b: { categoryId: 2 } }
+      })
+    })
+
+    it('should delete a category', () => {
+      const type = types.DELETE_CATEGORY
+      const categoryId = initialState.categoryTree[0].options[0].id
+      expect(initialState.categoriesById[categoryId].parentId === undefined)
+
+      const { [categoryId]: _, ...rest } = initialState.categoriesById
+      expect(budgetReducer(undefined, { type, payload: categoryId })).toEqual({
+        ...initialState,
+        categoriesById: rest,
+        categoryTree: generateCategoryTree(rest)
+      })
+    })
   })
 
   describe('CREATE_EXACT_RULE', () => {
     it('should create a new rule', () => {
       const type = types.CREATE_EXACT_RULE
-      const payload = { match: 'Shopping Mart', category: 'Groceries' }
+      const payload = { match: 'Shopping Mart', categoryId: 1 }
       expect(budgetReducer(initialState, { type, payload })).toEqual({
         ...initialState,
         rules: {
           [payload.match]: {
-            category: payload.category,
+            categoryId: payload.categoryId,
             count: 0,
             type: 'exact_match'
           }
@@ -43,11 +180,11 @@ describe('budget reducer', () => {
 
     it('should update an existing rule', () => {
       const type = types.CREATE_EXACT_RULE
-      const payload = { match: 'Shopping Mart', category: 'Groceries' }
+      const payload = { match: 'Shopping Mart', categoryId: 1 }
       expect(budgetReducer({ rules: { 'Shopping Mart': 'b' } }, { type, payload })).toEqual({
         rules: {
           [payload.match]: {
-            category: payload.category,
+            categoryId: payload.categoryId,
             count: 0,
             type: 'exact_match'
           }
diff --git a/src/store/budget/actions.js b/src/store/budget/actions.js
index cf2bc22..01fcd3e 100644
--- a/src/store/budget/actions.js
+++ b/src/store/budget/actions.js
@@ -1,11 +1,63 @@
+import uuid from 'uuid/v4'
 import types from './types'
+import { saveState } from '../user/actions'
+import { showSnackbar } from '../settings/actions'
+import { updateTransactionFieldIfMatched } from '../transactions/actions'
 
 export const loadBudget = (budget) => {
   return { type: types.LOAD_BUDGET, payload: budget }
 }
 
-export const createExactRule = (category, match) => (
-  { type: types.CREATE_EXACT_RULE, payload: { category, match } }
+export const afterCategoriesChanged = () => {
+  saveState()
+}
+
+export const createCategory = (category, parentId) => (dispatch) => {
+  dispatch({
+    type: types.CREATE_CATEGORY,
+    payload: {
+      ...category,
+      id: uuid(),
+      ...(parentId === undefined ? {} : { parentId })
+    }
+  })
+  dispatch(showSnackbar({ text: `${parentId === undefined ? 'Group' : 'Category'} created`, status: 'success' }))
+  afterCategoriesChanged()
+}
+
+export const updateCategory = category => (dispatch) => {
+  dispatch({ type: types.UPDATE_CATEGORY, payload: category })
+  dispatch(showSnackbar({
+    text: `${category.parentId === undefined ? 'Group' : 'Category'} updated`,
+    status: 'success'
+  }))
+  afterCategoriesChanged()
+}
+
+export const deleteCategory = categoryId => (dispatch, getState) => {
+  const { budget } = getState()
+  const category = budget.categoriesById[categoryId]
+  let categoryIds = [category.id]
+  if (!('parentId' in category)) {
+    categoryIds = Object.values(budget.categoriesById).reduce((res, cat) => (
+      cat.parentId === category.id ? [...res, cat.id] : res
+    ), categoryIds)
+  }
+  dispatch({ type: types.DELETE_CATEGORY, payload: category.id })
+  dispatch(updateTransactionFieldIfMatched({
+    fieldName: 'categoryId',
+    values: categoryIds,
+    newValue: undefined
+  }))
+  dispatch(showSnackbar({
+    text: `${category.parentId === undefined ? 'Group' : 'Category'} deleted`,
+    status: 'success'
+  }))
+  afterCategoriesChanged()
+}
+
+export const createExactRule = (categoryId, match) => (
+  { type: types.CREATE_EXACT_RULE, payload: { categoryId, match } }
 )
 
 export const deleteExactRule = match => (
diff --git a/src/store/budget/reducer.js b/src/store/budget/reducer.js
index 8a76e3f..1f50033 100644
--- a/src/store/budget/reducer.js
+++ b/src/store/budget/reducer.js
@@ -1,56 +1,153 @@
+/* eslint-disable no-case-declarations */
+import uuid from 'uuid/v4'
 import types from './types'
 import budgetCategories from '../../data/budgetCategories'
 
 // https://projects.susielu.com
 // http://repec.sowi.unibe.ch/stata/palettes/index.html
-const defaultColours = [
+export const defaultColours = [
   '#1f78b4', '#b2df8a', '#e31a1c',
   '#ff7f00', '#cab2d6', '#a6cee3',
   '#33a02c', '#6a3d9a', '#fb9a99',
   '#fdbf6f', '#ffff99', '#b15928'
 ]
 
-export const initialState = (() => {
-  const colours = {}
-  let count = 0
-  const categories = Object.keys(budgetCategories).sort().map(category => (
-    {
-      label: category,
-      options: budgetCategories[category].map((subCategory) => {
-        const colour = defaultColours[count % defaultColours.length]
-        colours[subCategory] = colour
-        count += 1
-        return { label: subCategory, value: subCategory, colour }
+
+export const generateCategoryTree = (categoriesById) => {
+  const parents = Object.values(categoriesById).reduce((result, parentCategory) => {
+    if (!('parentId' in parentCategory)) {
+      return {
+        ...result,
+        [parentCategory.id]: {
+          id: parentCategory.id,
+          label: parentCategory.name,
+          options: []
+        }
+      }
+    }
+    return result
+  }, {})
+  Object.values(categoriesById).forEach((category) => {
+    if (category.parentId in parents) {
+      parents[category.parentId].options.push({
+        id: category.id,
+        label: category.name,
+        value: category.name,
+        colour: category.colour
       })
     }
-  ))
+  })
+  return Object.values(parents)
+    .sort((a, b) => ((a.label.toLowerCase() > b.label.toLowerCase()) ? 1 : -1))
+}
+
+const generateInitialState = () => {
+  let count = 0
+  const categoriesById = Object.keys(budgetCategories).reduce((result, category) => {
+    const parentId = uuid()
+    const parent = {
+      id: parentId,
+      name: category
+    }
+    const children = budgetCategories[category].reduce((res, subCategory) => {
+      const child = {
+        id: uuid(),
+        parentId,
+        name: subCategory,
+        colour: defaultColours[count % defaultColours.length]
+      }
+      count += 1
+      return { ...res, [child.id]: child }
+    }, {})
+
+    return {
+      ...result,
+      [parent.id]: parent,
+      ...children
+    }
+  }, {})
+
   return {
-    categories,
-    colours,
+    categoriesById,
+    categoryTree: generateCategoryTree(categoriesById),
     rules: {} // rules have the format => match: { category: 'cat 1', type: 'exact_match', count: 0 }
   }
-})()
+}
+export const initialState = generateInitialState()
+let categoriesById
 
-export default (state = initialState, action) => {
-  switch (action.type) {
+export default (state = initialState, { type, payload }) => {
+  switch (type) {
     case types.LOAD_BUDGET:
-      return action.payload || initialState
+      return payload || initialState
+    case types.CREATE_CATEGORY:
+      let colour = null
+      if ('parentId' in payload) {
+        // Select the next colour of the category
+        const group = state.categoryTree.find((cat => cat.id === payload.parentId))
+        const lastColour = group.options.length === 0
+          ? defaultColours[defaultColours.length - 1]
+          : group.options[group.options.length - 1].colour
+        const lastColourIndex = defaultColours.indexOf(lastColour)
+        colour = defaultColours[(lastColourIndex + 1) % defaultColours.length]
+      }
+      categoriesById = {
+        ...state.categoriesById,
+        [payload.id]: {
+          ...payload,
+          ...(colour !== null ? { colour } : {})
+        }
+      }
+      return {
+        ...state,
+        categoriesById,
+        categoryTree: generateCategoryTree(categoriesById)
+      }
+    case types.UPDATE_CATEGORY:
+      categoriesById = { ...state.categoriesById, [payload.id]: payload }
+      return {
+        ...state,
+        categoriesById,
+        categoryTree: generateCategoryTree(categoriesById)
+      }
+    case types.DELETE_CATEGORY:
+      // Remove the selected category
+      const { [payload]: category, ...rest } = state.categoriesById
+      // Delete all the sub categories (if they exist)
+      categoriesById = Object.values(rest).reduce((res, child) => {
+        if (child.parentId === category.id) {
+          return res
+        }
+        return { ...res, [child.id]: child }
+      }, {})
+      // Delete all related rules
+      const rules = Object.keys(state.rules).reduce((res, match) => {
+        if (state.rules[match].categoryId in categoriesById) {
+          return { ...res, [match]: state.rules[match] }
+        }
+        return res
+      }, {})
+      return {
+        ...state,
+        categoriesById,
+        categoryTree: generateCategoryTree(categoriesById),
+        rules
+      }
     case types.CREATE_EXACT_RULE:
       return {
         ...state,
         rules: {
           ...state.rules,
-          [action.payload.match]: {
-            category: action.payload.category,
+          [payload.match]: {
+            categoryId: payload.categoryId,
             type: 'exact_match',
             count: 0
           }
         }
       }
     case types.DELETE_EXACT_RULE:
-      // eslint-disable-next-line no-case-declarations
       const r = Object.keys(state.rules).reduce((result, match) => {
-        if (match !== action.payload) {
+        if (match !== payload) {
           return {
             ...result,
             rules: { ...result.rules, [match]: state.rules[match] }
@@ -61,7 +158,6 @@ export default (state = initialState, action) => {
       return r
     case types.COUNT_RULE_USAGE:
       // reset counters
-      // eslint-disable-next-line no-case-declarations
       const newState = Object.keys(state.rules).reduce((result, match) => (
         {
           ...result,
@@ -73,7 +169,7 @@ export default (state = initialState, action) => {
       ), state)
 
       // count the transactions
-      for (const transaction of action.payload) {
+      for (const transaction of payload) {
         if (transaction.description in newState.rules) {
           newState.rules[transaction.description].count += 1
         }
diff --git a/src/store/budget/types.js b/src/store/budget/types.js
index 0b0bf93..1e614bf 100644
--- a/src/store/budget/types.js
+++ b/src/store/budget/types.js
@@ -1,5 +1,8 @@
 export default {
   LOAD_BUDGET: 'LOAD_BUDGET',
+  CREATE_CATEGORY: 'CREATE_CATEGORY',
+  UPDATE_CATEGORY: 'UPDATE_CATEGORY',
+  DELETE_CATEGORY: 'DELETE_CATEGORY',
   CREATE_EXACT_RULE: 'CREATE_EXACT_RULE',
   DELETE_EXACT_RULE: 'DELETE_EXACT_RULE',
   COUNT_RULE_USAGE: 'COUNT_RULE_USAGE'
diff --git a/src/store/transactions/CsvParsers/CsvParser.js b/src/store/transactions/CsvParsers/CsvParser.js
index 8d051a8..a7f8cc4 100644
--- a/src/store/transactions/CsvParsers/CsvParser.js
+++ b/src/store/transactions/CsvParsers/CsvParser.js
@@ -43,8 +43,8 @@ const TRANSACTION_FIELDS = {
 
 // The base class for all CSV parsers
 export default class CsvParser {
-  constructor(transactionRules) {
-    this._transactionRules = transactionRules
+  constructor(budgetRules) {
+    this._budgetRules = budgetRules
     this._csvData = []
     this._csvHeader = []
     this._columnsCount = 0
@@ -180,23 +180,24 @@ export default class CsvParser {
 
     this._csvData.forEach((row, index) => {
       if (this._noHeaderRow || index > this._firstRowIndex) {
-        const amount = this.readAmount(row, columns)
-        const description = this.readDescription(row, columns)
-        const category = this._transactionRules[description]
-        const createdAt = this.dateFromString(row[columns.createdAt])
-        const errors = []
-        if (typeof amount !== 'number') {
-          errors.push('Could not read the amount')
-        } else if (createdAt === null) {
-          errors.push(`Invalid date. Expecting format '${this._dateFormat}'`)
+        const transaction = {
+          amount: this.readAmount(row, columns),
+          description: this.readDescription(row, columns),
+          createdAt: this.dateFromString(row[columns.createdAt]),
+          errors: []
         }
-        transactions.push({
-          amount,
-          description,
-          category,
-          createdAt,
-          errors
-        })
+        if (
+          transaction.description in this._budgetRules
+          && 'categoryId' in this._budgetRules[transaction.description]
+        ) {
+          transaction.categoryId = this._budgetRules[transaction.description].categoryId
+        }
+        if (typeof transaction.amount !== 'number') {
+          transaction.errors.push('Could not read the amount')
+        } else if (transaction.createdAt === null) {
+          transaction.errors.push(`Invalid date. Expecting format '${this._dateFormat}'`)
+        }
+        transactions.push(transaction)
       }
     })
     return { transactions, errors: this._errors }
diff --git a/src/store/transactions/__tests__/actions.test.js b/src/store/transactions/__tests__/actions.test.js
index 45cdfce..7bf13c7 100644
--- a/src/store/transactions/__tests__/actions.test.js
+++ b/src/store/transactions/__tests__/actions.test.js
@@ -8,8 +8,6 @@ import { initialState as settingsInitialState } from '../../settings/reducer'
 import { initialState as exchangeRatesInitialState } from '../../exchangeRates/reducer'
 import { initialState as budgetInitialState } from '../../budget/reducer'
 
-jest.mock('uuid/v4', () => jest.fn(() => 1))
-
 beforeEach(() => {
   jest.resetModules()
   jest.clearAllMocks()
@@ -52,13 +50,13 @@ describe('transactions actions', () => {
         budget: budgetInitialState
       })
 
-      await store.dispatch(actions.createTransaction(account, transaction))
+      const id = await store.dispatch(actions.createTransaction(account, transaction))
       expect(store.getActions()).toEqual([
         {
           type: 'CREATE_TRANSACTION',
           payload: {
             ...transaction,
-            id: 1,
+            id,
             createdAt: transaction.createdAt + 1000
           }
         }, {
@@ -94,23 +92,23 @@ describe('transactions actions', () => {
         exchangeRates: exchangeRatesInitialState,
         budget: budgetInitialState
       })
-      const category = 'Groceries'
-      await store.dispatch(actions.createTransaction(
+      const categoryId = budgetInitialState.categoryTree[0].options[0].id
+      const id = await store.dispatch(actions.createTransaction(
         account,
-        { ...transaction, category }
+        { ...transaction, categoryId }
       ))
       expect(store.getActions()).toEqual([
         {
           type: 'CREATE_TRANSACTION',
           payload: {
             ...transaction,
-            id: 1,
-            category,
+            id,
+            categoryId,
             createdAt: transaction.createdAt + 1000
           }
         }, {
           type: 'CREATE_EXACT_RULE',
-          payload: { category, match: transaction.description }
+          payload: { categoryId, match: transaction.description }
         }, {
           type: 'APPLY_EXACT_RULE',
           payload: {
@@ -179,14 +177,14 @@ describe('transactions actions', () => {
         exchangeRates: exchangeRatesInitialState,
         budget: budgetInitialState
       })
-      const category = 'Groceries'
+      const categoryId = budgetInitialState.categoryTree[0].options[0].id
       expect(transaction.category).toBeUndefined()
       await store.dispatch(actions.updateTransaction(
         account,
         {
           ...transaction,
           id: 1,
-          category
+          categoryId
         }
       ))
       expect(store.getActions()).toEqual([
@@ -195,12 +193,12 @@ describe('transactions actions', () => {
           payload: {
             ...transaction,
             id: 1,
-            category,
+            categoryId,
             createdAt: transaction.createdAt + 1000
           }
         }, {
           type: 'CREATE_EXACT_RULE',
-          payload: { category, match: transaction.description }
+          payload: { categoryId, match: transaction.description }
         }, {
           type: 'APPLY_EXACT_RULE',
           payload: {
@@ -227,10 +225,10 @@ describe('transactions actions', () => {
 
     it('should update a transaction and remove a category', async () => {
       const mockStore = configureMockStore([thunk])
-      const category = 'Groceries'
+      const categoryId = budgetInitialState.categoryTree[0].options[0].id
       const store = mockStore({
         accounts: accountsInitialState,
-        transactions: { list: [{ ...transaction, id: 1, category }], transactionsInitialState },
+        transactions: { list: [{ ...transaction, id: 1, categoryId }], transactionsInitialState },
         settings: settingsInitialState,
         exchangeRates: exchangeRatesInitialState,
         budget: budgetInitialState
@@ -241,7 +239,7 @@ describe('transactions actions', () => {
         {
           ...transaction,
           id: 1,
-          category: undefined
+          categoryId: undefined
         }
       ))
       expect(store.getActions()).toEqual([
@@ -250,7 +248,7 @@ describe('transactions actions', () => {
           payload: {
             ...transaction,
             id: 1,
-            category: undefined,
+            categoryId: undefined,
             createdAt: transaction.createdAt + 1000
           }
         }, {
@@ -265,7 +263,7 @@ describe('transactions actions', () => {
         }, {
           // NOTE: the transaction is not actually saved on the moch store so we don't see it here
           type: 'COUNT_RULE_USAGE',
-          payload: [{ ...transaction, id: 1, category }]
+          payload: [{ ...transaction, id: 1, categoryId }]
         }, {
           // NOTE: UPDATE_ACCOUNT is called but account balance is not changed
           // because test library doesn't actually update the store
@@ -282,10 +280,10 @@ describe('transactions actions', () => {
 
     it('should update a transaction and change a category', async () => {
       const mockStore = configureMockStore([thunk])
-      const category = 'Groceries'
+      const categoryId = budgetInitialState.categoryTree[0].options[0].id
       const store = mockStore({
         accounts: accountsInitialState,
-        transactions: { list: [{ ...transaction, id: 1, category: 'Old category' }], transactionsInitialState },
+        transactions: { list: [{ ...transaction, id: 1, categoryId: 'Old id' }], transactionsInitialState },
         settings: settingsInitialState,
         exchangeRates: exchangeRatesInitialState,
         budget: budgetInitialState
@@ -296,7 +294,7 @@ describe('transactions actions', () => {
         {
           ...transaction,
           id: 1,
-          category
+          categoryId
         }
       ))
       expect(store.getActions()).toEqual([
@@ -305,12 +303,12 @@ describe('transactions actions', () => {
           payload: {
             ...transaction,
             id: 1,
-            category,
+            categoryId,
             createdAt: transaction.createdAt + 1000
           }
         }, {
           type: 'CREATE_EXACT_RULE',
-          payload: { category, match: transaction.description }
+          payload: { categoryId, match: transaction.description }
         }, {
           type: 'APPLY_EXACT_RULE',
           payload: {
@@ -320,7 +318,7 @@ describe('transactions actions', () => {
         }, {
           // NOTE: the transaction is not actually saved on the moch store so we don't see it here
           type: 'COUNT_RULE_USAGE',
-          payload: [{ ...transaction, id: 1, category: 'Old category' }]
+          payload: [{ ...transaction, id: 1, categoryId: 'Old id' }]
         }, {
           // NOTE: UPDATE_ACCOUNT is called but account balance is not changed
           // because test library doesn't actually update the store
diff --git a/src/store/transactions/__tests__/reducers.test.js b/src/store/transactions/__tests__/reducers.test.js
index 03f7b92..d2ddb43 100644
--- a/src/store/transactions/__tests__/reducers.test.js
+++ b/src/store/transactions/__tests__/reducers.test.js
@@ -9,105 +9,147 @@ const transaction = {
 }
 
 describe('transaction reducer', () => {
-  it('should return initial state', () => {
-    expect(transactionReducer(undefined, {})).toEqual(initialState)
+  describe('initialState', () => {
+    it('should return initial state', () => {
+      expect(transactionReducer(undefined, {})).toEqual(initialState)
+    })
   })
 
-  it('should handle LOAD_TRANSACTIONS', () => {
-    const type = types.LOAD_TRANSACTIONS
-    const payload = [transaction]
-    expect(transactionReducer(undefined, { type, payload })).toEqual(payload)
-  })
+  describe('LOAD_TRANSACTIONS', () => {
+    it('should handle LOAD_TRANSACTIONS', () => {
+      const type = types.LOAD_TRANSACTIONS
+      const payload = [transaction]
+      expect(transactionReducer(undefined, { type, payload })).toEqual(payload)
+    })
 
-  it('should handle LOAD_TRANSACTIONS with no existing transactions', () => {
-    const type = types.LOAD_TRANSACTIONS
-    const payload = null
-    expect(transactionReducer(undefined, { type, payload })).toEqual(initialState)
+    it('should handle LOAD_TRANSACTIONS with no existing transactions', () => {
+      const type = types.LOAD_TRANSACTIONS
+      const payload = null
+      expect(transactionReducer(undefined, { type, payload })).toEqual(initialState)
+    })
   })
 
-  it('should handle CREATE_TRANSACTION with no existing transactions', () => {
-    const type = types.CREATE_TRANSACTION
-    const payload = transaction
-    expect(transactionReducer(undefined, { type, payload })).toEqual({ ...initialState, list: [payload] })
+  describe('CREATE_TRANSACTION', () => {
+    it('should handle CREATE_TRANSACTION with no existing transactions', () => {
+      const type = types.CREATE_TRANSACTION
+      const payload = transaction
+      expect(transactionReducer(undefined, { type, payload })).toEqual({ ...initialState, list: [payload] })
+    })
+
+    it('should handle CREATE_TRANSACTION with existing transactions', () => {
+      const type = types.CREATE_TRANSACTION
+      const state = {
+        ...initialState,
+        list: [{
+          institution: 'TD',
+          account: 'RRSP',
+          type: 'buy',
+          ticker: 'VCE.TO',
+          shares: '2',
+          bookValue: '2',
+          createdAt: Date.now()
+        }]
+      }
+      const payload = transaction
+      expect(transactionReducer(state, { type, payload })).toEqual({ ...state, list: [...state.list, payload] })
+    })
   })
 
-  it('should handle CREATE_TRANSACTION with existing transactions', () => {
-    const type = types.CREATE_TRANSACTION
-    const state = {
-      ...initialState,
-      list: [{
-        institution: 'TD',
-        account: 'RRSP',
-        type: 'buy',
-        ticker: 'VCE.TO',
-        shares: '2',
-        bookValue: '2',
-        createdAt: Date.now()
-      }]
-    }
-    const payload = transaction
-    expect(transactionReducer(state, { type, payload })).toEqual({ ...state, list: [...state.list, payload] })
+  describe('UPDATE_TRANSACTION', () => {
+    it('should handle UPDATE_TRANSACTION', () => {
+      const type = types.UPDATE_TRANSACTION
+      const state = {
+        ...initialState,
+        list: [{
+          ...transaction, id: 1, shares: '2', bookValue: '2'
+        }]
+      }
+      const payload = { ...transaction, id: 1 }
+      expect(transactionReducer(state, { type, payload })).toEqual({ ...state, list: [payload] })
+    })
   })
 
-  it('should handle UPDATE_TRANSACTION', () => {
-    const type = types.UPDATE_TRANSACTION
-    const state = {
-      ...initialState,
-      list: [{
-        ...transaction, id: 1, shares: '2', bookValue: '2'
-      }]
-    }
-    const payload = { ...transaction, id: 1 }
-    expect(transactionReducer(state, { type, payload })).toEqual({ ...state, list: [payload] })
+  describe('UPATE_TRANSACTION_FIELD_IF_MATCHED', () => {
+    it('should upate single field in transactions', () => {
+      const type = types.UPATE_TRANSACTION_FIELD_IF_MATCHED
+      const payload = {
+        fieldName: 'categoryId',
+        values: [1, 2],
+        newValue: undefined
+      }
+      const state = {
+        list: [
+          transaction,
+          { id: 2, categoryId: 1 },
+          { id: 3, categoryId: 2 },
+          { id: 4, categoryId: undefined },
+          { id: 5, categoryId: 3 }
+        ]
+      }
+      expect(transactionReducer(state, { type, payload })).toEqual({
+        ...state,
+        list: [
+          transaction,
+          { id: 2, categoryId: undefined },
+          { id: 3, categoryId: undefined },
+          { id: 4, categoryId: undefined },
+          { id: 5, categoryId: 3 }
+        ]
+      })
+    })
   })
 
-  it('should handle DELETE_TRANSACTIONS', () => {
-    const type = types.DELETE_TRANSACTIONS
-    const state = {
-      ...initialState,
-      list: [transaction]
-    }
-    const payload = [state.list[0].id]
-    expect(transactionReducer(state, { type, payload })).toEqual(initialState)
+  describe('DELETE_TRANSACTIONS', () => {
+    it('should handle DELETE_TRANSACTIONS', () => {
+      const type = types.DELETE_TRANSACTIONS
+      const state = {
+        ...initialState,
+        list: [transaction]
+      }
+      const payload = [state.list[0].id]
+      expect(transactionReducer(state, { type, payload })).toEqual(initialState)
+    })
   })
 
-  it('should handle ADD_TRANSACTIONS to existing transactions', () => {
-    const type = types.ADD_TRANSACTIONS
-    const state = {
-      ...initialState,
-      list: [{
-        id: 1,
+  describe('ADD_TRANSACTIONS', () => {
+    it('should handle ADD_TRANSACTIONS to existing transactions', () => {
+      const type = types.ADD_TRANSACTIONS
+      const state = {
+        ...initialState,
+        list: [{
+          id: 1,
+          accountId: 1,
+          amount: 2,
+          createdAt: Date.now()
+        }]
+      }
+      const payload = [{
+        id: 2,
         accountId: 1,
         amount: 2,
         createdAt: Date.now()
+      }, {
+        id: 3,
+        accountId: 1,
+        amount: 3,
+        createdAt: Date.now()
       }]
-    }
-    const payload = [{
-      id: 2,
-      accountId: 1,
-      amount: 2,
-      createdAt: Date.now()
-    }, {
-      id: 3,
-      accountId: 1,
-      amount: 3,
-      createdAt: Date.now()
-    }]
-    expect(transactionReducer(state, { type, payload })).toEqual({
-      ...state,
-      list: [...state.list, ...payload]
+      expect(transactionReducer(state, { type, payload })).toEqual({
+        ...state,
+        list: [...state.list, ...payload]
+      })
     })
   })
 
   describe('APPLY_EXACT_RULE', () => {
-    it('should apply an exact rule', () => {
+    it('should add a categoryId when applying an exact rule', () => {
       const type = types.APPLY_EXACT_RULE
       const payload = {
-        match: 'Shopping Mart',
+        match: transaction.description,
         rules: {
-          a: { category: 'b' },
-          [transaction.description]: { category: 'xyz' },
-          other: { category: 'something else' }
+          a: { categoryId: 'b' },
+          [transaction.description]: { categoryId: 'xyz' },
+          other: { categoryId: 'something else' }
         }
       }
       const state = {
@@ -119,7 +161,31 @@ describe('transaction reducer', () => {
       expect(transactionReducer(state, { type, payload })).toEqual({
         ...state,
         list: [
-          { ...transaction, category: 'xyz' },
+          { ...transaction, categoryId: 'xyz' },
+          { id: 2, description: 'abc' }
+        ]
+      })
+    })
+
+    it('should remove categoryId if rule does not exist', () => {
+      const type = types.APPLY_EXACT_RULE
+      const payload = {
+        match: transaction.description,
+        rules: {
+          a: { categoryId: 'b' },
+          other: { categoryId: 'something else' }
+        }
+      }
+      const state = {
+        list: [
+          { ...transaction, categoryId: 'xyz' },
+          { id: 2, description: 'abc' }
+        ]
+      }
+      expect(transactionReducer(state, { type, payload })).toEqual({
+        ...state,
+        list: [
+          transaction,
           { id: 2, description: 'abc' }
         ]
       })
diff --git a/src/store/transactions/actions.js b/src/store/transactions/actions.js
index c640c92..44072bc 100644
--- a/src/store/transactions/actions.js
+++ b/src/store/transactions/actions.js
@@ -19,22 +19,24 @@ export const applyExactRule = ({ match, rules }) => (
 
 export const createTransaction = (account, transaction) => async (dispatch, getState) => {
   await dispatch(fetchExchangeRates([account.currency], transaction.createdAt))
+  const id = uuid()
   dispatch({
     type: types.CREATE_TRANSACTION,
     payload: {
       ...transaction,
-      id: uuid(),
+      id,
       accountId: account.id,
       createdAt: transaction.createdAt + 1000 // Plus 1 second
     }
   })
-  if (transaction.category !== undefined) {
-    dispatch(createExactRule(transaction.category, transaction.description))
+  if (transaction.categoryId !== undefined) {
+    dispatch(createExactRule(transaction.categoryId, transaction.description))
   }
   dispatch(applyExactRule({ match: transaction.description, rules: getState().budget.rules }))
   dispatch(countRuleUsage())
   await dispatch(afterTransactionsChanged(account))
   dispatch(showSnackbar({ text: 'Transaction created', status: 'success' }))
+  return id
 }
 
 export const updateTransaction = (account, transaction) => async (dispatch, getState) => {
@@ -47,11 +49,11 @@ export const updateTransaction = (account, transaction) => async (dispatch, getS
     }
   })
 
-  if (transaction.category !== oldTransaction.category) {
-    if (transaction.category === undefined) {
+  if (transaction.categoryId !== oldTransaction.categoryId) {
+    if (transaction.categoryId === undefined) {
       dispatch(deleteExactRule(transaction.description))
     } else {
-      dispatch(createExactRule(transaction.category, transaction.description))
+      dispatch(createExactRule(transaction.categoryId, transaction.description))
     }
     dispatch(applyExactRule({ match: transaction.description, rules: getState().budget.rules }))
     dispatch(countRuleUsage())
@@ -60,6 +62,10 @@ export const updateTransaction = (account, transaction) => async (dispatch, getS
   dispatch(showSnackbar({ text: 'Transaction updated', status: 'success' }))
 }
 
+export const updateTransactionFieldIfMatched = ({ fieldName, values, newValue }) => (
+  { type: types.UPATE_TRANSACTION_FIELD_IF_MATCHED, payload: { fieldName, values, newValue } }
+)
+
 export const deleteTransactions = (account, transactionIds, options = { skipAfterChange: false }) => {
   const { skipAfterChange } = options
   return async (dispatch) => {
diff --git a/src/store/transactions/reducer.js b/src/store/transactions/reducer.js
index 6649f6f..0863d39 100644
--- a/src/store/transactions/reducer.js
+++ b/src/store/transactions/reducer.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-case-declarations */
 import _ from 'lodash'
 import types from './types'
 
@@ -5,40 +6,40 @@ export const initialState = {
   list: []
 }
 
-export default (state = initialState, action) => {
+export default (state = initialState, { type, payload }) => {
   let index = null
 
   const findTransactionById = id => (
     _.findIndex(state.list, transaction => transaction.id === id)
   )
 
-  switch (action.type) {
+  switch (type) {
     case types.LOAD_TRANSACTIONS:
-      return action.payload || initialState
+      return payload || initialState
     case types.CREATE_TRANSACTION:
       return {
         ...state,
-        list: [...state.list, action.payload]
+        list: [...state.list, payload]
       }
     case types.UPDATE_TRANSACTION:
-      index = findTransactionById(action.payload.id)
+      index = findTransactionById(payload.id)
       return {
         ...state,
-        list: [...state.list.slice(0, index), action.payload, ...state.list.slice(index + 1)]
+        list: [...state.list.slice(0, index), payload, ...state.list.slice(index + 1)]
       }
     case types.DELETE_TRANSACTIONS:
       return {
         ...state,
-        list: state.list.filter(transaction => action.payload.indexOf(transaction.id) === -1)
+        list: state.list.filter(transaction => payload.indexOf(transaction.id) === -1)
       }
     case types.ADD_TRANSACTIONS:
       return {
         ...state,
-        list: [...state.list, ...action.payload]
+        list: [...state.list, ...payload]
       }
     case types.APPLY_EXACT_RULE:
       // eslint-disable-next-line no-case-declarations
-      const { match, rules } = action.payload
+      const { match, rules } = payload
       return {
         ...state,
         list: state.list.reduce((result, transaction) => {
@@ -47,13 +48,28 @@ export default (state = initialState, action) => {
               ...result,
               {
                 ...transaction,
-                category: transaction.description in rules ? rules[transaction.description].category : undefined
+                categoryId: transaction.description in rules
+                  ? rules[transaction.description].categoryId
+                  : undefined
               }
             ]
           }
           return [...result, transaction]
         }, [])
       }
+    case types.UPATE_TRANSACTION_FIELD_IF_MATCHED:
+      return {
+        ...state,
+        list: state.list.reduce((result, transaction) => ([
+          ...result,
+          {
+            ...transaction,
+            categoryId: payload.values.includes(transaction[payload.fieldName])
+              ? payload.newValue
+              : transaction[payload.fieldName]
+          }
+        ]), [])
+      }
     default:
       return state
   }
diff --git a/src/store/transactions/types.js b/src/store/transactions/types.js
index 919eba3..e62a088 100644
--- a/src/store/transactions/types.js
+++ b/src/store/transactions/types.js
@@ -2,6 +2,7 @@ export default {
   LOAD_TRANSACTIONS: 'LOAD_TRANSACTIONS',
   CREATE_TRANSACTION: 'CREATE_TRANSACTION',
   UPDATE_TRANSACTION: 'UPDATE_TRANSACTION',
+  UPATE_TRANSACTION_FIELD_IF_MATCHED: 'UPATE_TRANSACTION_FIELD_IF_MATCHED',
   ADD_TRANSACTIONS: 'ADD_TRANSACTIONS',
   DELETE_TRANSACTIONS: 'DELETE_TRANSACTIONS',
   APPLY_EXACT_RULE: 'APPLY_EXACT_RULE'
diff --git a/src/store/user/__tests__/actions.test.js b/src/store/user/__tests__/actions.test.js
index f3e5eda..4e390f0 100644
--- a/src/store/user/__tests__/actions.test.js
+++ b/src/store/user/__tests__/actions.test.js
@@ -167,13 +167,7 @@ describe('user actions', () => {
             { type: 'LOAD_ACCOUNTS', payload: undefined },
             { type: 'LOAD_TRANSACTIONS', payload: undefined },
             { type: 'LOAD_EXCHANGE_RATES', payload: undefined },
-            {
-              type: 'LOAD_BUDGET',
-              payload: {
-                categories: budgetInitialState.categories,
-                colours: budgetInitialState.colours
-              }
-            },
+            { type: 'LOAD_BUDGET', payload: undefined },
             { type: 'HIDE_OVERLAY' }
           ])
           done()
diff --git a/src/store/user/actions.js b/src/store/user/actions.js
index f37ba8a..a941700 100644
--- a/src/store/user/actions.js
+++ b/src/store/user/actions.js
@@ -42,11 +42,7 @@ export const loadUserData = () => (dispatch, getState) => {
       dispatch(loadAccounts((state || {}).accounts))
       dispatch(loadTransactions((state || {}).transactions))
       dispatch(loadExchangeRates((state || {}).exchangeRates))
-      dispatch(loadBudget({
-        ...(state || {}).budget,
-        categories: budgetInitialState.categories,
-        colours: budgetInitialState.colours
-      }))
+      dispatch(loadBudget((state || {}).budget))
       dispatch(hideOverlay())
     }).catch((error) => {
       throw error
@@ -87,7 +83,7 @@ export const handleBlockstackLogin = () => (dispatch) => {
 }
 
 export const resetState = () => (dispatch, getState) => {
-  const { settings } = getState().settings
+  const { settings } = getState()
   if (settings === undefined) {
     dispatch(loadSettings(settingsInitialState))
   } else {